diff --git a/Trindadez/algoritmos-js/index.html b/Trindadez/algoritmos-js/index.html new file mode 100644 index 0000000..7df9e13 --- /dev/null +++ b/Trindadez/algoritmos-js/index.html @@ -0,0 +1,34 @@ + + + + + + Calculadora + + + + +

+
+
+ + +
+ + + + +
+
+
+ +
+
+ + +
+ + + \ No newline at end of file diff --git a/Trindadez/algoritmos-js/main.js b/Trindadez/algoritmos-js/main.js new file mode 100644 index 0000000..1e3cdf0 --- /dev/null +++ b/Trindadez/algoritmos-js/main.js @@ -0,0 +1,40 @@ +function calcular() { + var num1 = $("#n1"); + var num2 = $("#n2"); + var textArea = $("#text-area"); + + $("#mais").click(() => { + var resultado = Number(num1.val()) + Number(num2.val()); + textArea.val(resultado); + }); + + $("#menos").click(() => { + var resultado = Number(num1.val()) - Number(num2.val()); + textArea.val(resultado); + }); + + $("#multi").click(() => { + var resultado = Number(num1.val()) * Number(num2.val()); + textArea.val(resultado); + }); + + $("#divis").click(() => { + var resultado = Number(num1.val()) / Number(num2.val()); + textArea.val(resultado); + }); +} + +function saudacao() { + var nomeInput = $("#username"); + var saudacaoP = $("#saudacao"); + + $("#salvar").click(() => { + var nome = nomeInput.val(); + saudacaoP.text(`Olá, ${nome}`); + }); +} + +$(document).ready(function() { + calcular(); + saudacao(); +}); \ No newline at end of file diff --git a/Trindadez/algoritmos-js/style.css b/Trindadez/algoritmos-js/style.css new file mode 100644 index 0000000..9446a46 --- /dev/null +++ b/Trindadez/algoritmos-js/style.css @@ -0,0 +1,74 @@ +@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap'); + +body { + min-width: 100vw; + min-height: 100vh; + display: flex; + padding: 0; + margin: 0; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: "Pixelify Sans", sans-serif; + gap: 10px; +} + +#main-div { + border: black 2px solid; + padding: 20px; + border-radius: 30px; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +textarea { + border: black 2px solid; + padding: 2px; + border-radius: 15px; + resize: none; +} + +button { + border-radius: 3px; + background-color: transparent; + border: 1px solid black; + font-size: 1rem; +text-align: center; +} + +#arroz { + display: flex; + flex-direction: column; +} + +#saudacao { + text-align: center; + font-size: 50px; + margin-bottom: 20px; + width: 100%; +} + +.buttons{ + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-content: center; + gap: 5px; + padding-top: 10px; +} + +input{ + outline: none; + border-radius: 5px; + border: 1px solid black; + padding: 2px; + width: 100px; +} + +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} diff --git a/Trindadez/zara-matheus/index.html b/Trindadez/zara-matheus/index.html new file mode 100644 index 0000000..33d19e7 --- /dev/null +++ b/Trindadez/zara-matheus/index.html @@ -0,0 +1,423 @@ + + + + + + + Zara - HOME + + + + + + +
+ + + + + +
+ +
+
+

New Arrivals

+

Checkout out the latest released of Basic Tees, new and improved with four apenings!

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

Color

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

Category

+
+ + +
+
+
+

Sizes

+
+ + +
+
+
+
+
+
+ Basic Tee 8-pack +
+
+

Basic Tee 8-pack

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, et. + Impedit debitis doloremque, namnecessitatibus, quae assumenda perferendis eveniet. +

+ + 8 colors + +
+ + $256 + + +
+
+
+
+
+ Basic Tee 8-pack +
+
+

Basic Tee 8-pack

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, et. + Impedit debitis doloremque, namnecessitatibus, quae assumenda perferendis eveniet. +

+ + 8 colors + +
+ + $256 + + +
+
+
+
+
+ Basic Tee 8-pack +
+
+

Basic Tee 8-pack

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, et. + Impedit debitis doloremque, namnecessitatibus, quae assumenda perferendis eveniet. +

+ + 8 colors + +
+ + $256 + + +
+
+
+
+
+ Basic Tee 8-pack +
+
+

Basic Tee 8-pack

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, et. + Impedit debitis doloremque, namnecessitatibus, quae assumenda perferendis eveniet. +

+ + 8 colors + +
+ + $256 + + +
+
+
+
+
+ Basic Tee 8-pack +
+
+

Basic Tee 8-pack

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, et. + Impedit debitis doloremque, namnecessitatibus, quae assumenda perferendis eveniet. +

+ + 8 colors + +
+ + $256 + + +
+
+
+
+
+ Basic Tee 8-pack +
+
+

