diff --git a/semana3/portifolio/IMG_3135.jpg b/semana3/portifolio/IMG_3135.jpg new file mode 100644 index 0000000..374db71 Binary files /dev/null and b/semana3/portifolio/IMG_3135.jpg differ diff --git a/semana3/portifolio/IMG_3138.jpg b/semana3/portifolio/IMG_3138.jpg new file mode 100644 index 0000000..963a54c Binary files /dev/null and b/semana3/portifolio/IMG_3138.jpg differ diff --git a/semana3/portifolio/index.html b/semana3/portifolio/index.html new file mode 100644 index 0000000..b994f5d --- /dev/null +++ b/semana3/portifolio/index.html @@ -0,0 +1,72 @@ + + + + + + + + Meu Portifólio + + + +
+
+
+
+ + +
+ +
+ +
+
+ +
+ Linkedin + GitHub +
+ +
+ +
+
+
+
+

Projetos!

+ +
+
+Olá!! me chamo Priscilla e sou uma profissional em Transição de Carreira.
+Desde sempre atuei na aréa do Turismo e lá realizei muitos SONHOS :) :) :).
+Hoje decidi mudar minha tragetoria,
Foco em expandir meus conhecimentos e vi +na área de Tecnologia uma oportunidade de crescimento Profissional como Pessoal. + +
+
+
+ + + + + + \ No newline at end of file diff --git a/semana3/portifolio/style.css b/semana3/portifolio/style.css new file mode 100644 index 0000000..1a56e11 --- /dev/null +++ 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 +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +