ail3ngrimaldi
KPCKevin Powell - Community
•Created by ail3ngrimaldi on 1/2/2024 in #front-end
Create an underline effect using clip-path and svg
Awesome, thank u!
11 replies
KPCKevin Powell - Community
•Created by ail3ngrimaldi on 1/2/2024 in #front-end
Create an underline effect using clip-path and svg
am i supposed to add the path in the content property or where? looked up on google but still got no answers at least not working ones.
11 replies
KPCKevin Powell - Community
•Created by ail3ngrimaldi on 1/2/2024 in #front-end
Create an underline effect using clip-path and svg
I have more updates for this, with the background property I was able to add color to the path, now the problem is that I cant see the text, the only thing I see is the path even using a
z-index: -999
I'll try some things that Chat-gpt suggested and then get the updates here in case anyone is struggling with clip-paths too.11 replies
KPCKevin Powell - Community
•Created by ail3ngrimaldi on 1/2/2024 in #front-end
Create an underline effect using clip-path and svg
11 replies
KPCKevin Powell - Community
•Created by ail3ngrimaldi on 1/2/2024 in #front-end
Create an underline effect using clip-path and svg
The clip-path is being added to a <span> element.
The fill property was on the svg. I also tried using background-color, which I'm not sure if was the right thing to do. I don't know where to add the fill property with the way Im adding the path rn.
11 replies
KPCKevin Powell - Community
•Created by ail3ngrimaldi on 10/16/2023 in #front-end
Is it possible to adjust section heights for different screen sizes?
That's actually right on desktop and tablets, but on mobile views the content between sections vertically overlaps.
9 replies
KPCKevin Powell - Community
•Created by ail3ngrimaldi on 10/16/2023 in #front-end
Is it possible to adjust section heights for different screen sizes?
This is on layout.css :
html, body { all: initial; display: block; scroll-behavior: smooth; }
body { display: flex; flex-direction: column; height: 100vh; background: var(--clr-olive-darker); font-family: var(--font-primary); color: var(--color-text); margin-top: var(--nav-height); }9 replies
KPCKevin Powell - Community
•Created by ail3ngrimaldi on 10/16/2023 in #front-end
Is it possible to adjust section heights for different screen sizes?
This is on common.css :
* { margin: 0; padding: 0; font-family: var(--font-primary); box-sizing: border-box;}
a, button { text-decoration: none; cursor: pointer; }
main { display: flex; flex-direction: column; }
section { flex: 1; display: flex; padding: calc(2rem + 5vmin) calc(1rem + 4vmin); padding-top: var(--nav-height); }
section>article {
display: flex;
justify-content: center;
}9 replies
KPCKevin Powell - Community
•Created by ail3ngrimaldi on 10/16/2023 in #front-end
Is it possible to adjust section heights for different screen sizes?
9 replies
KPCKevin Powell - Community
•Created by ail3ngrimaldi on 10/16/2023 in #front-end
Is it possible to adjust section heights for different screen sizes?
Sorry, I wasn't able to add it bc I hadn't access to a bigger screen.
Here are the pictures and the code:
9 replies