Skip to content

Commit

Permalink
Merge pull request #1 from msaaddev/master
Browse files Browse the repository at this point in the history
📦NEW: modularity and indexing + 🐛FIX: tags
  • Loading branch information
iqrafatimame authored Oct 13, 2019
2 parents e38a99a + 59a848f commit ca51026
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 214 deletions.
File renamed without changes
156 changes: 156 additions & 0 deletions assets/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
* {
margin: 0;
padding: 0;
}

/*Tablet Lanescape*/
@media screen and(max-width: 1060px) {
#primary {
width: 67%;
}
#secondary {
width: 30%;
margin-left: 3%;
}
}

/*Tabled portrait */
@media screen and(max-width: 768px) {
#primary {
width: 100%;
}
#secondary {
width: 100%;
margin-left: 3%;
margin: 0;
border: none;
}
}
/*Styling header part*/
header {
width: 100%;
overflow: hidden;
height: 140px;
background-color: white;
color: black;
font-family: 'Abril Fatface';
font-size: 140%;
text-align: center;
}
/*Top name "NELSON MANDELA" */
.name {
padding-top: 15px;
}

.description {
padding-top: 15px;
font-size: 80%;
font-family: 'Abril Fatface';
}
/*main part of the page*/
.main {
height: 700px;
width: 100%;
}
/*div for image*/
div.column1 {
float: left;
width: 70%;
height: 700px;
}
/*div for quote*/
div .quote {
padding-top: 70px;
height: 200px;
margin: 0;
text-align: center;
font-size: 20px;
font-family: 'Quattrocento', serif;
}
/*writer name*/
.writer {
text-align: justify;
padding-top: 30px;
padding-left: 500px;
}
/*Column for quick facts*/
div.column2 {
float: left;
width: 30%;
height: 700px;
}
/*Styling Nelson's image*/
.image {
height: 500px;
width: 100%;
}
/*Quick info div*/
.quick_info {
height: 700px;
width: 300px;
margin: auto;
border: solid 2px gray;
text-align: center;
}
.quick_fact {
padding-top: 40px;
font-weight: bold;
font-size: 60x;
}
/*questions in wuick info*/
.heading {
color: gray;
padding-top: 15px;
}
.Answer {
font-family: 'Montserrat';
text-align: center;
}
/*class for icons (twitter, facebook, youtube)*/
.fa {
padding: 15px;
margin-top: 50px;
margin-right: 15px;
font-size: 30px;
width: 15px;
text-align: center;
text-decoration: none;
}

/* Add a hover effect */
.fa:hover {
opacity: 0.7;
}

/* Facebook */
.fa-facebook {
background: #3b5998;
color: white;
}

/* Twitter */
.fa-twitter {
background: #55acee;
color: white;
}
/* Youtube */
.fa-youtube {
background-color: #c4302b;
color: white;
}
/* Footer styling */
.end {
height: 70px;
margin-top: 50px;
background-color: black;
width: 100%;
overflow: hidden;
}
/*links in footer*/
ul li {
float: right;
color: white;
padding: 20px;
list-style: none;
background-color: black;
}
29 changes: 13 additions & 16 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,14 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximun-sacle=1
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximun-sacle=1
user-scaleable=none">
<meta name="HandleIdFriendly" content="true">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta
<!-- stylesheet for fonts-->
<link href="https://fonts.googleapis.com/css?family=Domine|Dosis|Lobster|Ma+Shan+Zheng|Source+Code+Pro&display=swap" rel="stylesheet">
<!-- main stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- stylesheet for reaset -->
<link rel="stylesheet" href="reset.css.txt">
<link rel="stylesheet" href="./assets/style.css">
<!-- stylesheet for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Tribute Page</title>
Expand All @@ -21,45 +18,45 @@
<!-- HEADER -->
<header>
<h1 class="name"> Nelson Mandela </h1>
<p class="description"> First black president of South Africain 1994, serving until 1999. </p>
<p class="description"> First black president of South Africain 1994, serving until 1999. </p>
</header>
<!-- HEADER ends-->

<!-- MAIN starts-->
<main class="main">
<!--DIV for Image and quote starts-->
<div class="column1">
<img class="image" src="nelson-mandela-quote-monochrome-smiling-wallpaper.jpg">
<img class="image" src="/assets/img.jpg">
<div class="quote">
<q>I hate race discrimination
most intensely and in all
<q>I hate race discrimination
most intensely and in all
its manifestations.<br>
I have fought it all during my life;
I fight it now, and will do so<br> until
I have fought it all during my life;
I fight it now, and will do so<br> until
the end of my days. </q>
<p class="writer"> —Nelson Mandela </p>
</div>
</div>
</div>
<!-- DIV for image and quote ends-->
<div class="column2">
<!-- DIV for quick info starts-->
<div class="quick_info">
<h3 class="quick_fact"> QUICK FACTS</h3>
<h5 class="heading">NAME </h4>
<h5 class="heading">NAME </h5>
<h5 class="Answer">Nelson Mandela</h5>
<h5 class="heading"> BIRTH DATE </h5>
<h5 class="Answer"> july 18,1918 </h5>
<h5 class="heading"> DEATH DATE </h5>
<h5 class="Answer"> December 5,2013</h5>
<h5 class="heading"> EDUCACTION </h5>
<h5 class="Answer">
<h5 class="Answer">
<p>
University College of Fort Hare,<br>
Wesleyan College,
University of <br>Witwatersrand,
Johannesburg,<br> University of London, <br>
Clarkebury Boarding Institute<br>
</p>
</p>
</h5>
<h5 class="heading"> DID YOU KNOW? </h5>
<h5 class="Answer"> hello fdjfh fhs fvhsf </h5>
Expand Down Expand Up @@ -94,4 +91,4 @@ <h5 class="Answer"> Johannesburg, South Africa</h5>
</div>
<!-- FOOTER ends -->
</body>
</html>
</html>
48 changes: 0 additions & 48 deletions reset.css.txt

This file was deleted.

Loading

0 comments on commit ca51026

Please sign in to comment.