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: Add solution URL here
- Live Site URL: Add live site URL here
- Flexbox
- CSS Grid
- Mobile-first workflow
For this project, I had to make use of the ::before and ::after pseudo elements on my own for the first time. I used these to make the two numbers that had circles around them with a verticle line on the top:
.circle-number {
position: relative;
display: inline;
}
.circle-number::before {
content: "";
border: 1px solid #87879D;
opacity: .25;
height: 90px;
position: absolute;
top: -110px;
left: 12px;
}
.circle-number::after {
content: "";
padding: 30px 30px;
border: 1px solid #87879D;
opacity: .4;
border-radius: 100%;
position: absolute;
inset: 0;
left: -19px;
top: -19px;
}
I am happy with the solution I came up with, it looks pretty spot on and seems to maintain its look no matter what the screen size is. However, I could not quite figure out how to get the second one to overlap with the footer in teh same way as the design file shows.
I would like to start writing more semantic HTML, and start making accessibility a much larger focus as I get more comfortable building out pages.
I also need to do more research and practice with background-image. I could not figure out how to achieve the same look for the footer that was in the design file.
- GitHub - shawncocklin
- Frontend Mentor - @shawncocklin