diff --git a/public/css/about-us.css b/public/css/about-us.css
index 7ce2550..e1afe66 100644
--- a/public/css/about-us.css
+++ b/public/css/about-us.css
@@ -46,6 +46,8 @@
}
.mission-title, .vision-title {
text-align: center;
+ color: var(--primary-blue-principal-900, #11485A);
+
}
.mission-description,
.vision-description {
diff --git a/public/css/card-product-detail.css b/public/css/card-product-detail.css
index 09feaf2..27aa9b6 100644
--- a/public/css/card-product-detail.css
+++ b/public/css/card-product-detail.css
@@ -1,5 +1,10 @@
#tittle-detail{
- font-size: 2em;
+ font-size: var(--ubuntu--headline--32-large-400);
+ color: var(--primary-blue-principal-900, #11485A)
+}
+
+.content-description h3, #opinions-tittle, .description-review h5{
+ color: var(--primary-blue-principal-900, #11485A);
}
.container-detail {
@@ -204,9 +209,28 @@
}
.btn-add-product-cart:hover {
- transform: scale(1.1);
+ transform: scale(1.03);
+}
+
+.btn-add-product-cart .added:hover {
+ transform: scale(1.03);
+}
+
+.botton-info-card-product button:hover{
+ background-color: var( --Colors-primary-blue-700);
+ /* color: var(--Colors-primary-blue-950); */
}
+.botton-info-card-product .added:hover{
+ background-color: var(--Colors-semantic-error);
+ color: var(--Colors-neutral-white);
+}
+
+.botton-info-card-product .added:hover svg path{
+ fill: var(--Colors-neutral-white);
+}
+
+
.info-user {
display: flex;
gap: 10px;
diff --git a/public/css/card-product.css b/public/css/card-product.css
index 1e9e408..7cc51bb 100644
--- a/public/css/card-product.css
+++ b/public/css/card-product.css
@@ -26,6 +26,19 @@
transform: scale(1.05);
} */
+.info-card-product .botton-info-card-product .btn-add-product-cart:hover{
+ background-color: var(--Colors-primary-blue-200);
+}
+
+.info-card-product .botton-info-card-product .btn-add-product-cart.added:hover{
+ background-color: var(--Colors-semantic-error);
+ color: var(--Colors-neutral-white);
+}
+
+.info-card-product .botton-info-card-product .btn-add-product-cart.added:hover svg path{
+ fill: var(--Colors-neutral-white);
+}
+
.card-product img {
padding: 12px var(--Gap-gap-9, 16px);
border-radius: 16px;
@@ -46,6 +59,10 @@
color: var(--neutral-white, #fafefe);
}
+.info-card-product h3{
+ color: var(--neutral-white, #fafefe);
+}
+
.info-card-product h3 {
font-size: var(--ubuntu--label--14-large-500);
height: 30px;
diff --git a/public/css/carrusel-products.css b/public/css/carrusel-products.css
index f2e9dea..1201ed5 100644
--- a/public/css/carrusel-products.css
+++ b/public/css/carrusel-products.css
@@ -95,17 +95,26 @@
text-decoration: none;
}
-.header-botton-recommendation #btn-recommendation {
+.header-botton-recommendation .btn-add-product-cart {
display: inline-flex;
- padding: var(--Border-radius-border-4, 6px) 8px;
+ padding: 0.75rem 10px;
justify-content: center;
align-items: center;
- gap: 8px;
+ align-self: stretch;
+ appearance: none;
+ line-height: 1.5;
+ gap: 0.625rem;
border-radius: 8px;
background: var(--primary-blue-principal-900, #11485A);
border: none;
+ outline: none;
+ font-size: var(--ubuntu--body--18-xlarge-400);
}
+/* #btn-recommendation{
+
+} */
+
.container-recommendation .docks {
width: 100%;
padding: 0.4em;
diff --git a/public/css/faqs.css b/public/css/faqs.css
index f6a7027..7bd2ba9 100644
--- a/public/css/faqs.css
+++ b/public/css/faqs.css
@@ -3,6 +3,8 @@ body{
font-family: "Ubuntu";
}
+
+
.faq-tittle{
/* font-size: var(--ubuntu--tittle--23-large-400, 1.44rem);*/
font-weight: 500;
@@ -171,6 +173,8 @@ svg {
width: 50%;
}
.container-info-faq h2{
+ color:var(--primary-blue-principal-900, #11485A);
+ font-size: var(--ubuntu--headline--32-large-400);
width: 50%;
}
diff --git a/public/css/help.css b/public/css/help.css
index ac53138..77b0dfe 100644
--- a/public/css/help.css
+++ b/public/css/help.css
@@ -44,9 +44,13 @@
gap:8px;
}
+h3{
+ color: var(--primary-blue-principal-900, #11485A);
+}
+
.container-help h2{
font-size: var(--ubuntu--tittle--16-medium-700);
- color: var(--Colors-neutral-black);
+ color: var(--primary-blue-principal-900, #11485A);
}
.container-help p{
diff --git a/public/css/intro-about-us.css b/public/css/intro-about-us.css
index e1aca83..96b1d11 100644
--- a/public/css/intro-about-us.css
+++ b/public/css/intro-about-us.css
@@ -6,6 +6,11 @@
align-items: center;
}
+h2{
+ color: var(--primary-blue-principal-900, #11485A);
+ font-size: var(--ubuntu--headline--23-small-400);
+}
+
.container-intro-about p {
margin: 40px 20px;
padding: 0 20px 32px;
@@ -42,7 +47,8 @@
}
.introtext{
- max-width: 1500px;
+ max-width: 1376px;
+ margin: auto;
}
.who-we-are p{
font-weight: normal;
@@ -60,20 +66,31 @@
font-size: var(--ubuntu--headline--23-small-400);
font-weight: 700;
font-style: italic;
+ color: var(--primary-blue-principal-900, #11485A);
}
@media only screen and (min-width: 768px) {
+
.about-us-banner h2 {
font-size: var(--ubuntu--headline--29-medium-400);
}
+
+ h2{
+ font-size: var(--ubuntu--headline--29-medium-400);
+ }
}
@media only screen and (min-width: 1200px) {
+ h2{
+ font-size: var(--ubuntu--headline--32-large-400);
+ }
+
.about-us-banner h2 {
font-size: var(--ubuntu--display--36-small-400);
}
.who-we-are{
font-size: var( --ubuntu--headline--23-small-400);
}
+
}
diff --git a/public/css/products.css b/public/css/products.css
index 845cef7..9556548 100644
--- a/public/css/products.css
+++ b/public/css/products.css
@@ -23,6 +23,10 @@ source {
opacity: 1;
}
+.header-recommendation h1{
+ color: var(--primary-blue-principal-900, #11485A);
+}
+
.carrousel-container{
display: flex;
max-width: 1376px;
@@ -301,9 +305,14 @@ source {
vertical-align: baseline;
}
-.btn-add-product-cart.added {
+.btn-add-product-cart.added{
background-color: var(--Colors-primary-blue-200);
color: var(--Colors-primary-blue-950);
+ border: 1px solid var(--Colors-neutral-disable-300);
+}
+
+.btn-add-product-cart.added svg path{
+ fill: var(--Colors-primary-blue-950);
}
@media only screen and (min-width: 768px) {
diff --git a/public/css/shopping-cart.css b/public/css/shopping-cart.css
index 67d76a1..739f999 100644
--- a/public/css/shopping-cart.css
+++ b/public/css/shopping-cart.css
@@ -1,3 +1,12 @@
+h1{
+ color: var(--primary-blue-principal-900, #11485A);
+ font-size: var(--ubuntu--headline--32-large-400);
+}
+
+h3{
+ font-size: var(--ubuntu--tittle--23-large-400)
+}
+
.nav-actual-page{
display: flex;
gap: 8px;
@@ -35,6 +44,14 @@
padding: 16px 0;
}
+.empty-cart-container p{
+ font-size: var(--ubuntu--body--18-xlarge-400);
+}
+
+.empty-cart-container a{
+ align-self: center;
+}
+
.recommended-products .container-products{
justify-content: space-between;
}
diff --git a/public/css/styles.css b/public/css/styles.css
index ef991bc..a49c5e4 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -89,4 +89,9 @@ input, button, textarea, select { font: inherit}
h2 {
text-align: center;
+}
+
+::selection {
+ background: var(--Colors-primary-blue-principal-900);
+ color: var(--Colors-neutral-white);
}
\ No newline at end of file
diff --git a/public/js/products.js b/public/js/products.js
index 99b72bb..bd821a8 100644
--- a/public/js/products.js
+++ b/public/js/products.js
@@ -5,6 +5,8 @@ const videos = [
// Seleccionar todos los botones con la clase btn-add-product-cart
const addButtons = document.querySelectorAll('.btn-add-product-cart');
+const btnInfoCardHeader = document.querySelector('.botton-info-card-product button');
+const btnInfoCardProducts = document.querySelector('.info-card-product .botton-info-card-product .btn-add-product-cart');
addButtons.forEach(button => {
button.addEventListener('click', async function(event) {
@@ -30,7 +32,37 @@ addButtons.forEach(button => {
// console.log('Producto añadido al carrito:', data);
// Cambiar el estilo del botón al añadirlo al carrito
- button.classList.add('added');
+ button.classList.toggle('added');
+
+ const deleteIcon = ``
+
+ const defaultAddIcon = ``
+
+
+
+ if(btnInfoCardHeader.classList.contains('added')){
+ btnInfoCardHeader.innerHTML = `${deleteIcon} Remover del carrito`;
+ }else{
+ btnInfoCardHeader.innerHTML = `${defaultAddIcon} Añadir al carrito`;
+ }
+
+ if(btnInfoCardProducts.classList.contains('added')){
+ btnInfoCardProducts.innerHTML = `${deleteIcon}`;
+ }else{
+ btnInfoCardProducts.innerHTML = ``;
+ }
+
+
+
// Mostrar mensaje emergente (popup) de éxito
alert(`Producto añadido exitosamente: ${data.message}`); // Aquí puedes personalizar el mensaje
diff --git a/src/views/partials/card-recommendation.ejs b/src/views/partials/card-recommendation.ejs
index 6ae66a9..923c91b 100644
--- a/src/views/partials/card-recommendation.ejs
+++ b/src/views/partials/card-recommendation.ejs
@@ -11,10 +11,14 @@
$<%= formatCurrency(producto.price.toFixed(2)) %>
diff --git a/src/views/partials/navbar.ejs b/src/views/partials/navbar.ejs
index 780c910..1df99db 100644
--- a/src/views/partials/navbar.ejs
+++ b/src/views/partials/navbar.ejs
@@ -35,11 +35,9 @@
<% } %>
<% } %>