Caricamento template
This commit is contained in:
25
README.md
25
README.md
@@ -1,7 +1,22 @@
|
|||||||
# pizzeriaWeb
|
# Progetto "PizzeriaWeb"
|
||||||
|
|
||||||
|
## Gruppo
|
||||||
Lavoro di Gruppo Corea, Mancuso, Talarico, Vampore
|
Lavoro di Gruppo Corea, Mancuso, Talarico, Vampore
|
||||||
|
|
||||||
Menager: Francesco
|
Classe 5E A.S. 2025/2026
|
||||||
Menù pizze: Marco
|
|
||||||
Menù dolci: Giulia
|
## Ruoli
|
||||||
Menù bevande: Roberto
|
|
||||||
|
**Menù pizze**: Marco
|
||||||
|
|
||||||
|
**Menù dolci**: Giulia
|
||||||
|
|
||||||
|
**Menù bevande**: Roberto / Francesco
|
||||||
|
|
||||||
|
**Project Manager**: Francesco
|
||||||
|
|
||||||
|
## Descrizione
|
||||||
|
|
||||||
|
Menù online realizzato con l'utilizzo collaborativo di Git con repository gestita in cloud da GitHub.
|
||||||
|
|
||||||
|
Utilizzo di HTML + CSS + JS
|
||||||
167
css/avanzato.css
Normal file
167
css/avanzato.css
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
:root {
|
||||||
|
--primario: hsl(195, 100%, 13%);
|
||||||
|
--scuro: hsl(195, 100%, 8%);
|
||||||
|
--secondario: hsl(202, 61%, 93%);
|
||||||
|
--p-glass: hsla(195, 100%, 13%, 0.75);
|
||||||
|
--s-glass: hsla(202, 61%, 93%, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (-moz-appearance:none) {
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
scrollbar-color: var(--scuro) var(--secondario);
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-width: 5px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--secondario);
|
||||||
|
padding: 1px
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--scuro);
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: all 200ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--scuro);
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:target {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:target::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
height: 5rem;
|
||||||
|
margin-top: -5rem;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 3;
|
||||||
|
transition: all 200ms ease-in-out;
|
||||||
|
user-select: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 1rem;
|
||||||
|
max-width: 1400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.fixed {
|
||||||
|
background-color: var(--p-glass);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
top: 5px;
|
||||||
|
max-width: 1350px;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .container {
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione .box .prezzo {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione, .top {
|
||||||
|
user-select: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione .griglia {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.pagina .sezione .griglia {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 760px) {
|
||||||
|
.pagina .sezione .griglia {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.pagina .sezione .griglia {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 380px) {
|
||||||
|
header {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.pagina .sezione .titolo {
|
||||||
|
background-size: cover;
|
||||||
|
border: 1px solid var(--primario);
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione .titolo .overlay {
|
||||||
|
background-color: var(--s-glass);
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione.pizze .titolo {
|
||||||
|
background-image: url("/img/pizze.webp");
|
||||||
|
background-position: 50% 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione.dolci .titolo {
|
||||||
|
background-image: url("/img/dolci.webp");
|
||||||
|
background-position: 50% 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione.bevande .titolo {
|
||||||
|
background-image: url("/img/bevande.webp");
|
||||||
|
background-position: 50% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione .box .immagine {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
134
css/style.css
134
css/style.css
@@ -1,24 +1,130 @@
|
|||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: hsl(202, 61%, 93%);
|
background-color: var(--secondario);
|
||||||
color: hsl(195, 100%, 13%);
|
color: var(--primario);
|
||||||
margin: 0;
|
font-family: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
padding: 0;
|
font-size: 17px;
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
header {
|
color: var(--primario);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 1300px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .container,
|
||||||
|
.menu,
|
||||||
|
.menu ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul {
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
.menu {
|
height: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul {
|
||||||
|
list-style-type: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .menu a {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 300;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
background-image: url("/img/header.webp");
|
||||||
|
}
|
||||||
|
|
||||||
|
.top .overlay {
|
||||||
|
padding: 6rem 0;
|
||||||
|
padding-top: 11rem;
|
||||||
|
background-color: var(--p-glass);
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione {
|
||||||
|
margin: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione .box {
|
||||||
|
border: 1px solid var(--primario);
|
||||||
|
border-radius: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-self: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione .box .testo,
|
||||||
|
.pagina .sezione .box .prezzo {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione .box img {
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 1rem 1rem 0 0;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione .box .testo {
|
||||||
|
flex-grow: 4;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagina .sezione .box .prezzo {
|
||||||
|
width: 100%;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: var(--primario);
|
||||||
|
color: var(--secondario);
|
||||||
|
padding: 1rem 0;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 200;
|
||||||
|
font-size: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .container {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer i {
|
||||||
|
font-size: 90%;
|
||||||
}
|
}
|
||||||
BIN
img/bevande.webp
Normal file
BIN
img/bevande.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
img/dolci.webp
Normal file
BIN
img/dolci.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
img/header.webp
Normal file
BIN
img/header.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
BIN
img/logo-menu-black.png
Normal file
BIN
img/logo-menu-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
img/logo-menu-white.png
Normal file
BIN
img/logo-menu-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
img/logo.jpg
BIN
img/logo.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
BIN
img/menu/bibite/acqua-frizzante.webp
Normal file
BIN
img/menu/bibite/acqua-frizzante.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
img/menu/bibite/acqua-naturale.webp
Normal file
BIN
img/menu/bibite/acqua-naturale.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
BIN
img/menu/bibite/birra-grande.webp
Normal file
BIN
img/menu/bibite/birra-grande.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
img/menu/bibite/birra-piccola.webp
Normal file
BIN
img/menu/bibite/birra-piccola.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
img/menu/bibite/cocacola-zero.webp
Normal file
BIN
img/menu/bibite/cocacola-zero.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
img/menu/bibite/cocacola.webp
Normal file
BIN
img/menu/bibite/cocacola.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
img/menu/bibite/fanta.webp
Normal file
BIN
img/menu/bibite/fanta.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
img/menu/bibite/sprite.webp
Normal file
BIN
img/menu/bibite/sprite.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
img/pizze.webp
Normal file
BIN
img/pizze.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
209
index.html
209
index.html
@@ -5,47 +5,226 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>La Rondine</title>
|
<title>Menù La Rondine</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="/css/style.css" >
|
<meta name="author" content="Francesco Mancuso">
|
||||||
|
<meta name="theme-color" content="#003242" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/css/style.css">
|
||||||
|
<link rel="stylesheet" href="/css/avanzato.css">
|
||||||
|
<script src="/js/script.js" defer></script>
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://kit.fontawesome.com/c2497a668c.js" crossorigin="anonymous"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header id="header">
|
||||||
|
<div class="container">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img src="/img/logo.jpg">
|
<a href="/"><img src="/img/logo-menu-white.png"></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<ul>
|
<ul>
|
||||||
<li>Home</li>
|
<a href="#pizze">
|
||||||
<li>Pizze</li>
|
<li><i class="fa-solid fa-pizza-slice"></i> Pizze</li>
|
||||||
<li>Dolci</li>
|
</a>
|
||||||
<li>Bevande</li>
|
<a href="#dolci">
|
||||||
|
<li><i class="fa-solid fa-ice-cream"></i> Dolci</li>
|
||||||
|
</a>
|
||||||
|
<a href="#bevande">
|
||||||
|
<li><i class="fa-solid fa-martini-glass-citrus"></i> Bevande</li>
|
||||||
|
</a>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="top">
|
<div class="top">
|
||||||
|
<div class="overlay">
|
||||||
|
<div class="container">
|
||||||
<h1>Menù</h1>
|
<h1>Menù</h1>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="pizze">
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="pagina">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
<div class="dolci">
|
<div class="sezione pizze">
|
||||||
|
<a name="pizze"></a>
|
||||||
|
<div class="titolo">
|
||||||
|
<div class="overlay">
|
||||||
|
<h2>Pizze</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="griglia">
|
||||||
|
|
||||||
|
<!-- INSERISCI PIZZE QUI -->
|
||||||
|
<!-- duplica l'elemento box con copia-incolla e modifica i dati -->
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<div class="immagine">
|
||||||
|
<img src="/img/pizze.webp" alt="TITOLO QUI">
|
||||||
|
</div>
|
||||||
|
<div class="testo">
|
||||||
|
<h3>TITOLO QUI</h3>
|
||||||
|
<p>DESCRIZIONE PRODOTTO QUI</p>
|
||||||
|
</div>
|
||||||
|
<span class="prezzo">€ 6,00</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- FINE SEZIONE PIZZE -->
|
||||||
<div class="bevande">
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sezione dolci">
|
||||||
|
<a name="dolci"></a>
|
||||||
|
<div class="titolo">
|
||||||
|
<div class="overlay">
|
||||||
|
<h2>Dolci</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="griglia">
|
||||||
|
|
||||||
|
<!-- INSERISCI DOLCI QUI -->
|
||||||
|
<!-- duplica l'elemento box con copia-incolla e modifica i dati -->
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<div class="immagine">
|
||||||
|
<img src="/img/pizze.webp" alt="TITOLO QUI">
|
||||||
|
</div>
|
||||||
|
<div class="testo">
|
||||||
|
<h3>TITOLO QUI</h3>
|
||||||
|
<p>DESCRIZIONE PRODOTTO QUI</p>
|
||||||
|
</div>
|
||||||
|
<span class="prezzo">€ 6,00</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FINE SEZIONE DOLCI -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sezione bevande">
|
||||||
|
<a name="bevande"></a>
|
||||||
|
<div class="titolo">
|
||||||
|
<div class="overlay">
|
||||||
|
<h2>Bevande</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="griglia">
|
||||||
|
|
||||||
|
<!-- INSERISCI BIBITE QUI -->
|
||||||
|
<!-- duplica l'elemento box con copia-incolla e modifica i dati -->
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<div class="immagine">
|
||||||
|
<img src="/img/menu/bibite/acqua-naturale.webp" alt="Acqua Naturale">
|
||||||
|
</div>
|
||||||
|
<div class="testo">
|
||||||
|
<h3>Acqua Naturale</h3>
|
||||||
|
<p>Bottiglia da 1L</p>
|
||||||
|
</div>
|
||||||
|
<span class="prezzo">€ 2,00</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<div class="immagine">
|
||||||
|
<img src="/img/menu/bibite/acqua-frizzante.webp" alt="Acqua Frizzante">
|
||||||
|
</div>
|
||||||
|
<div class="testo">
|
||||||
|
<h3>Acqua Frizzante</h3>
|
||||||
|
<p>Bottiglia da 1L</p>
|
||||||
|
</div>
|
||||||
|
<span class="prezzo">€ 2,00</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<div class="immagine">
|
||||||
|
<img src="/img/menu/bibite/cocacola.webp" alt="Coca Cola">
|
||||||
|
</div>
|
||||||
|
<div class="testo">
|
||||||
|
<h3>Coca Cola</h3>
|
||||||
|
<p>Lattina da 0,35L</p>
|
||||||
|
</div>
|
||||||
|
<span class="prezzo">€ 2,50</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<div class="immagine">
|
||||||
|
<img src="/img/menu/bibite/cocacola-zero.webp" alt="Coca Cola Zero">
|
||||||
|
</div>
|
||||||
|
<div class="testo">
|
||||||
|
<h3>Coca Cola Zero</h3>
|
||||||
|
<p>Lattina da 0,35L</p>
|
||||||
|
</div>
|
||||||
|
<span class="prezzo">€ 2,50</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<div class="immagine">
|
||||||
|
<img src="/img/menu/bibite/fanta.webp" alt="Fanta">
|
||||||
|
</div>
|
||||||
|
<div class="testo">
|
||||||
|
<h3>Fanta</h3>
|
||||||
|
<p>Lattina da 0,35L</p>
|
||||||
|
</div>
|
||||||
|
<span class="prezzo">€ 2,50</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<div class="immagine">
|
||||||
|
<img src="/img/menu/bibite/sprite.webp" alt="Sprite">
|
||||||
|
</div>
|
||||||
|
<div class="testo">
|
||||||
|
<h3>Sprite</h3>
|
||||||
|
<p>Lattina da 0,35L</p>
|
||||||
|
</div>
|
||||||
|
<span class="prezzo">€ 2,50</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<div class="immagine">
|
||||||
|
<img src="/img/menu/bibite/birra-piccola.webp" alt="Birra alla spina">
|
||||||
|
</div>
|
||||||
|
<div class="testo">
|
||||||
|
<h3>Birra alla spina</h3>
|
||||||
|
<p>Formato piccolo</p>
|
||||||
|
</div>
|
||||||
|
<span class="prezzo">€ 3,50</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<div class="immagine">
|
||||||
|
<img src="/img/menu/bibite/birra-grande.webp" alt="Birra alla spina">
|
||||||
|
</div>
|
||||||
|
<div class="testo">
|
||||||
|
<h3>Birra alla spina</h3>
|
||||||
|
<p>Formato grande</p>
|
||||||
|
</div>
|
||||||
|
<span class="prezzo">€ 4,50</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FINE SEZIONE BIBITE -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>Gruppo di lavoro Corea, Talarico, Vampore, Mancuso</p>
|
||||||
|
<p>Classe 5E A.S. 2025/2026</p>
|
||||||
|
<p><i>Server at <a href="https://www.francescomancuso.it" target="_blank">www.francescomancuso.it</a> on Port 443</i></p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
11
js/script.js
Normal file
11
js/script.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
function scrollHeader() {
|
||||||
|
const h = document.getElementById("header");
|
||||||
|
if (window.scrollY > 0) {
|
||||||
|
h.classList.add("fixed");
|
||||||
|
} else {
|
||||||
|
h.classList.remove("fixed");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("scroll", scrollHeader);
|
||||||
|
window.addEventListener("load", scrollHeader);
|
||||||
Reference in New Issue
Block a user