diff --git a/assets/banner origami.png b/assets/banner origami.png
new file mode 100644
index 0000000..dac7810
Binary files /dev/null and b/assets/banner origami.png differ
diff --git a/img/anaAlexandrino.jpeg b/img/anaAlexandrino.jpeg
new file mode 100644
index 0000000..937cbb5
Binary files /dev/null and b/img/anaAlexandrino.jpeg differ
diff --git a/img/montagem fagun.png b/img/montagem fagun.png
new file mode 100644
index 0000000..2a43125
Binary files /dev/null and b/img/montagem fagun.png differ
diff --git a/img/sorvete2019.jpg b/img/sorvete2019.jpg
new file mode 100644
index 0000000..eac4f83
Binary files /dev/null and b/img/sorvete2019.jpg differ
diff --git a/img/thiago diniz.jpg b/img/thiago diniz.jpg
new file mode 100644
index 0000000..52483f7
Binary files /dev/null and b/img/thiago diniz.jpg differ
diff --git a/index.html b/index.html
index 39e6e9b..f78230a 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
     <title>Document</title>
 </head>
 <body>
-    <nav class="navbar navbar-expand-lg navbar-light bg-roxo">
+<nav class="navbar navbar-expand-lg navbar-light bg-roxo">
       <div class="container">
         <a class="navbar-brand text-white" href="https://reprograma.com.br/" target="_blank">{Reprograma}</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menudesktop" aria-controls="menudesktop" aria-expanded="false" aria-label="Alterna navegação">
@@ -29,14 +29,230 @@
           </ul>         
         </div>
       </div>
-      </nav>
+</nav>
+
+      <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
+        <ol class="carousel-indicators">
+          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
+          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
+          <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
+        </ol>
+        <div class="carousel-inner">
+          <div class="carousel-item active">
+            <img src="./assets/banner origami.png" class="d-block w-100 imagem-carousel" alt="...">
+            <div class="carousel-caption d-none d-md-block text-body ">
+              <h2 class="destaque">FAGUN</h2>
+              <p class="destaque">Yoruba nigeriano sec.XIV, .n, girar; alongar; esticam; rotação; continuação; trecho...  </p>
+            </div>
+          </div>
+          <div class="carousel-item">
+            <img src="./img/montagem fagun.png" class="d-block w-100 imagem-carousel" alt="...">
+            <div class="carousel-caption d-none d-md-block text-body ">
+              <h2 class="destaque">Gà mí ORÍ</h2>
+              <h6 class="destaque">Ioruba nagô-brasileiro,  Gà: .n, Desenvolvimento; Mí: .p.p; mi, meu, minha; Orí: .n, Cabeça. </h6>
+            </div>
+          </div>
+          <div class="carousel-item">
+            <img src="./img/sorvete2019.jpg" class="d-block w-100 imagem-carousel" alt="...">
+            <div class="carousel-caption d-none d-md-block text-body ">
+              <h2 class="destaque">Desenvolvimento Web</h2>
+              <p class="destaque"> Projetos de aplicações à entrega de site implementado para cliente </p>
+            </div>
+          </div>
+        </div>
+        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="sr-only">Previous</span>
+        </a>
+        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="sr-only">Next</span>
+        </a>
+      </div>
+
+      <section class=" text-center m-5">
+        <i class="fas fa-ankh justify-content icons_socialmedia "></i>
+          <h4 class="">Odaraya Mello</h4>
+          <h5 class="font-italic font-weight-lighter">Pessoa Desenvolvedora</h5>
+        
+          
+        <div class="d-flex flex-column flex-md-row justify-content-around my-5">
+          <a  href="https://github.com/Odaraya" target="_blank">
+              <i class="fab fa-github icons_socialmedia"></i>
+              <span >github</span>
+          </a>
+          <a  href="https://www.linkedin.com/in/odaraya-mello/" target="_blank">
+              <i class="fab fa-linkedin icons_socialmedia"></i>
+              <span >linkedin</span>
+          </a>
+          <a href="malito:odarayamello@gmail.com" target="_blank">
+              <i class="fas fa-envelope icons_socialmedia"></i>
+              <span > gmail.com</span>
+          </a>
+        </div>
+      </section>
+
+  <section class="habilities d-flex flex-wrap justify-content-around text-white">
+      <div class="icons m-4 col ">
+          <h3 class="d-flex justify-content-center m-4">Habilidades</h3>
+          <div class="d-flex justify-content-center">
+              <div class="text-center">
+                <i class="col fab fa-js-square"></i>
+                <p class="m-2">Javascript</p>
+                <i class="col fab fa-css3-alt"></i>
+                <p class="m-2">Css</p>
+                <i class="col fab fa-bootstrap"></i>
+                <p class="m-2">Bootstrap</p>
+                <i class="col fas fa-palette"></i>
+                <p class="m-2">Artista Visual</p>
+              </div>
+              <div class="text-center">
+                <i class="col far fa-file-code"></i>
+                <p class="m-2">JQuery</p>
+                <i class="col fab fa-html5"></i>
+                <p class="m-2">Html5</p>
+                <i class="col fas fa-tasks"></i>
+                <p class="m-2">Scrum</p>
+                <i class="col fas fa-fist-raised"></i>
+                <p class="m-2">Afro-Br People</p>
+              </div>
+
+              <div class="text-center">
+                <i class="col fab fa-react"></i>
+                <p class="m-2">React</p>
+                <i class="col fab fa-sass "></i>
+                <p class="m-2">Sass</p>
+                <i class="col fab fa-git-alt"></i>
+                <p class="m-2">Github</p>
+                <i class="col fas fa-adjust"></i>
+                <p class="m-2">Non-binary</p>
+              </div>
+          </div>
+      </div>
+      
+      <div class="icons m-4 col text-center">
+          <h3 class="m-4">Sobre</h3>
+          <p>Aluna do bootcamp de front-end {reprograma}</p>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex optio ad consectetur commodi, repellat
+              ratione laudantium? Ut, optio rem voluptate praesentium natus nesciunt molestias eos, tenetur cupiditate
+              fugit ipsum maiores.</p>
+          <p>interesse</p>
+      </div>
+  </section>
+
+  <h3 class="text-center m-4 font-weight-bold">Portifólio</h3>
+
+  <div class="d-flex flex-wrap justify-content-around">
+      <div class="card text-center" style="width: 18rem;">
+          <img src="./img/anaAlexandrino.jpeg" class="card-img-top" alt="...">
+          <div class="card-body">
+              <h5 class="card-title">M de Maravilhosa</h5>
+              <button type="button" class="btn bg-roxo text-white m-auto m-5" data-toggle="modal" data-target="#modal1">
+                Launch demo modal
+              </button>
+          </div>
+      </div>
+<!-- Button trigger modal -->
+
+
+<!-- Modal -->
+<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
 
