Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] E a borda abaixo do nome do time?

Referente ao curso React: desenvolvendo com JavaScript, no capítulo Caça aos bugs e atividade Nem tudo são flores

por Matheus Ricardo Uihara Zingarelli
| 251.1k xp | 324 posts

Olá.

No Figma, embaixo do nome de cada time tem um traço grosso, que no projeto foi criado utilizando o border-bottom. Só que no Figma esse traço é pequeno, não sublinha o nome inteiro do time.

Imagem do Figma:

imagem no Figma

Imagem no projeto (ignore os estilos de fonte diferentes):

Imagem no projeto

Como fazer nesse caso? Existe alguma maneira de estilizar a borda para ficar parecido com o que foi passado no Figma? Ou o melhor seria utilizar algum outro elemento HTML (um <hr>, por exemplo) e estilizar esse elemento para ter o efeito desejado?

Obrigado!

1 resposta
solução!
por Renan Lima
| 3619.9k xp | 7623 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Matheus.

Tudo bem?

Você pode criar uma tag <span></span> sem nada dentro e colocar uma borda no topo e definir uma cor, e colocar ela dentro de uma <div></div> para centralizar e controlar melhor ela. Ai o texto no caso o título vem acima dela:

HTML:

<h1>Data Science</h1>
        <div class="divi">
            <span class="borda-pequena"></span>
        </div>

CSS:

h1{
    text-align: center;
    margin-bottom: 6px;
}
div{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 200px;
}
span{
    width: 60px;
    height: 10px;
    border-top: 4px solid #FF0000;
    text-align: center;
    line-height: 0;
}

RESULTADO:

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

Espero ter ajudado de alguma forma. Valeu.