Stunning HTML & CSS Card Animation 

Same

Thank you very much!

@@webuitutorials Friend, I loved your work and repeated it, but one thing that bothered me a bit is that I couldn't save the photo. We clicked on it, it opens, but we can't close it like when we open the website. Is there a way to fix this? What can I do?

Thank you very much!

Yes, leg coding took over my life too.

​@@bogdankpfyi you can't code with you legs , use butt

why so? cuz there is already everything on the internet?

@@stefanr9653 Should read: "there is already everything copied on the internet" One new idea.. 705354 copies, not even bothering to adjust little things. The majority of "web-designers" are only able to copy/paste things without knowing how things work. Ask that self-proclaimed specialists to create a web-site just by using notepad. It all started when ms-word dared to generate html. It will get worse, AI tools are coming: then we get the same idiotic images everywhere, and people will think its "cool".

Call me old-fashioned, but it's the only way I can ensure things work the way they're supposed to.

Thanks!

Thank you! Honestly, I do not know exactly to what extend it affects SEO. But considering that there is not that much text per slide anyway, this should not be a significant problem

Hey :) I also don't know how it affects SEO, but is is not a good approach from a semantic point of view and it is not accessible.

Great idea, I will keep that in mind

@@webuitutorials Teşekkür ederim ❤

Será que aprende algo sem mesmo explicar as tags?? Sei o básico de html e CSS ksks

Thank you, you can find the images either on stock.adobe.com/de/contributor/211435115/James or wirestock.io/james591

Thanks! I might post an updated version but it should be very easy to do it by yourself there is not much to change

@media (max-width: 766px) { .wrapper { margin-top: 400px; } .container { height: 1200px; flex-direction: column; } .slide { width: 400px; align-items: flex-start; } .slide > .row { flex-direction: column; } .slide > .row > .icon-1, .icon-2, .icon-3 { width: 50px; } .slide { height: 80px; } .slide > .row > .description { height: 500px; width: 400px; } input:checked + label { height: 600px; width: 400px; } } Change this, but watch the width's and height's. I've changed some for my project

@@pauldanielvanschevikhoven4551 thanks g 🖤

@@pauldanielvanschevikhoven4551 legend

@media (max-width: 766px) { .wrapper { margin-top: 400px; } .container { height: 1200px; flex-direction: column; } .slide { width: 400px; align-items: flex-start; } .slide > .row { flex-direction: column; } .slide > .row > .icon-1, .icon-2, .icon-3 { width: 50px; } .slide { height: 80px; } .slide > .row > .description { height: 500px; width: 400px; } input:checked + label { height: 600px; width: 400px; } } Change this, but watch the width's and height's. I've changed some for my project

The cursor is the default one from the KDE Breeze theme

@@webuitutorials thank you very much :D

Thank you! No, that's neovim

Thank you! I am using neovim in the video

What a Chad.

OBS (Open Broadcaster Software)

Hey yeah that's normal that's how I worked some time ago. But with every project you do you learn and memorize additional things. For a job the result is more important but having to search things up might take longer for the projects to finish. Try to learn from scratch and you'll be able to recreate what's on your mind without the need to do excessive research

Too much learning, development is such a broad field i don't feel like learning everything from scratch. I feel like excessive research is more fun but idk. Maybe IT is not for me. I am currently in an internship as a web developer ( super easy project ) at a vocational school, but i am soon graduating and i will apply myself to university of applied sciences, but idk if i want to take IT major this time. Thanks for the reply =) @@webuitutorials

RU-vid is your best friend! Thousands of hours worth of free content that you can use to learn.

Try to replicate small code snippets from other people and try to understand them. After some time you will be able to adjust them to your own needs or build the things you imagine on your own. Watching some beginner tutorials for HTML and CSS on RU-vid would make the process much easier

You can't draw even though you know how to use a pencil. Try to convert UI designs to code. Also don't look at the code !

Yes, you can use the code on your own website if you would like to or use it as a resource to learn HTML and CSS

@@webuitutorials thx 🙂

I bought them at wirestock: wirestock.io/james591

Try writing flex-start instead of start

@@webuitutorials do you have any discord or something ? I have a photo with the results

The inputs are radio inputs, that means only one can be checked at any time. That creates the effect: if you check a new one, the old one gets unchecked automatically. So only the slide that should be open on page load should have the vale checked

you're right, it's a mistake, just take the second one

The checked one is the default card that is open on page load. As I was copying the inputs in the beginning, I forgot to remove the checked attributes from the other inputs (it made no sense to check all because only one of them can be checked at any time)

It shouldn't be a problem using html. Did you compare your code with the source code I provided? The code should work in your webbrowser, too

Probably not, wasn't the main goal. Make it if you need, should be very simple

Here you go: github.com/webtutorialsw/css_sliding_cards

I am using neovim in the video

thank you

links have been updated in the description

Send me a link to your code and tell me your browser I will try to help you

FIX*

What browser do you use? If you'd send me a link to your code I could quickly look through it

Thank you, well since it's made to be just a cool looking visual element, accessibility should not be that important. You can add your own code and change the structure of my template to improve semantics and accessibility if that's important to you, but that wasn't the purpose of the video.