diff --git a/nelson-mandela-quote-monochrome-smiling-wallpaper.jpg b/assets/img.jpg similarity index 100% rename from nelson-mandela-quote-monochrome-smiling-wallpaper.jpg rename to assets/img.jpg diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..9eed558 --- /dev/null +++ b/assets/style.css @@ -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; +} diff --git a/index.html b/index.html index d48c810..7d1d3c4 100644 --- a/index.html +++ b/index.html @@ -2,17 +2,14 @@ - - - - - + Tribute Page @@ -21,7 +18,7 @@

Nelson Mandela

-

First black president of South Africain 1994, serving until 1999.

+

First black president of South Africain 1994, serving until 1999.

@@ -29,37 +26,37 @@

Nelson Mandela

- +
- I hate race discrimination - most intensely and in all + I hate race discrimination + most intensely and in all its manifestations.
- I have fought it all during my life; - I fight it now, and will do so
until + I have fought it all during my life; + I fight it now, and will do so
until the end of my days.

—Nelson Mandela

-
+

QUICK FACTS

-
NAME
+
NAME
Nelson Mandela
BIRTH DATE
july 18,1918
DEATH DATE
December 5,2013
EDUCACTION
-
+

University College of Fort Hare,
Wesleyan College, University of
Witwatersrand, Johannesburg,
University of London,
Clarkebury Boarding Institute
-

+

DID YOU KNOW?
hello fdjfh fhs fvhsf
@@ -94,4 +91,4 @@
Johannesburg, South Africa
- \ No newline at end of file + \ No newline at end of file diff --git a/reset.css.txt b/reset.css.txt deleted file mode 100644 index e9e771a..0000000 --- a/reset.css.txt +++ /dev/null @@ -1,48 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 23bbfee..0000000 --- a/style.css +++ /dev/null @@ -1,150 +0,0 @@ -*{ - 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; -} -