CodeYourFuture · OleksChep · Oct 27, 2022 · Oct 27, 2022 · Oct 27, 2022 · Oct 27, 2022
diff --git a/css/style.css b/css/style.css
@@ -2,7 +2,84 @@
  * 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.
+ * - Be organised, use comments and separate your styles into
+  meaningful chunks
+ *    for example: General styles, Navigation styles, 
+ Hero styles, Footer etc.
  * 
  */
+body {
+    font-family: "Roboto", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    margin: 10px;
+    color: rgb(85, 83, 83);
+}
+h1 {
+    text-align: center;
+    font: 4rem sans-serif;
+}
+h3 {
+    text-align: center;
+    font: 1.5rem sans-serif;
+}
+.nav_list {
+    display: flex;
+    list-style: none;
+    justify-content: center;
+}
+.nav_item {
+    padding: 2rem;
+    font-size: 1.4rem;
+}
+.nav_link {
+    color: var(--grey-dark);
+    font-weight: 400;
+    text-decoration: none;
+}
+.nav_item:hover {
+    color: #c05326;
+}
+
+/* Main*/
+.main {
+    display: flex;
+    flex-direction: column;
+}
+section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+/*First element of section*/
+section:first-child {
+   font-weight: 700;
+}
+h2 {
+    padding-right: 30%; 
+}
+section p {
+    width: 50%;
+}
+a {
+    text-decoration: none;
+}
+a:hover {
+    color: #c05326;
+}
+/*Footer*/
+hr {
+   width: 60%;
+}
+footer {
+    text-align: center;
+}
+
+
+
+
+
+
+
+
+
+
diff --git a/favicon.ico b/favicon.ico
diff --git a/img/competition.jpg b/img/competition.jpg
diff --git a/img/earth.jpg b/img/earth.jpg
diff --git a/img/favicon.ico b/img/favicon.ico
diff --git a/img/game.jpg b/img/game.jpg
diff --git a/index.html b/index.html
@@ -6,16 +6,78 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>My Blog</title>
+    <title>Oleksii Chepurnyi Blog</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
       type="text/css"
     />
     <link rel="stylesheet" href="css/style.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="shortcut icon" type="image/x-icon" href=".//favicon.ico" />
   </head>
   <body>
+    <div class="blog">
+          <!-- header-->
+     <header class="header">
+      <h1>Sense of Life</h1>
+      <h3>Blog about the meaning of life and lorem ipsum...</h3>
+      <!-- navigation-->
+      <nav>
+        <ul class="nav_list">
+          <li class="nav_item">
+            <a class="nav_link" href="#home">Home</a>
+          </li>
+          <li class="nav_item">
+            <a class="nav_link" href="#earth">Earth</a>
+          </li>
+          <li class="nav_item">
+            <a class="nav_link" href="#competition">Competition</a>
+          </li>
+          <li class="nav_item">
+            <a class="nav_link" href="#game">Blocks</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+     <main id="home" class="main">
+      <!-- 1 section-->
+      <section id="earth">
+       <h2> <a href="#">Earth is our Home</a></h2>
+      <img src="./img/earth.jpg" width=800 alt="earth"/>
+      <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.</p>
+      </section>
+      <!-- 2 section-->
+      <section id="competition"> <h2><a href="#"> Competition is development</a></h2>
+      <img src="./img/competition.jpg" width=800 alt="competition" />
+      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has
+       roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
+        Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, 
+        looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, 
+        and going through the cites of the word in classical literature, discovered the
+         undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
+          Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. 
+          This book is a treatise on the theory of ethics, very popular during the Renaissance.
+       The first line of Lorem Ipsum, Lorem ipsum dolor sit amet.. comes from a line in section 1.10.32.</p> </section>
+      <!-- 3 section-->
+      <section id="game"><h2><a href="#">Our life is a game</a></h2>
+      <img src="./img/game.jpg" width=800 alt="game"/>
+      <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.</p> </section>
+     </main>
+      <footer>
+      <hr>
+      <p> Time flies like an arrow 
+        and fruit flies like a banana.</p>
+          <p class="copy">&#169&nbspAll Rights Reserved&nbsp&nbsp"London
+             9 Lovelace&nbspOleksChep"&nbsp&nbspOct2022</p>
+      </footer>
+    </div>
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
   </body>