Boa tarde, gente!
Estou fazendo o desafio de criar a página do currículo nesse projeto do figma e optei por deixar sem a imagem que estava nas outras páginas, porém retirando a imagem o padding adicionado no header (.cabecalho) está deslocando o footer e eu não consigo fixar ele novamente. Já tentei de várias formas e sem sucesso... consegui apenas modificando o menu (retirando os paddings e deixando ele centralizado), mas gostaria de saber se existe uma forma de manter o menu como estava - com os paddings colocados no curso e deixar o rodapé posicionado de forma correta novamente.
não consegui anexar as imagens :(
Obrigada desde já!
Atenciosamente,
Rackel
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');
:root {
--cor01: #000000;
--cor02: #F6F6F6;
--cor03: #22D4FD;
--cor04: #272727;
--fonte-principal: 'Krona One', sans-serif;
--fonte-secundaria: 'Montserrat', sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
box-sizing: border-box;
background-color: var(--cor01);
color: var(--cor02);
}
.cabecalho {
padding: 5% 15%;
}
.cabecalho__menu {
display: flex;
gap: 80px;
}
.cabecalho__menu__links {
text-decoration: none;
color: var(--cor03);
font-family: var(--fonte-secundaria);
font-weight: 600;
font-size: 1.5em;
}
.container {
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
padding: 5% 15%;
}
#curriculo {
justify-content: center;
}
.container__conteudo {
width: 615px;
display: flex;
flex-direction: column;
}
.container__conteudo__titulo {
font-family: var(--fonte-principal);
font-weight: normal;
font-size: 2.3em;
line-height: 56px;
padding-bottom: 40px;
}
.titulo_destaque {
color: var(--cor03);
}
.container__conteudo__texto {
font-family: var(--fonte-secundaria);!
font-size: 1.5em;
line-height: 36px;
font-weight: 400;
text-align: justify;
padding-bottom: 40px;
}
.container__conteudo__subtitulo {
color: var(--cor02);
font-family: var(--fonte-principal);
text-decoration: underline;
font-weight: 400;
font-size: 1.5em;
padding-bottom: 15px;
}
.container__lista {
display: flex;
flex-direction: column;
text-align: justify;
list-style-type: circle;
padding: 0px 0px 40px 22px;
font-family: var(--fonte-secundaria);
font-size: 1.5em;
line-height: 36px;
}
.destaque__lista {
color: var(--cor03);
}
.container__lista__indent {
font-size: .8em;
list-style-type: none;
}
.container__botoes {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.container__botoes__subtitulo {
text-align: center;
color: var(--cor02);
font-family: var(--fonte-principal);
font-weight: 400;
font-size: 1.5em;
}
.container__botoes__link {
display: flex;
justify-content: center;
gap: 16px;
width: 378px;
border: 2px solid var(--cor03);
text-decoration: none;
color: var(--cor02);
text-align: center;
font-family: var(--fonte-secundaria);
font-size: 1.5em;
font-weight: 600;
padding: 16px 0;
border-radius: 8px;
}
.container__botoes__link:hover {
background-color: var(--cor04);
}
.rodape {
position: relative;
background-color: var(--cor03);
padding: 20px;
text-align: center;
font-family: var(--fonte-secundaria);
font-size: 1.5em;
font-weight: 400;
color: var(--cor01);
}
.rodape__destaque:hover {
color: var(--cor02);
font-weight: 800;
}