├── README.md
├── images
    ├── cake1.jpg
    ├── cake2.webp
    ├── cake3.jpg
    ├── cake4.png
    ├── drink1.jpg
    ├── drink2.png
    ├── drink3.webp
    ├── home1.webp
    ├── home2.jpeg
    ├── home4.webp
    ├── icecream4.png
    ├── takeout1.jpg
    ├── icecream1.webp
    ├── icecream2.jpeg
    ├── icecream3.webp
    ├── site-icon.webp
    └── menu-background.jpg
├── package.json
├── styles
    ├── about.css
    ├── contact.css
    ├── menu.css
    ├── navbar.css
    └── main.css
├── script.js
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # Cafe-website
2 | Responsive cafe website.
3 | 
4 | 


--------------------------------------------------------------------------------
/images/cake1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/cake1.jpg


--------------------------------------------------------------------------------
/images/cake2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/cake2.webp


--------------------------------------------------------------------------------
/images/cake3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/cake3.jpg


--------------------------------------------------------------------------------
/images/cake4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/cake4.png


--------------------------------------------------------------------------------
/images/drink1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/drink1.jpg


--------------------------------------------------------------------------------
/images/drink2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/drink2.png


--------------------------------------------------------------------------------
/images/drink3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/drink3.webp


--------------------------------------------------------------------------------
/images/home1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/home1.webp


--------------------------------------------------------------------------------
/images/home2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/home2.jpeg


--------------------------------------------------------------------------------
/images/home4.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/home4.webp


--------------------------------------------------------------------------------
/images/icecream4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/icecream4.png


--------------------------------------------------------------------------------
/images/takeout1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/takeout1.jpg


--------------------------------------------------------------------------------
/images/icecream1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/icecream1.webp


--------------------------------------------------------------------------------
/images/icecream2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/icecream2.jpeg


--------------------------------------------------------------------------------
/images/icecream3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/icecream3.webp


--------------------------------------------------------------------------------
/images/site-icon.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/site-icon.webp


--------------------------------------------------------------------------------
/images/menu-background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flyingculprit/Cafe_website/HEAD/images/menu-background.jpg


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cafewebsite",
 3 |   "version": "1.0.0",
 4 |   "description": "cafe website",
 5 |   "main": "script.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "priyadharshini sakthivel",
10 |   "license": "ISC"
11 | }
12 | 


--------------------------------------------------------------------------------
/styles/about.css:
--------------------------------------------------------------------------------
 1 | /* -------------------------------------- */
 2 | /* -------------- About Us -------------- */
 3 | /* -------------------------------------- */
 4 | 
 5 | .about-flex-wrapper {
 6 |     padding-bottom: 20px;
 7 |     padding-top: 80px;
 8 |     margin-bottom: -30px;
 9 |     margin-top: -65px;
10 |   }
11 |   
12 |   .about-container {
13 |     display: flex;
14 |     flex-wrap: wrap;
15 |     align-items: flex-start;
16 |     justify-content: center;
17 |     padding-bottom: 50px;
18 |     padding-top: 20px;
19 |     margin-top: 30px;
20 |     background-size: cover;
21 |     background-repeat: no-repeat;
22 |     background-attachment: fixed;
23 |   }
24 |   
25 |   .about-container > div {
26 |     background-color: rgb(109, 127, 138, 0.2);
27 |     width: 600px;
28 |     min-height: 500px;
29 |     margin: 10px;
30 |     padding: 20px;
31 |     text-align: left;
32 |     font-size: 20px;
33 |     border-radius: 10px;
34 |   }
35 |   
36 |   .about-img {
37 |     width: 100%;
38 |     height: 400px;
39 |     object-fit: cover;
40 |     object-position: center;
41 |     border-radius: 20px;
42 |     border: solid 1px grey;
43 |   }
44 |   
45 |   @media screen and (max-width: 1257px) {
46 |     .about-container > div {
47 |       width: 550px;
48 |     }
49 |     .about-img {
50 |       height: 350px;
51 |     }
52 |   }
53 |   @media screen and (max-width: 1170px) {
54 |     .about-container > div {
55 |       width: 500px;
56 |     }
57 |     .about-img {
58 |       height: 300px;
59 |     }
60 |   }
61 |   
62 |   @media screen and (max-width: 1070px) {
63 |     .about-container > div {
64 |       width: 450px;
65 |     }
66 |     .about-img {
67 |       height: 250px;
68 |     }
69 |   }
70 |   
71 |   @media screen and (max-width: 970px) {
72 |     .about-container > div {
73 |       width: 700px;
74 |     }
75 |     .about-img {
76 |       height: 300px;
77 |     }
78 |   }


