CodeYourFuture · scarabeo7 · Nov 6, 2020 · Nov 6, 2020 · Nov 6, 2020 · Nov 6, 2020
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,100 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+* {
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: Arial;
+    padding: 5px;
+    background: #716a94;
+  }
+
+  .header {
+    text-align: center;
+    font-family: 'Times New Roman', Times, serif;
+    color: cornsilk;
+    font-size: 30px;
+  }
+
+  /* Style the top navigation bar*/ 
+  .nav-bar {
+    width: 100%;
+    font-size: 30px;
+    padding: 5px;
+  }
+
+  /* Remove underline on nav-link*/
+  a {
+    text-decoration: none;
+    color: black;
+  }
+
+  /* Change color on hover */
+  .nav-bar a:hover {
+    background: #5d5583;
+    color: rgba(235, 229, 231, 0.863)
+  }
+
+  /*left column of page*/
+  .left-side {
+    float: left;
+    width: 75%;
+  }
+
+  /*Right column of page*/
+  .right-side {
+    float: left;
+    width: 25%;
+    padding-left: 20px;
+    text-align: justify;
+  }
+
+  /*style article section*/
+  .article {
+    background-color: rgb(192, 178, 174);
+    padding: 20px;
+    margin-top: 20px;
+ }
+
+/*use pseudo-class style on first article*/
+ .article:first-child {
+   background-color: rgb(180, 209, 75);
+ }
+
+/*style right column section*/
+ .aside {
+  background-color: rgb(126, 219, 90);
+  padding: 20px;
+  margin-top: 20px;
+}
+
+.aside > h3{
+  text-align: center;
+}
+
+/* clear floats after the columns */
+ main:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+img {
+    max-width: 100%;
+    height: 165px;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+
+  footer {
+    text-align: center;
+    background-color: rgb(78, 141, 141);
+    color: white;
+    padding: 5px;
+    margin-top: 20px;  
+  }
+
diff --git a/index.html b/index.html
@@ -15,8 +15,106 @@
     <link rel="stylesheet" href="css/style.css" />
     <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 -->
+
+    <header class="header">
+      <h1>Welcome to my Blog</h1>
+      <p>A brief description of the blog</p>
+
+      <nav class="nav-bar">
+        <a class="nav-link" href="#">Home</a> |
+        <a class="nav-link" href="#">Other Services</a> |
+        <a class="nav-link" href="#">Contact</a>
+    </nav>
+    </header>
+
+    <main>
+      <section class="left-side">
+        <article class="article">
+          <h3>What is Lorem Ipsum?</h3>
+          <p>
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
+            when an unknown printer took a galley of type and scrambled it to make a type 
+            specimen book. It has survived not only five centuries, but also the leap into 
+            electronic typesetting, remaining essentially unchanged. It was popularised in 
+            the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
+            and more recently with desktop publishing software like Aldus PageMaker including 
+            versions of Lorem Ipsum. 
+          </p>
+          <i>For more information about Lorem Ipsum<a href="https://www.lipsum.com/"
+            target="_blank"><strong> click here</strong></a></i>
+        </article>
+        <article class="article">
+          <h3>Why do we use it?</h3>
+          <p>
+            It is a long established fact that a reader will be distracted by the readable 
+            content of a page when looking at its layout. The point of using Lorem Ipsum is 
+            that it has a more-or-less normal distribution of letters, as opposed to using 
+            'Content here, content here', making it look like readable English. Many desktop 
+            publishing packages and web page editors now use Lorem Ipsum as their default model 
+            text, and a search for 'lorem ipsum' will uncover many web sites still in their 
+            infancy. Various versions have evolved over the years, sometimes by accident, 
+            sometimes on purpose (injected humour and the like).
+          </p> 
+          <i>For more information about Lorem Ipsum<a href="https://www.lipsum.com/"
+            target="_blank"><strong> click here</strong></a></i>
+
+        </article>
+        <article class="article">
+          <h3>Where can I get some?</h3>
+          <p>
+            There are many variations of passages of Lorem Ipsum available, but the majority 
+            have suffered alteration in some form, by injected humour, or randomised words which 
+            don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
+            you need to be sure there isn't anything embarrassing hidden in the middle of text. 
+            All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as 
+            necessary, making this the first true generator on the Internet. It uses a dictionary 
+            of over 200 Latin words, combined with a handful of model sentence structures, 
+            to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore 
+            always free from repetition, injected humour, or non-characteristic words etc.
+          </p>
+          <i>For more information about Lorem Ipsum<a href="https://www.lipsum.com/"
+            target="_blank"><strong> click here</strong></a></i>
+        </article>
+      </section>
+
+      <section class="right-side">
+        <aside class="aside">
+          <h3>Scarabeo 7</h3>
+          <p>An Offshore 5TH Generation Semisubmersible Drilling Rig</p>
+          <img src="https://upload.wikimedia.org/wikipedia/commons/0/04/Eni_saipem_scarabeo_7.jpg"
+          alt="image of scarabeo 7 rig">
+          <p>Scarabeo 7 is an offshore semi-submersible drilling rig for oil production. It is fitted with 
+            two heavy lift cranes that are capable of reaching all ends of the rig. It has good ship 
+            stability and seakeeping, better than drillships.
+            <br>
+            <br>
+            <strong>Components of Scarabeo 7:</strong>
+              <ul>
+                <li>Motor or power source</li>
+                <li>Drill line</li>
+                <li>Derrick</li>
+                <li>Drill floor</li>
+                <li>Drill string</li>
+                <li>Drill bit</li>
+                <li>Casing head or Wellhead</li>
+                <li>Pipe deck</li>
+                <li>Mud tank</li>
+              </ul>    
+          </p>
+          <p>For more information about Scarabeo 7 <a href="https://www.saipem.com/en/identity-and-vision/assets/scarabeo-7"
+            target="_blank"> <strong><i>click here</i></strong></a>
+          </p>
+        </aside>
+      </section>
+    </main>
+
+    <footer>
+      <p>Author: Chizim Chinuru<br>
+      <a href="http://chizim.co.uk/" target="_blank">chizim.co.uk</a></p>
+    </footer>
+
   </body>
 </html>