This is a solution to the Chat app CSS illustration challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- Bonus: See the chat interface animate on the initial load
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I did my best on the ui design of the chat app and the two body background colors. I learned the use of flexbox to style the chat app properly.
body::before{
content: '';
position: absolute;
height: 730px;
width: 475px;
top: 0;
left: -100px;
background: var(--body-before-bg-gradient);
border-bottom-right-radius: 400px;
border-bottom-left-radius: 400px;
z-index: -1;
}
body::after{
content: '';
position: absolute;
height: 730px;
width: 470px;
bottom: 0;
right: -125px;
background-color: var(--body-after-bg);
border-top-right-radius: 190px;
border-top-left-radius: 250px;
z-index: -1;
}
- Frontend Mentor - @Trayshmhirk
- Twitter - @TrayShmhirk01