Frontend Mentor.io Challenge: Designo Agency
Tags: html, javascript, frontend, css
Published: 2024-04-13 14:01:42

## Project Name: [Designo Agency](https://www.frontendmentor.io/challenges/designo-multipage-website-G48K6rfUT) 

### Level: Guru (Hard)
### [Source code](https://github.com/AjeaSmith/fem-designo-guru)
### [Live Site](https://fem-designo-guru.vercel.app/)

---


**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)](https://www.geeksforgeeks.org/how-to-set-position-of-an-image-in-css/)
- On mobile, show overlay when the mobile menu is open ([helpful video by Kevin Powell](https://www.youtube.com/watch?v=zPHMqqyD2kY))
- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u03dfbb7xkyyxrnny32a.png)

**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.

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

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

```

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iggvuzcry7u3ww7q948j.png)

With this loop, I was able to set background images and hover states to my category items.
```sass
@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}");
            }
        }
    }

```
html for clarity

```html
<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>
```