diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..8e3b771b
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "secondchild"
+    ]
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 61644f44..f42b9c34 100644
--- a/README.md
+++ b/README.md
@@ -25,3 +25,5 @@ It should include the following elements:
   <a href="blog-sketch-week-1.png" target="blank">
     <img src="blog-sketch-week-1.png" style="border: 1px solid #bababa;">
   </a>
+
+   
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 75e9841e..f647ff35 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,3 +6,181 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+/* nav */
+/* body  */
+body {
+  box-sizing: border-box;
+  width: 100vw;
+  overflow-x: hidden;
+  background-image: url(../jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg);
+  margin: 0;
+}
+/* logo */
+.logo {
+  width: 100px;
+  height: 60px;
+  border-radius: 30px;
+  opacity: 0.3;
+  margin-top: 0.5rem;
+}
+ 
+.logo:hover {
+  opacity: 1.0;
+  box-shadow: 10px 10px 18px rgb(230, 4, 4);
+}
+/* nav */
+.topnav {
+  display: block;
+  position: static;
+  /* top: 1rem; */
+  width: 100%; 
+  margin-top: -3rem; 
+}
+.topnav a {
+  float: right;
+  /* color: darkblue; */
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 25px;
+  font-weight: bold;
+  text-align: center;
+  padding: 15px 25px;
+  /* background-color: rgb(22, 109, 33); */
+  color: black;
+  /* border: 2px solid black; */
+  width: 75px;
+  transition: all 0.3s ease;
+}
+/* Change the color of links on hover */
+.nav-link:hover {
+  color: black;
+  background: #96e0e9;
+  box-shadow: 5px 10px 18px red inset;
+  padding: 25px 15px 10px 15px;
+  border-top-left-radius: 1.5rem;
+}
+#active {
+  background-color: rgb(171, 173, 171);
+  color: black;
+  border-bottom: none;
+  border-top-left-radius: 2rem;
+}
+/* * {
+  margin: 0;
+  padding: 0;
+} */
+
+/* main */
+main {
+  margin-top: 80px;
+}
+main img {
+  width: 100%;
+  height: 150px;
+  margin-top: 0;
+}
+.main-container {
+  display: flex;
+  position: relative;
+  /* background-color: aqua; */
+  /* background-image: url(../jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg); */
+}
+.main h1 {
+  text-align: center;
+  font-size: 40px;
+  /* background-color: black; */
+  /* margin-top: 5rem; */
+}
+.article-1:first-child {
+  color: red;
+}
+.article-1 {
+  margin: 5px 40px;
+  font-size: 30px;
+}
+.main-container-2 {
+  display: flex;
+  position: relative;
+  /* background-color: aqua; */
+}
+.main h2 {
+  text-align: center;
+  font-size: 40px;
+}
+.article-2 {
+  margin: 50px;
+  font-size: 30px;
+  /* border: 1px solid; */
+   background-image: url(../jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg);
+   padding: 25px;
+}
+.article-2:first-child {
+  color: blue;
+}
+.main h1 {
+  text-align: center;
+  font-size: 40px;
+}
+.article__read-more a {
+  font-size: 1.5rem;
+  font-weight: 700;
+  /* color: #c05326; */
+  text-decoration: none;
+}
+
+.article__read-more a:hover,
+.article__read-more a:focus {
+  text-decoration: underline;
+}
+/* aside */
+aside {
+  margin: 40px;
+  font-size: 25px;
+  border: 2px solid rgb(181, 163, 163);
+  padding: 20px;
+  /* background-color: rgb(212, 216, 219); */
+  box-shadow: 5px 10px 18px rgb(80, 53, 53)
+}
+aside h3 {
+  text-align: center;
+}
+
+.main h4 {
+  text-align: center;
+  font-size: 40px;
+}
+.about p {
+  margin: 40px;
+  font-size: 30px;
+}
+/* footer */
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100px;
+  /* background-color: aquamarine; */
+}
+/* .footer a {
+  font-size: 30px;
+  text-align: center;
+  margin-bottom: 80px;
+} */
+.go {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-bottom: 7%;
+  font-size: 2.5rem;
+}
+.fa-github {
+  margin-right: 20px;
+}
+.footer h5 {
+  display: flex;
+  position: absolute;
+  margin-left: 500px;
+  /* background-color: blueviolet; */
+}
diff --git a/download(1).png b/download(1).png
new file mode 100644
index 00000000..bbf09b0d
Binary files /dev/null and b/download(1).png differ
diff --git a/index.html b/index.html
index 67dfc7f5..4f2c3cef 100644
--- 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>HTML/CSS Week-1 task</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
@@ -14,9 +14,193 @@
     />
     <link rel="stylesheet" href="css/style.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
   </head>
