CodeYourFuture · Texx45 · Jun 7, 2021 · Jun 9, 2021 · Jun 9, 2021 · Jun 9, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/images/cake-food-logo-9A487CF7AA-seeklogo.com.png b/images/cake-food-logo-9A487CF7AA-seeklogo.com.png
diff --git a/images/cristina-matos-albers-Ltv7a5m8i4c-unsplash.jpg b/images/cristina-matos-albers-Ltv7a5m8i4c-unsplash.jpg
diff --git a/images/cupcakes.jpg b/images/cupcakes.jpg
diff --git a/images/iconmonstr-facebook-5.svg b/images/iconmonstr-facebook-5.svg
diff --git a/images/iconmonstr-instagram-11.svg b/images/iconmonstr-instagram-11.svg
diff --git a/images/iconmonstr-twitter-4.svg b/images/iconmonstr-twitter-4.svg
diff --git a/images/melissia-suares-7dhnDG46L2E-unsplash.jpg b/images/melissia-suares-7dhnDG46L2E-unsplash.jpg
diff --git a/images/menu2.png b/images/menu2.png
diff --git a/images/nickie-joseph-T6oD9CIlpGA-unsplash.jpg b/images/nickie-joseph-T6oD9CIlpGA-unsplash.jpg
diff --git a/images/pexels-vojtech-okenka-1055271.jpg b/images/pexels-vojtech-okenka-1055271.jpg
diff --git a/images/tacyra-autrey-ny_FqNYqnP4-unsplash.jpg b/images/tacyra-autrey-ny_FqNYqnP4-unsplash.jpg
diff --git a/index.html b/index.html
@@ -1,16 +1,91 @@
 <!DOCTYPE html>
 <html lang="en">
+  <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" />
 
-<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>
+    <!-- <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
+      crossorigin="anonymous"
+    /> -->
+    <link rel="stylesheet" href="style.css" />
+    <!-- <link
+      href="/your-path-to-fontawesome/css/fontawesome.css"
+      rel="stylesheet"
+    /> -->
+  </head>
 
-<body>
+  <body>
     <!-- Add your markup here -->
-</body>
+    <header>
+      <!-- **** LOGO **** -->
+      <img
+        src="images/cake-food-logo-9A487CF7AA-seeklogo.com.png"
+        alt="cupcake logo"
+        class="logo"
+      />
+      <h1>The best cakes in town delivered to your door!</h1>
+      <!-- *** HAMBURGER MENU *** -->
+      <div class="hamburger-container">
+        <img
+          src="images/menu2.png"
+          class="hamburger-icon"
+          alt="hamburger menu icon"
+        />
+      </div>
+    </header>
+    <!-- **** NAVBAR **** -->
+    <nav class="navbar-container">
+      <nav class="navbar-links ">
+        <ul>
+          <li><a href="#">Home</a></li>
+          <li><a href="#">Cakes</a></li>
+          <li><a href="#">Ordering</a</li> 
+          <li><a href="#">Lessons</a></li>
+          <li><a href="#">About</a></li>
+        </ul>
+      </nav>
+    </nav>
+<div class="hero">
+  <section class="welcome">
+    <h2>Welcome</h2>
+    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae, repudiandae harum. Maxime modi voluptatum ipsam inventore consectetur praesentium, doloribus soluta.</p>
+  </section>
+  <section class="image-container">
+  <img class="main-image" src="images/cupcakes.jpg" alt="2 cupcakes">
+  </section>
+  </div>
+
+  <section class="image-cards">
+    <img src="images/melissia-suares-7dhnDG46L2E-unsplash.jpg" alt="choc chip cupcakes">
+    <img src="images/pexels-vojtech-okenka-1055271.jpg" alt="yellow cupcake">
 
