CodeYourFuture · IrinShilova · Dec 2, 2021 · Dec 2, 2021 · Dec 3, 2021
diff --git a/images/1Fresh-Strawberry-Cake-with-Strawberry-Frosting-3.jpg b/images/1Fresh-Strawberry-Cake-with-Strawberry-Frosting-3.jpg
diff --git a/images/2cakedownload.jpeg b/images/2cakedownload.jpeg
diff --git a/images/2strawberry-shortcake-cake-2-650x975.jpg b/images/2strawberry-shortcake-cake-2-650x975.jpg
diff --git a/images/3Vanilla-Cupcakes-with-Vanilla-Swiss-Meringue-SQ.jpg b/images/3Vanilla-Cupcakes-with-Vanilla-Swiss-Meringue-SQ.jpg
diff --git a/...th-candle-sketch-icon-for-web-and-mobile-hand-drawn-vector-dark-grey-icon-on-light-g.webp b/...th-candle-sketch-icon-for-web-and-mobile-hand-drawn-vector-dark-grey-icon-on-light-g.webp
diff --git a/images/4Cinnamon-Rolls-3.jpg b/images/4Cinnamon-Rolls-3.jpg
diff --git a/images/Cake-icon-by-rudezstudio-1-580x386.jpg b/images/Cake-icon-by-rudezstudio-1-580x386.jpg
diff --git a/...kground-cake-icon-flat-vector-illustration-black-white-background-125834627.jpg b/...kground-cake-icon-flat-vector-illustration-black-white-background-125834627.jpg
diff --git a/images/cakechoko.jpeg b/images/cakechoko.jpeg
diff --git a/images/image_6487327 (1).JPG b/images/image_6487327 (1).JPG
diff --git a/images/image_6487327 (2).JPG b/images/image_6487327 (2).JPG
diff --git a/images/image_6487327 (3).JPG b/images/image_6487327 (3).JPG
diff --git a/images/image_6487327.JPG b/images/image_6487327.JPG
diff --git a/images/logo2.png b/images/logo2.png
diff --git a/images/logo3.jpg b/images/logo3.jpg
diff --git a/images/logo4.png b/images/logo4.png
diff --git a/images/logogo.jpeg b/images/logogo.jpeg
diff --git a/images/pexels-brent-keane-1702373.jpg b/images/pexels-brent-keane-1702373.jpg
diff --git a/images/pexels-olya-kobruseva-5594503.jpg b/images/pexels-olya-kobruseva-5594503.jpg
diff --git a/images/pexels-quang-nguyen-vinh-2144200.jpg b/images/pexels-quang-nguyen-vinh-2144200.jpg
diff --git a/images/pexels-ronmar-lacamiento-806363.jpg b/images/pexels-ronmar-lacamiento-806363.jpg
diff --git a/images/pexels-suzy-hazelwood-1126359.jpg b/images/pexels-suzy-hazelwood-1126359.jpg
diff --git a/images/pexels-valeria-boltneva-827513.jpg b/images/pexels-valeria-boltneva-827513.jpg
diff --git a/images/pexels-vojtech-okenka-1055272.jpg b/images/pexels-vojtech-okenka-1055272.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>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!-- Add a link to your css file here -->
+    <link rel="stylesheet" href="style.css"> 
 </head>
 
-<body>
+<body class="container">
     <!-- Add your markup here -->
+
+    <header class="header">              
+            <img class="logo" src="images/42981633-slice-of-cake-with-candle-sketch-icon-for-web-and-mobile-hand-drawn-vector-dark-grey-icon-on-light-g.webp" alt="image of cake"> 
+            <p class="slogan">The best cakes in town delivered to your door</p>
+
+        <nav class="nav-mob">                   
+            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+            <i class="fa fa-bars"></i>
+            </a>
+        </nav>
+    </header>
+
+    <section class="nav-section">
+        <ul class="nav-list">
+            <a href="#" class="nav-link"><li class="nav-item">HOME</li></a>
+            <a href="#" class="nav-link"><li class="nav-item">CAKES</li></a>
+            <a href="#" class="nav-link"><li class="nav-item">ORDER</li></a>
+            <a href="#" class="nav-link"><li class="nav-item">LESSONS</li></a>
+            <a href="#" class="nav-link"><li class="nav-item">LESSONS</li></a>
+            <a href="#" class="nav-link"><li class="nav-item">ABOUT</li></a>
+        </ul>
+    </section>
+
+    <main class="main">
+            <div class="welcome">
+                <div class="welcome-text" > 
+                    <h1>Welcome</h1>
+                    <p>We are happy to deliver a delicious and personalised cake special for you. All our cakes are handmade by skilled and experienced cake decorators. We will help you if you are hosting a birthday party at home, celebrating a wedding day in a restaurant or need a cake delivered to brighten up someone's day. Just give us a call.  </p>
+                </div>
+                <div class="welcome-pic">
+                    <img class="main-picture" src="images/cakechoko.jpeg" alt="chocolate cake" > 
+                </div>
+            </div>
+
+            <div class="products">
+                <div class="products-1-2">
+                    <div class="products-image one"><img src="images/image_6487327 (1).JPG"></div>
+                    <div class="products-image two"><img src="images/image_6487327 (2).JPG"></div>
+                </div> 
+                <div class="products-3-4">
+                    <div class="products-image three"><img src="images/image_6487327 (3).JPG"></div>
+                    <div class="products-image zero"><img src="images/image_6487327.JPG"></div>
+                </div>
+            </div>            
+    </main>
+
+    <footer class="footer">
+        <p class="footer-p">Follow us on instagram</p>
+        <p class="footer-p">Designed for cakes</p>
+        <p class="footer-p">All rights reserved</p>
+    </footer>
+
+
+
+
+
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,195 @@
 /*  Add your styling here */
