Skip to content

Commit e7d9a8e

Browse files
input-apiinput-api
committed
Add season menu
1 parent 90f29c5 commit e7d9a8e

File tree

8 files changed

+175
-5
lines changed

8 files changed

+175
-5
lines changed

‎css/style.css‎

Lines changed: 26 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 101 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<h1 class="title__text">TODAY'S COFFEE SHOP</h1>
1919
</div>
2020

21-
<div class="menu block">
21+
<div class="menu block" id="main-menu">
2222
<h2 class="menu__title title">menu</h2>
2323
<div class="menu__list">
2424
<div class="menu-item">
@@ -233,6 +233,106 @@ <h3 class="menu-item__title">ice Cocoa</h3>
233233
</div>
234234
</div>
235235
</div>
236+
<div class="seasonal-menu block hidden" id="seasonal-menu">
237+
<h2 class="menu__title title">seasonal menu</h2>
238+
<div class="menu__list">
239+
<div class="menu-item">
240+
<div class="menu-item__image-block">
241+
<img src="source/img/1.png" alt="Latte" class="menu-item__image">
242+
</div>
243+
<div class="menu-item__info">
244+
<div class="row">
245+
<h3 class="menu-item__title">Latte</h3>
246+
<p class="menu-item__price">4$</p>
247+
</div>
248+
<div class="menu-item__details">
249+
<p class="menu-item__size">450ml</p>
250+
<p class="menu-item__about">Lorem, Ipsum, is simply, dummy text, of the printing, and typesetting, industry.s</p>
251+
</div>
252+
</div>
253+
</div>
254+
<div class="menu-item">
255+
<div class="menu-item__image-block">
256+
<img src="source/img/1.png" alt="Ice Latte" class="menu-item__image">
257+
</div>
258+
<div class="menu-item__info">
259+
<div class="row">
260+
<h3 class="menu-item__title">ice Latte</h3>
261+
<p class="menu-item__price">4$</p>
262+
</div>
263+
<div class="menu-item__details">
264+
<p class="menu-item__size">355ml</p>
265+
<p class="menu-item__about">Lorem, Ipsum, is simply, dummy text, of the printing, and typesetting, industry.s</p>
266+
</div>
267+
</div>
268+
</div>
269+
<div class="menu-item">
270+
<div class="menu-item__image-block">
271+
<img src="source/img/1.png" alt="Latte" class="menu-item__image">
272+
</div>
273+
<div class="menu-item__info">
274+
<div class="row">
275+
<h3 class="menu-item__title">Latte</h3>
276+
<p class="menu-item__price">4$</p>
277+
</div>
278+
<div class="menu-item__details">
279+
<p class="menu-item__size">450ml</p>
280+
<p class="menu-item__about">Lorem, Ipsum, is simply, dummy text, of the printing, and typesetting, industry.s</p>
281+
</div>
282+
</div>
283+
</div>
284+
<div class="menu-item">
285+
<div class="menu-item__image-block">
286+
<img src="source/img/1.png" alt="Latte" class="menu-item__image">
287+
</div>
288+
<div class="menu-item__info">
289+
<div class="row">
290+
<h3 class="menu-item__title">Latte</h3>
291+
<p class="menu-item__price">4$</p>
292+
</div>
293+
<div class="menu-item__details">
294+
<p class="menu-item__size">450ml</p>
295+
<p class="menu-item__about">Lorem, Ipsum, is simply, dummy text, of the printing, and typesetting, industry.s</p>
296+
</div>
297+
</div>
298+
</div>
299+
<div class="menu-item">
300+
<div class="menu-item__image-block">
301+
<img src="source/img/1.png" alt="Latte" class="menu-item__image">
302+
</div>
303+
<div class="menu-item__info">
304+
<div class="row">
305+
<h3 class="menu-item__title">Latte</h3>
306+
<p class="menu-item__price">4$</p>
307+
</div>
308+
<div class="menu-item__details">
309+
<p class="menu-item__size">450ml</p>
310+
<p class="menu-item__about">Lorem, Ipsum, is simply, dummy text, of the printing, and typesetting, industry.s</p>
311+
</div>
312+
</div>
313+
</div>
314+
<div class="menu-item">
315+
<div class="menu-item__image-block">
316+
<img src="source/img/1.png" alt="Latte" class="menu-item__image">
317+
</div>
318+
<div class="menu-item__info">
319+
<div class="row">
320+
<h3 class="menu-item__title">Latte</h3>
321+
<p class="menu-item__price">4$</p>
322+
</div>
323+
<div class="menu-item__details">
324+
<p class="menu-item__size">450ml</p>
325+
<p class="menu-item__about">Lorem, Ipsum, is simply, dummy text, of the printing, and typesetting, industry.s</p>
326+
</div>
327+
</div>
328+
</div>
329+
</div>
330+
</div>
331+
332+
<div class="button-block">
333+
<button class="button" id="change-menu">Open seasonal menu</button>
334+
</div>
335+
236336
<div class="syrups block">
237337
<h2 class="syrups__title title">Syrups</h2>
238338
<ul class="syrups__list">

‎js/main.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,17 @@ menuItems.forEach(function(menuItem) {
44
menuItem.addEventListener('click', function() {
55
menuItem.classList.toggle('details');
66
});
7+
});
8+
9+
const mainManuBlock = document.querySelector('#main-menu');
10+
const seasonalManuBlock = document.querySelector('#seasonal-menu');
11+
const controlButton = document.querySelector('#change-menu');
12+
13+
controlButton.addEventListener('click', function(){
14+
if (seasonalManuBlock.classList.contains('hidden')){
15+
seasonalManuBlock.classList.remove('hidden');
16+
} else {
17+
seasonalManuBlock.classList.add('hidden');
18+
}
19+
mainManuBlock.classList.toggle('hidden');
720
});

‎scss/seasonal-menu/_seasonal-menu-media.scss‎

Whitespace-only changes.

‎scss/seasonal-menu/seasonal-menu.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.seasonal-menu {
2+
margin-top: 40px;
3+
padding-top: 50px;
4+
.menu__title {
5+
@extend .menu__title
6+
}
7+
}

‎scss/style.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,34 @@
4242
}
4343
}
4444
@import "menu/menu";
45+
.button-block {
46+
width: 100%;
47+
text-align: center;
48+
.button {
49+
background-color: #fff;
50+
border-radius: 20px;
51+
border: 3px solid $color_text;
52+
padding: 10px 10px;
53+
margin: 20px auto;
54+
text-align: center;
55+
font-family: "Montserrat", serif;
56+
font-weight: 500;
57+
font-size: 25px;
58+
&:hover {
59+
background-color: $color_about;
60+
border: 3px solid $color_about;
61+
color: #fff
62+
}
63+
}
64+
}
65+
@import "seasonal-menu/seasonal-menu";
4566
@import "syrups/syrups";
67+
.show {
68+
display: block;
69+
}
70+
.hidden {
71+
display: none;
72+
}
4673
}
4774
.row {
4875
display: flex;
@@ -63,4 +90,5 @@
6390
}
6491

6592
@import "menu/menu-media";
93+
@import "seasonal-menu/seasonal-menu-media";
6694
@import "syrups/syrups-media";

‎scss/syrups/syrups.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.syrups {
2-
margin-top: 60px;
32
padding-top: 30px;
43
&__title {
54
font-size: 150px !important;

‎source/img/bg_forest.jpg‎

-196 KB
Binary file not shown.

0 commit comments

Comments
 (0)