diff --git a/README.md b/README.md index 233819c..08f51cf 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,22 @@ -# pizzeriaWeb -Lavoro di Gruppo Corea, Mancuso, Talarico, Vampore +# Progetto "PizzeriaWeb" -Menager: Francesco -Menù pizze: Marco -Menù dolci: Giulia -Menù bevande: Roberto \ No newline at end of file +## Gruppo +Lavoro di Gruppo Corea, Mancuso, Talarico, Vampore + +Classe 5E A.S. 2025/2026 + +## Ruoli + +**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 \ No newline at end of file diff --git a/css/avanzato.css b/css/avanzato.css new file mode 100644 index 0000000..fab8073 --- /dev/null +++ b/css/avanzato.css @@ -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; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 6c66226..3bf6939 100644 --- a/css/style.css +++ b/css/style.css @@ -1,24 +1,130 @@ - - body { - background-color: hsl(202, 61%, 93%); - color: hsl(195, 100%, 13%); - margin: 0; - padding: 0; - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + background-color: var(--secondario); + color: var(--primario); + font-family: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 17px; } - -header { - +a { + 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 { - + display: flex; + align-items: center; } +.logo img { + height: 3rem; +} -.menu { +.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%; } \ No newline at end of file diff --git a/img/bevande.webp b/img/bevande.webp new file mode 100644 index 0000000..319a319 Binary files /dev/null and b/img/bevande.webp differ diff --git a/img/dolci.webp b/img/dolci.webp new file mode 100644 index 0000000..7ce0372 Binary files /dev/null and b/img/dolci.webp differ diff --git a/img/header.webp b/img/header.webp new file mode 100644 index 0000000..addf3aa Binary files /dev/null and b/img/header.webp differ diff --git a/img/logo-menu-black.png b/img/logo-menu-black.png new file mode 100644 index 0000000..3c13090 Binary files /dev/null and b/img/logo-menu-black.png differ diff --git a/img/logo-menu-white.png b/img/logo-menu-white.png new file mode 100644 index 0000000..4c474d7 Binary files /dev/null and b/img/logo-menu-white.png differ diff --git a/img/logo.jpg b/img/logo.jpg deleted file mode 100644 index 68a6d6f..0000000 Binary files a/img/logo.jpg and /dev/null differ diff --git a/img/menu/bibite/acqua-frizzante.webp b/img/menu/bibite/acqua-frizzante.webp new file mode 100644 index 0000000..e5e1de2 Binary files /dev/null and b/img/menu/bibite/acqua-frizzante.webp differ diff --git a/img/menu/bibite/acqua-naturale.webp b/img/menu/bibite/acqua-naturale.webp new file mode 100644 index 0000000..ab96ac6 Binary files /dev/null and b/img/menu/bibite/acqua-naturale.webp differ diff --git a/img/menu/bibite/birra-grande.webp b/img/menu/bibite/birra-grande.webp new file mode 100644 index 0000000..13dc5b6 Binary files /dev/null and b/img/menu/bibite/birra-grande.webp differ diff --git a/img/menu/bibite/birra-piccola.webp b/img/menu/bibite/birra-piccola.webp new file mode 100644 index 0000000..16733fb Binary files /dev/null and b/img/menu/bibite/birra-piccola.webp differ diff --git a/img/menu/bibite/cocacola-zero.webp b/img/menu/bibite/cocacola-zero.webp new file mode 100644 index 0000000..57864a2 Binary files /dev/null and b/img/menu/bibite/cocacola-zero.webp differ diff --git a/img/menu/bibite/cocacola.webp b/img/menu/bibite/cocacola.webp new file mode 100644 index 0000000..aa2ac57 Binary files /dev/null and b/img/menu/bibite/cocacola.webp differ diff --git a/img/menu/bibite/fanta.webp b/img/menu/bibite/fanta.webp new file mode 100644 index 0000000..a52e83b Binary files /dev/null and b/img/menu/bibite/fanta.webp differ diff --git a/img/menu/bibite/sprite.webp b/img/menu/bibite/sprite.webp new file mode 100644 index 0000000..283155f Binary files /dev/null and b/img/menu/bibite/sprite.webp differ diff --git a/img/pizze.webp b/img/pizze.webp new file mode 100644 index 0000000..5d72c7e Binary files /dev/null and b/img/pizze.webp differ diff --git a/index.html b/index.html index 83abbbc..4448599 100644 --- a/index.html +++ b/index.html @@ -5,47 +5,226 @@ - La Rondine + Menù La Rondine - + + + + + + + + + + + -
- +
-

Menù

+
+
+

Menù

+
+
+
+
-
+
+ +
+
+

Pizze

+
+
+
+ + + +
+
+ TITOLO QUI +
+
+

TITOLO QUI

+

DESCRIZIONE PRODOTTO QUI

+
+ € 6,00 +
+ + + +
+
+ +
+ +
+
+

Dolci

+
+
+
+ + + + +
+
+ TITOLO QUI +
+
+

TITOLO QUI

+

DESCRIZIONE PRODOTTO QUI

+
+ € 6,00 +
+ + + +
+
+ +
+ +
+
+

Bevande

+
+
+
+ + + + +
+
+ Acqua Naturale +
+
+

Acqua Naturale

+

Bottiglia da 1L

+
+ € 2,00 +
+ +
+
+ Acqua Frizzante +
+
+

Acqua Frizzante

+

Bottiglia da 1L

+
+ € 2,00 +
+ +
+
+ Coca Cola +
+
+

Coca Cola

+

Lattina da 0,35L

+
+ € 2,50 +
+ +
+
+ Coca Cola Zero +
+
+

Coca Cola Zero

+

Lattina da 0,35L

+
+ € 2,50 +
+ +
+
+ Fanta +
+
+

Fanta

+

Lattina da 0,35L

+
+ € 2,50 +
+ +
+
+ Sprite +
+
+

Sprite

+

Lattina da 0,35L

+
+ € 2,50 +
+ +
+
+ Birra alla spina +
+
+

Birra alla spina

+

Formato piccolo

+
+ € 3,50 +
+ +
+
+ Birra alla spina +
+
+

Birra alla spina

+

Formato grande

+
+ € 4,50 +
+ + + +
+
+ +
- -
- -
- - -
- -
- - + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..e80619a --- /dev/null +++ b/js/script.js @@ -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); \ No newline at end of file