Lista de exercícios ESTILIZAÇÃO | HTML e CSS: Classes, posicionamento e Flexbox

2
respostas

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Manipulando botões e atividade Lista de exercícios

por Ayra Maria Soares Rocha

| 4.1k xp | 15 posts

Se tiver alfuma sugestão, pfvrr falar ;-;

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPG-DND</title>
    <link rel = "stylesheet" href="atividade.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
            <section class="apresentacao__conteudo">
                <div><h1><span class="apresentacao__conteudo__titulo">Lenda de Ayra, a Bruxa das Sombras</span></h1></div>
                <p class="apresentacao__conteudo__texto">Eldoria, Ayra, a jovem bruxa das sombras, vivia em uma torre na Floresta Sombria. Um dia, um grupo de aventureiros pediu sua ajuda para libertar um dragão que aterrorizava uma aldeia, acreditando que ele estava sob um feitiço maligno.</p>
                <div class ="apresentacao_botoes"> 
                    <a class ="apresentacao_links" href="https://dnddiceroller.org/pt"><button class ="apresentacao_links">Dados</button></a>
                </div>
            </section>
            <img src="bruxa.jpg" alt="bruxa">
    </main>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body{
    background-color: brown;
    font-family: 'Times New Roman', Times, serif;
    height: 100vh;
    box-sizing: border-box;
}
.apresentacao{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10%;
}
.apresentacao__conteudo{
    width: 615px;
    font-family: "Krona One", sans-serif;
}
.apresentacao__conteudo__titulo{
    font-size: 30px;
    color: palevioletred;
}
.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
    color: whitesmoke;
}
.apresentacao_botoes{
    display: flex;
    justify-content: space-between;
}
.apresentacao_links{
    background-color: palevioletred;
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
    border: 2px solid red;
    padding: 0 0;
    height: 50px;
    width: 100px;
    box-shadow: 5px 5px 10px 0;
    transition: 1s;
    cursor: pointer;
}
.apresentacao_links:hover{
    background-color: orange;
    box-shadow: 5px 5px 10px 0 tomato;
    border: 10px solid brown;
}
img{
    border: 50px solid #461f24;
    border-image: 50px;
    border-radius: 10px;
    box-shadow: 5px 5px 10px 0 white;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

por Mike de Sousa

| 564.8k xp | 754 posts

Alura Scuba Team Suporte Educacional

2 semanas atrás

Olá, Ayra, como vai?

Gostei do tema e da criatividade no seu projeto! Tenho algumas sugestões para a estilização dos botões e estrutura do HTML para melhorar a consistência e a acessibilidade:

Botões dentro de links: Como você está colocando o botão dentro de uma tag <a>, pode simplificar removendo o <button>. Assim:


<a class="apresentacao_links" href="https://dnddiceroller.org/pt">Dados</a>

Isso evita duplicação de classes e torna o código mais direto.

Padding do botão: Para deixar o botão mais confortável de visualizar e clicar, sugiro ajustar o padding para algo como:


padding: 10px 20px;

Transição do hover: A transição está muito longa para uma interação de hover. Reduzir para 0.3s pode dar uma resposta mais rápida e agradável para o usuário:


transition: 0.3s;

Essas pequenas mudanças podem ajudar na legibilidade do código e na experiência do usuário.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

por Ayra Maria Soares Rocha

| 4.1k xp | 15 posts

2 semanas atrás

Considerei as dicas e fiz assim: HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPG-DND</title>
    <link rel = "stylesheet" href="atividade.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
            <section class="apresentacao__conteudo">
                <div><h1><span class="apresentacao__conteudo__titulo">Lenda de Ayra, a Bruxa das Sombras</span></h1></div>
                <p class="apresentacao__conteudo__texto">Eldoria, Ayra, a jovem bruxa das sombras, vivia em uma torre na Floresta Sombria. Um dia, um grupo de aventureiros pediu sua ajuda para libertar um dragão que aterrorizava uma aldeia, acreditando que ele estava sob um feitiço maligno.</p>
                <div class ="apresentacao_botoes"> 
                    <a class ="apresentacao_links" href="https://dnddiceroller.org/pt">Dados</a>
                </div>
            </section>
            <img src="bruxa.jpg" alt="bruxa">
    </main>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body{
    background-color: brown;
    font-family: 'Times New Roman', Times, serif;
    height: 100vh;
    box-sizing: border-box;
}
.apresentacao{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10%;
}
.apresentacao__conteudo{
    width: 615px;
    font-family: "Krona One", sans-serif;
}
.apresentacao__conteudo__titulo{
    font-size: 30px;
    color: palevioletred;
}
.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
    color: whitesmoke;
}
.apresentacao_botoes{
    display: flex;
    justify-content: space-between;
}
.apresentacao_links{
    background-color: palevioletred;
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
    border: 2px solid red;
    padding: 10px 20px;
    height: 20px;
    width: 50px;
    box-shadow: 5px 5px 10px 0;
    transition: 0.3s;
    cursor: pointer;
    flex-direction: column;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.apresentacao_links:hover{
    background-color: orange;
    box-shadow: 5px 5px 10px 0 tomato;
    border: 10px solid brown;
}
img{
    border: 50px solid #461f24;
    border-image: 50px;
    border-radius: 10px;
    box-shadow: 5px 5px 10px 0 white;
}

Mergulhe em programação