Primeira parte do desafio - Estrutura HTML #7
Conversation
site.html
Outdated
| <section> | ||
| <h1>Serviços</h1> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod diam eget ex rhoncus, sed.</p> | ||
| <hr /> |
There was a problem hiding this comment.
<hr> tem a função de separar áreas que abordam conteúdos com temas diferentes e não deveria ser usado apenas por questões visuais. Referência: https://www.w3schools.com/tags/tag_hr.asp
site.html
Outdated
| <section> | ||
| <h1>Meus Trabalhos</h1> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius consectetur felis ut condimentum. Aliquam.</p> | ||
| <hr /> |
site.html
Outdated
| </ul> | ||
| </nav> | ||
| <article> | ||
| <img src="images/Portfolio01.png" height= "250px" alt="Portolio01" /> |
There was a problem hiding this comment.
Não é necessário especificar a medida px (pixel) nos atributos do elemento <img>
| <img src="images/Portfolio01.png" height= "250px" alt="Portolio01" /> | |
| <img src="images/Portfolio01.png" height= "250" alt="Portolio01" /> |
site.html
Outdated
| <p>Lorem ipsum...</p> | ||
| </article> | ||
| <article> | ||
| <img src="images/Portfolio02.png" height= "250px" alt="Portfolio02" /> |
There was a problem hiding this comment.
| <img src="images/Portfolio02.png" height= "250px" alt="Portfolio02" /> | |
| <img src="images/Portfolio02.png" height= "250" alt="Portfolio02" /> |
site.html
Outdated
| <p>Lorem ipsum...</p> | ||
| </article> | ||
| <article> | ||
| <img src="images/Portfolio03.png" height= "250px" alt="Portfolio03" /> |
There was a problem hiding this comment.
| <img src="images/Portfolio03.png" height= "250px" alt="Portfolio03" /> | |
| <img src="images/Portfolio03.png" height= "250" alt="Portfolio03" /> |
site.html
Outdated
| <section> | ||
| <h1>Quem sou eu</h1> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis dui malesuada purus aliquet accumsan.</p> | ||
| <hr /> |
site.html
Outdated
| <h2>Sobre mim</h2> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id felis vestibulum, laoreet ligula sed, fermentum libero. In blandit tristique leo id dictum. Nullam gravida vulputate ipsum. Nulla vel lacus sapien. Praesent dapibus mi justo, nec fringilla nisi congue quis. Suspendisse at sapien nec odio gravida placerat. Aliquam iaculis quis dui et ullamcorper. Vestibulum id dui tempus, feugiat velit non, bibendum leo. Nam in mollis libero. In sit amet diam in mauris sodales tincidunt et quis velit. Ut sed odio nec erat eleifend mollis vitae.</p> | ||
| </div> | ||
| <div> |
There was a problem hiding this comment.
Aqui você poderia usar o <article>, da mesma forma que fez mais acima.
site.html
Outdated
| <section> | ||
| <h1>Contato</h1> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id enim vitae quam suscipit porta.</p> | ||
| <hr /> |
site.html
Outdated
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id enim vitae quam suscipit porta.</p> | ||
| <hr /> | ||
| <div> | ||
| <p>[email protected]</p> |
There was a problem hiding this comment.
Você pode facilitar a vida do teu usuário colocando seu email clicável.
| <p>[email protected]</p> | |
| <a href="mailto:[email protected]">[email protected]</a> |
site.html
Outdated
| <hr /> | ||
| <div> | ||
| <p>[email protected]</p> | ||
| <p>+55 21 98765-4321</p> |
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
| <p>+55 21 98765-4321</p> | |
| <a href="tel:+5521987654321">+55 21 98765-4321</a> |
site.html
Outdated
| <p>+55 21 98765-4321</p> | ||
| </div> | ||
| <h2>Mídias</h2> | ||
| <hr /> |
site.html
Outdated
| <hr /> | ||
| </section> | ||
| <footer> | ||
| <p>Women + Tech = < /strong> </p> |
There was a problem hiding this comment.
⭐️ Pra exibir caracteres especiais é importante usar uma grafia diferente para que eles não sejam confundidos com elementos funcionais do código. Link de referência: https://css-tricks.com/snippets/html/glyphs/
| <p>Women + Tech = < /strong> </p> | |
| <p>Women + Tech = </strong> </p> |
tarcilas
left a comment
tarcilas
left a comment
There was a problem hiding this comment.
Muito bom! Fico muito feliz com seu engajamento no desafio, mesmo não tendo ido no evento.
| @@ -0,0 +1,123 @@ | |||
|
|
|||
There was a problem hiding this comment.
Como o site só terá uma página mesmo, melhor renomear o arquivo para o padrão: index.html
site.html
Outdated
| <nav> | ||
| <ul> | ||
| <li><a href=""><img src="images/logo.png" width= "160" height= "50"/></a></li> | ||
| <li><a href="">HOME</a></li> |
There was a problem hiding this comment.
Colocar a referência para as respectivas seções
| <figure> | ||
| <img src="images/Slider.png" alt="Image-Slider" width="100%" height="100%"/> | ||
| <figcaption> | ||
| <h1>BEM VIND@</h1> |
There was a problem hiding this comment.
Não acho muito adequando colocar tudo isso dentro da tag figcaption, ela é mais usada para uma breve descrição da figura
https://www.w3schools.com/tags/tag_figcaption.asp
site.html
Outdated
| <hr /> | ||
| <article> | ||
| <img src="images/Service1.png" alt="Service1" /> | ||
| <h3>Websites</h3> |
There was a problem hiding this comment.
É uma boa prática respeitar a hierarquia dos Headings h1, h2, h3..., não usar só por causa do tamanho da fonte, pois isso depois será mudado na aplicação de estilos
| <p>Lorem ipsum...</p> | ||
| </section> | ||
| <section> | ||
| <h1>Quem sou eu</h1> |
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.
There was a problem hiding this comment.
Vou fazer na parte 2 do desafio!
3 participants
No description provided.