Skip to content

Commit c8d5e73

Browse files
Max131Max131
committed
Added food demo
1 parent bb834ee commit c8d5e73

File tree

8 files changed

+192
-0
lines changed

8 files changed

+192
-0
lines changed

‎demo/food/food.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@charset "utf-8";
2+
3+
.hero.is-fullheight.has-carousel .slider .image{
4+
height:100%!important;
5+
}
6+
7+
.hero.is-fullheight.has-carousel .slider .image img{
8+
height: 100%!important;
9+
object-fit: cover;
10+
object-position: center;
11+
}
12+
13+
.slider-caption{
14+
position: absolute;
15+
top: 4rem;
16+
right: 50%;
17+
transform: translateX(50%);
18+
width: 20rem;
19+
background-color: black;
20+
opacity: 0.6;
21+
padding: 1rem;
22+
border-radius: 0.5rem;
23+
text-align: right;
24+
height: 80vh;
25+
overflow: auto;
26+
}
27+
28+
.order-button{
29+
position: fixed;
30+
bottom: 1rem;
31+
left: 1rem;
32+
border-radius: 50%;
33+
box-shadow: 0 0 2px tomato;
34+
}
35+
36+
.order-button:hover{
37+
cursor: pointer;
38+
}
39+
40+
.order-button .icon{
41+
padding: 2rem;
42+
}
43+
44+
@media screen and (min-width: 769px){
45+
.slider-caption{
46+
right: 3rem;
47+
transform: translateX(0);
48+
height: 90vh;
49+
}
50+
}

‎demo/food/food.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
bulmaCarousel.attach('.hero-carousel', {
2+
navigationKeys: true,
3+
loop: true,
4+
infinite: true,
5+
autoplay: true,
6+
pauseOnHover: false,
7+
autoplaySpeed: 5000,
8+
slidesToShow: 1
9+
});
10+
11+
document.addEventListener('DOMContentLoaded', () => {
12+
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
13+
if ($navbarBurgers.length > 0) {
14+
$navbarBurgers.forEach( el => {
15+
el.addEventListener('click', () => {
16+
const target = el.dataset.target;
17+
const $target = document.getElementById(target);
18+
el.classList.toggle('is-active');
19+
$target.classList.toggle('is-active');
20+
});
21+
});
22+
}
23+
});

‎demo/food/images/churros.jpg‎

380 KB
Loading

‎demo/food/images/hamburger-unsplash.jpg‎

383 KB
Loading

‎demo/food/images/logo-tiny.png‎

3.95 KB
Loading

‎demo/food/images/logo.png‎

97.6 KB
Loading

‎demo/food/images/pizza.jpg‎

506 KB
Loading

‎demo/food/index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/css/bulma-carousel.min.css">
8+
<link rel="stylesheet" href="food.css">
9+
<link rel="shortcut icon" href="images/logo-tiny.png" type="image/png">
10+
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
11+
<title>Restaurant Bon Appétit</title>
12+
</head>
13+
<body>
14+
<section class="hero is-fullheight has-carousel">
15+
<div class="hero-carousel">
16+
17+
<div class="slider">
18+
<figure class="image">
19+
<img src="images/hamburger-unsplash.jpg" alt="">
20+
<figcaption class="slider-caption content is-medium has-text-white">
21+
<h2 class="title has-text-warning">Hamburgesa</h2>
22+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, vel?</p>
23+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
24+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, eum optio!</p>
25+
<p>Lorem ipsum dolor sit amet.</p>
26+
<p>$ 45.99</p>
27+
</figcaption>
28+
</figure>
29+
</div>
30+
31+
<div class="slider">
32+
<figure class="image">
33+
<img src="images/pizza.jpg" alt="">
34+
<figcaption class="slider-caption content is-medium has-text-white">
35+
<h2 class="title has-text-warning">Pizza</h2>
36+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, vel?</p>
37+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
38+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, eum optio!</p>
39+
<p>Lorem ipsum dolor sit amet.</p>
40+
<p>$ 98.50</p>
41+
</figcaption>
42+
</figure>
43+
</div>
44+
45+
<div class="slider">
46+
<figure class="image">
47+
<img src="images/churros.jpg" alt="">
48+
<figcaption class="slider-caption content is-medium has-text-white">
49+
<h2 class="title has-text-warning">Postres</h2>
50+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, vel?</p>
51+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
52+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, eum optio!</p>
53+
<p>Lorem ipsum dolor sit amet.</p>
54+
<p>$ 25.00</p>
55+
</figcaption>
56+
</figure>
57+
</div>
58+
59+
</div>
60+
61+
62+
<div class="hero-head">
63+
64+
<nav class="navbar is-dark">
65+
<div class="container">
66+
<div class="navbar-brand">
67+
<div class="navbar-item">
68+
<img src="images/logo.png" alt="">
69+
</div>
70+
<a class="navbar-item is-hidden-tablet has-text-white"><span class="icon has-text-danger"><i class="fas fa-utensils"></i></span>Ordena Ya!<span></span></a>
71+
<div class="navbar-burger" data-target="navMenu">
72+
<span aria-hidden="true"></span>
73+
<span aria-hidden="true"></span>
74+
<span aria-hidden="true"></span>
75+
</div>
76+
</div>
77+
<div class="navbar-menu" id="navMenu">
78+
<div class="navbar-start">
79+
<a class="navbar-item">Desayunos</a>
80+
<a class="navbar-item">Comidas</a>
81+
<a class="navbar-item">Cenas</a>
82+
</div>
83+
<div class="navbar-end">
84+
<span class="navbar-item">
85+
<a class="button is-danger">
86+
<span class="icon"><i class="fas fa-utensils"></i></span><span>Ordena Ya!</span>
87+
</a>
88+
</span>
89+
</div>
90+
</div>
91+
</div>
92+
</nav>
93+
94+
</div>
95+
96+
<div class="hero-body">
97+
<div class="container">
98+
<div class="columns is-hidden-mobile content is-large has-text-white has-text-centered">
99+
<div class="column is-5">
100+
<figure class="image is-inline">
101+
<img src="images/logo.png" alt="">
102+
</figure>
103+
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui ex explicabo inventore eum cum veniam!</p>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
109+
<div class="hero-foot">
110+
111+
</div>
112+
</section>
113+
<div class="order-button has-background-danger">
114+
<span class="icon has-text-white"><i class="fas fa-comment fa-2x"></i></span>
115+
</div>
116+
<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/js/bulma-carousel.min.js"></script>
117+
<script src="food.js"></script>
118+
</body>
119+
</html>

0 commit comments

Comments
 (0)