Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

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)

AltStyle によって変換されたページ (->オリジナル) /