This content originally appeared on DEV Community and was authored by CoderZ90
Only for educational purposes
As you know there are a lot of people rickrolling each other. Hahaha using the youtube link but we developers use the power of coding to rickroll
So in this video we are gonna create a rickroll website using html, css and javascript
Expected in the website :- When the user goes to the website it shows the loader for 4-5 seconds [loader is the best option to make the person stay on the website] and then goes to the youtube rickroll page and Boom! rickrolled
Here is the video on how to create a rickroll website using Html, css and javascript - https://www.youtube.com/watch?v=isTfYeKUL_c&t=118s
Written Tutorial -
HTML File -
here we basically create one div with the class of loader
and then we are just gonna style it. Create a css file and link it to your html file or you can use internal css [thats nothing but using css in the html file] too
<!-- Only for educational purposes 😊 -->
<!-- lets make loading so that user stays on the website -->
<div class="loader"></div>
CSS File -
here we puts a little dark white background to our website and then center our loader to the center and then we make our loader in circle shape after doing this much stuff we use border-top-color: transparent to make our loader top transparent color (it looks cool). and then we use keyframes to animate it and make it move in circle at one position :D and our CSS is done Noice!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f1f1f1;
}
.loader {
border: 10px solid #222;
width: 80px;
height: 80px;
/* bringing to middle */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border-top-color: transparent;
/* addding spin */
animation: spin 0.7s linear infinite;
}
/* i am stoping the animation for now */
@keyframes spin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
Javascript File:-
Now the main part, in here we are setting a time of 4 seconds in our webpage and when the time is completed/over then we will redirect our website to the youtube rickroll video and thats all we need to do.
The main code which does the work is this - window.location.href="https://youtu.be/dQw4w9WgXcQ"; this command redirects it to the youtube link we put there and Boom!
<script>
// also we need to make the O small
setTimeout(() => {
window.location.href="https://youtu.be/dQw4w9WgXcQ";
}, 4000);
// 4000 = 4 seconds ( 1000 = 1 second)
</script>
I hope you like this blog and had fun making this.
Also dont forget to subscribe 🙏💖🙏 - https://youtube.com/codingfire?sub_confirmation=1
Stay safe and be happy. 😊🙏
This content originally appeared on DEV Community and was authored by CoderZ90
CoderZ90 | Sciencx (2021-11-30T03:40:13+00:00) Youtube Video – On How to create a rickroll website. Retrieved from https://www.scien.cx/2021/11/30/youtube-video-on-how-to-create-a-rickroll-website/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.