+
+.container {
+    margin: 0;
+    font-size: 1 em;
+    display: grid;
+    grid-gap: 5px;
+    grid-template-columns: 1fr;
+    grid-auto-rows: minmax(200px, auto);           
+}
+
+header {   
+    grid-column: 1 / - 1;
+    background-color: rgb(236, 234, 234);
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row;
+    margin-bottom: 5px;   
+}
+
+
+main {       
+    display: grid;
+    grid-template-columns: 1 fr;
+    grid-template-rows: 1 fr 1fr;
+    grid-gap: 5px;  
+}
+
+.welcome {
+    grid-column: 1 / - 1;   
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;      
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+
+.products {
+    grid-column: 1 / - 1;
+    display: grid;
+    grid-template-columns: 1fr 1fr; 
+    grid-template-rows: 200px 200px; 
+}
+
+
+footer {  
+    grid-column: 1 / - 1;
+}
+
+.nav-section {
+    display: none;
+    background-color: rgb(192, 192, 192);
+    width:auto;
+    height: fit-content;
+    margin: 20px;
+}
+
+.nav-mob {
+    overflow: hidden;
+    position: relative; 
+}
+
+.nav-list {
+    display: none;
+    list-style: none;   
+}
+
+.nav-item {
+    margin-right: 5px;
+    padding: 5px 25px; 
+    border: 2px black solid;
+    padding: 4px 20px;
+    background-color: rgb(37, 37, 37);
+    color: rgb(255, 255, 255);
+}
+
+.nav-link{
+    color: grey;
+    padding: 14px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.logo {    
+max-width: 15%;
+height: 30%;       
+}
+
+.slogan {
+    margin-top: 7rem;
+    margin-bottom: 2px;
+    font-size: 1 em;
+    font-weight: bolder;   
+}
+
+.icon {
+    margin-top: 15px;
+    margin-right: 10px;
+}
+
+.products-image img {
+    width: 90%;
+    display: block;
+    margin-left: auto; 
+    margin-right: auto;
+    margin-top: 5px;
+}
+
+
+
+.main-picture {
+    width: 100%;
+}
+
+.footer {
+    display: flex;
+    background-color: rgb(236, 234, 234);
+    display: flex;
+    flex-direction: column;
+    height: fit-content;
+}
+
+.footer-p {
+    margin-left: 30px;
+    margin-right: 50px;
+    padding: 5px 25px; 
+    border: 2px black solid;
+    padding: 4px 20px;
+    background-color: rgb(37, 37, 37);
+    color: rgb(255, 255, 255);     
+}
+
+
+
+@media screen and (min-width: 600px) {
+
+    .welcome {               
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: space-around;
+        text-align: right;        
+    }
+
+    .products {           
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);       
+    }
+
+    .products-image {   
+        width: 50%;    
+    }
+
+    .products-image img {        
+       margin-top: 5px;
+       width: 80%;
+    }
+
+    .products-1-2 {
+        display: flex;
+        flex-direction: row;        
+    }
+
+    .products-3-4 {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .nav-list {
+        margin-left: 250px;
+        display: flex;
+    }
+
+    .icon {
+        display: none;
+    }
+
+    .nav-section {
+        display: flex;
+        justify-content: space-around;        
+    }
+
+    .slogan {
+        margin-left: 25rem;
+        margin-top: 10rem;
+        font-size: 2rem;
+        font-weight: bold;
+    }
+
+    .footer {
+        display: flex;
+        flex-direction: row;
+    }
+
+}