Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
1
2<section class="gs-stage">
3 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
4 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
5 <div class="gs-grid-overlay" aria-hidden="true"></div>
6 <div class="gs-card">
7 <div class="gs-card-inner">
8 <header class="gs-header">
9 <h1 class="gs-title">Schedule Your Events</h1>
10 <p class="gs-subtitle">Select time ranges by dragging across the calendar</p>
11 </header>
12 <div class="gs-calendar">
13 <div class="gs-day-row">
14 <svg class="gs-icon" xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#A7E9DE">
15 <path d="M19 3H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H5V8h14v13zm0-15H5V5h14v1z"></path>
16 </svg>
17 <span>Monday</span>
18 <div class="gs-time-slot"></div>
19 </div>
20 <div class="gs-day-row">
21 <svg class="gs-icon" xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#A7E9DE">
22 <path d="M19 3h-4V2h-2v1H9V2H7v1H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 5h14v1H5V5zm0 2h14v14H5V7z"></path>
23 </svg>
24 <span>Tuesday</span>
25 <div class="gs-time-slot"></div>
26 </div>
27
28 <div class="gs-day-row">
29 <svg class="gs-icon" xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#A7E9DE">
30 <path d="M19 3h-4V2h-2v1H9V2H7v1H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 5h14v1H5V5zm0 2h14v14H5V7z"></path>
31 </svg>
32 <span>Wednesday</span>
33 <div class="gs-time-slot"></div>
34 </div>
35
36 </div>
37 </div>
38 </div>
39</section>
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.
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.
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.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.