CodeYourFuture · Shimaadnan · Aug 11, 2022
diff --git a/design/istockphoto-1200027239-612x612 31.jpg b/design/istockphoto-1200027239-612x612 31.jpg
diff --git a/design/istockphoto-1204924850-612x612 34.jpg b/design/istockphoto-1204924850-612x612 34.jpg
diff --git a/design/istockphoto-1339241159-612x612.jpg b/design/istockphoto-1339241159-612x612.jpg
diff --git a/design/istockphoto-151527392-612x612.jpg b/design/istockphoto-151527392-612x612.jpg
diff --git a/design/istockphoto-184754154-612x612 22.jpg b/design/istockphoto-184754154-612x612 22.jpg
diff --git a/design/istockphoto-477411296-612x612 33.jpg b/design/istockphoto-477411296-612x612 33.jpg
diff --git a/design/istockphoto-854142612-612x612 32.jpg b/design/istockphoto-854142612-612x612 32.jpg
diff --git a/design/logo pic.jfif b/design/logo pic.jfif
diff --git a/index.html b/index.html
@@ -7,10 +7,56 @@
     <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="./style.css">
 </head>
 
 <body>
+    <header class="head">
     <!-- Add your markup here -->
-</body>
+    <img src="/design/logo pic.jfif" alt="logo">
+    <div class="head__part">
+          <input class="menu__toggle" id="menu__toggle" type="checkbox" />
+          <label class="menu__btn" for="menu__toggle">
+            <span class="nav-icon"></span>
+          </label>
+
+          <ul class="nav-menu">
+            <li><a class="menu__item" href="#">Home</a></li>
+            <li><a class="menu__item" href="#">Cakes</a></li>
+            <li><a class="menu__item" href="#">Ordering</a></li>
+            <li><a class="menu__item" href="#">About</a></li>
+          </ul>
+        <h5  class="head-paragraph">The best cakes in town delivered to your door</h5>
+      </div>
+    </header>
+    <main>
+      <section class="body1">
+        <img class="birthday" src="design/istockphoto-184754154-612x612 22.jpg" alt="Birthday"/>
+      <div class="body1-2">
+       <h1 class="main__title">Welcome</h1>
+        <p class="main__paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex exercitationem, error inventore alias quibusdam ratione aliquam enim fugiat sequi ut, nostrum esse atque tempore vitae consequatur, officiis mollitia. Omnis illum quasi iste quis enim exercitationem necessitatibus voluptatem voluptates ipsum ipsa error ullam beatae cupiditate a nulla eveniet optio, eaque labore assumenda in voluptate! Autem magnam vel molestias porro, harum aperiam.</p>
+      </div>
+
+      </section>
+        <div class="four__pic">
+        <img class="img1" src="design/istockphoto-1200027239-612x612 31.jpg" alt="image1">
+        <img class="img2" src="design/istockphoto-854142612-612x612 32.jpg" alt="image2">
+        <img class="img3" src="design/istockphoto-477411296-612x612 33.jpg" alt="image3">
+        <img class="img4" src="design/istockphoto-1204924850-612x612 34.jpg" alt="image3">
+        </div>
+        <footer class="foot">
+          <div class="links">
+          <a class="link1" href="#">Facebook</a>
+          <a class="link2"  href="#">Instagram</a>
+          <a  class="link3" href="#">Twitter</a>
+          </div>
+          <div>
+          <p>Thanks for your support</p>
+          </div>
 
+
+        </footer>
+
+    </main>
+</body>
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,265 @@
-/*  Add your styling here */
+body{
+    margin:0;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: antiquewhite;
+}
+
+a{
+    color:black;
+}
+
+.head{
+    background-color:white;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    box-shadow: 1px 1px 4px 0 rgba(1, 1, 1, 1);
+
+
+}
+.head__part{
+    display:flex;
+    flex-direction: column;
+    text-align: end;
+
+}
+
+header ul{
+    margin:0;
+    padding:0;
+    list-style: none;
+    overflow: hidden;
+
+}
+
+.menu__item{
+    display:block;
+    padding:20px;
+    border-right: 1px solid #aaa;
+    text-decoration: none;
+}
+.menu__item:hover{
+    background-color: rgb(203, 203, 224);
+
+}
+.nav-menu{
+    max-height: 0;
+    transition: max-height .2s ease-out;
+}
+.menu__btn{
+
+    padding:20px;
+    position:relative;
+    float:right;
+    cursor: pointer;
+}
+.nav-icon{
+    background-color: black;
+    display:block;
+    height:2px;
+    width:18px;
+    position:relative;
+    transition:background .2s ease-out;
+}
+.nav-icon:before{
+    background:black;
+    content: "";
+    display:block;
+    height:100%;
+    width:100%;
+    position:absolute;
+    transition: all .2s ease-out;
+    top:5px;
+}
+.nav-icon:after{
+    background:black;
+    content: "";
+    display:block;
+    height:100%;
+    width:100%;
+    position:absolute;
+    transition: all .2s ease-out;
+    top:-5px;
+}
+.head .menu__toggle{
+    display:none;
+}
+/*css for when the menu checked*/
+.head .menu__toggle:checked ~ .nav-menu{
+    max-height:240px;
+}
+.head .menu__toggle:checked ~ .menu__btn .nav-icon{
+    background: transparent;
+
+}
+
+.head .menu__toggle:checked ~ .menu__btn .nav-icon:before{
+    transform: rotate(-45deg);
+    top:0;
+}
+
+.head .menu__toggle:checked ~ .menu__btn .nav-icon:after{
+    transform: rotate(45deg);
+    top:0;
+
+}
+
+.main__paragraph{
+    margin:5px;
+
+}
+
+.birthday{
+  width: 300px;
+  height:181;
+}
+
+.img1 ,.img2 ,.img3 ,.img4{
+    width:148px;
+    height:98px;
+}
+
+
+.four__pic{
+display: grid;
+grid-template-columns: 1fr 1fr;
+/*grid-template-rows: 1fr 1fr;*/
+
+}
+
+
+
+.links{
+  display:grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  grid-gap: 15px;
+  margin:25px  25px;
+  justify-content: center;
+
+}
+.links a {
+
+    text-decoration-line: none;
+}
+
+
+
+
+footer p{
+  font-weight: bold;
+  text-align: center;
+}
+
+
+
+
+
+
+
+
+@media  (min-width:300px){
+    .head li{
+        float:left;
+    }
+    .head li a{
+        padding:20px 30px;
+    }
+.head .nav-menu{
+    clear:none;
+    float:right;
+    max-height:none;
+
+}
+.nav-icon{
+    display:none;
+}
+.body1{
+    display:flex;
+    gap: 15px;
+
+}
+.birthday{
+    grid-column: 1/2;
+}
+.body1-2{
+   grid-column: 2/-1 ;
+}
+.main__title{
+    text-align: center;
+}
+
+.four__pic{
+display: grid;
+grid-template-columns: 1fr 1fr 1fr 1fr;
+margin-top: 20px;
+
+}
+.img1 , .img2, .img3 ,.img4{
+    width:300px;
+    height:300px;
+
+}
+
+.links{
+ display:flex;
+ justify-content: center;
+
+
+}
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+