a imagem do botao esta alargada

index.html

Eleve seu negócio digital a outro nível um Front-end de qualidade!

Olá! Sou gustavo, desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?

acesse minhas redes

Instagram do gustavo Instagram da namorada

Desenvolvido por gustavo

style.css

@import url('https://fonts.googleapis.com/css2?family=Krona+One&Krona+One&family=Montserrat&display=swap');

:root { --cor-primaria: black; --cor-secundaria: white; --cor-terciaria: aqua; --cor-hover: #272727;

--fonte-primaria: 'Krona One', sans-serif;
--fonte-secundaria: 'Montserrat', sans-serif;

}

• { margin: 0; padding: 0; }

body { /* height: 100vh; ver a tela toda*/ box-sizing: border-box; background-color: var(--cor-primaria); color: var(--cor-secundaria); }

.titulo-destaque { color: var(--cor-terciaria); }

.cabecalho { padding: 2% 0% 0% 15%; }

.cabecalho__menu { display: flex; gap: 80px; }

.cabecalho__menu__link { font-family: var(--fonte-secundaria); font-size: 1.5rem; font-weight: 600; color: var(--cor-terciaria); text-decoration: none; }

.apresentacao{ margin: 6% 15%; display: flex; align-items: center; justify-content: space-between; gap: 82px; }

.apresentacao__conteudo { width: 50%; display: flex; flex-direction: column; gap: 40px; }

.apresentacao__conteudo__titulo { font-size: 2.25rem; font-family: var(--fonte-primaria); }

.apresentacao__conteudo__texto{ font-size: 1.5rem; font-family: var(--fonte-secundaria); }

.apresentacao__links { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px; }

.apresentacao__link__subtitulo { font-family: var(--fonte-primaria); font-weight: 400; font-size: 1.5rem; }

.apresentacao__links__navegacao { /* background-color: aqua; fundo do botao/ / border: 2px dotted aqua; deixa a borda pontilhada*/ display: flex; justify-content: center; gap: 16px; border: 2px solid var(--cor-terciaria); width: 50%; text-align: center; border-radius: 8px; font-size: 1.5rem; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: var(--cor-secundaria); font-family: var(--fonte-secundaria); }

.apresentacao__links__navegacao:hover { background-color: var(--cor-hover); }

.apresentacao__imagem { width: 50%; }

.borda { border-radius: 16px; }

.rodape { padding: 24px; color: var(--cor-primaria); background-color: var(--cor-terciaria); text-align: center; font-family: var(--fonte-secundaria); font-size: 1.5rem; font-weight: 400; }

@media (max-width: 1200px) { .apresentacao { flex-direction: column-reverse; } }