Codigo em HTML

Explorando o desenvolvimento web: do Backend ao Frontend!

Olá! Sou Gabriel Sampaio, desenvolvedor em formação, estudando programação pelo programa ONE - Oracle Next Education em parceria com a Alura. Tenho interesse em backend, mas também estou aprendendo frontend para entender o desenvolvimento como um todo. Estou em busca de aprendizado e aprimoramento, correndo atrás para me tornar um profissional completo. Vamos conversar?

codigo em CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

• { margin: 0; padding: 0; box-sizing: border-box; }

body { height: 100vh; background-color: #000000; /* Define a cor de fundo da página / color: #F6F6F6; / Define a cor do texto */ display: flex; flex-direction: column; justify-content: center; }

.titulo-destaque { color: #22d4fd; /* Define a cor azul para destacar parte do título */ }

.apresentacao { margin: 10% 15%; /* Define margens para centralizar a seção no meio da tela / display: flex; / Usa flexbox para organizar os elementos / align-items: center; / Alinha os itens verticalmente ao centro / justify-content: space-between; / Distribui o espaço entre os elementos / gap: 2rem; / Define o espaçamento entre os elementos / max-width: 1200px; / Define um limite para não esticar demais / margin: 0 auto; / Centraliza o conteúdo */ }

.apresentacao__conteudo { width: 615px; /* Define a largura da seção de conteúdo / display: flex; / Usa flexbox / flex-direction: column; / Organiza os itens em coluna / gap: 40px; / Define o espaçamento entre os elementos */ }

.apresentacao__conteudo__titulo { font-size: 28px; /* Define o tamanho da fonte do título / font-family: "Krona One", serif; / Define a fonte do título */ }

.apresentacao__conteudo__texto { font-size: 18px; /* Define o tamanho da fonte do texto / font-family: "Montserrat", serif; / Define a fonte do texto / text-align: justify; / Justifica o texto para alinhar uniformemente entre as margens / text-justify: inter-word; / Distribui melhor os espaços entre as palavras */ }

.apresentacao__links { display: flex; /* Usa flexbox para alinhar os links / justify-content: space-between; / Espaça os botões uniformemente */ }

.apresentacao__links__link { background-color: #22D4FD; /* Define a cor do fundo do botão / width: 280px; / Define a largura do botão / text-align: center; / Centraliza o texto dentro do botão / border-radius: 16px; / Arredonda as bordas do botão / font-size: 24px; / Define o tamanho da fonte do botão / font-weight: 600; / Define a espessura da fonte / padding: 21.5px 0; / Define o espaçamento interno vertical / text-decoration: none; / Remove o sublinhado dos links / color: #000000; / Define a cor do texto do botão / font-family: 'Montserrat', sans-serif; / Define a fonte do botão */ }

img { max-width: 30%; /* Garante que a imagem não ultrapasse a largura do container / height: auto; / Mantém a proporção da imagem / border-radius: 8px; / Deixa as bordas arredondadas (opcional) */ }

.apresentacao__img { width: 44%; /* Ajusta o tamanho da imagem / object-fit: cover; / Mantém a imagem ajustada */ }