The Layout was a bit confusing, but CSS's flexbox did the trick.
What specific areas of your project would you like help with?Any feedback would be appreciated.
The Layout was a bit confusing, but CSS's flexbox did the trick.
What specific areas of your project would you like help with?Any feedback would be appreciated.
✋Hey ShoaibShuja,
I just wanted to give you a huge shout-out for completing your latest Frontend Mentor challenge! 🎉.
It's clear that you've put a lot of effort into this project, and the results speak for themselves.
As someone who also tackles these challenges, I know how much effort it takes to get everything just right
But,
as coder i want tell you some tips that will help in further developing journey:
CSS
Reduce repetition by using common classes or mixins for similar styles. css
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.news__header-navbar,
.news__content,
.news__content-article,
.news__content-left,
.news__content-right,
.other__box {
@apply .flex-center;
}
2 Responsive Design Improvements:
3 Font Size and Line Height
body {
font-size: 1rem; /* 16px */
line-height: 1.5;
}
.news__content-article h1 {
font-size: 2rem; /* 32px */
}
.news__content-article_text p,
.next__news p {
font-size: 0.9375rem; /* 15px */
}
3 Transition Properties:
.news__header-navbar {
transition: transform 0.5s ease;
}
.news__header-navbar {
transform: translateX(100%);
position: fixed;
top: 0;
left: 30%;
width: 100%;
min-height: 100vh;
flex-direction: column;
padding: 8rem 2rem;
align-items: flex-start;
justify-content: flex-start;
background: var(--color-off-white);
transition: 0.5s ease; // here
}
** HTML**
Overall your code is good✨.
Keep it up and do code daily to be best programmer😎. By applying and addressing above tips you can be better