-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
64 lines (62 loc) · 3.24 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
<!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" />
<title>Accordion Tabs</title>
<link rel="stylesheet" href="tabs.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="tab-container full-height">
<input type="radio" id="tab-1" name="tabs" class="tab-actor" checked />
<label for="tab-1" class="tab-button">Lorem ipsum</label>
<section class="tab-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor
ante augue. Mauris euismod feugiat sapien, in cursus sapien laoreet a.
In elementum, felis id pellentesque pulvinar, lacus massa dictum
justo, in molestie purus magna ac arcu. Etiam orci tellus, facilisis
et tristique vitae, finibus eget odio. Nulla non libero cursus, semper
nisi in, rutrum urna. Etiam ultrices leo vel sagittis malesuada. Cras
sed bibendum lorem.
</div>
</section>
<input type="radio" id="tab-2" name="tabs" class="tab-actor" />
<label for="tab-2" class="tab-button">Donec consequat</label>
<section class="tab-content">
<div class="content">
Donec consequat elit sed eros aliquet egestas. Ut nisl justo, commodo
in condimentum sed, vulputate eget orci. Pellentesque dolor elit,
varius in nulla at, scelerisque bibendum massa. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed
suscipit venenatis vehicula. Suspendisse ante nulla, hendrerit quis
sollicitudin eget, ultrices non ligula. Donec interdum tempus iaculis.
In posuere elit nec orci rutrum fermentum. Vivamus elementum magna sed
feugiat lacinia. Curabitur at pretium massa. Praesent finibus a tellus
nec facilisis. Nam lacus lacus, tincidunt a pharetra non, porttitor
congue leo. Nunc tincidunt sapien cursus sodales tincidunt. Integer
dignissim pellentesque sem, sed iaculis neque sollicitudin eu.
</div>
</section>
<input type="radio" id="tab-3" name="tabs" class="tab-actor" />
<label for="tab-3" class="tab-button">In porta feugiat</label>
<section class="tab-content">
<div class="content">
In porta feugiat metus elementum tincidunt. Sed mattis mattis nisi, at
accumsan nisi auctor eu. Duis quis aliquet ligula. Morbi pulvinar
tristique dignissim. Etiam lorem felis, egestas a suscipit molestie,
feugiat in diam. Sed commodo turpis vel hendrerit accumsan. Maecenas
mattis dolor eu eros tincidunt lobortis. Donec semper mauris dui, vel
placerat mi interdum et. Duis eleifend dolor non nibh laoreet
tristique. Proin eu nunc nec turpis euismod molestie. Donec fringilla
tortor at sem tincidunt, sed euismod erat bibendum. Curabitur id est
urna. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Etiam sollicitudin fringilla purus ac
placerat.
</div>
</section>
</div>
</body>
</html>