<!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 & more designing</title>
<style>
.container{
border: 2px solid red;
background-color: rgb(223, 245, 201);
padding: 34px;
margin: 34px auto;
width: 666px;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: rgb(77, 9, 9);
background-color: white;
}
a;:visited{
color: yellow;
}
a;:active{
background-color: blue;
}
.btn{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
background-color: crimson;
padding: 6px;
border: none;
cursor: pointer;
font-size: 13px;
border-radius: 4px;
}
.btn:hover {
color: darkgoldenrod;
background-color: rgb(223, 245, 201);
}
</style>
</head>
<body>
<div class="container" id="cont1">
<h3>This is my Heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente facilis maxime, nisi provident consequuntur cupiditate eveniet numquam officia itaque corrupti totam ipsum quo quaerat dolores quasi. Dolor fugit facilis blanditiis! Fugit qui molestiae amet?</p> <a href="http://google.com" class="btn">Read more</a>
<button class="btn">Contact us</button>
</div>
</body>
</html>
No comments:
Post a Comment