Responsive Profile Card with Flexbox
Watch part 1 here: https://www.youtube.com/watch?v=Aje9cXDzklk&t=742s
In this video I go over how to make the layout of these profile cards responsive with Flexbox. In my previous video I go over how to create the profile card from scratch with HTML and CSS. In that video I used CSS grid for the layout, for this video I wanted to make a responsive design with Flexbox.
Codepen: https://codepen.io/angeladelise/pen/XWmBQoK
In this video I show you:
0:29 - Starting HTML Code
2:30 - Display Flex
3:03 - Set Container Width
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
Видео Responsive Profile Card with Flexbox канала Angela Design
In this video I go over how to make the layout of these profile cards responsive with Flexbox. In my previous video I go over how to create the profile card from scratch with HTML and CSS. In that video I used CSS grid for the layout, for this video I wanted to make a responsive design with Flexbox.
Codepen: https://codepen.io/angeladelise/pen/XWmBQoK
In this video I show you:
0:29 - Starting HTML Code
2:30 - Display Flex
3:03 - Set Container Width
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
Видео Responsive Profile Card with Flexbox канала Angela Design
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Figma Interactive Components | Figma Variants Tutorial](https://i.ytimg.com/vi/73VC2KUJ1Ks/default.jpg)
![Figma Hover | Figma Button Hover Effect with Smart Animate](https://i.ytimg.com/vi/C8m0_QnKQ6Y/default.jpg)
![Responsive React Cards | Mobile First Shopping Cards](https://i.ytimg.com/vi/3_gakM-y7hE/default.jpg)
![Loading Animation HTML CSS](https://i.ytimg.com/vi/012bgAQ8ImU/default.jpg)
![Figma After Delay Animation | Overlay Prototype](https://i.ytimg.com/vi/sBHFo3EpM24/default.jpg)
![Image Gallery Blur Hover Effect | Figma Prototype to HTML CSS](https://i.ytimg.com/vi/fBqx6iEr4T0/default.jpg)
![Dropdown Navigation Menu with Flexbox](https://i.ytimg.com/vi/nhlF3wRPkug/default.jpg)
![Notification Pop Up | Custom Alert HTML CSS JS](https://i.ytimg.com/vi/pbg6uLXm5gc/default.jpg)
![Animating Tab Bar | HTML CSS JS Tutorial](https://i.ytimg.com/vi/i6sHYDm1B_4/default.jpg)
![Figma Dropdown Menu with Variants | Figma Prototype Tutorial](https://i.ytimg.com/vi/hZd0s8yN0Io/default.jpg)
![React Cards with Props | UI Card Design with React JS](https://i.ytimg.com/vi/4KxHcbQ8GYQ/default.jpg)
![Stylized Table Design from Figma to HTML CSS | Table from Scratch](https://i.ytimg.com/vi/Oy9K7iz3aa4/default.jpg)
![Create a modal from scratch | HTML CSS & JavaScript](https://i.ytimg.com/vi/lMFGxNURNQE/default.jpg)
![Sign Up Form HTML CSS | Create a Sign Up Form with Animated Input Fields](https://i.ytimg.com/vi/pfwEz3Zo4mA/default.jpg)
![React Counter | Simple Counter with React Hooks](https://i.ytimg.com/vi/65kX31klmtI/default.jpg)
![Search Box Animation from Scratch | Search Icon to Input Field Animation](https://i.ytimg.com/vi/r0djWvfiQrA/default.jpg)
![Input Animations with HTML and CSS | Input Label Animation](https://i.ytimg.com/vi/v8mRUU3orjI/default.jpg)
![Responsive Navigation Bar Only CSS | Mobile First Design](https://i.ytimg.com/vi/SIzi9z8mrTk/default.jpg)
![Add Button Animation from Scratch | HTML CSS Vanilla JS | Code Explained](https://i.ytimg.com/vi/I5uTel-Mzh0/default.jpg)
![Styled Table Design with HTML & CSS | Dribbble UI Design to Code](https://i.ytimg.com/vi/GUqigUJyh-k/default.jpg)
![Profile Image Hover Effect | HTML CSS Tutorial](https://i.ytimg.com/vi/dCoM34Knlxo/default.jpg)