This is a solution to the Sunnyside agency 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
- Solution URL: Github Repo
- Live Site URL: sunnyside-agency-landing-page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Vanilla JS
- Mobile-first workflow
I took this challenge as this website was a good example to learn regarding UI design and layout. Blending in the different colours and constrasting them nicely, as well as font choice was a good learning experience on what a nice UI will typically look like.
I also had lots of practice with making hamburger menus, CSS Grid and Flexbox. In addition, I also learnt how to manage my CSS classes and HTML better.
Two significant parts that I learnt about CSS here though, were the use of the pseudo elements ::before and ::after, where I used ::before to create the right-angled triangle for my hamburger menu and ::after to create the coloured underlining in the "Learn more" link.
.transform__a::after {
content: '';
display: block;
width: 100%;
border-radius: 5px;
height: 8px;
background: hsl(51, 100%, 49%);
margin-top: -8px;
padding: 0px 4em 0px 4em;
}
.standout__a::after {
content: '';
display: block;
width: 100%;
border-radius: 5px;
height: 8px;
background: hsl(7, 99%, 70%);
margin-top: -8px;
margin-left: 0px;
padding: 0px 4em 0px 4em;
}
.nav-links::before {
content: '';
position: absolute;
bottom: 99.5%;
left: 89.5%;
width: 0;
height: 0;
border-top: 0px solid transparent;
border-right: 33.1px solid white;
border-bottom: 35px solid transparent;
rotate: 90deg;
}
I still think I need to improve my HTML layout better, and be more familiar with the use of pseudoclasses.
- Scrimba - The responsive design course by Kevin Powell helped me with the ::after pseudoclass.
- Stack Overflow - This site helped me find the solution to creating a right-angled triangle plus an understanding of the ::before pseudoclass.
- Frontend Mentor - @kebin20