projeto final

Atividade_casa_alunas/luine-mauricio/Atividade_casa/css/style.css

@@ -0,0 +1,252 @@
+
+*{
+    margin: 0;
+    padding: 0;
+
+}
+
+html{
+    font-size: 100%;
+}
+
+body{
+    font-size: 1.6rem;
+}
+.header_nav_div_cabecalho{
+   width: 90%;
+    display: flex;
+   padding: 5%;
+   flex-direction: fixed;
+   justify-content: space-between;
+   padding-top: 3%;
+   background-color: rgb(201, 166, 201);
+
+
+
+}
+
+.header_nav_div_cabecalho_1,
+.header_nav_div_cabecalho_2,
+.header_nav_div_cabecalho_3,
+.header_nav_div_cabecalho_4,
+.header_nav_div_cabecalho_5{
+    color: rgb(49, 4, 49);
+    font-family: 'Courgette', cursive;
+    font-weight: bold;
+    font-size: 1.3rem;
+}
+
+
+.main_section_1{
+    padding-left: 20%;
+    text-align: center;
+
+
+}
+
+.section_div_1{
+    padding-top: 5%;
+    padding-left: auto;
+    padding-right: 20%;
+    padding-bottom: 5%;
+    font-family: 'Courgette', cursive;
+    font-size: 10.30rem;
+    font-family: 'Square Peg', cursive;
+    text-align: center;
+}
+
+
+.section_div_2{
+    display: flex;
+    flex-direction: row-reverse;
+    border: 0.1%;
+    background-image: url(./img/fundo\ 4\ .png);
+    max-width: 900px;
+    text-align: center;
+
+}
+
+.section_div_2_p{
+    width: 50%;
+    padding-right: 5%;
+    padding-left: 20%;
+    padding-top: 10%;
+    padding-bottom: 10%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    font-size: 1.9rem;
+    font-family: 'Courgette', cursive;
+    display: flex;
+    flex-direction: column;
+
+   }
+
+   .section_div_2_p2{
+       padding-top: 5.5%;
+       text-align: center;
+   }
+
+   .section_div_2_img{
+        padding-right: 1%;
+        text-align: center;
+        width: 50%;
+        background-position: center;
+
+   }
+.section_2_p,
+.section_3_p {
+    font-size: 1.50rem;
+    padding-top: 2.5%;
+    text-align: center;
+
+}
+
+
+.section_4_p{
+    padding-bottom: 2.5%;
+    font-size: 1.5rem;
+}
+.section_2_ul{
+    text-align: center;
+    font-size: 1.5rem;
+    padding-top: 3%;
+
+}
+
+
+
+p{
+    text-align: center;
+}
+
+.section_2{
+    padding-bottom: 13%;
+}
+.section_3{
+
+    background-color: rgb(201, 166, 201);
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding-bottom: 13%;
+
+}
+
+.section_4{
+
+    padding-bottom: 13%;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+
+
+}
+
+
+.section_4_img{
+    size: 10%;
+}
+.section_5{
+    padding-bottom: 13%;
+    background-color: rgb(223, 194, 194);
+}
+.section_2 p{
+    text-align: center;
+
+}
+
+.section_5{
+    text-align: center;
+
+}
+
+.section_2 h2,
+.section_3 h2,
+.section_4 h2,
+.section_5 h2{
+    text-align: center;
+    padding-top: 1.5%;
+    padding-bottom: 2.5%;
+    font-family: 'Courgette', cursive;
+    font-size: 2.5rem;
+
+}
+
+.link_github{
+    font-size: 1.5rem;
+}
+.section_5_link{
+    font-size: 1.5rem;
+
+}
+.footer_div{
+    text-align: center;
+    padding-top: 50px;
+    background-color: rgb(221, 216, 216);
+    background-size: 1px;
+    font-family: 'Courgette', cursive;
+    font-size: 1.3rem;
+    padding-bottom: 3%;
+}
+
+@media screen and (max-width:540px) {
+    .header_nav_div_cabecalho{
+        font-size: 10%;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .section_div_1{
+        font-size: 250%;
+    }
+
+    .section_div_2{
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .section_div_2_p{
+        font-size: 50%;
+    }
+
+    .section_2 h2,
+    .section_3 h2,
+    .section_4 h2,
+    .section_5 h2{
+        font-size: 90%;
+    }
+
+    .section_2_p,
+    .section_3_p,
+    .section_4_p{
+        font-size: 50%;
+        padding: 1%;
+    }
+
+    .section_2_ul{
+        font-size: 50%;
+        padding: 1%;
+    }
+    .section_4_img{
+        background-size: 10%;
+    }
+
+
+    .link_github{
+        font-size: 50%;
+    }
+
+    .section_5_link{
+        font-size: 50%;
+    }
+
+    .section_5 img{
+        height: 7rem;
+    }
+
+    .footer_div{
+        font-size: 40%;
+        padding: 1%;
+    }
+}

Atividade_casa_alunas/luine-mauricio/Atividade_casa/index.html

@@ -1,22 +1,100 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt-br">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
-    <title>Document</title>
+    <title>Portifólio Luine</title>
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courgette&family=Square+Peg&display=swap" rel="stylesheet">
 </head>
 <body>
-    <section>
-        <h1>Meu titulo</h1>
-        <p> Primeiro parágrafo</p>
-        <p> Segundo parágrafo</p>
-
-        <div>
-          <p>meu terceiro parágrafo</p>
+
+    <header>
+        <nav>
+            <div class="header_nav_div_cabecalho">
+                <a href="#" class="header_nav_div_cabecalho_1">Sobre mim</a>
+                <a href="#" class="header_nav_div_cabecalho_2">Minhas experiências</a>
+                <a href="#" class="header_nav_div_cabecalho_3">Minha formação</a>
+                <a href="#" class="header_nav_div_cabecalho_4">Meus projetos</a>
+                <a href="#" class="header_nav_div_cabecalho_5">Meu currículo</a>
+            </div>
+
+        </nav>
+
+    </header>
+
+    <main>
+
+        <section class="main_section_1">
+            <div class="section_div_1">
+                <p>Luine Mauricio</p>
+            </div>
+
+            <div class="section_div_2">
+                <img src="./img/imagem 2_luine.JPG" alt="imagem Luine sorrindo" class="section_div_2_img">
+
+                <div class="section_div_2_p">
+                    <p>Olá, meu nome é Luine, tenho 33 anos, cresci na periferia de São Paulo, especificamente no Capão Redondo.</p>
+
+                        <div class="section_div_2_p2">
+                            <p>Sou uma pessoa que ama desafios, e atualmente me desafiei a fazer uma transição de carreira para a área da tecnologia.</p>
+                        </div>
+                </div>
+
+
+
+            </div>
+
+
+        </section>
+
+        <section class="section_2">
+            <h2>Minhas experiências</h2>
+            <p class="section_2_p">Até o presente momento, todas minhas experiências atuais são dentro da área da minha formação, Comércio Exterior.</p>
+            <ul class="section_2_ul">
+                <p>Doze anos de experiência na área de Supply Chain;</p>
+                <p>Gestão de Compras;</p>
+                <p>Participação em grandes projetos;</p>
+                <p>Identificação de tendências de mercado e melhoria contínua;</p>
+                <p>Conhecimentos práticos do módulo MM do SAP e OSGT;</p>
+                <p>Experiência internacional: Índia e Alemanha.</p>
+
+            </ul>
+        </section>
+
+        <section class="section_3">
+            <h2>Minha formação</h2>
+            <p class="section_3_p">Com muito orgulho formada pela Universidade Presbiteriana Mackenzie, com bolsa 100% do Prouni.</p>
+        </section>
+
+        <section class="section_4">
+            <h2>Meus projetos</h2>
+            <p class="section_4_p">Alguns projetos como aluna frontend da {reprograma}</p>
+            <div class="section_4_img">
+                <img src="./img/github.png" alt="imagem github">
+            </div>
+
+            <div>
+                <a href="https://github.com/luinemauricio" target="blank" class="link_github">Clique aqui para conhecer minha página no Github</a>
+            </div>
+        </section>
+
+        <section class="section_5">
+            <h2>Meu currículo</h2>
+            <img src="./img/seta.png" alt="imagem seta" height=180px">
+            <p><a href="./curriculo/LUINE MAURICIO BONIFACIO_Abril 2022.pdf" target="blank" class="section_5_link"> clique aqui</a></p>
+        </section>
+
+    </main>
+
+    <footer>
+        <div class="footer_div">
+            <p>Site desenvolvido por Luine Mauricio - Aluna {Reprograma} - Copyright 2022</p>
         </div>
-          
-      </section>
+
+    </footer>
 </body>
 </html>