Hi again! Learn, share, enjoy and develop guys! ✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative
@hackerprime9722
Жыл бұрын
This is what I was looking for! Keep up the good work!
@mathe.creative
Жыл бұрын
Thanks bro!
@cachemoney8825
Жыл бұрын
This is really great stuff thank you for sharing ! You should make more content like this!
@mathe.creative
Жыл бұрын
I'm very happy that you liked it 🫡
@joseluisbecerra3855
Жыл бұрын
I really appreciate it, it really helped a lot!!!
@mathe.creative
Жыл бұрын
I'm happy to have helped you 🙂
@abhishekjain7541
Жыл бұрын
THE BEST WORK AND THE CLEANEST CODES GREAT WORK DUDE HELPED ME A LOT
@mathe.creative
Жыл бұрын
Thanks for the compliments and glad I could help :)
@mdkawsarislamyeasin4040
Жыл бұрын
Thanks for the video and mostly for the source code
@mathe.creative
Жыл бұрын
You're welcome 🫡
@playAliMusic
Жыл бұрын
Hey, I used the source code and everything works fine, but I'm getting this blue box/container behind all of the cards, it seems to appear only when I add the .cards in the CSS. But I can't get rid of the .cards otherwise they don't go to the right part of the page. How would I get rid of this blue box? UPDATE: I found what is causing it, it's the width. If I get rid of the width it will get rid of the box, but the cards will now show all the way to the right side of the screen, and attempting to move them back makes the box appear again. (with width and margin right/left). Would still love some help if you got any
@mathe.creative
Жыл бұрын
Hi there! Well, let's try to solve this little problem. First, as you mentioned about the cards being on the right, make sure you've made the adjustment I do at 13:03, ok? If the problem persists, I would need more details about this "blue container" that is appearing. If you prefer, you can send me an email with prints (it is available in the "About" tab here on the channel). I hope it works and if not, just contact me :)
@xiztspike81
4 ай бұрын
thanks so much! 😍💯
@mathe.creative
4 ай бұрын
You're welcome 😉
@ayushmurugkar4657
7 ай бұрын
Hi! Hi I am trying just the card scrolling using html and css only! but I am not able to get any behaviour using #s1:checked~ .cards #slide3{ transform:scale(1.2) } What am I doing wrong? I made sure everything is structured as in the video like each label is assigned perfectly for the radio button and each label has an slide id and card and an image within it please help
@mathe.creative
7 ай бұрын
Hi there! I will try to help you, don't worry. So, your css declaration is apparently correct, what it expresses is "when the box with id s1 is checked then the element with id slider3 inside the .cards must have this style". Therefore, I believe the problem is possibly in your html, in the organization of the elements. Check it out and get back to me, the checkbox entries must be siblings of the elements that have the .cards class. Did you get it?
@ayushmurugkar4657
7 ай бұрын
Thank you for kind response! Actually, it was resolved as soon as I realised I was putting an extra comma after #slide,{ and it should be #slide{ Thanks again
@mathe.creative
7 ай бұрын
@ayushmurugkar4657 Oh yes, it doesn't really work 😅 Glad it went right!
@alixone6668
9 ай бұрын
hello.the size of the cards covers the whole screen. How can I make the cards smaller?
@mathe.creative
9 ай бұрын
Hit here! In the styles.css file, on line 37, we set the height and width of the card container - you can change it there. Alternatively, you can adjust it directly on the cards at line 58. If you have any more questions, just ask here, and either I or someone from the community will be happy to help you :)
@sahilsharma2867
Жыл бұрын
perfect! good one
@mathe.creative
Жыл бұрын
I appreciate the compliments, bro 😀
@SahabUddin-c2x
Жыл бұрын
Thanks, this is a good vide
@mathe.creative
Жыл бұрын
You're welcome 🫡
@mudassirrehman1317
Жыл бұрын
hello. hope you doing well. how can we add time delay instead of clicking.i mean auto carousel in thise example. please replay must
@mathe.creative
Жыл бұрын
Hi there, Mudassir! Goood question, this would make the slider much more dynamic actually. But I think it would require some javascript so it wouldn't be very simple. I wrote it down here to make a video about it and I'll research it, if I find a quick solution I'll come back here and pass it on to you, ok? Thanks for commenting man :)
@mudassirrehman1317
Жыл бұрын
@@mathe.creative thanks for you valuable words I am waiting for that. keep it up
@raginiragini5734
Жыл бұрын
slide is not getting added . even thought i have worte css for every one . please help me
@mathe.creative
Жыл бұрын
Hello! In the description of the video there is the source code (relax, it's free), could you test it based on it? I hope it helps :)
@mrz4237
Жыл бұрын
👏👏👏
@mathe.creative
Жыл бұрын
Thanks bro! 🙂
@Gaurav009
Жыл бұрын
Hi, cards are toggled on click, can you please tell codes to toggle the cards on touchscreen swipe?? Please, must reply.
@mathe.creative
Жыл бұрын
Hi brother! I'm sorry but I believe that putting the codes here in the comments may confuse you or be too much, but don't worry, I intend to make other videos about sliders this time using the SwiperJs and SlickJs libraries, I'm going to write it down here with me to solve the touch problem, ok?
@Gaurav009
Жыл бұрын
@@mathe.creative okk. But please make it soon.
@shohruxshokirov7237
Жыл бұрын
just WOW 👏
@mathe.creative
Жыл бұрын
Thanks bro! 🙂
@leandrohenrique6056
11 ай бұрын
❤💪🏻😊
@mathe.creative
11 ай бұрын
😉😉😀
@ahmedabdelmeguid1131
Жыл бұрын
perfect
@mathe.creative
Жыл бұрын
I'm glad you liked it =)
@thewojack
Жыл бұрын
very useful
@mathe.creative
Жыл бұрын
Thanks 😃
@kitagaming5945
Жыл бұрын
how to make this card slider responsive? thats checked css make me failed :(
@mathe.creative
Жыл бұрын
For the mobile version I think we could only display 3 cards instead of 5, we would do that using CSS media queries, what do you think?
@Natural-Pigeon
Жыл бұрын
you are greet bro ❤❤❤
@mathe.creative
Жыл бұрын
Thanks, bro :)
@pietromalvagi113
5 ай бұрын
Hi man, I tried to send you an e-mail some days ago at the address I found in the comments below, idk if you didn't read it or if you don't have time but just letting you know😊
@mathe.creative
5 ай бұрын
hello! I checked my email and your message automatically went to spam 🤦♂️, sorry, that's why I prefer a Patreon DM haha. I'll take the opportunity to see what you need and answer you, if possible by today, don't worry.
@guidsz
5 ай бұрын
someone knows a community where people help others with html and css stuff?
@mathe.creative
4 ай бұрын
Olá, Guilherme! Estou criando uma comunidade lá no Patreon, caso tenha interesse. Lá voce também pode ser um membro free, gostaria de ter voce por lá. cara. Já te adiantando, pretendo disponibilizar por tempo limitado o ebook sobre Front-end Edição 1 para os free members assim que eu lançar a Edição 2, então fique atento, dev :) www.patreon.com/MatheCreative
@blackmetal616
Жыл бұрын
how could i make this work with just 4 cards?
@mathe.creative
Жыл бұрын
Hi there! So, you would need to adapt the html for four card entries (that inputs and labels). After that, edit the css that starts here 4:46, with the same logic of adapting to 4 cards and not 5 more. I hope it helped you :)
@cesarsanchez1722
Жыл бұрын
Responsive?
@mathe.creative
Жыл бұрын
Hi! For the mobile version I think we could only display 3 cards instead of 5, we would do that using CSS media queries. Hope this helps
@breechcomet9724
Жыл бұрын
great tutorial i liked and subscribed aswell actually helping me more with front end, by the way i practiced this with 5 cards and was able to get similar results but when i tried it with 6 cards it became a mess can you help here is my code I did play around with yours so do bear in mind it'll look weird. but here is the css code: #s1:checked~.cards #slide5, #s2:checked~.cards #slide6, #s3:checked~.cards #slide1, #s4:checked~.cards #slide2, #s5:checked~.cards #slide3, #s6:checked~.cards #slide4 { box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); transform: translate3d(-70%, 0, -220px); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide6, #s2:checked~.cards #slide1, #s3:checked~.cards #slide2, #s4:checked~.cards #slide3, #s5:checked~.cards #slide4 #s6:checked~.cards #slide5 { box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%); transform: translate3d(-35%, 0, -120px); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide1, #s2:checked~.cards #slide2, #s3:checked~.cards #slide3, #s4:checked~.cards #slide4, #s5:checked~.cards #slide5, #s6:checked~.cards #slide6 { box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 50%); transform: translate3d(0, 0, 0); --current-color1: #fad00c; --current-color2: #ECEAED; } #s1:checked~.cards #slide6, #s2:checked~.cards #slide5, #s3:checked~.cards #slide4, #s4:checked~.cards #slide3, #s5:checked~.cards #slide2, #s6:checked~.cards #slide1 { box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%); transform: translate3d(0, 0, 0); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide5, #s2:checked~.cards #slide4, #s3:checked~.cards #slide3, #s4:checked~.cards #slide2, #s5:checked~.cards #slide1, #s6:checked~.cards #slide6 { box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); transform: translate3d(35%, 0, -120px); --current-color1: #ECEAED; --current-color2: #404457; } #s1:checked~.cards #slide4, #s2:checked~.cards #slide3, #s3:checked~.cards #slide2, #s4:checked~.cards #slide1, #s5:checked~.cards #slide6, #s6:checked~.cards #slide5 { box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); transform: translate3d(70%, 0, -220px); --current-color1: #ECEAED; --current-color2: #404457; }
@mathe.creative
Жыл бұрын
Hi there! First of all, sorry for the delay in responding, KZitem has hidden your comment from me for some reason. Anyway, we need to remember that this video effect is only valid for an odd number of displayed cards. We could easily have 6 cards in total, but we would only show 5, so far ok? Therefore, we would need to have one more declaration of card behavior that would basically look like this: #X1:checked~.cards #Y1, #X2:checked~.cards #Y2, #X3:checked~.cards #Y3, #X4:checked~.cards #Y4, #X5:checked~.cards #Y5, #X5:checked~.cards #Y6 { display: none; } Do you think you can follow? If you prefer, you can send me an email :) channel.mathe@gmail.com
@ramanmadhukar6083
Жыл бұрын
how to make it autoplay
@mathe.creative
Жыл бұрын
Hi there! Good question, this would make the slider much more dynamic actually. But I think it would require some javascript so it wouldn't be very simple. I wrote it down here to make a video about it, ok? Thanks for commenting :)
@whitesky8013
Жыл бұрын
When you hide things out thats where it makes confusing
@mathe.creative
Жыл бұрын
Hello, I didn't quite understand where you found difficulty, maybe if you explain it to me in more detail I can help you, as I helped other people :)
@whitesky8013
Жыл бұрын
@@mathe.creative if i have an already navigation bar is it ok if i add this would it messed up my current work?
@mathe.creative
Жыл бұрын
@@whitesky8013 Well, I don't see any reason for this slider to damage your navbar, they are distinct elements. Test it out and see what happens, if there is any issue, you can send me an email with more details and I'll help you resolve it 🙂
@youaremad1736
Жыл бұрын
@@mathe.creative are you willing to style a website for me? I would pay. Thing is I coded the back end using Django, but I suck so bad when it comes to UX/UI, my websites never look professional
@samsonnathanielr.9304
Жыл бұрын
Can you send me the entire css? I have copied your css thrice but the card still not working :(
@mathe.creative
Жыл бұрын
Hey, bro! Source codes are on Patreon (www.patreon.com/MatheCreative) :)
@MagnanimoTandil
Жыл бұрын
hello thanks for get us the code. I dont understand this: #s1:checked ~ .cards #slide4, #s2:checked ~ .cards #slide5, #s3:checked ~ .cards #slide1, #s4:checked ~ .cards #slide2, #s5:checked ~ .cards #slide3 { box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); transform: translate3d(-70%, 0, -220px); --current-color1: #ECEAED; --current-color2: #404457; } can you explain to me? o maybe in a new video. Regards
@mathe.creative
Жыл бұрын
Hi there! I can explain yes, or at least try :) First the "~" selector means something like "selects every that is preceded by a ", so in our case it's specifying that when the inputX is checked then slideX should receive this styling, got it? As we have 5 cards in the video, we need to specify which card will receive this styling when each card is in focus, for example, when card 1 (slide1) is in the center (focus) where silde2 should be, and slide3, and the slide4... It takes a little effort to get the hang of it, but then you never forget it, I hope. Hope this helps!
@MagnanimoTandil
Жыл бұрын
@@mathe.creative Thank you very much for answering. I think I understand it, I'm going to practice it and try to achieve it. Thank you very much and greetings.
@esolute
Жыл бұрын
@@mathe.creative Thanks a lot ... Please keep doing what you do. about the portfolio, I'm interested
Пікірлер: 71