CodeYourFuture · Yesna-Omar · Feb 15, 2023
diff --git a/icon/dT76Ga98c.png b/icon/dT76Ga98c.png
diff --git a/icon/pngwing.com (1).png b/icon/pngwing.com (1).png
diff --git a/icon/yio6XBkeT.png b/icon/yio6XBkeT.png
diff --git a/image/alex-lvrs-aX_ljOOyWJY-unsplash.jpg b/image/alex-lvrs-aX_ljOOyWJY-unsplash.jpg
diff --git a/image/american-heritage-chocolate-vdx5hPQhXFk-unsplash.jpg b/image/american-heritage-chocolate-vdx5hPQhXFk-unsplash.jpg
diff --git a/image/deva-williamson-S2jw81lfrG0-unsplash.jpg b/image/deva-williamson-S2jw81lfrG0-unsplash.jpg
diff --git a/image/heather-barnes-_TN1m5R1pFI-unsplash.jpg b/image/heather-barnes-_TN1m5R1pFI-unsplash.jpg
diff --git a/image/henry-be-_y5CCcYWTjU-unsplash.jpg b/image/henry-be-_y5CCcYWTjU-unsplash.jpg
diff --git a/image/jacob-thomas-6jHpcBPw7i8-unsplash.jpg b/image/jacob-thomas-6jHpcBPw7i8-unsplash.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,259 @@
+
+html, body {
+box-sizing: border-box;
+background-color:  #eadff3;
+margin: 0px;
+}
+
+
+/*header*/
+
+.header{
+    background-color: #614178;
+}
+
+
+header > p{
+    color: aqua;
+    cursor: pointer;
+    font-size: 1.3rem;
+    margin-left: 16%;
+    width: 100%;
+}
+header > img{
+
+    width: 20%;
+    height: 100%;
+}
+
+/*navigation*/
+
+.nav{
+background-color: rgb(242, 249, 249);
+margin-left: 0.5rem;
+margin-right: 0.5rem;
+margin-top: 0.5rem;
+border: solid;
+border-radius: 1rem;
+border-color: #eadff3;
+margin-bottom: 1rem;
+
+}
+.ul-nav{
+    list-style-type: none;
+
+}
+.ul-nav a {
+    text-decoration: none;
+}
+.nav > ul{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-right: 20%;
+}
+.n-link{
+    border: solid;
+    border-color:  rgb(242, 249, 249);
+    padding: 0.5rem;
+    background-color: #eadff3;
+    border-radius: 1rem;
+
+}
+a:hover{
+    background-color: aqua;
+}
+
+/*main*/
+
+.cake-1{
+    width: 70%;
+    border-radius: 3rem;
+    margin-left: 2rem;
+}
+.section-1{
+    font-size: 2rem;
+    color: black;
+
+}
+.section-2{
+    margin-top: 18%;
+    font-size: 1.5rem;
+    margin-right: 5%;
+    color: black;
+}
+
+.main-2{
+    margin-top: 1rem;
+}
+.cake-a{
+    width: 90%;
+    height: 90%;
+}
+.cake-b{
+    width: 90%;
+    height: 90%;
+}
+.cake-c{
+    width: 90%;
+    height: 90%;
+}
+.cake-d{
+    width: 90%;
+    height: 90%;
+}
+
+/*footer*/
+
+.footer {
+    background-color: #614178;
+}
+.section-a{
+    margin-top: 5%;
+}
+.icon-a{
+    width: 80%;
+}
+.section-b{
+    margin-top: 12%;
+    margin-left: 15%;
+}
+.icon-b{
+    width: 38%;
+}
+
+.section-c{
+    margin-top: 10%;
+}
+.icon-c{
+    width: 30%;
+}
+.section-d{
+    margin-top: 10%;
+    color: aqua;
+    cursor: pointer;
+    font-size: 1.3rem;
+    width: 100%;
+}
+
+/*grid*/
+
+/*header*/
+
+.header {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+}
+
+header >p{
+    justify-content: end;
+    align-self: self-end;
+    }
+
+/*main*/
+
+.main-1{
+    display: grid;
+    grid-template-columns: repeat(6,1fr);
+    grid-template-rows: 1fr 1fr ;
+
+}
+.article-1{
+grid-column: 1/4;
+grid-row: 1/3;
+}
+.section-1{
+    grid-column: 4;
+    grid-row: 1;
+}
+.section-2{
+    grid-column: 4/6;
+    grid-row: 1/3;
+}
+.main-2{
+    display: grid;
+    grid-template-columns: repeat(6,1fr);
+    grid-template-rows: 1fr;
+}
+.article-a{
+    grid-column: 2;
+}
+.article-b{
+    grid-column: 3;
+}
+.article-c{
+    grid-column: 4;
+}
+.article-d{
+    grid-column: 5;
+}
+
+/*footer*/
+
+.footer {
+    display: grid;
+    grid-template-columns: repeat(5,1fr);
+    grid-template-rows: 1fr 1fr;
+}
+.section-a{
+grid-column: 2;
+}
+.section-b{
+    grid-column: 3;
+}
+.section-c{
+    grid-column: 4;
+}
+.section-d{
+    grid-column: 3;
+    grid-row: 2;
+}
+
+/*media query*/
+
+@media only screen and (max-width:450px){
+
+.header{
+width: 100%;
+height: 40%;
+} 
+.header >p{
+    margin-left: 0.1rem;
+}
+.cake-1{
+    margin-top: 15%;
+}
+.section-1{
+    font-size: 1rem;
+    margin-top: 25%;
+
+
+}
+.section-2{
+    margin-top: 30%;
+    font-size: 0.5rem;
+}
+nav{
+    display: none;
+}
+.icon-a{
+    width:5rem;
+}
+.icon-b{
+    width:2.3rem;
+    margin-left: 2rem;
+}
+.icon-c{
+    width:2rem;
+    margin-top: 0.6rem;
+    margin-left: 1rem;
+}
+
+}
+
+@media only screen and (max-width:900px) {
+.contaner{
+    width: 100%;
+}  
+}
diff --git a/index.html b/index.html
@@ -7,10 +7,76 @@
     <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="index.css">
 </head>
 
 <body>
     <!-- Add your markup here -->
