June is Pride Month. For us - bloggers and creators on the small/indie web (or actually, just anyone who owns a website), there are multiple ways to show your support to the pride community.
I'll show you two ways in which I've customized my website for Pride Month. Let's dive in!
pride.codes
The website pride.codes created some widgets you can easily add to your website, like a corner-piece or a horizontal bar. They make it very easy to add one of those to you own page on the web. My blog has a natural horizontal separator between the main content and the footer, which I decided to Prideify.
I did the following, based on the simple steps outlined on the Pride bars page (it's method 3):
- Add the required stylesheet link to the
<head>of my website:
<link rel="stylesheet" href="https://cdn.pride.codes/css/bar_helpers.css">
- Add the pride strip in the footer section of my website (you can put this anywhere you want):
<div class="pride-strip">
That's it, you're done! Simple as that! On my website, it looks as follows (text continues below the image):
Underlined text input field
A few weeks ago, I styled the input fields on my website to be more in line with my website's theme. Basically, I gave input fields the same color as my website's background and underlined the field with a bottom border.
In its simplest form. this looks as follows:
The bottom border is an excellent candidate to update for Pride Month by changing the line color from white to a rainbow gradient. I used a ombination of border-image and border-image-slice to make this work. I just added these two lines to the style of my text input fields:
linear-gradient(to left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%)- `border-image-slice: 1
The linear-gradient takes the rainbow colors and connects them together from right to left. The value for border-image-slice ensures the gradient is used for the border correctly.
The result looks as follows: