+
$35,00
Bike
With its practical position, this bike also fulfills a decorative function, add your hall or workspace.
-
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 000000000..6dc48914c
--- /dev/null
+++ b/main.js
@@ -0,0 +1,169 @@
+const menuEmail = document.querySelector('.navbar-email');
+const desktopMenu = document.querySelector('.desktop-menu');
+const menuPhone = document.querySelector(".menu");
+const mobileMenu = document.querySelector(".mobile-menu");
+const navbarShoppingCart = document.querySelector(".navbar-shopping-cart");
+const productDetail = document.querySelector('.product-detail');
+const cardsContainer = document.querySelector('.cards-container');
+const productDetailDeep = document.querySelector('.product-detail-deep');
+const productDetailDeepClose = document.querySelector('.product-detail-deep-close');
+/* const productCard = document.querySelector('.product-card'); */
+
+
+menuEmail.addEventListener('click', toggleDesktopMenu);
+menuPhone.addEventListener('click', togglePhone_menu);
+navbarShoppingCart.addEventListener('click', toggle_my_order_menu);
+productDetailDeepClose.addEventListener('click', closeProductDetailAside)
+
+
+
+function toggleDesktopMenu(){
+ desktopMenu.classList.toggle('inactive');
+
+ if (!productDetail.classList.contains('inactive-my-order')) {
+ productDetail.classList.add('inactive-my-order');
+ }
+
+ if (!productDetailDeep.classList.contains('inactive-product-detail-deep')) {
+ productDetailDeep.classList.add('inactive-product-detail-deep');
+ }
+
+}
+
+function togglePhone_menu(){
+ mobileMenu.classList.toggle('inactive-mobile');
+
+ if (!productDetail.classList.contains('inactive-my-order')) {
+ productDetail.classList.add('inactive-my-order');
+ }
+
+ if (!productDetailDeep.classList.contains('inactive-product-detail-deep')) {
+ productDetailDeep.classList.add('inactive-product-detail-deep');
+ }
+
+
+
+}
+
+function toggle_my_order_menu(){
+ /* console.log(productDetailDeep.classList.contains('inactive-product-detail-deep')); */
+
+ productDetail.classList.toggle('inactive-my-order');
+
+ if (!mobileMenu.classList.contains('inactive-mobile')) {
+ mobileMenu.classList.add('inactive-mobile');
+ }
+
+ if (!desktopMenu.classList.contains('inactive')) {
+ desktopMenu.classList.add('inactive');
+ }
+
+ if (!productDetailDeep.classList.contains('inactive-product-detail-deep')) {
+ productDetailDeep.classList.add('inactive-product-detail-deep');
+ }
+
+
+
+}
+
+function openProductDetailAside(){
+ productDetailDeep.classList.remove('inactive-product-detail-deep');
+ if (!desktopMenu.classList.contains('inactive')) {
+ desktopMenu.classList.add('inactive');
+ }
+
+ if (!mobileMenu.classList.contains('inactive-mobile')) {
+ mobileMenu.classList.add('inactive-mobile');
+ }
+}
+
+function closeProductDetailAside(){
+ productDetailDeep.classList.add('inactive-product-detail-deep');
+ if (!productDetail.classList.contains('inactive-my-order')) {
+ productDetail.classList.add('inactive-my-order');
+ }
+}
+
+
+
+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: 'Screen',
+ price: 220,
+ image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+ }
+);
+
+productList.push(
+ {
+ name: 'Computer',
+ price: 620,
+ image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+ }
+);
+
+for (let i = 0; i < 20; i++) {
+ productList.push(
+ {
+ name: 'Computer',
+ price: 620,
+ image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+ }
+ );
+}
+
+renderProducts(productList);
+
+function renderProducts(arr){
+
+ for (product of arr){
+ const productCard = document.createElement('div');
+ productCard.classList.add('product-card');
+
+ const img = document.createElement('img');
+ img.setAttribute('src',product.image);
+ img.addEventListener('click', openProductDetailAside)
+
+ const productInfo = document.createElement('div');
+ productInfo.classList.add('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 productImgCart = document.createElement('img');
+ productImgCart.setAttribute('src','./icons/bt_add_to_cart.svg');
+
+ productInfoFigure.appendChild(productImgCart);
+
+ productInfo.appendChild(productInfoDiv);
+ productInfo.appendChild(productInfoFigure);
+
+ productCard.appendChild(img);
+ productCard.appendChild(productInfo);
+
+ cardsContainer.append(productCard);
+
+ }
+
+}
+
+
+renderProducts(productList);
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 000000000..575c456c0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,421 @@
+/* General */
+: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;
+ }
+
+
+ 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 */
+
+ .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 {
+ cursor: pointer;
+ color: var(--very-light-pink);
+ font-size: var(--sm);
+ margin-right: 12px;
+ }
+ .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;
+ }
+
+/* desktop menu */
+
+ .desktop-menu {
+ position: absolute;
+ top: 60px;
+ right: 60px;
+ 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;
+ }
+
+ .inactive{
+ display: none;
+
+ }
+
+/* mobile menu */
+
+ .inactive-mobile{
+ display: none;
+ }
+
+ .mobile-menu {
+ position:absolute;
+ top: 61px;
+ left: 0;
+ padding: 24px;
+ background: var(--white);
+ width: 100%;
+ border: 1px solid var(--very-light-pink);
+ border-radius: 6px;
+ top:60px
+
+ }
+ .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;
+ }
+
+ /* prodcut detail */
+
+ .inactive-my-order{
+ display: none;
+ }
+
+ .product-detail {
+ width: 360px;
+ padding: 0 24px 24px 24px;
+ box-sizing: border-box;
+ position: absolute;
+ right: 0;
+ background: var(--white);
+ border: 1px solid var(--very-light-pink);
+ border-radius: 6px;
+ top: 60px;
+ }
+
+ .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;
+ }
+
+/* Cards container */
+
+.cards-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 240px);
+ gap: 26px;
+ place-content: center;
+ margin-top: 26px;
+}
+.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;
+}
+.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);
+}
+
+/* product detail deep */
+
+.inactive-product-detail-deep{
+ display: none;
+}
+
+.product-detail-deep {
+ width: 360px;
+ padding-bottom: 24px;
+ position: absolute;
+ right: 0;
+ background: var(--white);
+ border: 1px solid var(--very-light-pink);
+ border-radius: 6px;
+ top: 60px;
+ /* height: 100%; */
+}
+.product-detail-deep-close {
+ background: var(--white);
+ position: absolute;
+ top: 38px;
+ left: 36px;
+ z-index: 2;
+ padding: 12px;
+ border-radius: 50%;
+ width: 8px;
+ height: 8px;
+ display: flex;
+ justify-content: center;
+}
+.product-detail-deep-close:hover {
+ cursor: pointer;
+}
+.product-detail-deep > img:nth-child(2) {
+ width: 100%;
+ height: 360px;
+ object-fit: cover;
+ border-radius: 0 0 20px 20px;
+}
+.product-info-deep {
+ margin: 24px 24px 0 24px;
+}
+.product-info-deep p:nth-child(1) {
+ font-weight: bold;
+ font-size: var(--md);
+ margin-top: 0;
+ margin-bottom: 4px;
+}
+.product-info-deep p:nth-child(2) {
+ color: var(--very-light-pink);
+ font-size: var(--md);
+ margin-top: 0;
+ margin-bottom: 36px;
+}
+.product-info-deep p:nth-child(3) {
+ color: var(--very-light-pink);
+ font-size: var(--sm);
+ margin-top: 0;
+ margin-bottom: 36px;
+}
+.primary-button-deep {
+ 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-deep {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+
+ @media (max-width: 640px) {
+ .menu {
+ display: block;
+ }
+ .navbar-left ul {
+ display: none;
+ }
+ .navbar-email {
+ display: none;
+ }
+
+ .desktop-menu{
+ display: none;
+ }
+
+ .product-detail {
+ width: 100%;
+ }
+
+ .cards-container {
+ grid-template-columns: repeat(auto-fill, 140px);
+ }
+ .product-card {
+ width: 140px;
+ }
+ .product-card img {
+ width: 140px;
+ height: 140px;
+ }
+ .product-detail-deep {
+ width: 100%;
+ }
+ }
+
+ @media(min-width: 641px){
+ .mobile-menu{
+ display: none;
+ }
+ }
+