Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Projeto] Projeto do figma

Olá a todos, Me chamo João Pedro e sou iniciante no curso de Front-end ! Utilizando o projeto do figma , consegui ter uma base e fiz a minha versão será que poderiam avaliar e me dar algumas dicas de como melhorar ? Obrigado a todos. E tambem queria uma ajuda , pois não consegui fazer algumas coisas :

  • Não consegui colocar a logo das redes sociais.
  • Não consegui colocar o Background do mesmo estilo do projeto do Figma (Optei por um background todo preto).
  • E tem a borda que fica atras da foto que tambem não consegui colocar.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

    <title>HTML E CSS</title>
</head>
<body>
    <header>
        <div>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="">Projetos</a></li>
                    <li><a href="">Sobremim</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <div>
            <h1>Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
            <img class="Foto" src="minha-foto.jpg" alt="Foto do João">

            <h4>Olá! Me chamo João Pedro, estudante da Alura e iniciante na carreira de desenvolverdor front end.</h4>
        </div>

        <div>
            <h3> Acesse minhas Redes:</h3>
            <nav id="redes">
                <ul id="lista-de-redes">
                    <li id="git"><a href="https://github.com/Jpcnjp/Primeiro-projeto"><h5>GitHub</h5></a></li>
                    <li id="link"><a href="linkedin.com/in/joão-pedro-césario-994940237"><h5>Linkedin</h5></a></li>
                    <li id="instagram"><a href="https://www.instagram.com/jpe18/"><h5>Instagram</h5></a></li>
                </ul>
            </nav>
        </div>
    </main>
    <footer>
       <h4 class="rodape"> Desenvolvido por João ! </h4>
    </footer>
</body>
</html>

CSS

body {
    background : black;
    font-family: 'Montserrat', sans-serif;
}

header {
    position: absolute;
    width: 593px;
    height: 29px;
    left: 355px;
    top: 65px;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0px;
}

nav li {
    display: inline;
    font-weight: 600;
    line-height: 29px;
}

nav a {
    color: #22D4FD;
    text-decoration: none;
}

main {
    color: white;
}

h1 {
    width: 593px;
    height: 168px;
    font-weight: 400;
    font-size: 35px;
    line-height: 40px;
    margin: 235px 355px auto;


}

strong {
    color: #22D4FD;
}

.Foto {
    float: right;
    position: absolute;
    height: 550px;
    left: 1030px;
    top: 210px;
}

h4 {
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    margin-left: 355px;
    width: 610px;
}

h3 {
    font-weight: 400;
    font-size: 24px;
    line-height: 40px;
    margin: 56px 490px;
    width: 270px;
}

#lista-de-redes{
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 200px;
    height: 170px;
    left: 530px;
    top: 610px;
}

#git {
    border : 2px solid #22D4FD;
    padding: 0 65px;
    border-radius: 5px;
}

#link {
    border : 2px solid #22D4FD;
    padding: 0 59px;
    border-radius: 5px;
}

#instagram {
    padding: 0 53px;
    border : 2px solid #22D4FD;
    border-radius: 5px;
}

footer {
    background-color:  #22D4FD;
    position: absolute;
    width: 1920px;
    height: 88px;
    top: 1063px;
}

.rodape {
    color: #123F77;
    padding: 25px;
    position: absolute;
    left: 500px;
}
2 respostas

Olá, João, tudo bem?

Seu código está bem estruturado e apresenta boa indentação e clareza. Um dos fatores que poderia ser melhorada é o uso de classes (class) no lugar das identidades (id), pois com as classes já conseguimos especificar os elementos o suficiente para conseguirmos estilizá-los com CSS.

