Create Timeline Design For Website Using HTML & CSS | Responsive Web Design
Вставка
- Опубліковано 11 вер 2024
- Learn how to create Timeline Design For Website Using HTML & CSS, Web Design With Animation Using HTML And CSS for beginners #cssanimation #webdesign #website
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video we will learn to make a timeline design for website using HTML and CSS. In this timeline design I have added some animation using CSS. When I scroll the website you can see the vertical line moves downwards. Then it display the each content one by one with animation.
This web design is responsive from small screen devices, you can see it looks good in small screen also. So we will make this Animated vertical timeline website design step by step using HTML and CSS
Download Image: drive.google.c...
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Images Credit:
www.pexels.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ UA-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
Thanks Buddy, Am currently working on a website project and i really appreciate you for this video - it has contributed to one of the website section
MUCH LOVE FROM KENYA🌎
Yes, I feel the same way! Very very helpful!
Thank you, this was really useful. Sadly neither me nor my friend know shit about coding so we gave up but you gave us a nice input and you seem like a very nice person. Greetings from beautiful Poland
no one knows shit about about coding at the beginning. it compounds. you just have to show up everyday.
*Just became a member because this is the best tutorial I have have ever seen* and actually came in useful on my site. Literally have this CSS on my site right now! I will absolutely purchase your course!
Love it. Next time can you split the screen so we can follow while you design the webpage? Thanks.
Hey You are the master.
Please make the css tutorial (Beginning to Advance Level).
Please.
Really cool vid, I was assigned to follow along to it for Coding class in school. Definitely recommend if you are into coding and writing, this was very fun.
Man, how did you learn to do all that stuff? I can't believe it turned out so amazing just with CSS, I really need to get better to be able to do all this for myself.
How long did it take you to learn CSS at that level?
And thanks for the video!
My dude, he just used the W3Schools tutorial, it's all there.
Please bro we want more Video, please don't stop.... Never Give Up, 🔥🔥
let poll = {
question: "Which team will win the IPL Trophy in 2025?",
answers: ["CSK", "RCB", "SRH", "RR"],
pollcount: 100,
answerweight: [60, 10, 20, 10], //sum = 100
selectanswer: -1
};
let polldom = {
question: document.querySelector(".poll .question"),
answers: document.querySelector(".poll .answers")
};
polldom.question.innerText = poll.question;
polldom.answers.innerHTML = poll.answers.map(function(answer, i) {
return `
${answer}
`;
}).join("");
function showresults() {
let answers = document.querySelectorAll(".poll .answers .answer");
for (let i = 0; i < answers.length; i++) {
let percentage = 0;
if (i === poll.selectanswer) {
percentage = Math.round(
(poll.answerweight[i] + 1) * 100 / (poll.pollcount + 1)
);
} else {
percentage = Math.round(
(poll.answerweight[i]) * 100 / (poll.pollcount + 1)
);
}
answers[i].querySelector(".percentage_bar").style.width = percentage + "%";
answers[i].querySelector(".percentage_value").innerText = percentage + "%";
}
}
function markanswer(i) {
poll.selectanswer = +i;
try {
document.querySelector(".poll .answers .answer.selected")
.classList.remove("selected");
} catch (msg) {}
document.querySelectorAll(".poll .answers .answer")[+i].classList.add("selected");
showresults();
}
Bro it's awesome plzz aise hi content late rahiye
Is this part of a series or a stand alone. I really enjoyed this tutorial
love your content brother...........keep posting
how to trigger the keyframes when we get to the timeline section? because they are triggered as soon as the page is loaded, so I don't have time to see the animation of the keyframes since my section is at the bottom of my page
Great
❤❤
Thank you for explaining and showing so easily
Thanks Boddy, very useful.
How does it work, is it whenever you refresh or when you scroll down to the current page? 🤔
looks cool))
Thank you so much sir ❤️
Super sir very nice 😊 and helpful 👍
Full stack developer not full stuck 🙃
I also found this video very helpful.
okay sir
You are the best my good man
Thumbs up bro 👍👋👋👋👋
too good
Sir make a video on parallax scrolling effect
please
A million of thank you so much.
thank you for very much !👍
Awesome
Thank you, great video.
Thanks again!
Perfect Video
timeline::after is not working for me. I could not able to add the vertical line. Can someone help here ?
I also have the same issue, did you solve your issue ?
Helped :)
awesome man
Good tutorial
I'm trying to add a circle to the top and bottom of the time line and I'm not sure where to add the HTML for that.
where is the source code?
have u found the source code?
Love you man
Thanks!
Thanks for supporting my channel
@@GreatStackDev no prob, It's a great channel but I can not follow any instructions on how to node.js integrate with VSC, are there any other instructions information's you recommend I look at?
👋👋👋👋👋👋
do you have a video revealling that on scrolling?
love you bro
Thank you sir
let poll = {
question: "Which team will win the IPL Trophy in 2025?",
answers: ["CSK", "RCB", "SRH", "RR"],
pollcount: 100,
answerweight: [60, 10, 20, 10], //sum = 100
selectanswer: -1
};
let polldom = {
question: document.querySelector(".poll .question"),
answers: document.querySelector(".poll .answers")
};
polldom.question.innerText = poll.question;
polldom.answers.innerHTML = poll.answers.map(function(answer, i) {
return `
${answer}
`;
}).join("");
function showresults() {
let answers = document.querySelectorAll(".poll .answers .answer");
for (let i = 0; i < answers.length; i++) {
let percentage = 0;
if (i === poll.selectanswer) {
percentage = Math.round(
(poll.answerweight[i] + 1) * 100 / (poll.pollcount + 1)
);
} else {
percentage = Math.round(
(poll.answerweight[i]) * 100 / (poll.pollcount + 1)
);
}
answers[i].querySelector(".percentage_bar").style.width = percentage + "%";
answers[i].querySelector(".percentage_value").innerText = percentage + "%";
}
}
function markanswer(i) {
poll.selectanswer = +i;
try {
document.querySelector(".poll .answers .answer.selected")
.classList.remove("selected");
} catch (msg) {}
document.querySelectorAll(".poll .answers .answer")[+i].classList.add("selected");
showresults();
}
First view
Why didn't you gave hero class to div as in every video your div as hero.....
Please create music websites by html css javascript
no grid?
🎉
Do you have the source code for this project to help with learning?
the animation of isn't working of the container part im only able to see the line going form top to bottom
When creating the line using timeline::after, nothing shows up on my screen? Everything else has worked perfectly, so thank you for that! Am I potentially doing something wrong? here is my code ..
.timeline::after{
content: '';
position: absolute;
width: 6px;
height: 100%;
background-color: white;
top: 0;
left: 50%;
margin-left: -3px;
z-index: -1;
}
I reckon its in ur content part, you put speech marks ". but i think you're meant to do either
Option A:
content : ' ';
or
Option B:
content: " ";
I'm pretty sure thats the solution, let me know if it works!
@@amazingango9103 I have the same Problem and i tried to change it to Speech mark but it didn't work
I think it has some thing to do with the z-index, maybe try to change it to like 1 or something
make z-index positive may it work.
Did you get a solution for this? It isn't working for me too :(
From canada
suyper brooo
hi sir, timeline it auto scroll?
thanks😍🤩😍🥰😍😍😍🤩😗😗😘🤩😍😍🤩
how would you make this sortable? like select only asian car manufacturers
I'm a beginner in web design and I'm having trouble on how to submit websites to my clients, can you show the steps on how to submit to clients
add you project folder in a ZIP file and send them, they can extract the zip file and open the index.html file with web browser to preview the website.
But if they want it to publish it online, then they need to provide the Domain name and web hosting here is the video to upload website online: ua-cam.com/video/0csRmmgN31o/v-deo.html
Could you please provide the complete code or js?
Ye effect agar on scroll hota toh mast lagta
hindi laam theriyaathu
ti amo
The animation delay is not working to me. Someone knows the reason?
is there a source code ?
Sir, please make a website using Bootstrap 5
anyone can help me mine one is not showing respnsiveness
where is source code ?? any one can share the source code?
how to make flipkart like timeline?
Do you have grid photo lightbox like facebook?
here it is: ua-cam.com/video/4gcy-qT9kGw/v-deo.html
@4:32
can anyone provide the source code?
Can we get source code please?
Fantastic
Thank you so much 😀