diff --git a/submissions/bordun2022/DOM TASK/README.md b/submissions/bordun2022/DOM TASK/README.md new file mode 100644 index 0000000000..81fadc15c2 --- /dev/null +++ b/submissions/bordun2022/DOM TASK/README.md @@ -0,0 +1,6 @@ +# dom-task +Working with this app, helps me to learn DOM methods as well + + +[Demo](https://bordun2022.github.io/dom-task/) | +[Code base](https://github.com/bordun2022/dom-task.git) diff --git a/submissions/bordun2022/DOM TASK/img/adidas.png b/submissions/bordun2022/DOM TASK/img/adidas.png new file mode 100644 index 0000000000..02c77099ff Binary files /dev/null and b/submissions/bordun2022/DOM TASK/img/adidas.png differ diff --git a/submissions/bordun2022/DOM TASK/img/brands.jpeg b/submissions/bordun2022/DOM TASK/img/brands.jpeg new file mode 100644 index 0000000000..036e5c62df Binary files /dev/null and b/submissions/bordun2022/DOM TASK/img/brands.jpeg differ diff --git a/submissions/bordun2022/DOM TASK/img/columbia.png b/submissions/bordun2022/DOM TASK/img/columbia.png new file mode 100644 index 0000000000..0f0fc66f03 Binary files /dev/null and b/submissions/bordun2022/DOM TASK/img/columbia.png differ diff --git a/submissions/bordun2022/DOM TASK/img/nike.jpeg b/submissions/bordun2022/DOM TASK/img/nike.jpeg new file mode 100644 index 0000000000..f3776cbfbd Binary files /dev/null and b/submissions/bordun2022/DOM TASK/img/nike.jpeg differ diff --git a/submissions/bordun2022/DOM TASK/img/puma.jpeg b/submissions/bordun2022/DOM TASK/img/puma.jpeg new file mode 100644 index 0000000000..1685a9229d Binary files /dev/null and b/submissions/bordun2022/DOM TASK/img/puma.jpeg differ diff --git a/submissions/bordun2022/DOM TASK/img/reebok.png b/submissions/bordun2022/DOM TASK/img/reebok.png new file mode 100644 index 0000000000..d6cbf2e8db Binary files /dev/null and b/submissions/bordun2022/DOM TASK/img/reebok.png differ diff --git a/submissions/bordun2022/DOM TASK/img/run.jpeg b/submissions/bordun2022/DOM TASK/img/run.jpeg new file mode 100644 index 0000000000..3084554f03 Binary files /dev/null and b/submissions/bordun2022/DOM TASK/img/run.jpeg differ diff --git a/submissions/bordun2022/DOM TASK/index.html b/submissions/bordun2022/DOM TASK/index.html new file mode 100644 index 0000000000..9fb3d3fddb --- /dev/null +++ b/submissions/bordun2022/DOM TASK/index.html @@ -0,0 +1,31 @@ + + + + + Side-menu + + + + + + +

Sport
brands

+ +
+ +

Пу́ма (нім. Puma) — німецька компанія — один із світових лідерів виробництва спортивних товарів. Заснована в 1924 році братами Дасслерами як «Dassler». Сучасна назва з'явилася 1948 року, після того, як брати Дасслер розірвали відносини і утворили власні компанії. Рудольф спочатку назвав свою фірму Руда (від перших літер і'мя та прізвища Рудольф Дасслер), але вже за декілька місяців переіменував її в Пума (Puma).

