reprograma · jemimatheus · May 5, 2020 · May 5, 2020 · May 5, 2020 · May 5, 2020
diff --git a/assets/photos/Wallpaper-FCiências-Um-toque-de-verde-ao-domingo.jpeg b/assets/photos/Wallpaper-FCiências-Um-toque-de-verde-ao-domingo.jpeg
diff --git a/assets/photos/bd27f112d84644ad4c4edb983259fa22.jpg b/assets/photos/bd27f112d84644ad4c4edb983259fa22.jpg
diff --git a/assets/photos/blue-gradient-green-linear-3840x2160-c2-0000cd-41f012-a-300-f-14.svg b/assets/photos/blue-gradient-green-linear-3840x2160-c2-0000cd-41f012-a-300-f-14.svg
diff --git a/assets/photos/fios.jpg b/assets/photos/fios.jpg
diff --git a/assets/photos/imagem2.jpg b/assets/photos/imagem2.jpg
diff --git a/assets/photos/imagem3.jpg b/assets/photos/imagem3.jpg
diff --git a/assets/photos/imagem4.jpg b/assets/photos/imagem4.jpg
diff --git a/assets/photos/images.jpg b/assets/photos/images.jpg
diff --git a/assets/photos/limao.jpg b/assets/photos/limao.jpg
diff --git a/assets/photos/michele.jpg b/assets/photos/michele.jpg
diff --git a/assets/photos/mulher1.jpg b/assets/photos/mulher1.jpg
diff --git a/assets/photos/mundo.PNG b/assets/photos/mundo.PNG
diff --git a/assets/photos/one-piece-stampede-visual.png b/assets/photos/one-piece-stampede-visual.png
diff --git a/assets/photos/semana 8.jpg b/assets/photos/semana 8.jpg
diff --git a/assets/photos/super hero.jpg b/assets/photos/super hero.jpg
diff --git a/assets/photos/todo.PNG b/assets/photos/todo.PNG
diff --git 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">
@@ -30,16 +30,234 @@
         </div>
       </div>
       </nav>
+     <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
+        <ol class="carousel-indicators carousel-fade">
+          <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/photos/imagem4.jpg" class=" img_carousel" alt="Imagem 1">
+            <div class="carousel-caption d-none d-md-block color">
+
+            </div>
+          </div>
+          <div class="carousel-item ">
+            <img src="./assets/photos/imagem2.jpg" class="img_carousel" alt=" Imagem 2">
+            <div class="carousel-caption d-none d-md-block color ">
+
+            </div>
+          </div>
+          <div class="carousel-item">
+            <img src="./assets/photos/imagem3.jpg" class="img_carousel" alt="imagem 3 ">
+            <div class="carousel-caption d-none d-md-block color">
+
+            </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>
+      <!--SOBRE-->
+      <section >
+
+        <h3 class=nome> Jemima Matheus</h3>
+        <!--i class="fa fa-code d-flex flex-column flex-md-row justify-content-md-around p-3 "></i-->
+        <p class="nome_curso">Desenvolvedora front-end</p>
+        <div class=" d-flex flex-column flex-md-row justify-content-md-around p-3">
+          <a class="link-sobre" href="https://github.com/jemimatheus" target="_blank">
+            <i class=" fab fa-github-alt m-b3"></i>
+            <span>Github</span>
+          </a>
+          <a class="link-sobre" href="https://www.linkedin.com/in/jemima-matheus-41a4386a/" target="_blank">
+            <i class=" fab fa-linkedin m-b3"></i>
+            <span>Linkedin</span>
+          </a>
+          <a class="link-sobre" href="mailto:messenger.mariah2017@gmail.com" target="_blank">
+            <i class=" fas fa-envelope m-b3"></i>
+            <span>E-mail</span>
+          </a>
+        </div>
+      </section>
+      <!--Sobre/ Habilidades-->
+      <section class="bg-roxo d-flex flex-column flex-lg-row justify-content-lg-around text-center text-white">
+
+        <div class="habilidades w-100 p-5 ">
+          <h2 >Habilidades</h2>
+
+          <div class="icones  row justify-content-center p-2">
+
+            <div>
+              <div class="text-center col">
+                <i class="fab fa-sass"></i>
+                <p>Sass</p>
+              </div>
+              <div class="text-center col">
+                <i class="fab fa-bootstrap"></i>
+                <p>bootstrap</p>
+              </div>
+              <div class="text-center col">
+                <i class="fab fa-html5"></i>
+                <p>HTML</p>
+              </div>
+            </div>
+            <div>
+              <div class="text-center col">
+                <i class="fab fa-css3-alt"></i>
+                <p>CSS</p>
+              </div>
+              <div class="text-center col">
+                <i class="fab fab fa-react"></i>
+                <p>React</p>
+              </div>
+              <div class="text-center col">
+                <i class="fab fa-git-alt"></i>
+                <p>Git</p>
+              </div>
+            </div>
+            <div>
+              <div class="text-center col">
+                <i class="fab fa-js"></i>
+                <p>Javascript</p>
+              </div>
+              <div class="text-center col">
+                <i class="fas fa-book"></i>
+                <p>JQuery</p>
+              </div>
+              <div class="text-center col">
+                <i class="fas fa-tasks"></i>
+                <p>Scrum</p>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        <div class="sobre w-100 p-5">
+          <h2>Sobre</h2>
+          <p>Aluna do curso de front-end do {Reprograma}.</p>
+          <p> Estou na reprograma para uma transição de carreira para Devgirl e quero, ou melhor, 
+            farei diferença na área da tecnologia.
+          Sou focada nos meus estudos e tento sempre absorver o máximo de tudo, dando o máximo de mim.
+        Além da Reprograma também estou no penúltimo semestre do curso de Análise e desenvolvimento de Sistemas. 
+      Também tenho interesse em algumas outras áreas e linguagens como python e Java.</p>
+        </div>
+      </section>
+
+
+      <h4 class=" text-center mt-3 color_geral">Portfólio</h4>
+
+       <!--Section Modal/ Card Modal!-->
+      <section class=" row justify-content-lg-around p-4">
+      <div class="card m-5" style="width: 18rem;">
+          <img src="./assets/photos/michele.jpg" class="card-img-top" alt="...">
+          <div class="card-body text-center">
+            <h5 class="card-title color_geral">M de Maravilhosa</h5>
+            <p class="card-text color_geral">Projeto foi relacionado à criação de uma pagina de perfil com o HTML e CSS de uma mulher que nos inspira.</p>
+            <button type="button" class="m-5 btn bg-roxo text-white m-auto  " data-toggle="modal" data-target="#modal1">
+              Veja mais
+            </button>
+          </div>
+        </div>
+
+<!-- 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">Sobre o Projeto M de Maravilhosa</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Na quarta semana do curso de front-end, nós fomos desafiadas a criar uma pagina de perfil de uma mulher que nos inspira. Para a criação utilizamos um modelo já pronto do figma  e o desafio do desenvolvimento foi feito através do html e css.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn bg-roxo text-white" data-dismiss="modal">Fechar</button>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+<!--MODAL2-->
+<div class="card m-5" style="width: 18rem;">
+  <img src="./assets/photos/todo.PNG" class="card-img-top" alt="...">
+  <div class="card-body text-center">
+    <h5 class="card-title">Projeto To do List</h5>
+    <p class="card-text">Projeto consiste na criação de uma lista de tarefas.</p>
+    <button type="button" class="m-5 btn bg-roxo text-white m-auto" data-toggle="modal" data-target="#modal2">
+      Veja mais
+    </button>
+  </div>
+</div>
+
 
