CodeYourFuture · Joemwa · Feb 7, 2023 · Feb 7, 2023 · Apr 22, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/images/cake_logo.jpg b/images/cake_logo.jpg
diff --git a/images/cake_pic1.jpg b/images/cake_pic1.jpg
diff --git a/images/cake_pic2.jpg b/images/cake_pic2.jpg
diff --git a/images/cake_pic3.jpg b/images/cake_pic3.jpg
diff --git a/images/cake_pic4.jpg b/images/cake_pic4.jpg
diff --git a/images/cake_pic5.jpg b/images/cake_pic5.jpg
diff --git a/images/facebook-icon.svg b/images/facebook-icon.svg
diff --git a/images/instagram-icon.svg b/images/instagram-icon.svg
diff --git a/images/twitter-icon.svg b/images/twitter-icon.svg
diff --git a/index.html b/index.html
@@ -6,10 +6,85 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Responsive Cake webpage</title>
+    <link rel="stylesheet" href="/style.css">
     <!-- Add a link to your css file here -->
+
 </head>
 
 <body>
+    <header>
+        <div class="logo-p-nav-container">
+            <div class="img-p-container">
+                    <img class="logo-img" src="/images/cake_logo.jpg" alt="logo-pic">
+                <div>
+                    <p class="nav-p">The best cakes in town</p>
+                    <p class="nav-p">delivered to your door</p>
+            </div>
+                    <nav class="nav">
+                        <a href="#">About us</a>
+                        <a href="#">Our Address</a>
+                        <a href="#">Types of Cakes</a>
+                        <a href="#">How to find us</a>
+                    </nav>
+                </div>
+        </div>
+
+
+    </header>
+    <main>
+        <section>
+             <div class="welcome-container">  <!--display: grid -->
+<!-- grid-template-columns: 1fr 470px 1fr; -->
+                <div class="left-gutter"></div>
+
+                <div class="welcome-main">
+                    <h1 class="welcome">Welcome</h1>
+                    <article class="article">
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis ab amet natus, voluptates magni mollitia. Quo accusantium exercitationem voluptatibus eius ad nulla, unde eaque modi, atque a hic reiciendis odit!</p>
+                    </article>
+                </div>
+                <div class="right-gutter"></div>
+            </div>
+        </section>
+
+       <section>
+            <div class="feature-img-container">
+                <div class="left-gutter"></div>
+
+                    <img class="first-img1" src="/images/cake_pic1.jpg" alt="random-cake-img">
+                <div class="right-gutter"></div>
+            </div>   
+       </section>        
+
+
+
+
+
+
+        <section>
+            <div class="gallery-container">
+                <div class="left-gutter"></div>
+                <div class="four-images">
+                    <img class="first-img" src="/images/cake_pic2.jpg" alt="random-cake-img">
+                    <img class="first-img" src="/images/cake_pic3.jpg" alt="random-cake-img">
+                    <img class="first-img" src="/images/cake_pic4.jpg" alt="random-cake-img">
+                    <img class="first-img" src="/images/cake_pic5.jpg" alt="random-cake-img">
+                </div>
+                <div class="right-gutter"></div>
+            </div>
+
+        </section>
+
+
+    </main>
+
+    <footer class="footer">
+        <p>Find us on social media</p>
+        <img class="footer-icon" src="/images/facebook-icon.svg">
+        <img class="footer-icon" src="/images/instagram-icon.svg">
+        <img class="footer-icon" src="/images/twitter-icon.svg">
+        <p>Copyright. All rights reserved.</p>
+    </footer>
     <!-- Add your markup here -->
 </body>
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/style.css b/style.css
@@ -1 +1,185 @@
 /*  Add your styling here */
+
+
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200&display=swap');
+
+
+
+* {
+    font-family: 'Plus Jakarta Sans', sans-serif;
+
+}
+
+body {
+
+}
+
+.four-images {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    column-gap: 10px;
+    row-gap: 10px;
+
+
+}
+
+.first-img1 {
+    width: 470px;
+    display: grid;
+    justify-content: center;
+
+}
+
+.first-img {
+    width: 235px;
+}
+
+.logo-img {
+    width: 150px;
+}
+.welcome {
+    text-align: center;
+    letter-spacing: 1.5rem;
+}
+.nav {
+    display: none;
+}
+
+.logo-p-nav-container {
+    display: grid;
+    grid-template-columns: 235px 235px;
+    grid-template-rows: 180px;
+    border: 2px solid black;
+
+}
+
+.nav-p {
+    font-size: 0.6rem;
+    text-align: end;
+    line-height: 0;
+    border: 2px solid blue;
+}
+.img-p-container {
+    display: grid;
+    grid-template-columns: 235px 235px;
+    grid-template-rows: 180px;
+    border: 2px solid brown;
+}
+
+.footer {
+    text-align: center;
+    margin-top: 5rem;
+}
+.footer-icon {
+    width: 30px;
+    margin-top: 2rem;
+}
+
+.welcome-container {
+    display: grid;
+    grid-template-columns: 1fr 470px 1fr;
+}
+
+.left-gutter {
+    border: 2px solid black;
+}
+
+.welcome-main {
+    border: 2px solid red;
+}
+.right-gutter {
+    border: 2px solid black;
+}
+
+.feature-img-container  {
+    display: grid;
+    grid-template-columns: 1fr 470px 1fr;
+    margin-bottom: 3rem;
+
+}  
+
+.gallery-container {
+    display: grid;
+    grid-template-columns: 1fr 470px 1fr;
+
+}
+
+
+
+@media screen and (min-width: 768px) {
+    .nav {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+
+    .nav a {
+      color: #333;
+      text-decoration: none;
+      font-size: 1rem;
+      margin: 0 1rem;
+      padding: 0.5rem;
+      border-radius: 5px;
+      transition: all 0.3s ease;
+    }
+
+    .nav a:hover {
+      background-color: #333;
+      color: #fff;
+    }
+
+    .logo-p-nav-container {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 180px;
+    }
+
+    .nav-p {
+      display: none;
+    }
+
+    .left-gutter,
+    .right-gutter {
+      display: none;
+    }
+
+    .welcome-main {
+      border: none;
+    }
+
+    .first-img1 {
+      width: 100%;
+    }
+
+    .four-images {
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: 1fr;
+    }
+  }
+
+
+
+
+
+
+/* 
+@media (min-width: 540px) {
+    body {
+        background-color: pink;
+
+    }
+    .feature-img-container  {
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        margin-bottom: 3rem;
+
+    }  
+}
+
+ @media (min-width: 900px) {
+    body {
+        background-color: blue;
+    }
+}
+                 */
+