From da34ed90e5e99a010273a003cda41f43728456f3 Mon Sep 17 00:00:00 2001 From: Ivan Pugliese Date: Tue, 5 Mar 2024 12:50:35 -0300 Subject: [PATCH 1/2] Agregando html semantico y estilos --- student-cvs/ivanpugliese-8873/index.html | 52 ++++++++++ student-cvs/ivanpugliese-8873/styles.css | 118 +++++++++++++++++++++++ 2 files changed, 170 insertions(+) create mode 100644 student-cvs/ivanpugliese-8873/index.html create mode 100644 student-cvs/ivanpugliese-8873/styles.css diff --git a/student-cvs/ivanpugliese-8873/index.html b/student-cvs/ivanpugliese-8873/index.html new file mode 100644 index 00000000..13bb2a8f --- /dev/null +++ b/student-cvs/ivanpugliese-8873/index.html @@ -0,0 +1,52 @@ + + + + + + Porfolio de Ivan Pugliese + + + + + + +
+
+ +
+ +
+
+
+ Hola!👋 mi nombre es +

Ivan Pugliese 👨🏻‍💻

+

Estudiante Fullstack JavaScript

+

Apasionado por la programación y el diseño, siempre en constante aprendizaje.

+
+
+ Github + + Linkedin + Correo Electrónico +
+
+ +
+

Sobre mi 🙋‍♂️

+

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.

+
+ +
+ {Desarrollado por Ivan Pugliese} +
+
+
+ + \ No newline at end of file diff --git a/student-cvs/ivanpugliese-8873/styles.css b/student-cvs/ivanpugliese-8873/styles.css new file mode 100644 index 00000000..9a002865 --- /dev/null +++ b/student-cvs/ivanpugliese-8873/styles.css @@ -0,0 +1,118 @@ +/* ---- Reset ----*/ + +html { + box-sizing: border-box; + font-family: "Onest", sans-serif; + background: radial-gradient(circle, rgba(2,0,31,1) 27%, rgba(0,0,0,0.9668242296918768) 92%); + scroll-behavior: smooth; +} + +*, +*::before, +*::after { +box-sizing: inherit; +} + + +body { + margin: 0; + padding: 0; + overflow-x: hidden; + color: #f1f1f1; +} + +img { + max-width: 100%; + height: auto; +} + +a { + text-decoration: none; + color: #f1f1f1; +} + +h1,h2,h3,p { + margin: 0; +} + +[id] { + scroll-margin-top: 9ex; +} + + +/* ---- Styles ----*/ + +.page { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + max-width: 850px; + margin: 0 auto; +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 2rem; + margin: 1rem; +} + +.header { + margin: 2rem 0; +} + +.nav-ul { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + list-style-type: none; +} + + +.home { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.presentation-text { + display: flex; + flex-direction: column; + gap: 5px; +} + +.presentation-text span, h2 { + font-weight: bold; + color: #38BDF8; +} + +.presentation-text h1 { + font-size: 2rem; +} + +.presentation-links { + display: flex; + gap: 10px; +} + +.presentation-links a { + display: flex; + align-items: center; + padding: 4px; + border: 1px solid gray; + border-radius: 0.5rem; + gap: 5px; +} + +.presentation-links a > svg { + width: 30px; + height: 30px; +} + +.about { + width: 100%; +} \ No newline at end of file From a862553b9024fb0102850962f15fdd00b6941db4 Mon Sep 17 00:00:00 2001 From: Ivan Pugliese Date: Wed, 13 Mar 2024 16:19:47 -0300 Subject: [PATCH 2/2] 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 @@

Sobre mi 🙋‍♂️

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.

-
- {Desarrollado por Ivan Pugliese} -
+
+

Contactame! 📩

+
+
+ Información personal + + +
+
+ Dejeme su mensaje! + +
+ + +
+
+ +
+ {Desarrollado por Ivan Pugliese} +
+ + \ 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