-
Notifications
You must be signed in to change notification settings - Fork 0
/
25_HTML_5_Details_Summary_Element.html
48 lines (44 loc) · 2.03 KB
/
25_HTML_5_Details_Summary_Element.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Details & Summary</title>
<style>
body{
font-family: Arial, sans-serif;
}
details{
background-color: orange;
padding: 10px;
border-radius: 10px;
margin: 5px;
}
div{
background-color: orangered;
color: white;
padding: 10px;
border-radius: 10px;
}
summary{
outline: none;
}
</style>
</head>
<body>
<!-- HTML Details & Summary Elements -->
<details>
<summary>USA</summary>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolor harum hic omnis porro quo tempora vero? Beatae deserunt dicta dolores, eius excepturi maxime mollitia nulla officia perferendis praesentium provident sed tempora, voluptatem? Cumque dolor, eos esse quod recusandae veritatis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aliquam amet consectetur cupiditate, dicta dolore ea eos est ex excepturi exercitationem expedita facilis incidunt ipsa laudantium molestias nam numquam placeat quae quasi quibusdam quis repellendus sunt totam! Quo, ut!</p>
</div>
</details>
<details>
<summary>INDIA</summary>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolor harum hic omnis porro quo tempora vero? Beatae deserunt dicta dolores, eius excepturi maxime mollitia nulla officia perferendis praesentium provident sed tempora, voluptatem? Cumque dolor, eos esse quod recusandae veritatis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aliquam amet consectetur cupiditate, dicta dolore ea eos est ex excepturi exercitationem expedita facilis incidunt ipsa laudantium molestias nam numquam placeat quae quasi quibusdam quis repellendus sunt totam! Quo, ut!</p>
</div>
</details>
</body>
</html>