This is a solution to the Blogr 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 for the site depending on their device's screen size
- See hover states for all interactive elements on the page
Desktop Site | Mobile Site |
---|---|
![]() |
![]() |
- Solution URL: Github Repo
- Live Site URL: Vercel App
- Next.js
- CSS custom properties
- Flexbox
- Mobile-first workflow
Refresher on animations with keyframes. I ended up using the "react-reveal" library for the animations throughout the pages.
.nav__nested-list {
-webkit-animation: scale-in-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-top {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
}
@keyframes scale-in-top {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.nav__nested-list {
animation: none;
-webkit-animation: none;
}
}
Curved sections simply with border-radius
.cta-section {
position: relative;
border-radius: 0 0 0 64px;
}
This was a good practice on flexbox, animations, curved section borders and absolute element layouts.
In general, as I am extremely comfortable with designing responsive webpages now, I'll practice on Nextjs & Redux stack. I want to focus on development with data from a backend server and utilising Redux to manage the state. That said, a deeper dive on CSS Grids will also be on my development roadmap.
- Negative margin - Utilising negative margin to absolutely position the image elements.
- Border-radius - Border-radius documentation to create the curved section.
- Web code tools - User-friendly UI to generate CSS animation.
- LinkedIn - George Teo Xuan Ming
- Frontend Mentor - @Georgetxm