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 @@