francesco/pizzeriaWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Aggiunto gitignore, inserite ottimizzazioni grafiche e piccole funzioni extra

Browse Source
This commit is contained in:
Francesco Mancuso
2025-10-08 21:41:40 +02:00
parent 23ddc667fe
commit ee7ac0e9f9
7 changed files with 386 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
test.html

283
css/avanzato.css
View File

@@ -1,9 +1,38 @@
/**
* Style CSS Avanzato
* www.francescomancuso.it
*/
/******************
* ROOT
******************
*/
body,
p,
a,
span,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
button {
font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
: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);
--p-glass-dark: hsla(195, 100%, 13%, 0.95);
--s-glass: hsla(202, 61%, 93%, 0.55);
}
*,
@@ -56,11 +85,36 @@ a:target {
a:target::before {
content: "";
display: block;
height: 5rem;
margin-top: -5rem;
height: 6.8rem;
margin-top: -6.8rem;
pointer-events: none;
}
button {
background-color: var(--primario);
color: var(--secondario);
border-radius: 2rem;
padding: 0.5rem 0.6rem;
border: 1px solid;
font-size: 16px;
cursor: pointer;
font-weight: bold;
}
.buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: flex-start;
align-items: center;
}
/******************
* HEADER
******************
*/
header {
color: #fff;
padding: 0.5rem 1rem;
@@ -74,16 +128,16 @@ header {
transition: all 200ms ease-in-out;
user-select: none;
margin: 0 auto;
border-radius: 1rem;
max-width: 1400px;
border-radius: 1.5rem;
max-width: 1250px;
}
header.fixed {
background-color: var(--p-glass);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
top: 5px;
max-width: 1350px;
top: 0.5rem;
max-width: 1250px;
width: 95%;
}
@@ -92,20 +146,109 @@ header .container {
width: 100%;
}
.pagina .sezione .box .prezzo {
white-space: nowrap;
/******************
* PAGINA
******************
*/
.pagina {
overflow: hidden;
}
.pagina .sezione, .top {
.pagina .sezione,
.top {
user-select: none;
pointer-events: none;
}
.pagina .presentazione {
background-color: var(--primario);
color: #fff;
width: 95%;
margin: 4rem auto;
border-radius: 2rem;
background-image: url("https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/texture.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.pagina .presentazione .overlay {
background-color: var(--p-glass-dark);
border-radius: 2rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.pagina .presentazione h2 {
color: var(--secondario);
opacity: 0.9;
margin-bottom: 1rem;
}
.pagina .presentazione .testo {
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
text-wrap: balance;
}
.pagina .presentazione .buttons {
flex-grow: 1;
align-items: flex-end;
margin-top: 1rem;
}
.pagina .presentazione button {
background-color: var(--secondario);
color: var(--primario);
}
.pagina .presentazione img {
display: block;
margin: -0.5rem -3rem -0.5rem 0;
width: 16rem;
height: auto;
pointer-events: none;
animation: gira 15000ms linear 50ms infinite forwards;
}
@keyframes gira {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media only screen and (max-width: 700px) {
.pagina .presentazione .overlay {
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
}
.pagina .presentazione img {
margin: 0rem 0rem -3rem 0;
}
}
/******************
* GRIGLIA
******************
*/
.pagina .sezione .griglia {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 1rem;
margin-top: 1rem;
margin-top: 2rem;
}
@media only screen and (max-width: 1024px) {
@@ -132,17 +275,22 @@ header .container {
}
}
.pagina .sezione .titolo {
background-size: cover;
border: 1px solid var(--primario);
border-radius: 1rem;
border-radius: 1.5rem;
width: 100%;
margin: 0 auto;
font-size: 1.2rem;
}
.pagina .sezione .titolo .overlay {
background-color: var(--s-glass);
padding: 1rem;
border-radius: 1rem;
padding: 1.5rem 1rem;
border-radius: 1.5rem;
text-align: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.pagina .sezione.pizze .titolo {
@@ -160,8 +308,111 @@ header .container {
background-position: 50% 50%;
}
/******************
* BOX
******************
*/
.pagina .sezione .box .prezzo {
white-space: nowrap;
}
.pagina .sezione .box .immagine {
display: flex;
align-items: center;
flex-grow: 1;
pointer-events: none;
}
.pagina .sezione .box {
transition: all 200ms ease-in-out;
cursor: pointer;
}
@media only screen and (min-width: 601px) {
.pagina .sezione .box:hover,
.pagina .sezione .box:focus {
transform: scale(1.08) rotate(4deg) translateY(-1.48rem);
z-index: 1;
}
}
@media only screen and (max-width: 600px) {
.pagina .sezione .box:hover {
transform: translateY(-0.6rem);
z-index: 1;
}
}
/******************
* ELEMENTI
******************
*/
.totop {
border: 0;
border-radius: 2rem;
color: var(--secondario);
background-color: var(--scuro);
padding: 0.55rem;
padding-bottom: 0.5rem;
font-size: 1.3rem;
line-height: 1;
position: fixed;
bottom: 4rem;
right: 1.5rem;
z-index: 2;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 200ms ease-in-out;
}
.totop.active {
opacity: 1;
visibility: visible;
}
.loader {
position: fixed;
top: 0;
left: 0;
z-index: 9;
background-color: hsla(195, 100%, 13%, 1);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
width: 100%;
height: 100%;
opacity: 1;
visibility: visible;
transition: all 200ms ease-in-out;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.loader.ready {
opacity: 0;
visibility: hidden;
}
.loader img {
width: 14rem;
height: auto;
animation: pulse 1000ms linear 50ms infinite forwards;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}

55
css/style.css
View File

@@ -1,8 +1,13 @@
/******************
* BODY E STRUTTURA
******************
*/
body {
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;
font-size: 16px;
line-height: 1.3;
}
a {
@@ -11,10 +16,15 @@ a {
.container {
width: 90%;
max-width: 1300px;
max-width: 1200px;
margin: 0 auto;
}
/******************
* HEADER
******************
*/
header .container,
.menu,
.menu ul {
@@ -26,10 +36,6 @@ header .container,
align-self: center;
}
.menu ul {
gap: 1.5rem;
}
.logo {
display: flex;
align-items: center;
@@ -42,31 +48,52 @@ header .container,
.menu ul {
list-style-type: none;
text-align: center;
gap: 1.5rem;
}
header .menu a {
color: #fff;
font-weight: 300;
font-weight: 600;
text-decoration: none;
}
/******************
* SEZIONE TOP
******************
*/
.top {
background-image: url("https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/header.webp");
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.top .overlay {
padding: 6rem 0;
padding: 7rem 0;
padding-top: 11rem;
background-color: var(--p-glass);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
color: #fff;
text-align: center;
font-size: 120%;
}
/******************
* SEZIONI PAGINA
******************
*/
.pagina .sezione {
margin: 4rem 0;
}
/******************
* BOX
******************
*/
.pagina .sezione .box {
border: 1px solid var(--primario);
border-radius: 1rem;
@@ -76,7 +103,10 @@ header .menu a {
flex-wrap: nowrap;
justify-content: flex-start;
align-self: center;
background-color: #fff;
background-color: var(--p-glass);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
}
.pagina .sezione .box .testo,
@@ -106,6 +136,11 @@ header .menu a {
font-size: 120%;
}
/******************
* ELEMENTI
******************
*/
footer {
background-color: var(--primario);
color: var(--secondario);

BIN
img/pizza.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 173 KiB

1
img/texture.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

45
index.html
View File

@@ -16,12 +16,16 @@
<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">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/c2497a668c.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" href="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/favicon/favicon.svg" />
<link rel="icon" type="image/png"
href="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml"
href="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/favicon/favicon.svg" />
<link rel="shortcut icon" href="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/favicon/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="180x180"
href="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/favicon/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="La Rondine Menù" />
</head>
@@ -29,7 +33,8 @@
<header id="header">
<div class="container">
<div class="logo">
<a href="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/"><img src="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/logo-menu-white.png"></a>
<a href="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/"><img
src="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/logo-menu-white.png"></a>
</div>
<div class="menu">
@@ -59,6 +64,30 @@
<div class="pagina">
<div class="container">
<div class="sezione presentazione">
<div class="overlay">
<div class="testo">
<h2>Gusto autentico e locale</h2>
<p>
Una selezione curata per stupire: impasti croccanti, ingredienti freschi e abbinamenti
pensati per lasciare il segno. Scegli fra una selezione di pizze classice e gourmet
esclusive!
</p>
<div class="buttons">
<a href="#pizze"><button class="main">
<i class="fa-solid fa-utensils"></i> Vai alle pizze
</button></a>
<a href="https://www.francescomancuso.it/contatti/" target="_blank"><button class="main">
<i class="fa-solid fa-phone"></i> Contattaci
</button></a>
</div>
</div>
<div class="pizza">
<img src="img/pizza.webp" alt="Pizza">
</div>
</div>
</div>
<div class="sezione pizze">
<a name="pizze"></a>
<div class="titolo">
@@ -223,6 +252,8 @@
</div>
</div>
<button class="totop" id="totop"><i class="fa-solid fa-chevron-up"></i></button>
<footer>
<div class="container">
<p>Gruppo di lavoro Corea, Talarico, Vampore, Mancuso</p>
@@ -232,6 +263,10 @@
</div>
</footer>
<div class="loader" id="loader">
<img src="https://ctf.francescomancuso.it/tpsit/pizzeriaWeb/img/logo-menu-white.png" alt="Caricamento...">
</div>
</body>
</html>

33
js/script.js
View File

@@ -8,4 +8,35 @@ function scrollHeader() {
}
window.addEventListener("scroll", scrollHeader);
window.addEventListener("load", scrollHeader);
window.addEventListener("load", scrollHeader);
function scrollToTop() {
const b = document.getElementById("totop");
if (window.scrollY > 100) {
b.classList.add("active");
} else {
b.classList.remove("active");
}
}
window.addEventListener("scroll", scrollToTop);
window.addEventListener("load", scrollToTop);
document.getElementById("totop").addEventListener("click", () => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
})
function preloader() {
const l = document.getElementById("loader");
setTimeout(() => {
l.classList.add("ready");
}, 1500);
}
window.addEventListener("load", preloader);
setTimeout(() => {
const l = document.getElementById("loader");
l.classList.add("ready");
}, 10000);