CodeYourFuture · teniolao · Dec 1, 2021 · Dec 3, 2021 · Dec 3, 2021 · Dec 3, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/facebook-icon.svg b/img/facebook-icon.svg
diff --git a/img/instagram-icon.svg b/img/instagram-icon.svg
diff --git a/img/jordane-mathieu-5RHodALXtzM-unsplash.jpg b/img/jordane-mathieu-5RHodALXtzM-unsplash.jpg
diff --git a/img/jordane-mathieu-83sgp9jxW8k-unsplash.jpg b/img/jordane-mathieu-83sgp9jxW8k-unsplash.jpg
diff --git a/img/jordane-mathieu-eDC7851HvYk-unsplash.jpg b/img/jordane-mathieu-eDC7851HvYk-unsplash.jpg
diff --git a/img/jordane-mathieu-lwkuaGoDTXE-unsplash.jpg b/img/jordane-mathieu-lwkuaGoDTXE-unsplash.jpg
diff --git a/img/jordane-mathieu-nvCeLoxu0Cw-unsplash.jpg b/img/jordane-mathieu-nvCeLoxu0Cw-unsplash.jpg
diff --git a/img/ruth-georgiev-dvmiNXMh9d8-unsplash.jpeg b/img/ruth-georgiev-dvmiNXMh9d8-unsplash.jpeg
diff --git a/img/slashio-photography-ZTpUrmxu4Aw-unsplash.jpg b/img/slashio-photography-ZTpUrmxu4Aw-unsplash.jpg
diff --git a/img/twitter-icon.svg b/img/twitter-icon.svg
diff --git a/index.html b/index.html
@@ -1,16 +1,62 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-    <meta charset="UTF-8">
-    <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>
-    <!-- Add a link to your css file here -->
-</head>
+    <head>
+        <meta charset="UTF-8">
+        <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">
+        <script
+      src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
+    ></script>
+        <!-- Add a link to your css file here -->
+    </head>
 
-<body>
-    <!-- Add your markup here -->
-</body>
+    <body>
+
+        <div class="wrapper">
+            <div class="brand-logo"> <i class="fas fa-birthday-cake"></i> Indulge Cakes</div>
 
