From 5683f274757be48ef8d7b9c29e0be44fd2517bf3 Mon Sep 17 00:00:00 2001 From: Paula Eduarda Maciel Date: Wed, 12 May 2021 19:07:31 -0300 Subject: [PATCH] =?UTF-8?q?Desafio=20da=20semana=204:=20Tornar=20o=20seu?= =?UTF-8?q?=20site-portf=C3=B3lio=20responsivo.=20Aluna:=20Paula=20Eduarda?= =?UTF-8?q?=20Maciel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- alunas/paula-maciel/css/style.css | 412 ++++++++++++++++++++++------- alunas/paula-maciel/css/style2.css | 208 +++++++++++++++ alunas/paula-maciel/index.html | 17 +- 3 files changed, 538 insertions(+), 99 deletions(-) create mode 100644 alunas/paula-maciel/css/style2.css diff --git a/alunas/paula-maciel/css/style.css b/alunas/paula-maciel/css/style.css index d7611c8..eab9159 100644 --- a/alunas/paula-maciel/css/style.css +++ b/alunas/paula-maciel/css/style.css @@ -1,59 +1,54 @@ * { box-sizing: border-box; - } - - body { +} +body { font-family: 'Raleway', Arial, Helvetica, sans-serif; margin: 0 ; - } - - html { +} +html { height: 100%; - } - - h1 { - +} +h1 { color: transparent; font-size: 0%; - } - - h3 { - +} +h3 { text-align: center; font-size: 32px; background-color: #EB4FD2; margin: 10px; - } - .image-sidebar{ - margin-bottom: 0px; - } - a{ +} +a{ text-decoration: none; - } - - .caixa-header { - align-items: center; +} + +/*====== MOBILE FIRST ======*/ +@media screen and (min-width: 320px) { + +.caixa-header { display: flex; + align-items: center; flex-direction: column; - justify-content: space-around; background-image: url('../img/capa-bg-padumaciel.png'); - background-size: cover; + background-size: 100%; background-repeat: no-repeat; background-position: center; - color: #f2a2c4; - height: 80vh; - } - - .btn-branco{ + height: 8em; + justify-content: space-between; + padding-bottom: 10px; +} + +.btn-branco{ background-color: #F08514; color: white; + font-size: 8px; text-align: center; - font-weight: bold; - padding: 15px; - width: 180px; - border-radius: 80px; - } + padding: 3px; + width: 60px; + border-radius: 40px; +} + .efeito{ border: none; color: white; @@ -74,66 +69,223 @@ .efeito-1:hover{ background: #f2a2c4 } + /*====== SECAO DE CONTEUDO ======*/ h2 { - font-size: 32px; + font-size: 14px; background-color: #5D00AF; color: #f2a2c4; - width: 675px; text-align: center; - padding: 5px; - margin: 0px 0px; + padding: 7px; + border-radius: 20px; + margin: 0em 1.5em; } .caixa-secao-conteudo{ -margin-top: 40px; -display: flex; -flex-direction: column; -justify-content: center; +margin-top: 10px; +display: relative; } .sobre-mim-sidebar{ - text-align: center; + text-align: justify; font-weight: bold; + margin-top: 1px; } .classe-somente-conteudo{ + display: relative; +} +.btn { display: flex; - align-items: flex-start; - justify-content: space-evenly; + justify-content: center; } .btn-roxo{ - padding: 15px; + padding: 0.7em; width: 190px; - border-radius: 80px; + border-radius: 50px; color: white; + text-align: center; + margin-bottom: 1.5em; } .caixa-sidebar{ - margin-bottom: 50px; + margin: 0.1em 1.5em 0.5em 1.5em; padding: 25px; border-radius: 10px; background-color: #F08514; - width: 300px; color: white; } +.image-sidebar { + background-image: url("../img/imagem-sidebar.png"); + background-position: center; + background-size: contain; + height: 250px; + background-repeat: no-repeat; +} .caixa-sobre-mim{ - width: 50%; + width: 100%; } .caixa-texto-sobre-mim{ - margin-bottom: 40px; + padding: 0.3em 1.5em; + margin-bottom: 1em; + text-align: justify; +} +.container { + height: 25px; + background-color: #FFFFFF; + border-radius: 13px; + position: relative; +} +.container .progress-bar{ + position: absolute; + height: 100%; + background-color: #f2a2c4; + margin-bottom: 5px; + border-radius: 13px; + width: 100%; +} +.container-50 { + height: 25px; + background-color: #FFFFFF; + border-radius: 13px; + position: relative; +} +.container-50 .progress-bar-50{ + position: absolute; + height: 100%; + background-color: #f2a2c4; + margin-bottom: 5px; + border-radius: 13px; + width: 50%; +} +.skills { + text-align: center; + font-weight: bold; +} +footer { + text-align: center; + color: white; + background-color: #5D00AF; + padding: 25px; + margin-top: 25px; +} +} + +/*====== TABLET ======*/ + +@media screen and (min-width: 768px) { + +.caixa-header { display: flex; - align-items: initial; + align-items: center; + flex-direction: column; + background-image: url('../img/capa-bg-padumaciel.png'); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + height: 15em; + justify-content: space-between; + padding-bottom: 45px; +} + +.btn-branco{ + background-color: #F08514; + color: white; + font-size: 8px; + text-align: center; + padding: 3px; + width: 100px; + border-radius: 40px; +} + +.efeito{ + border: none; + color: white; + width: 150px; + font-size: 20px; + line-height: 30px; + border-radius: 80px; + position: relative; + box-sizing: border-box; + cursor: pointer; + transition: all 400ms ease; + } -.caixa-lista-sobre-mim{ - width: 20%; - margin-left: 60px; - color: #770d77; +.efeito-1{ + background: #5D00AF; + color: white; } -.caixa-lista-sobre-mim-2{ - width: 20%; - margin-left: 10px; - color: #770d77; +.efeito-1:hover{ + background: #f2a2c4 } +/*====== SECAO DE CONTEUDO ======*/ +h2 { + font-size: 14px; + background-color: #5D00AF; + color: #f2a2c4; + text-align: center; + padding: 7px; + border-radius: 20px; + margin: 0em 1.5em; +} +.caixa-secao-conteudo{ + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; +} +.sobre-mim-sidebar{ + text-align: justify; + font-weight: bold; + font-size: 15px; +} +h3 { + text-align: center; + font-size: 22px; + background-color: #EB4FD2; + margin: 0.5em; + padding: 0.1em; +} +.classe-somente-conteudo{ + display: flex; + align-items: flex-start; + justify-content: space-evenly; +} +.btn { + display: flex; + justify-content: center; +} +.btn-roxo{ + padding: 0.7em; + width: 190px; + border-radius: 50px; + color: white; + text-align: center; + margin-bottom: 1.5em; +} +.caixa-sidebar{ + margin: 0.1em 1.5em 0.5em 1.5em; + padding: 10px; + border-radius: 10px; + background-color: #F08514; + color: white; + width: 15em; +} +.image-sidebar { + background-image: url("../img/imagem-sidebar.png"); + background-position: center; + background-size: contain; + height: 200px; + background-repeat: no-repeat; + margin: 0px; +} +.caixa-sobre-mim{ + width: 70%; +} +.caixa-texto-sobre-mim{ + padding: 0.3em 1.5em; + margin-bottom: 1em; + text-align: justify; +} .container { height: 25px; background-color: #FFFFFF; @@ -141,14 +293,13 @@ justify-content: center; position: relative; } .container .progress-bar{ - position: absolute; - height: 100%; - background-color: #f2a2c4; - margin-bottom: 5px; - border-radius: 13px; - width: 100%; + position: absolute; + height: 100%; + background-color: #f2a2c4; + margin-bottom: 5px; + border-radius: 13px; + width: 100%; } - .container-50 { height: 25px; background-color: #FFFFFF; @@ -156,44 +307,123 @@ justify-content: center; position: relative; } .container-50 .progress-bar-50{ - position: absolute; - height: 100%; - background-color: #f2a2c4; - margin-bottom: 5px; - border-radius: 13px; - width: 50%; + position: absolute; + height: 100%; + background-color: #f2a2c4; + margin-bottom: 5px; + border-radius: 13px; + width: 50%; } - .skills { text-align: center; font-weight: bold; } +footer { + text-align: center; + color: white; + background-color: #5D00AF; + padding: 25px; + margin-top: 25px; +} +} + +/*====== DESKTOP ======*/ -/* ==== redes sociais ==== */ +@media screen and (min-width: 1280px) { -.caixa-item-rede-social{ +.caixa-header { + display: flex; + align-items: center; + flex-direction: column; + background-image: url('../img/capa-bg-padumaciel.png'); + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + height: 25em; + justify-content: space-between; + padding-bottom: 60px; + margin-bottom: 3em; +} + +.btn-branco{ + background-color: #F08514; + color: white; + font-size: 15px; text-align: center; - background-color: #770d77; + padding: 10px; width: 180px; - height: 180px; - margin-right: 40px; - padding: 20px; - margin-top: 50px; + border-radius: 40px; } -.lista-habilidades{ - color: white; + +/*====== SECAO DE CONTEUDO ======*/ + +h2 { + font-size: 14px; + background-color: #5D00AF; + color: #f2a2c4; + text-align: center; + padding: 7px; + border-radius: 20px; + margin: 0em 1.5em; } -.caixa-mae-rede-social{ +.caixa-secao-conteudo{ + margin-top: 10px; display: flex; + flex-direction: column; justify-content: center; } -.link-rede-social{ - color: white; +.sobre-mim-sidebar{ + text-align: justify; + font-weight: bold; + font-size: 15px; } -footer{ +h3 { + text-align: center; + font-size: 22px; + background-color: #EB4FD2; + margin: 0.5em; + padding: 0.1em; +} +.classe-somente-conteudo{ + display: flex; + align-items: flex-start; + justify-content: space-evenly; +} +.btn { + display: flex; + justify-content: center; +} +.btn-roxo{ + padding: 0.7em; + width: 190px; + border-radius: 50px; + color: white; text-align: center; + margin-bottom: 1.5em; +} +.caixa-sidebar{ + margin: 0.1em 1.5em 0.5em 0em; + padding: 10px; + border-radius: 10px; + background-color: #F08514; color: white; - background-color: #5D00AF; - padding: 50px; - margin-top: 25px; + width: 18em; +} +.image-sidebar { + background-image: url("../img/imagem-sidebar.png"); + background-position: center; + background-size: contain; + height: 200px; + background-repeat: no-repeat; + margin: 0px; +} +.caixa-sobre-mim{ + width: 60%; +} +.caixa-texto-sobre-mim{ + padding: 0.3em 1.5em; + margin-bottom: 1em; + text-align: justify; +} + } \ No newline at end of file diff --git a/alunas/paula-maciel/css/style2.css b/alunas/paula-maciel/css/style2.css new file mode 100644 index 0000000..ffdfff0 --- /dev/null +++ b/alunas/paula-maciel/css/style2.css @@ -0,0 +1,208 @@ +* { + box-sizing: border-box; + } + + body { + font-family: 'Raleway', Arial, Helvetica, sans-serif; + margin: 0 ; + } + + html { + height: 100%; + } + + h1 { + + color: transparent; + font-size: 0%; + + } + + h3 { + + text-align: center; + font-size: 32px; + background-color: #EB4FD2; + margin: 10px; + } + .image-sidebar{ + margin-bottom: 0px; + } + a{ + text-decoration: none; + } + + .caixa-header { + align-items: center; + display: flex; + flex-direction: column; + justify-content: space-around; + background-image: url('../img/capa-bg-padumaciel.png'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + color: #f2a2c4; + height: 80vh; + } + + .btn-branco{ + background-color: #F08514; + color: white; + text-align: center; + font-weight: bold; + padding: 15px; + width: 180px; + border-radius: 80px; + } +.efeito{ + border: none; + color: white; + width: 150px; + font-size: 20px; + line-height: 30px; + border-radius: 80px; + position: relative; + box-sizing: border-box; + cursor: pointer; + transition: all 400ms ease; + +} +.efeito-1{ + background: #5D00AF; + color: white; +} +.efeito-1:hover{ + background: #f2a2c4 +} +/*====== SECAO DE CONTEUDO ======*/ + +h2 { + font-size: 32px; + background-color: #5D00AF; + color: #f2a2c4; + width: 675px; + text-align: center; + padding: 5px; + margin: 0px 0px; + +} +.caixa-secao-conteudo{ +margin-top: 40px; +display: flex; +flex-direction: column; +justify-content: center; +} +.sobre-mim-sidebar{ + text-align: center; + font-weight: bold; +} +.classe-somente-conteudo{ + display: flex; + align-items: flex-start; + justify-content: space-evenly; +} +.btn-roxo{ + padding: 15px; + width: 190px; + border-radius: 80px; + color: white; +} +.caixa-sidebar{ + margin-bottom: 50px; + padding: 25px; + border-radius: 10px; + background-color: #F08514; + width: 300px; + color: white; +} +.caixa-sobre-mim{ + width: 50%; +} +.caixa-texto-sobre-mim{ + margin-bottom: 40px; + display: flex; + align-items: initial; +} +.caixa-lista-sobre-mim{ + width: 20%; + margin-left: 60px; + color: #770d77; +} +.caixa-lista-sobre-mim-2{ + width: 20%; + margin-left: 10px; + color: #770d77; +} + +.container { + height: 25px; + background-color: #FFFFFF; + border-radius: 13px; + position: relative; +} +.container .progress-bar{ + position: absolute; + height: 100%; + background-color: #f2a2c4; + margin-bottom: 5px; + border-radius: 13px; + width: 100%; +} + +.container-50 { + height: 25px; + background-color: #FFFFFF; + border-radius: 13px; + position: relative; +} +.container-50 .progress-bar-50{ + position: absolute; + height: 100%; + background-color: #f2a2c4; + margin-bottom: 5px; + border-radius: 13px; + width: 50%; +} + +.skills { + text-align: center; + font-weight: bold; +} + +/* ==== redes sociais ==== */ + +.caixa-item-rede-social{ + text-align: center; + background-color: #770d77; + width: 180px; + height: 180px; + margin-right: 40px; + padding: 20px; + margin-top: 50px; +} +.lista-habilidades{ + color: white; +} +.caixa-mae-rede-social{ + display: flex; + justify-content: center; +} +.link-rede-social{ + color: white; +} +footer{ + text-align: center; + color: white; + background-color: #5D00AF; + padding: 50px; + margin-top: 25px; +} +@media (max-width: 768px) { + +body { + w +} +.caixa-header{ + height: 10em; +} +} \ No newline at end of file diff --git a/alunas/paula-maciel/index.html b/alunas/paula-maciel/index.html index 0afd33e..0805fca 100644 --- a/alunas/paula-maciel/index.html +++ b/alunas/paula-maciel/index.html @@ -13,7 +13,7 @@

Padu Maciel

- PORTFÓLIO + Portfólio @@ -21,7 +21,7 @@

- Um pouco da minha trajetória acadêmica + Trajetória Acadêmica

Aos 18 anos (2014) ingressou no curso de Bacharelado em Ciências Biológicas, na Universidade Federal Rural de Pernambuco. Ao longo dos 3 anos que passou no curso, participou do diretório acadêmico, onde aprendeu a trabalhar em grupo e desenvolver sua oratória. @@ -32,10 +32,11 @@


Em agosto de 2018, trancou a faculdade e tentou vestibular para o mesmo curso, passando no curso Tecnológico em Design Gráfico no Instituto Federal de Pernambuco, onde estuda até o momento. O seu último estágio foi no departamento de marketing da Ecoforce Brasil.

+
Veja meu currículo -



+

Mais sobre mim!

@@ -46,9 +47,9 @@

-

Hello World!

- foto de padu maciel -

Olá, você! Me chamo Paula Eduarda Maciel, porém todos me chamam de Padu. Estou na minha 25ª regeneração (se você é whovian, sabe do que estou falando) e sou uma recifense que é apaixonada por sua cidade. Designer e aspirante a front-end dev, estou sempre em busca de aprender mais com cada acontecimento da minha vida.

+

Hello, stranger!

+
+

Olá, você! Me chamo Paula Eduarda, porém todos me conhecem por Padu. No momento em que você está lendo isso, estou na minha 25ª regeneração (se você é whovian, sabe do que estou falando) e sou uma recifense que é apaixonada por sua cidade. Designer e aspirante a desenvolvedora front-end, estou sempre em busca de aprender mais com cada acontecimento da minha vida. Seja bem-vinde a minha página e volte sempre que quiser!

Skills

Adobe Photoshop

@@ -87,8 +88,8 @@

Skills