CodeYourFuture · nirmeet-baweja · Nov 28, 2020
diff --git a/favicon.ico b/favicon.ico
diff --git a/images/.comments/cake-logo-2.jpg.xml b/images/.comments/cake-logo-2.jpg.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<comment version="3.0">
+  <caption/>
+  <note>bakery, pastry, confectionery, cake, dessert, sweets shop, vector logo template</note>
+  <place/>
+  <categories/>
+</comment>
diff --git a/images/assortments-2.jpg b/images/assortments-2.jpg
diff --git a/images/assortments.jpg b/images/assortments.jpg
diff --git a/images/birthday-cake-2.jpg b/images/birthday-cake-2.jpg
diff --git a/images/birthday-cake-3.jpg b/images/birthday-cake-3.jpg
diff --git a/images/birthday-cake.jpg b/images/birthday-cake.jpg
diff --git a/images/cake-logo-2.jpg b/images/cake-logo-2.jpg
diff --git a/images/cake-logo-3.jpg b/images/cake-logo-3.jpg
diff --git a/images/cake-logo-3.png b/images/cake-logo-3.png
diff --git a/images/cake-logo.png b/images/cake-logo.png
diff --git a/images/cake-website-wireframe b/images/cake-website-wireframe
@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2020-11-23T21:23:35.662Z" agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36" etag="KH3NoBUOXmOgxdpT5_78" version="13.10.1" type="device"><diagram id="GOaYaSXa9-6u_Y2n-C0y" name="Page-1">7VnbcpswEP0aP8bD3fgxdpJepplmnHY6eZRBBk0EokLEdr6+EkhgEORa3CYTXgxHl13tOVoWeWIvk90nCrL4koQQTywj3E3ss4llmaZh8R+B7CvEnTsVEFEUyk4NcI3uoQQNiRYohHmrIyMEM5S1wYCkKQxYCwOUkm2724bgttUMRFADrgOAdfQXCllcob41a/DPEEWxsmx686olAaqzXEkeg5BsDyD7fGIvKSGsukt2S4hF8FRcqnEXA621YxSm7CkDVuDrvRXeuPtsTxdRfGH9dG5OTMnGHcCFXLH0lu1VCLjjmbhNdpHgeJqQ4LbIpjziDKAU0nyaABqhdFXGf0H5z2UJ/CAZH8aZtBc5o+QWLgkmtJzU9sqrblGxNTkSgjyGwmkxkJIiDcsn0QRoICXiVpYKmqM7uIJ5hYoR3MkQ8ZgoYylJedNigzA+sH9RXhyX64eUwd1gZM2aLy50SBLI6J53UQNcSbHUuC0ft41gXENi8YFYfF+CQIo0qqdueOQ3ksrn0KqxuiRJBlLhNCYR0TgW60dc9d/AGuIrkiOGSMqb1oQxkgialHqNLkMAo0h0DXi0II/uImYJlnypaU9lHyYU0UP5gMTKBxTk0xwlGYZfAuGTrqV5efVxfHZaTv8kjh/YH4PMW57fYt5yNeZnlk68647Fu6cTD24hR2r+O8TziLA2Z+3w9uweCWm8d8lOUBgKM4ttjBi8zkAgbG45p619LTS04blEbmzbGJUwo71VTUvfq5xVnTJntK1qPZ6B3+Xu3JTXmGR387Lj+DrZfYm5Bv8+2/YH20di23P/PduzJ1RXfQS8gN4B2iiVVZlMr49UY0NV0lBRdbS83c7a6qV6QK0z93uoHS9t+xq1i4Lvz5RjQySr4KE0hhSxTrgbtBvspuXIYum8mrmcq+de5Yh+csVmWZyLmvzQ1VeIY9YvjsfoVxmBQgwY/05oWe2ThDRxRRD3p5ab2xER2WxyyDQJ1Y69QlXzYVXZH6p6V6oyu6+d8WSlitw+WTlvVVZVOSTX0XnB/c/y2remOZLYTo6Xwyz98KEWm3ns8ocXuS9SSF2udhXSKZAMww/KflpJVbe8yZT1qtrI0mujieVhJsPZEoD3uyCq4aQ6xTsVQjGyXdPI7yLxewnTQs20pgpV6uriCuFrqMwq+LgSXJfu5VOSft9sajEOFNTD31PVNNcMMGGjnKPWotWR3INiPhB9AlD6ozwAOhO2MxCgNFpJ2ThGj/zH+3rzWhW+qx+k+Y6u69HK+z4Ff3ymP+9Y3O6ctfnzET/I+WPzV0r1Kmv+kLLP/wA=</diagram></mxfile>
diff --git a/images/engagement-cake.jpg b/images/engagement-cake.jpg
diff --git a/images/wedding-cake.jpg b/images/wedding-cake.jpg
diff --git a/index.html b/index.html
@@ -5,12 +5,107 @@
     <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 -->
+    <title>Delish Cakes</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+    <link rel="stylesheet" media="screen and (min-width: 550px)" href="medium.css">
+    <link rel="stylesheet" media="screen and (min-width: 800px) " href="large.css">
+    <link rel="stylesheet" media="screen and (min-width: 1000px)" href="xlarge.css">
 </head>
 
 <body>
-    <!-- Add your markup here -->
+    <header class="header">
+        <div class="logoImageContainer">
+            <img class="logoImage" src="images/cake-logo-3.jpg">
+        </div>
+        <h1 class="companyName">
+            Delish Cakes
+        </h1>
+    </header>
+    <nav>
+        <ul class="navBar">
+            <li class="navItem"><a class="navLink" href="#weddingCakes">Wedding Cakes</a></li>
+            <li class="navItem"><a class="navLink" href="#birthdayCakes">Birthday Cakes</a></li>
+            <li class="navItem"><a class="navLink" href="#festiveFavourites">Festive Favourites</a></li>
+        </ul>
+    </nav>
+    <main>
+        <section class="intro">
+            <p>
+                A special occasion deserves to be marked, and there’s no better way than with one of our bespoke celebration cakes. A
+                landmark birthday, welcoming a new member of the family, celebrating an anniversary – whatever the happy occasion, we
+                can create a cake that will make it even more delightful.
+            </p>
+            <p>
+                Choose from the selection of the best celebration cakes in Wolverhampton below or contact us to commission a bespoke design.
+            </p>
+        </section>
+        <section class="weddingCakes">
+            <h2 class="sectionHeading">
+                Wedding Cakes
+            </h2>
+            <div class="imageContainer">
+                <button class="slider-button" onclick="previousWeddingCake()"> &lt; </button>
+                <img id="weddingCakeImage" src="images/engagement-cake.jpg"
+                    alt="poster image">
+                <button class="slider-button" onclick="nextWeddingCake()"> &gt </button>
+            </div>
+            <p class="sectionContent">
+                Your wedding is an exceptional day, and your wedding cake should be equally exceptional. Whether you’re having a small,
+                intimate wedding or a more lavish event, we can craft the perfect cake to complement your style and your celebration.
+            </p>
+        </section>
+        <section class="birthdayCakes">
+            <h2 class="sectionHeading">
+                Birthday Cakes
+            </h2>
+            <!-- <div class="imageContainer">
+                <img class="birthdayCakeImage" src="images/birthday-cake.jpg">
+            </div> -->
+            <div class="imageContainer">
+                <button class="slider-button" onclick="previousBirthdayCake()"> &lt; </button>
+                <img id="birthdayCakeImage" src="images/birthday-cake.jpg" alt="poster image">
+                <button class="slider-button" onclick="nextBirthdayCake()"> &gt </button>
+            </div>
+            <p class="sectionContent">
+                No birthday party is complete without an iconic celebration cake. Each of our luxury cakes are made with you in mind, from every ingredient to the final finishing touches and mouthwatering flavour.
+            </p>
+        </section>
+        <section class="festiveFavourites">
+            <h2 class="sectionHeading">
+                Festive Favourites
+            </h2>
+            <!-- <div class="imageContainer">
+                <img class="assortmentsImage" src="images/assortments.jpg">
+            </div> -->
+            <div class="imageContainer">
+                <button class="slider-button" onclick="previousAssortment()"> &lt; </button>
+                <img id="assortmentsImage" src="images/assortments.jpg" alt="poster image">
+                <button class="slider-button" onclick="nextAssortment()"> &gt </button>
+            </div>
+            <p class="sectionContent">
+                What better way to celebrate this festive season than with a collection of our unique, scrumptious festive assortments made specially for the occasion.
+            </p>
+        </section>
+    </main>
+
+    <hr>
+
+    <footer>
+        <p class="footerContent">
+            Join us on
+        </p>
+        <ul class="socialIcons">
+            <li class="icon"><a href="#socialIcons"><i class="fa fa-twitter"></i></a></li>
+            <li class="icon"><a href="#socialIcons"><i class="fa fa-facebook"></i></a></li>
+            <li class="icon"><a href="#socialIcons"><i class="fa fa-instagram"></i></a></li>
+        </ul>
+        <p class="copyright">
+            © Karma Mobility, Inc.
+        </p>
+    </footer>
+
+    <script type="text/javascript" src="script.js"></script>
 </body>
 
 </html>