+            <nav class="navbar"> <!-- one -->
+                <a href="#" class="toggle-button">
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                </a>
+
+                <div class="navbar-links">
+                    <ul class="nav-list">
+                        <li class="list-items"><a href="#">Home</a></li>
+                        <li class="list-items"><a href="#">Cakes</a></li>
+                        <li class="list-items"><a href="#">Orderin</a></li>
+                        <li class="list-items"><a href="#">Lessons</a></li>
+                        <li class="about"><a href="#">About</a></li>
+                    </ul>
+                </div>
+            </nav>
+
+
+            <div class="welcome"><!-- two -->
+                <h1>Welcome</h1>
+                    <span class="welcome-message">Treat yourself or someone you love with a boxed gift wrapped cake. The best cakes in town delivered to your door
+                    </span>
+                    <div></div>
+                <!--<div id="welcome-text">
+                        The best cakes in town delivered to your door
+                    </div> i could not figure out how to position the text to the botton-->
+                    <button>enquire now</button>
+            </div>
+            <img class="welcome-image" src="img/ruth-georgiev-dvmiNXMh9d8-unsplash.jpeg" alt=""> <!-- three -->
+
+            <div class="nested"><!-- four -->
+                <img class="chestnut-cake" src="img/jordane-mathieu-lwkuaGoDTXE-unsplash.jpg" alt="chocolate chesnut cake">
+                <img class="raspberry-cake" src="img/jordane-mathieu-83sgp9jxW8k-unsplash.jpg" alt="raspberry cake">
+                <img class="sponge-cake" src="img/jordane-mathieu-5RHodALXtzM-unsplash.jpg" alt="sponge cake topped with cream and chocolate">
+                <img class="dome-coke" src="img/jordane-mathieu-eDC7851HvYk-unsplash.jpg" alt="mousse dome cake with coconut flakes">
+            </div><!-- closed nessted div -->
+            <!-- footer section -->
+            <footer class="footer"> <p>© Designed by Teniola Ogunjinrin</p></footer> <!-- five -->
+        </div>
+    </body>
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,279 @@
 /*  Add your styling here */
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
+html, body {
+    margin: 0;
+    height: 100%;
+    font-family: 'Montserrat';
+}
+
+/* css grid */
+.wrapper {
+    margin: 0;
+    padding: 25px;
+    grid-gap: 1em;  /* space inbetween the boxes/borders */
+    display: grid;
+    grid-template-columns: repeat(12,1fr); /* Makes 12 equal spaced rows */
+    grid-auto-rows: minmax(20px, auto);
+    box-sizing: border-box;
+}
+  /* grid-template layout start */
+  .brand-logo{ /* start of first row */
+    display: grid;
+    grid-column: 1/ 4;   /*Starts on column 1 and ends on columns 5 */
+    grid-row: 1;           /* Starts on row 1 and ends on row 6*/
+    font-size: .85rem;
+    color: #7D5A5A;/*rgb(218, 80, 80)*/
+    }
+
+  .navbar{ 
+    grid-column: 5/-1;     /*Starts on column 1 and ends on columns 3 */
+    grid-row: 1; /* Starts on row 1 and ends on row 6*/
+
+  }
+
+/* button */
+  .toggle-button{
+       display: flex;
+       flex-direction: column;
+       justify-content: space-between;
+       width: 25px;
+       height: 21px;
+       position: absolute;
+       top: 1.5rem;
+       right: 1.5rem;
+       padding-top:.25em;
+   }
+
+   .toggle-button .bar{
+       height: 3px;
+       width: 100%;
+       background-color: #7D5A5A;
+       border-radius: 10px;
+   }
+
+   /* navbar */
+  .navbar-links ul{
+        display: none;
+    }
+
+    .welcome > h1{ 
+       margin-bottom: .2em;
+    } 
+
+    footer > p {
+        text-align: center;
+        color: #F9C0C0;
+    }
+    /* more than 540px */
+    @media screen and (min-width: 540px) {
+
+    .navbar{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        color: pink; /* edit colour */
+    }
+
+    .navbar-links ul{
+        margin: 0;
+        padding: 0;
+        display: flex;
+    }
+
+    .navbar-links li{
+        list-style: none;
+    }
+    .navbar-links li a{
+        text-decoration: none;
+        color: #7D5A5A; /* edit colour */
+        padding: .5rem;
+        align-items: end;
+        display: block;
+        font-size: 1em;
+        font-weight: bold;
+
+    }
+
+    .nav-list > li:nth-child(5) {
+        margin-right: 16px;
+    }
+
+    .navbar-links li:hover{
+        background-color: rgb(250, 245, 218);
+        border-radius: .5rem;
+    }
+
+    .toggle-button{
+      display:none;
+    }
+
+    .brand-logo {
+        font-size: 1em;
+    }
+}/* end of first row 1 */
+
+/* welcome section */
+.welcome > h1{ /* start of second row */
+    margin-top: 0 0 .5em;
+} 
+
+.welcome-message {
+    line-height: 1.5em;
+}
+
+.welcome > .welcome-text{
+    margin-right: 1em;
+}
+
+.welcome { 
+    grid-column: 1/-1;    /*Starts on column 3 and ends on columns 12 */
+    grid-row: 3;            
+    background-color: #F3E1E1;
+    padding: 1em;
+    color: #625757;
+}
+
+button{
+    background-color: #FAB7B7;
+    color: #625757;
+    border: 1px solid #7D5A5A;
+    padding: .7em;
+    border-radius: .7em;
+    margin-top: .9em;
+    font-weight: bold;
+}/* end of second row */
+
+.welcome-image { /* start of third row */
+    grid-column: 1/-1;   
+    grid-row: 4;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 1em;
+    border-style: solid;
+    color: #8BCDCD;
+}/* end of third row */
+
+.nested { /* start of fourth row */
+  display: grid;
+  grid-column: 1/-1;   
+  grid-row: 5;
+  grid-template-columns: repeat(2, 1fr);
+  border-style: solid;
+  color: pink;
+  grid-gap: 1em;
+  background-color: #F3E1E1;
+  border-radius: 10px;
+} 
+
+.nested > img { /* image size */
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 1em;
+}/* end of fourth row */
+
+.footer { /* start of fifth row */
+    grid-column: 1/-1;
+    grid-row: 6;
+    height: 5em;
+    background-color: #7D5A5A;
+
+
+}/* end of fourth row */
+
+@media screen and (min-width: 900px){
+
+    .wrapper{
+        grid-gap: 1em;
+    }
+    .brand-logo{
+        font-size: 1.4em;
+        margin-top: 0;
+    }
+
+    .navbar-links li a{
+        padding: 1.5em;
+        font-size: 1.2em;
+    }
+
+    .navbar{
+        display: flex;
+        justify-content: space-evenly;
+    }
+    .nav-list > li:nth-child(5) {
+        margin-right: 16px;
+    }
+
+    .welcome{
+        grid-column: 7/-1;    
+        grid-row: 2;
+        border-radius: 1em;
+        padding: 2.5em;
+    }
+
+    button {
+        font-weight: bold;
+        padding: 1em 1.5em;
+        margin-top: 2em;
+    }
+
+
+    .welcome-image{
+        grid-column: 1/7;
+        grid-row: 2; 
+    }
+
+    .nested{
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .navbar-links li a{
+        padding-bottom: .5em
+    }
+
+    .footer  > p{
+        text-align: center;
+
+    }
+
+    h1{
+        font-size: 4em;
+        margin: .25em 0;
+    }
+
+    .welcome-message{
+        font-size: 1.5em;
+    }
+
+}
+
+/* This is the code for the image grid before it was nested
+.chestnut-cake {
+     grid-column: 1/7;/*Starts on column 5 and ends on columns 12
+    grid-row: 4;     /* Starts on row 6 and ends on row 12
+    border-style:solid;
+    color: pink;
+}
+
+.raspberry-cake {
+    grid-column: 7/-1;
+    grid-row: 4;
+    border-style: solid;
+    color:red;
+}
+.sponge-cake {
+    grid-column: 1/7;
+    grid-row: 5;
+    border-style:solid;
+    color: blue;
+}
+.dome-coke {
+    grid-column: 7/-1;
+    grid-row: 5;
+    border-style:solid;
+    color: green;
+}
+*/
+/* grid-template layout end */