From 7a8408fdac272c6d346f452f3921ea25c7d6ccf1 Mon Sep 17 00:00:00 2001 From: Mayara Marques <231035731@aluno.unb.br> Date: Tue, 17 Dec 2024 00:55:32 -0300 Subject: [PATCH] feat: responsividade pg ps e ajustes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: ludmilaaysha <231026750@aluno.unb.br> Responsividade, ajustes na hero e ajustes no título da área Co-authored-by: ludmilaaysha <231026750@aluno.unb.br> --- mamutes/guest/static/css/admission.css | 322 ++++++++++++++++++++----- mamutes/guest/templates/admission.html | 165 +++++++------ 2 files changed, 352 insertions(+), 135 deletions(-) diff --git a/mamutes/guest/static/css/admission.css b/mamutes/guest/static/css/admission.css index 8646c85..39c6bb7 100644 --- a/mamutes/guest/static/css/admission.css +++ b/mamutes/guest/static/css/admission.css @@ -26,34 +26,39 @@ body{ } .header{ display: flex; - /* height: 64px; - padding: 0px 56px; */ + /* height: 1%; */ + /* padding: 0px 56px; */ + border-bottom-left-radius: 80px; align-items: center; align-self: stretch; background: #F9F9F9; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10); + flex-direction: column; + overflow: hidden; } .heroPS{ display: flex; /* align-items: flex-end; align-self: flex-end; */ /* gap: 10px; */ + /* height: 100%; */ width: 100%; overflow: hidden; position: relative; justify-content: space-between; - border-radius: 0px 0px 0px 80px; - border-bottom: 12px solid #02004E; - background: linear-gradient(266deg, #1F1A99 0%, #02004E 100%); + /* border-bottom: 12px solid #02004E; */ + background: #0B096B; } .textPS{ display: flex; - width: 509px; - padding: 64px 0px 64px 92px; + width: 100%; + padding: clamp(80px, 6%, 120px); + padding-right: 0%; flex-direction: column; align-items: flex-start; - gap: 12%; + gap: 24px; align-self: stretch; + z-index: 2; } .mainText{ display: flex; @@ -65,7 +70,7 @@ body{ /* align-self: stretch; */ color: #FEFEFE; font-family: Inter; - font-size: 64px; + font-size: clamp(64px, 5vw, 80px); font-style: normal; font-weight: 400; line-height: normal; @@ -74,7 +79,7 @@ body{ align-self: stretch; color: #FEFEFE; font-family: Inter; - font-size: 64px; + font-size: clamp(64px, 5vw, 80px); font-style: normal; font-weight: 800; line-height: normal; @@ -89,13 +94,11 @@ body{ } .buttonAdmission{ display: flex; - padding: 5%; + padding: 16px 24px; justify-content: center; align-items: center; border-radius: 40px; background: #36B5FF; -} -.textButton{ color: #FEFEFE; font-family: Inter; font-size: 18px; @@ -104,16 +107,19 @@ body{ line-height: 24px; /* 133.333% */ } .imageHeroPS{ - width: 100%; + width: auto; + height: 100%; display: flex; justify-content: flex-end; + right: 0; /* height: 408px; */ /* flex-direction: column; */ align-items: flex-end; /* gap: 30%; align-self: stretch; */ - /* background: linear-gradient(270deg, rgba(31, 26, 153, 0.00) 0%, #1F1A99 100%); AJEITAR FUNDO*/ - overflow: hidden; + /* background: linear-gradient(270deg, rgba(31, 26, 153, 0.00) 0%, #1F1A99 100%); */ + /* overflow: hidden; */ + position: absolute; } .imagePS{ width: auto; @@ -122,14 +128,21 @@ body{ max-width: 100%; min-width: 500px; height: 100%; - align-items: flex-end; + align-items: flex-end; */ flex: 1 0 0; - align-self: stretch; */ + align-self: stretch; object-fit: cover; } +.borderHero{ + display: flex; + width: 100%; + height: 12px; + background: linear-gradient(90deg, #02004E 0%, #36B5FF 100%); +} .principal{ display: flex; - padding: 5%; + padding-inline: 12%; + padding-block: 80px; flex-direction: column; align-items: center; justify-content: center; @@ -145,9 +158,11 @@ body{ } .titlePS{ display: flex; - width: 438px; + width: 100%; flex-direction: column; align-items: center; + text-align: center; + } .whyEnter{ align-self: stretch; @@ -170,11 +185,7 @@ body{ } #questionMark{ color: #36B5FF; - font-family: Inter; - font-size: 40px; - font-style: normal; font-weight: 800; - line-height: normal; } .benefitsPS{ display: flex; @@ -187,8 +198,8 @@ body{ } .block{ display: flex; - height: 204px; - min-width: 300px; + height: 224px; + min-width: 200px; padding: 40px; flex-direction: column; justify-content: center; @@ -298,9 +309,7 @@ body{ justify-content: space-between; align-items: flex-start; align-content: flex-start; - row-gap: 99px; align-self: stretch; - flex-wrap: wrap; } .step{ display: flex; @@ -375,7 +384,6 @@ body{ } .warning{ display: flex; - min-width: 400px; padding: 40px 64px; align-items: flex-start; align-content: flex-start; @@ -417,7 +425,7 @@ body{ } .textTitlePS{ display: flex; - min-width: 400px; + /* min-width: 400px; */ max-width: 800px; flex-direction: column; align-items: center; @@ -462,12 +470,6 @@ body{ } #subtextMark{ color: #36B5FF; - font-family: Inter; - font-size: 64px; - font-style: normal; - font-weight: 700; - line-height: normal; - letter-spacing: -0.704px; } #lowercase{ color: #1E1E1E; @@ -479,14 +481,15 @@ body{ line-height: normal; align-self: stretch; } -.fac{ +.faq{ display: flex; - padding: 3%; + padding: 56px 32px; flex-direction: column; align-items: flex-start; align-self: stretch; border-radius: 8px; - border: 2px solid #36B5FF; + background: #F9F9F9; + position: relative; } .accordion{ display: flex; @@ -498,6 +501,7 @@ body{ } .accordionHeader{ display: flex; + border-top: 1px solid #EEE; padding: 24px; justify-content: space-between; align-items: center; @@ -515,9 +519,9 @@ body{ flex: 1 0 0; } .accordionContent{ - /* padding-top: 1rem; DEIXAM ESPAÇAMENTO DO CONTEUDO À CABEÇA - line-height: 1.6; */ - background: #F9F9F9; + box-sizing: border-box; + padding: 0 24px; + background: #FFF; font-size: 14px; color:#1E1E1E; overflow: hidden; @@ -525,7 +529,7 @@ body{ transition: max-height 1s ease; } .accordion.active .accordionContent{ - max-height: 300px; + max-height: 2000px; } .accordion.active svg{ @@ -535,26 +539,232 @@ body{ svg{ transition: transform .5s ease-in; } - -#titleFAQ{ +.backgroundTitle{ + display: flex; + background: #F9F9F9; + padding: 8px; + z-index: 2; position: absolute; - left: 349px; - top: -20px; + top: 0; + left: 50%; + transform: translate(-50%, -50%); + align-items: center; + text-align: center; + flex: 1 0 0; + align-self: stretch; +} +.titleFAQ{ + display: flex; color: #1F1A99; text-align: justify; - -webkit-text-stroke-width: 21; - -webkit-text-stroke-color: #F9F9F9; font-family: Inter; font-size: 32px; font-style: normal; font-weight: 600; line-height: normal; + text-align: center; + flex: 1 0 0; + gap: 6px; } -#subtextFAQ{ - color: #0075F6; - font-family: Inter; - font-size: 32px; - font-style: normal; - font-weight: 800; - line-height: normal; +.subtextFAQ{ + color: #0075F6; +} + +@media (max-width: 1080px) { + .stepsTimeline{ + flex-direction: column; + + } + + .timeline{ + flex-direction: column; + height: 120px; + } + + .step{ + flex-direction: row; + align-items: center; + flex: 1 0 0; + justify-content: space-around; + } + + .line{ + width: 2px; + height: 100%; + } + + .textBlock p{ + text-align: left; + } + + .textBlock{ + justify-content: center; + } + + +} + +@media (max-width: 768px) { + .warning{ + flex-direction: column; + } + + #centerTitle{ + font-size: 48px; + } + + #subtext{ + font-size: 48px; + } + + #subtextMark{ + font-size: 48px; + } + + .titleFAQ{ + font-size: 24px; + + } + + .subtextFAQ{ + font-size: 24px; + } +} + +@media (max-width: 480px) { + .textPS{ + padding: 32px; + flex: 1 0 0; + align-items: center; + padding-top: 96px; + } + + .mainText{ + align-items: center; + } + + #title1{ + text-align: center; + font-size: 48px; + } + + #title2{ + text-align: center; + font-size: 48px; + } + + #subTitle2{ + font-size: 48px; + } + + .buttonAdmission{ + font-size: 14px; + } + + .whyEnter{ + font-size: 18px; + } + + .MMTS{ + font-size: 32px; + } + + #questionMark{ + font-size: 32px; + } + + .block{ + padding: 32px; + height: unset; + } + + .phrase{ + font-size: 14px; + } + + #howItWorks{ + font-size: 24px; + } + + #paragraph{ + font-size: 12px; + } + + #titleSteps{ + font-size: 18px; + } + + .warning{ + padding: 24px; + } + + #warningText{ + font-size: 12px; + } + + .warningIcon{ + transform: scale(0.8); + } + + #lowerTitle{ + font-size: 16px; + } + + #centerTitle{ + font-size: 32px; + } + + #lowercase{ + font-size: 16px; + padding-inline: 8px; + } + + .headerAccordionText{ + font-size: 14px; + } + + .accordionContent p{ + font-size: 14px; + } + + .backgroundTitle{ + order: -1; + padding: 8px; + text-align: center; + } + + .faq{ + padding: 8px; + padding-top: 24px; + align-items: center; + } + + .titleBlock{ + font-size: 14px; + } + + .subtitleBlock{ + font-size: 12px; + } + + .step{ + gap: 16px; + } + + .ball{ + width: 48px; + height: 48px; + } + + .number{ + font-size: 18px; + } + + .textTitlePS{ + gap: 16px; + } + + .principal{ + gap: 64px; + } } \ No newline at end of file diff --git a/mamutes/guest/templates/admission.html b/mamutes/guest/templates/admission.html index b2a3d96..51ca45a 100644 --- a/mamutes/guest/templates/admission.html +++ b/mamutes/guest/templates/admission.html @@ -29,6 +29,7 @@ Erro ao carregar imagem +
@@ -43,7 +44,7 @@
-

Trabalho em equipe

+

Trabalho em equipe

@@ -51,7 +52,7 @@
-

Experiência em projetos reais

+

Experiência em projetos reais

@@ -59,15 +60,15 @@
-

Participação em competições de alto nível

+

Participação em competições de alto nível

-

Como funciona o Processo Seletivo?

+

Como funciona o Processo Seletivo?

- Com a finalidade de se repor vagas e prover a manutenção do quadro de membros, um processo seletivo é realizado anualmente no semestre que se sucede a competição SAE-Aerodesign e eleição de novo capitão.

- As vagas disponíveis estão de acordo com o número de membros estipulados em cada grupo de desenvolvimento e por isso, o conselho diretor pode limitar o número de vagas oferecidas em cada processo seletivo de acordo com a necessidade do projeto, e pode divulgar ou não o número de vagas oferecidas aos candidatos. + Com a finalidade de se repor vagas e prover a manutenção do quadro de membros, um processo seletivo é realizado anualmente no semestre que se sucede a competição SAE-Aerodesign e eleição de novo capitão.

+ As vagas disponíveis estão de acordo com o número de membros estipulados em cada grupo de desenvolvimento e por isso, o conselho diretor pode limitar o número de vagas oferecidas em cada processo seletivo de acordo com a necessidade do projeto, e pode divulgar ou não o número de vagas oferecidas aos candidatos.

@@ -134,12 +135,12 @@
-

O conselho diretor se reserva ao direito de desclassificar os candidatos que não possuem o perfil desejado para a equipe desde que o número de candidatos exceda o dobro do número de vagas, em qualquer etapa. Bem como também, à possibilidade de agregar novos membros a equipe em caráter extraordinário, desde que tais tenham sido previamente estabelecidas pelo conselho.

+

O conselho diretor se reserva ao direito de desclassificar os candidatos que não possuem o perfil desejado para a equipe desde que o número de candidatos exceda o dobro do número de vagas, em qualquer etapa. Bem como também, à possibilidade de agregar novos membros a equipe em caráter extraordinário, desde que tais tenham sido previamente estabelecidas pelo conselho.

O Processo Seletivo está aberto!

-

Pronto para se juntar à nossa equipe?

+

Pronto para se juntar à nossa equipe?

Não perca a chance de fazer parte dessa família.

@@ -148,80 +149,86 @@
-
-
-
-

Quando ocorre o processo seletivo?

- - - - - - - - - - -
-
-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

-
-
-
-
-

Quantas vagas estão disponíveis?

- - - - - - - - - - -
-
-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

-
-
-
-
-

Quem pode participar?

- - - - - - - - - - -
-
-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

-
-
-
-
-

Como é feita a seleção?

- - - - - - - - - - +
+
+
+
+
+

Quando ocorre o processo seletivo?

+ + + + + + + + + + +
+
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

+
+
+
+
+

Quantas vagas estão disponíveis?

+ + + + + + + + + + +
+
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

+
+
+
+
+

Quem pode participar?

+ + + + + + + + + + +
+
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

+
+
+
+
+

Como é feita a seleção?

+ + + + + + + + + + +
+
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

+
+
-
-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

+
+

Perguntas frequentes

-

Perguntas frequentes