diff --git a/cakeco.js b/cakeco.js new file mode 100644 index 000000000..575f73c9b --- /dev/null +++ b/cakeco.js @@ -0,0 +1,33 @@ +$(document).ready(function () { + // Add smooth scrolling to all links + $("a").on("click", function (event) { + // Make sure this.hash has a value before overriding default behavior + if (this.hash !== "") { + // Prevent default anchor click behavior + event.preventDefault(); + + // Store hash + var hash = this.hash; + + // Using jQuery's animate() method to add smooth page scroll + // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area + $("html, body").animate( + { + scrollTop: $(hash).offset().top, + }, + 800, + function () { + // Add hash (#) to URL when done scrolling (default click behavior) + window.location.hash = hash; + } + ); + } // End if + }); +}); + +const hamburgerMenu = document.querySelector('.hamburger-menu'); +const navLinks = document.querySelector('nav ul'); + +hamburgerMenu.addEventListener('click', function () { + navLinks.classList.toggle('open'); +}); \ No newline at end of file diff --git a/index.html b/index.html index 60b1afe13..e9a8a3e75 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,133 @@ - - - - - + + + + Responsive Cake webpage - + + + +
+
+ + +
+
+

The best cakes in town delivered to your door

+
+
+ +
+
+
+

+ Cakes Co
+ Welcomes You +

+

+ Walking into our bakery means being immediately greeted by a + delightful
+ smell of freshly baked treats that no one can resist. As a + neighborhood
+ bakery that serves the local community, we are committed to using the +
+ best ingredients and serving you delicious, handcrafted baked goods.
+ We have used the same recipes for generations, keeping true to the + original
+ creations and signature products you know and love. Our dedicated + bakers
+ will make sure to always have your favorites, so come on in and have a + bite!
+

+
+
+
+
+ cake +
+
+ +
+
+ lemon-cake
+
+ levender-cake +
+
+ orange-cake +
+
+ avokado-cake +
+
+
+ + + + + + diff --git a/pics/a2.png b/pics/a2.png new file mode 100644 index 000000000..3b3298a8a Binary files /dev/null and b/pics/a2.png differ diff --git a/pics/a3.png b/pics/a3.png new file mode 100644 index 000000000..89fc21054 Binary files /dev/null and b/pics/a3.png differ diff --git a/pics/a4.png b/pics/a4.png new file mode 100644 index 000000000..1e0c39be1 Binary files /dev/null and b/pics/a4.png differ diff --git a/pics/avokado1.png b/pics/avokado1.png new file mode 100644 index 000000000..62645fe8f Binary files /dev/null and b/pics/avokado1.png differ diff --git a/pics/cake_2.svg b/pics/cake_2.svg new file mode 100644 index 000000000..66dd6da4c --- /dev/null +++ b/pics/cake_2.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sections1.png b/sections1.png new file mode 100644 index 000000000..025d046d3 Binary files /dev/null and b/sections1.png differ diff --git a/style.css b/style.css index 6de1b3567..45f7ded24 100644 --- a/style.css +++ b/style.css @@ -1 +1,291 @@ /* Add your styling here */ + +header { + display: flex; + background: #d3e3f0; + padding: 2em; +} + +.navbar input[type="checkbox"], +.navbar .hamburger-lines { + display: none; +} + +.navbar { + position: relative; + width: 100%; + background-color: #fff; + opacity: 0.85; + height: 50px; + z-index: 12; +} + +.navbar-container { + display: flex; + justify-content: space-around; + height: 64px; + align-items: center; +} + +.menu-items { + order: 2; + display: flex; +} + +.menu-items li { + list-style: none; + margin-left: 1.5rem; + margin-bottom: 0.5rem; + font-size: 1.2rem; +} + +.menu-items a { + text-decoration: none; + color: #444; + font-weight: 500; + transition: color 0.3s ease-in-out; +} + +.menu-items a:hover { + color: #117964; + transition: color 0.3s ease-in-out; +} +.header-section { + display: flex; + flex-direction: flex-end; +} + +.top-header { + display: flex; +} +.grid-container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 20rem 30rem 30rem 30rem; + grid-template-areas: + "welcome welcome" + "bigimage bigimage" + "cake1 cake2" + "cake3 cake4"; + row-gap: 2rem; + margin: 3rem 2rem; +} +.about-container { + grid-area: welcome; +} +.cake0 { + width: 100%; + grid-area: bigimage; +} + +.images-container { + margin: 20px; +} +.lemon-cake { + grid-area: cake1; + width: 100%; +} +.levender-cake { + grid-area: cake2; + width: 100%; +} +.orange-cake { + grid-area: cake3; + width: 100%; +} +.avokado-cake { + grid-area: cake4; + width: 100%; +} +.logo-img { + width: 5%; +} + +.header-img { + width: 100%; +} + +.form-container { + padding: 1rem; + width: 50%; + margin: auto; +} + +.form-container input { + display: block; + width: 100%; + border: none; + border-bottom: 2px solid #ddd; + padding: 1rem 0; + box-shadow: none; + outline: none; + margin-bottom: 1rem; + color: #444; + font-weight: 500; +} + +.form-container textarea { + display: block; + width: 100%; + border: none; + border-bottom: 2px solid #ddd; + color: #444; + outline: none; + padding: 1rem 0; + resize: none; +} + +.form-container h2 { + font-size: 2.7rem; + font-weight: 500; + color: #444; + margin-bottom: 1rem; + margin-top: -1.2rem; +} + +.form-container a { + font-size: 1.3rem; +} +.btn { + display: inline-block; + padding: 0.5em 1.5em; + text-decoration: none; + border-radius: 50px; + cursor: pointer; + outline: none; + margin-top: 1em; + text-transform: uppercase; + font-weight: small; +} + +.btn-primary { + color: #fff; + background: #626665; +} + +.btn-primary:hover { + background: #dee0e0; + transition: background 0.3s ease-in-out; +} +#footer h2 { + text-align: center; + font-size: 1.8rem; + padding: 2.6rem; + font-weight: 500; + color: #fff; + background: rgb(65, 65, 65); +} + +@media (max-width: 768px) { + .navbar { + opacity: 0.95; + } + + .navbar-container input[type="checkbox"], + .navbar-container .hamburger-lines { + display: inline-block; + } + + .navbar-container { + display: block; + position: relative; + height: 64px; + } + + .navbar-container input[type="checkbox"] { + position: absolute; + display: block; + height: 32px; + width: 30px; + top: 20px; + right: 20px; + z-index: 5; + opacity: 0; + } + + .navbar-container .hamburger-lines { + height: 23px; + width: 35px; + + z-index: 2; + display: flex; + flex-direction: column; + justify-content: space-between; + float: right; + margin-right: 20px; + margin-top: 15px; + } + + .navbar-container .hamburger-lines .line { + display: block; + height: 4px; + width: 100%; + border-radius: 10px; + background: #333; + } + + .navbar-container .hamburger-lines .line1 { + transform-origin: 0% 0%; + transition: transform 0.4s ease-in-out; + } + + .navbar-container .hamburger-lines .line2 { + transition: transform 0.2s ease-in-out; + } + + .navbar-container .hamburger-lines .line3 { + transform-origin: 0% 100%; + transition: transform 0.4s ease-in-out; + } + + .navbar .menu-items { + padding-top: 100px; + background: #fff; + height: auto; + max-width: 300px; + transform: translate(-150%); + display: flex; + flex-direction: column; + margin-right: -40px; + padding-right: 50px; + transition: transform 0.5s ease-in-out; + box-shadow: none; + } + + .navbar .menu-items li { + margin-bottom: 1rem; + font-size: 1.3rem; + font-weight: 500; + } + .navbar-container input[type="checkbox"]:checked ~ .menu-items { + transform: translateX(50%); + } + + .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 { + transform: rotate(15deg); + } + + .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 { + transform: scaleY(0); + } + + .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 { + transform: rotate(-35deg); + } +} +@media (max-width: 500px) { + .navbar .menu-items li { + font-size: 1.6rem; + } + .navbar .menu-items li { + margin-bottom: 2.5rem; + font-size: 1.8rem; + font-weight: 500; + } + .form-container { + width: 70%; + } +} +@media only screen and (min-width: 900px) { + /* styles for desktop */ +}