Make a Working RickRoll Website with HTML & CSS

 

Hey friends, today I will show how to make a rick roll link/website using HTML & CSS only! This is a fun project for your web dev skills and also to trick your friends.

You might wonder what is a rick roll? Rick roll is a trend which started few years back where if someone opens the NEVER GONNA GIVE YOU UP song, it means you are rick rolled or pranked. It's growing as a very very famous meme. To learn more about it, click here.

Now, let's see the code for this simple project with no JavaScript!

<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<title>5 Ways to Become a better Coder</title>
 <meta name="description" content="In this article, we will walk through 5 tips that made me a better coder and will help you too in your coding journey">
<style>
body{background:#0f0936}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #1dc47f;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  -  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
    }
@keyframes spin {
  0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }

.wrapper{
   display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
}
</style>

 <div class="wrapper"> <div id="loader" class="loader"></div></div>
 <meta http-equiv="refresh" content="2; URL=https://www.youtube.com/watch?v=dQw4w9WgXcQ" />

And that's all for this tutorial! Thanks for reading and I hope this was useful and entertaining. Do check out my post on how to make a CSS Loader at here 

Till the next one,goodbye!