Organic Onboarding CSS JS Content Slider with Blended…

Utilities Bootstrap 5Free+ CSS+ JS

Add a utility to your UI with Organic Onboarding CSS JS Content Slider with Blended…. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.

2.3k views59 downloads4 years ago

gosnippets.com/preview/organic-onboarding-css-js-content-slider-with-blended…

Source Code

1<main id="app">
2  
3  <section class="backgrounds">
4    <div 
5         class="background" 
6         style="--primary: var(--pink); --secondary: var(--orange)">
7    </div>
8    <div 
9         class="background" 
10         data-active="true" style="--primary: var(--purple); --secondary: var(--pink)">
11    </div>
12    <div 
13         class="background" 
14         style="--primary: var(--green); --secondary: var(--cyan)">
15    </div>
16    <div 
17         class="background" 
18         style="--primary: var(--blue); --secondary: var(--purple)">
19    </div>
20  </section>
21  
22  <section class="content">
23    <article>
24      <header>
25        <h1>Get the middle seat if you don't check in on time</h1>
26      </header>
27      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
28    </article>
29    <article data-active="true" >
30      <header>
31        <h1>Your boarding zone is "recruiter"</h1>
32      </header>
33      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, reiciendis.</p>
34    </article>
35    <article data-id="3" >
36      <header>
37        <h1>Check in for your flight online</h1>
38      </header>
39      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet dignissimos corporis dolor.</p>
40    </article>
41    <article data-id="4">
42      <header>
43        <h1>Get through security eventually</h1>
44      </header>
45      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint eaque adipisci sit?</p>
46    </article>
47  </section>
48</main>

More Utilities snippets

Auto move mouse cursor snippet

Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.

UtilitiesView →

Bootstrap 5 Ecommerce Product Detail Page Design snippet

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Bootstrap 5 Ecommerce single product page design template

Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

UtilitiesView →

Comments(0)

No comments yet — be the first to start the discussion.

1<main id="app"> 2 3 <section class="backgrounds"> 4 <div 5 class="background" 6 style="--primary: var(--pink); --secondary: var(--orange)"> 7 </div> 8 <div 9 class="background" 10 data-active="true" style="--primary: var(--purple); --secondary: var(--pink)"> 11 </div> 12 <div 13 class="background" 14 style="--primary: var(--green); --secondary: var(--cyan)"> 15 </div> 16 <div 17 class="background" 18 style="--primary: var(--blue); --secondary: var(--purple)"> 19 </div> 20 </section> 21 22 <section class="content"> 23 <article> 24 <header> 25 <h1>Get the middle seat if you don't check in on time</h1> 26 </header> 27 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> 28 </article> 29 <article data-active="true" > 30 <header> 31 <h1>Your boarding zone is "recruiter"</h1> 32 </header> 33 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, reiciendis.</p> 34 </article> 35 <article data-id="3" > 36 <header> 37 <h1>Check in for your flight online</h1> 38 </header> 39 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet dignissimos corporis dolor.</p> 40 </article> 41 <article data-id="4"> 42 <header> 43 <h1>Get through security eventually</h1> 44 </header> 45 <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint eaque adipisci sit?</p> 46 </article> 47 </section> 48</main>