DEV Community

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

Posted on

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

Top comments (0)