Scribd
Upload
12 views4 pages

Copy Cod

The document contains CSS styles for a web page, defining the layout and appearance of various elements such as the body, header, lists, and buttons. It utilizes responsive design techniques with calculations for widths, heights, margins, and paddings based on viewport dimensions. The styles also include hover effects and transitions for interactive elements to enhance user experience.

Uploaded by

williantomaselli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views4 pages

Copy Cod

The document contains CSS styles for a web page, defining the layout and appearance of various elements such as the body, header, lists, and buttons. It utilizes responsive design techniques with calculations for widths, heights, margins, and paddings based on viewport dimensions. The styles also include hover effects and transitions for interactive elements to enhance user experience.

Uploaded by

williantomaselli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

*{

margin: 0;
padding: 0;
}

body{
background-color: rgb(15, 15, 15);
width: min(90%);
}

header{
max-width: 4000px;
min-width: 344px;

width: calc(51vw + 102vh + 0.7vmin);


height: calc(6vw + 5vh);
background-color: rgb(15, 15, 15);
display: flex;
justify-content: baseline;
align-items: center;
}

#header1 img{
width: calc(3vw + 7vh);
padding: calc(1vw + 1vh);
border-radius: calc(5vw + 4vh);
margin-left: calc(1.5vw + 1vh);
}

ul{
display: flex;
justify-content: end;
width: calc(41vw + 50vh + 0.7vmin);
list-style-type: none;
}

#list1 li{
margin: calc(3vw + 1vh);
text-decoration: none;
font-family: "Raleway";

#list1 li a{
text-decoration: none;
color: whitesmoke;
list-style: none;

transition: 0.4s ease-in-out;


}

#list1 li:hover{
color: rgb(215, 72, 103);
border-bottom: 2px solid rgb(215, 72, 103);
}

#list1 .auth {
text-decoration: none;
color: rgb(27, 27, 27);
list-style: none;
font-weight: bolder;
font-size: large;
font-family: "Raleway";

background-color:rgb(255, 255, 255);


border-radius: calc(1vw + 0.4vh);
width: calc(9vw + 11vh);
height: calc(2vw + 4vh);
display: flex;
justify-content: center;
align-items: center;
margin-top: calc(1.5vw + 1vh);
}

.logotype{
font-family: "Raleway";
font-style: bold;
color: white;
font-size: calc(0.4vw + 3vh);
margin-right: calc(10vw + 10vh);
}

.main-txt{
font-family: "Dela Gothic One";
font-size: calc(4vw + 3vh);
color: rgb(215, 72, 103);
margin-left: calc(2vw + 2vh);
margin-top: calc(2vw + 2vh);
width: calc(50vw + 10vh);

transition: 0.4s ease-in-out;

background-color: transparent;
background-image: none;
background-clip: text;
-webkit-background-clip: text;
transition: color 0.3s, background-image 0.3s ease-in-out;
}

main h1:hover{
color: transparent; /* Torna o texto transparente para exibir a imagem de fundo
*/
background-image: url('/Images/fundo\ main.svg'); /* Substitua pelo caminho da
sua imagem */
background-size: cover; /* Ajusta o tamanho da imagem para cobrir o texto */
background-clip: text; /* Aplica a imagem de fundo ao texto */
-webkit-background-clip: text; /* Prefixo para navegadores WebKit */
}

main p{
font-family: "Dela Gothic One";
font-size: calc(0.5vw + 1vh);
color: rgb(255, 255, 255);
margin-left: calc(2vw + 2vh);

}
.auth-main #CTA-Login {
text-decoration: none;
list-style: none;
font-weight: bolder;
font-size: calc(1vw + 1vh);
font-family: "Dela Gothic One";
}

.auth-main{
background-color:rgb(215, 72, 103);
border-radius: calc(1vw + 0.4vh);
width: calc(9vw + 11vh);
height: calc(2vw + 4vh);
display: flex;
justify-content: center;
align-items: center;
margin-left: calc(2.5vw + 1vh);
margin-top: calc(1vw + 1vh);
color: rgb(255, 255, 255);

box-shadow: rgb(215, 72, 103) 0px 20px 30px -10px;

transition: 0.4s ease-in-out;


}

.auth-main:hover{
background-color: rgb(255, 255, 255);
color: rgb(215, 72, 103);
width: calc(11vw + 11vh);
}

.auth-main:active{
box-shadow: rgba(0, 0, 0, 0.5) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.451)
0px 18px 36px -18px inset;
}

.auth-nav{
background-color:rgb(255, 255, 255);
border-radius: calc(1vw + 0.4vh);
width: calc(9vw + 11vh);
height: calc(2vw + 4vh);
display: flex;
justify-content: center;
align-items: center;
margin: calc(1vw + 2vh);
color: rgb(0, 0, 0);
font-family: "Raleway";

transition: 0.4s ease-in-out;


}

.auth-nav:hover{
background-color: rgb(215, 72, 103);
color: rgb(255, 255, 255);

}
a{
text-decoration: none;
}

.auth-main a{
color: white;
}

You might also like