Responsive Stats card using Pure CSS and HTML | Frontend Mentor Challenge | CodeEra
Hello everyone, welcome to the new video of CodeEra
Instagram: www.instagram.com/code_era1999
In the following video, I've tried to create a simple UI card design that has a light and a dark mode similar to other websites on the web, this was possible with html, css and a pinch of javascript.
I hope you enjoyed the video.
Thank you very much for watching.
Don't ever forget to see my previous videos, the link is given bellow
Clip-path animation:
• Clip path Animation using Pure CSS and HTM...
Toggle between dark and light mode:
• How To Toggle Between Dark and Light Mode ...
Animated Responsive Navbar Tutorial with CSS and No Javascript
• Animated Responsive Navbar Tutorial with C...
Simple drop-down navigation menu:
• Simple Drop-down navigation using Pure CSS...
Dji product cards using pure css:
• Card Hover Animation using SASS or SCSS | ...
Simple Portfolio website design:
• Simple Portfolio Website Using SCSS and SA...
On Hover Split Animation Effects using Pure css:
• On Hover Split Animation Effect Using Pure...
Animated Card using pure css:
• Animated Card Using Pure CSS | HTML&CSS | ...
Tutorial of Responsive Portfolio website design:
• Tutorial of Responsive Portfolio Website D...
Pure css animation card hover effect:
• Pure CSS Animated Card Hover Effect | Tran...
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
#navigation#menubar#dropdownmenu#htmlandcss#purecss#hovereffect#onhovereffect#navigationmenu#htmlcsstutorial
Time-stamps:
-------------------------------------
00:00 Preview
00:56 Basic HTML
01:47 overviews
02:20 css styling
03:05 styling card
03:45 image section
05:03 main paragraph
06:12 media queries
07:57 final product
-------------------------------------
Queries:
how to create simple status cards using HTML and CSS?
how to create a frontend mentor card using HTML and CSS?
how to solve the frontend mentor challenge with just html and CSS?
how to create a stats card?
how to create a ui card design?
how to make a ui card design without javascript?
how to stats without javascript?
how to make ui design?
How To Make ui designs using HTML And CSS?
How to Create responsive stats card Using Flexbox?
#statscard#responsivecard#uicard
#frontendmentor#challenge#firstchallenge#csschallenge
Music credits:
Song: Erik Lund - Tokyo Sunset (Vlog No Copyright Music)
Music promoted by Vlog No Copyright Music.
Video Link: • Video
ui card design using css flexbox, frontend mentor challenges, online html and css challenges, css challenge, flexbox design, card using flexbox, clean code, website programming, frontend challenge mentor, website design, coding.
Disclaimer: The content in the above video is for educational purposes. It is based upon the 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.