Código CSS e print da página.
/*fonte importada do google(krona 1) e montserrat*/
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/*resetando o padrão da página*/
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh; /* Garante que o body ocupe pelo menos 100% da altura da tela */
display: flex;
flex-direction: column;
align-items: center; /* Centraliza o conteúdo horizontalmente */
justify-content: space-between; /* Alinha o conteúdo no topo e o footer na base */
box-sizing: border-box;
background-color: #000000;
color: #F3E306;
}
.titulo-destaque {
color: #0000ff;
}
.apresentacao {
display: flex;
align-items: center; /* Alinha os itens verticalmente ao centro */
justify-content: space-between; /* Distribui o espaço entre os elementos */
margin: 10%;
padding: 20px; /* Espaçamento interno para o conteúdo não ficar colado na borda */
border: 4px solid #0000ff; /* Borda azul ao redor de tudo */
border-radius: 15px; /* Bordas arredondadas */
background-color: #1a1a1a; /* Cor de fundo para destacar o conteúdo */
box-shadow: 0 0 20px rgba(0, 0, 255, 0.5); /* Sombra para efeito visual */
flex-grow: 1; /* Faz o main crescer para ocupar o espaço disponível */
}
.apresentacao__conteudo {
width: 60%; /* Define a largura do conteúdo */
}
.apresentacao__conteudo__titulo {
font-size: 36px;
font-family: 'Krona One', sans-serif;
margin-bottom: 20px; /* Espaço entre o título e o parágrafo */
}
.destaque_frontend {
color:#ff0000; /*destaque vermelho na palavra Front-end*/
}
.apresentacao__conteudo__texto {
font-family: 'Montserrat', sans-serif;
font-size: 24px;
color: #BD3FBF;
margin-bottom: 20px; /* Espaço entre o parágrafo e os links */
}
.apresentacao__links {
display: flex;
color:#ff0000;
gap: 10px; /* Espaço entre os links */
margin-bottom: 20px; /* Espaço entre os links e o e-mail */
}
/* Estilos para o e-mail dentro do main */
.apresentacao__conteudo__email {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: #ff0000;
}
.apresentacao__conteudo__email a {
color: #ffffff; /* Cor do link */
text-decoration: none; /* Remove o sublinhado */
}
.apresentacao__conteudo__email a:hover {
text-decoration: underline; /* Sublinhado ao passar o mouse */
}
.apresentacao img {
width: 40%; /* Define a largura da imagem */
height: auto; /* Mantém a proporção da imagem */
margin-left: 20px; /* Ajusta o espaçamento entre o texto e a imagem */
border-radius: 10px; /* Bordas arredondadas na imagem */
}
/* Estilos para o footer */
.rodape {
text-align: center; /* Centraliza o texto */
padding: 20px; /* Espaçamento interno */
background-color: #1a1a1a; /* Cor de fundo */
border-top: 2px solid #0000ff; /* Borda superior */
width: 100%; /* Ocupa toda a largura */
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: #F6F6F6;
}