Basic Tee 8-pack

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, et. + Impedit debitis doloremque, namnecessitatibus, quae assumenda perferendis eveniet. +

+ + 8 colors + +
+ + $256 + + +
+
+
+
+
+ Basic Tee 8-pack +
+
+

Basic Tee 8-pack

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, et. + Impedit debitis doloremque, namnecessitatibus, quae assumenda perferendis eveniet. +

+ + 8 colors + +
+ + $256 + + +
+
+
+
+
+ Basic Tee 8-pack +
+
+

Basic Tee 8-pack

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, et. + Impedit debitis doloremque, namnecessitatibus, quae assumenda perferendis eveniet. +

+ + 8 colors + +
+ + $256 + + +
+
+
+
+
+ Basic Tee 8-pack +
+
+

Basic Tee 8-pack

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, et. + Impedit debitis doloremque, namnecessitatibus, quae assumenda perferendis eveniet. +

+ + 8 colors + +
+ + $256 + + +
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/Trindadez/zara-matheus/main.js b/Trindadez/zara-matheus/main.js new file mode 100644 index 0000000..cb28d42 --- /dev/null +++ b/Trindadez/zara-matheus/main.js @@ -0,0 +1,75 @@ +const menuOpen = document.getElementById('menu_open'); +const menuClose = document.getElementById('menu_close'); +const menuMobil = document.getElementById('menu_mobile'); +const filterOpen = document.getElementById('filter_open'); +const filterClose = document.getElementById('filter_close'); +const filterMenu = document.getElementById('filter_menu'); + +const nav = document.getElementById('nav'); +const filter = document.getElementById('filter') + +let isMenuOpen = false; +let isFilterOpen = 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'; + filterClose.style.display = 'none'; + filterOpen.style.display = 'none'; + } + + else { + nav.style.display = 'none'; + filterClose.style.display = 'none'; + filterOpen.style.display = 'none' + } + + if (nav.style.display == 'none' && filter.style.display == 'flex'){ + filterClose.style.display = 'none'; + filterOpen.style.display = 'block' + }else if (nav.style.display == 'none' && filter.style.display == 'none'){ + filterClose.style.display = 'block'; + filterOpen.style.display = 'none' + } +} + +function toogleFilter() { + if (isFilterOpen) { + filterOpen.classList.remove('hide'); + filterOpen.classList.add('hide'); + } + + else { + filterOpen.classList.add('hide'); + filterClose.classList.remove('hide'); + } + + isFilterOpen = !isFilterOpen; + + if (isFilterOpen) { + filter.style.display = 'flex'; + filterOpen.style.display = 'block'; + filterClose.style.display = 'none'; + } + + else { + filter.style.display = 'none'; + filterOpen.style.display = 'none'; + filterClose.style.display = 'block'; + } +} + +menuMobil.addEventListener('click', toogleMenu); +filterMenu.addEventListener('click', toogleFilter); diff --git a/Trindadez/zara-matheus/reset.css b/Trindadez/zara-matheus/reset.css new file mode 100644 index 0000000..0a1e77d --- /dev/null +++ b/Trindadez/zara-matheus/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/Trindadez/zara-matheus/style.css b/Trindadez/zara-matheus/style.css new file mode 100644 index 0000000..0e4e8d0 --- /dev/null +++ b/Trindadez/zara-matheus/style.css @@ -0,0 +1,373 @@ +body { + margin: 0; + background-color: #e2cebc; +} + +.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; + + font-size: 14px; + font-weight: 500; + font-family: Inter, sans-serif; +} +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; +} + +#filter_menu { + margin-top: 15px; + cursor: pointer; + position: absolute; +} + +#filter_menu .show { + width: 35px; + display: block; + +} + +#filter_menu .hide { + width: 35px; + margin-left: 0px; + display:none; +} + +.main-filter { + display: none; + flex-direction: column; + 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; +} + +hr { + border: 1px #77736a solid; +} + +footer { + background-color: #e2cebc; + display: flex; + justify-content: space-evenly; + align-items: center; + flex-direction: column; + height: 400px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.social-medias { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.social-medias h1 { + font-size: 30px; +} + +.media-icons { + display: flex; + align-items: center; + justify-content: center; +} + +.media-icons a { + background-color: #000; + height: 0px; +} + +.media-icons svg { + margin: 25px 5px 50px 5px; + width: 35px; + height: 30px; +} + +.links { + margin-top: 20px; + display: flex; + align-items: start; + justify-content: center; + text-transform: uppercase; + color: #000; + font-weight: 600; +} + +.links section { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10px; +} + +.links h1 { + text-decoration: underline; +} + +.links a { + text-decoration: none; + color: #4B5252; + font-size: 12px; + margin-top: 10px; +} + +.links .number { + font-size: 14px; +} + +.links a:hover { + text-decoration: underline; +} + +@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; + } + +}