From 5c391852e7d0ce4e9c8fa0f0ff06aa837b117071 Mon Sep 17 00:00:00 2001
From: EmmanuelAle <159200745+EmmanuelAle@users.noreply.github.com>
Date: Fri, 19 Apr 2024 09:45:33 -0600
Subject: [PATCH] Add files via upload

---
 flexbox.css | 1084 +++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html  |  191 +++++++++
 reset.css   |   48 +++
 style.css   |  298 ++++++++++++++
 4 files changed, 1621 insertions(+)
 create mode 100644 flexbox.css
 create mode 100644 index.html
 create mode 100644 reset.css
 create mode 100644 style.css

diff --git a/flexbox.css b/flexbox.css
new file mode 100644
index 0000000..394f848
--- /dev/null
+++ b/flexbox.css
@@ -0,0 +1,1084 @@
+body {
+  background-color: #ADBECA;
+  font-family: "Tilt Neon", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings:
+    "XROT" 0,
+    "YROT" 0;
+}
+
+/*Cabecera*/
+
+.cabecera__container {
+    display: flex;
+    justify-content: space-around;
+    gap: 80px;
+    padding-top: 40px;
+}
+
+.cabecera__name {
+    font-size: 1.25em;
+}
+
+.cabecera__iconos__item {
+    display: flex;
+    gap: 40px;
+    font-size: 1.25em;
+}
+
+/*Información central*/
+
+.principal__container {
+    padding: 80px 270px 100px 236px;
+    justify-content: space-around;
+    gap: 40px;
+    align-self: flex-start;
+}
+
+.principal__titulo {
+    font-size: 4em;
+    padding: 0 0 20px 50px ;
+}
+
+.principal__img {
+    float: right;
+    width: 350px;
+    padding: 0 10px 0 0 ;
+   border-radius: 200px 200px 200px 200px ;
+}
+
+.principal__informaicion {
+    display: flex;
+    flex-direction: column;
+    font-size: 2em;
+    padding: 0 0 20px 50px ;
+    font-style: normal;
+}
+
+.principal__iconos__item {
+    display: flex;
+    font-size: 1.5em;
+    padding: 20px 0 20px 50px ;
+    gap: 50px;
+   
+}
+
+a {
+    text-decoration: none;
+    font-style: normal;
+    color: #000;
+}
+
+a:hover{
+    text-decoration: underline;
+}
+
+.principal__iconos__item__img {
+    padding-left: 30px;
+}
+
+/*Sobre mi*/
+
+.about__container {
+    padding: 50px 270px 50px 280px;
+    background-color: #A9D5F5;
+}
+
+.about__titulo {
+    font-size: 3em;
+    padding: 0 0 30px 0 ;
+}
+
+.about__informacion__cero {
+    font-size: 1.25em;
+    padding: 0 400px 0 0;
+}
+
+.about__informacion__dos , .about__informacion__uno {
+    padding: 0 0 30px 0 ;
+}
+
+.about__img {
+    background-color: #A9D5F5;
+    width: 150px;
+    padding-top:15px;
+}
+
+/*Skills*/
+
+.skills__titulo {
+    font-size: 3em;
+    padding: 50px 270px 10px 280px;
+    text-align: center;
+}
+
+.skills__container {
+    padding: 20px 270px 50px 280px;
+    display: flex;
+    flex-grow: 1;
+    
+}
+
+.skills__items {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    gap: 50px;
+}
+
+.skills__items__text {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    font-size: 1.5em;
+    text-align: center;
+    gap: 10px;
+    background-color: #486275;
+    padding-bottom: 10px;
+}
+
+.skills_img {
+    width: 100px;
+    flex-grow: 1;
+    padding-left: 112px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+.skills_img_E {
+    width: 100px;
+    flex-grow: 1;
+    padding-left: 112px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+/*Hobbies*/
+
+.hobbies__titulo {
+    font-size: 3em;
+    padding: 50px 270px 10px 280px;
+    text-align: center;
+}
+
+.Hobbies__container {
+    padding: 20px 270px 80px 280px;
+    display: flex;
+    flex-grow: 1;
+    
+}
+
+.Hobbies__items {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    gap: 50px;
+}
+
+.Hobbies__items__text {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    font-size: 1.5em;
+    text-align: center;
+    gap: 10px;
+    background-color: #486275;
+    padding-bottom: 10px;
+}
+
+.Hobbies_img {
+    width: 100px;
+    flex-grow: 1;
+    padding-left: 112px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+.Hobbies_img__M {
+    width: 100px;
+    flex-grow: 1;
+    padding-left: 112px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+/*Formación académica*/
+
+.formación__titulo {
+    font-size: 3em;
+    padding: 50px 270px 10px 280px;
+    text-align: center;
+}
+
+.formación__container {
+    padding: 20px 270px 80px 280px;
+    display: flex;
+    flex-grow: 1;
+    background-color: #A9D5F5;
+}
+
+.formación__items {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    gap: 10px;
+}
+
+.formación__items__text {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    font-size: 1.5em;
+    text-align: center;
+    gap: 10px;
+    background-color: #7C91A0;
+    padding-bottom: 10px;
+    margin-top: 40px;
+    margin-left: 150px;
+    margin-right: 150px;
+}
+
+.formación_img {
+    width: 270px;
+    flex-grow: 1;
+    padding-left: 150px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+.formación_img__a {
+    width: 340px;
+    flex-grow: 1;
+    padding-left: 150px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+/*Experiencia profesional*/
+
+.exp__container {
+    padding: 80px 270px 150px 236px;
+    justify-content: space-around;
+    gap: 40px;
+    align-self: flex-start;
+}
+
+.exp__titulo {
+    font-size: 3em;
+    padding: 50px 270px 10px 280px;
+    text-align: center;
+}
+
+.exp__img {
+    float: left;
+    width: 900px;
+    padding: 0 10px 0 150px ;
+  
+}
+
+.exp__informaicion {
+    display: flex;
+    flex-direction: column;
+    font-size: 2em;
+    padding: 150px 0 0px 50px ;
+    font-style: normal;
+}
+
+.exp__informaicion__uno {
+    display: flex;
+    flex-direction: column;
+    font-size: 2em;
+    font-style: normal;
+    padding: 0 0 0px 50px ;
+}
+
+.exp__iconos__item {
+    display: flex;
+    font-size: 1.5em;
+    padding: 20px 0 150px 50px ;
+    gap: 20px;
+   
+}
+
+.exp__Repositorio , .exp__Demo {
+    margin: 20px 15px 0px 0px;
+    padding: 20px 20px 20px 20px;
+    font-size: 1em;
+    color: white;
+    background-color: #0E2433;
+}
+
+/*Formulario*/
+
+.formulario__container {
+    padding: 50px 270px 80px 280px;
+    gap: 20px;
+}
+
+.formulario__titulo {
+    font-size: 3em;
+    padding: 10px 0px 10px 0px ;
+}
+
+.formulario__informacion {
+    display: flex;
+    flex-direction: column;
+    font-size: 1.25em;
+    padding: 10px 270px 20px 0px ;
+    font-style: normal;
+}
+
+.formulario__img {
+    float: left;
+    width: 650px;
+    height: 900px;
+    padding: 10px 30px 30px 0 ;
+}
+
+.formulario__recuadro {
+    display: flex;
+    flex-grow: 1;
+    padding: 20px 10px 20px 10px ;
+}
+
+.formulario__recuadro {
+    margin: 30px 15px 30px 0px;
+    width: 35%;
+}
+
+.formulario__enviar {
+    margin: 20px 15px 0px 0px;
+    width: 10%;
+    padding: 20px 20px 20px 20px;
+    font-size: 1em;
+    color: white;
+    background-color: #0E2433;
+}
+
+/*Footer*/
+
+footer {
+    text-align: center;
+    font-size: 1.35em;
+    padding: 30px 0px 30px 0px;
+    background-color: #21394B;
+    color: white;
+}
+
+
+/*Media*/
+
+@media screen and (max-width:480px) {
+
+
+    /*Cabecera*/
+
+.cabecera__container {
+    display: flex;
+    flex-shrink: 2;
+    padding-top: 40px;
+}
+
+.cabecera__name {
+    font-size: 0.80em;
+    padding: 0 0 0 10px;
+}
+
+.cabecera__iconos__item {
+    display: inline-block;
+    font-size: 0.80em;
+    flex-shrink: 2;
+    padding: 0 10px 0 0px;
+}
+
+.cabecera__about , .cabecera__skills , .cabecera__hobbies , .cabecera__formacion , .cabecera__proyectos {
+    display: none;
+}
+
+/*Información principal*/
+
+.principal__container {
+ display: inline-block;
+ padding: 0 0 0 0;
+}
+
+.principal__titulo {
+    display: block;
+    font-size: 1.5em;
+    padding: 180px 0 20px 10px ;
+    width: 430px;
+    font-weight: bolder;
+}
+
+.principal__informaicion {
+    display: block;
+    width: 430px;
+    font-size: 1em;
+    padding: 0px 0 20px 10px ;
+}
+
+.principal__img {
+    position: absolute;
+    display: block;
+    width: 150px;
+    padding: 10px 10px 10px 10px ;
+   border-radius: 50% 50% 50% 50% ;
+}
+
+.principal__iconos__item {
+    display: flex;
+    font-size: 1em;
+    padding: 0 10px 10px 10px ;
+    gap: 2px;
+    text-align: center;
+}
+
+a {
+    text-decoration: none;
+    font-style: normal;
+    color: #000;
+}
+
+a:hover{
+    text-decoration: underline;
+}
+
+.principal__iconos__item__img {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+/*Sobre mi*/
+
+.about__container {
+    padding: 0px 0px 0px 0px;
+    background-color: #A9D5F5;
+}
+
+.about__titulo {
+    font-size: 1.5em;
+    padding: 10px 0 30px 10px ;
+    font-weight: bolder;
+}
+
+.about__informacion__cero {
+    font-size: 0.9em;
+    padding: 0 0px 0 0;
+}
+
+.about__informacion__dos , .about__informacion__uno {
+    padding: 0 0 30px 0 ;
+}
+
+.about__img {
+    background-color: #A9D5F5;
+    width: 150px;
+    padding-top:15px;
+}
+
+/*Skills*/
+
+.skills__titulo {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 10px 0px 10px 180px;
+}
+
+.skills__container {
+    padding: 5px 10px 0px 10px;
+}
+
+
+.skills__items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    width: 0%;
+}
+
+
+.skills__items__text {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    font-size: 1em;
+    text-align: center;
+    gap: 10px;
+    background-color: #486275;
+    padding: 20px 20px 20px 20px;
+}
+
+.skills_img {
+    width: 100px;
+    flex-grow: 1;
+    padding: 10px 10px 10px 20px;
+}
+
+.skills_img_E {
+    width: 100px;
+    flex-grow: 1;
+    padding: 10px 10px 10px 125px;
+}
+
+/*Hobbies*/
+
+.hobbies__titulo {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 10px 0px 10px 160px;
+}
+
+.Hobbies__container {
+    padding: 5px 10px 0px 10px;
+}
+
+.Hobbies__items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    width: 0%;
+}
+
+.Hobbies__items__text {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    font-size: 1em;
+    text-align: center;
+    gap: 10px;
+    background-color: #486275;
+    
+}
+
+.Hobbies_img  {
+    width: 100px;
+    flex-grow: 1;
+    padding: 10px 10px 10px 50px;
+    align-items: center;
+}
+
+.Hobbies_img__M {
+    width: 100px;
+    flex-grow: 1;
+    padding: 10px 10px 10px 150px;
+    align-items: center;
+}
+
+/*Formación académica*/
+
+.formación__titulo {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 10px 0px 10px 80px;
+}
+
+.formación__container {
+    padding: 0px 0px 0px 0px;
+    display: flex;
+    flex-direction: column;
+    background-color: #A9D5F5;
+}
+
+.formación__items {
+    display: inline-block;
+    align-items: center;
+    gap: 10px;
+}
+
+.formación__items__text {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    font-size: 1em;
+    text-align: center;
+    gap: 10px;
+    background-color: #7C91A0;
+    margin: 20px 20px 20px 20px;
+    padding-bottom: 10px;
+}
+
+.formación_img {
+    width: 120px;
+    flex-grow: 1;
+    padding: 0;
+    padding: 10px 0px 10px 130px;
+}
+
+.formación_img__a {
+    width: 120px;
+    flex-grow: 1;
+    padding: 10px 0px 10px 130px;
+}
+
+/*Experiencia profesional*/
+
+.exp__container {
+    padding: 0px 0px 0px 0px;
+    justify-content: space-around;
+    gap: 40px;
+    align-self: flex-start;
+}
+
+.exp__titulo {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 10px 0px 10px 80px;
+}
+
+.exp__img {
+    float: left;
+    width: 350px;
+    padding: 0 0px 0 30px ;
+  
+}
+
+.exp__informaicion {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 10px 0 0px 50px ;
+    font-style: normal;
+}
+
+.exp__informaicion__uno {
+    display: flex;
+    flex-direction: column;
+    font-size: 1.25em;
+    font-style: normal;
+    padding: 5px 0 0px 50px ;
+}
+
+.exp__iconos__item {
+    display: flex;
+    font-size: 1em;
+    padding: 10px 0 50px 50px ;
+    gap: 20px;
+   
+}
+
+.exp__Repositorio , .exp__Demo {
+    margin: 10px 15px 0px 0px;
+    padding: 20px 20px 20px 20px;
+    font-size: 1em;
+    color: white;
+    background-color: #0E2433;
+}
+
+/*Formulario*/
+
+.formulario__container {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 0px 0px 0px 10px;
+}
+
+.formulario__titulo {
+    font-size: 3em;
+    padding: 10px 0px 10px 0px ;
+}
+
+.formulario__informacion {
+    display: flex;
+    flex-direction: column;
+    font-size: 1em;
+    padding: 0px 5px 20px 10px ;
+    font-style: normal;
+}
+
+.formulario__img {
+ display: none;
+}
+
+.formulario__recuadro {
+    display: flex;
+    flex-grow: 1;
+    padding: 20px 10px 20px 10px ;
+}
+
+.formulario__recuadro {
+    margin: 15px 15px 30px 0px;
+    width: 85%;
+}
+
+.formulario__enviar {
+    margin: 0px 15px 20px 0px;
+    width: 50%;
+    padding: 10px 20px 10px 20px;
+    font-size: 0.8em;
+    color: white;
+    background-color: #0E2433;
+}
+
+/*Footer*/
+
+footer {
+    text-align: center;
+    font-size: 0.7em;
+    padding: 30px 0px 30px 0px;
+    background-color: #21394B;
+    color: white;
+}
+
+
+}
+
+/*Media para tablet*/
+
+@media screen and (max-width: 1280px)  {
+
+
+    /*Cabecera*/
+
+.cabecera__container {
+    display: flex;
+    flex-shrink: 2;
+    padding-top: 40px;
+    justify-content: space-between;
+}
+
+.cabecera__name {
+    font-size: 0.80em;
+    padding: 0 0 0 10px;
+}
+
+.cabecera__iconos__item {
+    display: inline-block;
+    font-size: 0.80em;
+    flex-shrink: 2;
+    padding: 0 10px 0 0px;
+}
+
+.cabecera__about , .cabecera__skills , .cabecera__hobbies , .cabecera__formacion , .cabecera__proyectos {
+    display: none;
+}
+
+/*Información principal*/
+
+.principal__container {
+ justify-content: space-around;
+ gap: 40px;
+ align-self: flex-start;
+ padding: 0 0 0 0;
+}
+
+.principal__titulo {
+    font-size: 2em;
+    padding: 20px 0 0px 10px ;
+}
+
+.principal__informaicion {
+    display: flex;
+    flex-direction: column;
+    font-size: 1.5em;
+    padding: 10px 0 20px 10px;
+    font-style: normal;
+}
+
+.principal__img {
+    float: right;
+    width: 150px;
+    padding: 10px 10px 0 0;
+   border-radius: 50% 50% 50% 50% ;
+}
+
+.principal__iconos__item {
+    display: flex;
+    font-size: 1em;
+    padding: 0 10px 10px 10px ;
+    gap: 30px;
+}
+
+a {
+    text-decoration: none;
+    font-style: normal;
+    color: #000;
+}
+
+a:hover{
+    text-decoration: underline;
+}
+
+.principal__iconos__item__img {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+/*Sobre mi*/
+
+.about__container {
+    padding: 0px 0px 0px 0px;
+    background-color: #A9D5F5;
+}
+
+.about__titulo {
+    font-size: 1.5em;
+    padding: 10px 0px 10px 10px;
+    font-weight: bolder;
+}
+
+.about__informacion__cero {
+    font-size: 0.9em;
+    padding: 0 0px 0 0;
+}
+
+.about__informacion__dos , .about__informacion__uno {
+    padding: 0 0 30px 0 ;
+}
+
+.about__img {
+    background-color: #A9D5F5;
+    width: 150px;
+    padding-top:15px;
+}
+
+/*Skills*/
+
+.skills__titulo {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 10px 0px 10px 480px;
+}
+
+.skills__container {
+    padding: 5px 10px 0px 10px;
+}
+
+
+.skills__items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    width: 0%;
+}
+
+
+.skills__items__text {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    font-size: 1em;
+    text-align: center;
+    gap: 10px;
+    background-color: #486275;
+    padding: 20px 20px 20px 20px;
+}
+
+.skills_img {
+    width: 100px;
+    flex-grow: 1;
+    padding: 10px 10px 10px 80px;
+}
+
+.skills_img_E {
+    width: 100px;
+    flex-grow: 1;
+    padding: 10px 10px 10px 170px;
+}
+
+/*Hobbies*/
+
+.hobbies__titulo {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 10px 0px 10px 460px;
+}
+
+.Hobbies__container {
+    padding: 5px 10px 0px 10px;
+}
+
+.Hobbies__items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    width: 0%;
+}
+
+.Hobbies__items__text {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    font-size: 1em;
+    text-align: center;
+    gap: 10px;
+    background-color: #486275;
+    
+}
+
+.Hobbies_img  {
+    width: 100px;
+    flex-grow: 1;
+    padding: 10px 10px 10px 80px;
+    align-items: center;
+}
+
+.Hobbies_img__M {
+    width: 100px;
+    flex-grow: 1;
+    padding: 10px 10px 10px 440px;
+    align-items: center;
+}
+
+/*Formación académica*/
+
+.formación__titulo {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 10px 0px 10px 400px;
+}
+
+.formación__container {
+    padding: 0px 0px 0px 0px;
+    display: flex;
+    flex-direction: column;
+    background-color: #A9D5F5;
+}
+
+.formación__items {
+    display: inline-block;
+    align-items: center;
+    gap: 10px;
+}
+
+.formación__items__text {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    font-size: 1em;
+    text-align: center;
+    gap: 10px;
+    background-color: #7C91A0;
+    margin: 20px 20px 20px 20px;
+    padding-bottom: 10px;
+}
+
+.formación_img {
+    width: 120px;
+    flex-grow: 1;
+    padding: 0;
+    padding: 10px 0px 10px 420px;
+}
+
+.formación_img__a {
+    width: 120px;
+    flex-grow: 1;
+    padding: 10px 0px 10px 420px;
+}
+
+/*Experiencia profesional*/
+
+.exp__container {
+    padding: 0px 0px 0px 0px;
+    justify-content: space-around;
+    gap: 40px;
+    align-self: flex-start;
+}
+
+.exp__titulo {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 10px 0px 10px 400px;
+}
+
+.exp__img {
+  
+    width: 500px;
+    padding: 0 0px 0 30px ;
+  
+}
+
+.exp__informaicion {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 5px 0 0px 50px ;
+    font-style: normal;
+}
+
+.exp__informaicion__uno {
+    display: flex;
+    flex-direction: column;
+    font-size: 1.25em;
+    font-style: normal;
+    padding: 5px 0 0px 50px ;
+    margin: 0 0 0 0;
+}
+
+.exp__iconos__item {
+    display: flex;
+    font-size: 1em;
+    padding: 10px 0 50px 50px ;
+    gap: 20px;
+   
+}
+
+.exp__Repositorio , .exp__Demo {
+    margin: 10px 15px 0px 0px;
+    padding: 20px 20px 20px 20px;
+    font-size: 1em;
+    color: white;
+    background-color: #0E2433;
+}
+
+/*Formulario*/
+
+.formulario__container {
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 0px 0px 0px 10px;
+}
+
+.formulario__titulo {
+    font-size: 1.5em;
+    padding: 10px 0px 10px 3px ;
+}
+
+.formulario__informacion {
+    display: flex;
+    flex-direction: column;
+    font-size: 1em;
+    padding: 0px 5px 20px 0px ;
+    font-style: normal;
+}
+
+.formulario__img {
+ display: none;
+}
+
+.formulario__recuadro {
+    display: flex;
+    flex-grow: 1;
+    padding: 20px 10px 20px 12px ;
+}
+
+.formulario__recuadro {
+    margin: 15px 0px 30px 0px;
+    width: 85%;
+}
+
+.formulario__enviar {
+    margin: 0px 15px 20px 0px;
+    width: 50%;
+    padding: 10px 20px 10px 20px;
+    font-size: 0.7em;
+    color: white;
+    background-color: #0E2433;
+}
+
+/*Footer*/
+
+footer {
+    text-align: center;
+    font-size: 0.7em;
+    padding: 30px 0px 30px 0px;
+    background-color: #21394B;
+    color: white;
+}
+
+}
+
+
+
+
+
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2393268
--- /dev/null
+++ b/index.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="reset.css">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="flexbox.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap" rel="stylesheet">
+    <title>Portafolio Laboral</title>
+</head>
+<body>
+
+      <!-- Cabecera -->
+    <header>
+     
+        <nav class="cabecera__container">
+
+            <h1 class="cabecera__name">Emmanuel Alejandre Valeriano</h1>
+
+            <div class="cabecera__iconos__item">
+                <a href="#sobre__mi"><p class="cabecera__about">Sobre mi</p></a> 
+                <a href="#skills"><p class="cabecera__skills">Skills</p></a>
+                <a href="#Hobbies"><p  class="cabecera__hobbies">Hobbies</p>
+                <a href="#Formacion"><p  class="cabecera__formacion">Formación</p></a>
+                <a href="#Proyectos"><p  class="cabecera__proyectos">Experiencia Laboral</p></a>
+                <a href="#Contacto"><p class="cabecera__correo">Emmanuel.alejandre@outlook.com</p></a>
+            </div>
+
+        </nav>
+
+    </header>
+
+<!-- Información central -->
+
+    <section class="principal__container">
+
+        <img src="img/logo__principal.jfif" class="principal__img">
+
+        <h2 class="principal__titulo">Hola , mi nombre es Emmanuel Alejandre y construyo páginas web</h2>
+
+            <p class="principal__informaicion">Soy formado en html5, JS, Css3 e inicios de la carrera de contabilidad, actualmente soy participante del proyecto Oracle ONE en Alura Latam</p>
+    
+        <div class="principal__iconos__item">
+            <a href="https://github.com/EmmanuelAle"><p class="principal__Github">Github<img src="img/Vector.png" class="principal__iconos__item__img"></p></a>
+            <a href="https://www.linkedin.com/in/emmanuel-alejandre/"><p class="principal__Linkedin">Linkedin<img src="img/Vector.png" class="principal__iconos__item__img"></p></a>
+            <a href="https://www.instagram.com/__emisantos_/"><p class="principal__Instagram">Instagram<img src="img/Vector.png" class="principal__iconos__item__img"></p></a>
+            <a href="https://drive.google.com/file/d/1z2efM42Zw_jHiZlxs8q7eo1ePF04GTbX/view?usp=sharing"><p class="principal__Curriculum">Curriculum<img src="img/Vector.png" class="principal__iconos__item__img"></p></a>
+        </div>
+
+    </section>
+
+<!-- Sobre mi -->
+
+    <section class="about__container" >
+
+        <div id="sobre__mi">
+            <h3 class="about__titulo">Sobre mi</h3>
+        </div>
+
+        <div class="about__informacion__cero">
+
+            <p class="about__informacion__uno">Hola, Soy un apasionado integrante de Alura, me especializo en el desarrollo fronto end, además de estudiar para contador público con un amor para resolver y crear experiencias digitales.</p>
+
+            <p class="about__informacion__dos">En el mundo del desarrollo web me especializo en Html5, Css3 y JavaScript, me encanta el desafío diseños en experiencias para los usuarios, desde pequeño me ha gustado mucho el ambiente de diseño, aunque sé que no es mi fuerte, programar los diseños me parece que es en lo que soy bueno.</p>
+    
+            <p> Creo firmemente en el aprendizaje continuo, en que todos podemos lograr nuestras métas, ya que el talento natural no es suficiente para llegar a donde queremos ,la constancia es el factor que nos permite la grandeza</p>
+           
+            <p> Estoy muy emocionado en compartir mi portafolio con ustedes, espero que lo disfruten y sea de su agrado.</p>
+
+            <img src="img/firma.png" class="about__img">
+        </div>
+    
+    </section>
+
+<!-- Skills -->
+
+<div id="skills">
+    <h4 class="skills__titulo">Skills</h4>
+</div>
+
+<section class="skills__container">
+
+    <div class="skills__items">
+        <p class="skills__items__text"><img src="img/html.jpg" class="skills_img"> Html 5</p>
+        <p class="skills__items__text"><img src="img/css.png" class="skills_img"> Css 3</p>
+        <p class="skills__items__text"><img src="img/java.png" class="skills_img"> JavaScript</p>
+        <p class="skills__items__text"><img src="img/github.png" class="skills_img"> Github</p>
+        <p class="skills__items__text"><img src="img/excel-icon-transparent-4.png" class="skills_img_E"> Excel</p>
+    </div>
+
+</section>
+
+<!-- Hobbies -->
+
+<div id="Hobbies">
+    <h4 class="hobbies__titulo">Hobbies</h4>
+</div>
+
+
+<section class="Hobbies__container">
+
+    <div class="Hobbies__items">
+        <p class="Hobbies__items__text"><img src="img/cocina.png" class="Hobbies_img"> Cocinar</p>
+        <p class="Hobbies__items__text"><img src="img/anime.png" class="Hobbies_img"> Ver anime</p>
+        <p class="Hobbies__items__text"><img src="img/videojuegos.png" class="Hobbies_img"> Juegar videojuegos</p>
+        <p class="Hobbies__items__text"><img src="img/leer.png" class="Hobbies_img"> Leer</p>
+        <p class="Hobbies__items__text"><img src="img/musica.png" class="Hobbies_img__M"> Oir música</p>
+    </div>
+    
+</section>
+
+<!-- Formación académica -->
+<div id="Formacion">
+    <h5 class="formación__titulo">Formación académica</h5>
+</div>
+
+<section class="formación__container">
+
+    <div class="formación__items">
+        <p class="formación__items__text"><img src="img/IPN.png" class="formación_img"> Contador Público IPN</p>
+        <p class="formación__items__text"><img src="img/ALURA.png" class="formación_img__a"> Especialización Front-End</p>
+    </div>
+    
+</section>
+
+<!-- Experiencia profesional -->
+
+<div id="Proyectos">
+    <h5 class="exp__titulo">Experiencia Laboral</h5>
+</div>
+
+<section class="exp__container">
+
+    <img src="img/encriptador.png" class="exp__img">
+
+   
+
+        <p class="exp__informaicion">Encriptador de Texto</p>
+        <p class="exp__informaicion__uno">Alura Challange</p>
+
+    <div class="exp__iconos__item">
+        <a href="https://github.com/EmmanuelAle/Encriptador-Final.git"><p class="exp__Repositorio">Repositorio</p></a>
+        <a href="https://emmanuelale.github.io/Encriptador-Final/"><p class="exp__Demo">Ver demo</p></a>
+       
+    </div>
+
+</section>
+
+
+
+<!-- Experiencia profesional -->
+
+
+<form class="formulario__container">
+
+    <img src="img/contacto.jfif" class="formulario__img">
+
+    <div id="Contacto">
+        <h7 class="formulario__titulo">Contacto</h7>
+    </div>
+   
+
+    <p class="formulario__informacion">¿Quieres contactarme?</p>
+    <p class="formulario__informacion">Complete el siguiente formulario y me pondré en contacto con usted lo antes posible</p>
+
+        <label for="nombreapellido">Nombre y Apellido</label>
+        <input type="text" id="nombreapellido" class="formulario__recuadro" required placeholder="Emmanuel Alejandre">
+
+        <label for="correoelectronico">Correo Electrónico</label>
+        <input type="email" id="correoelectronico" class="formulario__recuadro" required placeholder="email@dominio.com">
+
+        <label for="Asunto">Asunto</label>
+        <input type="text" id="Asunto" class="formulario__recuadro" required>
+
+        <label for="mensaje">Mensaje</label>
+        <textarea cols="70" rows="10" id="mensaje" class="formulario__recuadro" required></textarea>
+
+        <input type="submit" value="Enviar mensaje" class="formulario__enviar">
+   
+</form>
+
+<footer >
+    <h8>Desarrollado por Emmanuel Alejandre</h8>
+    <p>2024</p>
+</footer>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/reset.css b/reset.css
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..86130ed
--- /dev/null
+++ b/style.css
@@ -0,0 +1,298 @@
+body {
+    background-color: #ADBECA;
+    font-family: "Tilt Neon", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    font-variation-settings:
+      "XROT" 0,
+      "YROT" 0;
+  }
+  
+  /*Cabecera*/
+  
+  .cabecera__container {
+      display: flex;
+      justify-content: space-around;
+      gap: 80px;
+      padding-top: 40px;
+  }
+  
+  .cabecera__name {
+      font-size: 1.25em;
+  }
+  
+  .cabecera__iconos__item {
+      display: flex;
+      gap: 40px;
+      font-size: 1.25em;
+  }
+  
+  /*Información central*/
+  
+  .principal__container {
+      padding: 80px 270px 100px 236px;
+      justify-content: space-around;
+      gap: 40px;
+      align-self: flex-start;
+  }
+  
+  .principal__titulo {
+      font-size: 4em;
+      padding: 0 0 20px 50px ;
+  }
+  
+  .principal__img {
+      float: right;
+      width: 350px;
+      padding: 0 10px 0 0 ;
+     border-radius: 200px 200px 200px 200px ;
+  }
+  
+  .principal__informaicion {
+      display: flex;
+      flex-direction: column;
+      font-size: 2em;
+      padding: 0 0 20px 50px ;
+      font-style: normal;
+  }
+  
+  .principal__iconos__item {
+      display: flex;
+      font-size: 1.5em;
+      padding: 20px 0 20px 50px ;
+      gap: 50px;
+     
+  }
+  
+  a {
+      text-decoration: none;
+      font-style: normal;
+      color: #000;
+  }
+  
+  a:hover{
+      text-decoration: underline;
+  }
+  
+  .principal__iconos__item__img {
+      padding-left: 30px;
+  }
+  
+  /*Sobre mi*/
+  
+  .about__container {
+      padding: 50px 270px 50px 280px;
+      background-color: #A9D5F5;
+  }
+  
+  .about__titulo {
+      font-size: 3em;
+      padding: 0 0 30px 0 ;
+  }
+  
+  .about__informacion__cero {
+      font-size: 1.25em;
+      padding: 0 400px 0 0;
+  }
+  
+  .about__informacion__dos , .about__informacion__uno {
+      padding: 0 0 30px 0 ;
+  }
+  
+  .about__img {
+      background-color: #A9D5F5;
+      width: 150px;
+      padding-top:15px;
+  }
+  
+  /*Skills*/
+  
+  .skills__titulo {
+      font-size: 3em;
+      padding: 50px 270px 10px 280px;
+      text-align: center;
+  }
+  
+  .skills__container {
+      padding: 20px 270px 50px 280px;
+      display: flex;
+      flex-grow: 1;
+      
+  }
+  
+  .skills__items {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      gap: 50px;
+  }
+  
+  .skills__items__text {
+      display: flex;
+      flex-flow: column;
+      flex-grow: 1;
+      font-size: 1.5em;
+      text-align: center;
+      gap: 10px;
+      background-color: #486275;
+      padding-bottom: 10px;
+  }
+  
+  .skills_img {
+      width: 100px;
+      flex-grow: 1;
+      padding-left: 112px;
+      padding-top: 20px;
+      padding-bottom: 20px;
+  }
+  
+  /*Hobbies*/
+  
+  .hobbies__titulo {
+      font-size: 3em;
+      padding: 50px 270px 10px 280px;
+      text-align: center;
+  }
+  
+  .Hobbies__container {
+      padding: 20px 270px 80px 280px;
+      display: flex;
+      flex-grow: 1;
+      
+  }
+  
+  .Hobbies__items {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      gap: 50px;
+  }
+  
+  .Hobbies__items__text {
+      display: flex;
+      flex-flow: column;
+      flex-grow: 1;
+      font-size: 1.5em;
+      text-align: center;
+      gap: 10px;
+      background-color: #486275;
+      padding-bottom: 10px;
+  }
+  
+  .Hobbies_img {
+      width: 100px;
+      flex-grow: 1;
+      padding-left: 112px;
+      padding-top: 20px;
+      padding-bottom: 20px;
+  }
+  
+  /*Formación académica*/
+  
+  .formación__titulo {
+      font-size: 3em;
+      padding: 50px 270px 10px 280px;
+      text-align: center;
+  }
+  
+  .formación__container {
+      padding: 20px 270px 80px 280px;
+      display: flex;
+      flex-grow: 1;
+      background-color: #A9D5F5;
+  }
+  
+  .formación__items {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      gap: 50px;
+  }
+  
+  .formación__items__text {
+      display: flex;
+      flex-flow: column;
+      flex-grow: 1;
+      font-size: 1.5em;
+      text-align: center;
+      gap: 10px;
+      background-color: #7C91A0;
+      padding-bottom: 10px;
+      margin-top: 40px;
+      margin-left: 150px;
+      margin-right: 150px;
+  }
+  
+  .formación_img {
+      width: 270px;
+      flex-grow: 1;
+      padding-left: 150px;
+      padding-top: 20px;
+      padding-bottom: 20px;
+  }
+  
+  .formación_img__a {
+      width: 340px;
+      flex-grow: 1;
+      padding-left: 150px;
+      padding-top: 20px;
+      padding-bottom: 20px;
+  }
+  
+  /*Experiencia profesional*/
+  
+  .formulario__container {
+      padding: 20px 270px 80px 280px;
+      gap: 20px;
+  }
+  
+  .formulario__titulo {
+      font-size: 3em;
+      padding: 10px 0px 10px 0px ;
+  }
+  
+  .formulario__informacion {
+      display: flex;
+      flex-direction: column;
+      font-size: 1.25em;
+      padding: 10px 270px 20px 0px ;
+      font-style: normal;
+  }
+  
+  .formulario__img {
+      float: left;
+      width: 650px;
+      height: 900px;
+      padding: 10px 30px 30px 0 ;
+  }
+  
+  .formulario__recuadro {
+      display: flex;
+      flex-grow: 1;
+      padding: 20px 10px 20px 10px ;
+  }
+  
+  .formulario__recuadro {
+      margin: 30px 15px 30px 0px;
+      width: 60%;
+  }
+  
+  .formulario__enviar {
+      margin: 20px 15px 0px 0px;
+      width: 10%;
+      padding: 20px 20px 20px 20px;
+      font-size: 1em;
+      color: white;
+      background-color: #0E2433;
+  }
+  
+  /*Footer*/
+  
+  footer {
+      text-align: center;
+      font-size: 1.35em;
+      padding: 30px 0px 30px 0px;
+      background-color: #21394B;
+      color: white;
+  }