Styling List and Buttons
<!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 rgb(19, 17, 17);
background-color: rgb(165 143 157);
padding: 34px;
margin: 34px auto;
width: 666px;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: rgb(192, 11, 11);
background-color: blue;
}
a:visited{
background-color: rgb(255, 196, 0);
}
a:active{
background-color: #fff;
}
.btn{
background-color: seagreen;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
padding: 6px;
border: none;
cursor: pointer;
font-size: 13px;
border-radius: 4px;
}
.btn:hover{
color: blue;
background-color: blue;
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. Ad cumque iste deleniti vero itaque autem soluta laboriosam incidunt. Temporibus ducimus praesentium enim hic iure animi quae commodi maiores, tempora asperiores modi nobis. Veritatis, nulla.</p>
<a href="https://yahoo.com" class="btn">Read more</a>
<button class="btn">Contact us</button>
</div>
</body>
</html>
Comments
Post a Comment