Hidi_
Hidi_
KPCKevin Powell - Community
Created by Hidi_ on 10/30/2024 in #front-end
Positioning text with absolute with responsiveness
Heyo, I got a card-title that I want to be placed at a certain spot on the page and it needs to be responsive. I thought of using position absolute, since it needs to be on top of a masked image. Here's a video how it's acting right now and the necessary code:
.project-card {
position: relative;
}

.project-card-title {
position: absolute;
z-index: 2;
top: 0%;
right: 7.5%;

font-family: var(--ff-secondary);
font-weight: var(--fw-bold);
}

.project-image {
-webkit-mask-image: url('/assets/images/project-mask.svg');
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;

mask-image: url('/assets/images/project-mask.svg');
mask-size: contain;
mask-repeat: no-repeat;
}
.project-card {
position: relative;
}

.project-card-title {
position: absolute;
z-index: 2;
top: 0%;
right: 7.5%;

font-family: var(--ff-secondary);
font-weight: var(--fw-bold);
}

.project-image {
-webkit-mask-image: url('/assets/images/project-mask.svg');
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;

mask-image: url('/assets/images/project-mask.svg');
mask-size: contain;
mask-repeat: no-repeat;
}
21 replies
KPCKevin Powell - Community
Created by Hidi_ on 10/26/2024 in #front-end
SEO-friendly HTML structure example
Hey there! I got a quick question on structuring my HTML especially on heading-levels. I have a design with eyebrow headings (basically a subtitle but above the title) so the eyebrow will be a h3 and the title a h2. Is it fine to place the h3 eyebrow above the h2 title inside my HTML structure? Or do I bother to do the following, since it brings me more benefits then flaws?
<div class="test">
<h2>This is a title</h2>
<h3>This is an eyebrow subtitle</h3>
</div>
<div class="test">
<h2>This is a title</h2>
<h3>This is an eyebrow subtitle</h3>
</div>
.test {
display: flex;
flex-direction: column-reverse;
}
.test {
display: flex;
flex-direction: column-reverse;
}
117 replies
KPCKevin Powell - Community
Created by Hidi_ on 10/23/2024 in #front-end
Fixing my layout from desktop to phone
No description
24 replies