--------------------------------------------------------------------------------
/styles/contact.css:
--------------------------------------------------------------------------------
 1 | /* -------------------------------------- */
 2 | /* ------------- Contact Us ------------- */
 3 | /* -------------------------------------- */
 4 | 
 5 | .contact-flex-wrapper {
 6 |     padding-bottom: 20px;
 7 |     padding-top: 80px;
 8 |     margin-bottom: -30px;
 9 |     margin-top: -85px;
10 |   }
11 |   
12 |   .contact-container {
13 |     display: flex;
14 |     flex-wrap: wrap;
15 |     background-image: url(/menu-background.jpg);
16 |     align-items: center;
17 |     justify-content: center;
18 |     padding-bottom: 50px;
19 |     padding-top: 20px;
20 |     margin-top: 30px;
21 |     background-size: cover;
22 |     background-repeat: no-repeat;
23 |     background-attachment: fixed;
24 |   }
25 |   
26 |   .contact-container > div {
27 |     background-color: rgb(109, 127, 138, 0.2);
28 |     width: 600px;
29 |     min-height: 500px;
30 |     margin: 10px;
31 |     padding: 20px;
32 |     text-align: left;
33 |     font-size: 20px;
34 |     border-radius: 10px;
35 |   }
36 |   
37 |   .img-map {
38 |     width: 100%;
39 |     height: 400px;
40 |     object-fit: cover;
41 |     object-position: center;
42 |     border-radius: 5px;
43 |     border: solid 1px grey;
44 |   }
45 |   
46 |   .first-letter::first-letter {
47 |     font-size: 35px;
48 |     text-transform: uppercase;
49 |     font-family: "Lucida Handwriting", cursive;
50 |   }
51 |   
52 |   .left-align {
53 |     text-align: left;
54 |   }
55 |   
56 |   table {
57 |     width: 100%;
58 |   }
59 |   
60 |   @media screen and (max-width: 1257px) {
61 |     .contact-container > div {
62 |       width: 550px;
63 |     }
64 |   }
65 |   @media screen and (max-width: 1170px) {
66 |     .contact-container > div {
67 |       width: 500px;
68 |     }
69 |   }
70 |   
71 |   @media screen and (max-width: 1070px) {
72 |     .contact-container > div {
73 |       width: 450px;
74 |     }
75 |   }
76 |   
77 |   @media screen and (max-width: 970px) {
78 |     .contact-container > div {
79 |       width: 700px;
80 |     }
81 |   }
82 |   


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | let slideIndex = 1;
 2 | let myTimer;
 3 | let slideshowContainer;
 4 | 
 5 | window.addEventListener("load", function () {
 6 |   showSlides(slideIndex);
 7 |   myTimer = setInterval(function () {
 8 |     plusSlides(1);
 9 |   }, 5000);
10 | 
11 |   // ============== Additional option for client preference ============== \\
12 |   // Uncomment the lines below to activate pause/resume on slideshow hover
13 | 
14 |   // slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
15 |   // slideshowContainer.addEventListener("mouseenter", pause);
16 |   // slideshowContainer.addEventListener("mouseleave", resume);
17 | });
18 | 
19 | // Next and Previous Control
20 | function plusSlides(n) {
21 |   clearInterval(myTimer);
22 |   if (n < 0) {
23 |     showSlides((slideIndex -= 1));
24 |   } else {
25 |     showSlides((slideIndex += 1));
26 |   }
27 | 
28 |   if (n === -1) {
29 |     myTimer = setInterval(function () {
30 |       plusSlides(n + 2);
31 |     }, 4000);
32 |   } else {
33 |     myTimer = setInterval(function () {
34 |       plusSlides(n + 1);
35 |     }, 4000);
36 |   }
37 | }
38 | 
39 | // Controls the current slide and resets interval, if needed
40 | function currentSlide(n) {
41 |   clearInterval(myTimer);
42 |   myTimer = setInterval(function () {
43 |     plusSlides(n + 1);
44 |   }, 4000);
45 |   showSlides((slideIndex = n));
46 | }
47 | 
48 | function showSlides(n) {
49 |   let i;
50 |   let slides = document.getElementsByClassName("mySlides");
51 |   let dots = document.getElementsByClassName("dot");
52 |   if (n > slides.length) {
53 |     slideIndex = 1;
54 |   }
55 |   if (n < 1) {
56 |     slideIndex = slides.length;
57 |   }
58 |   for (i = 0; i < slides.length; i++) {
59 |     slides[i].style.display = "none";
60 |   }
61 |   for (i = 0; i < dots.length; i++) {
62 |     dots[i].className = dots[i].className.replace(" active", "");
63 |   }
64 |   slides[slideIndex - 1].style.display = "block";
65 |   dots[slideIndex - 1].className += " active";
66 | }
67 | 
68 | function pause() {
69 |   clearInterval(myTimer);
70 | }
71 | 
72 | function resume() {
73 |   clearInterval(myTimer);
74 |   myTimer = setInterval(function () {
75 |     plusSlides(slideIndex);
76 |   }, 4000);
77 | }


