diff --git a/css/queries.css b/css/queries.css
new file mode 100644
index 0000000..2c750ca
--- /dev/null
+++ b/css/queries.css
@@ -0,0 +1,265 @@
+/*Estilos para los media querie tanto para mobiles como para tables*/
+
+/*Media querie de un max de 700px*/
+
+@media (max-width: 700px) {
+
+    /*Menu list*/
+    /* Estilo para el contenedor del botón de menú y la lista */
+    .menu-container {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .menu-list {
+        display: none;
+    }
+
+    /*Formato para la sección principal*/
+    .title-div {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-left: 5px;
+
+    }
+
+    .title-information {
+        font-size: 28px;
+    }
+
+    .title-container {
+        display: flex;
+        width: auto;
+        align-self: center;
+    }
+
+    .list-socialmedia {
+        display: flex;
+        flex-flow: row;
+        justify-content: center;
+        align-self: center;
+        flex: 1;
+        margin-top: 15px;
+    }
+
+
+
+    /*Section sobre mí*/
+    .about-container {
+        width: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+
+    }
+
+
+    /*Section skills y hobbies*/
+
+    .skills-container,
+    .hobbies-container {
+        width: 80%;
+        flex-wrap: wrap;
+        flex: none;
+    }
+
+    /*Section education*/
+    .education-container {
+        width: 60%;
+        flex-wrap: wrap;
+    }
+
+    .education-box {
+        flex-wrap: wrap;
+        display: flex;
+        width: 60%;
+        flex: none
+    }
+
+
+
+    /*Experiencia*/
+
+    .experience-box {
+        display: flex;
+        flex-direction: row;
+        /* Cambia a fila en lugar de columna */
+        align-items: center;
+        /* Alinea verticalmente en el centro */
+        justify-content: space-between;
+        /* Distribuye el espacio entre los elementos */
+        margin-bottom: 10px;
+
+    }
+
+    .experience-box img {
+        width: 35%;
+        max-width: 200px;
+        height: auto;
+        margin-right: 20px
+    }
+
+    .experience-info {
+        display: flex;
+        justify-content: flex-start;
+        /* Centra verticalmente */
+        align-items: flex-start;
+        flex: 1;
+    }
+
+    .experience-info-container {
+        display: flex;
+        justify-content: flex-start;
+        /* Centra verticalmente */
+        align-items: flex-start;
+        flex: 1;
+    }
+
+    /*Contacto la imagen se oculto para que solo los textarea estuvieran en la pantalla*/
+
+    .contact-container {
+        display: flex;
+        flex-wrap: wrap-reverse;
+        justify-content: center;
+        align-self: center;
+    }
+
+    .contact-left {
+        display: flex;
+        width: auto;
+        height: auto;
+        justify-content: center;
+        align-self: center;
+    }
+
+    .contact-information-item {
+        display: flex;
+        flex-direction: column-reverse;
+        margin-bottom: 10px;
+    }
+
+    .contact-information-item img {
+        display: flex;
+        width: 20px;
+        margin-bottom: 5px;
+    }
+
+
+    .contact-information {
+        flex-direction: column;
+        text-align: left;
+
+    }
+
+}
+
+/*Diseño se media queries para pantallas con un máximo de 1240px*/
+@media (max-width: 1240px) {
+
+
+    /*Section principal*/
+
+    .title-div {
+        width: 90%;
+        display: flex;
+        flex-wrap: wrap;
+        box-sizing: content-box;
+        padding: 20px;
+        flex-direction: column;
+
+    }
+
+    .title-container {
+        display: flex;
+        width: auto;
+        justify-content: center;
+        align-items: flex-start;
+        margin: 0 auto;
+    }
+
+    /*Section sobre mí*/
+
+    .about-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+
+    }
+
+    /*Skills, Hobbies y Education */
+    .skills-container,
+    .hobbies-container,
+    .education-container {
+        width: auto;
+        flex-wrap: wrap;
+        flex: 1;
+    }
+
+    /*Experiencia*/
+
+    .experience-box {
+        display: flex;
+        justify-content: center;
+        /* Centra horizontalmente */
+        align-items: center;
+        /* Centra verticalmente */
+        flex-wrap: wrap;
+        margin: 0 auto;
+        /* Centra horizontalmente */
+        max-width: 700px;
+        /* Ajusta el ancho máximo según sea necesario */
+    }
+
+    .experience-box img {
+        width: 80%;
+        /* O ajusta según tus necesidades */
+        height: auto;
+        margin: 15px;
+    }
+
+    .experience-info {
+        display: flex;
+        flex-direction: column;
+        margin-left: 10px;
+        /* Ajusta el margen izquierdo según sea necesario */
+        text-align: center;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .experience-info-container {
+        display: flex;
+        flex-direction: column;
+        order: 2;
+        margin-left: 10px;
+        /* Ajusta el margen izquierdo según sea necesario */
+        text-align: center;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    /*Contacto la imagen se oculto para que solo los textarea estuvieran en la pantalla*/
+    .contact-left {
+        display: block;
+    }
+
+    .contact-information {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        text-align: left;
+        justify-content: center;
+        align-items: flex-start;
+    }
+
+    .contact-form {
+        display: flex;
+
+    }
+
+}
\ No newline at end of file
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..61831c1
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,86 @@
+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;
+}
+
+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;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+img {
+	width: inherit;
+}
+
+button {
+	font-family: inherit;
+	font-size: inherit;
+	color: inherit;
+	font-weight: inherit;
+	padding: 0;
+	border: none;
+	background-color: unset;
+}
+
+input {
+	border: none;
+	color: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	font-family: inherit;
+}
+
+textarea {
+	border: none;
+	color: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	font-family: inherit;
+}
+
+select {
+	border: none;
+	color: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	font-family: inherit;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..e387ec9
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,625 @@
+/*Estos son los fondos de colores que se utilizaran para el diseño del portafolio*/
+
+*,
+*::before,
+*::after {
+    /*Fondos para las secciones principal, skills, hobbies y experiencia*/
+    --beige-primario: #DAC0A3;
+    /*Fondos para las otras secciones sobre mí, formación y contacto*/
+    --beige-secundario-claro: #EADBC8;
+    /*Fondo para el footer*/
+    --footer-azul-oscuro: #102C57;
+    /*Fondo para los botones repo, demo y enviar*/
+    --button-repo-café-oscuro: #76453B;
+    --button-demo-crema: #F8FAE5;
+    --button-enviar-café-oscuro: #76453B;
+    box-sizing: border-box;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+body {
+    width: 100%;
+    height: 100vh;
+    font-size: 15px;
+    color: black;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+/* Diseño del menú */
+.menu-list {
+    display: flex;
+    position: fixed;
+    justify-content: flex-end;
+    top: 0;
+    width: 100%;
+    height: 60px;
+    margin-bottom: 40px;
+    padding: 0;
+    background: var(--beige-primario);
+    z-index: 1000;
+    padding: 20px;
+}
+
+
+.menu-list-items {
+    display: flex;
+    font-size: 22px;
+    font-weight: bold;
+    font-style: italic;
+    color: black;
+    text-decoration: double;
+    align-self: center;
+    text-align: center;
+    margin: 10px;
+    padding-right: 10px;
+}
+
+.menu-list-items:hover {
+    color: white;
+}
+
+/* Deseño de la sección principal*/
+.section-principal {
+    width: 100%;
+    height: 100%;
+    background: var(--beige-primario);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/*Diseño de los titulos y de la imagen de perfil*/
+
+.title-div {
+    width: 70%;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: center;
+    margin-top: 50px;
+    margin-bottom: 40px;
+}
+
+.imagen-profile {
+    border-radius: 50%;
+    width: 300px;
+    height: 300px;
+    object-fit: cover;
+    margin-top: 50px;
+    padding: 10px;
+
+}
+
+
+/*Diseño de la sección principal la parte de los titulos*/
+
+.title-container {
+    display: flex;
+    flex-direction: column;
+    width: 60%;
+    height: auto;
+    margin-right: 20px;
+    margin-top: 40px;
+}
+
+.title-principal {
+    font-weight: bold;
+    font-size: 35px;
+    padding: 5px;
+    margin-bottom: 15px;
+    margin-top: 20px;
+    line-height: 1.3;
+    text-align: center;
+}
+
+.title-information {
+    font-size: 24px;
+    margin-bottom: 5px;
+    line-height: 1.5;
+    text-align: center;
+}
+
+/*Formato a la lista de las redes sociales*/
+
+.list-socialmedia {
+    display: flex;
+    flex-direction: row;
+    margin: 2px;
+    padding: 5px;
+    justify-content: center;
+}
+
+.menu-list-socialmedia {
+    display: flex;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.menu-list-socialmedia img {
+    width: 35px;
+    margin: 0 auto;
+}
+
+.list-socialmedia .menu-list-socialmedia:not(:last-child) {
+    margin-right: 20px;
+}
+
+/* Diseño de la sección Sobre mí*/
+
+/*sction: about-me*/
+.about-me {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    background: var(--beige-secundario-claro);
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+
+}
+
+.about-container {
+    width: 70%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 20px;
+}
+
+
+
+.about-paragraph {
+    display: flex;
+    font-size: 24px;
+    line-height: 1.5;
+    margin: 10px;
+}
+
+/* Diseño de la sección Skills y de Hobbies*/
+
+/*section skills*/
+.section-skills {
+    display: flex;
+    padding: 10px;
+    background: var(--beige-primario);
+    align-items: center;
+    flex-direction: column;
+}
+
+/*Estilos a los titulos de skills, hobbies,formación académica, experiencia*/
+.about-little,
+.skills-title,
+.hobbies-title,
+.education-title,
+.experience-section-title,
+.contact-title {
+    font-weight: bold;
+    text-align: center;
+    font-style: oblique;
+    font-size: 25px;
+    margin-bottom: 10px;
+    line-height: 1.5;
+}
+
+.skills-container {
+    display: flex;
+    margin-top: 10px;
+    flex-direction: row;
+    justify-content: space-around;
+
+}
+
+.skills-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    opacity: 0.8;
+    padding: 10px;
+    margin: 10px;
+    border-radius: 10px;
+    flex: 1;
+}
+
+.skills-img img {
+    width: 50px;
+    height: auto;
+    flex: none;
+    margin-top: 10px;
+    align-self: center;
+}
+
+/*Estilos a las li de skills, hobbies */
+.skills-name,
+.hobbies-name {
+    display: flex;
+    margin-left: 10px;
+    font-size: 15px;
+    margin-top: 10px;
+    margin-bottom: 15px;
+    line-height: 1.1;
+    font-weight: bold;
+}
+
+
+/*Hobbies */
+
+.section-hobbies {
+    display: flex;
+    padding: 20px;
+    background: var(--beige-primario);
+    align-items: center;
+    flex-direction: column;
+}
+
+.hobbies-container {
+    display: flex;
+    margin-top: 10px;
+    flex-direction: row;
+    justify-content: space-around;
+
+}
+
+.hobbies-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    opacity: 0.8;
+    padding: 20px;
+    margin: 10px;
+    border-radius: 10px;
+    flex: 1;
+}
+
+.hobbies-img img {
+    width: 65px;
+    height: auto;
+    flex: none;
+}
+
+
+/*Estilos para la sección de Formaciones académicas*/
+
+.section-education {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    display: flex;
+    background: var(--beige-secundario-claro);
+    align-items: center;
+    flex-direction: column;
+}
+
+.education-container {
+    display: flex;
+    margin-top: 30px;
+    flex-direction: row;
+    justify-content: space-around;
+    margin: 25px;
+}
+
+.education-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    margin: 15px;
+    border-radius: 10px;
+    background-color: white;
+    opacity: 0.8;
+    flex: 1;
+}
+
+
+.education-item-img img {
+    width: 110px;
+    height: 110px;
+    flex: none;
+    margin-top: 10px;
+}
+
+.education-item-title {
+    display: flex;
+    font-weight: bold;
+    font-size: 15px;
+    margin-left: 10px;
+    text-align: center;
+    justify-content: center;
+    line-height: 1.2;
+    margin-top: 15px;
+}
+
+.education-item-subtitle {
+    display: flex;
+    font-size: 15px;
+    margin-left: 10px;
+    margin-top: 5px;
+    text-align: center;
+    justify-content: center;
+    line-height: 1.2;
+}
+
+/*Experiencia*/
+
+.section-experience {
+    display: flex;
+    padding: 20px;
+    background: var(--beige-primario);
+    align-items: center;
+    flex-direction: column
+}
+
+.experience-box {
+    display: flex;
+    margin-top: 10px;
+    padding: 10px;
+    margin-bottom: 10px;
+    width: 100%;
+    justify-content: center;
+}
+
+.experience-box img {
+    width: 35%;
+    height: auto;
+    margin: 15px;
+}
+
+.experience-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+}
+
+
+/*Estilo para el juego número secreto*/
+
+.experience-info-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-right: 20px;
+    order: -1;
+}
+
+/*Estilos de los titulos de la section experiencia*/
+
+.experience-title {
+    font-size: 20px;
+    font-weight: bold;
+    font-style: italic;
+    line-height: 1.2;
+    text-align: left;
+}
+
+.experience-text {
+    font-size: 17px;
+    line-height: 1.2;
+    text-align: left;
+    margin-top: 5px;
+}
+
+/*Estilo para los botones*/
+
+.experience-description {
+    display: flex;
+    justify-content: flex-start;
+    text-align: center;
+
+}
+
+.experience-repo {
+    display: flex;
+    color: white;
+    font-size: 16px;
+    font-weight: bold;
+    border: none;
+    margin-top: 20px;
+    height: 50px;
+}
+
+.experience-demo {
+    display: flex;
+    color: black;
+    font-weight: bold;
+    border: none;
+    margin-top: 20px;
+    margin-left: 20px;
+}
+
+
+/*Botones repositorio y demo*/
+
+.experience-button-repo {
+    height: 60px;
+    width: 120px;
+    background-color: var(--button-repo-café-oscuro);
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.5s ease-out;
+}
+
+
+.experience-button-repo:hover {
+    transform: translateY(-5px) scale(1.0);
+}
+
+.experience-button-repo:active {
+    background-color: var(--button-repo-café-oscuro);
+}
+
+.experience-button-demo {
+    height: 60px;
+    width: 120px;
+    background-color: var(--button-demo-crema);
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.5s ease-out;
+}
+
+.experience-button-demo:hover {
+    transform: translateY(-5px) scale(1.0);
+}
+
+.experience-button-demo:active {
+    background-color: var(--button-demo-crema);
+}
+
+/*Diseño de la section contact*/
+
+.section-contact {
+    width: 100%;
+    height: auto;
+    display: flex;
+    padding: 20px;
+    background: var(--beige-secundario-claro);
+    justify-content: space-evenly;
+    align-items: center;
+    flex-direction: column;
+}
+
+.contact-container {
+    width: 80%;
+    display: flex;
+    flex-direction: row;
+    margin-top: 30px;
+}
+
+.contact-left {
+    width: 300px;
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    justify-content: center;
+    background-color: white;
+    opacity: 0.8;
+    border: none;
+    border-radius: 10px;
+}
+
+.contact-title-left {
+    font-weight: bold;
+    text-align: center;
+    font-style: oblique;
+    font-size: 20px;
+    margin-bottom: 5px;
+    margin-top: 25px;
+    line-height: 1.5;
+}
+
+.contact-information-left {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: center;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    padding: 20px;
+}
+
+.contact-information-item {
+    display: flex;
+    font-size: 20px;
+    flex-direction: column-reverse;
+    margin-bottom: 40px;
+}
+
+.contact-information-item img {
+    width: 35px;
+    margin-right: 10px;
+    margin-bottom: 15px;
+}
+
+
+.contact-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 20px;
+}
+
+.contact-subtitle {
+    display: flex;
+    font-size: 19px;
+    color: black;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    line-height: normal;
+}
+
+/*Diseño del formulario de contacto*/
+
+.contact-form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 600px;
+}
+
+.contact-input,
+.contact-textarea {
+    margin: 10px;
+    width: 100%;
+    padding: 8px;
+    border: none;
+    border-radius: 5px;
+    box-sizing: border-box;
+    font-size: 15px;
+}
+
+/*Estilos para el botón de enviar mensaje*/
+
+.contact-button {
+    height: 60px;
+    width: 120px;
+    margin: 10px;
+    color: white;
+    font-size: 15px;
+    font-weight: bold;
+    background-color: var(--button-enviar-café-oscuro);
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: transform 0.5s ease-out;
+}
+
+.contact-button:hover {
+    transform: translateY(-5px) scale(1.0);
+}
+
+.contact-button:active {
+    background-color: darkred;
+}
+
+/*Diseño del footer*/
+
+.section-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 10%;
+    background-color: var(--footer-azul-oscuro);
+}
+
+.footer-rodapie {
+    font-size: 15px;
+    font-style: italic;
+    font-weight: bold;
+    line-height: 1.1;
+    color: white;
+}
\ No newline at end of file
diff --git a/imagenes/Alura.jpg b/imagenes/Alura.jpg
new file mode 100644
index 0000000..2464ad9
Binary files /dev/null and b/imagenes/Alura.jpg differ
diff --git a/imagenes/Barberia-Alura.jpg b/imagenes/Barberia-Alura.jpg
new file mode 100644
index 0000000..f3c1acd
Binary files /dev/null and b/imagenes/Barberia-Alura.jpg differ
diff --git a/imagenes/CAMCOP2.png b/imagenes/CAMCOP2.png
new file mode 100644
index 0000000..4708ce0
Binary files /dev/null and b/imagenes/CAMCOP2.png differ
diff --git a/imagenes/Challenge.jpg b/imagenes/Challenge.jpg
new file mode 100644
index 0000000..d9fd5f4
Binary files /dev/null and b/imagenes/Challenge.jpg differ
diff --git a/imagenes/Colegio.jpeg b/imagenes/Colegio.jpeg
new file mode 100644
index 0000000..060fcb5
Binary files /dev/null and b/imagenes/Colegio.jpeg differ
diff --git a/imagenes/Elev8.png b/imagenes/Elev8.png
new file mode 100644
index 0000000..fc6f56c
Binary files /dev/null and b/imagenes/Elev8.png differ
diff --git a/imagenes/Foto.jpeg b/imagenes/Foto.jpeg
new file mode 100644
index 0000000..dd2d2e0
Binary files /dev/null and b/imagenes/Foto.jpeg differ
diff --git a/imagenes/INA.jpeg b/imagenes/INA.jpeg
new file mode 100644
index 0000000..fb16876
Binary files /dev/null and b/imagenes/INA.jpeg differ
diff --git a/imagenes/Secreto.jpg b/imagenes/Secreto.jpg
new file mode 100644
index 0000000..edaca4a
Binary files /dev/null and b/imagenes/Secreto.jpg differ
diff --git a/imagenes/UTN.jpg b/imagenes/UTN.jpg
new file mode 100644
index 0000000..2f70607
Binary files /dev/null and b/imagenes/UTN.jpg differ
diff --git a/imagenes/icons8-airpods-pro-max-100.png b/imagenes/icons8-airpods-pro-max-100.png
new file mode 100644
index 0000000..8a45873
Binary files /dev/null and b/imagenes/icons8-airpods-pro-max-100.png differ
diff --git a/imagenes/icons8-contabilidad-100.png b/imagenes/icons8-contabilidad-100.png
new file mode 100644
index 0000000..f5c86c9
Binary files /dev/null and b/imagenes/icons8-contabilidad-100.png differ
diff --git a/imagenes/icons8-css-100.png b/imagenes/icons8-css-100.png
new file mode 100644
index 0000000..d3765db
Binary files /dev/null and b/imagenes/icons8-css-100.png differ
diff --git a/imagenes/icons8-css-110.png b/imagenes/icons8-css-110.png
new file mode 100644
index 0000000..4045dda
Binary files /dev/null and b/imagenes/icons8-css-110.png differ
diff --git "a/imagenes/icons8-curr\303\255culum-94.png" "b/imagenes/icons8-curr\303\255culum-94.png"
new file mode 100644
index 0000000..8eb9024
Binary files /dev/null and "b/imagenes/icons8-curr\303\255culum-94.png" differ
diff --git a/imagenes/icons8-ejercicio-96.png b/imagenes/icons8-ejercicio-96.png
new file mode 100644
index 0000000..a14b20a
Binary files /dev/null and b/imagenes/icons8-ejercicio-96.png differ
diff --git a/imagenes/icons8-email-94.png b/imagenes/icons8-email-94.png
new file mode 100644
index 0000000..0843e10
Binary files /dev/null and b/imagenes/icons8-email-94.png differ
diff --git a/imagenes/icons8-github-94 (1).png b/imagenes/icons8-github-94 (1).png
new file mode 100644
index 0000000..748707b
Binary files /dev/null and b/imagenes/icons8-github-94 (1).png differ
diff --git a/imagenes/icons8-html5-100.png b/imagenes/icons8-html5-100.png
new file mode 100644
index 0000000..ca25a5d
Binary files /dev/null and b/imagenes/icons8-html5-100.png differ
diff --git a/imagenes/icons8-idioma-96.png b/imagenes/icons8-idioma-96.png
new file mode 100644
index 0000000..058f282
Binary files /dev/null and b/imagenes/icons8-idioma-96.png differ
diff --git a/imagenes/icons8-instagram-94.png b/imagenes/icons8-instagram-94.png
new file mode 100644
index 0000000..154081b
Binary files /dev/null and b/imagenes/icons8-instagram-94.png differ
diff --git a/imagenes/icons8-javascript-100.png b/imagenes/icons8-javascript-100.png
new file mode 100644
index 0000000..4d351dd
Binary files /dev/null and b/imagenes/icons8-javascript-100.png differ
diff --git a/imagenes/icons8-linkedin-94.png b/imagenes/icons8-linkedin-94.png
new file mode 100644
index 0000000..59611a6
Binary files /dev/null and b/imagenes/icons8-linkedin-94.png differ
diff --git "a/imagenes/icons8-malet\303\255n-48.png" "b/imagenes/icons8-malet\303\255n-48.png"
new file mode 100644
index 0000000..b01b7f2
Binary files /dev/null and "b/imagenes/icons8-malet\303\255n-48.png" differ
diff --git a/imagenes/icons8-ms-excel-100.png b/imagenes/icons8-ms-excel-100.png
new file mode 100644
index 0000000..4e26f48
Binary files /dev/null and b/imagenes/icons8-ms-excel-100.png differ
diff --git a/imagenes/icons8-ms-excel-85.png b/imagenes/icons8-ms-excel-85.png
new file mode 100644
index 0000000..692819c
Binary files /dev/null and b/imagenes/icons8-ms-excel-85.png differ
diff --git a/imagenes/icons8-ms-excel-96.png b/imagenes/icons8-ms-excel-96.png
new file mode 100644
index 0000000..caab11e
Binary files /dev/null and b/imagenes/icons8-ms-excel-96.png differ
diff --git a/imagenes/icons8-oficina-365-100.png b/imagenes/icons8-oficina-365-100.png
new file mode 100644
index 0000000..518287d
Binary files /dev/null and b/imagenes/icons8-oficina-365-100.png differ
diff --git a/imagenes/icons8-photo-camera-100.png b/imagenes/icons8-photo-camera-100.png
new file mode 100644
index 0000000..6a69fdb
Binary files /dev/null and b/imagenes/icons8-photo-camera-100.png differ
diff --git "a/imagenes/icons8-tel\303\251fono-apple-94.png" "b/imagenes/icons8-tel\303\251fono-apple-94.png"
new file mode 100644
index 0000000..c5bb694
Binary files /dev/null and "b/imagenes/icons8-tel\303\251fono-apple-94.png" differ
diff --git a/imagenes/icons8-travelling-96.png b/imagenes/icons8-travelling-96.png
new file mode 100644
index 0000000..2515aa0
Binary files /dev/null and b/imagenes/icons8-travelling-96.png differ
diff --git a/imagenes/icons8-tv-100.png b/imagenes/icons8-tv-100.png
new file mode 100644
index 0000000..6d76b02
Binary files /dev/null and b/imagenes/icons8-tv-100.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5fe6343
--- /dev/null
+++ b/index.html
@@ -0,0 +1,337 @@
+<!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="css/reset.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/queries.css">
+    <title>Portafolio</title>
+    <link rel="shortcut icon" href="imagenes/icons8-maletín-48.png">
+</head>
+
+<body>
+
+    <!-- Lista principal -->
+    <section>
+        <nav>
+            <!-- Contenedor del botón de menú y la lista -->
+            <div class="menu-container">
+                <!-- Lista de menú -->
+                <ul class="menu-list">
+                    <li class="menu-list-items"><a href="#about">Sobre mí</a></li>
+                    <li class="menu-list-items"><a href="#skills">Skills</a></li>
+                    <li class="menu-list-items"><a href="#hobbies">Hobbies</a></li>
+                    <li class="menu-list-items"><a href="#formacion">Formación</a></li>
+                    <li class="menu-list-items"><a href="#projects">Experiencia</a></li>
+                    <li class="menu-list-items"><a href="#contact">Contacto</a></li>
+                </ul>
+            </div>
+        </nav>
+    </section>
+
+
+    <!-- Información de la página -->
+    <main>
+        <!-- Información de la página -->
+        <section class="section-principal" id="principal">
+            <div class="title-div">
+                <img class="imagen-profile" src="imagenes/Foto.jpeg" alt="Foto de perfil">
+                <div class="title-container">
+                    <h2 class="title-principal">Hola, soy Karina Monge
+                    </h2>
+                    <h3 class="title-information"> Profesional en Contabilidad y Finanzas</h3>
+                    <h3 class="title-information"> Desarrollo de Software - Front-End</h3>
+
+                    <ul class="list-socialmedia">
+                        <li class="menu-list-socialmedia"><a href="https://github.com/karina105" target="_blank">
+                                <img src="imagenes/icons8-github-94 (1).png" alt="Github"></a></li>
+                        <li class="menu-list-socialmedia"><a href="https://www.linkedin.com/in/karina-monge-rojas/"
+                                target="_blank"><img src="imagenes/icons8-linkedin-94.png" alt="Linkedin"></a></li>
+                        <li class="menu-list-socialmedia"><a href="https://www.instagram.com/karii_niina/"
+                                target="_blank"><img src="imagenes/icons8-instagram-94.png" alt="Instagram"></a></li>
+                        <li class="menu-list-socialmedia"><a
+                                href="https://drive.google.com/file/d/1Hh2oaZD2zluUuZi71g0SiaW_9mx-sy6g/view?usp=sharing"
+                                target="_blank"><img src="imagenes/icons8-currículum-94.png" alt="Curriculum"></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!--Sección Sobre mí-->
+        <section class="about-me" id="about">
+            <div class="about-container">
+                <h3 class="about-little">Sobre mí</h3>
+                <p class="about-paragraph">Poseo experiencia en Contabilidad, y también tengo conocimientos en
+                    Desarrollo de Software. Continúo aprendiendo sobre esta área, y decidí especializarme en Front-End
+                    debido a mi interés en el diseño de páginas web.</p>
+
+                <p class="about-paragraph">Soy una persona que disfruta aprendiendo nuevas cosas sin importar la
+                    dificultad que eso conlleve. Además, me considero organizado, responsable y amable. Me gusta
+                    mantener buenas relaciones con los demás, tengo una mentalidad abierta y una actitud positiva. Estoy
+                    comprometido con el crecimiento profesional y personal."</p>
+            </div>
+        </section>
+
+        <!--Sección skills-->
+        <section class="section-skills" id="skills">
+            <h3 class="skills-title" id="title">Skills</h3>
+            <div class="skills-container">
+                <div class="skills-box">
+                    <ul>
+                        <li class="skills-img"> <img src="imagenes/icons8-contabilidad-100.png"
+                                alt="Contabilidad y Finanzas"></li>
+                        <li class="skills-name">Contabilidad y Finanzas</li>
+                    </ul>
+                </div>
+
+                <div class="skills-box">
+                    <ul>
+                        <li class="skills-img"> <img src="imagenes/icons8-html5-100.png" alt="HTML"></li>
+                        <li class="skills-name">HTML</li>
+                    </ul>
+                </div>
+
+                <div class="skills-box">
+                    <ul>
+                        <li class="skills-img"> <img src="imagenes/icons8-css-100.png" alt="CSS"></li>
+                        <li class="skills-name">CSS</li>
+                    </ul>
+                </div>
+
+                <div class="skills-box">
+                    <ul>
+                        <li class="skills-img"> <img src="imagenes/icons8-javascript-100.png" alt="JavaScript"></li>
+                        <li class="skills-name">JavaScript</li>
+                    </ul>
+                </div>
+
+                <div class="skills-box">
+                    <ul>
+                        <li class="skills-img"> <img src="imagenes/icons8-oficina-365-100.png" alt="Microsoft 365"></li>
+                        <li class="skills-name">Microsoft 365</li>
+                    </ul>
+                </div>
+
+                <div class="skills-box">
+                    <ul>
+                        <li class="skills-img"> <img src="imagenes/icons8-ms-excel-85.png" alt="Tablas"></li>
+                        <li class="skills-name">Tablas Dinámicas de Excel</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!--Sección hobbies-->
+        <section class="section-hobbies" id="hobbies">
+            <h3 class="hobbies-title">Hobbies</h3>
+            <div class="hobbies-container">
+                <div class="hobbies-box">
+                    <ul>
+                        <li class="hobbies-img"><img src="imagenes/icons8-airpods-pro-max-100.png" alt="Música"></li>
+                        <li class="hobbies-name">Música</li>
+                    </ul>
+                </div>
+
+                <div class="hobbies-box">
+                    <ul>
+                        <li class="hobbies-img"><img src="imagenes/icons8-photo-camera-100.png" alt="Tomar fotos"></li>
+                        <li class="hobbies-name">Tomar Fotos</li>
+                    </ul>
+                </div>
+
+                <div class="hobbies-box">
+                    <ul>
+                        <li class="hobbies-img"><img src="imagenes/icons8-tv-100.png" alt="TV"></li>
+                        <li class="hobbies-name">Ver Televisión</li>
+                    </ul>
+                </div>
+
+                <div class="hobbies-box">
+                    <ul>
+                        <li class="hobbies-img"><img src="imagenes/icons8-ejercicio-96.png" alt="Deporte"></li>
+                        <li class="hobbies-name">Deporte</li>
+                    </ul>
+                </div>
+
+                <div class="hobbies-box">
+                    <ul>
+                        <li class="hobbies-img"><img src="imagenes/icons8-idioma-96.png" alt="Idiomas"></li>
+                        <li class="hobbies-name">Aprender idiomas</li>
+                    </ul>
+                </div>
+
+                <div class="hobbies-box">
+                    <ul>
+                        <li class="hobbies-img"><img src="imagenes/icons8-travelling-96.png" alt="Viajar"></li>
+                        <li class="hobbies-name">Viajar</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!--Sección Formación académica-->
+        <section class="section-education" id="formacion">
+            <h3 class="education-title">Formación académica</h3>
+            <div class="education-container">
+                <div class="education-box">
+                    <ul class="education-courses-list">
+                        <li class="education-item-img"><img src="imagenes/Colegio.jpeg" alt="Colegio"></li>
+                        <li class="education-item-title">Colegio Técnico Profesional Regional de San Carlos</li>
+                        <li class="education-item-subtitle"> Febrero 2011 - Diciembre 2013</li>
+                    </ul>
+                </div>
+
+                <div class="education-box">
+                    <ul class="education-courses-list">
+                        <li class="education-item-img"><img src="imagenes/UTN.jpg" alt="Universidad"></li>
+                        <li class="education-item-title">Universidad Técnica Nacional</li>
+                        <li class="education-item-subtitle"> Enero 2015 - Abril 2020</li>
+                    </ul>
+                </div>
+
+                <div class="education-box">
+                    <ul class="education-courses-list">
+                        <li class="education-item-img"><img src="imagenes/INA.jpeg" alt="INA"></li>
+                        <li class="education-item-title">Instituto Nacional de Aprendizaje</li>
+                        <li class="education-item-subtitle">Abril - Noviembre - 2021</li>
+                    </ul>
+                </div>
+
+                <div class="education-box">
+                    <ul class="education-courses-list">
+                        <li class="education-item-img"><img src="imagenes/Elev8.png" alt="Elev8"></li>
+                        <li class="education-item-title">Elev8 Education</li>
+                        <li class="education-item-subtitle"> Julio - Diciembre 2023</li>
+                    </ul>
+                </div>
+
+                <div class="education-box">
+                    <ul class="education-courses-list">
+                        <li class="education-item-img"><img src="imagenes/CAMCOP2.png" alt="CAMCOP"></li>
+                        <li class=" education-item-title">Cámara de Comercio y Capacitación Internacional</li>
+                        <li class="education-item-subtitle">Diciembre - 2023</li>
+                    </ul>
+                </div>
+
+                <div class="education-box">
+                    <ul class="education-courses-list">
+                        <li class="education-item-img"> <img src="imagenes/Alura.jpg" alt="Alura"></li>
+                        <li class="education-item-title">Alura Latam</li>
+                        <li class="education-item-subtitle">Enero 2024 - En curso</li>
+
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!--Sección Experiencia profesional-->
+
+        <section class="section-experience" id="projects">
+            <h3 class="experience-section-title">Experiencia y Prácticas</h3>
+            <div class="experience-box">
+                <img src="imagenes/Barberia-Alura.jpg" alt="Barberia">
+                <div class="experience-info">
+                    <h2 class="experience-title">Prácticas del Curso</h2>
+                    <h2 class="experience-title">Barberia Alura</h2>
+                    <h3 class="experience-text">Challenge Oracle</h3>
+                    <div class="experience-description">
+                        <!--Enlaces de Github-->
+                        <span class="experience-repo"><a
+                                href="https://github.com/karina105/Alura-Latam-Website-Practice.git"
+                                target="_blank"><button class="experience-button-repo"
+                                    onclick="redirect()">Github</button></a></span>
+                        <span class="experience-demo"><a
+                                href="https://karina105.github.io/Alura-Latam-Website-Practice/" target="_blank"><button
+                                    class="experience-button-demo" onclick="redirect()">Muestra</button></a></span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="experience-box">
+                <img src="imagenes/Secreto.jpg" alt="Número Secreto">
+                <div class="experience-info-container">
+                    <h2 class="experience-title">Prácticas del Curso</h2>
+                    <h2 class="experience-title">Juego El Número Secreto </h2>
+                    <h3 class="experience-text">Challenge Oracle</h3>
+                    <div class="experience-description">
+                        <!--Enlaces de Github-->
+                        <span class="experience-repo"><a
+                                href="https://github.com/karina105/Alura-Latam-JavaScript-Practice.git"
+                                target="_blank"><button class="experience-button-repo"
+                                    onclick="redirect()">Github</button></a></span>
+                        <span class="experience-demo"><a
+                                href="https://karina105.github.io/Alura-Latam-JavaScript-Practice/"
+                                target="_blank"><button class="experience-button-demo"
+                                    onclick="redirect()">Muestra</button></a></span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="experience-box">
+                <img src="imagenes/Challenge.jpg" alt="Challenge">
+                <div class="experience-info">
+                    <h2 class="experience-title">Experiencia Profesional</h2>
+                    <h2 class="experience-title">Encriptador de Texto</h2>
+                    <h3 class="experience-text">Challenge Oracle</h3>
+                    <div class="experience-description">
+                        <!--Enlaces de Github-->
+                        <span class="experience-repo"><a href="https://github.com/karina105/Challenge-Alura.git"
+                                target="_blank"><button class="experience-button-repo"
+                                    onclick="redirect()">Github</button></a></span>
+                        <span class="experience-demo"><a href="https://karina105.github.io/Challenge-Alura/"
+                                target="_blank"><button class="experience-button-demo"
+                                    onclick="redirect()">Muestra</button></a></span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!--Sección Contacto-->
+        <section class="section-contact" id="contact">
+            <div class="contact-container">
+                <div class="contact-left">
+                    <h2 class="contact-title-left">Información de contacto</h2>
+                    <ul class="contact-information-left">
+                        <li class="contact-information-item">karinamongerojas@gmail.com <img
+                                src="imagenes/icons8-email-94.png" alt=""></li>
+                        <li class="contact-information-item">86331787<img src="imagenes/icons8-teléfono-apple-94.png"
+                                alt=""></li>
+                    </ul>
+                </div>
+
+                <div class="contact-information">
+                    <h2 class="contact-title">Contacto</h2>
+                    <h3 class="contact-subtitle">¿Quieres contactarme?</h3>
+                    <h3 class="contact-subtitle">Complete el siguiente formulario y me pondré en contacto con usted
+                        lo antes posible.</h3>
+                    <form class="contact-form" name="form" action="https://formspree.io/f/xleqanqe" method="post">
+                        <input class="contact-input" type="text" autocomplete="given-name" name="nombre"
+                            placeholder="Nombre">
+                        <input class="contact-input" type="email" autocomplete="email" name="email"
+                            placeholder="E-mail">
+                        <input class="contact-input" type="text" name="asunto" placeholder="Asunto">
+                        <textarea class="contact-textarea" name="mensaje" id="mensaje" cols="40" rows="5"
+                            placeholder="Mensaje"></textarea>
+                        <button type="submit" class="contact-button">Enviar</button>
+                    </form>
+                </div>
+
+            </div>
+        </section>
+    </main>
+
+    <!--Sección del footer-->
+    <section class="section-footer">
+        <footer class="footer-rodapie">
+            <p> Desarrollado por Karina Monge Rojas</p>
+            <p>2024</p>
+        </footer>
+    </section>
+
+    <!--<script src="script.js"></script>-->
+</body>
+
+</html>
\ No newline at end of file