CodeYourFuture · ahmedsaif2002 · May 13, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/Fablogo.png b/images/Fablogo.png
diff --git a/images/cakee.avif b/images/cakee.avif
diff --git a/images/instalogo.jpeg b/images/instalogo.jpeg
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/package-lock.json b/images/package-lock.json
diff --git a/images/photo-1.png b/images/photo-1.png
diff --git a/images/photo-2.png b/images/photo-2.png
diff --git a/images/photo-3.png b/images/photo-3.png
diff --git a/images/photo-4.avif.webp b/images/photo-4.avif.webp
diff --git a/images/photo-4.png b/images/photo-4.png
diff --git a/images/photo-5.png b/images/photo-5.png
diff --git a/images/photo-6.png b/images/photo-6.png
diff --git a/images/twetlog.png b/images/twetlog.png
diff --git a/index.html b/index.html
@@ -10,7 +10,60 @@
 </head>
 
 <body>
-    <!-- Add your markup here -->
+    <div class="box header">
+        <img src="./images/logo.png" alt="cake-img-for-logo">
+        <P>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+            <br>Similique vero tenetur voluptas ab minima, ex
+            voluptatum assumenda,!
+        </P>
+    </div>
+    <div class="box nav">
+        <ul>
+            <li><a href="#store">Store</a></li>
+            <li><a href="#order">Order</a></li>
+            <li><a href="#help">help</a></li>
+            <li><a href="#login">Longin</a></li>
+            <li><a class="active" href="#Contact-us">Contact us</a></li>
+        </ul>
+    </div>
+    <div class="box main">
+        <img src="./images/photo-5.png" alt="big-delishes-cake">
+    </div>
+    <div class="box main2">
+        <h1>Best Cake in World</h1>
+        <em>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil suscipit totam quasi cupiditate quod
+            magnam vero
+            doloremque porro ullam voluptate. Voluptatibus, praesentium. Necessitatibus ducimus neque aliquid eos
+            quo, facilis
+            earum exercitationem voluptatibus culpa similique ratione architecto delectus? Deleniti quod
+            voluptatibus ab vero
+            labore! Mollitia nisi modi temporibus cum necessitatibus porro assumenda nulla officia, architecto ipsam
+            dicta,
+            libero nemo pariatur consequuntur, rem excepturi ullam quas a aspernatur iure minus iusto? Error
+            laudantium natus
+            nam, quos itaque nihil, corporis unde repudiandae inventore at hic autem tenetur excepturi facere
+            debitis aut
+            numquam iste molestias dolorum eos vitae dolore soluta harum maiores? Perferendis, eius?
+        </em>
+    </div>
+    <div class="box section1">
+        <img src="./images/photo-4.png" alt="choklit-ban-cake">
+    </div>
+    <div class="box section2">
+        <img src="./images/photo-1.png" alt="fruti-cake">
+    </div>
+    <div class="box section3">
+        <img src="./images/cakee.avif=" alt="big-slice-cake">
+    </div>
+    <div class="box section4">
+        <img src="./images/photo-3.png" alt="slice-of-strawberry-cake">
+    </div>
+    <div class="box footer">
+        <a href="#" class="fa fa-facebook"></a>
+        <a href="#" class="fa fa-twitter"></a>
+        <a href="#" class="fa fa-instagram"></a>
+        <a href="#" class="fa fa-youtube"></a>
+    </div>
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,304 @@
-/*  Add your styling here */
+        /*  Add your styling here */
+.container {
+    display: grid;
+    grid-auto-rows: minmax(100px, auto);
+    /* background-color: aquamarine; */
+    grid-gap: 30px;
+    color: #f4a261;
+    grid-template-areas:
+        "h h h h h h h h"
+        "h h h h h h h h"
+        "ma ma ma ma nav nav nav nav"
+        "ma ma ma ma maa maa maa maa"
+        "ma ma ma ma maa maa maa maa"
+        "ma ma ma ma maa maa maa maa"
+        "ma ma ma ma maa maa maa maa"
+        "ma ma ma ma maa maa maa maa"
+        "s1 s1 s2 s2 s3 s3 s4 s4"
+        "s1 s1 s2 s2 s3 s3 s4 s4"
+        "foo foo foo foo foo foo foo foo"
+        "foo foo foo foo foo foo foo foo"
+    ;
+}
+
+body {
+    background-color: #264653;
+}
+
+.box {
+    display: flex;
+    color: #f4a261;
+    font-size: 3rem;
+}
+
+.header {
+    grid-area: h;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    align-content: space-between;
+}
+
+.header img {
+    border: 3px solid #2a9d8f;
+    border-radius: 9px;
+    padding: 5px;
+    width: 300px;
+}
+
+.header p {
+    font-size: 2rem;
+}
+
+.nav {
+    grid-area: nav;
+    justify-content: space-around;
+    font-size: 1.7rem;
+    align-items: center;
+    padding: 20px;
+
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+li {
+    float: left;
+    gap: 20px;
+}
+
+li a {
+    display: block;
+    color: #f4a261;
+    text-align: center;
+    padding: 18px 22px;
+    text-decoration: none;
+}
+
+li a:hover:not(.active) {
+    background-color: #111;
+}
+
+.active {
+    background-color: #04AA6D;
+    color: #fff;
+}
+
+.active:hover {
+    opacity: 0.8;
+}
+
+.main {
+    grid-area: ma;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0%;
+    padding: 0%;
+}
+
+.main img {
+    border: 3px solid #2a9d8f;
+    border-radius: 9px;
+    width: 700px;
+    height: 600px;
+}
+
+.main2 {
+    grid-area: maa;
+    display: flex;
+    flex-direction: column;
+    font-size: 1.6rem;
+    align-items: center;
+    justify-content: center;
+    padding: 30px 
+}
+
+.main2 h1 {
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+.section1 {
+    grid-area: s1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.section1 img {
+    border: 3px solid #2a9d8f;
+    border-radius: 9px;
+    padding: 5px;
+    width: 300px;
+    height: 200px;
+}
+
+.section2 {
+    grid-area: s2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.section2 img {
+    border: 3px solid #2a9d8f;
+    border-radius: 9px;
+    padding: 5px;
+    width: 300px;
+    height: 200px;
+}
+
+.section3 {
+    grid-area: s3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.section3 img {
+    border: 3px solid #2a9d8f;
+    border-radius: 9px;
+    padding: 5px;
+    width: 300px;
+    height: 200px;
+}
+
+.section4 {
+    grid-area: s4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.section4 img {
+    border: 3px solid #2a9d8f;
+    border-radius: 9px;
+    padding: 5px;
+    width: 300px;
+    height: 200px;
+}
+
+.footer {
+    grid-area: foo;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.fa {
+    padding: 20px;
+    font-size: 40px;
+    width: 50px;
+    text-decoration: none;
+    margin: 5px 2px;
+    border-radius: 15px;
+    height: 40px;
+    width: 40px;
+}
+
+.fa-facebook {
+    border: 1px solid #fff;
+    background: #3B5998;
+    color: white;
+}
+
+.fa-twitter {
+    border: 1px solid #fff;
+    background: #55ACEE;
+    color: white;
+}
+
+.fa-youtube {
+    border: 1px solid #fff;
+    background: #bb0000;
+    color: white;
+}
+
+.fa-instagram {
+    border: 1px solid #fff;
+    background: #125688;
+    color: white;
+}
+
+.fa:hover {
+    opacity: 0.7;
+}
+
+/* add media */
+@media (max-width: 700px) {
+    .container .box {
+        background-color: black;
+        display: grid;
+        grid-auto-rows: minmax(100px, auto);
+        /* flex-direction:column; */
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        /* background-color: rgb(9, 9, 22); */
+        grid-template-areas:
+            ""
+
+        ;
+    }
+
+    .box {
+        display: flex;
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        align-content: space-between;
+    }
+
+    .header p {
+        display: none;
+    }
+
+    .main img {
+        width: 180px;
+        height: 180px;
+    }
+
+    .section1 img {
+        width: 180px;
+        height: 180px;
+    }
+
+    .section2 img {
+        width: 180px;
+        height: 180px;
+    }
+
+    .section3 img {
+        width: 180px;
+        height: 180px;
+    }
+
+    .section4 img {
+        width: 180px;
+        height: 180px;
+    }
+}
+
+/* @media only screen and (min-width: 540px)and (max-width: 989px){
+    .box{
+        display: flex;
+        flex-direction: column;
+    }
+
+
+    .nav{
+        display: none;
+    }
+    .nav ul{
+        flex-direction: row;
+        justify-content: end;
+    }
+
+
+    } */