 |
| Responsive & Animated Independence Day Widget |
Related Articles:
Fully Responsive Login Form V8.0 based on Bootstrap
Animated Circular Menu
Floating Social Menu V1.0
Here's the code snippet:
<body><a href="http://roundcubee.blogspot.com"><div class="grass" style="position:fixed;bottom:0px;left:0px;width:100%;height:12%;background-repeat:no-repeat;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh63B8gy3AEN_sQpqVECvjXMJwFKoHF8QRb41KiNwnJNtzJJIasr6suFya2_AUGgLhNcZn_kF8Mx-whQTrEBq5Kri69Ld34BM6RHouAzMBzukKnziPudQDEqRHXLvndd5EbUzH5pbXiGlE/s1600/grass_PNG4937.png);background-size:100% 100%;z-index:10000000000">
<div id="flag"></div>
<div id="text"><h1 style="color:white;">Happy Independence Day</h1></div>
</div></a>
</body>
<style>
body{
background-color: #c7c7c7;
}
#flag{
position: absolute;
bottom:0%;
height:0%;
left:10%;
width:10%;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8q93NtzX2z64ESLG2vuHHisszoOnN7qsJ-3x6_K_MZWKmK2jD2oXyKMqGquXejesRMh9sbid1Stn5QEaykyMHOQMZfVhDQipzvZE1O09WWOXcN89oSjkaWeRBfVDC9jp63nZKMtc0N1Y/s1600/flag.png);
background-size: 100% 100%;
}
#text{
position:absolute;
bottom:80%;
height:100%;
right:1%;
width:70%;
text-align:center;
font-size:0px;
}
</style>
<style>
.grass:hover #flag{
height:170%;
-webkit-transition: all 0.5s ease;
-moz-transition : all 0.5s ease 0s;
}
.grass:hover #text{
font-size:22px;
-webkit-transition: all 1s ease;
-moz-transition : all 1s ease 0s;
text-shadow:1px 1px 33px green;
bottom:50%;
}
@media only screen and (max-width:784px)
{
.grass:hover #text{
font-size:20px;
}
}
@media only screen and (max-width:730px)
{
.grass:hover #text{
font-size:18px;
}
#flag{
left:2%;
width:15%;
}
}
@media only screen and (max-width:644px)
{
.grass:hover #text{
font-size:15px;
}
#flag{
left:2%;
width:18%;
}
}
@media only screen and (max-width:543px)
{
.grass:hover #text{
font-size:11px;
}
#flag{
left:2%;
width:20%;
}
}
@media only screen and (max-width:402px)
{
#text{
display:none;
}
#flag{
left:30%;
width:40%;
}
.grass:hover #flag{
height:200%;
}
}
</style>
For your website add this code just before </body> tag.
For your blog go to Layout of your template, then add a widget in the footer portion after that select the HTML/JAVASCRIPT option and paste this code there and you are done.
If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
If you like our work please don't remove the hyperlink to our Facebook page.
Trying to find the most perfect beach holiday along side Mediterranean Sea? Then consider a vacation in La Manga. 4anime
ReplyDelete