CodeYourFuture · Mr-DEM1R · May 10, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/img/about.jpg b/img/about.jpg
diff --git a/img/bg.jpg b/img/bg.jpg
diff --git a/img/cake-1.jpg b/img/cake-1.jpg
diff --git a/img/cake-2.jpg b/img/cake-2.jpg
diff --git a/img/cake-3.jpg b/img/cake-3.jpg
diff --git a/img/hero.jpg b/img/hero.jpg
diff --git a/img/offer.jpg b/img/offer.jpg
diff --git a/img/service.jpg b/img/service.jpg
diff --git a/img/team-1.jpg b/img/team-1.jpg
diff --git a/img/team-2.jpg b/img/team-2.jpg
diff --git a/img/team-3.jpg b/img/team-3.jpg
diff --git a/img/testimonial-1.jpg b/img/testimonial-1.jpg
diff --git a/img/testimonial-2.jpg b/img/testimonial-2.jpg
diff --git a/img/testimonial-3.jpg b/img/testimonial-3.jpg
diff --git a/img/testimonial-4.jpg b/img/testimonial-4.jpg
diff --git a/index.html b/index.html
@@ -6,11 +6,37 @@
     <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 href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel="stylesheet">
+
+</head>
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-    <!-- Add your markup here -->
+
+<div class="container">
+    <div id="first"><img src="img/service.jpg" alt="service" width="50%" height="50%"></div>
+    <nav>Navbar</nav>
+    <main>main</main>
+    <div id="sidebar">side</div>
+
+
+    <div id="content1"><h2>content1</h2>  
+  </div>
+    <div id="content2">
+      content2
+  </div>
+   <div id="content3">
+      content3
+  </div>
+    <div id="content4">
+      content4
+  </div>
+    <footer>footer<footer/>
+
+  </div>
+
+
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,120 @@
 /*  Add your styling here */
+:root {
+    --main-radius: 5px;
+    --main-padding: 5px;
+  }
+
+  body {
+    font-family: "Inter", sans-serif;
+  }
+  img {
+
+
+}
+  .container {
+    display: grid;
+    height: 100vh;
+    grid-template-columns: 1fr 1fr 1fr 1fr ;
+    grid-template-rows: 1.2fr 0.4fr 2.4fr 2fr 0.5fr;
+    grid-template-areas:
+      "firstpic firstpic firstpic firstpic"
+      "nav nav nav nav"
+      "sidebar sidebar  main main"
+      "content1 content2 content3 content4"
+      "footer footer footer footer"
+      ;
+    grid-gap: 0.2rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    font-size: 12px;
+    color: #004d40;
+    text-align: center;
+  }
+  #first {
+    background: #6fffd2;
+    grid-area: firstpic;
+    border-radius: var(--main-radius);
+    padding-top: var(--main-padding);
+  }
+
+
+  nav {
+    background: #a7ffeb;
+    grid-area: nav;
+    border-radius: var(--main-radius);
+    padding-top: var(--main-padding);
+  }
+
+  main {
+    background: #84ffff;
+    grid-area: main;
+    border-radius: var(--main-radius);
+    padding-top: var(--main-padding);
+  }
+
+  #sidebar {
+    background: #18ffff;
+    grid-area: sidebar;
+    border-radius: var(--main-radius);
+    padding-top: var(--main-padding);
+  }
+
+  #content1 {
+    background: #6fffd2;
+    grid-area: content1;
+    border-radius: var(--main-radius);
+    padding-top: var(--main-padding);
+  }
+
+  #content2 {
+    background: #64ffda;
+    grid-area: content2;
+    border-radius: var(--main-radius);
+    padding-top: var(--main-padding);
+  }
+  #content3 {
+    background: #64ffda;
+    grid-area: content3;
+    border-radius: var(--main-radius);
+    padding-top: var(--main-padding);
+  }
+  #content4 {
+    background: #64ffda;
+    grid-area: content4;
+    border-radius: var(--main-radius);
+    padding-top: var(--main-padding);
+  }
+
+  footer {
+    background: #64ffda;
+    grid-area: footer;
+    border-radius: var(--main-radius);
+    padding-top: var(--main-padding);
+  }
+
+
+
+
+
+
+
+
+  @media only screen and (max-width: 550px) {
+    .container {
+
+      grid-template-columns: 1fr;
+      grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr 1fr;
+      grid-template-areas:
+        "nav"
+        "sidebar"
+        "main"
+        "content1"
+        "content2"
+        "content3"
+        "content4"
+        "footer"
+        ;
+
+    }
+  }
+