--------------------------------------------------------------------------------
/styles/menu.css:
--------------------------------------------------------------------------------
 1 | /* -------------------------------------- */
 2 | /* ---------------- Menu ---------------- */
 3 | /* -------------------------------------- */
 4 | 
 5 | .menu-flex-wrapper {
 6 |     padding-bottom: 20px;
 7 |     padding-top: 80px;
 8 |     margin-bottom: 0px;
 9 |     margin-top: -30px;
10 |   }
11 |   
12 |   .menu-container {
13 |     max-width: 1200px;
14 |     margin: 30px auto;
15 |     padding: 1.5rem;
16 |     background-color: rgb(109, 127, 138, 0.2);
17 |     color: black;
18 |     background-size: cover;
19 |     background-repeat: no-repeat;
20 |     background-attachment: fixed;
21 |     border-radius: 10px;
22 |   }
23 |   
24 |   .menu {
25 |     font-family: "David Libre", serif;
26 |     font-size: 16px;
27 |   }
28 |   
29 |   .menu-group-heading {
30 |     margin: 0;
31 |     padding-bottom: 1em;
32 |     border-bottom: 2px solid #ccc;
33 |   }
34 |   
35 |   .menu-group {
36 |     display: grid;
37 |     grid-template-columns: 1fr;
38 |     gap: 1.5em;
39 |     padding: 1.5em 0;
40 |   }
41 |   
42 |   .menu-item {
43 |     display: flex;
44 |   }
45 |   
46 |   .menu-item-image {
47 |     width: 100px;
48 |     height: 100px;
49 |     flex-shrink: 0;
50 |     object-fit: cover;
51 |     margin-right: 1.5em;
52 |     border-radius: 10px;
53 |     box-shadow: 10px 10px 5px rgb(85, 82, 82);
54 |   }
55 |   
56 |   .menu-item-text {
57 |     flex-grow: 1;
58 |     /* enables whole width of the text */
59 |   }
60 |   
61 |   .menu-item-heading {
62 |     display: flex;
63 |     justify-content: space-between;
64 |     /* Adds space between left-side name and right-side price */
65 |     margin: 0;
66 |   }
67 |   
68 |   .menu-item-name {
69 |     margin-right: 1.5rem;
70 |   }
71 |   
72 |   .menu-item-description {
73 |     line-height: 1.5;
74 |   }
75 |   
76 |   /* If screen is more than 992px in size  */
77 |   @media screen and (min-width: 992px) {
78 |     .menu {
79 |       font-size: 20px;
80 |     }
81 |     .menu-group {
82 |       grid-template-columns: repeat(
83 |         2,
84 |         1fr
85 |       ); /* same as 1fr, 1fr; 2 column taking up total space evenly (2 evenly-sized columns) */
86 |     }
87 |     .menu-item-image {
88 |       width: 150px;
89 |       height: 150px;
90 |     }
91 |   }


--------------------------------------------------------------------------------
/styles/navbar.css:
--------------------------------------------------------------------------------
  1 | /* -------------------------------------- */
  2 | /* --------------- Navbar --------------- */
  3 | /* -------------------------------------- */
  4 | 
  5 | .nav {
  6 |     height: 50px;
  7 |     width: 100%;
  8 |     background-color: #4d4d4d;
  9 |     position: fixed;
 10 |     z-index: 10;
 11 |     padding-right: 20px;
 12 |   }
 13 |   
 14 |   .nav > .nav-header {
 15 |     display: inline;
 16 |   }
 17 |   
 18 |   .nav > .nav-header > .nav-title {
 19 |     display: inline-block;
 20 |     color: #fff;
 21 |     padding: 6px 10px 0px 20px;
 22 |     font-size: 25px;
 23 |   }
 24 |   
 25 |   a {
 26 |     text-decoration: none;
 27 |   }
 28 |   
 29 |   a span {
 30 |     color: rgb(255, 255, 255);
 31 |   }
 32 |   
 33 |   .nav > .nav-btn {
 34 |     display: none;
 35 |   }
 36 |   
 37 |   .nav > .nav-links {
 38 |     display: inline;
 39 |     float: right;
 40 |   }
 41 |   
 42 |   .nav > .nav-links > a {
 43 |     display: inline-block;
 44 |     padding: 8px 8px 7px 8px;
 45 |     text-decoration: none;
 46 |     color: #efefef;
 47 |   }
 48 |   
 49 |   .nav > .nav-links > a:hover {
 50 |     background-color: rgba(0, 0, 0, 0.3);
 51 |   }
 52 |   
 53 |   /* Hide checkbox */
 54 |   .nav > #nav-check {
 55 |     display: none;
 56 |   }
 57 |   
 58 |   @media (max-width: 600px) {
 59 |     .nav > .nav-btn {
 60 |       display: inline-block;
 61 |       position: absolute;
 62 |       right: 0px;
 63 |       top: 0px;
 64 |     }
 65 |     .nav > .nav-btn > label {
 66 |       display: inline-block;
 67 |       width: 60px;
 68 |       height: 50px;
 69 |       padding: 13px;
 70 |   
 71 |       color: white;
 72 |     }
 73 |     .nav > .nav-btn > label:hover,
 74 |     .nav #nav-check:checked ~ .nav-btn > label {
 75 |       background-color: rgba(0, 0, 0, 0.3);
 76 |       cursor: pointer;
 77 |     }
 78 |   
 79 |     /* Toggle icon */
 80 |     .nav > .nav-btn > label > span {
 81 |       display: block;
 82 |       width: 35px;
 83 |       height: 10px;
 84 |       border-top: 2px solid #eee;
 85 |     }
 86 |   
 87 |     /* Toggle expanded menu */
 88 |     .nav > .nav-links {
 89 |       position: absolute;
 90 |       display: block;
 91 |       width: 100%;
 92 |       background-color: #333;
 93 |       height: 0px;
 94 |       transition: all 0.3s ease-in;
 95 |       overflow-y: hidden;
 96 |       top: 50px;
 97 |       left: 0px;
 98 |     }
 99 |   
