RPG Styles Card with Hover Effect - HTML/CSS

  Рет қаралды 202,826

Red Stapler

Red Stapler

Күн бұрын

Пікірлер: 112
@rahul5794
@rahul5794 5 жыл бұрын
Your videos help me learn css in a very different way but they always work Keep up the good work!
@joel9909
@joel9909 5 жыл бұрын
Very direct and effective, I like that you utilized the powers of both flexbox and Grid
@charlotte.upandaway
@charlotte.upandaway 4 жыл бұрын
This was such a great tutorial! Clear, succinct, and helped me make my first set of cards! Something I thought was going to be super difficult, you made easy and fun. Thank you!
@basmaw1635
@basmaw1635 4 жыл бұрын
Thanks for the tutorial, I spent almost half a day playing around with it after I got inspired by the project. Also given me a few more ideas for other stuff I could do as well. Looking forward to the next tutorial. You are awesome.
@vasiovasio
@vasiovasio 5 жыл бұрын
Clean CSS work! Keep going bro!
@Shanboss277
@Shanboss277 4 жыл бұрын
Really simple tutorial. You're an actual legend.
@NumberSixRule
@NumberSixRule 4 жыл бұрын
I always wanted to learn this effect, thanks for the great tutorial. Subbed.
@Danger418
@Danger418 5 жыл бұрын
Such a great result with simple css, nice work!
@keithhunt7175
@keithhunt7175 5 жыл бұрын
Cool! Thanks for sharing. Following along and with your little tutorials and tinkering with the code, seems like a great way get better with CSS.
@rupavagetsitdone
@rupavagetsitdone Жыл бұрын
this is so awesome and cool looking. i was about to use the default bootstrap ones when i came across yours. really love them. and i learned so much of how a css code is nested and structured by just looking at your code. thanks!
@saikatbishal
@saikatbishal 2 жыл бұрын
This helped with my api integration project. Thanks.
@darkalpha6530
@darkalpha6530 4 жыл бұрын
Needed for my hackathon. Thank you.
@jeremiah869
@jeremiah869 5 жыл бұрын
Wonderful design and tutorial! Your thought process and explanations are great to follow along with.
@rahulpongde2058
@rahulpongde2058 3 жыл бұрын
what is the size of the images used in the cards
@MaksymMinenko
@MaksymMinenko 3 жыл бұрын
Thank you for using the css grid.
@Pankaj-Verma-
@Pankaj-Verma- 4 жыл бұрын
Clean videos from this channel. Thank you.
@deepeshvaishnav555
@deepeshvaishnav555 4 жыл бұрын
Respect to the Creator, simple but effective great man...♥
@ngavuthu618
@ngavuthu618 4 жыл бұрын
your work is so beautiful! thank you for the tutorial!!!
@techhilfiger1014
@techhilfiger1014 4 жыл бұрын
It was very nice.love from India . Keep it up Growing sir.
@ricardoxerna9072
@ricardoxerna9072 4 жыл бұрын
how do i change the background of each card without having to do the card-img code for each card?
@mohammedasif9756
@mohammedasif9756 4 жыл бұрын
Thanks to you buddy who make my easy and comfortable manner to understand the video..Be continue
@laszlopinter8847
@laszlopinter8847 2 жыл бұрын
Come on bro these are decent cards and I see so much good tutorials from you. So here is my biggest problem: Please! Put the first card's picture, to the second card. Then put the second card's picture to the third one and the third card's picture to the first card. IT LOOKS SO GOOD. ( I tried it. ) You got to see this man :D You got to !
@edemduku3391
@edemduku3391 4 жыл бұрын
thank you - thank you very much for this video. after what i leant i also know i cant escape css grid so will also go into that area. but you have given me a good start
@aungmyat9960
@aungmyat9960 2 жыл бұрын
Hi how do you make them all in the same row?
@kazimrahman7499
@kazimrahman7499 3 жыл бұрын
awesome job Engineer....!!
@alberth.d7541
@alberth.d7541 4 жыл бұрын
why result image different via html and via css ?
@yokotemaki8228
@yokotemaki8228 4 жыл бұрын
nice and clean work dude
@noone-gr4is
@noone-gr4is 4 жыл бұрын
Every time I watch web developing videos, a Wix ad pops up
@BiteUA
@BiteUA 5 жыл бұрын
in chrome transition scale creates text blur, that's why is a bad option
@franciscogarcia4873
@franciscogarcia4873 2 жыл бұрын
How can I move the card's position on the screen/web page? I want to make various cards but I can't seem to figure out how to move their positions in CSS.
@ivankrupskyi8984
@ivankrupskyi8984 4 жыл бұрын
Very nice look and simple implementation. Great.
@lalitrathore3804
@lalitrathore3804 3 жыл бұрын
The amount of div used 🤔 Is it ok to use div for every part
@shineLouisShine
@shineLouisShine Жыл бұрын
Thanks. Could have been really awesome if there was a deck of cards, and a tutorial which include how to manipulate those. Flipping a card, putting card over card but leave some part of the card below exposed, etc..
@mohamadsamater3504
@mohamadsamater3504 4 жыл бұрын
Is there a zip code for pictures
@boneykingofsomewhere
@boneykingofsomewhere 5 жыл бұрын
Fantastic tutorial, I've subscribed :D
@moonman8055
@moonman8055 3 жыл бұрын
very simple and well explained thank you.
@GustavoNiederauer
@GustavoNiederauer 5 жыл бұрын
Great Work! But I have more than 10 cards. How can them made it to slide right/left to pick or see the others.
@sohambtw
@sohambtw 4 жыл бұрын
Would u plzz tell me how to make multiple cards .
@kutaybugdayc9463
@kutaybugdayc9463 2 жыл бұрын
@@sohambtw did u find
@jubairhaider363
@jubairhaider363 4 жыл бұрын
Can you tell me how to make it responsive?
@krims254
@krims254 5 жыл бұрын
Hey thanks for the code but how would you put let's say 3 card at the top and 3 at the bottom?
@RedStapler_channel
@RedStapler_channel 5 жыл бұрын
use grid layout
@krims254
@krims254 5 жыл бұрын
@@RedStapler_channel tried that nothings working please help I dont know where to put And same w column
@darwyna
@darwyna 5 жыл бұрын
Awesome video! Thank you 😁 i have an idea for you: how about coding on something like codepen? Where we can see the progress live. I think this would really help to understand better. Keep up the good work!
@jigyasatrivedi3391
@jigyasatrivedi3391 3 жыл бұрын
I want to add more rows how would i do that
@web_masud
@web_masud 4 жыл бұрын
I hope you enjoy watching my channel and don't forget to subscribe. I will be inspired by your help.
@2-sided672
@2-sided672 4 жыл бұрын
I didn't got the output. is it different for other OS?
@zykoz6826
@zykoz6826 5 жыл бұрын
Thanks for the tutorials. I just wanted to state that flipping from css/html/webpage is a little hard to follow. ;) Thanks again for the wonderful content.
@julianff1
@julianff1 4 жыл бұрын
thanks foir the video. How can i link such a card to (e.g. a tag) to another page or to a popup ? And how did you but 3 cards next to each other without class=row? My second card is now beneath the first one? Thanks a lot for help.
@kutaybugdayc9463
@kutaybugdayc9463 2 жыл бұрын
did u find how to make second card
@luis96xd
@luis96xd 5 жыл бұрын
I loved this video! It was awesome! The design is so nice :D I learned a lot. Thanks ^_^
@sangeethmr9731
@sangeethmr9731 3 жыл бұрын
hi can u teach how to make digital card with HTML /css
@GrahamBillington
@GrahamBillington 3 жыл бұрын
Awesome video thank u
@yeico80
@yeico80 4 жыл бұрын
Great video. Thank you so much!
@FirdavsiGameDev
@FirdavsiGameDev 5 жыл бұрын
Nice. Thank you!
@abidinawres2229
@abidinawres2229 Жыл бұрын
great tutorial, thank you
@mehtapugur6422
@mehtapugur6422 4 жыл бұрын
Thanks for sharing.
@legenacygaming103
@legenacygaming103 3 жыл бұрын
can i ask, HOW THE HELL DO YOU MULTIPLY THEM AM HAVING A HARD TIME
@lolmrpana11
@lolmrpana11 5 жыл бұрын
Red Staple, how do you get them the card to line side by side?
@RedStapler_channel
@RedStapler_channel 5 жыл бұрын
flex
@gokulrock6686
@gokulrock6686 2 жыл бұрын
How to add multiple cards on rows
@brianaitchison671
@brianaitchison671 4 жыл бұрын
how do u get it responsive please
@abia3585
@abia3585 4 жыл бұрын
I liked it, subbed.
@vasupadh6111
@vasupadh6111 4 жыл бұрын
how to make digital business card using html & css with all social media links call to ation button and gmail all that ?
@OO-pc2dh
@OO-pc2dh 5 жыл бұрын
Cool! Thank you.
@badr6896
@badr6896 3 жыл бұрын
Is it responsive ?
@SherinSunny-rj3py
@SherinSunny-rj3py 3 жыл бұрын
PLEASE DO REPLY FAST HOW TO CHANGE THE CARD SIZE IN CSS NOT IN HTML ?
@boutiflet
@boutiflet 5 жыл бұрын
Cool, it's gave me a idea.
@HMaxTube11
@HMaxTube11 5 жыл бұрын
Good one, thank you.
@jokutzu3089
@jokutzu3089 4 жыл бұрын
My stats won't stick to the bottom. What did I do wrong?
@jokutzu3089
@jokutzu3089 4 жыл бұрын
I figured it out. But I do have another question: How do I put a headline above this?
@vikasmalik1744
@vikasmalik1744 5 жыл бұрын
how to make it responsive ....
@TheSagarKhatiwada
@TheSagarKhatiwada 4 жыл бұрын
how to make it responsive ???
@freelarabie3218
@freelarabie3218 4 жыл бұрын
Thank you very much Friend
@smokeboyy1036
@smokeboyy1036 5 жыл бұрын
Hello, can you make them also responsive please?
@serioussam9400
@serioussam9400 5 жыл бұрын
How can you make that translate language appear??? Need help....
@RedStapler_channel
@RedStapler_channel 5 жыл бұрын
did you mean the lorem? just type the word lorem in visual studio code and press enter at the suggestion 👍
@serioussam9400
@serioussam9400 5 жыл бұрын
@@RedStapler_channel no....when you open the web it asks you to translate from Google or there is always a Google translate logo on the right side of the title.....how did you do that? I didn't find any extra tag in your HTML code for that...
@serioussam9400
@serioussam9400 5 жыл бұрын
@@RedStapler_channel help plz
@RedStapler_channel
@RedStapler_channel 5 жыл бұрын
@@serioussam9400 hmm? which part of the video that you see that?
@serioussam9400
@serioussam9400 5 жыл бұрын
@@RedStapler_channel this video
@bimalsardar2238
@bimalsardar2238 3 жыл бұрын
Awesome
@emonahmmed1722
@emonahmmed1722 5 жыл бұрын
Text editor name
@rhysperry111
@rhysperry111 5 жыл бұрын
Emon Ahmmed VS Code
@asep2316
@asep2316 4 жыл бұрын
best tutorial
@hameedabed3474
@hameedabed3474 4 жыл бұрын
I want the picture
@slingshot7602
@slingshot7602 4 жыл бұрын
Thanks
@terraflops
@terraflops 5 жыл бұрын
for some reason my code doesn't work like yours. // I love the channel and content.
@learncodingwithshreya
@learncodingwithshreya 4 жыл бұрын
same
@GALAXY-jn5st
@GALAXY-jn5st 2 жыл бұрын
brooooooooooooooo=> thanks
@endenman1872
@endenman1872 4 жыл бұрын
I'm gonna staple my html and css pages
@aungphone9588
@aungphone9588 4 жыл бұрын
Good
@eazycodes
@eazycodes 3 жыл бұрын
nice tutorials love from #eazycodes
@VRUSHALIMAKWANA
@VRUSHALIMAKWANA Жыл бұрын
thanku
@jereomylopez3648
@jereomylopez3648 5 жыл бұрын
I suggest that you do not show the code being written in speed-up mode or fast typing. Just put each snippet of code in the window and say this class does this, blah, blah. It was like you guarding a secret. There was not time to type, or even pause without rewinding. Yes thanks for free information. but a 8-10 min video was more like 30 mins because, of the constant rewinding. clock the speed from finished line to change screen.
@bmx-motivation
@bmx-motivation 4 жыл бұрын
Responsive....?
@ReyBanYAHUAH
@ReyBanYAHUAH 3 жыл бұрын
Always remember we must repent of our sins (sin is transgression The Law Of Yahuah The Father in Heaven. The Law are The Books: Genesis, Exodus, Leviticus, Numbers, & Deuteronomy). We must repent of our sins and Have Belief On Yahusha The Messiah. HE Died and Rose three days later so that we can be forgiven of our sins! Come to HIM🙂🙂🙂🙂🙂
@mohanalkarvaibhav8233
@mohanalkarvaibhav8233 3 жыл бұрын
this is not responsive
@anonymAF
@anonymAF 4 жыл бұрын
it does not even work. i copied the exact code and opened it in chrome, vivaldi and edge. you just wasted 1hr of my life.
@ScrappyCoCo0
@ScrappyCoCo0 3 жыл бұрын
How does this have any likes? The cards do not scale at all on mobile, and you use pixels for sizes. This looks like crap on both mobile and large screens.
@musicplay5194
@musicplay5194 3 жыл бұрын
Good
Easy Flipcard Tutorial | HTML & CSS
11:20
Coding With Russ
Рет қаралды 71 М.
You Need This Hover Effect On Your Site ASAP (CSS / JS)
5:10
Hyperplexed
Рет қаралды 467 М.
Beat Ronaldo, Win $1,000,000
22:45
MrBeast
Рет қаралды 158 МЛН
It works #beatbox #tiktok
00:34
BeatboxJCOP
Рет қаралды 41 МЛН
When you have a very capricious child 😂😘👍
00:16
Like Asiya
Рет қаралды 18 МЛН
CSS Responsive Card Hover Effects | Html & CSS
4:15
Online Tutorials
Рет қаралды 257 М.
The Secret CSS Padding Trick!
3:16
Red Stapler
Рет қаралды 74 М.
Crazy CSS Using By Master CSS
6:46
Lun Dev
Рет қаралды 213 М.
CSS Card Hover Effects | HTML & CSS
15:26
Bedimcode
Рет қаралды 125 М.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Рет қаралды 1,9 МЛН
The Easy Way to Design Top Tier Websites
11:54
Sajid
Рет қаралды 703 М.
3D-эффект переворачивания карточки при наведении. Только HTML и CSS.
10:57
Антон Анискович | Создание сайтов. Дизайн.
Рет қаралды 15 М.
Useful & Responsive Layouts, no Media Queries required
11:03
Kevin Powell
Рет қаралды 187 М.
пранк: псих сбежал из дурдома
0:53
Анна Зинкина
Рет қаралды 1,7 МЛН
Down Spout Catch Basin Installation to French Drain
0:58
Komar Project
Рет қаралды 6 МЛН
Американцы красят асфальт?
0:27
BAZAR CLUB
Рет қаралды 188 М.
Satisfying Vend 😦 Ep.5 #shorts #satisfying #vendingmachine
0:23
TYE Arcade
Рет қаралды 17 МЛН
Что такое дагестанский кирпичный завод!
0:53
АВТОБРОДЯГИ - ПУТЕШЕСТВИЯ НА МАШИНЕ
Рет қаралды 746 М.