diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6d70cd0 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +test.html \ No newline at end of file diff --git a/css/avanzato.css b/css/avanzato.css index c186cad..1159973 100644 --- a/css/avanzato.css +++ b/css/avanzato.css @@ -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); + } } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 6f5315f..4d64c97 100644 --- a/css/style.css +++ b/css/style.css @@ -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); diff --git a/img/pizza.webp b/img/pizza.webp new file mode 100644 index 0000000..8b684c3 Binary files /dev/null and b/img/pizza.webp differ diff --git a/img/texture.svg b/img/texture.svg new file mode 100644 index 0000000..edee2b6 --- /dev/null +++ b/img/texture.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 0fdbd03..1b46825 100644 --- a/index.html +++ b/index.html @@ -16,12 +16,16 @@ - + - - + + - + @@ -29,7 +33,8 @@