diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e23c181
--- /dev/null
+++ b/index.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/<font->                 </font->awesome/4.7.0/css/font-awesome.min.css">
+</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>
+        <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>
+        <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>
+     <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>
+      <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>
+    <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>
+
+    <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>
\ No newline at end of file
