CodeYourFuture · Ekremteke · Aug 11, 2022 · Aug 11, 2022 · Aug 12, 2022 · Aug 12, 2022
diff --git a/img/Big-cake.jpg b/img/Big-cake.jpg
diff --git a/img/Donut.jpeg b/img/Donut.jpeg
diff --git a/img/cake with candle.jpg b/img/cake with candle.jpg
diff --git a/img/cupcake.jpg b/img/cupcake.jpg
diff --git a/img/cut cake.jpg b/img/cut cake.jpg
diff --git a/img/newcupcakes.jpg b/img/newcupcakes.jpg
diff --git a/img/—Pngtree—hand painted light blue cupcakes_5567732.png b/img/—Pngtree—hand painted light blue cupcakes_5567732.png
diff --git a/index.html b/index.html
@@ -6,11 +6,79 @@
     <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="style.css">
 </head>
 
 <body>
-    <!-- Add your markup here -->
+    <header>
+        <div class="header">
+            <section class="left-header">
+                <img class="logo" src="img/—Pngtree—hand painted light blue cupcakes_5567732.png" alt="logo">
+            </section>
+
+
+            <section class="slogan">
+                <p>The best cakes in town delivered your door</p>
+            </section>
+
+            <section class="right-header">
+                <div class="hamburger">
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                </div>
+            </section>
+        </div>
+
+
+        <section class="nav-menu">
+            <nav class="menu">
+                <a href="index.html" class="nav-link">HOME</a>
+                <a href="#" class="nav-link">CAKES</a>
+                <a href="#" class="nav-link">ORDERIN</a>
+                <a href="#" class="nav-link">LESSONS</a>
+                <a href="#" class="nav-link">ABOUT</a>
+            </nav>
+
+
+        </section>
+
+
+    </header>
+
+
+    <main class="main2">
+        <article class="welcome">
+            <h1>Welcome</h1>
+            <p>Our delicious cakes in Leeds are perfect for any occasion. Whether you're buying some brownies & cookies
+                for yourself or looking for a last minute birthday cake anywhere in Leeds, you can count on Cutter &
+                Squidge to deliver the goodies!</p>
+        </article>
+        <section>
+            <div class="grid-img">
+                <img class="img1" src="img/Big-cake.jpg" alt="Big-cake">
+                <img class="img2" src="img/cake with candle.jpg" alt="candle-cake">
+                <img class="img3" src="img/cut cake.jpg" alt="pie-cake">
+                <img class="img4" src="img/newcupcakes.jpg" alt="cup-cake">
+                <img class="img5" src="img/Donut.jpeg" alt="donut">
+                <article class="welcome2">
+                    <h1>Welcome</h1>
+                    <p>Our delicious cakes in Leeds are perfect for any occasion. Whether you're buying some brownies & cookies
+                        for yourself or looking for a last minute birthday cake anywhere in Leeds, you can count on Cutter &
+                        Squidge to deliver the goodies!</p>
+                </article>
+            </div>
+
+        </section>
+    </main>
+    <footer>
+        <div class="social">
+            <a class="face s" href="facebook.com">Facebook</a>
+            <a class="twit s" href="twitter">Twitter</a>
+            <a class="insta s" href="instagram">instagram</a>
+        </div>
+        <p class="end">Thank you for visiting our page.</p>
+    </footer>
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,313 @@
-/*  Add your styling here */
+header {
+    background-color: rgb(241, 241, 255);
+}
+.header {
+    background-color: rgb(237, 237, 237);
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+
+}
+.left-header {
+    grid-column: 1 / 3;
+    grid-row: 1/3;
+
+}
+.logo{
+    margin-top: 10px;
+    width: 100%;
+}
+.right-header {
+    grid-column: 5/6;
+    float: right;
+
+}
+.slogan {
+    display: flex;
+    justify-content: right;
+    color: rgb(0, 0, 99);
+    grid-row: 2/3;
+    grid-column: 3 / 6;
+    text-align: right;
+   align-items: flex-end;
+}
+
+.slogan p {
+    font-weight: 500;
+    font-style: italic;
+    margin-right: 10px;
+    margin-bottom: 16px;
+
+}
+.nav-menu {
+    display: none;
+
+}
+
+.hamburger {
+    display: block;
+    cursor: pointer;
+    float: right;
+    margin: 10px 10px;
+}
+
+.bar {
+    display: block;
+    align-items: right;
+    width: 25px;
+    height: 3px;
+    margin: 5px;
+    background-color:rgb(37, 37, 99);
+}
+body {
+    background-color: rgb(241, 241, 255);
+    max-width: 1440px;
+    margin: auto;
+}
+.welcome {
+    padding: 10px 16px;
+    margin: 16px 0;
+    color:rgb(0, 0, 99);
+}
+.welcome p{
+    text-align: justify;
+
+}
+.welcome h1 {
+    font-size:x-large;
+}
+.grid-img {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 10px;
+    grid-row-gap: 15px;
+    padding: 10px;
+    margin: 5px;
+}
+.grid-img img{
+width: 100%;
+}
+.img1 {
+    grid-column: 1/-1;
+
+}
+.img2 {
+    grid-row: 2/3;
+    grid-column: 1/2;
+    height: 100%;
+
+}
+
+.img3 {
+    grid-row: 2/3;
+    grid-column: 2/3;
+
+}
+
+.img4 {
+    grid-row: 3/4;
+    grid-column: 1/2;
+
+}
+
+.img5 {
+    grid-row: 3/4;
+    grid-column: 2/3;
+
+}
+footer {
+    background-color: rgb(237, 237, 237);
+    margin-top: 40px;
+}
+.social {
+    display: grid;
+    margin: 20px auto auto 10px;
+    grid-template-rows: repeat(3, 20px);
+    grid-template-columns: 100px;
+    grid-row-gap: 15px;
+}
+.face {
+    border: solid rgb(170, 170, 170);
+    background-color: rgb(170, 170, 170);
+    text-decoration: none;
+    color: rgb(0, 0, 99);
+}
+.twit {
+    border: solid rgb(170, 170, 170);
+    background-color: rgb(170, 170, 170);
+    text-decoration: none;
+    color: rgb(0, 0, 99);
+}
+.insta {
+    border: solid rgb(170, 170, 170);
+    background-color: rgb(170, 170, 170);
+    text-decoration: none;
+    color: rgb(0, 0, 99);
+}
+.end {
+    text-align: center;
+    border: solid rgb(200, 200, 200);
+    background-color: rgb(200, 200, 200);
+    text-decoration: none;
+    color: rgb(0, 0, 99);
+    margin: 30px;
+    white-space: nowrap;
+}
+.welcome2{
+    display: none;
+}
+@media only screen and (min-width: 540px){
+    .social{
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 10px;
+        margin: 10px 10px;
+    }
+    .social a{
+text-align: center;
+}
+.end{
+    margin: 20px 80px
+}
+.welcome h1 {
+    text-align: center;
+}
+}
+@media only screen and (min-width: 900px) {
+    .right-header{
+        display: none;
+    }
+    .header {
+        display: grid;
+        grid-template-columns: repeat(8, 1fr);
+
+    }
+    .logo{
+        margin-left: 32px;
+        width: 80%;
+    }
+
+    .slogan {
+        display: flex;
+        grid-column: 4/ 9;
+        text-align: right;
+        margin-right: 32px;
+        margin-bottom: 16px;
+    }
+
+    .slogan p {
+        font-weight: 700;
+        font-size: x-large;
+
+    }
+    .nav-menu {
+        display: flex;
+        padding: 16px;
+        margin: 32px;
+        background-color: rgb(237, 237, 237);
+        justify-content: right;
+    }
+    .menu{
+        display: grid;
+        grid-template-columns: repeat(5, auto);
+        grid-column-gap: 20px;
+
+
+    }
+.nav-link {
+    text-decoration: none;
+    color: white;
+    border: solid rgb(170, 170, 170);
+    background-color: rgb(170, 170, 170);
+    padding: 2px 20px;
+}
+.grid-img{
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, auto);
+    margin: 10px 32px;
+}
+.img1{
+    grid-column: 1/3;
+}
+.welcome{
+    display: none;
+}
+.welcome2 {
+    display: grid;
+    gap: 20px;
+    grid-column: 3/5;
+    margin: 10px 0;
+    color:rgb(0, 0, 99);
+}
+.welcome2 p{
+    text-align:justify;
+    margin-right: 32px;
+    align-items:stretch;
+
+}
+.welcome2 h1 {
+    font-size:xx-large;
+    text-align: right;
+margin-right: 32px;
+
+}
+.img2{
+    grid-column: 1/2;
+    grid-row: 2;
+}
+.img3{
+    grid-column: 2/3;
+ grid-row: 2;
+
+}
+.img4{
+    grid-column: 3/4;
+    grid-row: 2;
+}
+
+.img5{
+grid-column: 4/5;
+grid-row: 2;
+
+}
+.social{
+    grid-template-columns: repeat(3, 90px);
+    grid-template-rows: 20px;
+    gap: 40px;
+    margin: auto;
+    justify-content: center;
+}
+.social a{
+text-align: center;
+
+}
+.end{
+margin:20px auto;
+width: 200px;
+}
+
+
+/*
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+