Skip to content

Commit f648810

Browse files
amit265amit265
committed
tabs project finished
1 parent 7a027b8 commit f648810

File tree

4 files changed

+170
-0
lines changed

4 files changed

+170
-0
lines changed

‎tabs-project/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="styles.css">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Tabs</title>
8+
</head>
9+
<body>
10+
<div class="main">
11+
<div class="header">
12+
<img src="sample.jpg" alt="">
13+
</div>
14+
<div class="content">
15+
<div class="tabTitle">
16+
<h2 class="button live" data-id="tab1">Tab 1</h2>
17+
<h2 class="button" data-id="tab2">Tab 2</h2>
18+
<h2 class="button" data-id="tab3">Tab 3</h2>
19+
20+
</div>
21+
<div class="tabs">
22+
<div class="tab live" id="tab1">
23+
<h3>Tab 1</h3>
24+
<p>
25+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quam vero veniam quae ipsam! Iure hic quisquam quasi doloribus consequuntur laudantium, magni quos amet saepe ipsam ea, ex tenetur vitae.
26+
Quasi animi provident cupiditate deleniti voluptatum, in aliquam dolorem quam possimus enim voluptatibus nam vel. Amet illum, temporibus deserunt itaque nulla laborum necessitatibus voluptatem ea delectus dolores. Officiis, obcaecati sequi?
27+
</p></div>
28+
<div class="tab" id="tab2"> <h3>Tab 2</h3>
29+
30+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto impedit libero repellendus quas dicta iusto, doloribus itaque reprehenderit. Et, est! Atque, repudiandae ducimus deleniti natus officiis recusandae tempora sit veniam?
31+
Quasi nobis nulla voluptas at sequi assumenda laudantium saepe blanditiis odio animi voluptate consectetur suscipit distinctio, libero illo praesentium voluptatem dolores explicabo a omnis adipisci rerum alias aut eius! Expedita!
32+
Dolorem, officiis neque ducimus et at fuga ipsam voluptate sed illo, nisi nostrum est! Eum repudiandae tempore similique tenetur sunt doloribus alias odio. Veritatis nobis est saepe beatae. Nemo, at.</p>
33+
</div>
34+
<div class="tab" id="tab3"> <h3>Tab 3</h2>
35+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos accusantium reprehenderit dolorem officiis adipisci modi quia explicabo fuga facere magnam cum aliquid excepturi possimus eveniet, suscipit praesentium, eos consectetur earum?</p></div>
36+
</div>
37+
38+
</div>
39+
</div>
40+
41+
<script src="script.js"></script>
42+
</body>
43+
</html>

‎tabs-project/sample.jpg‎

540 KB
Loading

‎tabs-project/script.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const btns = document.querySelectorAll(".button");
2+
const articles = document.querySelectorAll(".tab");
3+
const tabs = document.querySelector(".content")
4+
5+
tabs.addEventListener("click", (e) => {
6+
const id = e.target.dataset.id;
7+
console.log(id);
8+
if(id) {
9+
btns.forEach((btn) => {
10+
btn.classList.remove("live");
11+
});
12+
e.target.classList.add("live");
13+
14+
articles.forEach((article) => {
15+
article.classList.remove("live");
16+
});
17+
const element = document.getElementById(id);
18+
element.classList.add("live");
19+
}
20+
})

‎tabs-project/styles.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
margin: 0;
9+
padding: 0;
10+
font-family: sans-serif;
11+
color: grey;
12+
}
13+
14+
15+
.main {
16+
padding: 2rem;
17+
display: grid;
18+
grid-template-columns: 1fr 1fr;
19+
gap: 2rem;
20+
}
21+
22+
img {
23+
display: block;
24+
width: 100%;
25+
height: 100%;
26+
border-radius: 0.5rem;
27+
object-fit: cover;
28+
}
29+
30+
.content {
31+
background-color: black;
32+
color: aliceblue;
33+
display: grid;
34+
grid-template-rows: 1fr 90%;
35+
gap: 2rem;
36+
border-radius: 0.5rem;
37+
padding: 5px;
38+
39+
}
40+
41+
.tabTitle {
42+
display: grid;
43+
grid-template-columns: repeat(3, 1fr);
44+
gap: 1rem;
45+
text-align: center;
46+
background-color: #000;
47+
color: #000;
48+
}
49+
50+
h2 {
51+
font-size: 2rem;
52+
cursor: pointer;
53+
background-color: pink;
54+
}
55+
56+
h2:hover {
57+
box-shadow: 0px 0px 40px rgba(0, 255, 0, 0.6);
58+
background-color: green;
59+
color: white;
60+
}
61+
62+
.tabs {
63+
display: grid;
64+
grid-template-rows: auto 1fr;
65+
padding: 1rem;
66+
gap: 2rem;
67+
height: 400px;
68+
}
69+
70+
.invisible {
71+
display: none;
72+
}
73+
74+
75+
.tab {
76+
padding: 1rem;
77+
display: none;
78+
}
79+
80+
.tab.live {
81+
display: block;
82+
}
83+
84+
.button {
85+
transition: all 0.3s linear;
86+
}
87+
88+
.button.live {
89+
background: #000;
90+
color: #fefefe;
91+
}
92+
93+
@media (max-width: 992px) {
94+
.img {
95+
margin-bottom: 0;
96+
}
97+
98+
.main {
99+
display: flex;
100+
flex-direction: column;
101+
justify-content: space-around;
102+
gap: 2rem;
103+
height: 100vh;
104+
}
105+
106+
107+
}

0 commit comments

Comments
 (0)