Arquivo index.html usando apenas html #6
Conversation
index.html
Outdated
| <nav class="menu"> | ||
|
|
||
| <ul> | ||
| <img src="images/logo.png" width="20%" height="20%" alt=""> |
There was a problem hiding this comment.
<ul> não pode ter conteúdo fora de um <li>
| <img src="images/logo.png" width="20%" height="20%" alt=""> | |
| <li><img src="images/logo.png" width="20%" height="20%" alt=""></li> |
index.html
Outdated
|
|
||
| <img src="images/Service1.png" alt=""> | ||
| <h3>Websites</h3> | ||
| <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis |
There was a problem hiding this comment.
Os elementos <h1> -<h6> devem ser utilizados para títulos, portanto não é boa prática utilizá-los para textos de parágrafo. 🌶
| <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis ... |
index.html
Outdated
| soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</h5> | ||
| <img src="images/Service3.png" alt=""> | ||
| <h3>Temas WordPress</h3> | ||
| <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis |
There was a problem hiding this comment.
| <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis |
index.html
Outdated
| soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</h5> | ||
| <img src="images/Service2.png" alt=""> | ||
| <h3>Templates</h3> | ||
| <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis |
There was a problem hiding this comment.
| <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis |
index.html
Outdated
| <!-- Serviços --> | ||
| <div class=""> | ||
| <h2>Serviços</h2> | ||
| <h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> |
There was a problem hiding this comment.
| <h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> | |
| <p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> |
index.html
Outdated
| <!-- Meus Trabalhos --> | ||
| <div class=""> | ||
| <h2>Meus trabalhos</h2> | ||
| <h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> |
There was a problem hiding this comment.
| <h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> | |
| <p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> |
index.html
Outdated
| <button type="button" name="btnTemplate">Template</button> | ||
| <button type="button" name="btnTema">Tema</button> | ||
| <br> | ||
| <img src="images/Portfolio01.png" alt=""> |
There was a problem hiding this comment.
| <img src="images/Portfolio01.png" alt=""> | |
| <figure> | |
| <img src="images/Portfolio01.png" alt=""> |
index.html
Outdated
| <button type="button" name="btnTema">Tema</button> | ||
| <br> | ||
| <img src="images/Portfolio01.png" alt=""> | ||
| <h5>Thumbnail label</h5> |
There was a problem hiding this comment.
| <h5>Thumbnail label</h5> | |
| <figcaption> | |
| Thumbnail label |
index.html
Outdated
| <br> | ||
| <img src="images/Portfolio01.png" alt=""> | ||
| <h5>Thumbnail label</h5> | ||
| <p>Thumbnail caption</p> |
There was a problem hiding this comment.
| <p>Thumbnail caption</p> | |
| <p>Thumbnail caption</p> | |
| </figcaption> | |
| </figure> |
index.html
Outdated
| <img src="images/Portfolio01.png" alt=""> | ||
| <h5>Thumbnail label</h5> | ||
| <p>Thumbnail caption</p> | ||
| <img src="images/Portfolio02.png" alt=""> |
There was a problem hiding this comment.
Dei uma sugestão acima de como ficaria mais semântico se você usar <figure> e <figcaption> neste caso.
Link de referência: https://www.w3schools.com/tags/tag_figcaption.asp
There was a problem hiding this comment.
Essas eu não conhecia. Obrigada pelas dicas e orientações. @happymoon
index.html
Outdated
| <!-- Quem Sou Eu --> | ||
| <div class=""> | ||
| <h2>Quem sou eu</h2> | ||
| <h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> |
There was a problem hiding this comment.
| <h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> | |
| <p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p> |
index.html
Outdated
| <img src="images/photo.png" alt=""> | ||
| <br> | ||
| <caption>Joana D'arc</caption> | ||
| <br> |
There was a problem hiding this comment.
Vi que utilizou muitas quebras de linha no seu código, no desafio 2 que tal testar gerar esses espaçamentos entre os elementos utilizando apenas CSS e remover esses <br> extra? 🔥
index.html
Outdated
| <br> | ||
| <p>ícones </p> | ||
| <h2>Sobre Mim</h2> | ||
| <h5>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet |
There was a problem hiding this comment.
| <h5>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet | |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet |
index.html
Outdated
| dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit | ||
| lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit | ||
| esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio | ||
| dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</h5> |
There was a problem hiding this comment.
| dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</h5> | |
| dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> |
index.html
Outdated
| esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio | ||
| dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</h5> | ||
| <h2>Habilidades</h2> | ||
| <li>Java Script</li> |
There was a problem hiding this comment.
<ul> ou <ol>
| <li>Java Script</li> | |
| <ul> | |
| <li>Java Script</li> |
index.html
Outdated
| <li>Java Script</li> | ||
| <li>Html & CSS</li> | ||
| <li>jQuery</li> | ||
| <li>Wordpress</li> |
There was a problem hiding this comment.
<ul> necessário aqui.
| <li>Wordpress</li> | |
| <li>Wordpress</li> | |
| </ul> |
index.html
Outdated
| <div class=""> | ||
| <h2>Contato</h2> | ||
| <h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> | ||
| <h4>[email protected]</h4> |
There was a problem hiding this comment.
⭐️ Reforçando: as tags de título devem ser utilizadas para atribuir relevância aos títulos principais da sua página, isso implica que o conteúdo deve ser literalmente um título de algum conteúdo.
index.html
Outdated
| <h4>[email protected]</h4> | ||
| <h4>+55 21 987654-321</h4> | ||
| <h3>Mídias</h3> | ||
| ícones das midias |
There was a problem hiding this comment.
🙈 podia ter referenciado as imagens aqui 😃
index.html
Outdated
| <div class=""> | ||
| <h2>Contato</h2> | ||
| <h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> | ||
| <h4>[email protected]</h4> |
There was a problem hiding this comment.
Você pode facilitar a vida do teu usuário colocando seu email clicável.
| <h4>[email protected]</h4> | |
| <a href="mailto:[email protected]">[email protected]</a> |
index.html
Outdated
| <h2>Contato</h2> | ||
| <h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> | ||
| <h4>[email protected]</h4> | ||
| <h4>+55 21 987654-321</h4> |
There was a problem hiding this comment.
Mesma coisa do email também vale para telefones.
Referência: https://www.w3schools.com/tags/tag_a.asp
| <h4>+55 21 987654-321</h4> | |
| <a href="tel:+5521987654321">+55 21 987654-321</a> |
index.html
Outdated
|
|
||
| <!-- Footer --> | ||
|
|
||
| <div class=""> |
There was a problem hiding this comment.
👉 O HTML 5 tem essas tags novas bem legais pra delimitar essas áreas específicas de conteúdo como <header> e <footer>. Que tal usar aqui?
| <div class=""> | |
| <footer> |
index.html
Outdated
| <div class=""> | ||
| <h5>Women + Tech = strong </h5> | ||
|
|
||
| </div> |
index.html
Outdated
| <!-- Footer --> | ||
|
|
||
| <div class=""> | ||
| <h5>Women + Tech = strong </h5> |
There was a problem hiding this comment.
Lembre-se do que falei acima sobre as tags de título. ☝️
tarcilas
left a comment
tarcilas
left a comment
There was a problem hiding this comment.
Bom trabalho! Parabéns e continue evoluindo.
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Front-End Study 2</title> |
There was a problem hiding this comment.
Colocar o favicon (icon.ico).
index.html
Outdated
|
|
||
| <ul> | ||
| <img src="images/logo.png" width="20%" height="20%" alt=""> | ||
| <li><a class="" href="#">HOME</a></li> |
There was a problem hiding this comment.
Colocar o link para as respectivas seções
index.html
Outdated
| </nav> | ||
|
|
||
| <!-- Slides --> | ||
| <div class=""> |
There was a problem hiding this comment.
É mais semântico usar a tag section ao invés de div, aqui e nas demais seções do site
| <div class=""> | ||
| <h2>Meus trabalhos</h2> | ||
| <h5>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</h5> | ||
| <button type="button" name="btnTudo">Tudo</button> |
There was a problem hiding this comment.
Assim como você fez no menu principal, aqui você também poderia usar a tag nav e uma lista.
|
|
||
| <!-- Quem Sou Eu --> | ||
| <div class=""> | ||
| <h2>Quem sou eu</h2> |
There was a problem hiding this comment.
Seria legal já customizar os textos, foto, contatos e redes sociais com suas informações, afinal esse será seu portfólio.
3 participants
@tarcilas