Com relação às suas dúvidas vamos abordá-las uma a uma:

  • Não consegui colocar a logo das redes sociais

    Para colocar o logo das redes sociais é necessário:

    No documento index.html acrescentar os seguintes códigos após a tag <a> e antes da tag<h5> para cada um dos links das redes sociais.

    Para o GitHub:

    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50"      viewBox="0 0 72 72"><path    d="M36,12c13.255,0,24,10.745,24,24c0,10.656-6.948,19.685-16.559,22.818c0.003 0.009,0.007-0.022,0.007-0.022    s-1.62-0.759-1.586-2.114c0.038-1.491,0-4.971,0-6.248c0-2.193-1.388-3.747-1.388-3.747s10.884,0.122,10.884-11.491    c0-4.481-2.342-6.812-2.342-6.812s1.23-4.784-0.426-6.812c-1.856-0.2-5.18,1.774-6.6,2.697c0,0-2.25-0.922-5.991-0.922    c-3.742,0-5.991,0.922-5.991,0.922c-1.419-0.922-4.744-2.897-6.6-2.697c-1.656,2.029-0.426,6.812-0.426,6.812    s-2.342,2.332-2.342,6.812c0,11.613,10.884,11.491,10.884,11.491s-1.097,1.239-1.336,3.061c-0.76,0.258-1.877,0.576-2.78,0.576    c-2.362,0-4.159-2.296-4.817-3.358c-0.649-1.048-1.98-1.927-3.221-1.927c-0.817,0-1.216,0.409-1.216,0.876s1.146,0.793,1.902,1.659    c1.594,1.826,1.565,5.933,7.245,5.933c0.617,0,1.876-0.152,2.823-0.279c-0.006,1.293-0.007,2.657,0.013,3.454    c0.034,1.355-1.586,2.114-1.586,2.114s0.004,0.013,0.007,0.022C18.948,55.685,12,46.656,12,36C12,22.745,22.745,12,36,12z"></path></svg>
    

    Para o Linkedin:

     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50"><path       d="M25,2C12.318,2,2,12.317,2,25s10.318,23,23,23s23-10.317,23-23S37.682,2,25,2z M18,35h-4V20h4V35z M16,17 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C18,16.105,17.105,17,16,17z M37,35h-4v-5v-2.5c0-1.925-1.575-3.5-3.5-3.5 S26,25.575,26,27.5V35h-4V20h4v1.816C27.168,20.694,28.752,20,30.5,20c3.59,0,6.5,2.91,6.5,6.5V35z"></path></svg>
    

    Para o Instagram:

     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0 0 30 30"><path d="M 9.9980469 3 C       6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"></path>  </svg>

    Usamos duas tags para realizar os comandos acima: a primeira é a tag <svg> é responsável por adicionar imagens vetoriais em documentos HTML, garantindo que não haja perda da qualidade da imagem ao redimensioná-las ao tamanho da tela. A segunda é a tag <path> que define o caminho traçado pelo desenho, neste caso os logotipos das redes sociais.

    Essas tags foram copiadas do site Icons8 no momento de baixar um dos ícones por meio da opção svg.

    Já no arquivo style.cssé preciso ajustar a imagem e o texto para conseguir um resultado satisfatório alinhando ambos ao centro da tela e entre eles. Para isso utilizaremos o Flexbox e o alinhamento dos itens nas tags <li>e <a>.

    O código para fazer isso está escrito abaixo:

    li a {
     display: flex;
     flex-direction: row;
     align-items: center;
    }
  • Não consegui colocar o Background do mesmo estilo do projeto do Figma (Optei por um background todo preto)

    Neste caso, para conseguir fazer com que o background dos quadrados fique na mesma cor do projeto é necessário colocar a propriedade background-color em cada uma das id criadas para as redes sociais (#git, #link e #instagram).

    Desse modo o código seria escrito da seguinte maneira:

         #git {
             display: flex;
             flex-direction: row;
             border : 2px solid #22D4FD;
             background-color: #22D4FD;
             padding: 0 65px;
             border-radius: 5px;
         }
    
         #link {
             border : 2px solid #22D4FD;
             background-color: #22D4FD;
             padding: 0 59px;
             border-radius: 5px;
         }
    
         #instagram {
             padding: 0 53px;
             background-color: #22D4FD;
             border : 2px solid #22D4FD;
             border-radius: 5px;
         }
solução!

Perceba que a coloração que você acrescentou antes de colocar a propriedade background-color foi adicionada na borda do retângulo (border : 2px solid #22D4FD;) fazendo com que apenas a borda fosse colorida com a cor do projeto e não o interior da figura.

  • E tem a borda que fica atras da foto que tambem não consegui colocar.

    A borda azul claro que fica na fotografia usada como exemplo para o projeto, foi feita no próprio Figma pelo designer responsável pela elaboração do layout.

    Neste caso, se quiser reproduzir essa borda você pode trocar a imagem de exemplo por uma que você queira colocar e selecionar todos os elementos arrastando o mouse sobre todos eles, como mostrado na imagem abaixo:

    Captura de tela da ferramenta Figma.Na parte superior, há um menu. O primeiro botão, corresponde a uma seta, esse botão está selecionado, destacado na cor azul. No lado direito da tela, há um menu com três opções, Design, Prototype e Inspect. No centro da tela, há uma imagem correspondente a tela inicial. Dentro dela há uma imagem fotográfica com uma mulher e um notebook, essa imagem está dentro de dois quadrados azuis, um dentro do outro, representando a seleção. Essa seleção está destacada em um quadrado vermelho.

    Em seguida, você precisa selecionar no canto superior direito da tela do figma a opção design arrastar o mouse até o final do menu e clicar em "Export".

    Captura de tela colorida do figma mostrando o menu lateral no canto direito da tela do com três opções no canto superior: Design prototype e Inspect. A opção design está selecionada e apresenta um retângulo vermelho em seu redor. O submenu que aparece abaixo fornece algumas opções de espessura, cor e exportação e ao final do menu aparece um botão escrito export Image destacado por um retângulo vermeho

Espero ter ajudado. Caso tenha mais dúvidas, estarei à disposição!

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!