-</html>
+    <img src="images/nickie-joseph-T6oD9CIlpGA-unsplash.jpg" alt="white rainbow cupcakes">
+    <img src="images/tacyra-autrey-ny_FqNYqnP4-unsplash.jpg" alt="chocolate doughnut">
+  </section>
+
+<div id="wave"></div>
+<footer>
+  <section class="social-media">
+<ul>
+<li><a href="#"><img src="images/iconmonstr-facebook-5.svg" alt="facebook icon"></a></li>
+<li><a href="#"><img src="images/iconmonstr-instagram-11.svg" alt="instagram icon"></a></li>
+<li><a href="#"><img src="images/iconmonstr-twitter-4.svg" alt="twitter icon"></a></li>
+</ul>
+  </section>
+  <section class="copyright">
+    <p>© Katie's Cupcakes 2021</p>
+  </section>
+</footer>
+
+
+    <script src="script.js"></script>
+  </body>
+</html>
+
+<!-- **** LINKS **** -->
diff --git a/readme.md b/readme.md
@@ -4,69 +4,71 @@ The aim of this exercise is to create a **responsive webpage** showcasing your c
 
 Two wireframes are provided down below (scroll to the bottom).
 
-
 ## Task
 
- - **Fork and clone** this repo.
-   - To fork, hit the 'fork' button in the top right corner of this page on Github. 
-  Now you should be on your own Github repository - you'll know this because your name should now be in the repo name at the top of the Github page. 
-   - To clone, click the green button that says 'Code' on that page.
-  Now the code is on your own machine (this happened when you cloned), AND it's linked to your own Cakes repository on Github (which was created when you forked).
+- **Fork and clone** this repo.
+
+  - To fork, hit the 'fork' button in the top right corner of this page on Github.
+    Now you should be on your own Github repository - you'll know this because your name should now be in the repo name at the top of the Github page.
+  - To clone, click the green button that says 'Code' on that page.
+    Now the code is on your own machine (this happened when you cloned), AND it's linked to your own Cakes repository on Github (which was created when you forked).
 
- - Before you start coding, **create a new branch** following this format `your-class-name/your-name`, for example: `london-class-7/adam-smith`. Your branch name should be all lowercase, with no spaces. 
+- Before you start coding, **create a new branch** following this format `your-class-name/your-name`, for example: `london-class-7/adam-smith`. Your branch name should be all lowercase, with no spaces.
 
 When you're ready to start coding:
 
 ### Start with mobile
