-
Notifications
You must be signed in to change notification settings - Fork 0
/
tut22-pseudo-S.html
70 lines (65 loc) · 1.98 KB
/
tut22-pseudo-S.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
<!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>pseudo selectors and more designing</title>
<style>
*{
box-sizing: border-box;
}
.para {
width: 800px;
background-color: rgb(148, 231, 241);
border: 20px groove rgb(73, 128, 231);
padding: 20px;
margin: 0px auto;
text-align: justify;
}
h3{
text-align: center;
}
.btn{
background-color: rgb(103, 238, 220);
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 18px;
font-weight: bold;
border:2px solid black;
border-radius: 5px;
color: rgb(0, 0, 0);
cursor: pointer;
}
a:hover{
background-color: rgb(160, 217, 224);
}
a:visited{
color: rgb(80, 79, 80);
}
a{
padding: 4px;
margin: 3px;
text-decoration: none;
}
.btn:hover{
background-color: rgb(160, 217, 224);
border: 4px solid black;
}
.btn:active{
color: gray;
}
</style>
</head>
<body>
<div class="para">
<h3>Pseudo Selectors and more designing</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate vitae ab perferendis libero corporis
voluptates aliquam porro nulla! Earum atque dolores quibusdam perspiciatis repudiandae amet esse ipsam
magni, expedita incidunt sint veniam nisi laboriosam praesentium. Ratione enim ad ab quam.
</p>
<a href="https://www.google.com" class="btn">Google</a>
<button class="btn">Contact Us</button>
</div>
</body>
</html>