From a862553b9024fb0102850962f15fdd00b6941db4 Mon Sep 17 00:00:00 2001
From: Ivan Pugliese <ivanpugliese.f@gmail.com>
Date: Wed, 13 Mar 2024 16:19:47 -0300
Subject: [PATCH] Agregando formulario y quitando comportamiento por defecto

---
 student-cvs/ivanpugliese-8873/index.html | 31 +++++++++-
 student-cvs/ivanpugliese-8873/main.js    |  5 ++
 student-cvs/ivanpugliese-8873/styles.css | 72 ++++++++++++++++++++++--
 3 files changed, 100 insertions(+), 8 deletions(-)
 create mode 100644 student-cvs/ivanpugliese-8873/main.js

diff --git a/student-cvs/ivanpugliese-8873/index.html b/student-cvs/ivanpugliese-8873/index.html
index 13bb2a8f..d9649e0f 100644
--- 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>
\ No newline at end of file
diff --git a/student-cvs/ivanpugliese-8873/main.js b/student-cvs/ivanpugliese-8873/main.js
new file mode 100644
index 00000000..6df0ed4c
--- /dev/null
+++ 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
index 9a002865..c5ae34da 100644
--- 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);
 }
\ No newline at end of file