1
resposta

[Sugestão] Lista de Exercícios e página final 2/2

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;
}

página html, css usando flexbox e google-fontes

1 resposta

Olá, Paulo, como vai?

Seu código CSS está muito bem elaborado e atende aos requisitos propostos. A importação das fontes do Google Fonts está correta, e você aplicou as propriedades de estilo de forma eficaz, garantindo uma boa apresentação visual. A utilização de Flexbox para o layout e a aplicação de margens e padding são boas práticas que ajudam a manter a organização do conteúdo.

Agradeço por compartilhar seu trabalho e incentivo você a continuar contribuindo com suas experiências. Se precisar de ajuda, o fórum está à disposição.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!