+    <div class="container">
+    <header class="header">
+
+        <img src="image/deva-williamson-S2jw81lfrG0-unsplash.jpg" alt="cake">
+
+        <p class="par">
+            The best cakes in town deliverd to your door
+        </p>
+
+    </header>
+    <nav class="nav">
+        <ul class="ul-nav">
+            <li>
+                <a href="#" class="n-link">HOME</a>
+            </li>
+            <li>
+                <a href="#" class="n-link">CAKES</a>
+            </li>
+            <li>
+                <a href="#" class="n-link">ORDERIN</a>
+            </li>
+            <li>
+                <a href="#" class="n-link">LESSONS</a>
+            </li>
+            <li>
+                <a href="#" class="n-link">ABOUT</a>
+            </li>
+        </ul>
+    </nav>
+    <main class="main">
+        <div class="main-1">
+                <article class="article-1">
+                    <img src="image/american-heritage-chocolate-vdx5hPQhXFk-unsplash.jpg" alt="cake-image" class="cake-1">
+                </article>
+                <section class="section-1"> welcome</section>
+                <section class="section-2">
+                    We have a wide variety of cakes organised into collections.
+                    Many of our cakes can be purchased online 
+                    and either delivered in the Edinburgh and 
+                    Glasgow regions of Scotland or collected from our cake shops.
+                    Make your selection here!
+                </section> 
+        </div>
+        <div class="main-2">
+            <article class="article-a">
+                <img src="image/alex-lvrs-aX_ljOOyWJY-unsplash.jpg" alt="cake-image" class="cake-a">
+            </article>
+            <article class="article-b">
+                <img src="image/heather-barnes-_TN1m5R1pFI-unsplash.jpg" alt="cake-image" class="cake-b">
+            </article>
+            <article class="article-c">
+                <img src="image/henry-be-_y5CCcYWTjU-unsplash.jpg" alt="cake-image" class="cake-c">
+            </article>
+            <article class="article-d">
+                <img src="image/jacob-thomas-6jHpcBPw7i8-unsplash.jpg" alt="cake-image" class="cake-d">
+            </article>
+        </div>
+    </main>
+    <footer class="footer">
+        <section class="section-a"><img src="icon/pngwing.com (1).png" alt="instagram" class="icon-a"></section>
+        <section class="section-b"><img src="icon/dT76Ga98c.png" alt="facebook" class="icon-b"></section>
+        <section class="section-c"><img src="icon/yio6XBkeT.png" alt="twitter" class="icon-c"></section>
+        <section class="section-d"> info@123456.co.uk</section>
+    </footer>
+</div>
 </body>
 
 </html>
diff --git a/style.css b/style.css