-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTUT20.html
85 lines (74 loc) · 2.92 KB
/
TUT20.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
<!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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Babylonica&display=swap" rel="stylesheet">
<title>Styling link and buttons</title>
<style>
.container{
border: 2px solid red;
background-color: burlywood;
padding: 9px;
width: 556px;
margin: auto;
}
.button{
border: none;
background-color: blue;
padding: 6px;
border: none;
cursor: pointer;
font-size: 18px;
text-align: center;
border-radius: 5px;
}
a{
text-decoration: none;
color: black;
background-color: cyan;
}
a:hover{
color: chartreuse;
background-color: chartreuse;
}
a:active{
background-color: rgb(77, 244, 11);
}
button:hover{
color: teal;
background-color: blueviolet;
}
* {
font-family: src="https://fonts.googleapis.com/css2?family=Babylonica&display=swap";
font-weight: bold;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container"> <h3>
This is my heading
</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad neque repellendus soluta reprehenderit, dolor vel
dicta nihil esse nesciunt ea? Voluptatibus repellat nisi ipsam non iure ab quam atque accusamus!
Voluptatibus, quidem recusandae maiores voluptates cupiditate eius molestiae impedit nam error sit odio cum
eveniet est animi expedita aut iste culpa voluptate consequuntur distinctio placeat corrupti voluptas
voluptatem! Molestiae, consectetur.
Voluptas hic exercitationem ducimus provident laboriosam in? Atque enim rem quam magnam, nisi nobis fuga
quisquam rerum. Quam reiciendis id quasi voluptate vel quidem dolorem laborum corporis. Asperiores, soluta
illum.
Ratione aut rem dolores repellendus quasi dignissimos expedita optio rerum facilis quam obcaecati quod
architecto ut tenetur voluptatem unde aperiam at, ab provident minima? Maxime quas et quod veritatis
consequatur?
Mollitia, neque corporis et suscipit est veniam, id voluptatum molestias vel repellat voluptatem necessitatibus
ipsam, esse possimus. Maxime, iure assumenda veniam deleniti velit dignissimos? Ex, est. Dicta autem minima
molestias!</p>
<a href="www.google.com" class="button">Read more</a>
<button class="button">Contact us</button>
</div>
</body>
</html>