CodeYourFuture · MathoNM · Jul 29, 2022 · Aug 25, 2022
diff --git a/Cakes/images (1).jpg b/Cakes/images (1).jpg
diff --git a/Cakes/images (2).jpg b/Cakes/images (2).jpg
diff --git a/Cakes/images (3).jpg b/Cakes/images (3).jpg
diff --git a/Cakes/images (4).jpg b/Cakes/images (4).jpg
diff --git a/Cakes/images (5).jpg b/Cakes/images (5).jpg
diff --git a/Cakes/images (7).jpg b/Cakes/images (7).jpg
diff --git a/Cakes/images.jpg b/Cakes/images.jpg
diff --git a/index.html b/index.html
@@ -1,16 +1,80 @@
 <!DOCTYPE html>
-<html lang="en">
+ <html lang="en">
 
-<head>
+ <head>
     <meta charset="UTF-8">
     <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 -->
-</head>
+
+ </head>
 
-<body>
-    <!-- Add your markup here -->
-</body>
+ <body>
+ <!-- Add your markup here -->
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/style.css">
+    <title>Responsive Cake Webpage</title>  
+ </head>
+ <!---Header content--> 
+ <header class="header-container">
+ <img src="./Cakes/images (7).jpg" alt="Brand logo">
+ <div class="toggle-title">
+ <label for="hamburger">&#9776</label>
+ <input type="checkbox" id="hamburger">
+ <h1>The best cakes in town delivered to your door</h1>
 
-</html>
+ <!---Nav bar-->  
+ <nav>   
+ <ul>
+ <li><a href="#welcome" class="nav-link">HOME</a></li>
+ <li><a href="#page-images" class="nav-link">CAKES</a></li>
+ <li><a href="#order" class="nav-link">ORDER</a></li>
+ <li><a href="#lessons" class="nav-link">LESSONS</a></li>
+ <li><a href="#About" class="nav-link">ABOUT</a></li>
+ </ul>
+ </nav>
+ </div>
+ </header>
+ <!--Main-->
+ <main class="page-wrapper">
+ <article class="welcome" id="welcome">
+ <div class="welcome-text">
+ <h2>Welcome</h2>
+ <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore illum culpa numquam possimus hic quibusdam alias
+ officia praesentium vero deserunt aliquam explicabo necessitatibus porro, harum nam rerum nulla nobis corporis?
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore illum culpa numquam possimus hic quibusdam alias
+ officia praesentium vero deserunt aliquam explicabo necessitatibus porro, harum nam rerum nulla nobis corporis?</p>
+ </div>
+
+ <div class="hero-img">
+ <img src="./Cakes/images.jpg" alt="Chocolate with fruit party Cake">
+ </div>
+ </article>
+ <section class="page-images" id="page-images">
+ <div class="container">
+ <img src="./Cakes/images (1).jpg" alt="Butterscotch wedding cake">
+ <img src="./Cakes/images (2).jpg" alt="White chocolate wedding cake">
+ <img src="./Cakes/images (3).jpg" alt="Mint cream birthday cake">
+ <img src="./Cakes/images (4).jpg" alt="Buttermilk chocolate cake">
+ </div>
+ </section>
+ </main>
+ <!--Footer-->
+ <section class="icons" id="order">
+   <div class="order">
+    <a href="https://www.instagram.com"
+    target="_blank"><img src="./Social icons/In.jpeg" alt="instagram"></a>
+    <a href="https://www.pinterest.co.uk"
+    target="_blank"><img src="./Social icons/P.png" alt="Pinterest"></a>
+    <a href="https://www.facebook.com/"
+    target="_blank"><img src="./Social icons/f.png" alt="Facebook"></a>
+ </div>
+ </section>
+ </footer>
+ </body>
+ </html>
diff --git a/practice.js b/practice.js
@@ -0,0 +1,79 @@
+// 
+
+// let kitten = {
+//     furColour: "orange",
+//     age: "23",
+// };
+
+// let laptop ={
+//     brand: "Lenovo",
+//     ram: "5GB",
+// };
+
+// let phone = {
+//     operatingSystem: "iOS",
+//     hasStylus: true,
+//     megapixels: 12,
+//     "batteryLife": "24 hours",
+// }
+
+// console.log(phone.hasStylus);
+
+// let laptop = {
+//     brand: "Lenovo",
+//     screenSize: 13,
+//     isTouchscreen: true,
+//   };
+// console.log(laptop.brand);
+
+// let kitten = {
+//     ageMonths: 3,
+//     isFemale: true,
+//     furColour: "brown",
+//   };
+
+//   console.log(kitten.ageMonths);
+//   console.log(kitten.isFemale);
+//   console.log(kitten.furColour);
+
+// let phone = {
+//     brand:'iPhone',
+//     model: 'iPhone X',
+//     launchYear: 2017,
+//     isUnlocked: true,
+// };
+
+//   let phoneBrand = phone.brand;
+//   let phoneLaunchYear = phone["launchYear"];
+
+//   console.log(phoneBrand);
+//   console.log(phoneLaunchYear);
+
+// WRITE CODE BELOW THIS
+// let cow = {
+//     name: "Rex",
+//     eatGrass: "true",
+// };
+// // WRITE CODE ABOVE THIS
+
+// console.log(cow.name);
+// console.log(cow.eatGrass);
+
+// let house = {
+//     address: "1 Kinning Park",
+//     previousOwners: ["Claire M.", "John A."],
+//     currentOwner: {
+//       firstName: "Margaret",
+//       lastName: "Conway",
+//     },
+//   };
+  let house = {
+    address: '51 Berkley Road',
+    previousOwners: ["Brian M.", "Fiona S."],
+    currentOwner: {
+        firstName: "Montgomery",
+    }
+  }
+  console.log(house.address);
+  console.log(house.previousOwners);
+  console.log(house.currentOwner.firstName);
diff --git a/style.css b/style.css
@@ -1 +1,135 @@
 /*  Add your styling here */
