forked from saniyarahmani786/Projects
-
Notifications
You must be signed in to change notification settings - Fork 1
/
tut22.html
55 lines (55 loc) · 1.76 KB
/
tut22.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
<!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 slectors and more designing</title>
<style>
.container{
border: 2px solid lightpink;
background-color: purple;
padding: 34px;
margin: 34px auto;
width: 666px;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: rgb(40, 10, 172);
background-color: blanchedalmond;
}
a:visited{
background-color: rgb(161, 111, 226);
}
a:active{
background-color: chocolate;
}
.btn{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
background-color: yellow;
padding: 6px;
border: none;
cursor: pointer;
font-size: 13px;
border-radius: 4px;
}
.btn:hover{
color: cyan;
background-color: darkorchid;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container" id="con1">
<h3>This is my heading</h3>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam eligendi at sapiente dolore, nam, amet minima deleniti culpa dolores tenetur fugiat est nemo? Nisi sunt voluptas dicta, assumenda labore sequi cum asperiores consequatur magnam. </p>
<a href="https://www.google.com" class="btn">Read more</a>
<button class="btn">Contact us</button>
</div>
</body>
</html>