Web-Development-Learning/T_18.html at main · neerajborana/Web-Development-Learning · 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
<!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 designing</title>
    <style>
           .container{
               border: 2px solid red;
               background-color: rgb(153, 239, 245);
               padding: 34px;
               margin: 34px auto;
               width: 666px;
           }
           .btn{
               background: rgb(231, 96, 186);
               border: none;
               padding: 6px;
               cursor: pointer;
               font-size: 13px;
               border-radius: 4px;
           }
           a{
               text-decoration: none;
               color: black;
           }
           a:hover{
               color: rgb(78, 47, 47);
               background-color: yellowgreen;
           }
           a:visited{
                     color: blueviolet;
                     background-color: brown;
           }
           a:active{
               background-color: blanchedalmond;
           }
    </style>
</head>
<body>
    <div class="container" id="cont1">
        <h3>this is my heading</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus itaque sint ipsum facilis autem minima hic aperiam, harum rem cupiditate necessitatibus voluptatibus voluptatem quidem accusantium asperiores ut ad? Dolorem accusantium autem vel molestiae veniam?</p>
        <a href="https://google.com" class="btn">Read more</a>
        <button class="btn">Contact us</button>
    </div>

</body>
</html>