Скачать или смотреть How to build a pricing page // HTML & CSS in-depth

Learn how to build a pricing table with a nice little ribbon in this in-depth episode about HTML & CSS and see how to
✔️ use CSS flexbox and CSS grid layout
✔️ reference external fonts in HTML
✔️ build an entire layout from scratch
✔️ use the CSS pseudo-classes to add shapes to the layout
✔️ use the :nth-child pseudo-class for creating alternating row colors
✔️ use the CSS clip-path property to create a ribbon badge

⌨️ CODE ⌨️

https://codepen.io/crayon-code/pen/Ba...

🖇️ USEFUL LINKS 🖇️

🔗 Complete guide to grid layout https://css-tricks.com/snippets/css/c...
🔗 A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a...
🔗 CSS linear gradient https://developer.mozilla.org/de/docs...)
🔗 CSS visibility property https://developer.mozilla.org/en-US/d...
🔗 Google Fonts: https://fonts.google.com/
🔗 CSS custom properties / variables on MDN https://developer.mozilla.org/en-US/d...
🔗 CSS clip-path on MDN https://developer.mozilla.org/en-US/d...

🔔 SUBSCRIBE & LIKE 🔔

▶️    / @crayoncode  

⚙️ USEFUL VSCODE EXTENSIONS ⚙️

Live server: https://marketplace.visualstudio.com/...
Bracket Pair Colorizer: https://marketplace.visualstudio.com/...

⏱️ TIMESTAMPS ⏱️

00:00 Markup
02:52 Basic CSS Setup
06:04 Pricing Card Layout
09:00 Header Shape & Style
15:35 Description Style & Horizontal Rulers
18:26 Features List
21:30 Alternating Row Color
24:26 Color Schemes
26:40 Best Value Badge


🎨 ARTWORK 🎨

SVGs created by freepik:
https://www.freepik.com/free-vector/p...


👋 FOLLOW

📸 INSTAGRAM:   / crayon_code  

🏷️ HASHTAGS 🏷️

#html #css​ #tutorial