Segui todo o passo a passo, mas quando abro o site no celular, ou se reduzo a tela do pc, ele aparece "quebrado", não esta adequando a tela, como fazer? HTML:
Home Sobre mim CurrículoVocê encontrou um Desenvolvedor Front-end Júnior!
Olá! Sou Lucas Reis, desenvolvedor Front-end com habilidades em HTML, CSS e JavaScript. Estou em transição de carreira e, para tanto, cursando Analise e Desenvolvimento de Sistemas. Vamos conversar?
GitHub
Linkedin
Desenvolvido por Lucas Reis.
CSS: @import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
:root { --cor-primaria:#000000; --cor-secundaria:#F6F6F6; --cor-terciaria:#9A5DE7; --cor-hover: #272727;
--fonte-primaria: 'Krona One', sans-serif;
--fonte-secundaria: 'Montserrat', sans-serif;}
*{ margin: 0; padding: 0; }
body { box-sizing: border-box; background-color: var(--cor-primaria); color: var(--cor-secundaria); }
.cabecalho { padding: 2% 0% 0% 15%; }
.cabecalho__menu { display: flex; gap: 80px; }
.cabecalho__menu__link { font-family: var(--fonte-secundaria); font-size: 23px; font-weight: 600; color: var(--cor-terciaria); text-decoration: none; }
.apresentacao { padding: 5% 15%; display: flex; align-items: center; justify-content: space-between; gap: 82px; }
.apresentacao__conteudo { width: 615px; display: flex; flex-direction: column; gap: 40px; }
.apresentacao__conteudo__titulo { font-size: 35px; font-family: var(--fonte-primaria); }
.titulo-destaque { color: var(--cor-terciaria); }
.apresentacao__conteudo__texto { font-size: 23px; font-family: var(--fonte-secundaria); }
.apresentacao__links { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px; }
.apresentacao__links__subtitulo { font-family: var(--fonte-primaria); font-weight: 400; font-size: 23px; }
.apresentacao__links__link { display: flex; justify-content: center; gap: 16px; border: 2px solid var(--cor-terciaria); width: 378px; text-align: center; border-radius: 8px; font-size: 23px; padding: 21.5px 0; text-decoration: none; color: var(--cor-secundaria); font-family: var(--fonte-secundaria); font-weight: 600; }
.apresentacao__links__link:hover { background-color: var(--cor-hover); }
.rodape { padding: 23px; color: var(--cor-primaria); background-color: var(--cor-terciaria); text-align: center; font-family: var(--fonte-secundaria); font-size: 23px; font-weight: 400; }
