iniciando layout forms

felipetaua · Sep 27, 2024 · bfa59f6 · bfa59f6
1 parent 93ecb1c
commit bfa59f6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 33 deletions.
diff --git a/commonStyle.css b/commonStyle.css
@@ -87,9 +87,13 @@ p{
     margin-bottom: 3em;
 }
 
+.formsIframe {
+    margin: auto;
+}
+
 .iframe {
     width: 100%; 
-    height: 50px;
+    height: 500px;
 }
 
 
@@ -102,13 +106,16 @@ p{
     .gridSection{
         grid-template-columns: 1fr 1fr;
     }
-    iframe {
-        height: 720px;
-    }
+
 }
 
 @media screen and (min-width:1000px){
     .sectionHeader{
         font-size: 3em;
     }
+
+    iframe {
+        width: 100%;
+        height: 720px;
+    }
 }
diff --git a/contact.html b/contact.html
@@ -40,40 +40,29 @@
     </header>
 
     <!-- Contact form -->
-    <section class="gridSection contactSection">
-        <h2>Quinta-feira - saks</h2>
-        <iframe src="https://forms.office.com/Pages/ResponsePage.aspx?id=TXb95_9G7kGMjOQeiklo7cdyatR6DidBrhoZex16cdNURjJUUlJISkJXRFI1SUJDUEZaQTFSWVRKVy4u&origin=QRCode" frameborder="0" ></iframe>
-        <div class="sectionDesc processessDesc">
-            <h1 class="sectionHeader"> Infos</h1>
-            <p class="sectionPara">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, exercitationem quos aliquam et facilis earum deleniti illum odio consectetur eaque.
+    <section class="hero gridSection">
+        <div class="sectionDesc">
+            <h1 class="headline">
+                Formulários de Inscrição da <span class="cryptoText">SINTEC</span>.
+            </h1>
+            <p class="sub-headline">
+                A primeira turma a criar um evento de técnologia no Senac Nova Londrina o maior da região, onde profissionais da área estárão presentes.
             </p>
-            <div class="eachProcesses">
-                <img src="./img/handshake-icon-white-line.svg" alt="handshake">
-                <div class="eachprocessesPara">
-                    <h1 class="processTitle">ADD informações</h1>
-                    <p>
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint, molestias! Iusto, unde. Ut, quis?.
-                    </p>
-                </div>
-            </div>
-            <div class="eachProcesses">
-                <img src="./img/cart-icon-white-line.svg" alt="handshake">
-                <div class="eachprocessesPara">
-                    <h1 class="processTitle">Adicionar</h1>
-                    <p>
-                      Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, iure. Sit magnam quisquam, asperiores itaque enim ad deleniti numquam repudiandae in animi? Exercitationem, nobis aspernatur! Veniam, nemo repellat? Quam, expedita..
-                    </p>
-                </div>
-            </div>
+        </div>
+        <div class="sectionPic bouncepic" id="sectionPic">
+            <img src="./img/foto-tech.png" alt="">
+        </div>  
     </section>
 
     <section>
+        <div class="formsIframe">
+            <iframe src="https://forms.office.com/Pages/ResponsePage.aspx?id=TXb95_9G7kGMjOQeiklo7cdyatR6DidBrhoZex16cdNURjJUUlJISkJXRFI1SUJDUEZaQTFSWVRKVy4u&origin=QRCode" frameborder="0" ></iframe>
+        </div>
         <div class="sectionDesc processessDesc"></div>
             <h1 class="sectionHeader">Osasldc</h1>
             <p class="sectionPara">Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, iure. Sit magnam quisquam, asperiores itaque enim ad deleniti numquam repudiandae in animi? Exercitationem, nobis aspernatur! Veniam, nemo repellat? Quam, expedita..
             </p>
             <div class="eachProcesses">
-                <img src="./img/handshake-icon-white-line.svg" alt="handshake">
                 <div class="eachprocessesPara">
                     <h1 class="processTitle">sfEimuLorem ipsum, dolor sit amet consectetur adipisicing elo</h1>
                     <p>
@@ -82,7 +71,6 @@ <h1 class="processTitle">sfEimuLorem ipsum, dolor sit amet consectetur adipisici
                 </div>
             </div>
             <div class="eachProcesses">
-                <img src="./img/cart-icon-white-line.svg" alt="handshake">
                 <div class="eachprocessesPara">
                     <h1 class="processTitle">Lorem ips</h1>
                     <p>
@@ -120,12 +108,12 @@ <h1>Canada</h1>
     <footer>
         <div class="joinSection">
             <div class="joinDesc">
-                <h1 class="sectionHeader">Join with us</h1>
+                <h1 class="sectionHeader">Avalie sua Experiência</h1>
                 <p class="sectionPara">
-                    Once you have created your account, you can purchase coins from website
+                    Deixe seu Feedback para os desenvolvedores, Agradecido!
                 </p>
             </div>
-            <button class="btn primaryBtn">JOIN NOW</button>
+            <a href="#"><button class="btn primaryBtn">Envie Feedback!</button></a>
         </div>
 
         <div class="footerlinksContainer">