Entrar Ainda não tem acesso?
2
respostas

[Sugestão] Deixar mais fiel ao prótotipo!

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 Mateus Eugênio de Andrade
| 187.2k xp | 10 posts

Hello (3x)!

Como comentei em uma postagem aqui no fórum, vim trazer mais uma sugestão de como deixar o projeto mais fiel ao protótipo.

No Figma, observei que existe uma pequena linha branca acima dos tópicos visitados recentemente.

Protótipo no Figma

Na aula, não existe essa implementação. Mas isso é fácil de resolver. Solucionei da seguinte forma:

Primeiro criei uma seção acima de tópicos, com a classe "faixa".

<section class="faixa">
            <br>
    </section>

Dentro, coloquei o elemento <br>, que causa uma quebra de linha.

Na página topicos.css, adicionei apenas um atributo a classe faixa.

.faixa{
    background-color: var(--branco);
}

Com isso, o projeto ficou da seguinte maneira:

Projeto

Assim, fazendo o projeto mais fiel ao protótipo.

2 respostas
por Padula
| 107.7k xp | 34 posts
Engenheiro

fiz a faixa também, mas mas para não usar uma section nem div sem necessidade, apenas apliquei um padding na section existente CSS

.news{
    background-color: var(--cor-bg-2);
    padding-top: 2rem;
    
}

HTML

<!-- Topicos -->
        <section class="news">
            <div class="topics">
                <h2 class="topics__title">TÓPICOS VISITADOS RECENTEMENTE</h2>
                <ul class="topics__list">
                    <li class="topics__list__item"><a href="#" class="topics__list__link">Android</a></li>
                    <li class="topics__list__item"><a href="#" class="topics__list__link">Marketing Digital</a></li>
                    <li class="topics__list__item"><a href="#" class="topics__list__link">Agile</a></li>
                    <li class="topics__list__item"><a href="#" class="topics__list__link">Startups</a></li>
                    <li class="topics__list__item"><a href="#" class="topics__list__link">HTML & CSS</a></li>
                    <li class="topics__list__item"><a href="#" class="topics__list__link">Java</a></li>
                    <li class="topics__list__item"><a href="#" class="topics__list__link">OO</a></li>
                    <li class="topics__list__item"><a href="#" class="topics__list__link">Python</a></li>
                </ul>
            </div>
            <div class="newslatter">
                <div class="newsl_left">
                    <h2 class="newsl__title">Fique por dentro das novidades!</h2>
                    <h3 class="newsl__subtitle">Atualizações de e-books, novos livros, promoções e outros.</h3>
                </div>
                <input type="email" class="newsl__email" id="newsl__email" name="newls-email"
                placeholder="&#9993 Cadastre seu e-mail">
            </div>
        </section>

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

por Camila Jardim Francisco
| 19.4k xp | 5 posts

showw!!! eu queria diminuir tbm o espaçamento entre as ancoras no "TÓPICOS VISITADOS RECENTEMENTE", alguém conseguiu?