diff --git a/ZARA-GILBERT/img/a.webp b/ZARA-GILBERT/img/a.webp new file mode 100644 index 0000000..83c3328 Binary files /dev/null and b/ZARA-GILBERT/img/a.webp differ diff --git a/ZARA-GILBERT/img/aa.webp b/ZARA-GILBERT/img/aa.webp new file mode 100644 index 0000000..dd13935 Binary files /dev/null and b/ZARA-GILBERT/img/aa.webp differ diff --git a/ZARA-GILBERT/img/aaa.webp b/ZARA-GILBERT/img/aaa.webp new file mode 100644 index 0000000..244e24f Binary files /dev/null and b/ZARA-GILBERT/img/aaa.webp differ diff --git a/ZARA-GILBERT/img/aaaa.webp b/ZARA-GILBERT/img/aaaa.webp new file mode 100644 index 0000000..c4e8d4d Binary files /dev/null and b/ZARA-GILBERT/img/aaaa.webp differ diff --git a/ZARA-GILBERT/img/aaaaa.webp b/ZARA-GILBERT/img/aaaaa.webp new file mode 100644 index 0000000..62e5b79 Binary files /dev/null and b/ZARA-GILBERT/img/aaaaa.webp differ diff --git a/ZARA-GILBERT/img/aaaaaa.webp b/ZARA-GILBERT/img/aaaaaa.webp new file mode 100644 index 0000000..9c63434 Binary files /dev/null and b/ZARA-GILBERT/img/aaaaaa.webp differ diff --git a/ZARA-GILBERT/img/aaaaaaaa.webp b/ZARA-GILBERT/img/aaaaaaaa.webp new file mode 100644 index 0000000..00fe5fe Binary files /dev/null and b/ZARA-GILBERT/img/aaaaaaaa.webp differ diff --git a/ZARA-GILBERT/img/blusa feminina.webp b/ZARA-GILBERT/img/blusa feminina.webp new file mode 100644 index 0000000..9e3b1e6 Binary files /dev/null and b/ZARA-GILBERT/img/blusa feminina.webp differ diff --git a/ZARA-GILBERT/img/bolsa.webp b/ZARA-GILBERT/img/bolsa.webp new file mode 100644 index 0000000..85956d0 Binary files /dev/null and b/ZARA-GILBERT/img/bolsa.webp differ diff --git a/ZARA-GILBERT/img/calados[.webp b/ZARA-GILBERT/img/calados[.webp new file mode 100644 index 0000000..d342494 Binary files /dev/null and b/ZARA-GILBERT/img/calados[.webp differ diff --git a/ZARA-GILBERT/img/calca.webp b/ZARA-GILBERT/img/calca.webp new file mode 100644 index 0000000..4127be2 Binary files /dev/null and b/ZARA-GILBERT/img/calca.webp differ diff --git a/ZARA-GILBERT/img/casaco.webp b/ZARA-GILBERT/img/casaco.webp new file mode 100644 index 0000000..688a035 Binary files /dev/null and b/ZARA-GILBERT/img/casaco.webp differ diff --git a/ZARA-GILBERT/img/frame-inicial.png b/ZARA-GILBERT/img/frame-inicial.png new file mode 100644 index 0000000..2b88ce4 Binary files /dev/null and b/ZARA-GILBERT/img/frame-inicial.png differ diff --git a/ZARA-GILBERT/img/frame.png b/ZARA-GILBERT/img/frame.png new file mode 100644 index 0000000..60e6542 Binary files /dev/null and b/ZARA-GILBERT/img/frame.png differ diff --git a/ZARA-GILBERT/img/images.png b/ZARA-GILBERT/img/images.png new file mode 100644 index 0000000..9d21aa3 Binary files /dev/null and b/ZARA-GILBERT/img/images.png differ diff --git a/ZARA-GILBERT/img/perfumes.webp b/ZARA-GILBERT/img/perfumes.webp new file mode 100644 index 0000000..6781d49 Binary files /dev/null and b/ZARA-GILBERT/img/perfumes.webp differ diff --git a/ZARA-GILBERT/img/praia.webp b/ZARA-GILBERT/img/praia.webp new file mode 100644 index 0000000..4ef5720 Binary files /dev/null and b/ZARA-GILBERT/img/praia.webp differ diff --git a/ZARA-GILBERT/img/ropa.webp b/ZARA-GILBERT/img/ropa.webp new file mode 100644 index 0000000..faf1e11 Binary files /dev/null and b/ZARA-GILBERT/img/ropa.webp differ diff --git a/ZARA-GILBERT/img/vestido.webp b/ZARA-GILBERT/img/vestido.webp new file mode 100644 index 0000000..c07460e Binary files /dev/null and b/ZARA-GILBERT/img/vestido.webp differ diff --git a/ZARA-GILBERT/index.html b/ZARA-GILBERT/index.html new file mode 100644 index 0000000..354ade8 --- /dev/null +++ b/ZARA-GILBERT/index.html @@ -0,0 +1,389 @@ + + + + + + + + Zara - HOME + + + + + + + + + + + +
+ + +
+ +
+ + + +
+ + + + +
+
+ +
+ +
+ +

+
+ +
+ +
+ +

+ CATEGORIAS: +

+
+ +
+
Vestidos
+
perfumes
+
Moda Praia
+
Casacos
+
Calças
+
Calçados
+
Blusas
+
+
+

+ NOVOS PRODUTOS: +

+
+
+ +
+
+
+

Color

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+
+

Categorias

+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+ + + + + +
+
+ + + + +
+ +
+ + + +
+ +
+ + +
+ +
+ +
+
+
+ +
+
+
+ +
+ +
+
+ + + + + Calça Feminina Pantalona. + + R$28,99 + +
+ + +
+ + + + + Blusa Feminina Pantalona. + + R$54,99 + +
+ +
+ + + + + Blusa Feminina Shein. + + R$18,99 + +
+ +
+ + + + + Blusa Feminina Branca. + + R$25,99 + +
+ +
+ + + + + Blusa Feminina Flor. + + R$25,99 + +
+ +
+ + + + + Blusa Feminina Beje. + + R$26,99 + +
+ +
+ + + + + Kit 3 blusas femininas. + + R$45,99 + +
+ +
+ + + + + Blusas feminina listrada. + + R$47,99 + +
+ +
+ + + + + Calça Feminina Pantalona. + + R$28,99 + +
+ + +
+ + + + + Blusa Feminina Pantalona. + + R$54,99 + +
+ +
+ + + + + Blusa Feminina Shein. + + R$18,99 + +
+ +
+ + + + + Blusa Feminina Branca. + + R$25,99 + +
+ +
+ + + + + Blusa Feminina Flor. + + R$25,99 + +
+ +
+ + + + + Blusa Feminina Beje. + + R$26,99 + +
+ +
+ + + + + Kit 3 blusas femininas. + + R$45,99 + +
+ +
+ + + + + Blusas feminina listrada. + + R$47,99 + +
+
+ +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/ZARA-GILBERT/main.js b/ZARA-GILBERT/main.js new file mode 100644 index 0000000..29eceea --- /dev/null +++ b/ZARA-GILBERT/main.js @@ -0,0 +1,33 @@ +const menuOpen = document.getElementById('menu_open'); +const menuClose = document.getElementById('menu_close'); +const menuMobil = document.getElementById('menu_mobile'); + +const nav = document.getElementById('nav'); + + +let isMenuOpen = false; + +function toogleMenu() { + if (isMenuOpen) { + menuOpen.classList.remove('hide'); + menuClose.classList.add('hide'); + } + + else { + menuOpen.classList.add('hide'); + menuClose.classList.remove('hide'); + } + + isMenuOpen = !isMenuOpen; + + if (isMenuOpen) { + nav.style.display = 'block'; + } + + else { + nav.style.display = 'none'; + } +} + +menuMobil.addEventListener('click', toogleMenu); + diff --git a/ZARA-GILBERT/reset.css b/ZARA-GILBERT/reset.css new file mode 100644 index 0000000..673f14c --- /dev/null +++ b/ZARA-GILBERT/reset.css @@ -0,0 +1,32 @@ + /* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) + */ + + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + body { + line-height: 1; + } + ol, ul { + list-style: none; + } + blockquote, q { + quotes: none; + } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } \ No newline at end of file diff --git a/ZARA-GILBERT/script/script.js b/ZARA-GILBERT/script/script.js new file mode 100644 index 0000000..3d96c0b --- /dev/null +++ b/ZARA-GILBERT/script/script.js @@ -0,0 +1,17 @@ +const menuBtn = document.getElementById('botao-aparecer-menu') +const menu = document.getElementById('menu-lateral') + +menuBtn.addEventListener('click', function() { + + if (menu.style.left === '-200px') { + menu.style.left = '0' + menuBtn.classList.remove("fa-bars") + menuBtn.classList.add("fa-times") + } + + else{ + menu.style.left = '-200px' + menuBtn.classList.add("fa-bars") + menuBtn.classList.remove("fa-times") + } +}) \ No newline at end of file diff --git a/ZARA-GILBERT/style.css b/ZARA-GILBERT/style.css new file mode 100644 index 0000000..574d88d --- /dev/null +++ b/ZARA-GILBERT/style.css @@ -0,0 +1,351 @@ +body { + margin: 0px; + background-color: #e0b38b86; + font-family: Inter, "Arial"; +} + +.navbar { + background-color: #ab947f70; + box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.313); + display: flex; + justify-content: space-around; + align-items: center; + height: 100px; + width: 100%; +} + +.logo { + margin-left: 50px; +} + +nav { + display: flex; + gap: 20px; + margin-right: 40px; + align-items: center; +} +nav a, +nav button { + text-decoration: none; + color: #ca9566; + background-color: rgba(0, 255, 255, 0); + padding: 10px; + border: none; + font-size: 20px; + transition: 0.3s; +} + +nav a:hover, +nav button:hover { + color: #ca9566; + cursor: pointer; + background-color: #dbc2b0; + border-radius: 5px; +} + +.produto img { + width: 200px; +} + +.produto { + display: flex; + flex-direction: column; + padding: 10px; +} + +.area-produtos { + display: grid; + grid-template-columns: repeat(4, 1fr); +} + +.preco { + color: red; + font-weight: bold; + margin-left: 10px; + margin: 10px; + font-size: 20px; +} + +.titulo-produto { + margin-left: 10px; + font-weight: bold; +} + +.produto button { + color: black; + border: 2px solid black; + width: 100px; + border-radius: 2px; + height: 40px; + display: flex; + font-size: 17px; + font-weight: bold; + align-items: center; + justify-content: center; + background-color: rgba(187, 0, 0, 0); +} + +.produto button:hover { + color: rgb(23, 23, 23); + cursor: pointer; + border: 2px solid rgb(53, 53, 53); + background-color: rgba(105, 105, 105, 0.171); +} + +.menu-lateral { + display: flex; + flex-direction: column; + background-color: #9a663863; + width: 240px; + padding: 10px; +} + +.menu-lateral div { + font-weight: bold; + padding: 5px 10px; + display: flex; +} + +.menu-lateral hr { + border: 1px solid rgba(99, 99, 99, 0.623); + width: 100%; +} + +.menu-lateral button { + width: 200px; + background-color: #c47531; + color: black; + height: 40px; + border: none; +} +.avaliacao{ + display: flex; + flex-direction: column; +} +.menu-lateral button:hover { + background-color: #a35f24; + cursor: pointer; +} + +.menu-lateral input[type="checkbox"] { + width: 20px; + height: 20px; + background-color: #333; +} + + + +section { + display: flex; + margin: 100px; +} + +.icone-menu { + display: none; + position: absolute; + right: 50px; +} + + +.botao-filtros { + display: none; + background-color: #b8542292; + color: white; + width: 70%; +} + +.menu-lateral-navbar { + position: fixed; + top: 0; + left: -200px; + width: 200px; + height: 100%; + background: #333; + padding-top: 50px; + transition: left 0.3s ease; +} + +.botoes-dentro-menu { + display: block; + color: white; + text-decoration: none; + padding: 10px; +} + +.botoes-dentro-menu:hover { + background: #555; +} + +.imagem-inicial img{ + width: 100%; +} + +.imagem-inicial { + display: flex; + justify-content: center; + align-items: center; +} + +.categorias{ + display: flex; + gap: 20px; + justify-content: center; + align-items: center; +} + +.categorias div{ + display: flex; + width: 150px; + transition: 0.6s; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +.categorias img{ + width: 130px; +} + +.categorias a{ + display: flex; + flex-direction: column; + text-align: center; + text-decoration: none; + justify-content: center; + align-items: center; + color: black; + font-weight: bold; +} + + + +footer { + background-color: #3a3a3a; + padding: 20px; + text-align: center; + color: white; + font-family: Arial, sans-serif; + border-top: 1px solid #e9ecef; +} +footer h2 { + font-size: 24px; + margin-bottom: 10px; +} +footer h3 { + font-size: 20px; + margin-bottom: 10px; +} +footer p { + font-size: 14px; + margin: 5px 0; +} +.footer-ctt, .social-media { + margin: 15px 0; + +} + +.footer-ctt a { +color: white; +font-weight: bold; +} + +.social-media a { + text-decoration: none; + color: #007bff; + margin: 0 10px; +} +.social-media a:hover { + text-decoration: underline; +} + + + +@media (max-width: 1200px) { + + .area-produtos { + display: grid; + grid-template-columns: repeat(3, 1fr); + } + + nav { + margin-right: 0px; + } + + nav a, + nav button { + gap: 1; + font-size: 15px; + padding: 5px; + } + + .logo { + margin-left: 0px; + } + +} + +@media (min-width: 600px) { + .menu-lateral-navbar { + display: none; + } + + +} + +@media (max-width: 900px) { + nav { + display: none; + } + + .icone-menu { + display: block; + } + + .area-produtos { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 600px) { + .menu-lateral { + display: none; + } + + .botao-filtros { + display: block; + } + + section { + display: flex; + margin: 10px; + } + + .produto img { + width: 170px; + } + + .produto { + padding: 5px; + } + + .titulo-produto { + font-size: 13px; + } + + .produto button { + width: 80px; + height: 30px; + font-size: 15px; + } + + +} + +@media (max-width: 500px) { + .icone-menu { + right: 25px; + } + +} \ No newline at end of file diff --git a/README.md b/ZARA-VITOR/README.md similarity index 100% rename from README.md rename to ZARA-VITOR/README.md diff --git a/ZARA-VITOR/css/styles.css b/ZARA-VITOR/css/styles.css new file mode 100644 index 0000000..f052255 --- /dev/null +++ b/ZARA-VITOR/css/styles.css @@ -0,0 +1,432 @@ +body { + margin: 0; + background-color: #e2cebc; + + font-size: 14px; + font-weight: 500; + font-family: Inter, sans-serif; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 120px; + background-color: #ede3da; + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); +} + +#menu_mobile svg { + display: none; +} + +nav { + display: flex; + gap: 34px; +} + +nav a, +nav button { + display: flex; + justify-content: center; + align-items: center; + + color: #3c3a36; + text-decoration: none; + background-color: inherit; + text-transform: uppercase; + padding: 8px 12px; + border-radius: 4px; + cursor: pointer; +} + +nav a:hover, +nav button:hover { + background-color: #3c3a360d; + transition: background-color 0.3s; +} + +nav a.active, +nav button.active { + background-color: #e2cebc; +} + +.dropdown-menu { + display: none; +} + +nav button { + border: none; +} + +.shop-main { + display: flex; +} + +.shop-main h2 { + font-size: 18px; + margin-bottom: 10px; + font-weight: bold; +} + +.main-filter { + padding: 30px; +} + +.main-filter section { + padding: 20px 0px; + width: max-content; +} + +.main-filter .form-item { + margin-top: 5px; +} + +.product-footer button { + display: flex; + justify-content: center; + align-items: center; + + color: #3c3a36; + text-decoration: none; + background-color: inherit; + text-transform: uppercase; + padding: 8px 12px; + border-radius: 4px; + cursor: pointer; + + font-size: 14px; + font-weight: 500; + font-family: Inter, sans-serif; +} + +.product-footer button:hover { + background-color: #3c3a360d; + transition: background-color 0.3s; +} + +.products-wapper { + margin-top: 50px; + display: flex; + flex-wrap: wrap; + grid-gap: 30px; + justify-content: center; +} + +/* Section Product */ +.product-card { + display: flex; + flex-direction: column; + border: 1px #c0bcb9 solid; + border-radius: 13px; + width: 300px; +} + +.product-image { + border-radius: 12px 12px 0 0; +} + +.product-content { + display: flex; + flex-direction: column; + background-color: #ede3da; + padding: 20px 15px; + border-radius: 0 0 12px 12px; +} + +.product-title { + font-size: 22px; + font-weight: bold; + color: #3c3a36; +} + +.product-description { + font-size: 18px; + margin-top: 10px; + color: #5e5c59; +} + +.product-variations { + font-size: 18px; + margin-top: 10px; + color: #5e5c59; + font-style: italic; +} + +.product-price { + margin-top: 8px; + font-size: 22px; + font-weight: bold; +} + +.product-image-wrapper { + display: flex; +} + +.product-image-wrapper img { + width: 100%; + height: 400px; + object-fit: cover; +} + +.product-footer { + display: flex; + justify-content: space-between; +} + +.product-cart-button { + display: flex; + justify-content: center; + gap: 10px; +} + +.product-cart-button svg { + width: 20px; +} + +main { + padding: 40px; +} + +.shop-title h1 { + font-size: 36px; + font-weight: bold; + margin-top: 10px; +} + +.shop-title p { + margin-top: 10px; + font-size: 18px; + color: #5e5c59; +} + +@media (max-width: 875px) { + .navbar { + position: relative; + } + + nav { + display: none; + flex-direction: column; + position: absolute; + background-color: #ede3da; + left: 0px; + width: 100%; + top: 80px; + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); + gap: 0px; + } + + nav a, + nav button { + padding: 20px 0px; + font-size: 16px; + } + + .navbar { + padding: 10px 30px; + } + + #menu_mobile svg { + display: block; + width: 45px; + } + + #menu_open { + animation: fade-out 1s; + transition: display 1s; + } + + .hide { + display: none; + } + + .logo svg { + width: 10rem; + } + + nav a.active, + nav button.active { + background-color: inherit; + } + + .dropdown { + display: flex; + justify-content: center; + } + + main { + padding: 40px 10px; + } + + .shop-title h1 { + font-size: 28px; + } + + .shop-title p { + font-size: 16px; + } + + .main-filter { + display: none; + } +} + + /* Estilos básicos para o navbar */ + .navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + background-color: #fff; +} + +.navbar nav { + display: flex; + gap: 15px; +} + +.navbar a { + text-decoration: none; + color: #3C3A36; +} + +.dropdown { + position: relative; +} + +.dropdown-menu { + display: none; + position: absolute; + top: 100%; + left: 0; + background-color: #fff; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + border-radius: 3px; +} + +.dropdown-menu > a { + padding: 12px 24px; +} + +.dropdown:hover .dropdown-menu { + display: block; +} + +/* Estilos para o menu responsivo */ +.hamburger { + display: none; + flex-direction: column; + cursor: pointer; +} + +.hamburger div { + width: 25px; + height: 3px; + background-color: #3C3A36; + margin: 4px 0; +} + +.mobile-menu { + display: none; + flex-direction: column; + gap: 15px; +} + +@media (max-width: 768px) { + .navbar nav { + display: none; + } + + .hamburger { + display: flex; + } + + .mobile-menu.active { + display: flex; + } +} + +.content { + margin-top: 200px; + max-width: 1024px; + margin: 0 auto; +} + +.dropdown { + position: relative; +} + +.dropdown:hover .dropdown-menu { + display: block; +} + +.products { + display: flex; + margin-top: 50px; + flex-direction: row; + gap: 20px; +} + +.product { + display: flex; + justify-content: space-between; + flex-direction: column; + gap: 15px; + align-items: center; + padding: 10px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 5px; + background: white; +} + +#cart { + margin-top: 20px; + border-top: 1px solid #ccc; + padding-top: 10px; +} + +.form-container { + margin-bottom: 20px; + max-width: 480px; + margin: 0 auto; +} + +.form-container input { + margin: 5px 0; + padding: 10px; + width: calc(100% - 22px); + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + padding: 10px 20px; + background-color: #333; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:disabled { + background-color: #aaa; + cursor: not-allowed; +} + +#userInfo { + background: white; + padding: 10px; + border-radius: 5px; + margin-top: 25px; + margin-bottom: 25px; +} + +.hide { + display: none; +} + +.show { + display: block; +} diff --git a/ZARA-VITOR/index.html b/ZARA-VITOR/index.html new file mode 100644 index 0000000..4c71a03 --- /dev/null +++ b/ZARA-VITOR/index.html @@ -0,0 +1,97 @@ + + + + + + + Zara - HOME + + + + + +
+ + + + +
+ +
+
+

Carrinho

+ +
+ + + +
+
+ +
+

+

+
+ +
+
+ Item 1 + R$ 10,00 + +
+
+ Item 2 + R$ 20,00 + +
+
+ Item 3 + R$ 30,00 + +
+
+ Item 4 + R$ 27,37 + +
+
+ Item 5 + R$ 399,80 + +
+
+ +
+

Carrinho

+

Total: R$ 0

+ +
+
+ + + \ No newline at end of file diff --git a/ZARA-VITOR/script.js b/ZARA-VITOR/script.js new file mode 100644 index 0000000..570cc55 --- /dev/null +++ b/ZARA-VITOR/script.js @@ -0,0 +1,47 @@ +$(document).ready(function(){ + var btnSave = $('#saveButton'); + + btnSave.on("click", function(){ + var nome = $('#nomeInput').val(); + var email = $('#emailInput').val(); + + if(nome === "" || email === ""){ + alert('Preencha os campos!'); + } else { + $('#userInfo').removeClass('hide'); + $('#userName').text(nome); + $('#userEmail').text(email); + $(".add-to-cart").attr("disabled", false); + } + }); + + $("#cartForm").on("submit", function(e){ + e.preventDefault(); + }); +}); + +var result = 0; +var itens = { + "Item 1": 0, + "Item 2": 0, + "Item 3": 0, + "Item 4": 0, + "Item 5": 0 +}; + +var itenss = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]; + +function adicionarAoCarrinho(nome, preco){ + result += preco; + + itens[nome] += 1; + + $("#totalPrice").html(result.toFixed(2)); + + var li = $("#cartItems"); + li.empty(); + + itenss.forEach(element => { + li.append("
  • "+ element + " (" + itens[element] + ") " +"
    • "); + }); +}