100 |     /* Toggle items */
101 |     .nav > .nav-links > a {
102 |       display: block;
103 |       width: 100%;
104 |       text-align: center;
105 |     }
106 |   
107 |     /* Toggle not clicked */
108 |     .nav > #nav-check:not(:checked) ~ .nav-links {
109 |       height: 0px;
110 |     }
111 |   
112 |     /* Expanded toggle */
113 |     .nav > #nav-check:checked ~ .nav-links {
114 |       height: auto;
115 |     }
116 |   }
117 |   


--------------------------------------------------------------------------------
/styles/main.css:
--------------------------------------------------------------------------------
  1 | /* -------------------------------------- */
  2 | /* ---------------- Main ---------------- */
  3 | /* -------------------------------------- */
  4 | 
  5 | * {
  6 |     box-sizing: border-box;
  7 |     margin: 0;
  8 |     padding: 0;
  9 |     scroll-behavior: smooth;
 10 |   }
 11 |   
 12 |   body {
 13 |     font-size: 23px;
 14 |     line-height: 1.5;
 15 |     background-image: url(../images/menu-background.jpg);
 16 |     background-size: cover;
 17 |     background-repeat: no-repeat;
 18 |     background-attachment: fixed;
 19 |   }
 20 |   
 21 |   h1,
 22 |   h2 {
 23 |     text-align: center;
 24 |   }
 25 |   
 26 |   hr {
 27 |     width: 95%;
 28 |     margin: auto;
 29 |   }
 30 |   
 31 |   .hr-full {
 32 |     width: 100%;
 33 |   }
 34 |   
 35 |   /* ------------------- Slideshow ------------------ */
 36 |   .slideshow-container {
 37 |     max-width: 100%;
 38 |     position: relative;
 39 |     margin-bottom: -6px;
 40 |   }
 41 |   
 42 |   .slide-img {
 43 |     width: 100%;
 44 |     height: 570px;
 45 |     object-fit: cover;
 46 |     object-position: center;
 47 |     margin-bottom: -5px;
 48 |   }
 49 |   
 50 |   /* Next & previous buttons */
 51 |   .prev,
 52 |   .next {
 53 |     cursor: pointer;
 54 |     position: absolute;
 55 |     top: 50%;
 56 |     width: auto;
 57 |     padding: 16px;
 58 |     margin-top: -22px;
 59 |     color: white;
 60 |     font-weight: bold;
 61 |     font-size: 24px;
 62 |     transition: 0.6s ease;
 63 |     border-radius: 0 3px 3px 0;
 64 |     user-select: none;
 65 |   }
 66 |   
 67 |   /* Position the "next button" to the right */
 68 |   .next {
 69 |     right: 0;
 70 |     border-radius: 3px 0 0 3px;
 71 |   }
 72 |   
 73 |   /* On hover, add a black background color with a little bit see-through */
 74 |   .prev:hover,
 75 |   .next:hover {
 76 |     background-color: rgba(0, 0, 0, 0.8);
 77 |   }
 78 |   
 79 |   /* Caption text */
 80 |   .text {
 81 |     color: #f2f2f2;
 82 |     padding: 12px;
 83 |     position: absolute;
 84 |     bottom: 6px;
 85 |     width: 100%;
 86 |     text-align: center;
 87 |     background-color: rgb(54, 52, 52, 0.7);
 88 |   }
 89 |   
 90 |   /* Number text (1/4) */
 91 |   .numbertext {
 92 |     color: #f2f2f2;
 93 |     padding: 8px 12px;
 94 |     position: absolute;
 95 |     top: 60px;
 96 |   }
 97 |   
 98 |   /* The dots/bullets/indicators */
 99 |   .dot {
100 |     cursor: pointer;
101 |     height: 16px;
102 |     width: 16px;
103 |     margin: 0 3px;
104 |     background-color: #bbb;
105 |     border: solid 1px;
106 |     border-radius: 50%;
107 |     display: inline-block;
108 |     transition: background-color 0.5s ease;
109 |   }
110 |   .dot-wrapper {
111 |     padding: 5px 0 10px 0;
112 |     height: 65px;
113 |   }
114 |   
115 |   .active,
116 |   .dot:hover {
117 |     background-color: #bbb;
118 |     background-color: #423e3e;
119 |   }
120 |   
121 |   /* Fading animation */
122 |   .fade {
123 |     animation-name: fade;
124 |     animation-duration: 3s;
125 |   }
126 |   
127 |   @keyframes fade {
128 |     from {
129 |       opacity: 0.5;
130 |     }
131 |     to {
132 |       opacity: 1;
133 |     }
134 |   }
135 |   
136 |   /* On smaller screens, decrease text size */
137 |   @media only screen and (max-width: 300px) {
138 |     .prev,
139 |     .next,
140 |     .text {
141 |       font-size: 11px;
142 |     }
143 |   }
144 |   
145 |   /* -------------- Down arrow -------------------*/
146 |   .arrow-down {
147 |     width: 50px;
148 |     height: 55px;
149 |     margin-left: -20px;
150 |     margin-top: 30px;
151 |     position: relative;
152 |     left: 50%;
153 |     cursor: pointer;
154 |     animation: arrow 0.5s 1s infinite ease-out alternate;
155 |   }
156 |   
157 |   .arrow-down:hover {
158 |     animation-play-state: paused;
159 |   }
160 |   
161 |   .left-arrow-wing {
162 |     position: absolute;
163 |     height: 10px;
164 |     width: 40px;
165 |     background: black;
166 |     transform: rotate(240deg);
167 |     top: 45%;
168 |     left: 12px;
169 |     border-radius: 4px;
170 |     transform-origin: 5px 50%;
171 |     animation: leftArrow 0.5s 1s infinite ease-out alternate;
172 |   }
173 |   .right-arrow-wing {
174 |     position: absolute;
175 |     height: 10px;
176 |     width: 40px;
177 |     background: black;
178 |     transform: rotate(-60deg);
179 |     top: 45%;
180 |     left: 12px;
181 |     border-radius: 4px;
182 |     transform-origin: 5px 50%;
183 |     animation: rightArrow 0.5s 1s infinite ease-out alternate;
184 |   }
185 |   
186 |   @keyframes arrow {
187 |     0% {
188 |       bottom: 0px;
189 |     }
190 |     100% {
191 |       bottom: 40px;
192 |     }
193 |   }
194 |   
195 |   @keyframes leftArrow {
196 |     0% {
197 |     }
198 |     100% {
199 |       transform: rotate(225deg);
200 |     }
201 |   }
202 |   
203 |   @keyframes rightArrow {
204 |     0% {
205 |     }
206 |     100% {
207 |       transform: rotate(-45deg);
208 |     }
209 |   }
210 |   
211 |   /* -------------- Divider -------------- */
212 |   .divider {
213 |     display: flex;
214 |     align-items: center;
215 |     text-align: center;
216 |     width: 95%;
217 |     margin: auto;
218 |   }
219 |   
220 |   /* To show the lines on right 
221 |   and left sides of the text */
222 |   .divider::after,
223 |   .divider::before {
224 |     content: "";
225 |     border: 1px solid black;
226 |     flex: 1;
227 |   }
228 |   
229 |   /* Space on left and right sides of text */
230 |   .divider:not(:empty)::before {
231 |     margin-right: 0.25em;
232 |   }
233 |   
234 |   .divider:not(:empty)::after {
235 |     margin-left: 0.25em;
236 |   }
237 |   
238 |   /* -------------- Footer -------------- */
239 |   .footer {
240 |     display: flex;
241 |     height: 50px;
242 |     align-items: center;
243 |     justify-content: center;
244 |     background-color: rgb(109, 127, 138, 0.2);
245 |   }
246 |   
247 |   @media screen and (max-width: 992px) {
248 |     p,
249 |     td {
250 |       font-size: 16px;
251 |     }
252 |     h1 {
253 |       font-size: 30px;
254 |     }
255 |     h2 {
256 |       font-size: 22px;
257 |     }
258 |     .text,
259 |     .numbertext {
260 |       font-size: 20px;
261 |     }
262 |   }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
  8 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  9 |     <link
 10 |       href="https://fonts.googleapis.com/css2?family=David+Libre:wght@400;700&display=swap"
 11 |       rel="stylesheet"
 12 |     />
 13 |     <link rel="stylesheet" href="./styles/main.css" />
 14 |     <link rel="stylesheet" href="./styles/navbar.css" />
 15 |     <link rel="stylesheet" href="./styles/about.css" />
 16 |     <link rel="stylesheet" href="./styles/menu.css" />
 17 |     <link rel="stylesheet" href="./styles/contact.css" />
 18 |     <link rel="icon" href="./images/site-icon.webp" />
 19 |     <title>Dessert Caf&eacute;</title>
 20 |   </head>
 21 |   <body>
 22 |     <div class="nav">
 23 |       <input type="checkbox" id="nav-check" />
 24 |       <div class="nav-header">
 25 |         <div class="nav-title">
 26 |           <a href="#home"><span>Dessert Caf&eacute;</span></a>
 27 |         </div>
 28 |       </div>
 29 |       <div class="nav-btn">
 30 |         <label for="nav-check">
 31 |           <span></span>
 32 |           <span></span>
 33 |           <span></span>
 34 |         </label>
 35 |       </div>
 36 |       <div class="nav-links">
 37 |         <a href="#home">Home</a>
 38 |         <a href="#about">About</a>
 39 |         <a href="#menu">Menu</a>
 40 |         <a href="#contact">Contact</a>
 41 |       </div>
 42 |     </div>
 43 | 
 44 |     <!--------------- Home Section --------------->
 45 |     <div id="home" class="slideshow-container">
 46 |       <div class="mySlides fade">
 47 |         <div class="numbertext">1 / 4</div>
 48 |         <img class="slide-img" src="./images/home1.webp" alt="Tables" />
 49 |         <div class="text">Dine-In</div>
 50 |       </div>
 51 | 
 52 |       <div class="mySlides fade">
 53 |         <div class="numbertext">2 / 4</div>
 54 |         <img class="slide-img" src="./images/home2.jpeg" alt="Strawberry Cheese Cake" />
 55 |         <div class="text">Delicious Desserts</div>
 56 |       </div>
 57 | 
 58 |       <div class="mySlides fade">
 59 |         <div class="numbertext">3 / 4</div>
 60 |         <img class="slide-img" src="./images/drink3.webp" alt="Flavoured Water" />
 61 |         <div class="text">Refreshing Drinks</div>
 62 |       </div>
 63 | 
 64 |       <div class="mySlides fade">
 65 |         <div class="numbertext">4 / 4</div>
 66 |         <img class="slide-img" src="./images/home4.webp" alt="Ice Cream" />
 67 |         <div class="text">Healthy Ingredients</div>
 68 |       </div>
 69 | 
 70 |       <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
 71 |       <a class="next" onclick="plusSlides(1)">&#10095;</a>
 72 |     </div>
 73 | 
 74 |     <div style="text-align: center" class="dot-wrapper">
 75 |       <span class="dot" onclick="currentSlide(1)"></span>
 76 |       <span class="dot" onclick="currentSlide(2)"></span>
 77 |       <span class="dot" onclick="currentSlide(3)"></span>
 78 |       <span class="dot" onclick="currentSlide(4)"></span>
 79 |       <hr />
 80 |     </div>
 81 | 
 82 |     <h1>Dessert Caf&eacute;</h1>
 83 |     <div>
 84 |       <a href="#about">
 85 |         <div class="arrow-down">
 86 |           <div class="left-arrow-wing"></div>
 87 |           <div class="right-arrow-wing"></div>
 88 |         </div>
 89 |       </a>
 90 |     </div>
 91 | 
 92 |     <!--------------- About Section --------------->
 93 |     <div class="about-flex-wrapper" id="about">
 94 |       <h1 class="divider">About Us</h1>
 95 |     </div>
 96 | 
 97 |     <div class="about-container">
 98 |       <div>
 99 |         <h2>Dine-In</h2>
100 |         <br />
101 |         <p>
102 |           Dessert Caf&eacute; is a popular dessert destination for college students, local
103 |           residents, and travellers. We provide friendly service and offer a scrumptious array of
104 |           quality desserts in the busy college Shops Plaza located around karur.
105 |         </p>
106 |         <br />
107 |         <img class="about-img" src="./images/home1.webp" alt="Dine-In" />
108 |         <p></p>
109 |       </div>
110 | 
111 |       <div>
112 |         <h2>Takeout or Delivery</h2>
113 |         <br />
114 |         <p>
115 |           We carry several takeout box sizes to fit all our menu items, so come on in and grab a
116 |           delectable dessert to enjoy on the go.
117 |         </p>
118 |         <br />
119 |         <p>We also provide delivery services.</p>
120 | 
121 |         <br />
122 |         <img class="about-img" src="./images/takeout1.jpg" alt="Takeout or Delivery" />
123 |       </div>
124 |     </div>
125 | 
126 |     <!--------------- Menu Section --------------->
127 |     <div class="menu-flex-wrapper" id="menu">
128 |       <h1 class="divider">Menu</h1>
129 |     </div>
130 | 
131 |     <div class="menu-container">
132 |       <div class="menu">
133 |         <h2 class="menu-group-heading">Cake Slices</h2>
134 |         <div class="menu-group">
135 |           <div class="menu-item">
136 |             <img class="menu-item-image" src="./images/cake1.jpg" alt="Matcha Swiss Roll" />
137 |             <div class="menu-item-text">
138 |               <h3 class="menu-item-heading">
139 |                 <span class="menu-item-name">Matcha Swiss Roll</span>
140 |                 <span class="menu-item-price">&#8377;70/slice</span>
141 |               </h3>
142 |               <p class="menu-item-description">
143 |                 Soft and fluffy sponge cake infused with matcha, perfectly balanced with creamy
144 |                 whipped cream filling. This guilty-free dessert has no butter or oil added, and it
145 |                 is packed with antioxidants.
146 |               </p>
147 |             </div>
148 |           </div>
149 | 
150 |           <div class="menu-item">
151 |             <img class="menu-item-image" src="./images/cake2.webp" alt="Strawberry Roll Cake" />
152 |             <div class="menu-item-text">
153 |               <h3 class="menu-item-heading">
154 |                 <span class="menu-item-name">Strawberry Cake Roll</span>
155 |                 <span class="menu-item-price">&#8377;50/slice</span>
156 |               </h3>
157 |               <p class="menu-item-description">
158 |                 Light and airy sponge cake filled with fresh strawberries and delicate whipped
159 |                 cream. The cake is kept chilled until it is served, to bring out its refreshing
160 |                 qualities.
161 |               </p>
162 |             </div>
163 |           </div>
164 |           <div class="menu-item">
165 |             <img class="menu-item-image" src="./images/cake3.jpg" alt="Chocolate Cream Roll" />
166 |             <div class="menu-item-text">
167 |               <h3 class="menu-item-heading">
168 |                 <span class="menu-item-name">Chocolate Cream Roll</span>
169 |                 <span class="menu-item-price">&#8377;40/slice</span>
170 |               </h3>
171 |               <p class="menu-item-description">
172 |                 Rich and irresistible chocolate sponge cake with whipped cream filling. The cake is
173 |                 made with real cocoa, without added sugar, and the whipped cream is also sugar-free.
174 |               </p>
175 |             </div>
176 |           </div>
177 |           <div class="menu-item">
178 |             <img class="menu-item-image" src="./images/cake4.png" alt="Red Velvet Cake Roll" />
179 |             <div class="menu-item-text">
180 |               <h3 class="menu-item-heading">
181 |                 <span class="menu-item-name">Red Velvet Cake Roll</span>
182 |                 <span class="menu-item-price">&#8377;60/slice</span>
183 |               </h3>
184 |               <p class="menu-item-description">
185 |                 Tender and moist cake stuffed with delicious cream cheese frosting that is as light
186 |                 and fluffy as whipped cream.
187 |               </p>
188 |             </div>
189 |           </div>
190 |         </div>
191 |         <br />
192 | 
193 |         <h2 class="menu-group-heading">Ice Cream</h2>
194 |         <div class="menu-group">
195 |           <div class="menu-item">
196 |             <img
197 |               class="menu-item-image"
198 |               src="./images/icecream1.webp"
199 |               alt="Vanilla Ice Cream Wafer"
200 |             />
201 |             <div class="menu-item-text">
202 |               <h3 class="menu-item-heading">
203 |                 <span class="menu-item-name">Vanilla</span>
204 |                 <span class="menu-item-price">&#8377;150</span>
205 |               </h3>
206 |               <p class="menu-item-description">Vanilla ice cream served in a crunchy wafer bowl.</p>
207 |             </div>
208 |           </div>
209 |           <div class="menu-item">
210 |             <img
211 |               class="menu-item-image"
212 |               src="./images/icecream2.jpeg"
213 |               alt="Chocholate Ice Cream Wafer"
214 |             />
215 |             <div class="menu-item-text">
216 |               <h3 class="menu-item-heading">
217 |                 <span class="menu-item-name">Chocolate</span>
218 |                 <span class="menu-item-price">&#8377;170</span>
219 |               </h3>
220 |               <p class="menu-item-description">
221 |                 Chocolate ice cream served in a crunchy wafer bowl.
222 |               </p>
223 |             </div>
224 |           </div>
225 |           <div class="menu-item">
226 |             <img
227 |               class="menu-item-image"
228 |               src="./images/icecream3.webp"
229 |               alt="Strawberry Ice Cream Wafer"
230 |             />
231 |             <div class="menu-item-text">
232 |               <h3 class="menu-item-heading">
233 |                 <span class="menu-item-name">Strawberry</span>
234 |                 <span class="menu-item-price">&#8377;170</span>
235 |               </h3>
236 |               <p class="menu-item-description">
237 |                 Strawberry ice cream served in a crunchy wafer bowl.
238 |               </p>
239 |             </div>
240 |           </div>
241 |           <div class="menu-item">
242 |             <img
243 |               class="menu-item-image"
244 |               src="./images/icecream4.png"
245 |               alt="Green Tea Ice Cream Wafer"
246 |             />
247 |             <div class="menu-item-text">
248 |               <h3 class="menu-item-heading">
249 |                 <span class="menu-item-name">Green Tea</span>
250 |                 <span class="menu-item-price">&#8377;100</span>
251 |               </h3>
252 |               <p class="menu-item-description">
253 |                 Green tea ice cream served in a crunchy wafer bowl.
254 |               </p>
255 |             </div>
256 |           </div>
257 |         </div>
258 |         <br />
259 | 
260 |         <h2 class="menu-group-heading">Drinks</h2>
261 |         <div class="menu-group">
262 |           <div class="menu-item">
263 |             <img
264 |               class="menu-item-image"
265 |               src="./images/drink1.jpg"
266 |               alt="Vanilla, Strawberry, and Chocolate Milkshake"
267 |             />
268 |             <div class="menu-item-text">
269 |               <h3 class="menu-item-heading">
270 |                 <span class="menu-item-name">Milkshake</span>
271 |                 <span class="menu-item-price">&#8377;90</span>
272 |               </h3>
273 |               <p class="menu-item-description">
274 |                 Vanilla, strawberry, or chocolate milkshake made with whole milk and full-fat ice
275 |                 cream, topped with whipped cream.
276 |               </p>
277 |             </div>
278 |           </div>
279 |           <div class="menu-item">
280 |             <img class="menu-item-image" src="./images/drink3.webp" alt="Flavoured Water" />
281 |             <div class="menu-item-text">
282 |               <h3 class="menu-item-heading">
283 |                 <span class="menu-item-name">Flavoured Water</span>
284 |                 <span class="menu-item-price">&#8377;50</span>
285 |               </h3>
286 |               <p class="menu-item-description">
287 |                 A variety of fruit-infused water that is both refreshing and fruity.
288 |               </p>
289 |               <p>
290 |                 <b>Options:</b> Blueberries, Cucumber, Green Apple, Lemon, Lime, Orange, Pineapple,
291 |                 Raspberries, Strawberries, and Watermelon.
292 |               </p>
293 |             </div>
294 |           </div>
295 |           <div class="menu-item">
296 |             <img
297 |               class="menu-item-image"
298 |               src="./images/drink2.png"
299 |               style="background-color: white"
300 |               alt="Water"
301 |             />
302 |             <div class="menu-item-text">
303 |               <h3 class="menu-item-heading">
304 |                 <span class="menu-item-name">Water</span>
305 |                 <span class="menu-item-price">&#8377;20</span>
306 |               </h3>
307 |               <p class="menu-item-description">Refreshing water in a bottle.</p>
308 |             </div>
309 |           </div>
310 |         </div>
311 |       </div>
312 |     </div>
313 | 
314 |     <!--------------- Contact Section --------------->
315 |     <div class="about-flex-wrapper" id="contact">
316 |       <h1 class="divider">Contact Us</h1>
317 |     </div>
318 |     <div class="contact-container">
319 |       <div>
320 |         <h2>Location</h2>
321 |         <hr class="hr-full" />
322 |         <br />
323 |         <div>
324 |           <iframe
325 |           src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3917.041904769626!2d78.07278077460535!3d10.96020725577781!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1698202748117!5m2!1sen!2sin"
326 |             class="img-map"
327 |             allowfullscreen=""
328 |             aria-hidden="false"
329 |             tabindex="0"
330 |           ></iframe>
331 |         </div>
332 |       </div>
333 | 
334 |       <div>
335 |         <h2>Contact Info</h2>
336 |         <hr class="hr-full" />
337 |         <p class="first-letter">
338 |           <b>Address:</b><br />
339 |           vaiyapuri nagar,5<sup>th</sup>cross,karur.
340 |         </p>
341 |         <p class="first-letter"><b>Phone Number:</b><br /> +91-9876543210</p>
342 |         <p class="first-letter">
343 |           <b>Email:</b><br />
344 |           dessertcafekarur@gmail.com
345 |         </p>
346 |         <br />
347 |         <hr class="hr-full" />
348 |         <table>
349 |           <tr>
350 |             <th colspan="2" class="first-letter">Hours of Operation</th>
351 |             <th></th>
352 |           </tr>
353 |           <tr>
354 |             <td>Monday - Thursday</td>
355 |             <td class="left-align">10:00am - 11:00pm</td>
356 |           </tr>
357 |           <tr>
358 |             <td>Friday &#38; Saturday</td>
359 |             <td class="left-align">10:00am - 1:00am</td>
360 |           </tr>
361 |           <tr>
362 |             <td>Sunday</td>
363 |             <td class="left-align">10:00am - 10:00pm</td>
364 |           </tr>
365 |         </table>
366 |       </div>
367 |     </div>
368 |     <div class="footer">
369 |       <p>&copy;2023 Dessert Caf&eacute;</p>
370 |     </div>
371 |     <script src="script.js"></script>
372 |   </body>
373 | </html>


--------------------------------------------------------------------------------