future4code · Pri1901 · Aug 27, 2021
diff --git a/semana3/portifolio/IMG_3135.jpg b/semana3/portifolio/IMG_3135.jpg
diff --git a/semana3/portifolio/IMG_3138.jpg b/semana3/portifolio/IMG_3138.jpg
diff --git a/semana3/portifolio/index.html b/semana3/portifolio/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<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" type="text/css" href="style.css">
+    <title>Meu Portifólio</title>
+</head>
+
+<body>
+    <header class="header-container">
+<div class="header">
+    <div class="checkbox-container">
+        <div class="checkbox-wrapper">
+            <input type="checkbox" id="toggle">
+            <label class="checkbox" for="toggle">
+                <div class="trace"></div>
+                <div class="trace"></div>
+                <div class="trace"></div>
+              </label>
+              <div class="menu"></div>  
+              <nav class="menu-items">
+                  <ul>
+                      <li>
+                          <a href="#">Home</a>
+                      </li>
+                      <li>
+                          <a href="#">Sobre</a>
+                      </li>
+                      <li>
+                          <a href="#">Projetos</a>
+                      </li>
+                  </ul>
+              </nav>
+        </div>
+
+    </div>
+    </div>
+    <!-- <h1>Mara Priscilla</h1>
+        <h2>Desenvolvedora Back-End</h2> -->
+        <div class="social-media">
+            <a href="#">Linkedin</a>
+            <a href="#">GitHub</a>
+        </div>
+
+    </header>
+
+        <main class="container">
+<div class="card-container">
+    <div class="card">
+        <div class="card-wrapper"></div>
+        <h2>Projetos!</h2>
+
+    </div>
+    <div class="card-text">
+Olá!! me chamo Priscilla e sou uma profissional em Transição de Carreira. </br>
+Desde sempre atuei na aréa do Turismo e lá realizei muitos SONHOS :) :) :). </br>  
+Hoje decidi mudar minha tragetoria, </br> Foco em expandir meus conhecimentos e vi 
+na área de Tecnologia uma oportunidade de crescimento Profissional como Pessoal.
+
+    </div>
+</div>
+        </main>
+
+        <footer class="footer">
+Feito por Mara Priscilla :)
+                    </footer>
+
+
+</body>
+</html>
diff --git a/semana3/portifolio/style.css b/semana3/portifolio/style.css
@@ -0,0 +1,255 @@
+@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    color: #2c3e50;
+}
+
+/*HEADER*/
+
+.header-container {
+    height: 80vh;
+    width: 100vw;
+    background-color: #fdeff9;
+    background-image: url('./IMG_3135.jpg'); 
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    box-sizing: border-box;
+    padding: 0 80px;
+    position: relative;
+} 
+/* h1 {
+    font-size: 50px;
+    text-transform: uppercase;
+    letter-spacing: 4px;
+} */
+
+/* h2 {
+    text-transform: uppercase;
+    letter-spacing: 4px;  */
+}
+
+.social-media {
+    margin-top: 1rem;
+    display: flex;
+
+    }
+
+    .social-media a {
+        text-decoration: none;
+        color: #2c3e50;
+        padding: 1rem 4rem;
+        border: 1px solid #2c3e50;
+        min-width: 4rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: .5s ease-in-out;
+    }
+    a:hover {
+        background-color: #fdeff9;
+    }
+
+.checkbox-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.checkbox {
+    height: 100px;
+    width: 80px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 9999;
+    transition: 400ms ease-in-out 0s;
+}
+.checkbox .trace {
+    width: 50px;
+    height: 2px;
+    background-color: #2c3e50;
+    position: absolute;
+    border-radius: 4px;
+    transition: 0.5s ease-in-out;
+}
+.checkbox .trace:nth-child(1) {
+top: 26px;
+transform: rotate(0);
+}
+
+.checkbox .trace:nth-child(2) {
+top: 46px;
+transform: rotate(0);
+}
+
+.checkbox .trace:nth-child(3) {
+top: 66px;
+transform: rotate(0);
+}
+
+#toggle {
+    display: none;
+}
+
+.menu {
+    position: absolute;
+    top: 28px;
+    right:  30px;
+    background-color: transparent;
+    height: 4px;
+    width: 10px;
+    border-radius: 50%;
+    box-shadow: 0px 0px 0px 0px #fdeff9;
+    z-index: -1;
+    transition: 400ms ease-in-out 0s;
+}
+
+.menu-items {
+    top: 0;
+    left: 0;
+    width: 65%;
+    height: 50vh;
+    display: flex;
+    justify-content: center;
+    z-index: 2;
+    opacity: 0;
+    visibility: hidden;
+    transition: 400ms ease-in-out 0;
+}
+
+.menu-items ul {
+    list-style-type: none;
+}
+
+.menu-items ul li a{
+    margin: 10px 0;
+    color: #2c3e50;
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: 4px;
+    font-size: 40px;
+}
+
+#toggle:checked + .checkbox .trace:nth-child(1) {
+    transform: rotate(45deg);
+    top: 47px;
+
+}
+
+#toggle:checked + .checkbox .trace:nth-child(2) {
+    transform: translate(-100px);
+    width: 30px;
+    visibility: hidden;
+    opacity: 0;
+}
+
+#toggle:checked + .checkbox .trace:nth-child(3) {
+    transform: rotate(-45deg);
+    top: 48px;
+} 
+
+#toggle:checked + .checkbox {
+    background-color: #fdeff9;
+
+}
+
+#toggle:checked ~ .menu {
+    box-shadow: 0px 200px 0px 100vmax #fdeff9;
+}
+
+#toggle:checked ~ .menu-items {
+    visibility: visible;
+    opacity: 1;
+}
+
+.container {
+    height: auto;
+    width: 100%;
+    display: flex;
+flex-direction: column;
+justify-content: space-evenly;
+margin: 3rem 0;
+}
+
+.card-container {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 90%;
+}
+
+.card {
+    width: 300px;
+    height: 300px;
+    border-radius: 100%;
+    margin: 3rm 0 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+background-color: #fdeff9;
+background-image: url('./IMG_3138.jpg');
+background-position: center;
+background-size: cover;
+background-repeat: no-repeat;
+filter: grayscale(0.5);
+color: #2c3e50;
+cursor: pointer;
+transition: 0.5s ease-in-out;
+}
+
+.card-text {
+    width: 40%;
+    letter-spacing: 1px;
+    color: rgb(109, 109, 109)
+}
+
+.footer {
+    width: 100%;
+    height: 100%;
+    background-color: #fdeff9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #2c3e50
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+