CodeYourFuture · mikinet · Nov 9, 2020 · Nov 10, 2020 · Nov 10, 2020 · Nov 10, 2020
diff --git a/css/style.css b/css/style.css
@@ -1,8 +1,151 @@
-/**
- * Add your custom styles below
- * 
- * Remember: 
- * - Be organised, use comments and separate your styles into meaningful chunks
- *    for example: General styles, Navigation styles, Hero styles, Footer etc.
- * 
- */
+/******************** CSS STYLES **********************/
+
+/*
+/***************** GENERAL ********************
+*/
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  width: 80%;
+  margin: auto;
+  border: 1px solid #e9e3e3;
+  padding: 0px;
+  background-color: #fcf8f8;
+}
+
+figure {
+  margin: 20px 0px 30px 0px;
+  padding: 0px;
+}
+
+h1 {
+  font-weight: 700;
+}
+
+h2 {
+  font-weight: 600;
+}
+
+p {
+  font-weight: 300;
+}
+
+a {
+  text-decoration: none;
+}
+/*
+/****************** HEADER ********************
+*/
+.site-header {
+  background-color: #a9a9a9;
+  width: 100%;
+  margin: 0px;
+  padding: 15px 0px 10px;
+  border-bottom: 1px solid #8b0000;
+  border-bottom-width: 2px;
+}
+/******************* Logo *********************/
+.logo {
+  font-size: 40px;
+  font-weight: 800;
+  color: #8b0000;
+  margin: 0px;
+  padding: 10px;
+  padding-bottom: 0px;
+}
+
+.motto {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0px;
+  padding: 10px;
+  padding-top: 0px;
+}
+
+/*
+/******************* MAIN *********************
+*/
+.content {
+  padding: 20px;
+  padding-right: 40px;
+  background-color: snow;
+}
+
+.content-header {
+  text-align: center;
+  margin: auto;
+  margin-bottom: 20px;
+}
+
+/***************** ARTICLES *******************/
+
+/************** Article Content ***************/
+
+.article {
+  margin: 0px 0px 50px;
+}
+
+.article:first-child {
+  border: 1px solid #8b0000;
+  background-color: #7fffd4;
+  padding: 5px 20px;
+}
+
+.article h2 {
+  color: #8b0000;
+}
+.article p {
+  line-height: 24px;
+  text-align: justify;
+}
+
+.article p:first-of-type:first-line {
+  text-indent: 15px;
+}
+
+article .link {
+  font-weight: 500;
+  background-color: #add8e6;
+  color: #8b0000;
+  padding: 0px 5px;
+  border-style: outset;
+}
+
+/************** Content Images ****************/
+.content-image {
+  width: 600px;
+  height: 400px;
+}
+
+.image-description {
+  font-size: 14px;
+  width: 600px;
+  font-weight: 200;
+  color: #8b0000;
+}
+/*
+/****************** FOOTER ********************
+*/
+.footer {
+  display: block;
+  font-weight: 300;
+  background-color: #000;
+  color: #eee;
+  padding: 10px 15px;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
diff --git a/images/isaac-newton-1.jpg b/images/isaac-newton-1.jpg
diff --git a/images/isaac-newton-2.jpg b/images/isaac-newton-2.jpg
diff --git a/images/isaac-newton-3.jpg b/images/isaac-newton-3.jpg
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>My Blog</title>
+    <title>Tributes - Isaac Newton</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
@@ -16,7 +16,90 @@
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+    <!--Start Header-->
+    <header class="site-header">
+      <h1 class="logo">Tributes</h1>
+      <p class="motto">A place where people of significance are remembered</p>
+    </header>
+    <!--End Header-->
+
+    <!--Start Main-->
+    <main class="main content">
+      <section class="article-section">
+        <header class="content-header">
+            <h2 class="title">Sir Isaac Newton - A Short Biography</h2>
+        </header>
+        <article class="article">
+          <h2 class="subtitle">Early Life and Education</h2>
+          <div class=article-content>
+            <p>Isaac Newton was born on January 4, 1643, in Woolsthorpe, Lincolnshire, England. The son of a farmer who died three
+              months before he was born, Newton spent most of his early years with his maternal grandmother after his mother
+              remarried. His education was interrupted by a failed attempt to turn him into a farmer, and he attended the King’s
+              School in Grantham before enrolling at the University of Cambridge’s Trinity College in 1661.</p>
+            <figure>
+              <img src="images/isaac-newton-1.jpg" alt="Young Isaac"
+                class="content-image">
+              <figcaption class="image-description">Isaac Newton as a young man (Image credit: https://www.thefamouspeople.com)</figcaption>
+            </figure>
+            <p>Newton studied a classical curriculum at Cambridge, but he became fascinated by the works of modern philosophers such
+              as René Descartes, even devoting a set of notes to his outside readings he titled “Quaestiones Quaedam Philosophicae”
+              (“Certain Philosophical Questions”). When the Great Plague shuttered Cambridge in 1665, Newton returned home and began
+              formulating his theories on calculus, light and color, his farm the setting for the supposed falling apple that
+              inspired his work on gravity.<br>
+            <b>(Cite: History website</b> <a href="https://www.history.com/topics/inventions/isaac-newton" class="link">article</a><b>)</b></p>
+          </div>
+        </article>
+        <article class="article">
+          <h2 class="subtitle">Academic Career</h2>
+          <div class="article-content">
+            <p>In January 1665 Newton took the degree of Bachelor of Arts. The persons appointed (in conjunction with the proctors,
+              John Slade of Catharine Hall, Cambridge, and Benjamin Pulleyn of Trinity College, Newton's tutor) to examine the
+              questionists were John Eachard of Catharine Hall and Thomas Gipps of Trinity
+              University. It is a curious accident[according to whom?] that we have no information about the
+              respective merits of the candidates for a degree in this year since the "ordo senioritis" of the Bachelors of Arts for
+              the year is omitted in the "Grace Book".</p>
+            <figure>
+              <img src="images/isaac-newton-2.jpg" alt="Image - Isaac Newton and a manuscript"
+                class="content-image">
+              <figcaption class="image-description">Isaac Newton and one of his manuscripts written in Greek (Image credits: https://eu.greekreporter.com)
+              </figcaption>
+            </figure>
+            <p>It is supposed that it was in 1665 that the method of fluxións (his term for calculus of variations) first
+              occurred to Newton's mind. There are several papers in Newton's handwriting bearing dates 1665[11][better source
+              needed]
+              and 1666 in which the method is described, in some of which dotted or dashed letters are used to represent fluxions
+              (i.e. derivatives), and in some of which the method is explained without the use of dotted letters.</p>
+
+            <p>Both in 1665 and 1666 Trinity College was dismissed on account of the Great Plague of London...<br>
+              <a href="https://en.wikipedia.org/wiki/Early_life_of_Isaac_Newton#Academic_career" class="link">Continue reading on
+                Wikipedia</a></p>
+          </div>          
+        </article>
+        <article class="article">
+          <h2 class="subtitle">Legacy</h2>
+          <div class="article-content">
+            <figure>
+              <img src="images/isaac-newton-3.jpg"
+                alt="Image - Isaac Newton and his prism experiment" class="content-image">
+              <figcaption class="image-description">Sir Isaac Newton performing his legendary prism experiment. (Image credits: https://smudgyguide.net)
+              </figcaption>
+            </figure>
+            <p>Sir Isaac Newton's accomplishments border on the uncanny, as does his image in the world of science. As the historian
+              Mordechai Feingold has written, "With time, the historical Newton receded into the background, overshadowed by the
+              very
+              legacy he helped create. Newton thus metamorphosed into science personified." So what is that legacy? What were those
+              accomplishments? Here, familiarize yourself with Newton's greatest contributions...<br>
+              <a href="https://www.pbs.org/wgbh/nova/article/newton-legacy/" class="link">Read More</a></p>
+            </div> 
+        </article>
+      </section>      
+    </main>
+    <!--End Main-->
+
+    <!--Start Footer-->
+    <footer class="footer">
+      <span><a href="#" target="_self" class="left">Tributes</a>, &copy;Copy Right 2020</span><span><a href="#" target="_self" class="right">Back to top</a></span>
+    </footer>
+    <!--End Footer-->
   </body>
-</html>
+</html>