CodeYourFuture · BrettScheepers · Dec 15, 2020 · Dec 17, 2020 · Dec 17, 2020 · Dec 18, 2020
diff --git a/img/main.jpg b/img/main.jpg
diff --git a/img/sub1.jpg b/img/sub1.jpg
diff --git a/img/sub2.jpg b/img/sub2.jpg
diff --git a/img/sub3.jpg b/img/sub3.jpg
diff --git a/img/sub4.jpg b/img/sub4.jpg
diff --git a/index.html b/index.html
@@ -6,11 +6,69 @@
     <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 -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-    <!-- Add your markup here -->
+    <header>
+        <i class="fas fa-birthday-cake logo"></i>
+        <div class="header-content">
+            <div class="burger">
+                <i class="fas fa-bars"></i>
+            </div>
+            <div class="header-text">
+                <p>The best cakes in town delivered to your door.</p>
+            </div>
+        </div>
+    </header>
+
+    <nav>
+        <ul>
+            <a href="#">HOME</a>
+            <a href="#">CAKES</a>
+            <a href="#">ORDER IN</a>
+            <a href="#">LESSONS</a>
+            <a href="#">ABOUT</a>
+        </ul>
+    </nav>
+
+    <main>
+        <article class="first">
+            <div class="welcome">
+                <h2>Welcome</h2>
+                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum dicta maiores consectetur veritatis eligendi? Atque error ducimus sequi odit aut reiciendis soluta beatae itaque non quis voluptatem, laboriosam maiores officia autem dicta corrupti praesentium illum, quam magnam dolore animi molestiae enim, voluptate dolores? Eaque tempore, quas repellat fuga nobis illo!</p>
+            </div>
+
+            <div class="main-image">
+                <img src="img/main.jpg" alt="">
+            </div>
+        </article>
+
+        <div class="sub-images-container">
+            <div class="sub-image-container" id="1">
+                <img src="img/sub1.jpg" alt="">
+            </div>
+            <div class="sub-image-container" id="2">
+                <img src="img/sub2.jpg" alt="">
+            </div>
+            <div class="sub-image-container" id="3">
+                <img src="img/sub3.jpg" alt="">
+            </div>
+            <div class="sub-image-container" id="4">
+                <img src="img/sub4.jpg" alt="">
+            </div>
+        </div>
+    </main>
+
+    <footer>
+        <h3>Contact Us</h3>
+        <p>Phone: <strong>021 555 5555</strong></p>
+        <p>Email: <strong>[email protected]</strong></p>
+        <div class="name">
+            <p>@StylesBackery Inc.</p>
+        </div>
+    </footer>
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,178 @@
-/*  Add your styling here */
+@import url('https://fonts.googleapis.com/css2?family=Niconne&display=swap');
+
+body{
+    background-color:rgb(255,179,230, 0.5);
+    color: #fb0667;
+    margin: 0;
+    font-family: 'Niconne', cursive;
+}
+
+/*Header*/
+header{
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+}
+
+.logo{
+    font-size: 5rem;
+    text-align: center;
+}
+
+.header-content{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: space-around;
+}
+
+.fa-bars{
+    font-size: 1.5rem;
+}
+
+.header-text{
+    width: 60%;
+    text-align: end;
+}
+
+nav{
+    display: none;
+}
+
+/*Main*/
+main{
+    padding: 0 1rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.welcome{
+    padding-bottom: 1rem;
+}
+
+.welcome h2{
+    margin: 0;
+}
+
+.welcome p{
+    margin: 0;
+}
+
+img{
+    border-radius: 5%;
+    width: 100%;
+    height: 100%;
+}
+
+.main-image{
+    padding-bottom: 3rem;
+}
+
+.sub-images-container{
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    margin: 0;
+}
+
+.sub-image-container{
+    width: 45%;
+    padding: 0.5rem;
+    height: 150px;
+}
+
+/*Footer*/
+footer{
+    padding: 1rem;
+    font-size: 1.2rem;
+    letter-spacing: 0.1rem;
+}
+
+.name{
+    width: 100%;
+    padding-top: 0.1rem;
+    text-align: center;
+    color: #fff;
+}
+
+@media (min-width: 540px){
+    .fa-birthday-cake{
+        font-size: 6rem;
+    }
+
+    .header-text{
+        font-size: 1.4rem;
+    }
+
+    .welcome{
+        font-size: 1.25rem;
+    }
+
+    .sub-image-container{
+        width: 45%;
+        padding: 0.5rem;
+        height: 250px;
+    }
+}
+
+@media (min-width: 900px){
+    nav{
+        display: flex;
+        justify-content: flex-end;
+        padding: 1rem;
+        margin: 1rem;
+        border-radius: 20px;
+        background-color: rgb(255,179,230, 0.9);
+    }
+
+    nav ul a{
+        text-decoration: none;
+        color:  #fb0667;
+        margin: 1rem;
+        font-size: 1.5rem;
+    }
+
+    .fa-bars{
+        visibility: hidden;
+    }
+
+    .header-text{
+        width: 100%;
+        font-size: 2rem;
+    }
+
+    .logo{
+        font-size: 7rem;
+    }
+
+    .welcome{
+        width: 50%;
+
+        font-size: 1.5rem;
+    }
+
+    .main-image{
+        width: 50%;
+    }
+
+    .first{
+        display: flex;
+        flex-flow: wrap-reverse;
+    }
+
+    .sub-image-container{
+        justify-content: center;
+        align-items: center;
+    }
+
+    .sub-image-container{
+        width: 23%;
+        padding: 0.5rem;
+        height: 180px;
+    }
+
+    footer{
+        text-align: center;
+        font-size: 1.5rem;
+    }
+}