html anchor tag styling
html anchor tag styling
Style the anchor tag as below image given
<!DOCTYPE html>
<html>
<head>
<title>html anchor tag styling</title>
<style type="text/css">
body{
margin-top: 20px;
margin-left: 120px;
}
.abc{
list-style-type: none;
}
.abc1{
border: 1px solid black;
text-decoration: none;
color: black;
padding: 10px 12px;
}
.ab2{
width: 875px;
height: 90px;
margin-left: -10px;
padding-top: 20px;
padding-left: 10px;
background-color: rgb(222,222,222);
}
.abc1:hover{
border: 1px solid blue;
color: blue;
}
.m1{
width: 100%px;
margin-top: -28px;
list-style-type: none;
padding: 0;
overflow: hidden;
}
.m2{
float: left;
}
.m3{
display: inline-block;
width: 120px;
text-align-last: center;
background-color: rgb(11,0,0);
color: white;
text-align: left;
padding: 20px 12px;
text-decoration: none;
}
.m3:hover{
background-color: rgb(248,250,171);
color: black;
}
.m4{
display: inline-block;
width: 120px;
text-align-last: center;
width: 120px;
text-align-last: center;
background-color: rgb(255,140,0);
color: white;
text-align: left;
padding: 20px 12px;
text-decoration: none;
}
.m4:hover{
background-color: rgb(192,235,186);
color: black;
}
.m5{
display: inline-block;
width: 120px;
text-align-last: center;
background-color: rgb(11,0,0);
color: white;
text-align: left;
padding: 20px 12px;
text-decoration: none;
}
.m5:hover{
background-color: rgb(216,194,226);
color: black;
}
.m6{
display: inline-block;
width: 120px;
text-align-last: center;
background-color: rgb(255,140,0);
color: white;
text-align: left;
padding: 20px 12px;
text-decoration: none;
}
.m6:hover{
background-color: rgb(226,203,194);
color: black;
}
.m7{
display: inline-block;
width: 120px;
text-align-last: center;
background-color: rgb(11,0,0);
color: white;
text-align: left;
padding: 20px 12px;
text-decoration: none;
}
.m7:hover{
background-color: rgb(189,247,174);
color: black;
}
.m8{
display: inline-block;
width: 120px;
text-align-last: center;
background-color: rgb(255,140,0);
color: white;
text-align: left;
padding: 20px 12px;
text-decoration: none;
}
.m8:hover{
background-color: rgb(255,170,166);
color: black;
}
/*portion 2 */
.ab{
margin-top: 50px;
width: 430px;
padding-top: 30px;
padding-bottom: 30px;
background-color: rgb(247,247,247);
}
.abc3{
list-style-type: none;
}
.m9{
display: inline-block;
width: 370px;
margin-bottom: 5px;
border-radius: 20px;
text-align-last: left;
background-color: rgb(247,247,247);
border: 2px solid rgb(146,215,236);
box-shadow: 1px 2px 0px rgb(90,198,230);
color: black;
text-align: left;
padding: 10px 12px;
text-decoration: none;
}
.m9:hover{
background-color: rgb(194,226,214);
color: red;
}
.m10{
display: inline-block;
width: 370px;
margin-bottom: 5px;
border-radius: 20px;
text-align-last: left;
border: 2px solid rgb(228,146,146);
box-shadow: 1px 2px 0px rgb(210,55,55);
color: black;
background-color: rgb(235,185,185);
text-align: left;
padding: 10px 12px;
text-decoration: none;
}
.m10:hover{
background-color: rgb(233,214,188);
color: red;
}
.m11{
display: inline-block;
width: 370px;
margin-bottom: 5px;
border-radius: 20px;
text-align-last: left;
border: 2px solid rgb(138,249,249);
box-shadow: 1px 2px 0px rgb(25,250,250);
background-color: rgb(185,248,248);
color: black;
text-align: left;
padding: 10px 12px;
text-decoration: none;
}
.m11:hover{
background-color: rgb(183,250,171);
color: blue;
}
.m12{
display: inline-block;
width: 370px;
margin-bottom: 5px;
border-radius: 20px;
text-align-last: left;
border: 2px solid rgb(147,212,130);
box-shadow: 1px 2px 0px rgb(66,160,65);
background-color: rgb(210,249,185);
color: black;
text-align: left;
padding: 10px 12px;
text-decoration: none;
}
.m12:hover{
background-color: rgb(206,208,215);
color: blue;
}
.m13{
display: inline-block;
width: 370px;
margin-bottom: 5px;
border-radius: 20px;
text-align-last: left;
border: 2px solid rgb(228,228,145);
box-shadow: 1px 2px 0px rgb(208,208,41);
background-color: rgb(235,235,185);
color: black;
text-align: left;
padding: 10px 12px;
text-decoration: none;
}
.m13:hover{
background-color: rgb(253,176,168);
color: blue;
}
.m14{
display: inline-block;
width: 370px;
margin-bottom: 5px;
border-radius: 20px;
text-align-last: left;
border: 2px solid rgb(134,153,251);
box-shadow: 1px 2px 0px rgb(84,85,152);
background-color: rgb(185,210,249);
color: black;
text-align: left;
padding: 10px 12px;
text-decoration: none;
}
.m14:hover{
background-color: rgb(234,181,240);
color: blue;
}
.m15{
display: inline-block;
width: 370px;
margin-bottom: 5px;
border-radius: 20px;
text-align-last: left;
border: 2px solid rgb(251,174,125);
box-shadow: 1px 2px 0px rgb(253,138,63);
background-color: rgb(249,210,185);
color: black;
text-align: left;
padding: 10px 12px;
text-decoration: none;
}
.m15:hover{
background-color: rgb(179,242,200);
color: red;
}
.m16{
display: inline-block;
width: 370px;
margin-bottom: 5px;
border-radius: 20px;
text-align-last: left;
border: 2px solid rgb(227,143,227);
box-shadow: 1px 2px 0px rgb(205,27,205);
background-color: rgb(235,185,235);
color: black;
text-align: left;
padding: 10px 12px;
text-decoration: none;
}
.m16:hover{
background-color: rgb(196,253,168);
color: blue;
}
</style>
</head>
<body>
<div class="ab2">
<li class="abc"><a class="abc1" href="">Read More <small>></small></a></li>
</div>
<ul class="m1">
<li class="m2"><a class="m3" href="">Cycling</a></li>
<li class="m2"><a class="m4" href="">Swimming</a></li>
<li class="m2"><a class="m5" href="">Track Training</a></li>
<li class="m2"><a class="m6" href="">Golf</a></li>
<li class="m2"><a class="m7" href="">Tennis</a></li>
<li class="m2"><a class="m8" href="">Weight Training</a></li>
</ul>
<ul class="ab">
<li class="abc3"><a class="m9" href="">✖ This is a link without a link</a></li>
<li class="abc3"><a class="m10" href="">✖ This is a link without a link with target blank</a></li>
<li class="abc3"><a class="m11" href="">✓ This is a link a link with target blank and noopener</a></li>
<li class="abc3"><a class="m12" href="">✓ This is a default link</a></li>
<li class="abc3"><a class="m13" href="">✓ This is an internal link</a></li>
<li class="abc3"><a class="m14" href="">✓ This is external</a></li>
<li class="abc3"><a class="m15" href="">✖ External link without noopener with target blank.</a></li>
<li class="abc3"><a class="m16" href="">✓ External in new window like it should be</a></li>
</ul>
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
No comments:
Post a Comment