Skip to content

Arquivo index.html criado #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DanieleLimaSantos wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Arquivo index.html criado #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 173 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title></title>

@tarcilas tarcilas Dec 13, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Escreva um título para a página e coloque o favicon (icon.ico).

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/<font-> </font->awesome/4.7.0/css/font-awesome.min.css">

@happymoon happymoon Dec 12, 2018

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Atenção: Acho que seu editor auto-completou erradamente uma tag alí e se meteu no meio do FontAwesome!

</head>

<body>

<!--iníco do header-->
<header id="topo">
<div class="container">

<div id="logo">
<img src="images/logo.png" alt="Esta é uma logo marga da empresa">
</div>

<nav id="menu">
<a href="#">HOME</a>

@tarcilas tarcilas Dec 13, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coloque as referências para as respectivas seções.

<a href="#">SERVIÇOS</a>
<a href="#">PORTFOLIO</a>
<a href="#">SOBRE MIM</a>
<a href="#">CONTATO</a>
</nav>

</div>
</header>
<!--Fim do Header-->

<!--Início do banner-->
<div id="banner">
<img src="images/Slider.png" alt="">
<img src="images/slider01.png" alt="">
<article>

@tarcilas tarcilas Dec 13, 2018 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Acho que tag article não foi muito bem empregada, essa tag é normalmente usada para separar artigos, como em blogs, por exemplo. Eu usaria a tag section, para separar as seções definidas no menu.

<h1>BEM VIND@</h1>
<h2>CURABITUR IACULIS</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet tellus felis. Vestibulum at dignissim magna, non mollis urna. Ut congue ullamcorper erat, eu tristique sem finibus lacinia.</p>
</article>
</div>
<!--Fim do banner-->

<!--Início divisão serviços-->
<article>
<h1>Serviços</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet tellus felis.</p>
<hr>
</article>
<!--Fim da divisão serviços-->

<!--Início da sessão de serviços-->
<section>
<img src="images/Service1.png" alt="">
<h3>Websites</h3>

@tarcilas tarcilas Dec 13, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

É uma boa prática respeitar a hierarquia dos Headings h1, h2, h3..., não pular de h1 para h3 só por causa do tamanho da fonte, pois isso depois será mudado na aplicação de estilos.

<p>Exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</section>

<section>
<img src="images/Service2.png" alt="">
<h3>Templates</h3>
<p>consequat duis aute irure dolor in reprehenderit in voluptate</p>
</section>

<section>
<img src="images/Service3.png" alt="">
<h3>Temas WordPress</h3>
<p>Consectetur adipi sicing elit, sed do eiusmod tempor incididunt</p>
</section>
<!--Fim da sessão de serviços-->

<!--ìnício da divisão Trabalhos-->
<article>
<h1>Meus Trabalhos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
<hr>
</article>

<aside>

@tarcilas tarcilas Dec 13, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Não usaria a tag aside neste menu, pois ele está em uma das seções principais do site, não está à parte (aside), ou seja, destacado nas laterais.

<nav>
<ul>
<li>Tudo</li>
<li>Website</li>
<li>Template</li>
<li>Tema</li>
</ul>
</nav>
</aside>
<!--Fim da divisão trabalhos-->

<!--Inicio das figuras-->
<figure>
<img src="images/Portfolio01.png" alt="">
</figure>

<figure>
<img src="images/Portfolio02.png" alt="">
</figure>

<figure>
<img src="images/Portfolio03.png" alt="">
</figure>
<!--Fim das figuras-->

<!--Divisão Quem sou eu-->
<article>
<h1>Quem sou eu</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</p>

@tarcilas tarcilas Dec 13, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Você já pode customizar o texto, foto, contatos e redes sociais, afinal esse será seu portfólio.

<hr>
</article>

<figure>
<img src="images/photo.png" alt="">
<figcaption>Joana D'arc</figcaption>
</figure>
<!--Fim Quem sou eu-->

<!--Links Socias-->
<div class="social-links">
<a href="#" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a>
<a href="#" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a>
<a href="#" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a>
</div>

<!--Sessão sobre mim-->
<section>

<h3>Sobre mim</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis tincidunt placerat. Maecenas tincidunt gravida sem, aliquam maximus mauris. Quisque et posuere erat. Vivamus finibus malesuada consequat. Ut tempus urna magna, nec pretium purus consectetur sit amet. In vitae ligula ante. Donec facilisis mi nec venenatis tincidunt. Aenean sed odio dui.
</p>

<h3>Habilidades</h3>

<div class="progress">
<progress value="70" max="100">70%</progress>
<progress value="90" max="100">90%</progress>
<progress value="60" max="100">60%</progress>
<progress value="65" max="100">65%</progress>
</div>
</section>


<!--Início Contato-->
<article class="container">
<h1>Contato</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis tincidunt placerat. Maecenas tincidunt gravida sem, aliquam maximus mauris.</p>
<hr>

<form>
<input type="text" name="email" readonly="true" placeholder="meuemail@mail.com"/>
<label>+5521 987654-321</label>
</form>

<h4>Mídias</h4>
<hr>

@happymoon happymoon Dec 12, 2018

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Semanticamente o <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


<div class="social-links">
<a href="#" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a>
<a href="#" target="_blank" title="Twitter"><i class="fa fa-twitter"></i> </a>
<a href="#" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" target="_blank" title="Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a href="#" target="_blank" title="Dribbble"><i class="fa fa-dribbble"></i></a>
<a href="#" target="_blank" title="Google+"><i class="fa fa-google-plus-circle"></i </a>
</div>
</article>
<!--Fim Contato-->

<!--Rodapé-->
<footer id="rodape">
Women + Tech=< /strong >
</footer>

</body>
</html>