CodeYourFuture · Adibab · Jul 27, 2022 · Jul 27, 2022 · Jul 27, 2022 · Jul 28, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,76 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+ *{
+   margin: 0%;
+   padding: 0%;
+   box-sizing: border-box;
+ }
+ body{
+    margin: 2% 10%;
+    background-color:aliceblue;
+    color: black;
+ }
+
+ header{
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin-bottom: 2%;
+ }
+ h1 {
+   padding-bottom: 1%;
+ }
+ nav > ul{
+    display: flex;
+    justify-content: center;
+    gap: 1%;
+    list-style: none;
+    font-weight: bolder;
+    color: darkblue;
+    padding-bottom: 2%;
+
+ }
+ ul:first-child{
+    font-style: italic;
+ }
+ .summary{
+    width: 80%;
+    margin-bottom: 2%;
+ }
+ /* about article */
+
+article{
+   display: flex;
+   flex-direction: column;
+   padding-bottom: 1%;
+   border-bottom: 1px solid lightgrey;
+   margin-bottom: 5%;
+}
+ .article-header{
+   font-weight:bolder;
+   font-style: italic;
+   margin-bottom: 2%;
+ }
+ .article-image{
+   width: 80%;
+   height: 40vh;
+   margin-bottom: 2%;
+ }
+ a{
+   color: blue;
+ }
+
+ /* footer */
+ footer{
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    margin-top: 2%;
+ }
+footer> p:last-child{
+ font-size: 0.75em;
+  font-style: italic;
+}
+
+
diff --git a/index.html b/index.html
@@ -1,22 +1,118 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>My 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" />
-  </head>
-  <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <title>Hi there, it's Adiba!</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" />
+</head>
+
+<body>
+  <!-- Add your HTML markup here -->
+  <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+  <main>
+    <header>
+
+      <h1> A Mum & Ex-Investment Bank Analyst who has turned Software Developer </h1>
+      <nav>
+        <ul>
+          <li><a href=> Adiba's Dine </a> </li>
+          <span>|</span>
+          <li><a href=> Mommy,Where we are going?</a> </li>
+          <span>|</span>
+          <li><a href=>Hello Mommy!!! </a> </li>
+
+        </ul>
+      </nav>
+
+      <p class="summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi distinctio reprehenderit
+        architecto porro! Aliquam similique totam, odio quo libero laboriosam excepturi eos, nostrum, vero sapiente
+        placeat quaerat quibusdam fuga et incidunt delectus distinctio? Rem, consequuntur quaerat quos porro beatae
+        tempore sint? Harum tenetur adipisci eos deleniti mollitia accusantium labore consectetur? Lorem ipsum dolor sit
+        amet consectetur adipisicing elit. Dolores sit dignissimos magni, atque nostrum modi quisquam cupiditate tempore
+        enim. Error, praesentium nulla? Placeat modi exercitationem, obcaecati dolores vero molestiae sapiente. </p>
+    </header>
+
+    <section>
+
+
+      <article>
+        <section> 
+        <h2 class="article-header"> Adiba's Dine </h2>
+      </section>
+      <section > 
+        <img class="article-image"
+          src="https://immigrantinvest.com/wp-content/uploads/2022/04/natural-beauty-report-1.jpeg"
+          alt="natural-beauty">
+        </section>
+        <section> 
+        <p class="summary"> I like to cook dishes. From my childhood, I have seen my family arrange feasts very often.
+          My mom used to spend long hours in the kitchen making the preparation & we siblings were used to it. But
+          rarely did I participate in the cooking process even though I grew up by that time. After my marriage, my
+          first journey into the kitchen started, especially when my kid was born. To feed my family I cook at least ¾
+          times a week. Sometimes more than that. So it has become a habit (in my subconscious mind). After some days I
+          realized that cooking has become my passion. I like to cook different dishes and arrange feasts for my
+          friends, relatives & neighbors. Then thought, I should keep a memory (photos) of my dishes (which will be a
+          good memory in my older age. hahaha)& also started writing recipes in the diary so I can not only re-use them
+          but also will pass them to the next generation. That's how I started my journey towards my passion COOKING. I
+          have created a photo album “Adiba’s Dine” on my social media page where I post photos of my dishes. Soon I
+          will start writing a blog that will contain tips & tricks on cooking & definitely recipes. </p>
+        <a href="https://www.facebook.com/media/set/?set=a.10214445939495684&type=3"> "Welcome to Adiba’s Dine- “ Always
+          Open for Everyone "</a>
+        </section>
+      </article>
+
+
+      <article> 
+        <Section> 
+
+
+        <h2 class="article-header"> Mommy, Where we are going today!! </h2>
+      </Section>
+      <section > 
+        <img class="article-image"
+          src="https://upload.wikimedia.org/wikipedia/commons/1/1a/24701-nature-natural-beauty.jpg"
+          alt="natural-beauty">
+
+        </section>
+        <p class="summary">
+          I like to go for a walk with my kid. So each week pretty much every day I along with my kid go outside to
+          enjoy walking & playing. Here, the most challenging is finding out a good park or play area. Of course, my kid
+          isn't willing to go to the same place every day. So I keep my eye on social media to look for places that are
+          enjoyable & new.
+          Below is a link to a social page where people shares their & children's facility experiences with different
+          park & places.
+        </p>
+        <a href="https://www.facebook.com/wherewegoingmummy"> Where we are going today!! </a>
+      </article>
+
+      <article>
+        <h2 class="article-header"> Hello Mommy!!! </h2>
+        <img class="article-image"
+          src="https://www.montessorinature.com/wp-content/uploads/2017/03/Toddler-books-Montessori-Classroom-7.jpg"
+          alt="natural-beauty">
+        <p class="summary">Montessori is a method of education that is based on self-directed activity, hands-on
+          learning and collaborative play. In Montessori classrooms children make creative choices in their learning,
+          while the classroom and the highly trained teacher offer age-appropriate activities to guide the process. </p>
+        <a href="https://www.themontessorinotebook.com/the-montessori-toddler/"> “The Montessori Toddler”</a>
+      </article>
+    </section>
+
+
+
+
+    <footer>
+      <h4> Work hard in silence, let your success be your noise</h4>
+      <p> Frank Ocean</p>
+      <p>&copy; All Right Reserved To ADIBA BELAYETE</p>
+    </footer>
+
+
+
+  </main>
+</body>
+
+</html>