Agregando formulario y quitando comportamiento por defecto

Author: ivanpugliese1

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>

student-cvs/ivanpugliese-8873/main.js

@@ -0,0 +1,5 @@
+const FORM = document.querySelector("#form");
+
+FORM.addEventListener("submit", (event) => {
+  event.preventDefault();
+})

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);
 }