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.
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; } } 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
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}"); } } } 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> 
Top comments (0)