CodeYourFuture · gulnihaln · May 17, 2021 · May 17, 2021 · May 18, 2021 · May 18, 2021
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -16,21 +16,23 @@ Please complete the details below this message
 
 # Your Details
 
-- Your Name:
-- Your City:
-- Your Slack Name:
+- Your Name: Gulnihal 
+- Your City: Manchester
+- Your Slack Name: Gulnihal
 
 # Homework Details
 
-- Module:
-- Week:
+- Module: HTML & CSS
+- Week: 1
 
 # Notes
 
 - What did you find easy?
+creating semantic elements in html
 
 - What did you find hard?
-
+positioning in css
 - What do you still not understand?
 
 - Any other notes?
+positioning has not been finished yet
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,131 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+ /*full page background color */
+ html {
+    background-color:rgb(221, 240, 240)
+ }
+
+ /*header styling*/
+ .header-container {
+
+    position: fixed;
+    top: 0;
+    left: 0;
+
+}
+header {
+
+    background-color:rgb(177, 245, 245);
+    top: 0;
+    display: flex;
+    width: 100%;
+    height: 100px;
+
+}
+/*logo style*/
+.logo {
+    display: flex;
+    margin-left: 0;
+
+}
+.logo img {
+    max-width: 100%;
+    display: block;
+    height: 100%;
+    }
+
+    /* title*/
+h1 {
+    text-align: center;
+    justify-content:left ;
+}
+/* navbar style*/
+li {
+    list-style: none;
+}
+nav li {
+    display: inline;
+    padding: 2em;
+}
+nav {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+}
+
+nav a {
+    text-decoration: none;
+    color: brown;
+
+}
+/*body style*/
+body {
+    font-size: 16px;
+    margin: 160px 60px 0 100px;
+    line-height: 1.5;
+}
+h3{
+    padding-left: 60px;
+}
+p {
+    text-align:left;
+    font-family: Cambria;
+    padding-left: 60px;
+}
+
+
+/* article style */
+article {
+    display: grid;
+    align-items: center;
+    justify-items: left;
+
+
+}
+
+article:first-child {
+    background-color:rgba(253, 253, 253, 0.5);
+    font-family: 'Times New Roman';
+    font-size: 18px;
+    word-spacing: 12px;
+    border: 2pßx solid rgb(255, 255, 255);
+    border-radius: 6px;
+
+}
+
+.article a {
+    border: none;
+    border-radius: 6px;
+    background-color: silver;
+    color: black;
+    font-family: initial ;
+    list-style: none;
+    text-decoration: none;
+    margin-left: 400px;
+    margin-bottom: 20px;
+    padding: 3px 5px 3px 5px;
+}
+
+/* images' style */
+
+img {
+    max-width: 280px;
+    float: left;
+
+}
+
+
+/* footer styling*/
+
+footer span {
+    color:rgb(137, 146, 146);
+    display: flex;
+    justify-content: flex-end;
+    font-size: 0.8em;
+    margin-left: 50px;
+
+      }
diff --git a/index.html b/index.html
@@ -15,8 +15,72 @@
     <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>
+
+      <body>
+      <div class="header-container"> 
+      <header id="header">
+
+        <div class="logo">
+          <img id="logo-img" 
+          src="logo.png" alt="blog logo"/>
+
+        </div>
+      <h1> mum's blog </h1>
+      <nav id="nav-bar">
+        <ul>
+            <li> <a  href="/">Recent posts</a></li>
+            <li> <a  href="/">Babies</a></li> 
+            <li> <a  href="/">Toddlers</a></li>
+            <li> <a  href="/">Travel</a></li>
+
+        </ul>
+
+      </nav>
+  </header>
+  </div>
+
+  <main>
+      <section class="article">
+        <h2>Recent posts</h2>
+        <div>
+          <article>
+            <h3> What do you do when your baby wakes up every hour</h3>
+            <img id="sleeping-baby"
+            src="https://www.childrens.com/wps/wcm/connect/childrenspublic/d5c62f95-b90c-40cf-8583-02f194b42818/shutterstock_397223029_800x480.jpg?MOD=AJPERES&CACHEID=ROOTWORKSPACE.Z18_MP541240M8QL00A94691A238J3-d5c62f95-b90c-40cf-8583-02f194b42818-nva8nic" alt="sleeping baby"/>
+            <p>Curabitur eget nisl massa. Nam varius, ipsum eu faucibus fermentum, nisl orci pharetra neque, vel tincidunt purus mi non lorem. Ut commodo nunc nec suscipit dictum. Fusce magna lectus, porta non quam pellentesque, faucibus pellentesque felis. Etiam sollicitudin porttitor massa sed accumsan. Praesent et ex pellentesque, dictum orci a, porttitor neque. Etiam mattis eget mauris ut semper. Cras eu est eleifend, imperdiet justo sit amet, aliquam massa. Sed ac est eu ex auctor rutrum. Quisque elementum et augue at imperdiet. Pellentesque aliquet vitae elit in lobortis. In hac habitasse platea dictumst. Pellentesque congue tincidunt nibh eget aliquet. </p>
+              <a href="https://www.happiestbaby.com/blogs/baby/baby-waking-night-hungry" target="_blank">Read more </a> 
+            </article>
+
+
+          <article>
+            <h3>Play ideas to encourage toddler talking</h3>
+            <p>Cras nec hendrerit enim. Pellentesque maximus hendrerit ultricies. Sed ac dictum neque, ut placerat nulla. Duis dapibus nisi eget quam cursus, et ultrices eros aliquam. Nunc vitae felis in dolor lobortis congue posuere quis nisl. Aliquam nisi lacus, volutpat ut magna ut, faucibus aliquet ante. Cras egestas libero non dapibus lobortis. Suspendisse potenti. Suspendisse ultricies lacus mi, sit amet consectetur quam aliquet ac. Donec volutpat nisi ac orci hendrerit semper.</p>
+            <img id="toddler" 
+            src="https://www.babycenter.com/ims/2015/04/86501122_wide.jpg.pagespeed.ce.jcUhKuwSwM.jpg" alt="toddler talk" />
+            <a href="https://raisingchildren.net.au/toddlers/play-learning/play-toddler-development/talking-play-toddlers" target="_blank">Read more </a> 
+          </article>
+
+
+          <article>
+            <h3>You're vaccinated, but your kids aren't... </h3>
+            <p>Pellentesque nec nulla at lorem gravida convallis. Vestibulum nec ipsum arcu. Suspendisse a pulvinar sem. Suspendisse lobortis sit amet justo non viverra. Integer non sodales turpis. Integer sit amet dui id dui hendrerit pretium. Duis id ipsum nec felis convallis porta vel eu quam.</p>
+            <img id="vaccine"
+            src="https://khn.org/wp-content/uploads/sites/2/2020/12/GettyImages-1272627545.jpg" alt="kid's vaccination" />
+            <a href="https://www.healthline.com/health-news/im-vaccinated-my-kids-arent-whats-safe-for-us-to-do" target="_blank">Read more </a> 
+          </article>
+
+        </div>
+      </section>
+  </main>
+
+  <footer>
+
+    <span> Aliquam erat volutpat. Aliquam mattis ipsum a nisl vestibulum, eu mollis purus accumsan. Suspendisse urna turpis, imperdiet quis leo eu, dictum faucibus felis. Curabitur quis vehicula erat. Suspendisse sollicitudin magna eget dui mattis, non volutpat mauris dapibus. </span>
+  </footer>
+
+    </body>
 </html>
diff --git a/logo.png b/logo.png