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
Desktop:
Mobile:
- Solution URL: My solution
- Live Site URL: My Live Site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Sass
- Gulp
I got the chance to practice my CSS Grid skills and working with Sass and Gulp. I didn't necessarily learn something new, I rather practiced on the skills I knew I could need some tinkering with. I also got to practice my responsive skills and writing clean and semantic HTML.
To see how you can add code snippets, see below:
<a href="#" class="logo">
<img src="dist/images/logo.svg" alt="this is the logo" />
</a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a href="#" class="nav__link">
<strong>About</strong>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">
<strong>Services</strong>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">
<strong>Projects</strong>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link --nav__button">
<strong>Contact</strong>
</a>
</li>
</ul>
</nav>
<a class="hamburger" href="#">
<img src="dist/images/icon-hamburger.svg" alt="hamburger" />
</a>
</div>
<div class="dropdown">
<nav class="dropdown__nav">
<ul class="nav__list">
<li class="nav__item">
<a href="#" class="nav__link">
<strong>About</strong>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">
<strong>Services</strong>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">
<strong>Projects</strong>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link --nav__button">
<strong>Contact</strong>
</a>
</li>
</ul>
</nav>.dropdown {
width:80%;
padding:.5rem;
margin:0 auto;
margin-top:3rem;
background:$White;
position:absolute;
display:none;
transition: .9s ease-in-out;
nav{
display:flex;
justify-content:center;
}
.nav__list {
padding:2rem;
flex-direction:column;
align-items: center;
gap:2rem;
}
.nav__link {
color:$Darkgrayishblue;
}
.--nav__button {
background:$Yellow;
color:$VerydarkBlue;
&:hover{
background:inherit;
}
}
}const hamburger = document.querySelector(".hamburger");
const dropdown = document.querySelector(".dropdown");
hamburger.addEventListener("click", (e) => {
dropdown.classList.toggle("open");
});Now as I feel quite comfortable with CSS, HTML and other skills like Sass and Gulp, then I'm gonna try to learn a JS framework. I'm thinking of starting with Vue.js and then learning other frameworks like React, if need be. When I feel comfortable enough with that, then I'm thinking of practicing my JS framework in a frontendmentor challenge.
- W3 Schools - This helped me when I forgot how to use the
<picture>-element and<source>-element.
- Website - My website
- Frontend Mentor - @Purplehippo911
- Discord - mashedapples222#7574
I was quite inspired by this soulution, and would recommend you to check it out. This soulution is made by Davidlloyd8 and his teammates. Check out their project here: Davidlloyd8's solution