From 8e3806ae07b3e09dc930fde029cbc2ace88fa556 Mon Sep 17 00:00:00 2001 From: FROSTYLAN Date: Sun, 4 Sep 2022 17:12:24 -0500 Subject: [PATCH] Fusion de menu en desktop --- .../store/index.html" | 88 ++++++++---- "04-JavascriptPr\303\241ctico/store/main.js" | 8 ++ .../store/styles.css" | 130 ++++++++++++++++++ 3 files changed, 202 insertions(+), 24 deletions(-) create mode 100644 "04-JavascriptPr\303\241ctico/store/main.js" create mode 100644 "04-JavascriptPr\303\241ctico/store/styles.css" diff --git "a/04-JavascriptPr\303\241ctico/store/index.html" "b/04-JavascriptPr\303\241ctico/store/index.html" index c1ed1d7..9760fb1 100644 --- "a/04-JavascriptPr\303\241ctico/store/index.html" +++ "b/04-JavascriptPr\303\241ctico/store/index.html" @@ -1,31 +1,71 @@ + + + + + + + + + YardSale: tienda online de cosas chéveres + - - - - - Document - - - - - +
+ - + +
- +
+ +
- \ No newline at end of file +
+ +
+ + + + r + + diff --git "a/04-JavascriptPr\303\241ctico/store/main.js" "b/04-JavascriptPr\303\241ctico/store/main.js" new file mode 100644 index 0000000..71e3c3d --- /dev/null +++ "b/04-JavascriptPr\303\241ctico/store/main.js" @@ -0,0 +1,8 @@ +const menuEmail = document.querySelector(".navbar-email"); +const desktopMenu = document.querySelector(".desktop-menu"); + +menuEmail.addEventListener("click", toggleDesktopMenu); + +function toggleDesktopMenu() { + desktopMenu.classList.toggle("inactive"); +} diff --git "a/04-JavascriptPr\303\241ctico/store/styles.css" "b/04-JavascriptPr\303\241ctico/store/styles.css" new file mode 100644 index 0000000..9c4f87f --- /dev/null +++ "b/04-JavascriptPr\303\241ctico/store/styles.css" @@ -0,0 +1,130 @@ +: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; +} + +.inactive { + display: none; +} + +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 { + 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 { + 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-style: var(--sm); +} +.desktop-menu ul li a { + display: inline-block; + color: var(--black); + text-decoration: none; + margin-bottom: 20px; +} +@media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } +}