CSS Example Submission

[calvinmorett]

Use the following css variables to create new multicolored CSS examples: --first, --second, --third, --fourth

Create a new .html and .css file with your examples

[Pulkitxm]

hey I am a bit confused with that , could you please elaborate and tell

[calvinmorett]

@Pulkitxm Hey, simply make an .html + .css file with your examples.

[calvinmorett]

@Pulkitxm

Here's an example of what I was try to explain, but probably didn't do a good job of communicating that well.

<style>
:root{
    --first:#0f75b7;
    --second:#039dff;
    --third:#59bfff;
    --fourth:#acdfff;
}
hex{
    font-size: 135px
}
hex:nth-of-type(1){
    color:var(--first);
}
hex:nth-of-type(2){
    color:var(--second);
}
hex:nth-of-type(3){
    color:var(--third);
}
hex:nth-of-type(4){
    color:var(--fourth);
}
</style>

<hex>&#x2B22;</hex>
<hex>&#x2B22;</hex>
<hex>&#x2B22;</hex>
<hex>&#x2B22;</hex>

I've utilized the following css variables, within hex.blue. --first, --second, --third, --fourth.

Whenever a user goes to the website a color is generated from one side, to the other side of a gradient. That gradient is split into a pieces, in this case I only show 4. Within those colors I add the values of those colors to the CSS variables, so they're easy to use everywhere within the page.

In the example above, there are four inline elements, called hex.

Using the :nth-of-type() selector, I'm passing in those CSS variables. I've added those colors in the CSS, that I've placed directly into the HTML, within the style tag.

---

Let me know if this is easier to understand, if not, I will try to help you further. I've just considered elements that are easy to understand where the colors are seperated from, and fun besides just a few squares that gradient downward. e.g.

[Pulkitxm]

yeah now It's a bit clear for me to start , gimme some to time finish this , thanks !