Design a Online Cake Shop Website in HTML CSS & JavaScript
Every business is going online nowadays for better growth and productivity. We are going to build an online cake shop website that will represent the shop in a good manner having features of online ordering and views and many more.
Prerequisites
Approach
- We first create an HTML file where we have declared the basic structure of a website.
- We have created a Header, main, products, about, and contact-us section on the web page.
- We have added images in the background with the help of CSS.
- We have aligned the products with the help of Flexbox in CSS.
- For responsiveness, we have added a media query and for the header, we have added a hamburger menu button that will work with the help of JavaScript.
Example: This example shows the implementation of the above-explained approach.
HTML
<!-- index.html --> <!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" > < title >Online Cake Shop</ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" > < link rel = "stylesheet" href = "style.css" > </ head > < body > < header class = "header" > < a href = "#" class = "logo" > Bakery </ a > < nav class = "navbar" > < a href = "#" >Home</ a > < a href = "#shop" >Shop</ a > < a href = "#about" >About</ a > < a href = "#contact" >Contact</ a > </ nav > < div class = "icons" > < div id = "menu-btn" class = "fas fa-bars" ></ div > < div id = "search-btn" class = "fas fa-search" ></ div > < div id = "cart-btn" class = "fas fa-shopping-cart" ></ div > < div id = "login-btn" class = "fas fa-user" ></ div > </ div > < div class = "hamburger" id = "hamburger" > < div class = "line" ></ div > < div class = "line" ></ div > < div class = "line" ></ div > </ div > </ header > < section class = "home" id = "home" > < div class = "slides-container" > < div class = "slide active" > < div class = "content" > < span >Order Cakes Online </ span > < h3 >Upto 80% off</ h3 > < a href = "#" class = "btn" >Buy Now</ a > </ div > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301114007/image1_100.png" alt = "" > </ div > </ div > < div class = "slide" > < div class = "content" > < span >Customize Ordering</ span > < h3 >upto 80% off</ h3 > < a href = "#" class = "btn" >Buy Now</ a > </ div > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113714/image12_100.png" alt = "" > </ div > </ div > < div class = "slide" > < div class = "content" > < span >Fast Delivery</ span > < h3 >upto 80% off</ h3 > < a href = "#" class = "btn" >Buy Now</ a > </ div > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301114007/image1_100.png" > </ div > </ div > </ div > < div id = "next-slide" class = "fas fa-angle-right" onclick = "next()" ></ div > < div id = "prev-slide" class = "fas fa-angle-left" onclick = "next()" ></ div > </ section > < section class = "banner-container" > < div class = "banner" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113714/image12_100.png" alt = "" > < div class = "content" > < span >Velvet Cakes</ span > < h3 >upto 50% off</ h3 > < a href = "#" class = "btn" >Buy now</ a > </ div > </ div > < div class = "banner" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113805/image11_100.png" alt = "" > < div class = "content" > < span >Marble Cakes</ span > < h3 >upto 60% off</ h3 > < a href = "#" class = "btn" >Buy now</ a > </ div > </ div > < div class = "banner" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113818/image10_100.png" alt = "" > < div class = "content" > < span >Chocolate Cakes</ span > < h3 >upto 50% off</ h3 > < a href = "#" class = "btn" >Buy now</ a > </ div > </ div > </ section > < div class = "heading" > < h1 >The Bakery</ h1 > </ div > < section class = "category" > < h1 class = "title" > All < span >categories</ span > < a href = "#" >view all >></ a > </ h1 > < div class = "box-container" > < a href = "#" class = "box" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113952/image3_100.png" alt = "" > < h3 >fresh cupcake</ h3 > </ a > < a href = "#" class = "box" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113842/image8_100.png" alt = "" > < h3 >cookies</ h3 > </ a > < a href = "#" class = "box" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113914/image6_100.png" alt = "" > < h3 >brown bread</ h3 > </ a > < a href = "#" class = "box" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113952/image3_100.png" alt = "" > < h3 >Dark chocolate</ h3 > </ a > < a href = "#" class = "box" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113842/image8_100.png" alt = "" > < h3 >Wheat</ h3 > </ a > </ div > </ section > < section class = "products" id = "shop" > < h1 class = "title" > our < span >products</ span > < a href = "#" >view all >></ a > </ h1 > < div class = "box-container" > < div class = "box" > < div class = "icons" > < a href = "#" class = "fas fa-shopping-cart" ></ a > < a href = "#" class = "fas fa-heart" ></ a > < a href = "#" class = "fas fa-eye" ></ a > </ div > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301114023/image_100.png" alt = "" > </ div > < div class = "content" > < h3 >fruit cakes</ h3 > < div class = "price" >$25</ div > </ div > </ div > < div class = "box" > < div class = "icons" > < a href = "#" class = "fas fa-shopping-cart" ></ a > < a href = "#" class = "fas fa-heart" ></ a > < a href = "#" class = "fas fa-eye" ></ a > </ div > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113939/image4_100.png" alt = "" > </ div > < div class = "content" > < h3 >Donut</ h3 > < div class = "price" >$5</ div > </ div > </ div > < div class = "box" > < div class = "icons" > < a href = "#" class = "fas fa-shopping-cart" ></ a > < a href = "#" class = "fas fa-heart" ></ a > < a href = "#" class = "fas fa-eye" ></ a > </ div > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301114023/image_100.png" alt = "" > </ div > < div class = "content" > < h3 >Sparkel cake</ h3 > < div class = "price" >$15</ div > </ div > </ div > < div class = "box" > < div class = "icons" > < a href = "#" class = "fas fa-shopping-cart" ></ a > < a href = "#" class = "fas fa-heart" ></ a > < a href = "#" class = "fas fa-eye" ></ a > </ div > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113914/image6_100.png" alt = "" > </ div > < div class = "content" > < h3 >Nutella cake</ h3 > < div class = "price" >$12</ div > </ div > </ div > < div class = "box" > < div class = "icons" > < a href = "#" class = "fas fa-shopping-cart" ></ a > < a href = "#" class = "fas fa-heart" ></ a > < a href = "#" class = "fas fa-eye" ></ a > </ div > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113939/image4_100.png" alt = "" > </ div > < div class = "content" > < h3 >Choco Cup</ h3 > < div class = "price" >$7</ div > </ div > </ div > < div class = "box" > < div class = "icons" > < a href = "#" class = "fas fa-shopping-cart" ></ a > < a href = "#" class = "fas fa-heart" ></ a > < a href = "#" class = "fas fa-eye" ></ a > </ div > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113818/image10_100.png" alt = "" > </ div > < div class = "content" > < h3 >Cranberry Cake</ h3 > < div class = "price" >$20</ div > </ div > </ div > < div class = "box" > < div class = "icons" > < a href = "#" class = "fas fa-shopping-cart" ></ a > < a href = "#" class = "fas fa-heart" ></ a > < a href = "#" class = "fas fa-eye" ></ a > </ div > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113805/image11_100.png" alt = "" > </ div > < div class = "content" > < h3 >strawberry red spar cake</ h3 > < div class = "price" >$30</ div > </ div > </ div > < div class = "box" > < div class = "icons" > < a href = "#" class = "fas fa-shopping-cart" ></ a > < a href = "#" class = "fas fa-heart" ></ a > < a href = "#" class = "fas fa-eye" ></ a > </ div > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113818/image10_100.png" alt = "" > </ div > < div class = "content" > < h3 >dark chocolate nutella cake</ h3 > < div class = "price" >$26</ div > </ div > </ div > </ div > </ section > < div class = "heading" > < h1 >About us</ h1 > </ div > < section class = "about" id = "about" > < div class = "img" > < img decoding = "async" src = "https://media.w3wiki.net/wp-content/uploads/20240301113805/image11_100.png" alt = "" > </ div > < div class = " content" > < h3 >The Cake Shop</ h3 > < p >Welcome to Bakery, where every confection tells a story of passion and dedication. Founded by a team of seasoned bakers with a shared love for crafting delectable treats, our bakery embodies a commitment to quality, creativity, and customer satisfaction. From the finest ingredients sourced locally to the meticulous attention to detail in every recipe, we take pride in delivering indulgent experiences that delight taste buds and warm hearts. With each cake, pastry, and dessert, we strive to create moments of joy and celebration, making every occasion a little sweeter.</ p > < p >At Bakery, baking isn't just a profession; it's a labor of love that fuels our imagination and drives our pursuit of perfection. With years of experience and a flair for innovation, our talented team brings together traditional techniques and modern flavors to create signature delicacies that are as visually stunning as they are delicious. Whether it's a custom-designed wedding cake, a batch of freshly baked cookies, or a tempting assortment of pastries for a special event, we pour our passion into every creation, ensuring that each bite is a testament to our dedication to excellence. Join us on a journey of culinary delights, where every bite is a taste of our unwavering commitment to baking brilliance.</ p > < a href = "#" class = "btn" >read more</ a > </ div > </ section > < div class = "heading" > < h1 >Contact us</ h1 > </ div > < section class = "contact" id = "contact" > < div class = "icons-container" > < div class = "icons" > < i class = "fas fa-phone" ></ i > < h3 >Contact number</ h3 > < p >+xx xxxxxxxxxx</ p > < p >+xx xxxx xxx xxx</ p > </ div > < div class = "icons" > < i class = "fas fa-envelope" ></ i > < h3 >email</ h3 > < p >xxxxxxxxxxx@gmail.com</ p > < p >xyzabc@gmail.com</ p > </ div > < div class = "icons" > < i class = "fas fa-map-marker-alt" ></ i > < h3 >address</ h3 > < p >India</ p > </ div > </ div > < div class = "row" > < form action = "" > < h3 >get in touch</ h3 > < div class = "inputBox" > < input type = "text" placeholder = "enter your name" class = "box" > < input type = "text" placeholder = "enter your email" class = "box" > </ div > < div class = "inputBox" > < input type = "number" placeholder = "enter your number" class = "box" > < input type = "text" placeholder = "enter your subject" class = "box" > </ div > < textarea placeholder = " your message" cols = "30" rows = "10" ></ textarea > < input type = "submit" v alue = "send message" class = "btn" > </ form > </ div > </ section > < div class = "space" ></ div > < section class = "footer" > < div class = "box-container" > < div class = "box" > < h3 >quick links</ h3 > < a href = "#" > < i class="fas fa-arrow-right"></ i > Home</ a > < a href = "#" > < i class="fas fa-arrow-right"></ i >Shop</ a > < a href = "#" > < i class="fas fa-arrow-right"></ i >About</ a > < a href = "#" > < i class="fas fa-arrow-right"></ i > Review</ a > < a href = "#" > < i class="fas fa-arrow-right"></ i >Blog</ a > < a href = "#" > < i class="fas fa-arrow-right"></ i >Contact</ a > </ div > < div class = "box" > < h3 >follow us</ h3 > < a href = "#" > < i class="fab fa-facebook-f"></ i > facebook </ a > < a href = "#" > < i class="fab fa-twitter"></ i > twitter </ a > < a href = "#" > < i class="fab fa-instagram"></ i > instagram </ a > < a href = "#" > < i class="fab fa-linkedin"></ i > linkedin </ a > < a href = "#" > < i class="fab fa-pinterest"></ i > pinterest </ a > </ div > < div class = "box" > < h3 >newsletter</ h3 > < p >Dont miss any Offer</ p > < form action = "" > < input type = "email" placeholder = "your e-mail" > < input type = "submit" value = "subscribe" class = "btn" > </ form > </ div > </ div > </ section > < section class = "credit" >created by < span >@Geek</ span ></ section > < script src = "script.js" defer data-deferred = "1" ></ script > </ body > </ html > |
CSS
/* style.css */ @import url ( 'https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap' ); :root { -- color : #941d57 6a; } body { background : #ffffff ; } * { font-family : 'Poppins' , sans-serif ; margin : 0 ; padding : 0 ; box-sizing: border-box; outline : none ; border : none ; text-transform : capitalize ; text-decoration : none ; transition: . 2 s linear; } .btn { margin-top : 1 rem; display : inline- block ; padding : . 8 rem 3 rem; background : var(--color); color : #fff ; font-size : 1.7 rem; cursor : pointer ; box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.7 ); border : 0.1 rem solid rgba( 0 , 0 , 0 , 0.7 ); } .btn:hover { background : #222 ; box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.1 ); } html { font-size : 62.5% ; overflow-x: hidden ; scroll-behavior: smooth; } section { padding : 3 rem 9% ; } .heading { background : url ( "https://media.w3wiki.net/wp-content/uploads/20240301113805/image11_100.png" ) no-repeat ; background- size : cover; background-position : center ; text-align : center ; padding-top : 12 rem; padding-bottom : 8 rem; border-bottom : 0.1 rem solid rgba( 0 , 0 , 0 , 0.7 ); } .heading h 1 { color : #000000 ; font-size : 4 rem; } .title { display : flex; align-items: center ; font-size : 2.5 rem; margin-bottom : 3 rem; padding : 1.2 rem 0 ; border-bottom : 0.1 rem solid rgba( 0 , 0 , 0 , 0.7 ); color : #fff ; } .title span { color : #222 ; padding-left : . 7 rem; } .title a { margin-left : auto ; color : #222 ; font-size : 1.5 rem; } .title a:hover { color : #fff ; } .header { position : fixed ; top : 0 ; left : 0 ; right : 0 ; z-index : 1000 ; background : var(--color); display : flex; align-items: center ; justify- content : space-between; padding : 2 rem 9% ; box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.1 ); } .header .logo { font-size : 2.5 rem; font-weight : bolder ; color : #ffffff ; } .header .logo i { color : #222 ; padding-right : . 5 rem; } .header .navbar a { font-size : 1.7 rem; color : #fff ; margin : 0 1 rem; } .header .navbar a:hover { color : #222 ; } .header .icons div { font-size : 2.5 rem; margin-left : 1.7 rem; cursor : pointer ; color : #fff ; } .header .icons div:hover { color : #222 ; } #menu-btn { display : none ; } @keyframes fadeLeft { 0% { opacity: 0 ; transform: translateY( -5 rem); } } @keyframes fadeUp { 0% { opacity: 0 ; transform: scale( 0.5 ); } } .home { padding-top : 14 rem; background : url ( "https://media.w3wiki.net/wp-content/uploads/20240301113805/image11_100.png" ) no-repeat ; background- size : cover; background-position : center ; position : relative ; } .home .slides-container .slide { display : flex; align-items: center ; flex-wrap: wrap; gap: 1.5 rem; display : none ; } .home .slides-container .slide.active { display : flex; } .home .slides-container .slide .content { flex: 1 1 40 rem; animation: fadeLeft . 4 s linear . 4 s backwards; } .home .slides-container .slide .content span { color : #000 ; font-size : 2.5 rem; } .home .slides-container .slide .content h 3 { font-size : 6 rem; color : #222 ; padding : . 5 rem 0 ; } .home .slides-container .slide .img { flex: 1 1 40 rem; margin : 3 rem 0 ; } .home .slides-container .slide .img img { width : 100% ; animation: fadeUp . 4 s linear; } .home #next-slide, .home #prev-slide { position : absolute ; top : 50% ; transform: translateY( -50% ); height : 5 rem; width : 5 rem; line-height : 5 rem; box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.7 ); border : 0.1 rem solid rgba( 0 , 0 , 0 , 0.7 ); text-align : center ; background : var(--color); font-size : 2 rem; color : #fff ; cursor : pointer ; } .home #next-slide:hover, .home #prev-slide:hover { background : #222 ; color : #fff ; box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.1 ); } .home #prev-slide { left : 2 rem; } .home #next-slide { right : 2 rem; } .banner-container { display : grid; grid-template-columns: repeat (auto-fit, minmax( 32 rem, 1 fr)); gap: 1.5 rem; } .banner-container .banner { position : relative ; height : 25 rem; overflow : hidden ; box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.7 ); border : 0.1 rem solid rgba( 0 , 0 , 0 , 0.7 ); } .banner-container .banner img { height : 100% ; width : 100% ; object-fit: cover; } .banner-container .banner .content { position : absolute ; top : 50% ; left : 2 rem; transform: translateY( -50% ); } .banner-container .banner .content span { color : #fff ; font-size : 1.5 rem; } .banner-container .banner .content h 3 { font-size : 2 rem; padding-top : . 5 rem; color : #fff ; } .banner-container .banner .content .btn { padding : . 8 rem 2.5 rem; } .banner-container .banner:hover img { transform: scale( 1.2 ); } .category .box-container { display : grid; grid-template-columns: repeat (auto-fit, minmax( 16 rem, 1 fr)); gap: 1.5 rem; padding : 4 rem 0 ; } .category .box-container .box { text-align : center ; box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.7 ); border : 0.1 rem solid rgba( 0 , 0 , 0 , 0.7 ); } .category .box-container .box img { height : 15 rem; width : 21 rem; } .category .box-container .box h 3 { font-size : 2 rem; margin : 1 rem 0 ; color : #222 ; } .category .box-container .box:hover h 3 { color : #fff ; } .products .box-container { display : -ms-grid; display : grid; grid-template-columns: repeat (auto-fit, minmax( 25 rem, 1 fr)); gap: 1.5 rem; } .products .box-container .box { position : relative ; background : #f3f3f3 ; text-align : center ; overflow : hidden ; box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.7 ); border : 0.1 rem solid rgba( 0 , 0 , 0 , 0.7 ); } .products .box-container .box:hover .icons { top : 0 ; } .products .box-container .box .icons { position : absolute ; top : -105% ; left : 0 ; height : 30 rem; width : 100% ; display : -webkit-box; display : -ms-flexbox; display : flex; align-items: center ; justify- content : center ; background : rgba( 243 , 243 , 243 , 0.8 ); gap: 1 rem; } .products .box-container .box .icons a { font-size : 2 rem; height : 5 rem; width : 5 rem; line-height : 5 rem; background : #fff ; box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.1 ); color : #666 ; } .products .box-container .box .icons a:hover { background : var(--color); color : #fff ; } .products .box-container .box .img { height : 15 rem; width : 27 rem; overflow : hidden ; } .products .box-container .box .img img { height : 100% ; width : 100% ; object-fit: cover; } .products .box-container .box .content { padding : 1.5 rem; } .products .box-container .box .content h 3 { font-size : 2 rem; color : #222 ; } .products .box-container .box .content .price { font-size : 2 rem; color : #222 ; padding : 1 rem 0 ; } .products .box-container .box .content i { font-size : 1.7 rem; color : var(--color); } .about { display : flex; align-items: center ; flex-wrap: wrap; gap: 1.5 rem; } .about .img { flex: 1 1 40 rem; } .about .img img { width : 100% ; box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.7 ); border : 0.1 rem solid rgba( 0 , 0 , 0 , 0.7 ); } .about .content { flex: 1 1 40 rem; } .about .content span { color : #fff ; font-size : 2.5 rem; } .about .content h 3 { color : #222 ; font-size : 3 rem; padding-top : . 5 rem; } .about .content p { color : #222 ; font-size : 1.4 rem; line-height : 2 ; padding : 1 rem 0 ; } .contact .icons-container { display : grid; grid-template-columns: repeat (auto-fit, minmax( 29 rem, 1 fr)); gap: 1.5 rem; } .contact .icons-container .icons { text-align : center ; border : 0.1 rem solid rgba( 0 , 0 , 0 , 0.7 ); box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.7 ); padding : 2 rem; } .contact .icons-container .icons i { height : 6 rem; width : 6 rem; line-height : 6 rem; font-size : 2.5 rem; background : var(--color); color : #fff ; border-radius: 50% ; } .contact .icons-container .icons h 3 { color : #222 ; font-size : 2 rem; padding : 1 rem 0 ; } .contact .icons-container .icons p { color : #222 ; font-size : 1.5 rem; line-height : 2 ; } .contact .row { display : flex; flex-wrap: wrap; gap: 1.5 rem; margin-top : 2 rem; } .contact .row form { padding : 2 rem; border : 0.1 rem solid rgba( 0 , 0 , 0 , 0.7 ); box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.7 ); flex: 1 1 40 rem; } .contact .row form h 3 { font-size : 2.5 rem; padding-bottom : 1 rem; color : #222 ; } .contact .row form .inputBox { display : flex; justify- content : space-between; flex-wrap: wrap; } .contact .row form .inputBox .box, .contact .row form textarea { padding : 1 rem 1.2 rem; font-size : 1.6 rem; border : 0.1 rem solid rgba( 0 , 0 , 0 , 0.7 ); box-shadow: 0 0.5 rem 1 rem rgba( 0 , 0 , 0 , 0.7 ); color : #222 ; text-transform : none ; margin : . 7 rem 0 ; } .contact .row form textarea { width : 100% ; height : 15 rem; resize: none ; } .footer { background : var(--color); } .footer .box-container { display : grid; grid-template-columns: repeat (auto-fit, minmax( 25 rem, 1 fr)); gap: 1.5 rem; } .footer .box-container .box h 3 { font-size : 2.2 rem; color : #222 ; padding : 1 rem 0 ; } .footer .box-container .box p { font-size : 1.5 rem; color : #000 ; padding-bottom : . 5 rem; } .footer .box-container .box a { font-size : 1.4 rem; color : #000 ; padding : 1 rem 0 ; display : block ; } .footer .box-container .box a:hover { color : #fff ; } .footer .box-container .box a:hover i { padding-right : 2 rem; } .footer .box-container .box a i { padding-right : . 5 rem; color : #000 ; } .footer .box-container .box form input[type= "email" ] { width : 100% ; padding : 1 rem 1.2 rem; font-size : 1.6 rem; color : #000 ; margin : 1 rem 0 ; text-transform : none ; } .credit { text-align : center ; font-size : 2 rem; font-weight : bold ; } .credit span { font-weight : bold ; font-size : 2.3 rem; color : rgb ( 0 , 150 , 10 ); } /* CSS */ /* Hamburger Icon */ /* Header Styles */ .header { display : flex; justify- content : space-between; align-items: center ; padding : 20px ; background-color : #941d57 6a; box-shadow: 0 2px 4px rgba( 0 , 0 , 0 , 0.1 ); } .logo { font-size : 24px ; font-weight : bold ; text-decoration : none ; color : #333 ; } .navbar { display : flex; } .navbar a { margin-right : 20px ; text-decoration : none ; color : #333 ; } /* Hamburger Icon Styles */ .hamburger { display : none ; flex- direction : column; cursor : pointer ; } .line { width : 25px ; height : 3px ; background-color : #000 ; margin : 3px 0 ; } /* Navigation Menu Styles */ @media screen and ( max-width : 900px ) { .navbar { display : none ; flex- direction : column; position : absolute ; top : 60px ; left : 0 ; width : 100% ; background-color : #941d57 6a; border : 1px solid #941d57 6a; z-index : 1000 ; } .navbar.active { display : flex; } .icons { display : none ; } .navbar a { flex- direction : column; padding : 15px ; text-decoration : none ; color : #000 ; } .navbar a:hover { background-color : #941d56 ab; } .hamburger { display : flex; } } |
Javascript
const navbar = document.querySelector( ".navbar" ); const menuBtn = document.querySelector( "#menu-btn" ); const slides = document.querySelectorAll( ".home .slides-container .slide" ); const header = document.querySelector( ".header" ); let index = 0; // JavaScript to toggle the // visibility of the navigation menu document.addEventListener( "DOMContentLoaded" , function () { const hamburger = document.getElementById( "hamburger" ); const navbar = document.querySelector( ".navbar" ); hamburger.addEventListener( "click" , function () { navbar.classList.toggle( "active" ); }); }); window.addEventListener( "scroll" , () => { navbar.classList.remove( "active" ); }); function showSlide(nextIndex) { slides[index].classList.remove( "active" ); index = (nextIndex + slides.length) % slides.length; slides[index].classList.add( "active" ); } function next() { showSlide(index + 1); } function prev() { showSlide(index - 1); } |
Output:
Contact Us