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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

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

Okay