+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 000000000..f6c4c2e40
--- /dev/null
+++ b/main.js
@@ -0,0 +1,146 @@
+/*Fusión navbar-menú desktop*/
+const menuDesktopEmail = document.querySelector('.navbar-email'); //el navbar-email que estamos seleccionando es el del right
+const desktopMenu = document.querySelector('.desktop-menu');
+
+
+menuDesktopEmail.addEventListener('click', toggleDesktopMenu);//toggle significa intercambiar(mostrar y retirar)
+
+function toggleDesktopMenu(){
+ const iscontenidoCarrtitoNavbarClosed = contenidoCarrtitoNavbar.classList.contains('inactive'); /*estamos preguntando si el carrito está cerrado*/
+
+ if(!iscontenidoCarrtitoNavbarClosed){
+ contenidoCarrtitoNavbar.classList.add('inactive');//decimos que si el carrito está abierto debe cerrarlo y con la siguiente linea de código abrir el desktop menu
+ }
+
+ console.log('click');
+ desktopMenu.classList.toggle('inactive'); //funcion que activa la clase inactive dependiendo de si la tiene activa o no
+}
+
+/*Fusión navbar-menú mobile*/
+const mobileMenuImagen = document.querySelector('.menu');//para seleccionar el icono de menú
+const mobileMenu = document.querySelector('.mobile-menu');//para selecconar el código del menú mobile que está en el html
+
+mobileMenuImagen.addEventListener('click', toggleMobileMenu);
+
+function toggleMobileMenu(){
+ const iscontenidoCarrtitoNavbarClosed = contenidoCarrtitoNavbar.classList.contains('inactive') /*estamos preguntando si el carrito está cerrado*/
+
+ if(!iscontenidoCarrtitoNavbarClosed){
+ contenidoCarrtitoNavbar.classList.add('inactive');//decimos que si el carrito está abierto debe cerrarlo y con la siguiente linea de código abrir el mobile menu
+ }
+
+ console.log('click');
+ mobileMenu.classList.toggle('inactive');//funcion que activa la clase inactive dependiendo de si la tiene activa o no
+}
+
+/*carrito de compra en navbar*/
+const carritoNavbar = document.querySelector('.navbar-shopping-cart');
+const contenidoCarrtitoNavbar = document.querySelector('.product-detail');
+
+carritoNavbar.addEventListener('click', toggleShoppingCart);
+
+function toggleShoppingCart(){
+ const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); /*estamos preguntando si el mobile menu está cerrado*/
+ const isDesktopMenuClosed = desktopMenu.classList.contains('inactive'); /*estamos preguntando si el desktop menu está cerrado*/
+
+ if(!isMobileMenuClosed){
+ mobileMenu.classList.add('inactive');//decimos que si el mobile menu está abierto debe cerrarlo y con la siguiente linea de código abrir al carrito
+ }
+
+ if(!isDesktopMenuClosed){
+ desktopMenu.classList.add('inactive');//decimos que si el desktop menu está abierto debe cerrarlo y con la siguiente linea de código abrir al carrito
+ }
+
+ console.log('click');
+ contenidoCarrtitoNavbar.classList.toggle('inactive');
+
+}
+
+//lista de productos
+const cardsContainer = document.querySelector('.cards-container');
+
+const productList = [];
+productList.push({
+ 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({
+ name: 'Televisor',
+ price: 220,
+ image: 'https://images.pexels.com/photos/1444416/pexels-photo-1444416.jpeg?cs=srgb&dl=pexels-lisa-1444416.jpg&fm=jpg'
+});
+
+productList.push({
+ name: 'Laptop',
+ price: 400,
+ image: 'https://images.pexels.com/photos/18105/pexels-photo.jpg?cs=srgb&dl=pexels-karsten-madsen-18105.jpg&fm=jpg'
+});
+
+productList.push({
+ name: 'Celular',
+ price: 250,
+ image: 'https://images.pexels.com/photos/1294886/pexels-photo-1294886.jpeg?cs=srgb&dl=pexels-mateusz-dach-1294886.jpg&fm=jpghttps://images.pexels.com/photos/1294886/pexels-photo-1294886.jpeg?cs=srgb&dl=pexels-mateusz-dach-1294886.jpg&fm=jpg'
+});
+
+productList.push({
+ name: 'Guitarra',
+ price: 120,
+ image: 'https://images.pexels.com/photos/165971/pexels-photo-165971.jpeg?cs=srgb&dl=pexels-m%C3%A9line-waxx-165971.jpg&fm=jpg'
+});
+
+//
+//
+//
+//
+//
$120,00
+//
Bike
+//
+//
+//
+//
+//
+//
+
+function renderProducts(array){
+for(product of array){
+ const productCard = document.createElement('div');//crea un elemento de tipo div en el html
+ productCard.classList.add('product-card');//le asigna al nuevo elemento div creado la clase "product-cart"
+
+
+ const productImg = document.createElement('img');//crea un elemento de tipo imagen en el html
+ productImg.setAttribute('src', product.image);//asigna al src el valor de url que esté en el producto del array en este caso de nombre image:https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940
+
+ const productInfo = document.createElement('div');//crea un elemento de tipo div en el html
+ productInfo.classList.add('product-info');//le asigna al nuevo elemento div creado la clase "product-info"
+
+
+ const productInfoDiv = document.createElement('div');
+
+ const productPrice = document.createElement('p');
+ productPrice.innerText = '$' + product.price;
+ const productName = document.createElement('p');
+ productName.innerText = product.name;
+
+ productInfoDiv.appendChild(productPrice);
+ productInfoDiv.appendChild(productName);
+
+ const productInfoFigure = document.createElement('figure');
+
+ const cartIcon = document.createElement('img');
+ cartIcon.setAttribute('src', './icons/bt_add_to_cart.svg');
+
+ productInfoFigure.appendChild(cartIcon);//agregamos el icono del carrito a la etiqueta
+
+ productInfo.appendChild(productInfoDiv);
+ productInfo.appendChild(productInfoFigure);
+
+ productCard.appendChild(productImg);
+ productCard.appendChild(productInfo);
+
+ cardsContainer.appendChild(productCard);
+}
+}
+
+renderProducts(productList);
diff --git a/styles.css b/styles.css
new file mode 100644
index 000000000..8b95a8d87
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,320 @@
+/*Estilos generales*/
+:root {
+ --white: #FFFFFF;
+ --black: #000000;
+ --very-light-pink: #C7C7C7;
+ --text-input-field: #F7F7F7;
+ --hospital-green: #ACD9B2;
+ --sm: 14px;
+ --md: 16px;
+ --lg: 18px;
+ }
+ body {
+ margin: 0;
+ font-family: 'Quicksand', sans-serif;
+ }
+/*para los menú desplegables*/
+ .inactive{
+ display: none; /*es una clase extra que se pondrá al mennu desktop para que al dar click en el correo aparezca o desaparezca*/
+ }
+/*Navbar*/
+ nav {
+ display: flex;
+ justify-content: space-between;
+ padding: 0 24px;
+ border-bottom: 1px solid var(--very-light-pink);
+ }
+ .menu {
+ display: none;
+ cursor: pointer;
+ }
+ .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);
+ margin-right: 12px;
+ cursor: pointer;
+ }
+ .navbar-shopping-cart {
+ position: relative;
+ }
+ .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;
+ }
+ .navbar-right img{
+ cursor: pointer;
+ }
+
+
+ /* //agregamos acontinuacion los estilos del menu para desktop */
+ .desktop-menu {
+ position: absolute; /*para permitir que el menu no quede dentro del navbar */
+ background: var(--white); /*para que el fondo no sea el del navbar*/
+ top: 60px; /*ya que el navbar mide 60 px entonces el menú se posicionará debajo de él*/
+ right: 60px;/* para que quede justo debajo del correo*/
+ 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;
+ }
+
+ /*Css menú mobile*/
+
+
+.mobile-menu {
+ position: absolute; /*para permitir que el menu no quede dentro del navbar */
+ background: var(--white); /*para que el fondo no sea el del navbar*/
+ top: 61px; /*ya que el navbar mide 60 px entonces el menú se posicionará debajo de él*/
+ left: 0; /*para quedé justo al lado izquierdo*/
+ padding: 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;
+}
+
+/*carrito de compras en navbar*/
+.product-detail {
+ width: 360px;
+ padding: 24px;
+ box-sizing: border-box;
+ position: absolute;
+ right: 0;
+ background-color: var(--white);
+ }
+ .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;
+ }
+
+ /*Lista de productos*/
+ .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-info {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 12px;
+ }
+ .product-info figure {
+ margin: 0;
+ cursor: pointer;
+ }
+ .product-info figure img {
+ width: 35px;
+ height: 35px;
+ }
+ .product-info div p:nth-child(1) {
+ font-weight: bold;
+ font-size: var(--md);
+ margin-top: 0;
+ margin-bottom: 4px;
+ }
+ .product-info div p:nth-child(2) {
+ font-size: var(--sm);
+ margin-top: 0;
+ margin-bottom: 0;
+ color: var(--very-light-pink);
+ }
+
+
+/*Media query*/
+ @media (max-width: 640px) {
+ .menu {
+ display: block;
+ }
+ .navbar-left ul {
+ display: none;
+ }
+ .navbar-email {
+ display: none;
+ }
+ .desktop-menu{
+ display: none;/*Para que el menú desktop desaparezca apenas la pantalla se hace menor de 640px*/
+ }
+ .product-detail {
+ width: 100%;/*para que el carrito ocupe toda la pantalla cuando pase de desktop a mobile*/
+ }
+ .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;/*para que el menu mobile desaparezca si la pantalla se hace mayor a 640px*/
+ }
+ }
\ No newline at end of file
From a664ae764da52be2eff4083ce38988fbb1dede06 Mon Sep 17 00:00:00 2001
From: jacke25 <102391481+jacke25@users.noreply.github.com>
Date: Mon, 1 Aug 2022 11:29:22 -0500
Subject: [PATCH 2/6] Add files via upload
Fusion of navabr, desk and mobile menu, shoppingcart, products and product detail(partial).
---
fusion.html | 18 ++++++++++-
main.js | 10 +++---
styles.css | 88 ++++++++++++++++++++++++++++++++++++++++++++++++-----
3 files changed, 102 insertions(+), 14 deletions(-)
diff --git a/fusion.html b/fusion.html
index 915228f68..9c0e765c5 100644
--- a/fusion.html
+++ b/fusion.html
@@ -115,7 +115,7 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 000000000..9ab2b5e8a
--- /dev/null
+++ b/main.js
@@ -0,0 +1,197 @@
+/*Fusión navbar-menú desktop*/
+const menuDesktopEmail = document.querySelector('.navbar-email'); //el navbar-email que estamos seleccionando es el del right
+const desktopMenu = document.querySelector('.desktop-menu');
+
+
+menuDesktopEmail.addEventListener('click', toggleDesktopMenu);//toggle significa intercambiar(mostrar y retirar)
+
+function toggleDesktopMenu(){
+ const iscontenidoCarrtitoNavbarClosed = contenidoCarrtitoNavbar.classList.contains('inactive'); /*estamos preguntando si el carrito está cerrado*/
+
+ if(!iscontenidoCarrtitoNavbarClosed){
+ contenidoCarrtitoNavbar.classList.add('inactive');//decimos que si el carrito está abierto debe cerrarlo y con la siguiente linea de código abrir el desktop menu
+ }
+
+ const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
+
+ if(!isProductDetailClosed){
+ productDetailContainer.classList.add('inactive');
+ }
+
+ console.log('click');
+ desktopMenu.classList.toggle('inactive'); //funcion que activa la clase inactive dependiendo de si la tiene activa o no
+}
+
+/*Fusión navbar-menú mobile*/
+const mobileMenuImagen = document.querySelector('.menu');//para seleccionar el icono de menú
+const mobileMenu = document.querySelector('.mobile-menu');//para selecconar el código del menú mobile que está en el html
+
+mobileMenuImagen.addEventListener('click', toggleMobileMenu);
+
+function toggleMobileMenu(){
+ const iscontenidoCarrtitoNavbarClosed = contenidoCarrtitoNavbar.classList.contains('inactive'); /*estamos preguntando si el carrito está cerrado*/
+
+ if(!iscontenidoCarrtitoNavbarClosed){
+ contenidoCarrtitoNavbar.classList.add('inactive');//decimos que si el carrito está abierto debe cerrarlo y con la siguiente linea de código abrir el mobile menu
+ }
+
+ const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
+
+ if(!isProductDetailClosed){
+ productDetailContainer.classList.add('inactive');
+ }
+
+ console.log('click');
+ mobileMenu.classList.toggle('inactive');//funcion que activa la clase inactive dependiendo de si la tiene activa o no
+}
+
+/*carrito de compra en navbar*/
+const carritoNavbar = document.querySelector('.navbar-shopping-cart');
+const contenidoCarrtitoNavbar = document.querySelector('#shoppingCartContainer');
+
+carritoNavbar.addEventListener('click', toggleShoppingCart);
+
+const arrowCloseCarritoNavbar = document.querySelector('.title-container img');
+arrowCloseCarritoNavbar.addEventListener('click', closeCarritoNavbarArrow);
+
+function closeCarritoNavbarArrow(){
+ shoppingCartContainer.classList.add('inactive');
+}
+
+function toggleShoppingCart(){
+ const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); /*estamos preguntando si el mobile menu está cerrado*/
+ const isDesktopMenuClosed = desktopMenu.classList.contains('inactive'); /*estamos preguntando si el desktop menu está cerrado*/
+
+ if(!isMobileMenuClosed){
+ mobileMenu.classList.add('inactive');//decimos que si el mobile menu está abierto debe cerrarlo y con la siguiente linea de código abrir al carrito
+ }
+
+ if(!isDesktopMenuClosed){
+ desktopMenu.classList.add('inactive');//decimos que si el desktop menu está abierto debe cerrarlo y con la siguiente linea de código abrir al carrito
+ }
+
+ const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
+
+ if(!isProductDetailClosed){
+ productDetailContainer.classList.add('inactive');
+ }
+
+ console.log('click');
+ contenidoCarrtitoNavbar.classList.toggle('inactive');
+
+}
+
+//lista de productos
+const cardsContainer = document.querySelector('.cards-container');
+
+const productList = [];
+productList.push({
+ 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({
+ name: 'Televisor',
+ price: 220,
+ image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'//https://images.pexels.com/photos/1444416/pexels-photo-1444416.jpeg?cs=srgb&dl=pexels-lisa-1444416.jpg&fm=jpg
+});
+
+productList.push({
+ name: 'Laptop',
+ price: 400,
+ image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'//https://images.pexels.com/photos/18105/pexels-photo.jpg?cs=srgb&dl=pexels-karsten-madsen-18105.jpg&fm=jpg
+});
+
+productList.push({
+ name: 'Celular',
+ price: 250,
+ image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'//https://images.pexels.com/photos/1294886/pexels-photo-1294886.jpeg?cs=srgb&dl=pexels-mateusz-dach-1294886.jpg&fm=jpg
+});
+
+productList.push({
+ name: 'Guitarra',
+ price: 120,
+ image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'//https://images.pexels.com/photos/165971/pexels-photo-165971.jpeg?cs=srgb&dl=pexels-m%C3%A9line-waxx-165971.jpg&fm=jpg
+});
+
+//
+//
+//
+//
+//
$120,00
+//
Bike
+//
+//
+//
+//
+//
+//
+
+function renderProducts(array){
+for(product of array){
+ const productCard = document.createElement('div');//crea un elemento de tipo div en el html
+ productCard.classList.add('product-card');//le asigna al nuevo elemento div creado la clase "product-cart"
+
+
+ const productImg = document.createElement('img');//crea un elemento de tipo imagen en el html
+ productImg.setAttribute('src', product.image);//asigna al src el valor de url que esté en el producto del array en este caso de nombre image:https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940
+ productImg.addEventListener('click', openProductDetailAside);//dispara el detalle del producto cuando se le da click a la imagen en la pantalla de productos
+
+ const productInfo = document.createElement('div');//crea un elemento de tipo div en el html
+ productInfo.classList.add('product-info');//le asigna al nuevo elemento div creado la clase "product-info"
+
+
+ const productInfoDiv = document.createElement('div');
+
+ const productPrice = document.createElement('p');
+ productPrice.innerText = '$' + product.price;
+ const productName = document.createElement('p');
+ productName.innerText = product.name;
+
+ productInfoDiv.appendChild(productPrice);
+ productInfoDiv.appendChild(productName);
+
+ const productInfoFigure = document.createElement('figure');
+
+ const cartIcon = document.createElement('img');
+ cartIcon.setAttribute('src', './icons/bt_add_to_cart.svg');
+
+ productInfoFigure.appendChild(cartIcon);//agregamos el icono del carrito a la etiqueta
+
+ productInfo.appendChild(productInfoDiv);
+ productInfo.appendChild(productInfoFigure);
+
+ productCard.appendChild(productImg);
+ productCard.appendChild(productInfo);
+
+ cardsContainer.appendChild(productCard);
+}
+}
+
+renderProducts(productList);
+
+//Detalle de producto
+const productDetailContainer = document.querySelector('#productDetail');
+const productDetailcloseButton = document.querySelector('.product-detail-close');
+productDetailcloseButton.addEventListener('click', closeProductDetail);
+
+function openProductDetailAside(){
+ const iscontenidoCarrtitoNavbarClosed = contenidoCarrtitoNavbar.classList.contains('inactive');
+
+ if(!iscontenidoCarrtitoNavbarClosed){
+ contenidoCarrtitoNavbar.classList.add('inactive');//decimos que si el carrito está abierto debe cerrarlo y con la siguiente linea de código abrir el mobile menu
+ }
+
+ const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');
+
+ if(!isDesktopMenuClosed){
+ desktopMenu.classList.add('inactive');//decimos que si el desktop menu está abierto debe cerrarlo y con la siguiente linea de código abrir al carrito
+ }
+
+ productDetailContainer.classList.remove('inactive');
+}
+
+function closeProductDetail(){
+ productDetailContainer.classList.add('inactive');
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 000000000..ca4307c1f
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,393 @@
+/*Estilos generales*/
+:root {
+ --white: #FFFFFF;
+ --black: #000000;
+ --very-light-pink: #C7C7C7;
+ --text-input-field: #F7F7F7;
+ --hospital-green: #ACD9B2;
+ --sm: 14px;
+ --md: 16px;
+ --lg: 18px;
+ }
+ body {
+ margin: 0;
+ font-family: 'Quicksand', sans-serif;
+ }
+/*para los menú desplegables*/
+ .inactive{
+ display: none; /*es una clase extra que se pondrá al mennu desktop para que al dar click en el correo aparezca o desaparezca*/
+ }
+/*Navbar*/
+ nav {
+ display: flex;
+ justify-content: space-between;
+ padding: 0 24px;
+ border-bottom: 1px solid var(--very-light-pink);
+ }
+ .menu {
+ display: none;
+ cursor: pointer;
+ }
+ .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);
+ margin-right: 12px;
+ cursor: pointer;
+ }
+ .navbar-shopping-cart {
+ position: relative;
+ }
+ .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;
+ }
+ .navbar-right img{
+ cursor: pointer;
+ }
+
+
+ /* //agregamos acontinuacion los estilos del menu para desktop */
+ .desktop-menu {
+ position: absolute; /*para permitir que el menu no quede dentro del navbar */
+ background: var(--white); /*para que el fondo no sea el del navbar*/
+ top: 60px; /*ya que el navbar mide 60 px entonces el menú se posicionará debajo de él*/
+ right: 60px;/* para que quede justo debajo del correo*/
+ 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;
+ }
+
+ /*Css menú mobile*/
+
+
+.mobile-menu {
+ position: absolute; /*para permitir que el menu no quede dentro del navbar */
+ background: var(--white); /*para que el fondo no sea el del navbar*/
+ top: 61px; /*ya que el navbar mide 60 px entonces el menú se posicionará debajo de él*/
+ left: 0; /*para quedé justo al lado izquierdo*/
+ padding: 24px;
+ width: 100%;
+}
+.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;
+}
+
+/*carrito de compras en navbar*/
+aside {
+ width: 360px;
+ box-sizing: border-box;
+ position: absolute;
+ right: 0;
+ background-color: var(--white);
+ }
+ #shoppingCartContainer{
+ padding: 24px;
+ }
+ .title-container {
+ display: flex;
+ }
+ .title-container img {
+ transform: rotate(180deg);
+ margin-right: 14px;
+ cursor: pointer;
+ }
+ .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;
+ }
+
+ /*Lista de productos*/
+ .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;
+ cursor: pointer;
+ }
+ .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);
+ }
+
+ /*Detalle de producto*/
+ #productDetail {
+ width: 360px;
+ padding-bottom: 24px;
+ position: absolute;
+ right: 0;
+ }
+ .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;
+ }
+ #productDetail > img:nth-child(2) {
+ width: 100%;
+ height: 360px;
+ object-fit: cover;
+ border-radius: 0 0 20px 20px;
+ }
+ #productDetail .product-info {
+ margin: 24px 24px 0 24px;
+ }
+ #productDetail .product-info p:nth-child(1) {
+ font-weight: bold;
+ font-size: var(--md);
+ margin-top: 0;
+ margin-bottom: 4px;
+ }
+ #productDetail .product-info p:nth-child(2) {
+ color: var(--very-light-pink);
+ font-size: var(--md);
+ margin-top: 0;
+ margin-bottom: 36px;
+ }
+ #productDetail .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;
+ }
+ @media (max-width: 640px) {
+ #productDetail {
+ width: 100%;
+ }
+ }
+
+/*Media query*/
+ @media (max-width: 640px) {
+ .menu {
+ display: block;
+ }
+ .navbar-left ul {
+ display: none;
+ }
+ .navbar-email {
+ display: none;
+ }
+ .desktop-menu{
+ display: none;/*Para que el menú desktop desaparezca apenas la pantalla se hace menor de 640px*/
+ }
+ .product-detail {
+ width: 100%;/*para que el carrito ocupe toda la pantalla cuando pase de desktop a mobile*/
+ }
+ .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;/*para que el menu mobile desaparezca si la pantalla se hace mayor a 640px*/
+ }
+ }
\ No newline at end of file
+// 
+//