DEV Community

Cover image for Frontend Mentor.io Challenge: Designo Agency
AjeaS
AjeaS

Posted on

1

Frontend Mentor.io Challenge: Designo Agency

Project Name: Designo Agency

Level: Guru (Hard)

Source code

Live Site


Setup: I used Vite with Sass and deployed with Vercel.

Overview: Out of all the projects I've done on this site, this is one of my favorites, mostly because I've learned so much. I used a combination of chatGPT, CSS god Kevin Powell, and Coder Coder throughout this project.

Things I learned

  • Positioning PNG images with object-fit and object position (helpful link)
  • On mobile, show overlay when the mobile menu is open (helpful video by Kevin Powell)
  • For loops in SCSS for background images (chatGPT).
  • Rotation of background images (chatGPT)

Positioning PNG images with object-fit and object position

The problem: I couldn't figure out how to position the image to be tucked within the hero section like the image below.

Home page hero section

My solution: I wrapped the image in a container and added a position relative to the container.

Then, I positioned the image using object-fit and object-position. I could have used position:absolute for the image. However, I was having some issues with the sizing of the image fitting properly within the container. object-fit:none fixed this, that's when I discovered I could position it using object-position.

Lastly, I added an overflow:hidden on the entire section to hide the overlap of the image. Which gave it the tucked-in effect as desired.

&__image {
        position: relative;
        top: -180px;

        img {
            margin-inline: auto;
            object-fit: none;
            object-position: center top;
        }
    }

Enter fullscreen mode Exit fullscreen mode

For loops in SCSS for background images (chatGPT)

The Problem: Since I'm not using any framework in this project, there was a lot of duplicate code happening (had very little js, so I didn't want to whip out react).

The Solution: With the help of chatGPT, I discovered you can do loops in SCSS. I needed this for background images.

End result
Image description

With this loop, I was able to set background images and hover states to my category items.

@for $i from 1 through 3 {
        &--bg#{$i} {
            $image: "";
            $hoverColor: rgba(231, 129, 107, 0.8);

            @if $i == 1 {
                $image: "image-web-design-large.jpg";
            } @else if $i == 2 {
                $image: "image-app-design.jpg";
            } @else if $i == 3 {
                $image: "image-graphic-design.jpg";
            }

            cursor: pointer;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url("/assets/home/desktop/#{$image}");

            &:hover {
                background-image: linear-gradient($hoverColor, $hoverColor),
                    url("/assets/home/desktop/#{$image}");
            }
        }
    }

Enter fullscreen mode Exit fullscreen mode

html for clarity

<body>
    <div class="category__item category--bg1">
        <h3>Web Design</h3>
        <a href="/web/index.html" class="category__link">
            <p>View Projects</p>
            <img src="/assets/shared/desktop/icon-right-arrow.svg" alt="icon-right-arrow" />
        </a>
    </div>

    <div class="category__item-container">
        <div class="category__item category--bg2">
            <h3>App Design</h3>
            <a href="/app/index.html" class="category__link">
                <p>View Projects</p>
                <img src="/assets/shared/desktop/icon-right-arrow.svg" alt="icon-right-arrow" />
            </a>
        </div>

        <div class="category__item category--bg3">
            <h3>Graphic Design</h3>
            <a href="/graphic/index.html" class="category__link">
                <p>View Projects</p>
                <img src="/assets/shared/desktop/icon-right-arrow.svg" alt="icon-right-arrow" />
            </a>
        </div>
</body>
Enter fullscreen mode Exit fullscreen mode

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay