Complete-Web-Development-BootCamp/tut4.htm at master · SakshamAgg1709/Complete-Web-Development-BootCamp · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo selectors and more designing</title>
    <style>
.container{
    border: 3px solid red;
    background-color: rgb(161, 221, 221);
    padding :34px;
    margin: 34px auto ;
    width: 666px;
}
a{
    text-decoration: none;
    color: black;
}
a:hover{

    background-color: rgb(221, 218, 34);
}

a:visited{
background-color: rgb(29, 228, 62);

}

a:active{
    color: darkblue;
    background-color: rgb(218, 27, 202);
}
.btn{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    background: rgb(140, 141, 223);
    padding: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
}

.btn:hover{
    background-color: #fff;
    border:2px solid green;
}
    </style>
</head>
<body>
    <div class="container" id="contl">
        <h3>This my heading</h3>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero eum officia nostrum. Veritatis beatae minus numquam soluta! Similique minus beatae molestias perspiciatis dolor dignissimos magnam debitis odit libero id porro accusamus omnis pariatur perferendis, voluptatum soluta deleniti repudiandae sit culpa!</p>
        <a href="https://facebook.com" class="btn">Read more</a>
        <button class="btn">Contact us</button>
    </div>
</body>
</html>