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)