@NegligenceSubmitted about 1 month ago
What are you most proud of, and what would you do differently next time?
I'm very proud of using ```clamp()`` to dynamically resize the width and height of images.
What challenges did you encounter, and how did you overcome them?
Splitting the desktop image in half.
Group Chatfor Everyone
Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.
Download v1.3
What is it?
.hero__image {
overflow-x: hidden;
}
.hero__img {
height: clamp(10rem, 1.4719rem + 36.3868vw, 18.9375rem);
&[src*=desktop] {
display: none;
}
}
@include mobile-media-query(1150px) {
.hero {
max-width: rem(1362px);
grid-auto-flow: column;
margin-inline: auto;
position: relative;
}
.hero__image {
display: none;
}
.hero__img {
&[src*=desktop] {
position: absolute;
display: block;
height: clamp(18.9375rem, 1.125rem + 23.75vw, 22.5rem);
}
&[src*=left] {
left: clamp(-4.875rem, -14.625rem + -21.6667vw, -1.625rem);
}
&[src*=right] {
right: clamp(-4.875rem, -14.625rem + -21.6667vw, -1.625rem);
}
}
}
What specific areas of your project would you like help with?
I want to get the background overlay color right for the footer.
I'm currently using a background-image property in combination with a ::before element with a background color with opacity, but doing so did not get me the exact color from the design.
.footer__content {
position: relative;
place-items: center;
row-gap: var(--s-300);
margin-block-start: rem(108px);
padding: var(--s-800) var(--s-300);
width: 100%;
height: rem(392px);
background-image: url(../images/mobile/image-footer.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
&::before {
content: '';
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: var(--cyan-600-overlay);
}
}
