This is a solution to the Meet landing page 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 depending on their device's screen size
- See hover states for interactive elements
- Solution URL: solution URL
- Live Site URL: live site URL
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
header a {
white-space: nowrap;
text-overflow: ellipsis;
} /* prevent text overlapping */
.header_background {
margin-top: 8.125rem;
width: 110%;
margin-left: -5%;
} /* to overlap the parent container */
footer::before {
content:'';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: var(--bg-footer);
} /* to combine background-color and background-image in same container */
hr{
border: none;
border-left: 1px solid hsla(200, 10%, 50%,100);
height: 5.25rem;
width: 1px;
margin: 0 auto;
} /* draw and center vertical line */
- css grid
- responsive webdesign
- responsive images
- coder coder - Transparent background-image
- LinkedIn - Christ-Kevin
- Frontend Mentor - @Christ-Kevin