diff --git a/large.css b/large.css
@@ -0,0 +1,14 @@
+/*
+ *
+ * Styles applied when the viewport width is greater than or equal to 800px
+ *
+*/
+
+.navBar {
+  width: 800px;
+  margin: auto;
+}
+
+.intro, .weddingCakes, .birthdayCakes, .festiveFavourites {
+  width: 46%;
+}
diff --git a/medium.css b/medium.css
@@ -0,0 +1,27 @@
+/*
+ *
+ * Styles applied when the viewport width is greater than or equal to 550px
+ *
+*/
+
+.header {
+  justify-content: center;
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+h2 {
+  font-size: 1.8rem;
+}
+
+.navItem {
+  font-size: 1.25rem;
+}
+
+section p {
+  max-width: 60ch;
+  margin: auto;
+  font-size: 1.25rem;
+}
diff --git a/script.js b/script.js
@@ -0,0 +1,104 @@
+/*
+ *
+ *Function for wedding cake image slider
+ *
+*/
+var weddingCakeImages = [
+  "images/engagement-cake.jpg",
+  "images/wedding-cake.jpg"
+];
+
+var numWeddingCake=0;
+
+function nextWeddingCake()
+{
+  var slider = document.getElementById('weddingCakeImage');
+  numWeddingCake++;
+  if(numWeddingCake >= weddingCakeImages.length)
+    {
+      numWeddingCake=0;
+    }
+  slider.src = weddingCakeImages[numWeddingCake];
+}
+
+function previousWeddingCake()
+{
+  var slider = document.getElementById('weddingCakeImage');
+  numWeddingCake--;
+  if(numWeddingCake < 0)
+    {
+      numWeddingCake = weddingCakeImages.length-1;
+    }
+  slider.src = weddingCakeImages[numWeddingCake];
+}
+
+
+/*
+ *
+ *Function for birthday cake image slider
+ *
+*/
+var BirthdayCakeImages = [
+  "images/birthday-cake.jpg",
+  "images/birthday-cake-2.jpg",
+  "images/birthday-cake-3.jpg"
+];
+
+var numBirthdayCake=0;
+
+function nextBirthdayCake()
+{
+  var slider = document.getElementById('birthdayCakeImage');
+  numBirthdayCake++;
+  if(numBirthdayCake >= BirthdayCakeImages.length)
+    {
+      numBirthdayCake=0;
+    }
+  slider.src = BirthdayCakeImages[numBirthdayCake];
+}
+
+function previousBirthdayCake()
+{
+  var slider = document.getElementById('birthdayCakeImage');
+  numBirthdayCake--;
+  if(numBirthdayCake < 0)
+    {
+      numBirthdayCake = BirthdayCakeImages.length-1;
+    }
+  slider.src = BirthdayCakeImages[numBirthdayCake];
+}
+
+
+/*
+ *
+ *Function for assortment image slider
+ *
+*/
+var assortmentImages = [
+  "images/assortments.jpg",
+  "images/assortments-2.jpg"
+];
+
+var numAssortment=0;
+
+function nextAssortment()
+{
+  var slider = document.getElementById('assortmentsImage');
+  numAssortment++;
+  if(numAssortment >= assortmentImages.length)
+    {
+      numAssortment=0;
+    }
+  slider.src = assortmentImages[numAssortment];
+}
+
+function previousAssortment()
+{
+  var slider = document.getElementById('assortmentsImage');
+  numAssortment--;
+  if(numAssortment < 0)
+    {
+      numAssortment = assortmentImages.length-1;
+    }
+  slider.src = assortmentImages[numAssortment];
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<mxfile host="app.diagrams.net" modified="2020-11-23T21:23:35.662Z" agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36" etag="KH3NoBUOXmOgxdpT5_78" version="13.10.1" type="device"><diagram id="GOaYaSXa9-6u_Y2n-C0y" name="Page-1">7VnbcpswEP0aP8bD3fgxdpJepplmnHY6eZRBBk0EokLEdr6+EkhgEORa3CYTXgxHl13tOVoWeWIvk90nCrL4koQQTywj3E3ss4llmaZh8R+B7CvEnTsVEFEUyk4NcI3uoQQNiRYohHmrIyMEM5S1wYCkKQxYCwOUkm2724bgttUMRFADrgOAdfQXCllcob41a/DPEEWxsmx686olAaqzXEkeg5BsDyD7fGIvKSGsukt2S4hF8FRcqnEXA621YxSm7CkDVuDrvRXeuPtsTxdRfGH9dG5OTMnGHcCFXLH0lu1VCLjjmbhNdpHgeJqQ4LbIpjziDKAU0nyaABqhdFXGf0H5z2UJ/CAZH8aZtBc5o+QWLgkmtJzU9sqrblGxNTkSgjyGwmkxkJIiDcsn0QRoICXiVpYKmqM7uIJ5hYoR3MkQ8ZgoYylJedNigzA+sH9RXhyX64eUwd1gZM2aLy50SBLI6J53UQNcSbHUuC0ft41gXENi8YFYfF+CQIo0qqdueOQ3ksrn0KqxuiRJBlLhNCYR0TgW60dc9d/AGuIrkiOGSMqb1oQxkgialHqNLkMAo0h0DXi0II/uImYJlnypaU9lHyYU0UP5gMTKBxTk0xwlGYZfAuGTrqV5efVxfHZaTv8kjh/YH4PMW57fYt5yNeZnlk68647Fu6cTD24hR2r+O8TziLA2Z+3w9uweCWm8d8lOUBgKM4ttjBi8zkAgbG45p619LTS04blEbmzbGJUwo71VTUvfq5xVnTJntK1qPZ6B3+Xu3JTXmGR387Lj+DrZfYm5Bv8+2/YH20di23P/PduzJ1RXfQS8gN4B2iiVVZlMr49UY0NV0lBRdbS83c7a6qV6QK0z93uoHS9t+xq1i4Lvz5RjQySr4KE0hhSxTrgbtBvspuXIYum8mrmcq+de5Yh+csVmWZyLmvzQ1VeIY9YvjsfoVxmBQgwY/05oWe2ThDRxRRD3p5ab2xER2WxyyDQJ1Y69QlXzYVXZH6p6V6oyu6+d8WSlitw+WTlvVVZVOSTX0XnB/c/y2remOZLYTo6Xwyz98KEWm3ns8ocXuS9SSF2udhXSKZAMww/KflpJVbe8yZT1qtrI0mujieVhJsPZEoD3uyCq4aQ6xTsVQjGyXdPI7yLxewnTQs20pgpV6uriCuFrqMwq+LgSXJfu5VOSft9sajEOFNTD31PVNNcMMGGjnKPWotWR3INiPhB9AlD6ozwAOhO2MxCgNFpJ2ThGj/zH+3rzWhW+qx+k+Y6u69HK+z4Ff3ymP+9Y3O6ctfnzET/I+WPzV0r1Kmv+kLLP/wA=</diagram></mxfile>