Showing posts with label blogger. Show all posts
Responsive & Animated Independence Day Widget

Related Articles:

  

  



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.
Subscribe to: Posts (Atom)