7/7 rodape

ClaudiOmatheuuss · Oct 6, 2023 · adacbbb · adacbbb
1 parent 56e5eff
commit adacbbb
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 3 deletions.
diff --git a/assets/css/about/about.css b/assets/css/about/about.css
@@ -34,9 +34,8 @@
     color: var(--gray-500);
     font-family: var(--default-font);
     font-size: 16px;
-    font-weight: 400;
     line-height: 16px;
-    max-width: calc(100vw - 44vw);
+    max-width: calc(100vw - 31.5vw);
     text-align: center;
 }
 
@@ -54,5 +53,6 @@
     .about__content p {
         font-size: 20px;
         line-height: 30px;
+        max-width: calc(100vw - 44vw);
     }
 }
diff --git a/assets/css/deposition/deposition.css b/assets/css/deposition/deposition.css
@@ -7,7 +7,7 @@
 .deposition {
     align-items: center;
     background: rgba(195, 25, 25, 0.03);
-    border-radius: 16px;
+    border-radius: 32px;
     display: flex;
     flex-direction: column;
     gap: 2rem;
@@ -79,6 +79,7 @@
 
     .deposition {
         padding: 4rem;
+        border-radius: 16px;
     }
 
     .deposition__content h2 {

diff --git a/assets/css/footer/footer.css b/assets/css/footer/footer.css
@@ -0,0 +1,96 @@
+footer {
+    align-items: center;
+    background: var(--gray-50);
+    display: flex;
+    padding: 6rem 5%;
+    flex-direction: column;
+    gap: 2rem;
+    font-family: var(--default-font);
+}
+
+footer .footer__form {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    font-family: var(--default-font);
+    gap: 2.5rem;
+}
+
+.footer__form .footer__form__text {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    text-align: center;
+}
+
+.footer__form .footer__form__text h2 {
+    color: var(--gray-900);
+    font-size: 1.50rem;
+    font-weight: 600;
+    line-height: 122.222%;
+    letter-spacing: -0.72px;
+}
+
+.footer__form .footer__form__text span {
+    color: var(--gray-500);
+    font-size: 16px;
+    line-height: 150%
+}
+
+.footer__form form {
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.footer__form form input, button {
+    font-family: var(--default-font);
+    font-size: 16px;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    line-height: 150%;
+}
+
+.footer__form form input {
+    color: var(--gray-500);
+    border-radius: 8px;
+    border: 1px solid #D0D5DD;
+    background: var(--white-100);
+    outline: none;
+    padding: 12px 14px 12px 16px;
+}
+
+.footer__form form button {
+    color: var(--white-100);
+    font-weight: 500;
+    border-radius: 8px;
+    border: 1px solid var(--red-100);
+    background: var(--red-100);
+    padding: 12px 20px;
+}
+
+footer .copyright__text {
+    color: var(--gray-400);
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+}
+
+@media screen and (min-width: 768px) {
+    footer {
+        padding: 6rem 0;
+    }
+
+    .footer__form .footer__form__text h2 {
+        font-size: 2.25rem;
+    }
+
+    .footer__form .footer__form__text span {
+        font-size: 20px;
+    }
+
+    .footer__form form {
+        align-items: center;
+        flex-direction: row;
+    }
+}
diff --git a/assets/css/reset.css b/assets/css/reset.css
@@ -1,7 +1,9 @@
 :root {
     --white-100: #fff;
 	--black-80: #3A404E;
+	--gray-50: #F9FAFB;
 	--gray-200: #EAECF0;
+	--gray-400: #98A2B3;
 	--gray-500: #667085;
 	--gray-900: #101828;
 	--red-100: #8E2424;

diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="./assets/css/insights/insights.css" />
     <link rel="stylesheet" href="./assets/css/vancacies/vancacies.css" />
     <link rel="stylesheet" href="./assets/css/deposition/deposition.css" />
+    <link rel="stylesheet" href="./assets/css/footer/footer.css" />
     <title>Optimus Tech - home</title>
 </head>
 <body>
@@ -198,5 +199,26 @@ <h3>
             </div>
         </section>
     </main>
+    <footer>
+        <div class="footer__form">
+            <div class="footer__form__text">
+                <h2>
+                    Acompanhe as nossas oportunidades
+                </h2>
+                <span>
+                    Seja o primeiro a saber quando novas vagas estão abertas!
+                </span>
+            </div>
+
+            <form>
+                <input type="email" placeholder="Seu e-mail" />
+                <button type="submit">Cadastrar</button>
+            </form>
+        </div>
+
+        <span class="copyright__text">
+            © 2023 OptimusTech. Todos os direitos reservados.
+        </span>
+    </footer>
 </body>
 </html>