diff --git a/100_projects/12-create-tabs/index.html b/100_projects/12-create-tabs/index.html new file mode 100644 index 0000000..88ca492 --- /dev/null +++ b/100_projects/12-create-tabs/index.html @@ -0,0 +1,41 @@ + + + + + + document + + + + +
+
Content 1 +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque.

+
+
Content 2 +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque. + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse earum nam fugit odit totam quaerat minus, nobis illo quia officiis iste +

+
+
Content 3 +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque + Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laborum nisi id? Eius eaque expedita ex. Ipsam, repudiandae. Dignissimos delectus suscipit voluptatem eum possimus facere dolor laborum recusandae dolorum vero. +

+
+
Content 4 +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque.

+
+
Content 5 +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ipsum eveniet mollitia ipsam explicabo quidem optio dolorem minima dolorum ad corrupti voluptatem vel, necessitatibus esse? Eos ipsa quibusdam culpa cumque. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laborum nisi id? Eius eaque expedita ex. Ipsam, repudiandae. Dignissimos delectus suscipit voluptatem eum possimus facere dolor laborum recusandae dolorum vero.

+
+
+ + + \ No newline at end of file diff --git a/100_projects/12-create-tabs/main.js b/100_projects/12-create-tabs/main.js new file mode 100644 index 0000000..889b83e --- /dev/null +++ b/100_projects/12-create-tabs/main.js @@ -0,0 +1,17 @@ +let tabs = document.querySelectorAll(".tabs li"); +let tabsArray = Array.from(tabs); +let divs = document.querySelectorAll(".content > div"); +let divsArray = Array.from(divs); + +tabsArray.forEach((ele) => { + ele.addEventListener("click", function (e) { + tabsArray.forEach((ele) => { + ele.classList.remove("active"); + }); + e.currentTarget.classList.add("active"); + divsArray.forEach((div) => { + div.style.display = "none"; + }); + document.querySelector(e.currentTarget.dataset.cont).style.display = "block"; + }); +}); \ No newline at end of file diff --git a/100_projects/12-create-tabs/style.css b/100_projects/12-create-tabs/style.css new file mode 100644 index 0000000..4d8cfe4 --- /dev/null +++ b/100_projects/12-create-tabs/style.css @@ -0,0 +1,46 @@ +body { + font-family: Arial, Helvetica, sans-serif; + display: flex; + justify-content: center; + align-content: center; + flex-direction: column; + min-height: 100vh; + background:#E9BF8B; + color: #fff; +} +.tabs { + display: flex; + justify-content: center; + align-items: center; + list-style: none; + padding: 0; + margin: 0; +} +.tabs li { + padding: 10px; + background-color: #2C2D2A; + cursor: pointer; + transition: 0.2s; + border-bottom: 1px solid #2C2D2A; + border-left: 1px solid #2C2D2A; + border-right: 1px solid #1C1C1C; +} +.tabs li.active, +.tabs li:hover{ + background-color: #151716; + border-left: 1px solid #2C2D2A; + border-bottom: 1px solid #E9BF8B; +} +.content { + display: flex; + align-self: center; + background-color: #2C2D2A; + width: 305px; + height: 335px; +} +.content > div { + padding: 20px; +} +.content > div:not(:first-child) { + display: none; +} \ No newline at end of file