CodeYourFuture · Elenar9 · Feb 9, 2023 · Feb 11, 2023 · Feb 11, 2023 · Feb 11, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
diff --git a/.github/workflows/close.yml b/.github/workflows/close.yml
diff --git a/GRADING.md b/GRADING.md
diff --git a/HOW-TO-GET-HELP.md b/HOW-TO-GET-HELP.md
diff --git a/HOW-TO-SUBMIT.md b/HOW-TO-SUBMIT.md
diff --git a/HOW_TO_MARK.md b/HOW_TO_MARK.md
diff --git a/assets/chocolate cake.jpg b/assets/chocolate cake.jpg
diff --git a/assets/cupcake.jpg b/assets/cupcake.jpg
diff --git a/assets/fotor_2023-2-8_22_18_44.jpg b/assets/fotor_2023-2-8_22_18_44.jpg
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/assets/pavlova-with-summer-berries-1024x652.jpg b/assets/pavlova-with-summer-berries-1024x652.jpg
diff --git a/assets/strawberry-cake1.jpg b/assets/strawberry-cake1.jpg
diff --git a/assets/weding.jpg b/assets/weding.jpg
diff --git a/assets/welcome.jpg b/assets/welcome.jpg
diff --git a/design/cakes wireframe - desktop.png b/design/cakes wireframe - desktop.png
diff --git a/design/cakes wireframe - mobile.png b/design/cakes wireframe - mobile.png
diff --git a/index.html b/index.html
@@ -6,11 +6,81 @@
     <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/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
 </head>
-
 <body>
