websmith
KPCKevin Powell - Community
•Created by websmith on 12/4/2023 in #front-end
Ideas for placing curved SVG graphic over two sections?
3 replies
KPCKevin Powell - Community
•Created by websmith on 3/10/2023 in #front-end
Cannot remember the title of one of Kevin's videos
Can anyone remember one of Kevins videos where he was talking about how we often set margin top and bottom: on H and P tags which then causes an issues where we do not want margin tops on headings etc. He mentioned that there was a way to do this this with * ~ * or something similar?
I hope that makes some kind of sense.
Cheers.
6 replies
KPCKevin Powell - Community
•Created by websmith on 3/8/2023 in #front-end
Best approach to add an SVG image positioned bottom of a ClipPath.
Hey guys and gals,
Firstly, thanks for taking the time to checkout my question. Any help or insight is appreciated, spent a good part of today with no success unfortunately. We're currently building a basic portfolio site for a client. The client has provided a UI of what they want their website to look like (don't judge).
The Problem:
We're having issues developing the header to work and look as the client has requested. The header has a custom curve in it, it is sticky, and it obviously needs to be responsive. We have achieved this using SVG Clip Paths. The remaining issue is that the client has a customised border line that needs to sit at the bottom of the header. For the life of us, we cannot seem to nail this.
Staging Link:
I have uploaded the work to our staging server, see below.
https://dev.websmith.studio/tszxstudio/
The line under the header, is currently being done by wrapping the header in a container and using a filter drop-shadow. Unfortunately, this is not sufficient. We need this line to display there ' https://dev.websmith.studio/tszxstudio/assets/img/line-path.svg'.
Thank you again,
Ben 🧡
6 replies