diff --git a/mamutes/guest/static/css/admission.css b/mamutes/guest/static/css/admission.css new file mode 100644 index 0000000..39c6bb7 --- /dev/null +++ b/mamutes/guest/static/css/admission.css @@ -0,0 +1,770 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Inter; +} + +html{ + scroll-behavior: smooth; +} + +html, body{ + height: 100%; +} + +body{ + background: #F9F9F9; +} + +.fullScreen{ + display: flex; + width: 100%; + flex-direction: column; + align-items: flex-start; + background: #F9F9F9; +} +.header{ + display: flex; + /* 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-bottom: 12px solid #02004E; */ + background: #0B096B; +} +.textPS{ + display: flex; + width: 100%; + padding: clamp(80px, 6%, 120px); + padding-right: 0%; + flex-direction: column; + align-items: flex-start; + gap: 24px; + align-self: stretch; + z-index: 2; +} +.mainText{ + display: flex; + flex-direction: column; + align-items: flex-start; + align-self: stretch; +} +#title1{ + /* align-self: stretch; */ + color: #FEFEFE; + font-family: Inter; + font-size: clamp(64px, 5vw, 80px); + font-style: normal; + font-weight: 400; + line-height: normal; +} +#title2{ + align-self: stretch; + color: #FEFEFE; + font-family: Inter; + font-size: clamp(64px, 5vw, 80px); + font-style: normal; + font-weight: 800; + line-height: normal; +} +#subTitle2{ + color: #36B5FF; + font-family: Inter; + font-size: 64px; + font-style: normal; + font-weight: 800; + line-height: normal; +} +.buttonAdmission{ + display: flex; + padding: 16px 24px; + justify-content: center; + align-items: center; + border-radius: 40px; + background: #36B5FF; + color: #FEFEFE; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 133.333% */ +} +.imageHeroPS{ + 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%); */ + /* overflow: hidden; */ + position: absolute; +} +.imagePS{ + width: auto; + height: 100%; + /* position: absolute; + max-width: 100%; + min-width: 500px; + height: 100%; + align-items: flex-end; */ + flex: 1 0 0; + 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-inline: 12%; + padding-block: 80px; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 80px; + align-self: stretch; +} +.titleBenefits{ + display: flex; + flex-direction: column; + align-items: center; + gap: 36px; + align-self: stretch; +} +.titlePS{ + display: flex; + width: 100%; + flex-direction: column; + align-items: center; + text-align: center; + +} +.whyEnter{ + align-self: stretch; + color: #1E1E1E; + text-align: center; + font-family: Inter; + font-size: 32px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.MMTS{ + align-self: stretch; + color: #1F1A99; + font-family: Inter; + font-size: 40px; + font-style: normal; + font-weight: 800; + line-height: normal; +} +#questionMark{ + color: #36B5FF; + font-weight: 800; +} +.benefitsPS{ + display: flex; + justify-content: center; + align-items: center; + align-content: center; + gap: 16px; + align-self: stretch; + flex-wrap: wrap; +} +.block{ + display: flex; + height: 224px; + min-width: 200px; + padding: 40px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 16px; + flex: 1 0 0; + border-radius: 16px; + background: #F0F0F0; +} +.categorieIcon{ + display: flex; + width: 64px; + height: 64px; + padding: 16px; + justify-content: center; + align-items: center; + flex-shrink: 0; + border-radius: 800px; + background: #F8F8F8; +} +.phrase{ + color: #1E1E1E; + text-align: center; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 150%; + letter-spacing: -0.198px; +} +#subphrase{ + color: #1E1E1E; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 150%; + letter-spacing: -0.198px; +} +.titleInfosPS{ + display: flex; + flex-direction: column; + align-items: center; + gap: 53px; + align-self: stretch; +} +#howItWorks{ + align-self: stretch; + text-align: center; + font-family: Inter; + font-size: 32px; + font-style: normal; + font-weight: 400; + line-height: normal; + background: linear-gradient(90deg, #1F1A99 22.72%, #0075F6 50.12%, #36B5FF 76.7%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +#selectionProcess{ + background: linear-gradient(90deg, #1F1A99 22.72%, #0075F6 50.12%, #36B5FF 76.7%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-family: Inter; + font-size: 32px; + font-style: normal; + font-weight: 800; + line-height: normal; +} +#paragraph{ + align-self: stretch; + color: #1E1E1E; + text-align: justify; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +#boldWords{ + color: #1E1E1E; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: normal; +} +.stepsPS{ + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 34px; + align-self: stretch; +} +#titleSteps{ + align-self: stretch; + color: #A0A0A0; + font-family: Inter; + font-size: 24px; + font-style: normal; + font-weight: 600; + line-height: normal; +} +.stepsTimeline{ + display: flex; + justify-content: space-between; + align-items: flex-start; + align-content: flex-start; + align-self: stretch; +} +.step{ + display: flex; + min-width: 200px; + flex-direction: column; + align-items: flex-end; + gap: 32px; + flex: 1 0 0; +} +.timeline{ + display: flex; + align-items: center; + align-self: stretch; +} +.distance{ + height: 2px; + flex: 1 0 0; +} +.ball{ + display: flex; + width: 64px; + height: 64px; + padding: 16px; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 800px; + background: linear-gradient(90deg, #0075F6 0%, #36B5FF 100%); +} +.number{ + align-self: stretch; + color: #F9F9F9; + text-align: center; + font-family: Inter; + font-size: 24px; + font-style: normal; + font-weight: 900; + line-height: normal; +} +.line{ + height: 2px; + flex: 1 0 0; + background: #DDD; +} +.textBlock{ + display: flex; + padding: 0px 8px; + flex-direction: column; + align-items: center; + gap: 8px; + align-self: stretch; +} +.titleBlock{ + align-self: stretch; + color: #000; + text-align: center; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; +} +.subtitleBlock{ + align-self: stretch; + color: #000; + text-align: center; + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.warning{ + display: flex; + padding: 40px 64px; + align-items: flex-start; + align-content: flex-start; + gap: 34px; + align-self: stretch; + flex-wrap: wrap; + border-radius: 23px; + background: #FFF2E2; +} +.warningIcon{ + display: flex; + width: 64px; + height: 64px; + padding: 0px 3px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 800px; + background: #FFD9A9; +} +#warningText{ + color: #5C5C5C; + text-align: justify; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 133%; + min-width: 200px; + flex: 1 0 0; +} +#boldWarning{ + color: #5C5C5C; + font-family: Inter; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 24px; +} +.textTitlePS{ + display: flex; + /* min-width: 400px; */ + max-width: 800px; + flex-direction: column; + align-items: center; + gap: 32px; +} +.upperTitleCall{ + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + align-self: stretch; +} +#lowerTitle{ + color: #0095EB; + text-align: center; + font-family: Inter; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: normal; + align-self: stretch; +} +#centerTitle{ + color: #02004E; + text-align: center; + font-family: Inter; + font-size: 64px; + font-style: normal; + font-weight: 600; + line-height: normal; + letter-spacing: -0.704px; + align-self: stretch; +} +#subtext{ + color: #02004E; + font-family: Inter; + font-size: 64px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: -0.704px; +} +#subtextMark{ + color: #36B5FF; +} +#lowercase{ + color: #1E1E1E; + text-align: center; + font-family: Inter; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: normal; + align-self: stretch; +} +.faq{ + display: flex; + padding: 56px 32px; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + border-radius: 8px; + background: #F9F9F9; + position: relative; +} +.accordion{ + display: flex; + flex-direction: column; + align-items: flex-start; + /* align-self: stretch; */ + max-width: 100%; + cursor: pointer; +} +.accordionHeader{ + display: flex; + border-top: 1px solid #EEE; + padding: 24px; + justify-content: space-between; + align-items: center; + align-self: stretch; + /* border-top: 1px solid #EEE; */ + background: #FFF; +} +.headerAccordionText{ + color: #1E1E1E; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; + flex: 1 0 0; +} +.accordionContent{ + box-sizing: border-box; + padding: 0 24px; + background: #FFF; + font-size: 14px; + color:#1E1E1E; + overflow: hidden; + max-height: 0; + transition: max-height 1s ease; +} +.accordion.active .accordionContent{ + max-height: 2000px; +} + +.accordion.active svg{ + transform: rotate(180deg); +} + +svg{ + transition: transform .5s ease-in; +} +.backgroundTitle{ + display: flex; + background: #F9F9F9; + padding: 8px; + z-index: 2; + position: absolute; + 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; + 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; +} + +@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/static/img/imagens-PS.png b/mamutes/guest/static/img/imagens-PS.png new file mode 100644 index 0000000..e72e43a Binary files /dev/null and b/mamutes/guest/static/img/imagens-PS.png differ diff --git a/mamutes/guest/static/scripts/script.js b/mamutes/guest/static/scripts/script.js index aaec170..8aa418a 100644 --- a/mamutes/guest/static/scripts/script.js +++ b/mamutes/guest/static/scripts/script.js @@ -69,3 +69,11 @@ document.addEventListener("DOMContentLoaded", function () { }); }); + +const accordions = document.querySelectorAll(".accordion"); + +accordions.forEach(accordion => { + accordion.addEventListener("click", () => { + accordion.classList.toggle("active"); + }) +}) \ No newline at end of file diff --git a/mamutes/guest/templates/admission.html b/mamutes/guest/templates/admission.html new file mode 100644 index 0000000..51ca45a --- /dev/null +++ b/mamutes/guest/templates/admission.html @@ -0,0 +1,236 @@ +{% extends 'base.html' %} +{% load static %} + +{% block title %}Início{% endblock %} + +{% block css %} + + +{% endblock %} + + +{% block content %} + +
+
+
+
+
+

Faça parte

+

da MMTS!

+
+ + + +
+
+ Erro ao carregar imagem +
+
+
+
+
+
+
+

Por que entrar na

+

Mamutes do Cerrado?

+
+
+
+
+ + + +
+

Trabalho em equipe

+
+
+
+ + + +
+

Experiência em projetos reais

+
+
+
+ + + +
+

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

+
+
+
+
+

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. +

+
+
+

Para a seleção, organizam-se quatro etapas:

+
+
+
+
+
+

1

+
+
+
+
+

Inscrição

+

Preenchimento de formulário e envio de currículo

+
+
+
+
+
+
+

2

+
+
+
+
+

Dinâmicas de Grupo

+

Teste de habilidades em equipe

+
+
+
+
+
+
+

3

+
+
+
+
+

Entrevista

+

Avaliação feita por membros e pelo conselho

+
+
+
+
+
+
+

4

+
+
+
+
+

Capacitação Trainee

+

Fase final com aprendizado prático

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

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?

+
+

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

+ + + +
+
+
+
+
+
+

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!

+
+
+
+
+

Perguntas frequentes

+
+
+
+
+ +
+{% endblock %} \ No newline at end of file diff --git a/mamutes/guest/templates/comp.html b/mamutes/guest/templates/comp.html index bfb6114..e31a929 100644 --- a/mamutes/guest/templates/comp.html +++ b/mamutes/guest/templates/comp.html @@ -90,7 +90,7 @@

Nossa jornada na competição

Você também pode fazer parte dessa história!

- Entre na equipe + Entre na equipe
diff --git a/mamutes/guest/templates/index.html b/mamutes/guest/templates/index.html index 5715870..8bda0a9 100644 --- a/mamutes/guest/templates/index.html +++ b/mamutes/guest/templates/index.html @@ -522,7 +522,7 @@ Se inscreva e faça parte da história da Mamutes

- + Clique aqui e participe
diff --git a/mamutes/guest/templates/partials/_header.html b/mamutes/guest/templates/partials/_header.html index 2dbd27e..0c36474 100644 --- a/mamutes/guest/templates/partials/_header.html +++ b/mamutes/guest/templates/partials/_header.html @@ -39,7 +39,7 @@ Competição - + @@ -91,8 +91,8 @@
  • - Processo seletivo -
    + Processo seletivo +
  • diff --git a/mamutes/guest/views.py b/mamutes/guest/views.py index a51c95c..c67f6d3 100644 --- a/mamutes/guest/views.py +++ b/mamutes/guest/views.py @@ -6,3 +6,6 @@ def index(request): def competition(request): return render(request,'comp.html') +def admission(request): + return render(request,'admission.html') + diff --git a/mamutes/mamutes/urls.py b/mamutes/mamutes/urls.py index f63472b..b3a8ca2 100644 --- a/mamutes/mamutes/urls.py +++ b/mamutes/mamutes/urls.py @@ -1,7 +1,8 @@ from django.contrib import admin from django.urls import path from Users.views import login, register, recoverAccount, redefinePassword -from guest.views import index, competition +from guest.views import index, competition, admission + urlpatterns = [ path('admin/', admin.site.urls), @@ -11,4 +12,5 @@ path('redefine_password//', redefinePassword, name="redefinePassword"), path('', index, name="index"), path('competition/', competition, name="competition"), + path('admission/', admission, name="admission"), ]