Hey @yterai,
The desktop design looks amazing! Great job. Also kudos for trying out SCSS for the first time on this challenge.
As others have mentioned, the mobile responsiveness doesn't really work with the recommended size that was provided. Sort of like what @ErayBarslan mentioned, it is actually really good practice to do the mobile-first approach that way you are just changing a few items on the desktop rather than trying to change and add a lot more elements for mobile.
A few suggestions for GitHub and your repositories, make sure to fill out your README.md file. Makes it a bit more polished when checking out your work.
Also for SCSS you could do some interesting things with nested declarations. Although I never used MIXINS and math components, one thing I do like specifically about SCSS is you can keep it all organized by selectors like so,
.register-button {
border: 1px solid $white;
border-radius: 30px;
width: 11.5rem;
height: 3.3rem;
background-color: $white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: rgba($violet, 0.8);
font-size: 1.1rem;
}
.register-button:hover {
background-color: $soft-magenta;
border: $soft-magenta;
color: $white;
cursor: pointer;
}
could have been a bit more simplified by nesting the hover inside the button selector itself like so and using the &.
.register-button {
border: 1px solid $white;
border-radius: 30px;
width: 11.5rem;
height: 3.3rem;
background-color: $white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: rgba($violet, 0.8);
font-size: 1.1rem;
cursor: pointer;
&:hover {
background-color: $soft-magenta;
border: $soft-magenta;
color: $white;
}
}
Keep up the great work and I am looking forward to seeing more from you.