+ img +
+ + + + diff --git a/submissions/bordun2022/DOM TASK/script.js b/submissions/bordun2022/DOM TASK/script.js new file mode 100644 index 0000000000..412d40011e --- /dev/null +++ b/submissions/bordun2022/DOM TASK/script.js @@ -0,0 +1,46 @@ +const sportBrands = [ + { + id: 1, + textContent: "Пу́ма (нім. Puma) — німецька компанія — один із світових лідерів виробництва спортивних товарів. Заснована в 1924 році братами Дасслерами як «Dassler». Сучасна назва з'явилася 1948 року, після того, як брати Дасслер розірвали відносини і утворили власні компанії. Рудольф спочатку назвав свою фірму Руда (від перших літер і'мя та прізвища Рудольф Дасслер), але вже за декілька місяців переіменував її в Пума (Puma).", + image: "./img/puma.jpeg", +}, +{ id: 2, + textContent: "Nike — американська компанія, виробник спортивних товарів. Засновано в 1964 студентом Філом Найтом, бігуном на середні дистанції в команді Університету Орегону, та його тренером Біллом Боуерманом у Юджині. Спочатку компанія носила назву «Blue Ribbon Sports» й спеціалізувалась на замовленнях кросівок в азійських країнах й наступному продажу їх на американському ринку. Nike — один з найбільших виробників спортивних товарів у світі.", + image: "./img/nike.jpeg", + +}, +{ id: 3, + textContent: "Адідас (нім. Adidas) — німецька компанія, один зі світових лідерів виробництва спортивних товарів. Заснована в 1924 році братами Дасслерами як «Dassler». Сучасна назва з'явилася 1948 року, після того, як брати Дасслер розірвали відносини і утворили власні компанії. Adidas походить від перших трьох літер прізвиська молодшого брата Адольфа «Adi» і трьох перших літер прізвища (Das) засновника фірми Адольфа Дасслера, (Adolf Dassler).", + image: "./img/adidas.png", + +}, +{ id: 4, + textContent: "Reebok — американська компанія з виробництва спортивного одягу, взуття та аксесуарів. Штаб-квартира розташована в Бостоні (штат Массачусетс ). З 2005 року є дочірнім підрозділом компанії Adidas. Reebok виробляє та поширює спортивний одяг для фітнесу, бігу та кросфіту, включаючи аксесуари та взуття. У 2006 році відбулося злиття з Adidas.", + image: "./img/reebok.png", + +}, +{ id: 5, + textContent: "Columbia Sportswear, Коламбія спортсвер — американський виробник й продавець верхнього та спортивного одягу із головним офісом у Бівертоні, Орегон. Виробами Колумбії також є взуття, капелюхи, туристичні товари, лижній одяг (на 2001 рік Коламбія була найбільшим американським виробником)та верхнього одягу акксесуари.Коламбія продає свої вироби у 13 тисячах магазинах у 72 країнах світу.", + image: "./img/columbia.png", + +}, +{ id: 6, + textContent: "Існують також інші бренди спортивного одягу такі як: New Balance, Converse, Asics, Vans та інші. Дані бренди також користуються популярністю серед споживачів. Асортимент товарів даних брендів вельми різноманітний та прийдеться до смаку навіть найвибагливішим покупцям. Стиль та якість товару дійсно перебуває на високому рівні.", + image: "./img/brands.jpeg", + +} +]; + +const buttonActive = document.querySelector('.sidenav'); +const content = document.querySelector('.content'); + + +buttonActive.addEventListener("click", ({ target }) => { + const idx = target.parentElement.id; + const brand = sportBrands.filter(({ id }) => id == idx); + const [ { image, textContent } ] = brand; + content.innerHTML = ` +

${textContent}

+ img + `; +}); \ No newline at end of file diff --git a/submissions/bordun2022/DOM TASK/style.css b/submissions/bordun2022/DOM TASK/style.css new file mode 100644 index 0000000000..c7a24f6ab0 --- /dev/null +++ b/submissions/bordun2022/DOM TASK/style.css @@ -0,0 +1,280 @@ +* { + box-sizing: border-box; + margin: 0; + text-decoration: none; + list-style-type: none; + font-family: "Loto", sans-serif; + } + + html { + height: 100%; + } + + body { + background-image: url(img/run.jpeg); + background-size:cover; + background-attachment: fixed; + background-repeat: no-repeat; + height: 100%; + display: flex; + margin: 0px; + overflow: hidden; + } + + header { + display: flex; + justify-content: flex-start; + padding: 10px 10px; + text-align: center; + align-items: center; + font-size: 20px; + cursor: pointer; + color: darkslategrey; + overflow: hidden; + transition: 0.5s; + opacity: 0.7; + border: 1px solid white; + width: 95px; + height: 75px; + margin: 10px 10px; + } + + header:hover { + background-color: transparent; + color:aliceblue; + } + + nav { + align-self: flex-start; + } + + .image { + max-height: 350px; + padding: 0px 20px; + max-width: 400px; + } + +.sidenav { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + align-self: center; + padding: 30px 40px; + color: black; + width: 300px; + height: 520px; + } + + .content { + display: flex; + height: 400px; + background-color: aliceblue; + width: 1100px; + opacity: 0.7; + color: black; + padding: 20px 20px; + text-align: justify; + margin: 100px 10px; + } + + .menu_btn{ + border: 1px solid transparent; + width: 180px; + height: 100px; + padding: 30px 30px; + text-align: center; + line-height: 10px; + font-size: 25px; + text-decoration: none; + list-style-type: none; + color: black; + gap: 10px; + } + +.text-content { + font-size: 25px; +} + + a { + color: black; + } + + a:hover { + color: aliceblue; + background-color: transparent; + border: 1px solid grey; + padding: 15px; + border-radius: 15px; + } + + a:focus { + outline: 2px lightgreen solid; + +} + + @media screen and (max-width: 375px) { + body { + overflow: auto; + } + header { + display: none; + } + + .sidenav{ + align-self: center; + } + .content{ + flex-direction: column; + height: 700px; + text-align: justify; + } + .image { + flex-direction: column; + } + .menu_btn{ + font-size: 18px; + } + } + + @media screen and (max-width: 600px) { + body { + overflow: auto; + } + header { + display: none; + } + .sidenav { + align-self: center; + width: 250px; + height: 400px; + } + .content{ + flex-direction: column; + + } + .image { + flex-direction: column; + } + .text-content { + font-size: 5px; + } + .menu_btn{ + font-size: 20px; + } + } + + @media screen and (max-width: 768px) { + body { + overflow: auto; + } + header { + display: none; + } + .sidenav { + align-self: center; + width: 250px; + height: 400px; + } + .content{ + flex-direction: column; + } + .text-content { + font-size: 15px; + } + .menu_btn{ + font-size: 18px; + } + } + + @media screen and (max-width: 850px) { + + header { + display: none; + } + .sidenav { + align-self: center; + width: 250px; + height: 400px; + } + .content{ + flex-direction: column; + height: 500px; + } + .image { + flex-direction: column; + } + .text-content { + font-size: 20px; + } + .menu_btn{ + font-size: 20px; + } + } + + @media (max-width: 1154px) { + body { + overflow: scroll; + } + header { + display: none; + } + .sidenav { + align-self: center; + } + .content { + flex-direction: column; + height: 700px; + width: 700px; + + } + .image { + overflow: scroll; + } + .text-content { + font-size: 23px; + } + } + + @media (max-width: 1194px) { + body { + overflow: auto; + } + header { + display: none; + } + .sidenav { + align-self: center; + } + .content { + flex-direction: column; + height: 650px; + + } + .image { + flex-direction: column; + align-self: center; + } + } + + + @media (max-width: 1299px) { + body { + overflow: auto; + } + header { + display: none; + } + .sidenav { + align-self: center; + } + .image { + flex-direction: column; + } + } + + + + + + \ No newline at end of file