How to build a login page with page transition // HTML & CSS in-depth
Learn how to build a login page with an awesome page transition effect in this in-depth episode about HTML & CSS and see how to
✔️ use CSS flexbox and CSS grid layout
✔️ reference external fonts in HTML
✔️ create beautiful hover styles with CSS
✔️ embed SVGs as images in HTML
✔️ build an entire layout from scratch
✔️ use the CSS clip-path property
✔️ make clip-paths smoothly transitionable
⌨️ CODE ⌨️
https://github.com/crayon-code/websit...
🖇️ 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...
🔗 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...
🔗 circle 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
01:15 Basic CSS Setup
03:00 Main section Styling
05:11 Artwork & Rocket Styling
08:19 Login Form Markup
10:18 Form Styling
11:27 Input Styling
14:28 Input Icons
18:00 Link & Button Styling
21:37 Page Transition JS Setup
23:41 Page Transition Markup & Styling
🎨 ARTWORK 🎨
SVGs created by freepik:
https://www.freepik.com/free-vector/l...
👋 FOLLOW
📸 INSTAGRAM: / crayon_code
🏷️ HASHTAGS 🏷️
#html #css #tutorial