+  <!-- Add your HTML markup here -->
+  <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+
   <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+    <header class="header">
+      <img class="logo" src="./download(1).png" alt="" />
+      <nav class="topnav" aria-label="Main Site Links.">
+        <a class="nav-link" href="#about">About</a>
+        <a class="nav-link" href="#videos">Videos</a>
+        <a class="nav-link" href="#gallery">Gallery</a>
+        <a id="active" class="nav-link" href="index.html">Home</a>
+      </nav>
+    </header>
+    <main class="main">
+      <section>
+        <h1>Lorem, ipsum dolor.</h1>
+        <img src="./jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="" />
+        <h1>Lorem ipsum dolor sit amet consectetur.</h1>
+        <div class="main-container">
+          <article class="article-1">
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus
+              quas esse officia aliquam illo suscipit nisi ducimus, velit iste
+              porro aspernatur fugiat optio, laborum explicabo exercitationem
+              eaque. Natus error laudantium tempore, quia repellendus unde odio
+              vitae veniam cum quod corporis consectetur eum iste. Accusamus a,
+              veritatis sequi fugiat culpa perferendis ipsam. Esse dicta
+              aspernatur neque amet non sint iure voluptate ullam minima sed,
+              tenetur atque, quo id at qui ipsum consectetur ut aperiam,
+              assumenda laudantium. Quidem ipsa voluptatibus repudiandae
+              blanditiis vitae? Delectus officiis aperiam excepturi fuga ullam
+              maiores vitae, tempore placeat quis sunt nesciunt, est atque nulla
+              quaerat <a class="link" href="#">magnam repudiandae</a>.
+            </p>
+            <p class="article__read-more">
+                <a href="#">
+                  <span class="arrow-right"></span>
+                  Learn more
+                </a>
+              </p>
+          </article>
+          <img src="./jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg" alt="" style="width: 300px; height: 550px; margin-top: 35px;"0px">
+          <article class="article-1">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              Temporibus reprehenderit veritatis, iusto qui porro molestiae.
+              Natus vero corrupti cupiditate quisquam eum fugit dolore deleniti
+              veniam iste fuga laborum omnis, tempora nobis hic et?
+              <a class="link" href="#">Blanditiis</a> rem minus modi doloribus
+              architecto assumenda accusantium iste ducimus sunt laboriosam quod
+              ipsum harum, magnam similique nihil sed aspernatur reprehenderit
+              eligendi molestias? Delectus a expedita mollitia quas amet
+              sapiente unde esse laudantium corporis voluptatibus magni
+              voluptates at, molestiae inventore est neque veritatis iste
+              molestias, a alias dolor dicta voluptatem. Placeat illo illum nam
+              provident quasi incidunt,
+              <a class="link" href="#">aliquid saepe</a> eaque dignissimos
+              accusantium necessitatibus distinctio pariatur. Recusandae,
+              quibusdam quasi.
+            </p>
+            <p class="article__read-more">
+                <a href="#">
+                  <span class="arrow-right"></span>
+                  Learn more
+                </a>
+              </p>
+          </article>
+        </div>
+      </section>
+      <section>
+        <h2>Lorem ipsum dolor sit amet.</h2>
+        <div class="main-container-2">
+          <article class="article-2">
+            <p>
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia,
+              hic illo. Temporibus, reprehenderit consequuntur quis quam tempora
+              perferendis est quo minus dolores officiis id fugiat enim aliquam
+              eligendi. Odit voluptas eligendi quis itaque culpa expedita et
+              repudiandae voluptate, neque voluptates modi veritatis dolore
+              quibusdam pariatur? Enim accusantium eaque nulla inventore quia
+              laboriosam et ea maxime necessitatibus? Id pariatur recusandae
+              consequatur dolorum sed. Cumque itaque accusantium ut, placeat
+              quibusdam illo commodi molestiae magnam impedit similique dolores
+              inventore nesciunt mollitia eaque? Quam inventore similique fugit
+              deserunt, quia quasi<br /><br />
+              tempora ullam totam dolores ex voluptate maiores tempore, beatae
+              maxime sapiente, reiciendis odit eos voluptas labore et laboriosam
+              obcaecati. Sit quam quis itaque nesciunt sint eum autem,
+              repudiandae omnis dolor tempora excepturi perferendis dicta totam
+              dignissimos eos quibusdam eligendi minus temporibus perspiciatis
+              aspernatur soluta fugiat repellat natus! Facere temporibus
+              recusandae aliquid cupiditate repellendus beatae laborum in eius.
+              Quam, quia. Eos quisquam quaerat aperiam nisi est deserunt ullam
+              maiores natus omnis quae mollitia iure ipsam assumenda accusantium
+              laborum ipsum, labore, doloremque consectetur ab! Quibusdam aut,
+              voluptate amet eveniet corporis vero alias voluptates nisi
+              commodi, distinctio ipsum ex! Ipsam pariatur et modi voluptatem
+              natus quisquam, quidem veniam numquam blanditiis nisi
+              <a class="link" href="#">tenetur repudiandae</a> amet omnis ut
+              maxime?
+            </p>
+            <p class="article__read-more">
+                <a href="#">
+                  <span class="arrow-right"></span>
+                  Learn more
+                </a>
+              </p>
+          </article>
+          <aside>
+            <h3>Lorem, ipsum dolor.</h3>
+            <div>
+              <p>
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+                Numquam deserunt amet dicta molestias recusandae sapiente iste
+                itaque nisi, omnis beatae, molestiae reprehenderit quasi id,
+                minima exercitationem velit? Quas molestias, fugit tempore,
+                atque id reprehenderit, veniam ut quia nihil aut eum corrupti
+                soluta tenetur.<br /><br />
+                Dicta reprehenderit impedit quam labore illum, incidunt
+                cupiditate laborum nisi modi eligendi quis similique laboriosam
+                deserunt quia distinctio eius minus quae saepe nihil aut ut
+                debitis! Veritatis ipsam voluptate voluptatum, praesentium
+                fugiat facilis architecto distinctio optio pariatur assumenda?
+                Quas quo harum autem ea molestiae similique aspernatur, ducimus
+                dignissimos repellat iste magni sed odit a quasi architecto
+                consequuntur?
+              </p>
+              <p class="article__read-more">
+                <a href="#">
+                  <span class="arrow-right"></span>
+                  Learn more
+                </a>
+              </p>
+            </div>
+          </aside>
+        </div>
+      </section>
+      <section>
+        <h4>About.</h4>
+        <div class="about">
+          <p>
+            <strong
+              >Making origami is fun for me. Japanese paper crafts include
+              origami. Making origami is my go-to hobby in my free time, and I
+              learned how to do it on YouTube. In order to become a Fullstack
+              Web Developer at CodeYourFuture, I am now learning to code, thus I
+              spend the most of my everyday time studying computer
+              programming.</strong
+            ><br /><br />
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nam
+            iste laudantium facere placeat fugit in aperiam quo veritatis
+            tempora omnis et beatae facilis quibusdam fuga provident saepe,
+            laborum porro iusto natus tenetur rem. Consectetur quo itaque nobis
+            repudiandae corrupti nesciunt eaque ipsum dolor ea magnam minus
+            eveniet rem iure reiciendis explicabo similique eligendi velit
+            deserunt ex, temporibus labore accusamus doloribus quia quis. Earum
+            rerum obcaecati numquam dicta veritatis ab?
+          </p>
+        </div>
+      </section>
+    </main>
+    <footer class="footer">
+      <div class="go">
+        <a href="#top">Home</a>
+      </div>
+      <div>
+        <a href="https://github.com/"><i class="fa fa-github" style="font-size: 48px"></i></a>
+      </div>
+      <div>
+        <a href="https://www.linkedin.com/feed"><i class="fa fa-linkedin-square" style="font-size: 48px"></i></a>
+      </div>
+      <div class="h5">
+        <h5>Created by Dawit Abraha</h5>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg b/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg
new file mode 100644
index 00000000..66d8a101
Binary files /dev/null and b/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg differ