-   
 
-    
-  
+      <div class="card text-center" style="width: 18rem;">
+          <img src="./img/thiago diniz.jpg" class="card-img-top" alt="...">
+          <div class="card-body">
+              <h5 class="card-title">Artistico</h5>
+              <button type="button" class="btn bg-roxo text-white m-auto m-5" data-toggle="modal" data-target="#modal2">
+                Launch demo modal
+              </button>
+          </div>
+      </div>
+<!-- Button trigger modal -->
+
+
+<!-- Modal -->
+<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <a href="http://cargocollective.com/odarayamello"></a>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+      <div class="card text-center" style="width: 18rem;">
+          <img src="./assets/portfolio-nome.png" class="card-img-top" alt="...">
+          <div class="card-body">
+              <h5 class="card-title">To Do List</h5>
+              <button type="button" class="btn bg-roxo text-white m-auto m-5" data-toggle="modal" data-target="#modal3">
+                Launch demo modal
+              </button>
+          </div>
+      </div>
+  </div>
+<!-- Button trigger modal -->
 
-  
+
+<!-- Modal -->
+<div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+  <footer class="bg-roxo footer text-center md-3">
+      <p class="text-white">Desenvolvido por <a class="text-white font-weight-bold"
+              href="X">Odaraya Mello </a>{reprograma} 2020</p>
+  </footer>
+
+  <script src="js/jquery-3.4.1.min.js"></script>
+  <script src="js/bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
+</body>
 
 
 
diff --git a/styles/style.css b/styles/style.css
index a24a761..2f002c9 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -4,4 +4,55 @@
 
 a:hover{
   font-weight: bold;
+}
+
+.imagem-carousel {
+  object-fit: cover;
+  object-position: 0 40%;
+  height: 65vh;
+}
+
+.destaque {
+  text-shadow:1px 1px 2px whitesmoke;
+
+}
+
+.icons_socialmedia {
+  color: #7E459B;
+}
+span{
+  color: #7E459B;
+}
+.about {
+  padding: 40px;
+}
+
+.icons {
+  color: white;
+
+}
+
+.habilities {
+  background-color:#7E459B;
+}
+
+.card-img-top {
+  object-fit: fill;
+ height: 300px;
+ border-bottom: 1px solid rgb(216, 209, 209);
+
+}
+
+.btn-roxo {
+  color: #fff;
+  background-color: #7E459B;
+}
+
+.btn-roxo:hover {
+  color: beige;
+}
+
+.footer {
+  margin-top: 40px;
+  padding: 10px;
 }
\ No newline at end of file
