style: modify style of footer

lucaslangsch · Jul 31, 2023 · 1b7e0ae · 1b7e0ae
1 parent 616e3bf
commit 1b7e0ae
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/src/components/CardProject.css b/src/components/CardProject.css
@@ -67,7 +67,7 @@
   text-decoration: none;
   font-weight: bold;
   box-shadow: 0px 10px 35px rgba(36, 36, 36, 0.493);
-  margin: 20px;
+  margin: 30px;
   overflow: visible;
 }
 

diff --git a/src/components/Form.css b/src/components/Form.css
@@ -2,37 +2,41 @@
 
 .contact {
   width: 100%;
-  margin: 0 auto;
   background-image: url('../assets/stacked-waves-haikei.png');
   background-size: cover;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  gap: 25px;
 }
 
 .form__asside {
-  max-width: 800px;
-  width: 50%;
-  margin: 0 auto;
+  max-width: 800px;  
+  width: 45%;
+  /* margin: 0 auto; */
+  text-align: right;
 }
 
 .form__body {
   padding-bottom: 50px;
   min-width: 384px;
-  width: 50%;
+  width: 45%;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  /* align-items: center; */
   justify-content: center;
+  text-align: left;
 }
 
 .form {
-  width: 80%;
+  max-width: 700px;
+  margin-top: 3rem;
+  width: 99%;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: 24px;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
 }
 
@@ -44,6 +48,7 @@
   font-size: 20px;
   max-width: 768px;
   width: calc(100% - 48px);
+  box-shadow: 0px 8px 20px rgba(36, 36, 36, 0.6);
 }
 
 .form button{
@@ -57,16 +62,18 @@
   font-family: 'Anybody', cursive;
   color: white;
   font-weight: bold;
+  box-shadow: 0px 8px 20px rgba(36, 36, 36, 0.6);
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 830px) {
   .contact {
-    gap: 25px;
+    gap: 0px;
   }
 
   .form__body {
-    width: 100%;
+    width: 80%;
     min-width: 300px;
+    align-items: center;
   }
 
   .form__asside {

diff --git a/src/components/Form.jsx b/src/components/Form.jsx
@@ -52,10 +52,9 @@ function Form() {
     <footer id='contact' className="contact">
       <div className="form__asside">
         <h1>FICOU INTERESSADO?</h1>
-        <h3>Entre em contato e tire suas dúvidas ou faça um orçamento</h3>
+        <h3>Entre em contato<br />e tire suas dúvidas ou faça um orçamento</h3>
       </div>
       <div className="form__body">
-        <h1>CONTATO</h1>
         <form className="form" method="post" onSubmit={ (e) => submitForm(e) }>
           <input
             type="text"