Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Projeto] Tentei fazer de outra forma

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Integrando o Carrossel com SwiperJS e atividade Lista de tópicos

por Rafael Heringer da Silva
| 109.1k xp | 106 posts

antes de assistir o vídeo tentei fazer a section utilizando de elementos já feitos. O código ficou assim: 

<section class="banner">
        <h2 class="banner__titulo__2">TÓPICOS VISITADOS RECENTEMENTE</h2>
        <div class="botoes__banner">
            <div class="botoes__banner linha">
                <a href="#" class="botoes__ancora">Android</a>
                <a href="#" class="botoes__ancora">Marketing Digital</a>
                <a href="#" class="botoes__ancora">Agile</a>
            </div>
            <div class="botoes__banner linha">  
                <a href="#" class="botoes__ancora">Startups</a>
                <a href="#" class="botoes__ancora">HTML & CSS</a>
                <a href="#" class="botoes__ancora">Python</a>
            </div>
            <div class="botoes__banner linha">     
                <a href="#" class="botoes__ancora">OO</a>
                <a href="#" class="botoes__ancora">Java</a>
            </div>      
        </div>
        

    </section>

o CSS assim :

.banner__titulo__2{
    font-weight: 300;
    margin: 24px;
}

.botoes__banner{
    display: flex;
    width: 427.582px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.linha{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    margin: 8px;
}

Imaginei que funcionaria porém o resultado ficou no quase

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

Sabem me dizer o porquê?

obs: achei a solução do vídeo de usar listas muito mais funcional

2 respostas
solução!
por Victor Costa Santos
| 1937.4k xp | 3735 posts
Alura Scuba Team Monitor de ForumOps

Olá Rafael!

Parabéns por se desafiar e por ter ido muito bem. O "quase" é um sinal de que falta pouco para passar para as próximas etapas. Continue firme, está se saindo muito bem!

Faltou algo para ficar mais condizente com o exemplo do figma: tirar o esquema de div. Isso deixa os tópicos meio travados. A organização dos blocos foi feita pelo próprio CSS, então no seu index, você pode apagar as divs. Depois, tente retirar o valor setado para o tamanho do tópico na sua class botoes__banner, onde o tamanho está travado em width: 427.582px;. Isso pode não funcionar para tópicos maiores. Fiz algumas outras alterações que melhoraram um pouco, porém o exemplo da aula com o uso das listas facilita a estilização. Recomendo que siga a organização da aula para evitar erros posteriores. Meu código ficou assim:

.botoes__ancora{
    background-color: var(--laranja);
    padding: 1em 2.2em;
    color: var(--branco);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    padding: 1em 1;
}

.banner__titulo__2{
    font-weight: 300;
    margin: 24px;
}

.banner{
    padding: 1%;
}

.botoes__banner{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.linha{
    display: flex;
    flex-direction: row;  
    justify-content: center;   
}

E o resultado assim:

Foto tirada o inspecionar, no qual mostra o projeto alura books em modo responsivo

Essa forma precisa de uns ajustes para o iphone 12 PRO, mas em um iphone XR ficou certinho, com um resultado muito próximo do figma.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Rafael Heringer da Silva
| 109.1k xp | 106 posts

Muito obrigado!

tanto pelos elogios como pelo solução!