Skip to content

Commit 15b512f

Browse files
author
ranawebpro
committed
Initial commit
0 parents  commit 15b512f

File tree

289 files changed

+11808
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

289 files changed

+11808
-0
lines changed

‎Accordion 1/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<div class="accordion">
11+
<div class="accordion-item">
12+
<div class="accordion-header" onclick="toggleAccordion(1)">Section 1</div>
13+
<div class="accordion-content">
14+
<p>Content for section 1 goes here.</p>
15+
</div>
16+
</div>
17+
<div class="accordion-item">
18+
<div class="accordion-header" onclick="toggleAccordion(2)">Section 2</div>
19+
<div class="accordion-content">
20+
<p>Content for section 2 goes here.</p>
21+
</div>
22+
</div>
23+
<div class="accordion-item">
24+
<div class="accordion-header" onclick="toggleAccordion(3)">Section 3</div>
25+
<div class="accordion-content">
26+
<p>Content for section 3 goes here.</p>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎Accordion 1/script.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
function toggleAccordion(index) {
2+
var content = document.querySelectorAll('.accordion-content')[index - 1];
3+
content.style.display = (content.style.display === 'block') ? 'none' : 'block';
4+
}

‎Accordion 1/style.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.accordion {
2+
display: flex;
3+
flex-direction: column;
4+
max-width: 300px;
5+
margin: 20px;
6+
}
7+
8+
.accordion-item {
9+
border: 1px solid #ddd;
10+
margin-bottom: 5px;
11+
}
12+
13+
.accordion-header {
14+
background-color: #f1f1f1;
15+
padding: 10px;
16+
cursor: pointer;
17+
}
18+
19+
.accordion-content {
20+
display: none;
21+
padding: 10px;
22+
}

‎Accordion 2/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<div class="accordion">
11+
<div class="accordion-item">
12+
<div class="accordion-header" onclick="toggleAccordion(1)">What is my name?</div>
13+
<div class="accordion-content">
14+
<p>My name is Rayhan Rana</p>
15+
</div>
16+
</div>
17+
<div class="accordion-item">
18+
<div class="accordion-header" onclick="toggleAccordion(2)">What's your profession?</div>
19+
<div class="accordion-content">
20+
<p>I'm a web developer</p>
21+
</div>
22+
</div>
23+
<div class="accordion-item">
24+
<div class="accordion-header" onclick="toggleAccordion(3)">Click me too</div>
25+
<div class="accordion-content">
26+
<p>Thank you. Have a great day:)</p>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎Accordion 2/script.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
function toggleAccordion(index) {
2+
var content = document.querySelectorAll('.accordion-content')[index - 1];
3+
content.classList.toggle('show');
4+
}

‎Accordion 2/style.css

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
body {
2+
font-family: 'Arial', sans-serif;
3+
background-color: #f4f4f4;
4+
margin: 0;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
height: 100vh;
9+
}
10+
11+
.accordion {
12+
width: 300px;
13+
border-radius: 8px;
14+
overflow: hidden;
15+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
16+
}
17+
18+
.accordion-item {
19+
border-bottom: 1px solid #ccc;
20+
}
21+
22+
.accordion-header {
23+
background-color: #3498db;
24+
color: #fff;
25+
padding: 15px;
26+
cursor: pointer;
27+
transition: background-color 0.3s;
28+
}
29+
30+
.accordion-header:hover {
31+
background-color: #297fb8;
32+
}
33+
34+
.accordion-content {
35+
padding: 15px;
36+
display: none;
37+
background-color: #fff;
38+
}
39+
40+
.accordion-content p {
41+
margin: 0;
42+
}
43+
44+
.accordion-content.show {
45+
display: block;
46+
}

‎Accordion 3/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+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" type="text/css" href="styles.css">
7+
</head>
8+
<body>
9+
10+
<div class="accordion">
11+
<div class="accordion-item">
12+
<div class="accordion-header" onclick="toggleAccordion(1)">
13+
Section 1
14+
<div class="accordion-icon">&#9660;</div>
15+
</div>
16+
<div class="accordion-content">
17+
<p>Content for section 1 goes here.</p>
18+
</div>
19+
</div>
20+
<div class="accordion-item">
21+
<div class="accordion-header" onclick="toggleAccordion(2)">
22+
Section 2
23+
<div class="accordion-icon">&#9660;</div>
24+
</div>
25+
<div class="accordion-content">
26+
<p>Content for section 2 goes here.</p>
27+
</div>
28+
</div>
29+
<div class="accordion-item">
30+
<div class="accordion-header" onclick="toggleAccordion(3)">
31+
Section 3
32+
<div class="accordion-icon">&#9660;</div>
33+
</div>
34+
<div class="accordion-content">
35+
<p>Content for section 3 goes here.</p>
36+
</div>
37+
</div>
38+
39+
<script src="script.js"></script>
40+
</div>
41+
42+
</body>
43+
</html>