-
 
-
-
+<!-- CARDModa2 -->
+<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">To do List</h5>
+<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+  <span aria-hidden="true">&times;</span>
+</button>
+</div>
+<div class="modal-body">
+  <p>Na oitava semana do curso de front-end, nós fomos desafiadas a criar uma lista de tarefas. Para o desenvolvimento foi utilizado o html,css e java script. Os desafios da lista era que deveriamos conseguir excluir um item da lista, marcar como concluido, marcar todos eles e excluir todos.</p>
+</div>
+<div class="modal-footer">
+<button type="button" class="btn bg-roxo text-white" data-dismiss="modal">Fechar</button>
 
-
+</div>
+</div>
+</div>
+</div>
 
+<!--MODAL3 -->
+<div class="card m-5" style="width: 18rem;">
+  <img src="./assets/photos/mundo.PNG" class="card-img-top" alt="...">
+  <div class="card-body text-center">
+    <h5 class="card-title">Mundo Gelado</h5>
+    <p class="card-text">Projeto consiste na replicação de uma página do mundo gelado.</p>
+    <button type="button" class="m-5 btn bg-roxo text-white m-auto" data-toggle="modal" data-target="#modal3">
+      Veja mais
+    </button>
+  </div>
+</div>
+<!-- Button trigger modal -->
 
 
+<!-- CARD Modal3 -->
+<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">Mundo Gelado</h5>
+<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+  <span aria-hidden="true">&times;</span>
+</button>
+</div>
+<div class="modal-body">
+  <p>Na terceira semana do curso de front-end, nós fomos desafiadas a recriar a pagina do mundo gelado. Para o desenvolvimento foi utilizado o html e css. Os desafios do projeto era deixar a pagina responsiva.</p>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn bg-roxo text-white" data-dismiss="modal">Fechar</button>
+  <!--<a href="" target="_blank" class="btn bg-roxo text-white">Salvar</a>-->
+</div>
+</div>
+</div>
+</div>
+      </section>
     <script src="./js/jquery-3.4.1.min.js"></script>
     <script src="./js/bootstrap.min.js"></script>
     <script src="https://kit.fontawesome.com/4fe8d55b33.js" crossorigin="anonymous"></script>

diff --git a/styles/style.css b/styles/style.css
@@ -1,7 +1,61 @@
 .bg-roxo{
-    background-color: #7E459B;
+    background-color: #57BC90;
+
 }
 
 a:hover{
   font-weight: bold;
-}
+}
+
+.img_carousel{
+  object-fit: cover;
+  object-position: 0 20%;
+  width: 100%;
+  height: 65vh;
+  text-decoration-color: rgb(2, 58, 5);
+
+
+}
+.color_geral{
+  color: rgb(2, 58, 5);
+}
+
+.nome{
+  display: flex;
+  justify-content: center;
+  margin-top: 30px;
+  color: rgb(2, 58, 5);
+
+
+}
+.nome_curso{
+  color: rgb(2, 58, 5);
+}
+p{
+  display: flex;
+  justify-content: center;
+  padding-top: -40px;
+  font-style: oblique;
+
+}
+.link-sobre{
+  color: rgb(2, 58, 5);
+}
+
+.link-sobre:hover{
+  rgb(2, 58, 5);
+  color: rgb(2, 58, 5);
+}
+.fas{
+  font-size: 30px;
+}
+.fab{
+  font-size: 30px;
+}
+
+button{
+  width: 100px ;
+}
+button:hover{
+  opacity: 0.8;
+}