<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pseudo selector & more disining</title>
<style>
.container {
border: 2px solid red;
background-color: #000000;
padding: 34px;
margin: 34px auto;
width: 666px;
font-size: 19px;
font-style: normal;
color: white;
}
a {
text-decoration: none;
}
a:hover {
background-color: hotpink;
}
/*a:visited{ jab aap visited lagaoge to iska matlab ye hai ki apne jo v iska background clr rkha hoga,or koi v banda uspe click kr ke koi website visit kr le to usko wo clor hmsesa chg dikhega kyuki hmne waha pe visite lga rkha hain.
background-color: crimson; */
a:active {
background-color: blue;
}
.btn {
background-color: red;
color: yellow;
padding: 6px;
border: none;
cursor: pointer;
font-size: 15px;
border-radius: 4px;
}
.btn:hover {
/*text shows some motion with color*/
color: white;
/* background-color: green; */
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container" id="cont1">
<h3>this is my heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit porro dignissimos nostrum, ab fuga
repudiandae sit beatae minus possimus aperiam voluptate modi temporibus vitae tempore explicabo architecto
consectetur et tempora itaque quae omnis dolore.</p>
<a href="" class="btn">Read More</a>
<button class="btn">contact us </button>
</div>
</body>
</html>
