/* tag selectors and child selector*/
h1 > a{
color:rgb(104, 22, 227);
font-family:georgia;
}
html{
background-image: url(https://cdn.pixabay.com/photo/2014/04/05/11/20/spring-315242_1280.jpg);
background-repeat: no-repeat;
background-size: 3000px 3000px;
text-align:center;
}
img {
height:300px;
width:300px;
border-color:rgb(104, 22, 227);
width: 300px;
/* box model*/
border: 10px dotted white;
padding:15px;
margin: 10px;
float:left;
animation: blurFilter 5s forwards;
/* filter prop */
background-color: purple;
position: relative;
animation-name: example;
animation-duration: 4s;
}
/* animation */
@keyframes example {
0% {background-color:lightblue; left:0px; top:0px;}
25% {background-color:pink; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:lavender; left:0px; top:200px;}
100% {background-color:purple; left:0px; top:0px;}
}
@keyframes blurFilter {
from {
filter: blur(3px);
}
to {
filter: blur(0px);
filter: drop-shadow(8px 8px 10px gray);
}
}
a:hover {
background-color:rgb(104, 22, 227);
color:white;
border-width:10px;
margin:10px;
border:solid;
}
ol{
margin:15px;
}
/* class selctors */
.footer{
color:black;
font-family:Alex Brush;
background-color:Magenta;
/* display property */
display:inline;
}
}
.strong{
text-align:left;
}
.link{
border-color:Violet;
font-size:25px;
font-family:Alex Brush;
}
.navbar{
background-image: url(https://cdn.pixabay.com/photo/2015/12/15/11/08/bokeh-1094052_1280.jpg);
background-size:1000px 200px;
background-repeat:no-repeat;
}
.btn-md{
margin:5px;
}
/* id selectors and descendent*/
#ol, article{
color:purple;
font-family:Courier New;
text-align:left;
float:right;
border:5px solid rgb(104, 22, 227);
text-shadow: 2px 2px 5px rgb(104, 22, 227);
margin:10px;
box-shadow: 10px 10px 5px black;
}
#h1 {
text-shadow: 2px 2px 5px rgb(104, 22, 227);
color:black;
}
#p{
color:rgb(104, 22, 227);
font-family:georgia;
}