‎Accordion 3/script.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
function toggleAccordion(index) {
2+
var item = document.querySelectorAll('.accordion-item')[index - 1];
3+
item.classList.toggle('active');
4+
var content = item.querySelector('.accordion-content');
5+
content.classList.toggle('show');
6+
}

‎Accordion 3/styles.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
body {
2+
font-family: 'Arial', sans-serif;
3+
background-color: #282c34;
4+
color: #fff;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
height: 100vh;
9+
margin: 0;
10+
}
11+
12+
.accordion {
13+
width: 300px;
14+
border-radius: 8px;
15+
overflow: hidden;
16+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
17+
}
18+
19+
.accordion-item {
20+
border-bottom: 1px solid #505a6b;
21+
}
22+
23+
.accordion-header {
24+
background-color: #505a6b;
25+
padding: 15px;
26+
cursor: pointer;
27+
display: flex;
28+
justify-content: space-between;
29+
align-items: center;
30+
transition: background-color 0.3s;
31+
}
32+
33+
.accordion-header:hover {
34+
background-color: #637187;
35+
}
36+
37+
.accordion-content {
38+
padding: 15px;
39+
display: none;
40+
background-color: #39424e;
41+
color: #fff;
42+
}
43+
44+
.accordion-content p {
45+
margin: 0;
46+
}
47+
48+
.accordion-content.show {
49+
display: block;
50+
}
51+
52+
.accordion-icon {
53+
font-size: 20px;
54+
transform: rotate(0deg);
55+
transition: transform 0.3s;
56+
}
57+
58+
.accordion-item.active .accordion-icon {
59+
transform: rotate(180deg);
60+
}

‎Accordion 4/index.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Accordion</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<ul id="accordion">
11+
<li>
12+
<label for="first">What is HTML? <span>&#x3e;</span></label>
13+
<input type="radio" name="accordion" id="first" checked />
14+
<div class="content">
15+
<p>
16+
Standard markup language for web documents.
17+
Describes the structure and content of a web page.
18+
Utilized by web browsers to render pages.
19+
</p>
20+
</div>
21+
</li>
22+
<li>
23+
<label for="second">What is CSS? <span>&#x3e;</span></label>
24+
<input type="radio" name="accordion" id="second" />
25+
<div class="content">
26+
<p>
27+
Stylesheet language for web documents.
28+
Defines the presentation and layout of HTML elements.
29+
Enhances the visual appearance of web pages.
30+
</p>
31+
</div>
32+
</li>
33+
<li>
34+
<label for="third">What is JavaScript? <span>&#x3e;</span></label>
35+
<input type="radio" name="accordion" id="third" />
36+
<div class="content">
37+
<p>
38+
Programming language for web development.
39+
Enables dynamic and interactive web content.
40+
Executed in the browser to manipulate page elements.
41+
</p>
42+
</div>
43+
</li>
44+
<li>
45+
<label for="fourth">What is React? <span>&#x3e;</span></label>
46+
<input type="radio" name="accordion" id="fourth" />
47+
<div class="content">
48+
<p>
49+
JavaScript library for building user interfaces.
50+
Developed by Facebook.
51+
Focuses on building reusable UI components.
52+
</p>
53+
</div>
54+
</li>
55+
<li>
56+
<label for="fifth">What is Node.js? <span>&#x3e;</span></label>
57+
<input type="radio" name="accordion" id="fifth" />
58+
<div class="content">
59+
<p>
60+
JavaScript runtime built on Chrome's V8 engine.
61+
Allows server-side execution of JavaScript.
62+
Facilitates building scalable network applications.
63+
</p>
64+
</div>
65+
</li>
66+
</ul>
67+
</body>
68+
</html>

0 commit comments

Comments
 (0)