CodeYourFuture · azadehroshan · Aug 12, 2022
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/backgroung-img.jpg b/backgroung-img.jpg
diff --git a/event cake.png b/event cake.png
diff --git a/facebook.png b/facebook.png
diff --git a/giftbox.webp b/giftbox.webp
diff --git a/index.html b/index.html
@@ -6,11 +6,49 @@
     <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>
+    <link rel="stylesheet" href="style.css">
     <!-- Add a link to your css file here -->
 </head>
 
-<body>
-    <!-- Add your markup here -->
-</body>
+<div class="container">
+
+<nav> <div class="logo"><img src="./logo.webp" alt="cake-logo" width="50" height="50"></div>
+    <h1 class="logo-name"> <span>RBG Cake </span></h1>
+        <ul>
+            <li><a href="#"> Contact us</a></li>
+            <li><a href="#"> Vist us</a></li>
+            <li><a href="#"> Cake Archives </a></li>
+        </ul>
+    <a class="cta" href="#"><button> online shopping</button></a>
+    <div class="icon">
+        <i class="fas fa-bars" id="menu"></i>
+    </div>
+</nav>
+
+<main> <div class="backgroung-img"></div> </main>
+<div id="sidebar">Every cake is baked by us, from scratch, using all natural ingredients and only ever free-range eggs. They taste lovely and look "homemade".
+
+    Click on the pictures below to see our full range. All our cakes are delivered frozen to preserve their quality (we don't add any funny ingredients to prolong their lives).
+
+    If you're a cake-using business and you want a sample, we'll sort that out for you - just give our friendly sales team a call.</div>
+<div id="content1">Wedding Cake
+</div>
+<div id="content1">kids Cakes</div>
+<div id="content1">Organisation</div>
+
+<footer>join us <div class="socialmedia-icons">
+    <ul>
+        <a href="./whatsup.png" Whatsup="img"></a>
+        <a href="./instagram.png" Instagramr="img"></a>
+        <a href="./facebook.png" Facebook="img"></a>
+    </ul>
+</div>
+</footer>
+</div>
+
+
+</html>
+
+
+
 
-</html>
diff --git a/instagram.png b/instagram.png
diff --git a/kids.jpg b/kids.jpg
diff --git a/logo.webp b/logo.webp
diff --git a/style.css b/style.css
@@ -1 +1,187 @@
 /*  Add your styling here */
+@import url('https://fonts.googleapis.com/css?family=Sofia');
+
+:root{
+  --main-reduce:5px;
+  --main-padding:5px;  
+}
+.container{
+    display: grid;
+    height: 100vh;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
+    grid-template-areas: 
+    "nav nav nav nav"
+    "sidebar main main main"
+    "sidebar content1 content2 content3"
+    "sidebar footer footer footer";
+    grid-gap: 0.2rem;
+    font-family:"Sans-serif", Tahoma, Verdana,sans-serif;
+    font-weight:800;
+    text-transform:uppercase;
+    font-size:12px;
+    color: voilent;
+    text-align: center;
+}
+ nav{
+background: white;
+grid-area: nav;
+border-radius: var(--main-reduce);
+padding-top: var(--main-padding);
+ }
+
+ main{
+    background: white;
+    background-image:url(./backgroung-img.jpg);
+  background-size:cover;
+  grid-area: main;
+  border-radius: var(--main-reduce);
+padding-top: var(--main-padding);
+}
+#sidebar{
+    background: rgb(128, 53, 53);
+    grid-area:sidebar;
+    border-radius: var(--main-reduce);
+padding-top: var(--main-padding);
+}
+#content1{
+    background: rgb(140, 14, 218);
+    grid-area: content1;
+    border-radius: var(--main-reduce);
+    padding-top: var(--main-padding);
+}
+
+#content2{
+    background: rgb(213, 31, 183);
+    grid-area: content2;
+    border-radius: var(--main-reduce);
+    padding-top: var(--main-padding);
+
+}
+#content3{
+    background: violet;
+    grid-area: content3;
+    border-radius: var(--main-reduce);
+    padding-top: var(--main-padding);
+
+}
+footer{
+    background: yellow;
+    grid-area:footer;
+    border-radius: var(--main-reduce);
+    padding-top: var(--main-padding);
+}
+
+
+@media only screen and(max-width:540px) {
+.container{
+grid-template-columns: 1fr;
+grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
+grid-template-areas: 
+"nav"
+"sidebar"
+"content1"
+"content2"
+"content3"
+"footer"
+}
+}
+
+/* 
+{
+body 
+{
+  font-family: "Sans-serif", Tahoma, Verdana,sans-serif;
+  margin: 0;
+
+
+   .header 
+   {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+ }
+ .header .logo
+ { 
+    cursor: pointer;
+    margin-right: auto; 
+}
+ .logo-name
+ {
+    height: auto;
+    margin-top: 15px;
+    margin-right: auto;
+    font-size: 1.0rem;
+    position:relative;
+    display:inline-block;
+    vertical-align: top;
+}
+ul{
+    list-style:none;
+  }
+li, a,button
+{
+font-family: Arial, Helvetica, sans-serif;
+font-weight: 500;
+font-size: 16px;
+color: blueviolet;
+text-decoration: none;
+}
+.navbar-link
+{
+list-style: none;
+}
+.navbar-link li
+{
+display: inline-block;
+padding:0px 20px;
+}
+.navnar-link li a
+{
+transition: all 0s ease 0s;
+}
+button
+{
+margin-left: 20px;
+padding:9px 25px;
+background-color: rgb(254, 182, 218);
+border:none;
+border-radius: 50px;
+transition: all 0s ease 0s;
+cursor:pointer;
+ }
+
+.main 
+{
+padding-right: 2rem;
+(max-width: 450PX)HTML{
+    font-size: 50%;
+}
+}
+        .sidebar {
+            height: 100%; 
+            width: 0; 
+            position: fixed; 
+            z-index: 1; 
+            top: 0;
+            left: 0;
+            background-color: #111; 
+            overflow-x: hidden; 
+            padding-top: 60px;
+            transition: 0.5s;
+        }
+
+  .footer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  } 
+   */
+
+
+
+  /* Media queries for web responsive*/
+  @media (min-width: 540px) 
+  @media screen and (min-width: 540px) {
+
diff --git a/wedding.webp b/wedding.webp
diff --git a/whatsup.png b/whatsup.png