-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (131 loc) · 4.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- LINK CSS ================== -->
<link rel="stylesheet" href="/assets/css/styles.css" />
<!-- BOXICONS ====================== -->
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>
<title>Accordion UI Design</title>
</head>
<body>
<section class="section"></section>
<section class="accordion container">
<div class="accordion-container">
<div class="hero">
<h2 class="hero-title">
Responsive Accordion Design With Video, Button & Smooth Transition
</h2>
<p class="hero-description">
On today's episode, we are going to see the best way to create
accordion designs with videos and buttons in any of the question
tabs, using html, css & javascript. Link to the source code will be
in the description. You can grab it if lazy 😎 But I highly
recommend coding along. 💻
</p>
</div>
<!-- Tab 1 ======================= -->
<div class="accordion-item">
<header class="accordion-question">
<i class="bx bx-plus question-icon"></i>
<h3 class="question">Is there a video in this accordion tab?</h3>
</header>
<div class="content">
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/bbn32aT7yWE"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<p class="answer">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio
perferendis reprehenderit nemo est at vero placeat sunt, amet fuga
corrupti!
</p>
</div>
</div>
<!-- Tab 2 ======================= -->
<div class="accordion-item">
<header class="accordion-question">
<i class="bx bx-plus question-icon"></i>
<h3 class="question">
What if I want to have a button in the tab?
</h3>
</header>
<div class="content">
<p class="answer">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio
perferendis reprehenderit nemo est at vero placeat sunt, amet fuga
corrupti!
</p>
<a href="#" class="btn">Learn more</a>
</div>
</div>
<!-- Tab 3 ======================= -->
<div class="accordion-item">
<header class="accordion-question">
<i class="bx bx-plus question-icon"></i>
<h3 class="question">
Is it possible to have both video and button in any of the tabs?
</h3>
</header>
<div class="content">
<div class="video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/bbn32aT7yWE"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<p class="answer">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio
perferendis reprehenderit nemo est at vero placeat sunt, amet fuga
corrupti!
</p>
<a href="#" class="btn">Learn more</a>
</div>
</div>
<!-- Tab 4 ======================= -->
<div class="accordion-item">
<header class="accordion-question">
<i class="bx bx-plus question-icon"></i>
<h3 class="question">
Can I get the source code to this beautiful accordion design?
</h3>
</header>
<div class="content">
<p class="answer">
Yes, you can get the source file by clicking on this button which
will take you to the GitHub Profile, or scroll down to the
description section of this video to see the direct GitHub Repo
link where you can download the file directly!
</p>
<a
href="https://github.com/JustPerfectDesigns"
target="blank"
class="btn"
>Learn more</a
>
</div>
</div>
</div>
</section>
<section class="section"></section>
<!-- LINK JAVASCRIPT ====================== -->
<script src="/assets/js/main.js"></script>
</body>
</html>