-    <!-- Add your markup here -->
-</body>
-
-</html>
+    <div class="wrapper">
+     <header class="header">
+             <div class="logo">
+                 <img class="header-img" src="/assets/logo.png" alt="logo-image">
+                 <h1 class="logo-name">Cake Art</h1>
+            </div>
+            <div class="menu-bar">
+             <ul class="menu">
+                 <li><a class="nav-links" href="#welcome">Home</a></li>
+                 <li><a class="nav-links" href="#cakes">Cakes</a></li>
+                 <li><a class="nav-links" href="#contact-us">Contact Us</a></li>
+             </ul>
+         </div>
+         <div class="hamburger-menu">
+             <div class="container">
+                 <div class="header"></div>
+                 <div class="menu"></div>
+                 <div class="content"></div>
+                 <div class="footer"></div>
+             </div>
+         </div>
+
+     </header>
+
+     <main class="main">
+
+           <div class="welcome -text">
+              <h1>Welcome To Cake Art</h1>  
+              <p>In cake art we make cakes with the best products and we give it a distinctive characteristic since the 
+              client participates in the creation both choosing the ingredients and the decoration, resulting in a unique work. 
+              We are not a factory, we are an art studio.</p>
+           </div>
+           <div class="welcome-img-wrapper">
+              <img class="welcome-img" src="/assets/welcome.jpg" alt="glazed cake">
+           </div>
+     </main>
+     <div class="img-wrapper-1">
+         <div class="img-wrapper-2">
+           <div class="cake">
+              <h2>Deserts</h2>
+              <img class="cake-img" src="/assets/pavlova-with-summer-berries-1024x652.jpg" alt="Pavlova con fresh fruits">
+              <h3></h3>
+             </div>
+            <div class="cake">
+              <h2>Cup Cake</h2>
+              <img class="cake-img" src="/assets/cupcake.jpg" alt="cup cakes">
+              <h3></h3>
+           </div>
+           </div>
+           <div class="img-wrapper-2">
+           <div class="cake">
+              <h2>Wedding Cake</h2>
+              <img class="cake-img" src="/assets/weding.jpg" alt="beautiful wedding cake">
+              <h3></h3>
+            </div>
+            <div class="cake">
+              <h2>Chocolate Cake</h2>
+              <img class="cake-img" src="/assets/chocolate cake.jpg" alt="chocolate cake">
+              <h3></h3>
+            </div>
+            </div>
+     </div>
+
+     <footer class="footer">
+         <a href=""><i class="fa-brands fa-facebook"></i></a>
+         <a href=""><i class="fa-brands fa-twitter"></i></a>
+         <a href=""><i class="fa-brands fa-instagram"></i></a>
+     </footer>
+ </div>
+
+ </body>
+
+ </html>
+
diff --git a/readme.md b/readme.md
diff --git a/style.css b/style.css
@@ -1 +1,212 @@
-/*  Add your styling here */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body, html{
+    /* height: 100vh; */
+}
+
+.header {
+    /* grid-area: header; */
+    display: flex;
+    align-items: center;
+    background-color: rgb(185, 185, 116);
+
+  }
+  .main {
+    grid-area: content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1rem;
+    background-color: rgb(219, 218, 212);
+  }
+  .img-wrapper-1 {
+    grid-area: content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(159, 110, 133);
+  }
+
+  .footer {
+    grid-area: footer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(252, 195, 50);
+  }
+
+ .welcome-img{
+    width: 100%;
+    /* height: 400px; */
+}
+.logo {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.logo-name {
+    font-size: 1.5rem;
+}
+
+ .cake-img {
+    width: 250px;
+    height: 250px;
+}
+
+.menues-bar{
+    display:block;
+    position: fixed;
+    visibility: hidden;
+    top: 0;
+    left: -100%;
+    width: 300px;
+    height:100% ;
+    margin: 0;
+    padding: 80px 0;
+    list-style: none;
+    background-color: rgb(209, 203, 203);
+    box-shadow: 1px 0px 6px rgba(0,0,0,.2);
+    border: solid 2px red;
+
+
+}
+.menues {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    list-style: none;
+}
+font-family  sans-serif{
+    font-size:20px;
+    font-weight: 600;
+    text-decoration: none;
+    transition-duration: .25s;
+
+}
+.menues:hover{
+    background-color:rgb(252, 252, 195);
+}
+li {
+    padding: auto;
+}
+
+.img-wrapper-2 {
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+
+}
+
+.header-img {
+    width: 5rem;
+    height: 5rem;
+    padding: 2rem;
+}
+
+@media only screen and (min-width: 500px) {
+    .wrapper {
+      grid-template-columns: 1fr 3fr;
+      grid-template-areas:
+        "header  header"
+        "main     main"
+        "img-wrapper img-wrapper"
+        "footer      footer";
+    }
+    nav ul {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  @media only screen and (min-width: 540px) {
+    .grid {
+        grid-template-rows:  15rem 4rem 20rem 13rem 10rem 3rem;
+        grid-gap: 1rem;
+        grid-template-areas:
+        "header   header"
+        "nav      nav"
+        "image    welcome"
+        "cake     cake"
+        "media    media"
+        "footer   footer"
+
+    }
+    .images-cakes {
+        grid-template-columns: repeat(4,1fr);
+        grid-template-rows: 20rem;
+        grid-template-areas:
+        "cake1 cake2 cake3 cake4";
+    }
+    .social-media {
+        display: flex;
+        justify-content: center;
+
+        align-items:center;
+    }
+    .insta {
+        padding: 0 5rem;
+    }
+    .hamburger {
+        display:none;
+    }
+    .title {
+        font-size:x-large;
+        max-width: 30rem;
+    }
+    .navigation {
+        display:block;
+        grid-area: nav;
+        background-color: #333;
+
+    }
+    .navigation__list {
+        display: flex;
+        list-style: none;
+        justify-content: flex-end;
+
+    }    
+
+    .navigation__item {
+        padding: 0.5rem 0.5rem;
+        color: white;
+
+      }
+      .navigation__item:hover {
+        color: #FAF9F6;
+
+      }
+      .navigation__link {
+        color: var(--grey-dark);
+        font-weight: 600;
+        text-transform: uppercase;
+        text-decoration: none;
+        padding: 0 1rem;
+      }
+      h1 {
+        margin: 0 auto;
+      }  
+  }
+
+  @media only screen and (min-width: 900px) {
+    .grid {
+        grid-template-columns: 1fr 4fr 4fr 1fr;
+        grid-template-rows:  15rem 4rem 22rem 15rem 10rem 3rem;
+        grid-gap: 1rem;
+        grid-template-areas:
+        "header  header   header  header"
+        ".       nav      nav      ."
+        ".       image    welcome   ."
+        ".        cake     cake     ."
+        "media    media    media    media"
+        "footer   footer   footer   footer";
+    }
+  }