Agregando formulario y quitando comportamiento por defecto

undefined-academy · Mar 13, 2024 · a862553 · a862553
1 parent da34ed9
commit a862553
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 8 deletions.
diff --git a/student-cvs/ivanpugliese-8873/index.html b/student-cvs/ivanpugliese-8873/index.html
@@ -43,10 +43,35 @@ <h2>Sobre mi 🙋‍♂️</h2>
         <p>Nací el 6 de Febrero de 1999 en Argentina. Apasionado por la tecnología desde muy joven y de la programación desde que me adentre en el mundo de forma autodidacta. Considero que la mejor herramienta es el conocimiento de uno mismo, mi mayor motivación es seguir aprendiendo, fortaleciendo mi desarrollo personal y profesional.</p>
       </section>
 
-      <footer class="footer">
-        <small>{Desarrollado por <strong>Ivan Pugliese</strong>}</small>
-      </footer>
+      <section id="contact" class="contact">
+        <h2>Contactame! 📩</h2>
+        <form action="" id="form" class="form">
+          <fieldset>
+            <legend>Información personal</legend>
+            <label>
+              Nombre: 
+              <input type="text" name="nombre" placeholder="Ingrese su nombre">
+            </label>
+            <label>
+              Email: 
+              <input type="email" name="email" placeholder="Ingrese su correo">
+            </label>
+          </fieldset>
+          <fieldset>
+            <legend>Dejeme su mensaje!</legend>
+            <textarea name="" id="" cols="30" rows="10"></textarea>
+          </fieldset>
+
+          <button>Enviar</button>
+        </form>
+      </section>
     </main>
+
+    <footer class="footer">
+      <small>{Desarrollado por <strong>Ivan Pugliese</strong>}</small>
+    </footer>
   </div>
+
+  <script src="./main.js"></script>
 </body>
 </html>
diff --git a/student-cvs/ivanpugliese-8873/main.js b/student-cvs/ivanpugliese-8873/main.js
@@ -0,0 +1,5 @@
+const FORM = document.querySelector("#form");
+
+FORM.addEventListener("submit", (event) => {
+  event.preventDefault();
+})
diff --git a/student-cvs/ivanpugliese-8873/styles.css b/student-cvs/ivanpugliese-8873/styles.css
@@ -10,7 +10,7 @@ html {
 *,
 *::before,
 *::after {
-box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 
@@ -47,17 +47,16 @@ h1,h2,h3,p {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  max-width: 850px;
-  margin: 0 auto;
 }
 
 main {
+  max-width: 800px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 2rem;
-  margin: 1rem;
+  padding: 1rem;
 }
 
 .header {
@@ -72,8 +71,8 @@ main {
   list-style-type: none;
 }
 
-
 .home {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -96,6 +95,7 @@ main {
 
 .presentation-links {
   display: flex;
+  flex-flow: row wrap;
   gap: 10px;
 }
 
@@ -115,4 +115,66 @@ main {
 
 .about {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.contact {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+
+fieldset {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 0.5rem;
+  gap: 5px;
+}
+
+input {
+  padding: 3px 8px;
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+input:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid #0370a1;
+  border: 1px solid #0370a1;
+}
+
+textarea {
+  font-family: "Onest";
+  padding: 12px;
+  resize: none;
+  border-radius: 0.5rem;
+}
+
+button {
+  cursor: pointer;
+  padding: 5px;
+  margin: 0 auto;
+  width: 40%;
+  font-family: "Onest";
+  color: #f1f1f1;
+  background-color: #0370a1;
+  border: none;
+  border-radius: 0.5rem;
+  transition: all 0.2s;
+}
+
+button:hover {
+  transform: scale(1.1);
 }