diff --git a/css/style.css b/css/style.css
new file mode 100644
index 000000000..f5f6308d5
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,435 @@
+:root {
+ --white: #FFFFFF;
+ --black: #000000;
+ --very-light-pink: #C7C7C7;
+ --text-input-field: #F7F7F7;
+ --hospital-green: #ACD9B2;
+ --sm: 14px;
+ --md: 16px;
+ --lg: 18px;
+}
+*,
+*::before,
+*::after{
+ box-sizing: inherit;
+}
+html{
+ box-sizing: border-box;
+ font-size: 62.5%; /*Now 10px is equal to 1rem*/
+}
+body {
+ margin: 0;
+ font: normal normal 1.6rem 'Quicksand', sans-serif;
+}
+
+/*
+ * GENERALES
+*/
+
+
+/*
+ * UTILITARIOS
+*/
+
+.desktop-menu {
+ width: 140px;
+ height: auto;
+ border: 1px solid var(--very-light-pink);
+ background: var(--white);
+ border-radius: 6px;
+ padding: 20px 20px 0 20px;
+ position: absolute;
+ top: 100%;
+ right: 6rem;
+ display: none;
+}
+.desktop-menu.active{
+ display: block;
+}
+.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;
+}
+
+/*
+ * NAV
+*/
+nav {
+ position: relative;
+ 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);
+ margin-right: 12px;
+ cursor: pointer;
+ transition: color .25s ease-in-out;
+}
+.navbar-email:hover{
+ color: var(--hospital-green);
+}
+.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;
+}
+@media (max-width: 640px) {
+ .menu {
+ display: block;
+ }
+ .navbar-left ul {
+ display: none;
+ }
+ .navbar-email {
+ display: none;
+ }
+}
+/*
+ * MOBILE MENU
+*/
+.mobile-menu {
+ display: none;
+ width: 100%;
+ padding: 24px;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ background: var(--white);
+}
+.mobile-menu.active{
+ display: block;
+}
+.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;
+}
+@media only screen and (min-width: 640px) {
+ .mobile-menu,
+ .mobile-menu.active{
+ display: none;
+ }
+}
+
+/*
+ *LISTA DE PRODUCTOS (CARRITO DE COMPRAS)
+*/
+.product-detail {
+ width: 360px;
+ padding: 24px;
+ padding-top: 1rem;
+ box-sizing: border-box;
+ position: absolute;
+ right: 0;
+ display: none;
+ background: var(--white);
+ }
+.product-detail.active{
+ display: block;
+}
+.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;
+}
+@media (max-width: 640px) {
+ .product-detail {
+ width: 100%;
+ }
+}
+
+/*
+ * SECCION PRINCIPAL
+*/
+
+.cards-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 240px);
+ gap: 26px;
+ place-content: center;
+ margin-top: 2rem;
+}
+.product-card {
+ width: 240px;
+}
+.product-card img {
+ width: 240px;
+ height: 240px;
+ border-radius: 20px;
+ object-fit: cover;
+ cursor: pointer;
+}
+.product-info {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 12px;
+}
+.product-info figure {
+ margin: 0;
+}
+.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 (max-width: 640px) {
+ .cards-container {
+ grid-template-columns: repeat(auto-fill, 140px);
+ }
+ .product-card {
+ width: 140px;
+ }
+ .product-card img {
+ width: 140px;
+ height: 140px;
+ }
+}
+
+
+/*
+ * NUEVO DETALLE DE PRODUCTO
+*/
+
+.product-detail-store {
+ display: none;
+ width: 360px;
+ padding-bottom: 24px;
+ position: absolute;
+ right: 0;
+ background: var(--white);
+}
+.product-detail-store.active{
+ display: block
+}
+.product-detail-close {
+ --circle: 3rem;
+ background: #fff;
+ width: var(--circle);
+ height: var(--circle);
+ position: absolute;
+ top: 24px;
+ left: 24px;
+ z-index: 2;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.product-detail-close:hover {
+ cursor: pointer;
+}
+.product-detail-store > img:nth-child(2) {
+ width: 100%;
+ height: 360px;
+ object-fit: cover;
+ border-radius: 0 0 20px 20px;
+}
+.product-detail-store .product-info {
+ display: inline-block;
+ margin: 24px 24px 0 24px;
+}
+.product-detail-store .product-info p:nth-child(1) {
+ font-weight: bold;
+ font-size: var(--md);
+ margin-top: 0;
+ margin-bottom: 4px;
+}
+.product-detail-store .product-info p:nth-child(2) {
+ color: var(--very-light-pink);
+ font-size: var(--md);
+ margin-top: 0;
+ margin-bottom: 36px;
+}
+.product-detail-store .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) {
+ .product-detail-store {
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8e91d429a..776877260 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,17 @@
-
+
-
-
-
-
- YardSale: tienda online de cositas chidas
+
+ Shopify - Yard Sale
+