CodeYourFuture · m4ndycheung · Feb 8, 2023 · Feb 8, 2023 · Feb 8, 2023 · Feb 8, 2023
diff --git a/images/cupcake-hero.jpg b/images/cupcake-hero.jpg
diff --git a/images/cupcake-logo.png b/images/cupcake-logo.png
diff --git a/images/cupcakes-1.jpg b/images/cupcakes-1.jpg
diff --git a/images/cupcakes-2.jpg b/images/cupcakes-2.jpg
diff --git a/images/cupcakes-3.jpg b/images/cupcakes-3.jpg
diff --git a/images/cupcakes-4.jpg b/images/cupcakes-4.jpg
diff --git a/images/fb.png b/images/fb.png
diff --git a/images/ig.png b/images/ig.png
diff --git a/images/tw.png b/images/tw.png
diff --git a/index.html b/index.html
@@ -6,11 +6,118 @@
     <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" />
+    <link rel="stylesheet" href="menu.css" />
 </head>
 
 <body>
-    <!-- Add your markup here -->
+    <div class="body__container">
+
+      <header class="header grid__full">
+
+        <div class="header__container second__grid">
+          <div class="header__1">
+            <div>
+              <a href="#">
+                <div class="logo">
+                  <div class="logo__img"></div>
+                  <p class="logo__text">basic_cupcake</p>
+                </div>
+              </a>
+              <nav class="nav__bar">
+                <input class="menu__btn" type="checkbox" id="menu__btn" />
+                <label class="menu__icon" for="menu__btn">
+                  <span class="nav__icon"></span>
+                </label>
+                <ul class="menu unstyled__list">
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">Cakes</a></li>
+                    <li><a href="#">Order</a></li>
+                    <li><a href="#">Lessons</a></li>
+                    <li><a href="#">About</a></li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+          <div class="header__2">
+            <p class="header__text">The best cakes in town delivered to your door</p>
+          </div>
+        </div>
+
+      </header>
+
+      <nav class="big__nav">
+        <ul class="menu unstyled__list">
+          <li><a href="#">Home</a></li>
+          <li><a href="#">Cakes</a></li>
+          <li><a href="#">Order</a></li>
+          <li><a href="#">Lessons</a></li>
+          <li><a href="#">About</a></li>
+        </ul>
+        <div class="section__break"></div>
+      </nav>
+
+
+
+      <main class="main__grid grid__center">
+        <div class="main__text">
+          <h1>Welcome</h1>
+          <p>Umami vaporware tote bag mlkshk PBR&B truffaut polaroid cloud bread. XOXO hot chicken artisan kinfolk. Biodiesel vegan cred, bushwick hammock normcore sustainable tilde coloring book four loko health goth church-key. Plaid activated charcoal food truck, man bun fixie locavore craft beer mlkshk lo-fi four loko big mood chia hammock.</p>
+        </div>
+        <div class="main__image">
+          <img src="images/cupcake-hero.jpg" alt="assortment of cupcakes on display" />
+        </div>
+      </main>
+
+      <section class="portfolio__section grid__center">
+        <h1>Some of our cakes</h1>
+        <div class="portfolio__grid">
+          <div class="item1">
+            <img src="images/cupcakes-1.jpg" alt="cookies and cream cupcakes" />
+          </div>
+          <div class="item2">
+            <img src="images/cupcakes-2.jpg" alt="basic vanilla sprinkle cupcakes" />
+          </div>
+          <div class="item3">
+            <img src="images/cupcakes-3.jpg" alt="chocolate cupcakes" />
+          </div>
+          <div class="item4">
+            <img src="images/cupcakes-4.jpg" alt="rainbow cream cupcakes" />
+          </div>
+        </div>
+      </section>
+
+      <footer class="grid__full">
+          <div class="second__grid">
+            <ul class="social__icons unstyled__list">
+              <li >
+                <a href="#" class="icon__flex flex__row">
+                  <div class="fb icon"></div>
+                  <p>Facebook</p>
+                </a>
+              </li>
+              <li >
+                <a href="#" class="icon__flex flex__row">
+                  <div class="ig icon"></div>
+                  <p>Instagram</p>
+                </a>
+              </li>
+              <li>
+                <a href="#" class="icon__flex flex__row">
+                  <div class="tw icon"></div>
+                  <p>Twitter</p>
+                </a>
+              </li>
+            </ul>
+
+            <p class="center__text">
+            © 2023 Basic_Cupcake. All rights reserved. Basic_Cupcake is a private company in Scotland no. 13411713.
+            </p>
+          </div>
+      </footer>
+
+    </div>
+
 </body>
 
 </html>
diff --git a/menu.css b/menu.css
@@ -0,0 +1,88 @@
+/* nav menu */
+.header ul {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: var(--main__clr);
+}
+
+.header ul a {
+    display: block;
+    outline: 1px solid var(--accent__clr);
+    padding: 10px;
+}
+
+.header ul a:hover {
+    background-color: var(--second__clr);
+}
+
+.header .menu {
+    clear: both;
+    max-height: 0;
+    transition: max-height 0.2s ease-out;
+}
+
+.header .menu__icon {
+    padding: 50px 0px;
+    position: relative;
+    float: right;
+    cursor: pointer;
+}
+
+/* creating the menu icon inside the label tag */
+.header .menu__icon .nav__icon {
+    background: #000;
+    display: block;
+    height: 3px;
+    width: 20px;
+    position: relative;
+    transition: background 0.2s ease-out;
+}
+
+/* Adds additional lines to menu icon */
+.header .menu__icon .nav__icon:before {
+    background: #000;
+    content: "";
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    transition: all 0.2s ease-out;
+    top: 5px;
+}
+
+.header .menu__icon .nav__icon:after {
+    background: #000;
+    content: "";
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    transition: all 0.2s ease-out;
+    top: -5px;
+}
+
+.header .menu__btn {
+    display: none;
+}
+
+/* general sibling combinator (~) selects the next sibling with class of .menu */
+.header .menu__btn:checked ~ .menu {
+    max-height: 240px;
+}
+
+/* menu icon animation */
+.header .menu__btn:checked ~ .menu__icon .nav__icon {
+    background: transparent;
+}
+
+.header .menu__btn:checked ~ .menu__icon .nav__icon:before {
+    top: 0;
+    transform: rotate(-45deg);
+}
+
+.header .menu__btn:checked ~ .menu__icon .nav__icon:after {
+    top: 0;
+    transform: rotate(45deg);
+}
+