Site responsivo!

como deixar esse site responsivo?
biografia.css (2,7,KB) biografia.html (1,5,KB)

Vamos lá, não é sempre que faço isso:

O segredo pra vc fazer um layout responsivo, é deixar ele centralizado, ainda mais quando se trata de um portfolio.

Outra coisa também que CONTA MUITO são as imagens, se vc tratar a imagem antes de usar, arrumar o tamanho, remover o fundo (quando se trata da sua foto) ajuda demais.

Problemas Encontrados:

  • Header (Vc só colocou seu nome e uma foto enorme sua (?)), o ideial é colocar um Logo (seu nome no caso), e alguns links:

             <header>
                  <div class="informacao">
                  Geovane Santana<br>
                  <div id="desenvolvedor"> desenvolvedor </div>
                  </div>
                  <h1>olá<img src="Geovane (1).png"></h1>
              </header>
    
  • Como já mencionado, a falta de alinhamento


  • e também uma falta de textos, o único que tinha era sobre vc…


É legal trabalhar com cores também, qualquer corzinha já dá uma diferença enorme no site, olha como eu deixei:




//Com um box shadow nas suas habilidades:

biografia.html (3,7,KB) biografia.css (4,2,KB)

Segue os arquivos, e o site

Espero que vc entenda que não estou te desmerecendo ou dizendo coisas ruins pra vc, apenas apontei algumas coisas que poderiam ser melhoradas. :grinning::grinning:


Outra coisa bem legal é fazer isso:

é tudo pra encher linguiça no final, mas que dá uma enorme diferença.

HTML

<div class="hero-div">
    <p id="title-hero">Design & Dev duo in Brazil</p>
    <p id="desc-1">We help companies and startups shipping</p>
    <p id="desc-2">amazing website</p>
</div>

CSS

.hero-div {
    display: flex;
    justify-content: center;
    flex-direction: column;

    text-align: center;
    margin: auto;

    width: 100%;
    height: 700px;

    background: linear-gradient(rgba(29, 30, 36, 0.9), rgba(29, 30, 36, 0.9)),
    url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80');

    background-position: center;
    background-size: cover;

    overflow-x: hidden;
    position: relative;

    align-items: center;
}

@rodriguesabner

Ficou fera mesmo, só de ter colocado as cores já deu outra cara. Não vejo a hora de chegar nesse nível!

Opa, valeu!! Hoje é seu dia de sorte então, pq o meu nível tá bem baixo kkkkkkk

1 curtida

valeu cara mais eu achei mais legal do outro jeito!

Não tem problema, eu só fiz o site pra vc ter uma noção de como fazer o site ficar responsivo. Agora é só aplicar pra o seu uso

as intendi mesmo assim muito obrigado!