diff --git a/MainFusion.js b/MainFusion.js
new file mode 100644
index 000000000..6c026d3a2
--- /dev/null
+++ b/MainFusion.js
@@ -0,0 +1,193 @@
+const menuEmail = document.querySelector('.navbar-email');
+const desktopMenu= document.querySelector('.desktop-menu');
+const menuHamburger= document.querySelector('.menu');
+const mobilmenu= document.querySelector('.mobile-menu');
+const product_detail_close= document.querySelector('.product-detail-close');
+const carrito_compras= document.querySelector('.navbar-shopping-cart');//esta es la clase general pero llama a la clase "aside"
+const shoppinCartContainer= document.querySelector('#shoppinCartContainer');
+const CardsContainer= document.querySelector('.cards-container');
+const product_detailContainer= document.querySelector('#product-detail');
+
+
+
+
+
+
+menuEmail.addEventListener('click', toggleDesktopMenu);
+menuHamburger.addEventListener('click', togglemobilmenu);//inicialmente se escucha cuando le den click al elemento en cuestión
+carrito_compras.addEventListener('click', toggle_carrito_compras);
+
+
+// document.addEventListener("click", (e)=>{
+// if(e.target.matches(".mobile-menu"))
+// alert("click fuera del elemento");
+
+// });
+
+
+function toggleDesktopMenu() {
+ const isasideclosed= shoppinCartContainer.classList.contains('inactive');
+
+ if (!isasideclosed) {
+ shoppinCartContainer.classList.add('inactive');
+
+ }
+ desktopMenu.classList.toggle('inactive')
+ console.log('menuHamburger');
+}
+
+function togglemobilmenu() {
+ product_detailContainer.classList.add('inactive');
+ const isasideclosed= shoppinCartContainer.classList.contains('inactive');
+ if (!isasideclosed) {
+ shoppinCartContainer.classList.add('inactive');
+
+ }
+
+ mobilmenu.classList.toggle('inactive')//se hace el llamado a la clase inactive la cual mediante la funsión toggle se le añade
+ }
+
+function toggle_carrito_compras() {//el carrito de compras es manejado por la variable aside para recordar eso
+ const ismobileMenuclosed = mobilmenu.classList.contains('inactive');
+ const isdesktopMenuclosed = desktopMenu.classList.contains('inactive');
+
+ if (!isdesktopMenuclosed) {
+ desktopMenu.classList.add('inactive');
+
+ }
+
+ if (!ismobileMenuclosed) {
+ mobilmenu.classList.add('inactive');
+
+ }
+ /////////cierra el product datail si esta abierto
+ const isproduct_detailContainerClosed = product_detailContainer.classList.contains('inactive');
+ if (!isproduct_detailContainerClosed) {
+ product_detailContainer.classList.add('inactive');
+
+ }
+
+ if (!ismobileMenuclosed) {
+ mobilmenu.classList.add('inactive');
+
+ }
+ shoppinCartContainer.classList.toggle('inactive');
+
+ }
+
+
+
+ function openProductDeatailAside() {
+ shoppinCartContainer.classList.add('inactive');//para este caso de estas 2 funciones se puede hacer el cierre de esta forma por que no es un toggle
+
+ product_detailContainer.classList.remove('inactive');//utilizamos remove para quitarle la clase inactive al elemento
+ }
+ function closeProductDeatailAside() {
+ product_detailContainer.classList.add('inactive');
+ }
+
+const productlist = [];
+productlist.push({
+ id:1,
+ name:'bike',
+ price:120,
+ image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+
+});
+productlist.push({
+ id:2,
+ name:'pantalla',
+ price:320,
+ image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+
+});
+
+productlist.push({
+ id:3,
+ name:'telefonos',
+ price:150,
+ image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+
+});
+productlist.push({
+ id:4,
+ name:'bike',
+ price:120,
+ image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+
+});
+productlist.push({
+ id:5,
+ name:'pantalla',
+ price:320,
+ image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+
+});
+
+productlist.push({
+ id:6,
+ name:'telefonos',
+ price:150,
+ image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+
+});
+
+/*
+

+
+
+
+
+
+
+
-->*/
+
+
+ function renderProducts(arr) {
+ for (product of arr){//este tipo de for mas simplificado nos arroja cada obejteo almacenado dentro de un array
+ // maquetacion de todos los elementos HTML desde javascript
+ const productCard= document.createElement('div');
+ productCard.classList.add('product-card');
+ const productimg= document.createElement('img');
+ productimg.setAttribute('src',product.image);
+ productimg.addEventListener('click',openProductDeatailAside);
+ product_detail_close.addEventListener('click',closeProductDeatailAside);
+
+ const productInf= document.createElement('div');
+ productInf.classList.add('product-info');
+ const productInfDiv= document.createElement('div');
+ const productPrice= document.createElement('p');
+ productPrice.innerText='$ '+ product.price;
+ const productName= document.createElement('p');
+ productName.innerText= product.name;
+ const productInfoFigure= document.createElement('figure');
+ const productImgCart= document.createElement('img');
+ productImgCart.setAttribute('src','./icons/bt_add_to_cart.svg');
+
+ // unificación de hijos y padres desde javascript
+ productInfoFigure.append(productImgCart);
+ productInfDiv.append(productPrice,productName);
+ productInf.append(productInfDiv);
+ productCard.append(productimg,productInf);
+ CardsContainer.appendChild(productCard);
+
+ // productCard.appendChild(productimg); //el apendchil solo permite añadir un hijo mientras que apend permite añadir todos los hijos que sean necesarios
+ // productCard.appendChild(productInf);
+ // productInf.appendChild(productInfDiv);
+ // productInf.appendChild(productInfoFigure);
+ // productInfDiv.appendChild(productPrice);
+ // productInfDiv.appendChild(productName);
+ // productInfoFigure.appendChild(productImgCart);
+ }
+
+
+
+ }renderProducts(productlist);
+
+
+
+
+
diff --git a/StyleFusion.css b/StyleFusion.css
new file mode 100644
index 000000000..4e3ec9774
--- /dev/null
+++ b/StyleFusion.css
@@ -0,0 +1,401 @@
+/* estilos generales */
+:root {
+ --white: #FFFFFF;
+ --black: #000000;
+ --very-light-pink: #C7C7C7;
+ --text-input-field: #F7F7F7;
+ --hospital-green: #ACD9B2;
+ --rojo-pasion:#852a2a;
+ --sm: 14px;
+ --md: 16px;
+ --lg: 18px;
+ }
+ body {
+ margin: 0;
+ font-family: 'Quicksand', sans-serif;
+ }
+
+ .inactive{
+
+ display: none;
+
+ }
+ /* navbar general */
+ nav {
+ display: flex;
+ justify-content: space-between;
+ padding: 0 24px;
+ border-bottom: 1px solid var(--very-light-pink);
+ }
+ .menu {
+ display: none;
+ }
+ .logo {
+ width: 100px;
+ }
+ .navbar-left ul,
+ .navbar-right ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ align-items: center;
+ height: 60px;
+ }
+ .navbar-left {
+ display: flex;
+ }
+ .navbar-left ul {
+ margin-left: 12px;
+ }
+ .navbar-left ul li a,
+ .navbar-right ul li a {
+ text-decoration: none;
+ color: var(--very-light-pink);
+ border: 1px solid var(--white);
+ padding: 8px;
+ border-radius: 8px;
+ }
+ .navbar-left ul li a:hover,
+ .navbar-right ul li a:hover {
+ border: 1px solid var(--hospital-green);
+ color: var(--hospital-green);
+ }
+ .navbar-email {
+ color: var(--very-light-pink);
+ font-size: var(--sm);
+ cursor: pointer;
+ margin-right: 12px;
+ }
+ .navbar-shopping-cart {
+ position: relative;
+ cursor: pointer;
+ }
+ .navbar-shopping-cart div {
+ width: 16px;
+ height: 16px;
+ background-color: var(--hospital-green);
+ border-radius: 50%;
+ font-size: var(--sm);
+ font-weight: bold;
+ position: absolute;
+ top: -6px;
+ right: -3px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+/* Destop menu en desktop */
+ .desktop-menu {
+ position: absolute; /*permite poner el menu ensima de la barra */
+ top : 60px;/*lo alinea a la derecha junto con la sentencia de abajo del right */
+ right: 40px;
+ background: var(--white);
+ width: 100px;
+ height: auto;
+ border: 1px solid var(--very-light-pink);
+ border-radius: 6px;
+ padding: 20px 20px 0 20px;
+ }
+ .desktop-menu ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+ .desktop-menu ul li {
+ text-align: end;
+ }
+ .desktop-menu ul li:nth-child(1),
+ .desktop-menu ul li:nth-child(2) {
+ font-weight: bold;
+ }
+ .desktop-menu ul li:last-child {
+ padding-top: 20px;
+ border-top: 1px solid var(--very-light-pink);
+ }
+ .desktop-menu ul li:last-child a {
+ color: var(--hospital-green);
+ font-size: var(--sm);
+ }
+ .desktop-menu ul li a {
+ color: var(--back);
+ text-decoration: none;
+ margin-bottom: 20px;
+ display: inline-block;
+ }
+
+/* mobile menu */
+
+.mobile-menu {
+ background-color: var(--white);
+ padding: 24px;
+ position: absolute;
+ top: 60px;
+ left: 0;
+ width: 100%;
+ /* width: calc(100%-24px);
+ padding-left: 24px; */
+}
+.mobile-menu a {
+ text-decoration: none;
+ color: var(--black);
+ font-weight: bold;
+ /* margin-bottom: 24px; */
+}
+.mobile-menu ul {
+ padding: 0;
+ margin: 24px 0 0;
+ list-style: none;
+}
+.mobile-menu ul:nth-child(1) {
+ border-bottom: 1px solid var(--very-light-pink);
+}
+.mobile-menu ul li {
+ margin-bottom: 24px;
+}
+.email {
+ font-size: var(--sm);
+ font-weight: 300 !important;
+}
+.sign-out {
+ font-size: var(--sm);
+ color: var(--hospital-green) !important;
+}
+
+
+/* Aside (product detail y carrito) */
+aside {
+ background-color: var(--white);
+ width: 360px;
+
+ box-sizing: border-box;
+ position: absolute;
+ right: 0;
+
+
+}
+
+/* shoppingcart */
+#shoppinCartContainer{
+ padding: 0 24px;
+
+}
+
+.title-container {
+ display: flex;
+}
+.title-container img {
+ transform: rotate(180deg);
+ margin-right: 14px;
+}
+.title {
+ font-size: var(--lg);
+ font-weight: bold;
+}
+.order {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 16px;
+ align-items: center;
+ background-color: var(--text-input-field);
+ margin-bottom: 24px;
+ border-radius: 8px;
+ padding: 0 24px;
+}
+.order p:nth-child(1) {
+ display: flex;
+ flex-direction: column;
+}
+.order p span:nth-child(1) {
+ font-size: var(--md);
+ font-weight: bold;
+}
+.order p:nth-child(2) {
+ text-align: end;
+ font-weight: bold;
+}
+.shopping-cart {
+ display: grid;
+ grid-template-columns: auto 1fr auto auto;
+ gap: 16px;
+ margin-bottom: 24px;
+ align-items: center;
+}
+.shopping-cart figure {
+ margin: 0;
+}
+.shopping-cart figure img {
+ width: 70px;
+ height: 70px;
+ border-radius: 20px;
+ object-fit: cover;
+}
+.shopping-cart p:nth-child(2) {
+ color: var(--very-light-pink);
+}
+.shopping-cart p:nth-child(3) {
+ font-size: var(--md);
+ font-weight: bold;
+}
+.primary-button {
+ background-color: var(--hospital-green);
+ border-radius: 8px;
+ border: none;
+ color: var(--white);
+ width: 100%;
+ cursor: pointer;
+ font-size: var(--md);
+ font-weight: bold;
+ height: 50px;
+}
+
+
+/* ProdictDetail */
+.product-detail-close {
+ background: var(--white);
+ width: 14px;
+ height: 14px;
+ position: absolute;
+ top: 24px;
+ left: 24px;
+ z-index: 2;
+ padding: 12px;
+ border-radius: 50%;
+}
+.product-detail-close:hover {
+ cursor: pointer;
+}
+#product-detail > img:nth-child(2) {
+ width: 100%;
+ height: 360px;
+ object-fit: cover;
+ border-radius: 0 0 20px 20px;
+}
+#product-detail .product-info {
+ margin: 24px 24px 0 24px;
+}
+#product-detail .product-info p:nth-child(1) {
+ font-weight: bold;
+ font-size: var(--md);
+ margin-top: 0;
+ margin-bottom: 4px;
+}
+#product-detail .product-info p:nth-child(2) {
+ color: var(--very-light-pink);
+ font-size: var(--md);
+ margin-top: 0;
+ margin-bottom: 36px;
+}
+#product-detail .product-info p:nth-child(3) {
+ color: var(--very-light-pink);
+ font-size: var(--sm);
+ margin-top: 0;
+ margin-bottom: 36px;
+}
+.primary-button {
+ background-color: var(--hospital-green);
+ border-radius: 8px;
+ border: none;
+ color: var(--white);
+ width: 100%;
+ cursor: pointer;
+ font-size: var(--md);
+ font-weight: bold;
+ height: 50px;
+}
+.add-to-cart-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+
+/* product list */
+.cards-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 240px);
+ gap: 26px;
+ place-content: center;
+ margin-top: 20px;
+}
+.product-card {
+ width: 240px;
+}
+.product-card img {
+ width: 240px;
+ height: 240px;
+ border-radius: 20px;
+ object-fit: cover;
+}
+.product-card .product-info {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 12px;
+}
+.product-card .product-info figure {
+ margin: 0;
+}
+.product-card .product-info figure img {
+ width: 35px;
+ height: 35px;
+}
+.product-card .product-info div p:nth-child(1) {
+ font-weight: bold;
+ font-size: var(--md);
+ margin-top: 0;
+ margin-bottom: 4px;
+}
+.product-card .product-info div p:nth-child(2) {
+ font-size: var(--sm);
+ margin-top: 0;
+ margin-bottom: 0;
+ color: var(--very-light-pink);
+}
+@media (max-width: 640px) {
+
+}
+
+/* mediaquery generales */
+
+
+ @media (max-width: 640px) {
+ .menu {
+ display: block;
+ }
+ .navbar-left ul {
+ display: none;
+ }
+ .navbar-email {
+ display: none;
+ }
+
+ .desktop-menu{
+
+ display: none;
+
+ }
+ aside {
+ width: 100%;
+ }
+ .cards-container {
+ grid-template-columns: repeat(auto-fill, 140px);
+ }
+ .product-card {
+ width: 140px;
+ }
+ .product-card img {
+ width: 140px;
+ height: 140px;
+ }
+ }
+ @media (min-width: 641px) {
+
+ .mobile-menu{
+
+ display: none;
+ }
+
+
+
+ }
\ No newline at end of file
diff --git a/fusion_componentes.html b/fusion_componentes.html
new file mode 100644
index 000000000..c4a1476f3
--- /dev/null
+++ b/fusion_componentes.html
@@ -0,0 +1,202 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Soficastore
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file