Skip to content
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.

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

Desafio 2 - Implementação do CSS3 #19

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Binary file added Thumbs.db
Binary file not shown.
Binary file modified images/Thumbs.db
Binary file not shown.
1 change: 1 addition & 0 deletions images/icons/iconfinder_Behance_2745025.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/icons/iconfinder_LinkedIN_2744970.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/icons/iconfinder_github_287583.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
195 changes: 195 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title> Desafio 1</title>

<!--<link rel="stylesheet" type="text/css" href="style.css"> -->
<link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>

<header>
<img src="images/logo.png" alt="LogoWooMakeCoders">
<nav>
<ul>
<li><a href="#servicos">HOME</a></li>
<li><a href="#website">SERVICOS</a></li>
<li><a href="#">SOBRE MIM</a></li>
<li><a href="#">CONTATO</a></li>
</ul>
</nav>
</header>



<section id="welcome">


<div id="textos">
<H1>BEM VIND@</H1>
<h3>Maiara Costa</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>




<img src="images/slider01.png" alt="Borboleta" class="slider">

</section>




<section id="servicos">
<h1>Serviços</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<hr />

<div id="container">

<div>
Copy link

@happymoon happymoon Jan 13, 2019

Choose a reason for hiding this comment

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

⚠️ Nessa parte aqui eu recomendo que você atribua uma classe pro <div> pra garantir que você pode a qualquer momento incluir um novo <div> alí dentro dos que já existem e não vai ter problema com herança do estilo.

Copy link
Author

@IT-maiara-costa IT-maiara-costa Jan 13, 2019

Choose a reason for hiding this comment

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

Darei uma mexida no código. As divs do id container, devem receberem as classes?

<img src="images/Service1.png" alt="Websites" id="website">
<h3>Websites</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </p>
</div>

<div>

Choose a reason for hiding this comment

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

⚠️

<img src="images/Service2.png" alt="Templates" class="templates">
<h3>Templates</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </p>
</div>

<div>

Choose a reason for hiding this comment

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

⚠️

<img src="images/Service3.png" alt="Temas" class="temas">
<h3>Temas Wordpress</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

</div>
</div>
</section>


<section id="trabalhos">
<h1>Meus Trabalhos</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<hr />
Copy link

@happymoon happymoon Jan 13, 2019

Choose a reason for hiding this comment

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

🌶 O <hr /> tem uma função semântica de dividir conteúdos diferentes e nesse caso o parágrafo acima dele é totalmente relacionado ao conteúdo que está abaixo, então se é apenas uma questão visual recomendo colocar uma borda no topo ou abaixo do elemento mais próximo.

Copy link
Author

Choose a reason for hiding this comment

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

Entendi, obrigada pelo feedback,


<!--<div style="border-top: 2px solid purple"></div> -->

<nav>
<ul>
<li>Tudo</li>
<li>Website</li>
<li>Template</li>
<li>Tema</li>
</ul>
</nav>

<div class="works">
<figure>
<img src="images/Portfolio01.png" alt="Website1">
<figcaption> Thumbnail Thumbnail ThumbnailThumbnailThumbnailThumbnail </figcaption>
</figure>

<figure>
<img src="images/Portfolio02.png" alt="Website2">
<figcaption> Thumbnail caption </figcaption>
</figure>
<figure>
<img src="images/Portfolio03.png" alt="Website3">
<figcaption> Thumbnail caption </figcaption>

</figure>


</div>

</section>

<svg id="bigTriangleShadow" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path id="trianglePath1" d="M0 0 L50 100 L100 0 Z"></path>
</svg>


<section id="sobreeu">

<h1>Quem sou eu</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<hr />

Choose a reason for hiding this comment

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

🌶


<figure>
<img src="images/photo.png" alt="Fotografia">
<figcaption>Joana D'arc </figcaption>
</figure>



<h3>Sobre mim</h3>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<h3>Habilidades</h3>


<div>
<label for="Javascript">JavaScript</label>
<progress id="Javascript" max="100" value="70">70%</progress>


<label for="HTMLCSS"> HTML & CSS</label>
<progress id="HTMLCSS" max="100" value="50">50% </progress>


<label for="jQuery">jQuery</label>
<progress id="jQuery" max="100" value="70">70% </progress>


<label for="wordpress">Wordpress</label>
<progress id="wordpress" max="100" value="100">100% </progress>
</div>

</section>


<section id="contato">
<h1>Contato</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<hr />

Choose a reason for hiding this comment

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

🌶


<address>
<a href="mailto:[email protected]">[email protected]</a> <br> <br>
<a href="tel:+5521987654321">+55 21 987654-321</a>
</address>

<h3>Mídias</h3>

<hr />

Choose a reason for hiding this comment

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

🌶


<div id="icons">
<a href="google.com"> <img src="images/icons/iconfinder_Behance_2745025.svg" alt="behance icon" > </a>
<a href="google.com"> <img src="images/icons/iconfinder_github_287583.svg" alt="github icon"> </a>
<a href="google.com"> <img src="images/icons/iconfinder_LinkedIN_2744970.svg" alt=" linkedin icon"> </a>
</div>

</section>

<footer>
Women + Tech = &lt; &sol;strong &gt;
</footer>

</body>
</html>
Loading