CodeYourFuture · Angelannacyf · Sep 13, 2020 · Sep 13, 2020 · Sep 13, 2020 · Sep 13, 2020
diff --git a/week1/3-website/css/style.css b/week1/3-website/css/style.css
@@ -6,3 +6,69 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #4586de;
+  margin: 20px 80px;
+}
+
+.wrapper {
+  width: 800px;
+  margin: 0 auto;
+  border-radius: 10px;
+  background-color: white;
+}
+header {
+  padding: 50px 50px 50px 50px;
+}
+/*Navigation Style*/
+nav {
+  font-weight: bold;
+}
+header > #logo {
+  font-size: 2em;
+}
+
+main {
+  padding: 50px;
+  overflow: hidden;
+}
+
+section {
+  float: left;
+  width: 60%;
+}
+aside {
+  float: right;
+  width: 30%;
+  background-color: rgba(255, 255, 128, 0.5);
+  padding: 10px;
+}
+
+footer {
+  padding: 20px;
+  border-top: 1px solid blue;
+  text-align: center;
+}
+
+h3 {
+  margin: 10px;
+  background-color: rgb(145, 145, 49);
+  color: rgb(182, 12, 12);
+}
+/*First Article's style*/
+
+.articles:first-child {
+  background-color: gray;
+  border: 1px solid rgb(7, 7, 14);
+  padding: 20px 20px 20px 20px;
+}
+
+/*general article styles*/
+article {
+  border-bottom: 1px solid blue;
+}
diff --git a/week1/3-website/img/minimal-imac-pro-desk-mockup.jpg b/week1/3-website/img/minimal-imac-pro-desk-mockup.jpg
diff --git a/week1/3-website/index.html b/week1/3-website/index.html
@@ -16,7 +16,95 @@
     <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 -->
+    <div class="wrapper">
+      <header>
+        <div id="logo">
+          <h3>Ann's Blog</h3>
+          <h6>
+            This is My Blog here you'll find about me , my hobbies and my food
+            and travel diary
+          </h6>
+        </div>
+        <nav>
+          <a href="#about_me">About Me</a> | <a href="#hobbies">Hobbies</a> |
+          <a href="#food">Food and Travel Diary</a> |
+        </nav>
+      </header>
+      <div id="big-image">
+        <img
+          src="img/minimal-imac-pro-desk-mockup.jpg"
+          width="100%"
+          alt="awesome graphics"
+        />
+      </div>
+      <main>
+        <section>
+          <article class="articles">
+            <a id="about_me"><h3>About Me</h3></a>
+            <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>
+            <a href="" target="_blank">Read more About Me</a>
+          </article>
+
+          <article>
+            <a id="hobbies"> <h3>My Hobbies</h3> </a>
+            <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>
+            <a href="" target="_blank">Read more of my hobbies</a>
+          </article>
+          <article>
+            <a id="food">
+              <h3>Food and Travel</h3>
+            </a>
+            <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>
+            <a href="" target="_blank">Food and travel Diaries in detail</a>
+          </article>
+        </section>
+        <aside>
+          <h3>Useful Links</h3>
+          <ul>
+            <li><a href="">Ann</a></li>
+
+            <li>
+              <a target="_blank" href="http://freecodecamp.org">
+                Free Code Camp</a
+              >
+            </li>
+          </ul>
+        </aside>
+      </main>
+      <footer>&copy Ann</footer>
+    </div>
   </body>
 </html>