+
 - Write the HTML following the mobile design
 - Then write your CSS for everything to look great on mobile
 - Remember to link your CSS file to your HTML file inside the `<head>` in `index.html`
 - You don't need to use any media queries yet, because we're following a [Mobile First](https://www.invisionapp.com/inside-design/mobile-first-design/) approach!
 
 ### Then adapt the page for larger screens
+
 - Now add media queries to your CSS, and change the layout and sizing of elements so they make better use of a wider screen (see the desktop wireframe design below).
 - To follow Mobile First principles, we will only be using `min-width` in our media queries (no max-width!)
-- You should **use 2 different breakpoints**, meaning you should have **3** different variants of your layout. Here's an example.  
-
+- You should **use 2 different breakpoints**, meaning you should have **3** different variants of your layout. Here's an example.
 
-  If we have the following **2 breakpoints**:  
-  > - breakpoint 1 --> 540px  
-  > - breakpoint 2 --> 900px  
+  If we have the following **2 breakpoints**:
 
-  Then our CSS code will be split into **3**:  
-  > 1. **"default"**: default styles, should implement the mobile design (no media query used for these). These styles will apply to all screen sizes by default.  
-  > 2. **"medium"**: Our first media query `@media (min-width: 540px) {...}` **will overwrite our default styles** for screens at least 540px wide. Screens *below* 540px will apply the styles from the "default".  
-  > 3. **"large"**: Our second media query `@media (min-width: 900px) {...}` **will overwrite our default AND medium styles** for screens at least 900px wide (no upper limit).  
+  > - breakpoint 1 --> 540px
+  > - breakpoint 2 --> 900px
+
+  Then our CSS code will be split into **3**:
+
+  > 1. **"default"**: default styles, should implement the mobile design (no media query used for these). These styles will apply to all screen sizes by default.
+  > 2. **"medium"**: Our first media query `@media (min-width: 540px) {...}` **will overwrite our default styles** for screens at least 540px wide. Screens _below_ 540px will apply the styles from the "default".
+  > 3. **"large"**: Our second media query `@media (min-width: 900px) {...}` **will overwrite our default AND medium styles** for screens at least 900px wide (no upper limit).
 
 ### Define your own style
-  - Choose 1-2 fonts to use (lots of [free fonts here](https://fonts.google.com/))
-  - Choose 2-3 colours that you think go together well, and try to limit yourself to those in your CSS ([look here](https://coolors.co/palettes/trending) for inspiration)
-  - Select some nice cake pictures to replace the placeholders in the wireframes (good [photo source here](https://unsplash.com/images/food/cake)).
-  - Get creative! Can you add some cool hover effects to buttons and [images](https://www.wix.com/website-template/view/html/1911?siteId=c1c72d26-c040-41f2-80ce-0b0f8aef01b4&metaSiteId=5d77fab8-f068-4228-8b61-4181af054ca6&originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates&tpClick=view_button)?
+
+- Choose 1-2 fonts to use (lots of [free fonts here](https://fonts.google.com/))
+- Choose 2-3 colours that you think go together well, and try to limit yourself to those in your CSS ([look here](https://coolors.co/palettes/trending) for inspiration)
+- Select some nice cake pictures to replace the placeholders in the wireframes (good [photo source here](https://unsplash.com/images/food/cake)).
+- Get creative! Can you add some cool hover effects to buttons and [images](https://www.wix.com/website-template/view/html/1911?siteId=c1c72d26-c040-41f2-80ce-0b0f8aef01b4&metaSiteId=5d77fab8-f068-4228-8b61-4181af054ca6&originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates&tpClick=view_button)?
 
 ### Also
-- It's up to you to find a solution for any elements that are visible in desktop and not on mobile - and vice versa.
 
+- It's up to you to find a solution for any elements that are visible in desktop and not on mobile - and vice versa.
 
 ## Remember
- - **Commit and push your code often** so you get into the habit and you avoid losing any code that you write if your machine crashes for example. 
- - Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [have a look here](https://syllabus.codeyourfuture.io/git/cheatsheet/#i-want-to-send-my-code-to-volunteers-pushing).  
-  Your PR should be named following this format: `Class name - Your name`, for example: `London class 7 - Adam Smith`.
 
+- **Commit and push your code often** so you get into the habit and you avoid losing any code that you write if your machine crashes for example.
+- Once you're ready to submit your homework for review, do a final push an **create a Pull Request**. If you're unsure how to do this, [have a look here](https://syllabus.codeyourfuture.io/git/cheatsheet/#i-want-to-send-my-code-to-volunteers-pushing).  
+  Your PR should be named following this format: `Class name - Your name`, for example: `London class 7 - Adam Smith`.
 
 ## Deployment (optional)
 
 [Deploy your work to Netlify!](https://syllabus.codeyourfuture.io/workshops/deployment/workshop/instructions/)
 Remember to follow this naming convention when creating your custom URL in Netlify: `https://cyf-[your-Github-username]-cakes.netlify.app/`
 
-
 ## Wireframes
 
-Build the mobile wireframe first, then adapt it for larger screens.  
+Build the mobile wireframe first, then adapt it for larger screens.
 
-*Mobile wireframe:*  
+_Mobile wireframe:_  
 ![alt text](./design/cakes%20wireframe%20-%20mobile.png "Cakes Co mobile design")
 
-*Desktop wireframe:*  
+_Desktop wireframe:_  
 ![alt text](./design/cakes%20wireframe%20-%20desktop.png "Cakes Co desktop design")
-
diff --git a/script.js b/script.js
@@ -0,0 +1,7 @@
+const hamburger = document.querySelector(".hamburger-icon");
+const navbar = document.querySelector(".navbar-links");
+
+hamburger.addEventListener("click", clickMenu);
+function clickMenu() {
+  navbar.classList.toggle("hamburger-toggle");
+}