Create Responsive Simple Footer Using HTML And CSS

Some Text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

Click here!

Its features:

  • You can change the model color via CSS if you want.

  • You can add a link to the name of click here button.

  • You can use the buttons any one side if you want.

Try to create like yourself by following the codes below :


Step 1) Add to head :
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ font-awesome/4.7.0/css/font-awesome.min.css">
Step 2) Add to html :
<h2>Create Responsive Simple Footer With HTML And CSS</h2> <footer> <div class="b"> <h2>Some Text</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the <a href="#abcd" target="_top"><h1 class="glow">Click here!</h1></a></p> </div> </footer>
Step 3) Add to css :
footer{ width:100%; height:220px; background-color:#a4c400; } div.b { text-align: center; font-size:22px; margin:5px; color:white; } .glow { font-size: 23px; color: yellow; text-align: center; -webkit-animation: glow 1s ease-in-out infinite alternate; -moz-animation: glow 1s ease-in-out infinite alternate; animation: glow 1s ease-in-out infinite alternate; } @-webkit-keyframes glow { from { text-shadow: 0 0 10px yellow, 0 0 20px yellow, 0 0 30px red, 0 0 40px red, 0 0 50px red, 0 0 60px red, 0 0 70px red; } to { text-shadow: 0 0 20px yellow, 0 0 30px green, 0 0 40px green, 0 0 50px green, 0 0 60px green, 0 0 70px green, 0 0 80px green; } }



Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.