#First {
height: 100vh; /* Altezza pari all'altezza del viewport */
width: 100vw; /* Larghezza pari alla larghezza del viewport */
overflow: hidden; /* Nasconde eventuali overflow di contenuto */
}
.container-gif {
height: calc(-2% + 100vh);
width: 98%;
margin: 1% auto;
padding: 1%;
overflow: hidden;
}
.gif {
width: 100%; /* Larghezza pari al 100% del contenitore */
height: 100%; /* Altezza pari al 100% del contenitore */
object-fit: cover; /* Mantiene il rapporto d'aspetto originale dell'immagine */
margin: 0 auto; /* Centraggio orizzontale dell'immagine */
border: 0.5px solid white; /* Bordo solido bianco di 0.5px */
}
/*Text Header*/
.text-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
padding: 20px;
box-sizing: border-box;
text-align: center;
z-index: 1;
pointer-events: none;
}
#First h1 {
font-size: 70pt;
margin-bottom: 10px;
color: white;
font-weight: 100;
text-shadow: 4px 4px 14px rgba(0, 0, 0, 0.36);
font-family: "Montserrat" !important;
}
#First p {
font-size: 12pt;
margin-bottom: 0;
color: white
}
img.logogc {
width: 80px;
opacity: 90%;
}
#logo{
position: absolute;
bottom: 8%;
right: 4%;
}
/*btn Background*/
.btn-servizi {
text-decoration: none;
border: 1px solid rgb(255, 255, 255);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
padding-left: 0.5%;
padding-right: 0.5%;
padding-top: 1%;
padding-bottom: 1%;
margin-top: 15%;
margin-bottom: -11%;
color: white;
pointer-events: all;
}
.btn-arrow {
width: 20px;
height: 20px;
}
/*hover btn*/
.btn-servizi:hover {
scale: 105%;
color: #333;
background-color: #068fffa6;
}
/*-----------------------------------*\
SECTION SKILL
\*-----------------------------------*/
.skill-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 3% 0 5% 0%;
box-shadow: rgba(0, 0, 0, 0.75) 10px 10px 73px -18px;
margin-top: 3%;
}
.title-skill {
text-align: center;
margin-bottom: 5%;
margin-top: 10%;
}
.skill {
display: flex;
justify-content: center;
align-items: center;
flex: 1; /* Flessibilità delle sezioni */
margin: 20px; /* Spaziatura esterna */
}
.branding-container,
.uxui-container,
.web-container {
max-width: 25%;
text-align: center;
position: relative;
overflow: hidden;
max-height: 220px;
box-shadow: rgba(0, 0, 0, 0.75) 10px 10px 73px -18px;
border: solid 0.5px;
border-color: white;
margin-left: 2%;
margin-right: 2% !important;
}
.imgskill {
width: 100%; /* Rendi le immagini larghe al 100% del contenitore */
height: auto;
display: block;
border-radius: 25px;
scale: 115%;
object-fit: cover;
transition: 0.5s ease-in-out;
filter: brightness(50%);
}
.titolo-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
margin: 0;
z-index: 1;
font-size: 20pt;
font-weight: bold;
}
.p-skill {
font-size: 16px; /* Dimensione del testo */
margin-bottom: 20px; /* Spaziatura inferiore */
}
/*hover skill*/
.branding-container:is(:hover, :focus),
.uxui-container:is(:hover, :focus),
.web-container:is(:hover, :focus) {
transform: translateY(-5px);
}
.branding-container:hover,
.uxui-container:hover,
.web-container:hover {
filter: grayscale(0%);
color: white;
font-size: 23pt;
font-weight: 900;
}
.imgskill:hover {
opacity: 100%;
font-size: 23pt;
font-weight: 900;
}
questo invece è il css, però non mi fa caricare l'immagine