NỘI DUNG BÀI VIẾT
Tạo Person Profile Card bằng Html, Css và Javascript
นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูเพิ่มเติม
Tạo ThẻPerson Profile Card bằng Html, Css và Javascript
CSS Card with hover animation and mobile fallback
Another fun animated card that I created: https://youtu.be/YmyqlM13JUU
Transition / Animation performance: https://medium.com/outsystemsexperts/howtoachieve60fpsanimationswithcss3db7b98610108
⌚ Timestamps
00:00 Introduction to the project
00:52 The HTML
03:40 Starting the CSS
08:47 New HSL Syntax and gradients
11:35 Adding the pseudoelement
17:32 Styling the button
19:19 Little details
21:50 The animations
31:23 Timing the animations
34:18 Fixing keyboard navigation
40:45 Making it work on mobile
46:01 prefersreducedmotion
css\r
\r
\r
\r
Come hang out with other dev’s in my Discord Community\r
💬 https://discord.gg/nTYCvrK\r
\r
\r
\r
Keep up to date with everything I’m up to\r
✉ https://www.kevinpowell.co/newsletter\r
\r
\r
\r
Help support my channel\r
👨🎓 Get a course: https://www.kevinpowell.co/courses\r
👕 Buy a shirt: https://teespring.com/stores/makingtheinternetawesome\r
💖 Support me on Patreon: https://www.patreon.com/kevinpowell\r
\r
\r
\r
My editor: VS Code https://code.visualstudio.com/\r
\r
\r
\r
I’m on some other places on the internet too!\r
\r
If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.\r
\r
Instagram: https://www.instagram.com/kevinpowell.co/\r
Twitter: https://twitter.com/KevinJPowell\r
Codepen: https://codepen.io/kevinpowell/\r
Github: https://github.com/kevinpowell\r
\r
\r
\r
And whatever you do, don’t forget to keep on making your corner of the internet just a little bit more awesome!
Thẻ sản phẩm Products Card animation Hover bằng Html, Css và Javascript
Tạo Thẻ sản phẩm Products Card animation Hover bằng Html, Css và Javascript
Responsive Cards pure HTML \u0026 CSS | webIQ
Facebook Page: https://www.facebook.com/Webiq107795700795338
Download Source Code From Here: https://drive.google.com/open?id=1tv3qWQzrWQr5R36svl5wlaeLAbkL9cQy
In this video you are going to learn how to create awesome responsive cards using pure HTML and CSS.
Google Fonts used: Poppins.
Refer here: https://fonts.google.com
For any queries, please talk to me on the comment section, and let me know how much did you like it.
If you liked the content please consider subscribing to my channel.
Subscribe my channel here : https://www.youtube.com/channel/UCHOsrjb9LdqH7HEHGocm6lQ?sub_confirmation=1
Watch Next:
Responsive Our Team Design HTML \u0026 CSS: https://youtu.be/EOpt0HLymis
Read More / Read Less: JavaScript Tutorial: https://youtu.be/Ig4dfP7AAUM
MUSIC TRACK
NCS: Music Without Limitations
NCS Spotify: http://spoti.fi/NCS
Free Download / Stream: http://ncs.io/makememove
IMAGE CREDITS
1. https://www.pexels.com/photo/bungalowscaribbeangetawayholiday6934/
2. https://www.pexels.com/photo/canyoncliffsdesertdry371572/
3. https://www.pexels.com/photo/photoofmonumentduringdawn3021382/
Build a Responsive News Blog Post Card | HTML and CSS Tutorial
In this video tutorial you will learn how to build a beautiful responsive news blog post card using html and css. We will be using many properties including flexbox to achieve our layout. You will also learn how to use media queries to make the card adapt to any screen size.
Don’t forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you’ll be notified the moment new videos are uploaded.
Subscribe ► https://bit.ly/2Q3pCiB
⭐ Kite is a free AIpowered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I’ve been using Kite for 6 months and I love it! https://www.kite.com/getkite/?utm_medium=referral\u0026utm_source=youtube\u0026utm_campaign=juliocodes\u0026utm_content=descriptiononly
[ SUPPORT ME ]Get exclusive Patreon perks.
Patreon ► https://www.patreon.com/juliocodes
[ SOCIAL MEDIA ]Instagram ► https://www.instagram.com/juliocodes
[ GET IN TOUCH TUTORIAL HELP ]Email ► [email protected]
[ HOSTGATOR ]Get affordable domain and web hosting with HostGator. Save up to 60% off of your entire purchase with the coupon code below.
HostGator ► https://bit.ly/2ZfR0u3
Coupon code ► JULIOCODES60
Video tutorial ► https://youtu.be/5B_LQqR0zsE
[ MY GEAR ]Programming/Video editing laptop Specs \u0026 extras
Laptop: Dell XPS 15 7590
Processor: 9th Generation Intel Core i79750h
RAM: 32GB (Upgraded)
Graphics Card: Nvidia GeForce GTX 1650 4GB GDDR5
Storage: 500GB M. 2 PCIe NVMe SSD (Upgraded)
Extras
Monitor: Dell Ultrasharp 27\”
Keyboard: Logitech MX Keys
Mouse: Logitech MX Master 3
Microphone: Blue Yeti
[ DISCLAIMER No. 1 ]In order to speed up the development process CSS prefix are not used. In order to ensure cross browser compatibility please use prefixes where necessary.
[ DISCLAIMER No. 2 ]This video description contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for the support!
นอกจากการดูหัวข้อนี้แล้ว คุณยังสามารถเข้าถึงบทวิจารณ์ดีๆ อื่นๆ อีกมากมายได้ที่นี่: ดูบทความเพิ่มเติมในหมวดหมู่Tips
