Responsive Animated Cards (Container) Using Flex-box | HTML&CSS | CodeEra
Hello everyone, welcome to the new video of CodeEra
Instagram: www.instagram.com/code_era1999
The following video is based upon a simple idea that popped into my mind when I was surfing on my one of the crypto wallet named coinbase, there you find a section where these kinds of cards are been made, but I haven't copied the complete idea, just half a little bit and remaining the animation flipping of card image was of a change to get an amazing look when you hover over the cards.
Thank you very much for watching.
I hope you enjoyed the video,
Don't ever forget to see my previous videos, the link is given bellow
Time Stamping:
-----------------------------------------------------------------------------------------------------------
00:00 Promo video
00:46 Creating card
02:10 CSS styling
05:39 Image Animation
06:12 Responsiveness using flex-wrap
-----------------------------------------------------------------------------------------------------------
My Code Editor: https://code.visualstudio.com/
My Laptop: https://amzn.to/3pM8Qme
Books I refer: https://amzn.to/32Tb3T0
and books like https://amzn.to/36GHt45,
https://amzn.to/36LhoAP
responsive card hover effect:
• Responsive CSS Card Hover Effect | HTML5 &...
Transparent login form using html and css:
• Transparent Login Form using HTML & CSS | ...
CSS custom glowing checkbox using html and css:
• CSS Custom Glowing CheckBox Using HTML CSS...
3d animated cube using html and css:
• 3d Animated Cube Using HTML and CSS | HTM...
3d rotating cube animation using html and css:
• 3d Rotating Cube Animation Using HTML5 CSS...
Landing webpage layout using html and css:
• Landing WebPage Layout Using HTML CSS | HT...
Animated hamburger using html and css:
• Animated Hamburger Using HTML and CSS | ME...
Animated navigation bar using html and css:
• Animated Navigation Bar Using HTML CSS | H...
Animated social media icons:
• Animated Social Media Icons | HTML&CSS | C...
Animated navigation bar using html and css:
• Animated Navigation Bar Using HTML & CSS |...
#responsive#flexbox#html#codeera
Queries:
how to create amazing cards using HTML and CSS?
how to create responsive cards using HTML and CSS?
how to create a complete cards container just using html and css?
how to create a responsive cards webpage?
how to create a card responsively?
how to make your own technical cards?
how to build a responsive webpage?
how to get a responsive website with pure CSS only?
how to create your own responsive website?
how to create a responsive webpage using media queries?
how to create responsive cards using media query?
how to create a responsive design using only html and css?
how to create a responsive design without javascript?
Images used in the video:
Artificial-intelligence:
https://www.flaticon.com/free-icon/ar...
Data management:
https://www.flaticon.com/free-icon/co...
Database system:
https://www.flaticon.com/free-icon/da...
Data Analytics:
https://www.flaticon.com/free-icon/an...
The Images credit goes to the website:
flaticon.com
Music credits:
Song: Ikson - Lights (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
Video Link: • Ikson - Lights (Vlog No Copyright Music)
Song: Ikson - Don't Worry
Music promoted by Vlog No Copyright Music.
Video Link: • Ikson - Don't Worry (Vlog No Copyright Music)
on hover CSS effect, transforming css card, card transformation
pure css card hover animation, card transformation, responsive card design
pure css card animation, css card design, responsive card design, pure animation css card
hover effect on the card, CSS card hover effect, pure CSS card hover effect
css card hover effects, card hover effects css, CSS card, card hover effects, CSS hover tutorial, HTML, CSS card design, CSS card hover effects tutorial, css hover effect, css image card hover effect, css card hover effect, HTML CSS hover effects, css hover effects tutorial
card animation using css, pure css card animation, how to create responsive websites, how to create card using css and html
Disclaimer: The content in the above video is for educational purposes. It is based upon my knowledge that I gained from my learnings and subject of interest. The video is completely edited and posted on the CodeEra channel by me and non of the content is copied or obtained from other sources, Thank you.