Boa tarde!
Conforme pedido no exercício, troquei as unidades de medida em px (font-size, margin e padding) para rem.
Mas vi que também existem outras unidades, como border, width e gap, que também estão em pixels no projeto.
Preciso converter essas também?
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
--cor-primaria: #333446;
/* cor de fundo (original=> #000000) */
--cor-secundaria: #fcfcfbfd;
/* cor do texto (original=> #F6F6F6)*/
--cor-terciaria: #c2fdf9e0;
/* cor dos links e botões (original=> #22D4FD)*/
--cor-hover: #7F8CAA;
/* cor de hover dos links e botões (original=> #272727) */
--font-primaria: "Krona One", sans-serif;
/* fonte do titulo */
--font-secundaria: "Montserrat", sans-serif;
/* fonte do paragrafo e links */
}
* {
margin: 0;
padding: 0;
}
/* ESTILOS GERAIS */
body {
/* height: 100vh; */
box-sizing: border-box;
background-color: var(--cor-primaria);
color: var(--cor-secundaria);
}
.header {
padding: 2% 0% 0% 17%;
}
.header__menu {
display: flex;
gap: 80px;
}
.header__menu__link {
color: var(--cor-terciaria);
font-family: var(--font-secundaria);
font-size: 1.5rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
/* codigo para que os links brilhem e pisquem */
.header__menu__link:hover {
cursor: pointer;
color: var(--cor-terciaria);
animation: glow 1s infinite alternate;
}
/* Respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
.header__menu__link:hover {
animation: none;
text-shadow: 0 0 10px #22D4FD;
}
}
@keyframes glow {
from {
text-shadow:
0 0 5px #000000,
0 0 10px #22D4FD,
0 0 20px #22D4FD;
}
to {
text-shadow:
0 0 10px #000000,
0 0 20px #22D4FD,
0 0 40px #22D4FD;
}
}
.apresentacao {
padding: 5% 17%;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
}
.apresentacao__conteudo {
width: 700px;
display: flex;
flex-direction: column;
gap: 40px;
}
.apresentacao__conteudo__titulo {
font-size: 2.25rem;
font-family: var(--font-primaria);
}
.apresentacao__conteudo__titulo__span {
color: var(--cor-terciaria);
padding: 0.625rem;
}
.apresentacao__conteudo__paragrafo {
font-size: 1.5rem;
font-weight: 400;
font-family: var(--font-secundaria);
}
.destaque-palavras {
color: var(--cor-terciaria);
}
.apresentacao__links {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.apresentacao__links__subtitulo {
color: var(--cor-secundaria);
font-size: 1.5rem;
font-weight: 400;
font-family: var(--font-primaria);
}
.apresentacao__links__estilizacao {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
color: var(--cor-secundaria);
border: 2px solid var(--cor-terciaria);
text-shadow: 1px 1px 2px rgba(23, 156, 165, 0.911);
/* sombra do texto dentro dos "botões" */
width: 378px;
text-align: center;
border-radius: 8px;
font-size: 1.5rem;
font-weight: 600;
padding: 1.34rem 0;
margin: 0.625rem;
text-decoration: none;
font-family: var(--font-secundaria);
}
.apresentacao__links__estilizacao:hover {
cursor: pointer;
background-color: var(--cor-hover);
padding: 3%;
border: 2px solid var(--cor-secundaria);
}
.apresentacao__imagem {
width: 467px;
height: 500px;
border-radius: 8px;
}
.footer {
padding: 1.5rem;
background-color: var(--cor-terciaria);
color: var(--cor-primaria);
text-align: center;
font-family: var(--font-secundaria);
font-size: 1.5rem;
font-weight: 400;
}
/* ALGUNS ESTILOS ESPECIFICOS DE about.html */
h3 {
text-align: center;
font-size: 1.5rem;
font-weight: 400;
font-family: var(--font-primaria);
color: var(--cor-terciaria);
}
.linguagens-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-top: 0.625rem;
}
.linguagens-container img {
width: 60px;
height: auto;
transition: transform 0.2s ease-in-out;
}
.linguagens-container img:hover {
transform: scale(1.1);
}
.linguagens-container a {
text-decoration: none;
color: inherit;
}