+
+/* General*/
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ background-color: bisque;
+}
+
+/* header */
+.header-container {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  margin-bottom: auto;
+  justify-items: left;
+  image-resolution: 15%;
+}
+
+.header-container img {
+  width: 50vw;
+  padding: 20px;
+  position: absolute;
+}
+@media screen and (min-width: 600px) {
+  .header-container img {
+    width: 300px;
+  }
+}
+@media screen and (min-width: 1000px) {
+  .header-container img {
+    width: 350px;
+  }
+}
+@media screen and (min-width: 2000px) {
+  .header-container img {
+    width: 400px;
+  }
+}
+
+.toggle-title {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  align-items: flex-end;
+  width: 100vw;
+}
+
+.toggle-title h1 {
+  font-size: 15px;
+  text-align: right;
+  width: 138px;
+  margin: 43px 0;
+  color: #3C372C;
+}
+@media screen and (min-width: 540px) {
+  .toggle-title h1 {
+    font-size: 18px;
+  }
+}
+@media screen and (min-width: 800px) {
+  .toggle-title h1 {
+    font-size: 20px;
+    width: 400px;
+  }
+}
+@media screen and (min-width: 1000px) {
+  .toggle-title h1 {
+    font-size: 30px;
+    width: 600px;
+  }
+}
+@media screen and (min-width: 1400px) {
+  .toggle-title h1 {
+    font-size: 50px;
+    width: 1000px;
+  }
+}
+
+.toggle-title ul {
+  margin-left: auto;
+  margin: auto;
+  width: 90vw;
+  padding-top: 20px;
+}
+
+.toggle-title li {
+  list-style: none;
+  line-height: 70px;
+  border-bottom: 4px line #f29191;
+}
+
+.toggle-title a {
+  text-decoration: none;
+  padding: 10px;
+  color: #fff;
+}
+/*Nav bar*/
+.nav-link {
+  background-color: #809eff5e;
+  box-shadow: 4px 5px #FFCCAA;
+  border-radius: 20px;
+}
+
+.nav-link:hover {
+  background-color: #91f2dd;
+}
+
+/* turns toggle on and off */
+input[type=checkbox] {
+  display: none;
+}
+
+ul {
+  display: none;
+}
+
+input[type=checkbox]:checked ~ ul {
+  display: block;
+}
+@media screen and (min-width: 540px) {
+  label {
+    display: none;
+  }
+}
+@media screen and (min-width: 540px) {
+  .toggle-title ul {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
diff --git a/week4.js b/week4.js
@@ -0,0 +1,31 @@
+//let years = [1964, 2008, 1999, 2005, 1978, 1985, 1919]
+//years.forEach(function(num)){ 
+//let x = num - 7
+//console.log(x)
+
+let array = [
+    100,
+    "iSMael",
+    55,
+    45,
+    "sANyiA",
+    66,
+    "JaMEs",
+    "eLAmIn",
+    23,
+    "IsMael",
+    67,
+    19,
+    "ElaMIN",
+  ];
+
+  function removeNumbers(element) {
+      if(typeof element === "string") {
+          return element;
+      }
+  }
+
+  function upperCase(name) {
+      return name.toUpperCase() + "!" ;
+
+  }