Foundation

Card List

Card Text

Page

Form

Footer

Button

Component

Card 3

This card has a footer and a button for interaction.

Last updated 5 mins ago Details

Card 3

This card has a footer and a button for interaction.

Last updated 5 mins ago Details

Card 3

This card has a footer and a button for interaction.

Last updated 5 mins ago Details

              
              
              
  
    
      
      
        Card 3
        This card has a footer and a button for interaction.
      
      
        Last updated 5 mins ago
        Details
      
    
  

  
    
      
      
        Card 3
        This card has a footer and a button for interaction.
      
      
        Last updated 5 mins ago
        Details
      
    
  

  
    
      
      
        Card 3
        This card has a footer and a button for interaction.
      
      
        Last updated 5 mins ago
        Details

Featured

Card 8

This card has a badge overlay on the image.

Card 8

This card has a badge overlay on the image.

Card 8

This card has a badge overlay on the image.

Card 3

A card with a vertical alignment for image and text.

Card 3

A card with a vertical alignment for image and text.

Card 3

A card with a vertical alignment for image and text.

                                  
                              
                              <div class="grid-container py-5">
  <div class="grid-x grid-margin-x small-up-1 medium-up-3">
    <div class="cell">
      <div class="card">
        <div class="card-section d-flex align-middle">
          <div>
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">A card with a vertical alignment for image and text.</p>
          </div>
          <img src="https://dummyimage.com/722x402" class="thumbnail radius" style="width: 120px;" alt="...">
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card">
        <div class="card-section d-flex align-middle">
          <div>
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">A card with a vertical alignment for image and text.</p>
          </div>
          <img src="https://dummyimage.com/722x402" class="thumbnail radius" style="width: 120px;" alt="...">
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card">
        <div class="card-section d-flex align-middle">
          <div>
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">A card with a vertical alignment for image and text.</p>
          </div>
          <img src="https://dummyimage.com/722x402" class="thumbnail radius" style="width: 120px;" alt="...">
        </div>
      </div>
    </div>
  </div>
</div>

Card 4

A card with a list group to show details.

Item 1
Item 2
Item 3

Card 4

A card with a list group to show details.

Item 1
Item 2
Item 3

Card 4

A card with a list group to show details.

Item 1
Item 2
Item 3

                      
                      
                      <div class="grid-container py-5">
  <div class="grid-x grid-margin-x small-up-1 medium-up-3">
    <div class="cell">
      <div class="card">
        <div class="card-section">
          <h5 class="card-title">Card 4</h5>
          <p class="card-text">A card with a list group to show details.</p>
          <ul class="vertical menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card">
        <div class="card-section">
          <h5 class="card-title">Card 4</h5>
          <p class="card-text">A card with a list group to show details.</p>
          <ul class="vertical menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card">
        <div class="card-section">
          <h5 class="card-title">Card 4</h5>
          <p class="card-text">A card with a list group to show details.</p>
          <ul class="vertical menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Card 23

This card includes a badge for notifications.

Notifications 5

New Comment
Friend Request
System Update

Card 23

This card includes a badge for notifications.

Notifications 5

New Comment
Friend Request
System Update

Card 23

This card includes a badge for notifications.

Notifications 5

New Comment
Friend Request
System Update

                      
                      
                      <div class="grid-container py-5">
  <div class="grid-x grid-margin-x small-up-1 medium-up-3">
    <div class="cell">
      <div class="card">
        <div class="card-section">
          <h5 class="card-title">Card 23</h5>
          <p class="card-text">This card includes a badge for notifications.</p>
          <h6 class="mb-3">
            Notifications <span class="badge bg-danger">5</span>
          </h6>
          <ul class="vertical menu">
            <li><a href="#">New Comment</a></li>
            <li><a href="#">Friend Request</a></li>
            <li><a href="#">System Update</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card">
        <div class="card-section">
          <h5 class="card-title">Card 23</h5>
          <p class="card-text">This card includes a badge for notifications.</p>
          <h6 class="mb-3">
            Notifications <span class="badge bg-danger">5</span>
          </h6>
          <ul class="vertical menu">
            <li><a href="#">New Comment</a></li>
            <li><a href="#">Friend Request</a></li>
            <li><a href="#">System Update</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card">
        <div class="card-section">
          <h5 class="card-title">Card 23</h5>
          <p class="card-text">This card includes a badge for notifications.</p>
          <h6 class="mb-3">
            Notifications <span class="badge bg-danger">5</span>
          </h6>
          <ul class="vertical menu">
            <li><a href="#">New Comment</a></li>
            <li><a href="#">Friend Request</a></li>
            <li><a href="#">System Update</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Card 25

A dark-themed card with an accordion.

This is the first item's accordion body.

This is the second item's accordion body.

Card 25

A dark-themed card with an accordion.

This is the first item's accordion body.

This is the second item's accordion body.

Card 25

A dark-themed card with an accordion.

This is the first item's accordion body.

This is the second item's accordion body.

                      
                      
                      <div class="grid-container py-5">
  <div class="grid-x grid-margin-x small-up-1 medium-up-3">
    <div class="cell">
      <div class="card has-dark-bg">
        <div class="card-section">
          <h5 class="card-title">Card 25</h5>
          <p class="card-text">A dark-themed card with an accordion.</p>
          <div class="accordion" id="accordion25">
            <div class="accordion-item">
              <div class="accordion-title">
                <button class="accordion-button" data-toggle="collapse" data-target="#collapseOne">
                  Accordion Item #1
                </button>
              </div>
              <div id="collapseOne" class="accordion-content is-active">
                <p>This is the first item's accordion body.</p>
              </div>
            </div>
            <div class="accordion-item">
              <div class="accordion-title">
                <button class="accordion-button" data-toggle="collapse" data-target="#collapseTwo">
                  Accordion Item #2
                </button>
              </div>
              <div id="collapseTwo" class="accordion-content">
                <p>This is the second item's accordion body.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card has-dark-bg">
        <div class="card-section">
          <h5 class="card-title">Card 25</h5>
          <p class="card-text">A dark-themed card with an accordion.</p>
          <div class="accordion" id="accordion25">
            <div class="accordion-item">
              <div class="accordion-title">
                <button class="accordion-button" data-toggle="collapse" data-target="#collapseOne">
                  Accordion Item #1
                </button>
              </div>
              <div id="collapseOne" class="accordion-content is-active">
                <p>This is the first item's accordion body.</p>
              </div>
            </div>
            <div class="accordion-item">
              <div class="accordion-title">
                <button class="accordion-button" data-toggle="collapse" data-target="#collapseTwo">
                  Accordion Item #2
                </button>
              </div>
              <div id="collapseTwo" class="accordion-content">
                <p>This is the second item's accordion body.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card has-dark-bg">
        <div class="card-section">
          <h5 class="card-title">Card 25</h5>
          <p class="card-text">A dark-themed card with an accordion.</p>
          <div class="accordion" id="accordion25">
            <div class="accordion-item">
              <div class="accordion-title">
                <button class="accordion-button" data-toggle="collapse" data-target="#collapseOne">
                  Accordion Item #1
                </button>
              </div>
              <div id="collapseOne" class="accordion-content is-active">
                <p>This is the first item's accordion body.</p>
              </div>
            </div>
            <div class="accordion-item">
              <div class="accordion-title">
                <button class="accordion-button" data-toggle="collapse" data-target="#collapseTwo">
                  Accordion Item #2
                </button>
              </div>
              <div id="collapseTwo" class="accordion-content">
                <p>This is the second item's accordion body.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Card 7

This card uses a table to organize information.

Feature	Details
Speed	Fast
Reliability	High

Card 7

This card uses a table to organize information.

Feature	Details
Speed	Fast
Reliability	High

Card 7

This card uses a table to organize information.

Feature	Details
Speed	Fast
Reliability	High

                      
                      
                      <div class="grid-container py-5">
  <div class="grid-x grid-margin-x small-up-1 medium-up-3">
    <div class="cell">
      <div class="card bg-light">
        <div class="card-section">
          <h5 class="card-title">Card 7</h5>
          <p class="card-text">This card uses a table to organize information.</p>
          <table class="hover stack">
            <thead>
              <tr>
                <th>Feature</th>
                <th>Details</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Speed</td>
                <td>Fast</td>
              </tr>
              <tr>
                <td>Reliability</td>
                <td>High</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card bg-light">
        <div class="card-section">
          <h5 class="card-title">Card 7</h5>
          <p class="card-text">This card uses a table to organize information.</p>
          <table class="hover stack">
            <thead>
              <tr>
                <th>Feature</th>
                <th>Details</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Speed</td>
                <td>Fast</td>
              </tr>
              <tr>
                <td>Reliability</td>
                <td>High</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card bg-light">
        <div class="card-section">
          <h5 class="card-title">Card 7</h5>
          <p class="card-text">This card uses a table to organize information.</p>
          <table class="hover stack">
            <thead>
              <tr>
                <th>Feature</th>
                <th>Details</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Speed</td>
                <td>Fast</td>
              </tr>
              <tr>
                <td>Reliability</td>
                <td>High</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Card Header

Card 8

This card uses a header and footer to frame its content.

Footer Text

Card Header

Card 8

This card uses a header and footer to frame its content.

Footer Text

Card Header

Card 8

This card uses a header and footer to frame its content.

Footer Text

                      
                      
                      <div class="grid-container py-5">
  <div class="grid-x grid-margin-x small-up-1 medium-up-3">
    <div class="cell">
      <div class="card">
        <div class="card-divider text-center primary">
          Card Header
        </div>
        <div class="card-section">
          <h5 class="card-title">Card 8</h5>
          <p class="card-text">This card uses a header and footer to frame its content.</p>
        </div>
        <div class="card-footer text-center muted">
          Footer Text
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card">
        <div class="card-divider text-center primary">
          Card Header
        </div>
        <div class="card-section">
          <h5 class="card-title">Card 8</h5>
          <p class="card-text">This card uses a header and footer to frame its content.</p>
        </div>
        <div class="card-footer text-center muted">
          Footer Text
        </div>
      </div>
    </div>

    <div class="cell">
      <div class="card">
        <div class="card-divider text-center primary">
          Card Header
        </div>
        <div class="card-section">
          <h5 class="card-title">Card 8</h5>
          <p class="card-text">This card uses a header and footer to frame its content.</p>
        </div>
        <div class="card-footer text-center muted">
          Footer Text
        </div>
      </div>
    </div>
  </div>
</div>

Our Team

Discover the amazing individuals behind our success, working together to make a difference.

John Doe

UI Developer

Creating seamless user experiences and innovative interfaces with a touch of creativity.

Jane Smith

Graphic Designer

Crafting stunning visual designs that inspire and captivate audiences worldwide.

Emily Brown

Software Engineer

Developing robust and scalable solutions to power innovative technologies.

                      
                      
                      <section class="bg-light py-5">
  <div class="grid-container">
    <div class="text-center mb-5">
      <h1 class="display-6 fw-bold text-dark text-uppercase mb-4">Our Team</h1>
      <p class="lead text-muted">Discover the amazing individuals behind our success, working together to make a difference.</p>
    </div>
    <div class="grid-x grid-margin-x medium-up-3">
      <div class="cell">
        <div class="d-flex align-items-center">
          <img src="https://dummyimage.com/200x200" alt="team member" class="rounded-circle mr-4" width="100" height="100">
          <div>
            <h5 class="fw-bold text-dark">John Doe</h5>
            <p class="text-muted mb-1">UI Developer</p>
            <p class="text-muted small">Creating seamless user experiences and innovative interfaces with a touch of creativity.</p>
            <div class="d-flex">
              <a href="#" class="text-muted mr-3"><i class="bi bi-facebook"></i></a>
              <a href="#" class="text-muted mr-3"><i class="bi bi-twitter"></i></a>
              <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="d-flex align-items-center">
          <img src="https://dummyimage.com/201x201" alt="team member" class="rounded-circle mr-4" width="100" height="100">
          <div>
            <h5 class="fw-bold text-dark">Jane Smith</h5>
            <p class="text-muted mb-1">Graphic Designer</p>
            <p class="text-muted small">Crafting stunning visual designs that inspire and captivate audiences worldwide.</p>
            <div class="d-flex">
              <a href="#" class="text-muted mr-3"><i class="bi bi-facebook"></i></a>
              <a href="#" class="text-muted mr-3"><i class="bi bi-twitter"></i></a>
              <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="cell">
        <div class="d-flex align-items-center">
          <img src="https://dummyimage.com/204x204" alt="team member" class="rounded-circle mr-4" width="100" height="100">
          <div>
            <h5 class="fw-bold text-dark">Emily Brown</h5>
            <p class="text-muted mb-1">Software Engineer</p>
            <p class="text-muted small">Developing robust and scalable solutions to power innovative technologies.</p>
            <div class="d-flex">
              <a href="#" class="text-muted mr-3"><i class="bi bi-facebook"></i></a>
              <a href="#" class="text-muted mr-3"><i class="bi bi-twitter"></i></a>
              <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

NOBALISH

We provide the best services for your business growth. Let us help you reach new heights.

                      
                      
                      <div class="row">
  <div class="large-6 columns">
    <h2 class="display-1 mb-4">NOBALISH</h2>
    <p>We provide the best services for your business growth. Let us help you reach new heights.</p>
  </div>
  <div class="large-6 columns">
    <img src="https://dummyimage.com/722x402" class="float-left" alt="Image">
  </div>
</div>

Innovative Solutions

Discover cutting-edge solutions for your business challenges. Let us help you stay ahead in a competitive world.

Trusted by top companies

                      
                      
                      <div class="row py-5" style="background-color: #f8f9fa;">
  <div class="large-6 columns">
    <h3 class="display-4 text-primary mb-8">Innovative Solutions</h3>
    <p class="mb-8">Discover cutting-edge solutions for your business challenges. Let us help you stay ahead in a competitive world.</p>
    <div class="d-flex align-items-center">
      <i class="fas fa-check-circle text-success"></i>
      <span>Trusted by top companies</span>
    </div>
  </div>
  <div class="large-6 columns">
    <img src="https://dummyimage.com/722x402" class="float-left" alt="Image">
  </div>
</div>

Discover cutting-edge solutions .

Discover cutting-edge solutions for your business challenges. Let us help you stay ahead in a competitive world.

                      
                      
                      <section class="py-5">
  <div class="row">
    <div class="large-12 medium-6 columns text-center text-md-left mb-4 mb-md-0">
      <h1 class="display-4 text-dark mb-4">Discover cutting-edge solutions.
        <br class="show-for-large">
      </h1>
      <p class="lead text-muted mb-4">Discover cutting-edge solutions for your business challenges. Let us help you stay ahead in a competitive world.</p>
      <button class="button primary large">Button</button>
      <button class="button outline secondary large ml-3">Button</button>
    </div>
    <div class="large-12 medium-6 columns">
      <img class="radius" alt="hero" src="https://dummyimage.com/720x600">
    </div>
  </div>
</section>

Modern Features Showcase

Explore a range of cutting-edge features designed to elevate your experience.

Innovative Design

Seamless Integration

Enhanced Usability

Reliable Performance

Customizable Options

Scalable Solutions

                      
                      
                      <section class="py-5">
  <div class="row">
    <div class="large-12 medium-6 columns text-center text-md-left mb-4 mb-md-0">
      <div class="py-5">
        <div class="row">
          <div class="text-center mb-5">
            <h1 class="display-4 fw-bold text-primary mb-4">Modern Features Showcase</h1>
            <p class="lead text-muted">Explore a range of cutting-edge features designed to elevate your experience.</p>
          </div>
          <div class="row gy-4">
            <div class="large-6 columns">
              <div class="d-flex align-items-center bg-light p-3 rounded">
                <i class="bi bi-check-circle-fill text-primary fs-4 me-3"></i>
                <span class="fw-medium">Innovative Design</span>
              </div>
            </div>
            <div class="large-6 columns">
              <div class="d-flex align-items-center bg-light p-3 rounded">
                <i class="bi bi-check-circle-fill text-primary fs-4 me-3"></i>
                <span class="fw-medium">Seamless Integration</span>
              </div>
            </div>
            <div class="large-6 columns">
              <div class="d-flex align-items-center bg-light p-3 rounded">
                <i class="bi bi-check-circle-fill text-primary fs-4 me-3"></i>
                <span class="fw-medium">Enhanced Usability</span>
              </div>
            </div>
            <div class="large-6 columns">
              <div class="d-flex align-items-center bg-light p-3 rounded">
                <i class="bi bi-check-circle-fill text-primary fs-4 me-3"></i>
                <span class="fw-medium">Reliable Performance</span>
              </div>
            </div>
            <div class="large-6 columns">
              <div class="d-flex align-items-center bg-light p-3 rounded">
                <i class="bi bi-check-circle-fill text-primary fs-4 me-3"></i>
                <span class="fw-medium">Customizable Options</span>
              </div>
            </div>
            <div class="large-6 columns">
              <div class="d-flex align-items-center bg-light p-3 rounded">
                <i class="bi bi-check-circle-fill text-primary fs-4 me-3"></i>
                <span class="fw-medium">Scalable Solutions</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="large-12 medium-6 columns">
      <img class="radius" alt="hero" src="https://dummyimage.com/720x600">
    </div>
  </div>
</section>

Innovative Tech Solutions

Providing cutting-edge solutions to everyday challenges through technology and design.

100

text 1

200

text 2

300

text 3

400

text 4

500

text 5

600

text 6

700

text 7

800

text 8

                      
                      
                      <section class="text-muted">
  <div class="row py-5">
    <div class="large-6 medium-8 columns mb-3 mb-lg-0 pr-lg-5">
      <div class="w-100 mb-4">
        <h1 class="h3 mb-2 text-dark">Innovative Tech Solutions</h1>
        <p class="lead">Providing cutting-edge solutions to everyday challenges through technology and design.</p>
      </div>
      
      <div class="large-3 medium-4 small-6 columns mb-4">
        <h2 class="h4 text-dark">100</h2>
        <p>text 1</p>
      </div>
      <div class="large-3 medium-4 small-6 columns mb-4">
        <h2 class="h4 text-dark">200</h2>
        <p>text 2</p>
      </div>
      <div class="large-3 medium-4 small-6 columns mb-4">
        <h2 class="h4 text-dark">300</h2>
        <p>text 3</p>
      </div>
      <div class="large-3 medium-4 small-6 columns mb-4">
        <h2 class="h4 text-dark">400</h2>
        <p>text 4</p>
      </div>
      <div class="large-3 medium-4 small-6 columns mb-4">
        <h2 class="h4 text-dark">500</h2>
        <p>text 5</p>
      </div>
      <div class="large-3 medium-4 small-6 columns mb-4">
        <h2 class="h4 text-dark">600</h2>
        <p>text 6</p>
      </div>
      <div class="large-3 medium-4 small-6 columns mb-4">
        <h2 class="h4 text-dark">700</h2>
        <p>text 7</p>
      </div>
      <div class="large-3 medium-4 small-6 columns mb-4">
        <h2 class="h4 text-dark">800</h2>
        <p>text 8</p>
      </div>
    </div>
    <div class="large-6 medium-8 small-12 columns mt-4 mt-lg-0 rounded-lg overflow-hidden">
      <img class="img-fluid w-100 h-auto" src="https://dummyimage.com/600x300" alt="statistic image">
    </div>
  </div>
</section>

Create and customize your design system
Leverage utilities for rapid development
From beginner to production-ready skills

                      
                      
                      <div class="row full-width align-center justify-center bg-light py-6" style="background-image: url('https://picsum.photos/id/1018/1000'); background-size: cover; background-position: center;">
  <div class="large-12 columns">
    <div class="card bg-white shadow-lg rounded-3 p-4" style="backdrop-filter: blur(20px);">
      <div class="card-body text-center">
        <div class="mb-4">
          <img src="https://dummyimage.com/722x402" class="img-fluid" style="max-width: 100%; max-height: 100px;" alt="Bootstrap Logo">
        </div>
        <div class="border-top pt-4">
          <div class="mb-4">
            <ul class="no-bullet mb-8">
              <li class="d-flex align-items-start mb-3">
                <i class="fi-check-circle text-primary me-2"></i>
                <span>Create and customize your design system</span>
              </li>
              <li class="d-flex align-items-start mb-3">
                <i class="fi-check-circle text-primary me-2"></i>
                <span>Leverage utilities for rapid development</span>
              </li>
              <li class="d-flex align-items-start mb-3">
                <i class="fi-check-circle text-primary me-2"></i>
                <span>From beginner to production-ready skills</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

                      
                      
                      <div class="row align-center justify-center bg-gradient" style="background: linear-gradient(to bottom right, #e0f7fa, #80deea, #26c6da);">
  <div class="large-12 columns w-100 mx-auto bg-white rounded shadow p-4" style="max-width: 600px;">
    <div class="text-center mb-4">
      <img src="https://dummyimage.com/722x402" class="img-fluid mb-3" alt="Placeholder Logo" />
    </div>

    <div class="mb-4">
      <h5 class="text-dark">Need innovative design frameworks?</h5>
      <p>
        <a href="/new-path/free-components" class="text-info no-underline">Discover unique tools →</a>
      </p>
    </div>

    <div class="mb-4">
      <h5 class="text-dark">Searching for cutting-edge platforms?</h5>
      <p>
        <a href="/new-path/premium-themes" class="text-info no-underline">Explore advanced systems →</a>
      </p>
    </div>

    <div class="mb-4">
      <h5 class="text-dark">Looking for a quick-start guide?</h5>
      <p>
        <a href="/new-path/cheatsheet" class="text-info no-underline">Find comprehensive insights →</a>
      </p>
    </div>

    <div class="mb-4">
      <h5 class="text-dark">Want to elevate your expertise?</h5>
      <p>
        <a href="/new-path/docs" class="text-info no-underline">Access professional resources →</a>
      </p>
    </div>

    <a href="/new-path/home" class="button expanded info">
      Return to Next-Gen Solutions
    </a>
  </div>
</div>

Event Starting Soon

Join us for an exciting Saturday!

Start Time: 9:00 AM

Day

Hour

Min

Second

                      
                      
                      <section class="py-8 bg-indigo-500 bg-gradient dark:bg-gray-800 md:py-16">
  <div class="container large-12 columns mx-auto">
    <div class="d-flex flex-column align-items-center mx-n5 md-flex-row">
      <div class="small-12 large-6 columns text-center md-text-left mb-5 md-mb-0 px-5">
        <h6 class="text-xs font-semibold text-indigo-800 text-uppercase md-text-base dark:text-gray-100">
          Event Starting Soon
        </h6>
        <h3 class="mx-2 text-2xl font-bold text-white font-heading md-text-4xl">
          Join us for an exciting Saturday!
        </h3>
        <h3 class="mt-4 text-lg font-bold text-white font-heading md-text-xl">
          Start Time: 9:00 AM
        </h3>
      </div>
      <div class="small-12 large-6 columns px-5">
        <div class="d-flex justify-content-center text-center text-white">
          <div class="small-3 columns py-3 mx-2 border rounded bg-light-100">
            <div class="text-2xl font-semibold md-text-3xl">
              <span>0</span><span>2</span>
            </div>
            <div class="mt-3 text-xs text-uppercase opacity-75">
              Day
            </div>
          </div>
          <div class="small-3 columns py-3 mx-2 border rounded bg-light-100">
            <div class="text-2xl font-semibold md-text-3xl">
              <span>0</span><span>9</span>
            </div>
            <div class="mt-3 text-xs text-uppercase opacity-75">
              Hour
            </div>
          </div>
          <div class="small-3 columns py-3 mx-2 border rounded bg-light-100">
            <div class="text-2xl font-semibold md-text-3xl">
              <span>0</span><span>0</span>
            </div>
            <div class="mt-3 text-xs text-uppercase opacity-75">
              Min
            </div>
          </div>
          <div class="small-3 columns py-3 mx-2 border rounded bg-light-100">
            <div class="text-2xl font-semibold md-text-3xl">
              <span>0</span><span>0</span>
            </div>
            <div class="mt-3 text-xs text-uppercase opacity-75">
              Second
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Feedback Overview

Extremely Happy

Many people felt very positive about the service, with a majority expressing satisfaction.

80%

Some users were less satisfied with certain aspects of the product, especially regarding usability.

60%

There were a few complaints about delivery times and product quality, but these were in the minority.

40%

Our team is reviewing all the feedback to identify key areas for improvement. We appreciate all the insights provided and will work towards making necessary enhancements. Thank you for your input!

                      
                      
                      <section class="d-flex flex-column flex-row-reverse m-4 p-2 p-md-5">
  <div class="large-12 columns p-2 p-md-6 bg-light rounded shadow">
    <h4 class="h4">Feedback Overview</h4>
    <div class="d-flex flex-wrap gap-4 m-2 mt-5">
      <div class="small">
        <span class="bg-success d-inline-block w-3 h-3 mr-2 align-middle"></span>
        Extremely Happy
      </div>
    </div>
    <div class="mt-5">
      <div class="d-flex flex-column flex-md-row align-items-center">
        <div class="small-12 medium-4 columns p-3">
          Many people felt very positive about the service, with a majority expressing satisfaction.
        </div>
        <div class="d-flex small-12 medium-8 columns min-h-60">
          <span class="rounded-left p-3 text-center align-middle mr-1 bg-success w-50 text-white">80%</span>
        </div>
      </div>
      <div class="d-flex flex-column flex-md-row align-items-center mt-4">
        <div class="small-12 medium-4 columns p-3">
          Some users were less satisfied with certain aspects of the product, especially regarding usability.
        </div>
        <div class="d-flex small-12 medium-8 columns min-h-60">
          <span class="rounded-left p-3 text-center align-middle mr-1 bg-success w-60 text-white">60%</span>
        </div>
      </div>
      <div class="d-flex flex-column flex-md-row align-items-center mt-4">
        <div class="small-12 medium-4 columns p-3">
          There were a few complaints about delivery times and product quality, but these were in the minority.
        </div>
        <div class="d-flex small-12 medium-8 columns min-h-60">
          <span class="rounded-left p-3 text-center align-middle mr-1 bg-success w-40 text-white">40%</span>
        </div>
      </div>
    </div>
    <p class="small text-muted my-5 px-3">
      Our team is reviewing all the feedback to identify key areas for improvement. We appreciate all the insights provided and will work towards making necessary enhancements. Thank you for your input!
    </p>
  </div>
</section>

Recent Announcements

Updated Interface Design 05 / 10 / 2023

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.
5,000 New Job Listings 10 / 12 / 2023

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.
Top Companies Hiring 30 / 09 / 2023

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.

                      
                      
                      <h3 class="display-4 text-dark font-weight-bold mb-12 ml-3">Recent Announcements</h3>
<ol class="no-bullet">
  <li class="border-left">
    <div class="d-flex align-items-start">
      <div class="bg-primary w-6 h-6 d-flex justify-content-center align-items-center rounded-circle me-3">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path>
        </svg>
      </div>
      <div class="p-4 rounded shadow bg-light mb-4">
        <div class="d-flex justify-content-between mb-3">
          <a href="#" class="text-primary font-weight-medium">Updated Interface Design</a>
          <a href="#" class="text-primary font-weight-medium">05 / 10 / 2023</a>
        </div>
        <p class="text-dark mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
        <button type="button" class="button primary small">Learn More</button>
        <button type="button" class="button outline primary small">Try Demo</button>
      </div>
    </div>
  </li>
  <li class="border-left">
    <div class="d-flex align-items-start">
      <div class="bg-success w-6 h-6 d-flex justify-content-center align-items-center rounded-circle me-3">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path>
        </svg>
      </div>
      <div class="p-4 rounded shadow bg-light mb-4">
        <div class="d-flex justify-content-between mb-3">
          <a href="#" class="text-primary font-weight-medium">5,000 New Job Listings</a>
          <a href="#" class="text-primary font-weight-medium">10 / 12 / 2023</a>
        </div>
        <p class="text-dark mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
        <button type="button" class="button primary small">Explore More</button>
        <button type="button" class="button outline primary small">View Demo</button>
      </div>
    </div>
  </li>
  <li class="border-left">
    <div class="d-flex align-items-start">
      <div class="bg-info w-6 h-6 d-flex justify-content-center align-items-center rounded-circle me-3">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path>
        </svg>
      </div>
      <div class="p-4 rounded shadow bg-light mb-4">
        <div class="d-flex justify-content-between mb-3">
          <a href="#" class="text-primary font-weight-medium">Top Companies Hiring</a>
          <a href="#" class="text-primary font-weight-medium">30 / 09 / 2023</a>
        </div>
        <p class="text-dark mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
        <button type="button" class="button primary small">Learn More</button>
        <button type="button" class="button outline primary small">See Demo</button>
      </div>
    </div>
  </li>
</ol>

We have solutions

Something Asked Questions

See what others often inquire about!

What is Bootstrap?

Bootstrap is a popular front-end framework that helps developers create beautiful, responsive websites quickly. It's filled with pre-styled components and tools to ease the web design process.

Can Bootstrap be used with React?

Absolutely! Bootstrap can be easily integrated with React to enhance the UI with responsive design elements and ready-to-use components.

What makes Bootstrap so popular?

Bootstrap's popularity is due to its easy-to-use grid system, reusable components, and extensive documentation. It helps developers quickly build well-structured and responsive websites.

Made with Bootstrap by Bootstrap Team.

                      
                      
                      <div class="grid-x align-middle align-center">
  <section class="cell large-12 medium-10 small-12">
    <div class="text-center mb-5">
      <h3 class="font-weight-semibold mb-4 mt-5 text-2xl text-dark">We have solutions</h3>
      <h1 class="font-weight-bold my-4 text-4xl text-dark">Something Asked Questions</h1>
      <p class="my-4 mx-auto text-lg text-muted">See what others often inquire about!</p>
    </div>
    <div class="grid-x grid-margin-x">
      <div class="cell large-6 large-offset-3">
        <h5 class="mt-4 mb-2 font-weight-semibold text-dark">What is Bootstrap?</h5>
        <div class="text-muted mb-4">Bootstrap is a popular front-end framework that helps developers create beautiful, responsive websites quickly. It's filled with pre-styled components and tools to ease the web design process.</div>
        <hr class="my-5">
        <h5 class="mt-4 mb-2 font-weight-semibold text-dark">Can Bootstrap be used with React?</h5>
        <div class="text-muted mb-4">Absolutely! Bootstrap can be easily integrated with React to enhance the UI with responsive design elements and ready-to-use components.</div>
        <hr class="my-5">
        <h5 class="mt-4 mb-2 font-weight-semibold text-dark">What makes Bootstrap so popular?</h5>
        <div class="text-muted mb-4">Bootstrap's popularity is due to its easy-to-use grid system, reusable components, and extensive documentation. It helps developers quickly build well-structured and responsive websites.</div>
      </div>
    </div>
    <div class="w-100 pt-3 px-4 mb-5 text-center">
      <div class="text-muted small">
        Made with <a class="font-weight-semibold" href="/" target="_blank">Bootstrap</a> by <a href="#" class="font-weight-semibold" target="_blank">Bootstrap Team</a>.
      </div>
    </div>
  </section>
</div>

NEW TOPIC

New Developments in the Tech World

The latest trends and innovations in the tech industry are transforming businesses.

12/30/2024 10:00 AM EDT

The tech industry has seen remarkable growth this year, with major advancements in artificial intelligence, cloud computing, and quantum technology.

Companies across the globe are investing heavily in these technologies, driving innovation and competition. Major players like Apple, Google, and Microsoft have unveiled new products aimed at revolutionizing how we work, communicate, and live.

AI applications are now widely used in healthcare, finance, and customer service. These developments promise to improve efficiency and productivity while also raising concerns about data privacy and job displacement.

Cloud services continue to expand, with many companies opting for hybrid and multi-cloud strategies to meet their needs. The shift towards remote work has accelerated the demand for scalable and secure cloud solutions.

                      
                      
                      <div class="grid-x align-center">
  <div class="cell large-6 medium-8 small-12">
    <div class="mx-4 my-3 text-sm">
      <a href="#" class="text-danger font-weight-bold text-uppercase">NEW TOPIC</a>
    </div>
    <div class="text-dark text-4xl px-4 font-weight-bold">
      New Developments in the Tech World
    </div>
    
    <div class="text-muted px-4 pb-4 pt-2">
      The latest trends and innovations in the tech industry are transforming businesses.
    </div>
    
    <div class="text-muted mx-4">
      <p class="border-bottom py-3">12/30/2024 10:00 AM EDT</p>
    </div>
    
    <div class="px-4 mx-auto mt-8">
      <p class="my-1">The tech industry has seen remarkable growth this year, with major advancements in artificial intelligence, cloud computing, and quantum technology.</p>
      <p class="my-1">Companies across the globe are investing heavily in these technologies, driving innovation and competition. Major players like Apple, Google, and Microsoft have unveiled new products aimed at revolutionizing how we work, communicate, and live.</p>
      <p class="my-1">AI applications are now widely used in healthcare, finance, and customer service. These developments promise to improve efficiency and productivity while also raising concerns about data privacy and job displacement.</p>
      <p class="my-1">Cloud services continue to expand, with many companies opting for hybrid and multi-cloud strategies to meet their needs. The shift towards remote work has accelerated the demand for scalable and secure cloud solutions.</p>
    </div>
  </div>
</div>

What we do at our company:

01.

Investigation

We analyze data and insights, and take the time to understand your business goals. We ask the right questions to learn about your objectives.
02.

Planning

We develop strategies based on thorough research and strong planning to help you achieve success with data-driven decisions.
03.

Creative

We design intuitive and user-friendly interfaces that look great and are easy to maintain, perfectly suited for your business needs.
04.

Building

Our development process focuses on building solutions that not only work, but provide an excellent user experience and are simple to manage.
05.

Launching

We make sure everything is ready to go, providing smooth deployments that ensure your product reaches the right audience effectively.
06.

Launching

We make sure everything is ready to go, providing smooth deployments that ensure your product reaches the right audience effectively.

                      
                      
                      <div class="grid-x grid-padding-x text-muted">
  <h1 class="text-center display-3 font-weight-bold text-primary mb-8">What we do at our company:</h1>
  <ul class="grid-x grid-padding-x align-center">
    <li class="cell small-12 medium-6 large-4">
      <div class="d-flex align-center">
        <div class="px-4 fs-1 fw-light text-info">01.</div>
        <div>
          <div class="fs-3 fw-bold text-dark">Investigation</div>
          <p class="max-w-xs py-2 text-muted">We analyze data and insights, and take the time to understand your business goals. We ask the right questions to learn about your objectives.</p>
        </div>
      </div>
    </li>
    <li class="cell small-12 medium-6 large-4">
      <div class="d-flex align-center">
        <div class="px-4 fs-1 fw-light text-info">02.</div>
        <div>
          <div class="fs-3 fw-bold text-dark">Planning</div>
          <p class="max-w-xs py-2 text-muted">We develop strategies based on thorough research and strong planning to help you achieve success with data-driven decisions.</p>
        </div>
      </div>
    </li>
    <li class="cell small-12 medium-6 large-4">
      <div class="d-flex align-center">
        <div class="px-4 fs-1 fw-light text-info">03.</div>
        <div>
          <div class="fs-3 fw-bold text-dark">Creative</div>
          <p class="max-w-xs py-2 text-muted">We design intuitive and user-friendly interfaces that look great and are easy to maintain, perfectly suited for your business needs.</p>
        </div>
      </div>
    </li>
    <li class="cell small-12 medium-6 large-4">
      <div class="d-flex align-center">
        <div class="px-4 fs-1 fw-light text-info">04.</div>
        <div>
          <div class="fs-3 fw-bold text-dark">Building</div>
          <p class="max-w-xs py-2 text-muted">Our development process focuses on building solutions that not only work, but provide an excellent user experience and are simple to manage.</p>
        </div>
      </div>
    </li>
    <li class="cell small-12 medium-6 large-4">
      <div class="d-flex align-center">
        <div class="px-4 fs-1 fw-light text-info">05.</div>
        <div>
          <div class="fs-3 fw-bold text-dark">Launching</div>
          <p class="max-w-xs py-2 text-muted">We make sure everything is ready to go, providing smooth deployments that ensure your product reaches the right audience effectively.</p>
        </div>
      </div>
    </li>
    <li class="cell small-12 medium-6 large-4">
      <div class="d-flex align-center">
        <div class="px-4 fs-1 fw-light text-info">06.</div>
        <div>
          <div class="fs-3 fw-bold text-dark">Launching</div>
          <p class="max-w-xs py-2 text-muted">We make sure everything is ready to go, providing smooth deployments that ensure your product reaches the right audience effectively.</p>
        </div>
      </div>
    </li>
  </ul>
</div>

Pricing Plans

Choose the best plan for our service. Each plan has different features and benefits.

*Prices are monthly

Basic Plan

¥500/month

Basic Features
Support Included

Team Plan

¥1500/month

Team Features
24/7 Support
Multiple Account Management

Pro Plan

¥3500/month

Advanced Features
Dedicated Support
Priority Access
Additional Benefits

                      
                      
                      <div class="grid-x grid-padding-x bg-gray-100 px-5 py-5">
  <div class="cell w-100 mx-auto bg-white px-5 py-10 text-gray-600 mb-10">
    <div class="grid-x grid-padding-x max-width-5xl mx-auto">
      <div class="cell medium-3">
        <div class="text-left w-full flex-grow">
          <h1 class="text-4xl font-weight-bold mb-5">Pricing Plans</h1>
          <h3 class="text-md font-weight-medium mb-5">Choose the best plan for our service. Each plan has different features and benefits.</h3>
        </div>
        <div class="w-full mb-2">
          <p class="text-xs">*Prices are monthly</p>
        </div>
      </div>
      <div class="cell medium-9">
        <div class="grid-x grid-padding-x max-width-4xl mx-auto">
          <div class="cell small-12 medium-4">
            <div class="bg-white px-8 py-8 mb-3 rounded-md shadow-lg shadow-gray-600">
              <div class="w-full flex-grow">
                <h2 class="text-center font-weight-bold uppercase mb-4">Basic Plan</h2>
                <h3 class="text-center font-weight-bold text-4xl mb-5">¥500<span class="text-sm">/month</span></h3>
                <ul class="text-sm mb-8">
                  <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Basic Features</li>
                  <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Support Included</li>
                </ul>
              </div>
              <div class="w-full">
                <button class="font-weight-bold bg-gray-600 hover:bg-gray-700 text-white rounded-md px-10 py-2 transition-colors w-full">Buy Now</button>
              </div>
            </div>
          </div>
          <div class="cell small-12 medium-4">
            <div class="bg-white px-8 py-8 mb-3 rounded-md shadow-lg shadow-gray-600 relative z-50">
              <div class="w-full flex-grow">
                <h2 class="text-center font-weight-bold uppercase mb-4">Team Plan</h2>
                <h3 class="text-center font-weight-bold text-4xl mb-5">¥1500<span class="text-sm">/month</span></h3>
                <ul class="text-sm mb-8">
                  <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Team Features</li>
                  <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> 24/7 Support</li>
                  <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Multiple Account Management</li>
                </ul>
              </div>
              <div class="w-full">
                <button class="font-weight-bold bg-gray-600 hover:bg-gray-700 text-white rounded-md px-10 py-2 transition-colors w-full">Buy Now</button>
              </div>
            </div>
          </div>
          <div class="cell small-12 medium-4">
            <div class="bg-white px-8 py-8 mb-3 rounded-md shadow-lg shadow-gray-600">
              <div class="w-full flex-grow">
                <h2 class="text-center font-weight-bold uppercase mb-4">Pro Plan</h2>
                <h3 class="text-center font-weight-bold text-4xl mb-5">¥3500<span class="text-sm">/month</span></h3>
                <ul class="text-sm mb-8">
                  <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Advanced Features</li>
                  <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Dedicated Support</li>
                  <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Priority Access</li>
                  <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Additional Benefits</li>
                </ul>
              </div>
              <div class="w-full">
                <button class="font-weight-bold bg-gray-600 hover:bg-gray-700 text-white rounded-md px-10 py-2 transition-colors w-full">Buy Now</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Nobalish

Join Now

Innovative Design

Explore a range of cutting-edge features designed to elevate your experience.

Solutions

Providing cutting-edge solutions to everyday challenges through technology and design.

Innovative Tech

Discover the amazing individuals behind our success, working together to make a difference.

Create Account

Fill in the details below to create your account.

                      
                      
                      <div class="bg-white pb-12">
  <div class="grid-container px-4">
    <div class="grid-x align-middle justify-between py-4">
      <a href="/" class="d-flex align-items-center gap-2 text-2xl font-weight-bold text-dark">
        Nobalish
      </a>
      <nav class="hide-for-small-only">
        <a href="#" class="text-lg font-weight-semibold text-muted transition-all hover:text-indigo-500 active:text-indigo-700">Dashboard</a>
        <a href="#" class="d-inline-flex align-items-center gap-1 text-lg font-weight-semibold text-indigo-500">
          News
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-dark" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M7 7l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
        <a href="#" class="text-lg font-weight-semibold text-muted transition-all hover:text-indigo-500 active:text-indigo-700">Plans</a>
        <a href="#" class="text-lg font-weight-semibold text-muted transition-all hover:text-indigo-500 active:text-indigo-700">Contact</a>
      </nav>
      <div class="ml-3 d-none d-sm-flex flex-column gap-2.5">
        <a href="#" class="button small button-indigo text-white">Join Now</a>
      </div>

      <button type="button" class="d-inline-flex align-items-center gap-2 rounded-lg bg-light px-2.5 py-2 text-sm font-weight-semibold text-muted ring-indigo-300 hover:bg-gray-300 focus-visible:ring">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
        </svg>
        Menu
      </button>
    </div>
    <div class="hide-for-small-only w-full bg-light border rounded-lg shadow-sm">
      <div class="grid-container d-flex max-width-screen-lg gap-8 p-8">
        <div class="cell small-12 medium-8">
          <a href="#" class="d-flex gap-4 mb-4">
            <div class="d-flex justify-center align-center rounded-lg bg-indigo-500 text-white shadow-lg transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700" style="height: 48px; width: 48px;">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2v20m10-10H2" />
              </svg>
            </div>
            <div>
              <div class="font-weight-semibold mb-1">Innovative Design</div>
              <p class="text-sm text-muted">Explore a range of cutting-edge features designed to elevate your experience.</p>
            </div>
          </a>
          <a href="#" class="d-flex gap-4 mb-4">
            <div class="d-flex justify-center align-center rounded-lg bg-indigo-500 text-white shadow-lg transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700" style="height: 48px; width: 48px;">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
              </svg>
            </div>
            <div>
              <div class="font-weight-semibold mb-1">Solutions</div>
              <p class="text-sm text-muted">Providing cutting-edge solutions to everyday challenges through technology and design.</p>
            </div>
          </a>
          <a href="#" class="d-flex gap-4 mb-4">
            <div class="d-flex justify-center align-center rounded-lg bg-indigo-500 text-white shadow-lg transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700" style="height: 48px; width: 48px;">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
              </svg>
            </div>
            <div>
              <div class="font-weight-semibold mb-1">Innovative Tech</div>
              <p class="text-sm text-muted">Discover the amazing individuals behind our success, working together to make a difference.</p>
            </div>
          </a>
          <a href="#" class="d-flex gap-4 mb-4">
            <div class="d-flex justify-center align-center rounded-lg bg-indigo-500 text-white shadow-lg transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700" style="height: 48px; width: 48px;">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path d="M12 3V7H8V3H12zM3 7H7V3H3V7zM7 17H3V13H7V17zM13 7H17V3H13V7zM17 13H13V17H17V13z" />
              </svg>
            </div>
            <div>
              <div class="font-weight-semibold mb-1">Create Account</div>
              <p class="text-sm text-muted">Fill in the details below to create your account.</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

credit card

Credit Card Number

Expiration Date

Security Code

                      
                      

                      <div class="grid-x align-center middle" style="background: linear-gradient(135deg, #007bff, #6610f2);">
    <div class="cell small-12 medium-8 large-6 p-4 bg-light rounded shadow">
        <div class="text-center mb-4">
            <div class="input-group mb-3">
                <label for="name" class="input-label">Credit Card</label>
                <input type="text" class="input-group-field" id="name" placeholder="Full Name" />
            </div>
            <div class="input-group mb-3">
                <label for="cardNumber" class="input-label">Credit Card Number</label>
                <input type="text" class="input-group-field" id="cardNumber" placeholder="1234 5678 9012 3456" maxlength="19" />
            </div>
            <div class="grid-x grid-padding-x">
                <div class="cell small-8 mb-3">
                    <label for="expiryDate" class="input-label">Expiration Date</label>
                    <input type="text" class="input-group-field" id="expiryDate" placeholder="MM/YY" maxlength="5" pattern="\d{2}/\d{2}" />
                </div>
                <div class="cell small-4 mb-3">
                    <label for="cvv" class="input-label">Security Code</label>
                    <input type="text" class="input-group-field" id="cvv" placeholder="123" maxlength="3" pattern="\d{3}" />
                </div>
            </div>
            <button class="button expanded mt-4">Complete Purchase</button>
        </div>
    </div>
</div>

Create Account

Fill in the details below to create your account.

Created using Nobalish.

                      
                      
                      <div class="grid-x align-center middle" style="height: 100vh; background-color: #f8f9fa;">
  <div class="cell small-12 medium-8 large-6 p-5 bg-light rounded shadow">
    <h4 class="text-center text-primary">Create Account</h4>
    <p class="text-center mt-2 text-secondary">Fill in the details below to create your account.</p>
    <form class="mt-4">
      <div class="input-group mb-3">
        <label for="username" class="input-label">Username</label>
        <input type="text" class="input-group-field" id="username" placeholder="Choose a username" />
      </div>
      <div class="input-group mb-3">
        <label for="useremail" class="input-label">Email Address</label>
        <input type="email" class="input-group-field" id="useremail" placeholder="Enter your email address" />
      </div>
      <div class="input-group mb-3">
        <label for="userpassword" class="input-label">Password</label>
        <input type="password" class="input-group-field" id="userpassword" placeholder="Set your password" />
      </div>
      <div class="form-check mb-4">
        <input type="checkbox" class="form-check-input" id="acceptTerms" />
        <label class="form-check-label" for="acceptTerms">
          I agree to the <a href="#" class="text-info">Privacy Policy</a> and <a href="#" class="text-info">Terms of Service</a>.
        </label>
      </div>
      <button type="submit" class="button expanded success">Sign Up</button>
      <p class="mt-3 text-center text-muted">
        Already have an account? <a href="#" class="text-info">Log In</a>
      </p>
    </form>
    <div class="pt-4 text-center small text-muted">
      Created using <a class="text-muted" href="#" target="_blank">Nobalish</a>.
    </div>
  </div>
</div>

                      
                      
                      <div class="grid-x align-center middle" style="min-height: 100vh; padding: 3rem;">
  <div class="cell small-12 medium-8 large-6 bg-white p-5 shadow-lg rounded">
    <form action="">
      <div class="grid-x grid-padding-x mb-4">
        <div class="cell shrink text-right">
          <label for="name" class="text-secondary">Full Name</label>
        </div>
      </div>
      <div class="grid-x grid-padding-x mb-4">
        <div class="cell shrink text-right">
          <label for="number" class="text-secondary">Contact Number</label>
        </div>
        <div class="cell auto">
          <input type="number" id="number" name="number" placeholder="Enter your number" class="input-group-field input-group-lg">
        </div>
      </div>
      <div class="grid-x grid-padding-x mb-4">
        <div class="cell shrink text-right">
          <label for="range" class="text-secondary">Experience Level</label>
        </div>
        <div class="cell auto">
          <input type="range" id="range" name="range" class="range-slider">
        </div>
      </div>
      <div class="grid-x grid-padding-x mb-4">
        <div class="cell shrink text-right">
          <label for="file" class="text-secondary">Upload File</label>
        </div>
        <div class="cell auto">
          <input type="file" id="file" name="file" class="input-group-field input-group-lg">
        </div>
      </div>
      <div class="grid-x grid-padding-x mb-4">
        <div class="cell shrink text-right">
          <label for="date" class="text-secondary">Event Date</label>
        </div>
        <div class="cell auto">
          <input type="date" id="date" name="date" class="input-group-field input-group-lg">
        </div>
      </div>
      <div class="grid-x grid-padding-x mb-4">
        <div class="cell shrink text-right">
          <label for="month" class="text-secondary">Start Month</label>
        </div>
        <div class="cell auto">
          <input type="month" id="month" name="month" class="input-group-field input-group-lg">
        </div>
      </div>
      <div class="grid-x grid-padding-x mb-4">
        <div class="cell shrink text-right">
          <label for="time" class="text-secondary">Preferred Time</label>
        </div>
        <div class="cell auto">
          <input type="time" id="time" name="time" class="input-group-field input-group-lg">
        </div>
      </div>
      <div class="grid-x grid-padding-x mb-4">
        <div class="cell shrink text-right">
          <label for="password" class="text-secondary">Password</label>
        </div>
        <div class="cell auto">
          <input type="password" id="password" name="password" placeholder="Create a password" class="input-group-field input-group-lg">
        </div>
      </div>
      <div class="grid-x grid-padding-x mb-4">
        <div class="cell shrink text-right">
          <label for="select" class="text-secondary">City</label>
        </div>
      </div>
      <div class="text-right">
        <button type="submit" class="button success large">Submit</button>
      </div>
    </form>
  </div>
</div>

Let's Connect

Welcome to our contact page. Feel free to share your thoughts or ask questions, and we'll get back to you as soon as possible.

                      
                      
                      <div class="grid-x align-center middle" style="padding-top: 3rem; padding-bottom: 3rem;">
  <div class="cell small-12 medium-10 large-8 px-4">
    <div class="text-center mb-10">
      <h2 class="mb-4 text-dark font-bold">Let's Connect</h2>
      <p class="mx-auto max-width-md text-muted">Welcome to our contact page. Feel free to share your thoughts or ask questions, and we'll get back to you as soon as possible.</p>
    </div>
    <form class="grid-x grid-padding-x">
      <div class="cell small-12 medium-6 mb-4">
        <label for="first-name" class="text-dark">Name of the Explorer*</label>
        <input name="first-name" class="input-group-field" id="first-name" placeholder="Your full name" required />
      </div>
      <div class="cell small-12 medium-6 mb-4">
        <label for="last-name" class="text-dark">Family Name*</label>
        <input name="last-name" class="input-group-field" id="last-name" placeholder="Your surname" required />
      </div>
      <div class="cell small-12 mb-4">
        <label for="company" class="text-dark">Organization Name</label>
        <input name="company" class="input-group-field" id="company" placeholder="Enter your organization" />
      </div>
      <div class="cell small-12 mb-4">
        <label for="email" class="text-dark">Your Email Address*</label>
        <input name="email" class="input-group-field" id="email" placeholder="email@example.com" required />
      </div>
      <div class="cell small-12 mb-4">
        <label for="subject" class="text-dark">Topic of Discussion*</label>
        <input name="subject" class="input-group-field" id="subject" placeholder="Subject of your message" required />
      </div>
      <div class="cell small-12 mb-4">
        <label for="message" class="text-dark">Your Thoughts*</label>
        <textarea name="message" class="input-group-field" id="message" rows="6" placeholder="Write your message here" required></textarea>
      </div>
      <div class="cell small-12 d-flex align-middle justify-content-between mb-4">
        <button class="button success" type="submit">Send Your Message</button>
        <span class="text-muted small">*Required fields</span>
      </div>
      <p class="small text-muted">By submitting, you agree to our <a href="#" class="underline">Terms and Conditions</a>.</p>
    </form>
  </div>
</div>

                      
                      
                      <form>
  <div class="grid-x grid-padding-x mb-6">
    <div class="cell small-12 medium-6 mb-4">
      <label for="product_name" class="text-dark">Product Name</label>
      <input type="text" id="product_name" class="input-group-field" placeholder="Gadget X100" required>
    </div>
    <div class="cell small-12 medium-6 mb-4">
      <label for="brand_name" class="text-dark">Brand Name</label>
      <input type="text" id="brand_name" class="input-group-field" placeholder="TechNova" required>
    </div>
    <div class="cell small-12 medium-6 mb-4">
      <label for="price" class="text-dark">Price</label>
      <input type="text" id="price" class="input-group-field" placeholder="$499.99" required>
    </div>
    <div class="cell small-12 medium-6 mb-4">
      <label for="availability" class="text-dark">Availability</label>
      <input type="text" id="availability" class="input-group-field" placeholder="In Stock" required>
    </div>
    <div class="cell small-12 medium-6 mb-4">
      <label for="category" class="text-dark">Category</label>
      <input type="text" id="category" class="input-group-field" placeholder="Electronics" required>
    </div>
    <div class="cell small-12 medium-6 mb-4">
      <label for="rating" class="text-dark">Customer Rating</label>
      <input type="number" id="rating" class="input-group-field" placeholder="4.5" required>
    </div>
  </div>
  <div class="mb-4">
    <label for="manufacturer_email" class="text-dark">Manufacturer Email</label>
    <input type="email" id="manufacturer_email" class="input-group-field" placeholder="support@technova.com" required>
  </div>
  <div class="mb-4">
    <label for="warranty_period" class="text-dark">Warranty Period</label>
    <input type="text" id="warranty_period" class="input-group-field" placeholder="2 years" required>
  </div>
  <div class="mb-4">
    <label for="accept_terms" class="form-check-label">
      <input id="accept_terms" type="checkbox" value="" class="form-check-input" required>
      I agree to the <a href="#" class="text-primary">terms and conditions</a>.
    </label>
  </div>
  <button type="submit" class="button primary expanded">Add Product</button>
</form>

Contact Information

Location Address 123 Tech Street, Silicon Valley, CA, USA

Phone Number +1 (800) 123 4567

Email Address contact@company.com

Web Address www.companywebsite.com

Contact Us

The Connections section allows you to manage your connections and communication with others.

                      
                      

                      <div class="container py-6">
  <div class="grid-x grid-padding-x align-center">
    <div class="cell small-12 medium-8 large-6 bg-white p-4 rounded">
      <div class="grid-x grid-padding-x h-100">
        <div class="cell small-12 medium-5 large-4 bg-primary p-4 text-white">
          <h2 class="font-weight-bold mb-4">Contact Information</h2>
          <p class="font-weight-bold mb-3">
            Location Address
            <span class="d-block text-light">123 Tech Street, Silicon Valley, CA, USA</span>
          </p>
          <p class="font-weight-bold mb-3">
            Phone Number
            <span class="d-block text-light">+1 (800) 123 4567</span>
          </p>
          <p class="font-weight-bold mb-3">
            Email Address
            <span class="d-block text-light">contact@company.com</span>
          </p>
          <p class="font-weight-bold mb-3">
            Web Address
            <span class="d-block text-light">www.companywebsite.com</span>
          </p>
        </div>
        <div class="cell small-12 medium-7 large-8 bg-light p-4">
          <h2 class="font-weight-bold mb-4 text-primary">Contact Us</h2>
          <form>
            <div class="grid-x grid-padding-x mb-4">
              <div class="cell small-12 medium-6">
                <input type="text" class="input-group-field rounded-pill" placeholder="Full Name" />
              </div>
              <div class="cell small-12 medium-6">
                <input type="text" class="input-group-field rounded-pill" placeholder="Your Email" />
              </div>
            </div>
            <div class="grid-x grid-padding-x mb-4">
              <div class="cell small-12 medium-6">
                <input type="email" class="input-group-field rounded-pill" placeholder="Your Phone Number" />
              </div>
              <div class="cell small-12 medium-6">
                <input type="text" class="input-group-field rounded-pill" placeholder="Message Subject" />
              </div>
            </div>
            <div class="mb-4">
              <textarea class="input-group-field rounded-3" placeholder="Your Inquiry" rows="6"></textarea>
            </div>
            <div class="text-center">
              <button type="submit" class="button primary large rounded-pill px-5 py-3">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<p class="text-muted text-center">The Connections section allows you to manage your connections and communication with others.</p>

Get Started with Amazing Projects

Join thousands of businesses growing with our powerful solutions.

Services

About Us

Resources

Legal

Social

Quick Links

                      
                      
                      <div class="bg-light text-center text-lg-start">
  <div class="grid-container py-5">
    <div class="grid-x grid-padding-x">
      <div class="cell small-12 mb-4">
        <h2 class="font-weight-bold text-primary">Get Started with Amazing Projects</h2>
        <p class="text-muted">Join thousands of businesses growing with our powerful solutions.</p>
      </div>
    </div>
    <div class="grid-x text-left">
      <div class="cell small-12 medium-2">
        <h5 class="font-weight-bold text-primary">Services</h5>
        <ul class="menu">
          <li><a href="#" class="text-secondary">Overview</a></li>
          <li><a href="#" class="text-secondary">Support</a></li>
          <li><a href="#" class="text-secondary">Features</a></li>
          <li><a href="#" class="text-secondary">Pricing</a></li>
          <li><a href="#" class="text-secondary">Blog</a></li>
          <li><a href="#" class="text-secondary">Updates</a></li>
        </ul>
      </div>
      <div class="cell small-12 medium-2">
        <h5 class="font-weight-bold text-primary">About Us</h5>
        <ul class="menu">
          <li><a href="#" class="text-secondary">Our Team</a></li>
          <li><a href="#" class="text-secondary">Careers</a></li>
          <li><a href="#" class="text-secondary">News</a></li>
          <li><a href="#" class="text-secondary">Partnerships</a></li>
          <li><a href="#" class="text-secondary">Contact</a></li>
        </ul>
      </div>
      <div class="cell small-12 medium-2">
        <h5 class="font-weight-bold text-primary">Resources</h5>
        <ul class="menu">
          <li><a href="#" class="text-secondary">FAQ</a></li>
          <li><a href="#" class="text-secondary">Documentation</a></li>
          <li><a href="#" class="text-secondary">Support Center</a></li>
          <li><a href="#" class="text-secondary">Community</a></li>
        </ul>
      </div>
      <div class="cell small-12 medium-2">
        <h5 class="font-weight-bold text-primary">Legal</h5>
        <ul class="menu">
          <li><a href="#" class="text-secondary">Privacy Policy</a></li>
          <li><a href="#" class="text-secondary">Terms of Use</a></li>
          <li><a href="#" class="text-secondary">Cookies Policy</a></li>
        </ul>
      </div>
      <div class="cell small-12 medium-2">
        <h5 class="font-weight-bold text-primary">Social</h5>
        <ul class="menu">
          <li><a href="#" class="text-secondary">Twitter</a></li>
          <li><a href="#" class="text-secondary">Facebook</a></li>
          <li><a href="#" class="text-secondary">LinkedIn</a></li>
          <li><a href="#" class="text-secondary">Instagram</a></li>
        </ul>
      </div>
      <div class="cell small-12 medium-2">
        <h5 class="font-weight-bold text-primary">Quick Links</h5>
        <ul class="menu">
          <li><a href="#" class="text-secondary">Blog</a></li>
          <li><a href="#" class="text-secondary">Events</a></li>
          <li><a href="#" class="text-secondary">Help Center</a></li>
          <li><a href="#" class="text-secondary">Newsletter</a></li>
        </ul>
      </div>
    </div>
    <hr class="my-4">
    <div class="grid-x grid-padding-x">
      <div class="cell">
        <div class="text-muted">
          <small>© 2023 Your Company. All Rights Reserved.</small>
        </div>
      </div>
    </div>
  </div>
</div>

My Website

This footer component is part of a larger, open-source library of Bootstrap components. Learn more by going to the official My Website Documentation.

                      
                      
                      <div class="grid-container">
  <div class="callout light rounded shadow-sm p-4">
    <div class="grid-x align-middle">
      <div class="cell shrink">
        <a href="#" target="_blank" class="d-flex align-items-center mb-4 mb-sm-0">
          <span class="h4 font-weight-bold text-dark">My Website</span>
        </a>
      </div>
      <div class="cell auto">
        <ul class="menu align-right">
          <li>
            <a href="#" class="text-muted">Home</a>
          </li>
          <li>
            <a href="#" class="text-muted">Terms of Service</a>
          </li>
          <li>
            <a href="#" class="text-muted">Support</a>
          </li>
          <li>
            <a href="#" class="text-muted">Feedback</a>
          </li>
        </ul>
      </div>
    </div>
    <hr class="my-4 border-gray-200" />
    <span class="block text-sm text-muted text-center">© 2022 <a href="#" target="_blank" class="text-muted">My Website™</a>. All Rights Reserved.</span>
  </div>
  <p class="mt-4">This footer component is part of a larger, open-source library of Foundation components. Learn more by going to the official <a class="text-primary" href="#" target="_blank">My Website Documentation</a>.</p>
</div>

                      
                      
                      <div class="grid-container">
  <div class="grid-x grid-padding-x align-center pt-6 border-top">
    <nav class="cell auto text-center mb-4">
      <a href="#" class="button hollow text-secondary secondary-hover">Company</a>
      <a href="#" class="button hollow text-secondary secondary-hover">Partners</a>
      <a href="#" class="button hollow text-secondary secondary-hover">Careers</a>
      <a href="#" class="button hollow text-secondary secondary-hover">Newsroom</a>
      <a href="#" class="button hollow text-secondary secondary-hover">Updates</a>
    </nav>
    <div class="cell auto text-center">
      <a href="#" target="_blank" class="secondary-text secondary-hover">
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.03 20 4 16.97 4 12C4 7.03 7.03 4 12 4C16.97 4 20 7.03 20 12C20 16.97 16.97 20 12 20ZM12 5C10.9 5 10 5.9 10 7C10 8.1 10.9 9 12 9C13.1 9 14 8.1 14 7C14 5.9 13.1 5 12 5ZM12 15C10.9 15 10 15.9 10 17C10 18.1 10.9 19 12 19C13.1 19 14 18.1 14 17C14 15.9 13.1 15 12 15Z" />
        </svg>
      </a>
      <a href="#" target="_blank" class="secondary-text secondary-hover">
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M20 2H4C2.89 2 2 2.89 2 4V20C2 21.1 2.89 22 4 22H20C21.1 22 22 21.1 22 20V4C22 2.89 21.1 2 20 2ZM10 18V6H14V18H10ZM12 5C13.1 5 14 5.9 14 7C14 8.1 13.1 9 12 9C10.9 9 10 8.1 10 7C10 5.9 10.9 5 12 5ZM16 18H8V6H16V18Z" />
        </svg>
      </a>
      <a href="#" target="_blank" class="secondary-text secondary-hover">
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 7H17.6L14 2H10L6.4 7H3C2.45 7 2 7.45 2 8V20C2 20.55 2.45 21 3 21H21C21.55 21 22 20.55 22 20V8C22 7.45 21.55 7 21 7ZM10 4H14L16.6 7H7.4L10 4ZM20 18H4V9H20V18Z" />
        </svg>
      </a>
      <a href="#" target="_blank" class="secondary-text secondary-hover">
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0ZM12 20C7.03 20 4 16.97 4 12C4 7.03 7.03 4 12 4C16.97 4 20 7.03 20 12C20 16.97 16.97 20 12 20ZM12 5C10.9 5 10 5.9 10 7C10 8.1 10.9 9 12 9C13.1 9 14 8.1 14 7C14 5.9 13.1 5 12 5ZM12 15C10.9 15 10 15.9 10 17C10 18.1 10.9 19 12 19C13.1 19 14 18.1 14 17C14 15.9 13.1 15 12 15Z" />
        </svg>
      </a>
    </div>
  </div>
  <div class="grid-x grid-padding-x align-center py-8 text-center">
    <div class="cell auto text-small text-muted">© 2021 - Present CompanyX. All rights reserved.</div>
  </div>
</div>

                      
                      
                      <div class="grid-container py-5">
  <div class="grid-x grid-padding-x align-middle small-up-1 medium-up-2 large-up-4">
    <div class="cell">
      <button class="button primary expanded">Primary Button</button>
    </div>
    <div class="cell">
      <button class="button secondary hollow expanded">Outline Button</button>
    </div>
    <div class="cell">
      <button class="button success expanded">
        <i class="fi-check-circle small"></i> Success Button
      </button>
    </div>
    <div class="cell">
      <button class="button alert expanded" data-toggle="tooltip" title="This is a tooltip!">Warning Button</button>
    </div>
    <div class="cell">
      <button class="button alert expanded">
        Delete <span class="badge secondary">5</span>
      </button>
    </div>
    <div class="cell">
      <button class="button info expanded">Info Button</button>
    </div>
    <div class="cell">
      <button class="button dark expanded">Dark Button</button>
    </div>
    <div class="cell">
      <button class="button light expanded">Light Button</button>
    </div>
  </div>
</div>

                      
                      

                      <div class="grid-container py-5">
  <div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4">
    <div class="cell">
      <button class="button expanded" style="background: linear-gradient(to right, #ff7e5f, rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Gradient Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background: linear-gradient(to right, rgb(95, 255, 124), rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Gradient Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background: linear-gradient(to right, rgb(176, 223, 192), rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Gradient Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background: linear-gradient(to right, rgb(182, 180, 184), rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Gradient Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background: linear-gradient(to right, rgb(100, 67, 191), rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Gradient Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background: linear-gradient(to right, rgb(183, 0, 255), rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Gradient Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background: linear-gradient(to right, rgb(255, 27, 221), rgb(0, 0, 0)); font-size: 16px; font-weight: 600; text-transform: uppercase;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Gradient Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background: linear-gradient(to right, rgb(219, 253, 23), rgb(6, 6, 6)); font-size: 16px; font-weight: 600; text-transform: uppercase;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Gradient Button</button>
    </div>
  </div>
</div>

                      
                      
                      <div class="grid-container py-5">
  <div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4">
    <div class="cell">
      <button class="button expanded" style="background-color: #dc3545; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 30px;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: rgb(5, 51, 255); font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 30px;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: rgb(21, 255, 9); font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 30px;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: rgb(153, 155, 28); font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 30px;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: rgb(0, 247, 255); font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 30px;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: rgb(95, 9, 255); font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 30px;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: rgb(255, 0, 217); font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 30px;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Button</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: rgb(255, 145, 0); font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 30px;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Button</button>
    </div>
  </div>
</div>

                      
                      
                      <div class="grid-container py-5">
  <div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4">
    <div class="cell">
      <button class="button expanded" style="background-color: #dc3545; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 50%; padding: 2rem;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Red</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: #28a745; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 50%; padding: 2rem;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Green</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: #007bff; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 50%; padding: 2rem;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Blue</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: #ffc107; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 50%; padding: 2rem;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Yellow</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: #f8f9fa; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 50%; padding: 2rem;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">White</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: #6c757d; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 50%; padding: 2rem;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Gray</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: #17a2b8; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 50%; padding: 2rem;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Teal</button>
    </div>
    <div class="cell">
      <button class="button expanded" style="background-color: #343a40; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 50%; padding: 2rem;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Black</button>
    </div>
  </div>
</div>

                      
                      
                      <div class="grid-container py-5">
  <div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4">
    <div class="cell">
      <button class="button outline expanded" style="border-radius: 50%; padding: 2rem; border-color: #dc3545; color: #dc3545;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Red</button>
    </div>
    <div class="cell">
      <button class="button outline expanded" style="border-radius: 50%; padding: 2rem; border-color: #28a745; color: #28a745;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Green</button>
    </div>
    <div class="cell">
      <button class="button outline expanded" style="border-radius: 50%; padding: 2rem; border-color: #007bff; color: #007bff;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Blue</button>
    </div>
    <div class="cell">
      <button class="button outline expanded" style="border-radius: 50%; padding: 2rem; border-color: #ffc107; color: #ffc107;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Yellow</button>
    </div>
    <div class="cell">
      <button class="button outline expanded" style="border-radius: 50%; padding: 2rem; border-color: #6c757d; color: #6c757d;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Gray</button>
    </div>
    <div class="cell">
      <button class="button outline expanded" style="border-radius: 50%; padding: 2rem; border-color: #17a2b8; color: #17a2b8;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Teal</button>
    </div>
    <div class="cell">
      <button class="button outline expanded" style="border-radius: 50%; padding: 2rem; border-color: #343a40; color: #343a40;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Black</button>
    </div>
  </div>
</div>

                      
                      
                      <div class="grid-container py-5">
  <div class="grid-x grid-padding-x small-up-1 medium-up-2 large-up-4">
    <div class="cell">
      <button class="button primary expanded d-flex align-middle justify-center p-3 rounded">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-house-door mr-2" viewBox="0 0 16 16">
          <path d="M8 3.293l6 6V13h-4v3H6v-3H2V9.293l6-6zM0 9.293l7-7 7 7V14h-3v-4h-8v4H0V9.293z"/>
        </svg>
        Home
      </button>
    </div>
    <div class="cell">
      <button class="button success expanded d-flex align-middle justify-center p-3 rounded">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search mr-2" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6 6 0 1 0-1.398 1.398l4.672 4.671a1 1 0 1 0 1.414-1.414l-4.672-4.671zM12 6a5.978 5.978 0 0 1-1.162 3.626l-4.326-4.327A5.978 5.978 0 0 1 12 6z"/>
        </svg>
        Search
      </button>
    </div>
    <div class="cell">
      <button class="button warning expanded d-flex align-middle justify-center p-3 rounded">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle mr-2" viewBox="0 0 16 16">
          <path d="M8 3a5 5 0 1 0 5 5 5 5 0 0 0-5-5zM8 0a8 8 0 1 1-8 8 8 8 0 0 1 8-8zm0 14a6 6 0 1 0-6-6 6 6 0 0 0 6 6z"/>
        </svg>
        Add
      </button>
    </div>
    <div class="cell">
      <button class="button alert expanded d-flex align-middle justify-center p-3 rounded">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-gear mr-2" viewBox="0 0 16 16">
          <path d="M8 3.5a4.5 4.5 0 1 0 4.5 4.5A4.5 4.5 0 0 0 8 3.5zM8 1a5 5 0 1 1-5 5 5 5 0 0 1 5-5z"/>
        </svg>
        Settings
      </button>
    </div>
    <div class="cell">
      <button class="button info expanded d-flex align-middle justify-center p-3 rounded">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-cart mr-2" viewBox="0 0 16 16">
          <path d="M0 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1h9V1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h1V1zM1 2h1v1H1zM14 2h1v1h-1zM0 12h16V4H0z"/>
        </svg>
        Cart
      </button>
    </div>
    <div class="cell">
      <button class="button pink expanded d-flex align-middle justify-center p-3 rounded">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-heart mr-2" viewBox="0 0 16 16">
          <path d="M8 13s3-2.5 6-5c2-2 2-4 0-6-2-2-4-2-6 0-2-2-4-2-6 0-2 2-2 4 0 6 3 2.5 6 5 6 5z"/>
        </svg>
        Favorite
      </button>
    </div>
    <div class="cell">
      <button class="button secondary expanded d-flex align-middle justify-center p-3 rounded">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-chat mr-2" viewBox="0 0 16 16">
          <path d="M2 4a2 2 0 0 0 2-2h8a2 2 0 0 0 2 2v8a2 2 0 0 0-2 2H4a2 2 0 0 0-2-2V4zm3 0v8h8V4H5z"/>
        </svg>
        Messages
      </button>
    </div>
    <div class="cell">
      <button class="button dark expanded d-flex align-middle justify-center p-3 rounded">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person mr-2" viewBox="0 0 16 16">
          <path d="M8 1a4 4 0 1 1-4 4 4 4 0 0 1 4-4zm0 8a6 6 0 0 0-6 6v1h12v-1a6 6 0 0 0-6-6z"/>
        </svg>
        Profile
      </button>
    </div>
  </div>
</div>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Mon

Tue

Wed

Thu

Fri

Sat

                      
                      
                      <div class="grid-container p-4">
  <div class="grid-x grid-padding-x align-middle small-up-1 medium-up-2 large-up-7 bg-white shadow-sm rounded overflow-auto mx-auto py-3 px-2 mb-4">
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded-circle mx-1 transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Sun</p>
        <p class="mb-0 fw-bold">1</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded-circle mx-1 transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Mon</p>
        <p class="mb-0 fw-bold">2</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded-circle mx-1 transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Tue</p>
        <p class="mb-0 fw-bold">3</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded-circle mx-1 transition-all bg-primary text-white shadow-lg position-relative p-3">
        <p class="mb-1 small">Wed</p>
        <p class="mb-0 fw-bold">4</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded-circle mx-1 transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Thu</p>
        <p class="mb-0 fw-bold">5</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded-circle mx-1 transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Fri</p>
        <p class="mb-0 fw-bold">6</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded-circle mx-1 transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Sat</p>
        <p class="mb-0 fw-bold">7</p>
      </div>
    </div>
  </div>
  <div class="grid-x grid-padding-x align-middle small-up-1 medium-up-2 large-up-7 bg-white shadow-sm rounded overflow-auto mx-auto py-3 px-2">
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded mx-1 transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Sun</p>
        <p class="mb-0 fw-bold">1</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded mx-1 transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Mon</p>
        <p class="mb-0 fw-bold">2</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded mx-1 transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Tue</p>
        <p class="mb-0 fw-bold">3</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded mx-1 bg-primary text-white shadow-lg position-relative p-3">
        <p class="mb-1 small">Wed</p>
        <p class="mb-0 fw-bold">4</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded mx-1 transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Thu</p>
        <p class="mb-0 fw-bold">5</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded mx-1 transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Fri</p>
        <p class="mb-0 fw-bold">6</p>
      </div>
    </div>
    <div class="cell">
      <div class="button expanded d-flex flex-column align-items-center rounded mx-1 transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
        <p class="mb-1 small">Sat</p>
        <p class="mb-0 fw-bold">7</p>
      </div>
    </div>
  </div>
</div>

Holiday Sale - Up to 40% off on home decor! Shop Now

                      
                      
                      <div class="grid-container d-flex align-items-center justify-content-center">
  <div class="grid-x grid-padding-x small-up-1 medium-up-1 large-up-1">
    <div class="cell">
      <div role="alert" class="callout primary d-flex align-items-center p-4 rounded-lg">
        <div class="mr-5">
          <p class="font-weight-bold text-warning">Holiday Sale
            <span class="text-light">
              - Up to 40% off on home decor!
            </span>
            <span title="" class="d-inline-flex align-items-center justify-content-center text-sm font-weight-bold text-warning ml-3">
              Shop Now <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
            </span>
          </p>
        </div>
        <button class="close-button" type="button" aria-label="Close alert" role="button"></button>
      </div>
    </div>
  </div>
</div>

<div class="grid-container d-flex align-items-center justify-content-center">
  <div class="grid-x grid-padding-x small-up-1 medium-up-1 large-up-1">
    <div class="cell">
      <div role="alert" class="callout alert-danger d-flex align-items-center p-4 rounded-lg">
        <div class="mr-5">
          <p class="font-weight-bold text-warning">Holiday Sale
            <span class="text-light">
              - Up to 40% off on home decor!
            </span>
            <span title="" class="d-inline-flex align-items-center justify-content-center text-sm font-weight-bold text-warning ml-3">
              Shop Now <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
            </span>
          </p>
        </div>
        <button class="close-button" type="button" aria-label="Close alert" role="button"></button>
      </div>
    </div>
  </div>
</div>

<div class="grid-container d-flex align-items-center justify-content-center">
  <div class="grid-x grid-padding-x small-up-1 medium-up-1 large-up-1">
    <div class="cell">
      <div role="alert" class="callout success d-flex align-items-center p-4 rounded-lg">
        <div class="mr-5">
          <p class="font-weight-bold text-warning">Holiday Sale
            <span class="text-light">
              - Up to 40% off on home decor!
            </span>
            <span title="" class="d-inline-flex align-items-center justify-content-center text-sm font-weight-bold text-warning ml-3">
              Shop Now <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
            </span>
          </p>
        </div>
        <button class="close-button" type="button" aria-label="Close alert" role="button"></button>
      </div>
    </div>
  </div>
</div>

<div class="grid-container d-flex align-items-center justify-content-center">
  <div class="grid-x grid-padding-x small-up-1 medium-up-1 large-up-1">
    <div class="cell">
      <div role="alert" class="callout info d-flex align-items-center p-4 rounded-lg">
        <div class="mr-5">
          <p class="font-weight-bold text-warning">Holiday Sale
            <span class="text-light">
              - Up to 40% off on home decor!
            </span>
            <span title="" class="d-inline-flex align-items-center justify-content-center text-sm font-weight-bold text-warning ml-3">
              Shop Now <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
            </span>
          </p>
        </div>
        <button class="close-button" type="button" aria-label="Close alert" role="button"></button>
      </div>
    </div>
  </div>
</div>

Sample Heading One

Sample Heading Two

Sample Heading Three

Sample Heading Four

Sample Heading Five

Sample Heading Six

                      
                      
                      <div class="grid-container my-5">
  <div class="grid-x grid-padding-x align-start">
    <div class="cell">
      <h1 class="font-weight-bold text-primary fs-1">Sample Heading One</h1>
      <h2 class="font-weight-bold text-secondary fs-2">Sample Heading Two</h2>
      <h3 class="font-weight-bold text-success fs-3">Sample Heading Three</h3>
      <h4 class="font-weight-bold text-warning fs-4">Sample Heading Four</h4>
      <h5 class="font-weight-bold text-info fs-5">Sample Heading Five</h5>
      <p class="font-weight-semibold text-muted fs-6">Sample Heading Six</p>
    </div>
  </div>
</div>

                      
                      

                      <nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="pagination-previous">
      <a href="#" aria-label="Previous">&laquo; Previous</a>
    </li>
    <li class="pagination-item">
      <a href="#">1</a>
    </li>
    <li class="pagination-item">
      <a href="#">2</a>
    </li>
    <li class="pagination-item is-current" aria-current="page">
      <a href="#">3</a>
    </li>
    <li class="pagination-item">
      <a href="#">4</a>
    </li>
    <li class="pagination-item">
      <a href="#">5</a>
    </li>
    <li class="pagination-next">
      <a href="#" aria-label="Next">Next &raquo;</a>
    </li>
  </ul>
</nav>

Flexible Billing

2.0%

for transactions within Europe

3.5%

for international transactions

Premium Business Plan

2.0%

for transactions within Europe

3.5%

for international transactions

                      
                      
                      <div class="grid-container py-5">
  <div class="grid-x grid-padding-x align-center">
    <div class="cell small-12 medium-6 mb-4">
      <div class="card shadow large rounded">
        <div class="card-header text-center bg-light text-primary font-weight-bold">
          Flexible Billing
        </div>
        <div class="card-section">
          <div class="grid-x grid-padding-x align-center mb-4">
            <div class="cell text-center">
              <h3 class="h4">2.0%</h3>
              <p class="text-muted small mt-2">for transactions within Europe</p>
            </div>
            <div class="cell text-center ml-5">
              <h3 class="h4">3.5%</h3>
              <p class="text-muted small mt-2">for international transactions</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cell small-12 medium-6 mb-4">
      <div class="card shadow large rounded">
        <div class="card-header text-center bg-dark text-white font-weight-bold">
          Premium Business Plan
        </div>
        <div class="card-section">
          <div class="grid-x grid-padding-x align-center mb-4">
            <div class="cell text-center">
              <h3 class="h4">2.0%</h3>
              <p class="text-muted small mt-2">for transactions within Europe</p>
            </div>
            <div class="cell text-center ml-5">
              <h3 class="h4">3.5%</h3>
              <p class="text-muted small mt-2">for international transactions</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

December 2024

Mo	Tu	We	Th	Fr	Sa	Su
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

                      
                      

                      <div class="grid-container py-5">
    <div class="grid-x align-center">
        <div class="cell large-4">
            <div class="card shadow">
                <div class="card-divider text-center bg-light text-primary">
                    <strong>December 2024</strong>
                </div>
                <div class="card-section">
                    <div class="grid-x align-middle">
                        <div class="cell">
                            <button aria-label="calendar backward" class="button hollow text-dark">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M0 0h24v24H0z" fill="none"/>
                                    <polyline points="15 6 9 12 15 18" />
                                </svg>
                            </button>
                        </div>
                        <div class="cell">
                            <button aria-label="calendar forward" class="button hollow text-dark">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M0 0h24v24H0z" fill="none"/>
                                    <polyline points="9 6 15 12 9 18" />
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="overflow-auto">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th class="text-center">Mo</th>
                                    <th class="text-center">Tu</th>
                                    <th class="text-center">We</th>
                                    <th class="text-center">Th</th>
                                    <th class="text-center">Fr</th>
                                    <th class="text-center">Sa</th>
                                    <th class="text-center">Su</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-center"></td>
                                    <td class="text-center"></td>
                                    <td class="text-center"></td>
                                    <td class="text-center"><p>1</p></td>
                                    <td class="text-center"><p>2</p></td>
                                    <td class="text-center"><p>3</p></td>
                                    <td class="text-center"><p>4</p></td>
                                </tr>
                                <tr>
                                    <td class="text-center"><p>5</p></td>
                                    <td class="text-center"><p>6</p></td>
                                    <td class="text-center"><p>7</p></td>
                                    <td class="text-center"><a class="button primary rounded-circle" href="#">8</a></td>
                                    <td class="text-center"><p>9</p></td>
                                    <td class="text-center"><p>10</p></td>
                                    <td class="text-center"><p>11</p></td>
                                </tr>
                                <tr>
                                    <td class="text-center"><p>12</p></td>
                                    <td class="text-center"><p>13</p></td>
                                    <td class="text-center"><p>14</p></td>
                                    <td class="text-center"><p>15</p></td>
                                    <td class="text-center"><p>16</p></td>
                                    <td class="text-center"><p>17</p></td>
                                    <td class="text-center"><p>18</p></td>
                                </tr>
                                <tr>
                                    <td class="text-center"><p>19</p></td>
                                    <td class="text-center"><p>20</p></td>
                                    <td class="text-center"><p>21</p></td>
                                    <td class="text-center"><p>22</p></td>
                                    <td class="text-center"><p>23</p></td>
                                    <td class="text-center"><p>24</p></td>
                                    <td class="text-center"><p>25</p></td>
                                </tr>
                                <tr>
                                    <td class="text-center"><p>26</p></td>
                                    <td class="text-center"><p>27</p></td>
                                    <td class="text-center"><p>28</p></td>
                                    <td class="text-center"><p>29</p></td>
                                    <td class="text-center"><p>30</p></td>
                                    <td class="text-center"><p>31</p></td>
                                    <td class="text-center"><p></p></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Choose your file or simply drag it here

Supported formats: SVG, PNG, JPG, GIF (MAX. 800x400px)

This file upload component is part of a comprehensive Bootstrap component library. For more details, visit the official Bootstrap Documentation.

                      
                      
                      <div class="grid-container my-5">
  <div class="grid-x align-center">
    <div class="cell medium-6 large-4">
      <label for="dropzone-file" class="file-upload text-center border-dashed border-2 p-5 cursor-pointer bg-light hover:bg-light rounded">
        <div class="d-flex flex-column align-items-center justify-content-center">
          <svg class="icon mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
          </svg>
          <p class="mb-2 text-muted"><span class="font-weight-bold">Choose your file</span> or simply drag it here</p>
          <p class="text-muted small">Supported formats: SVG, PNG, JPG, GIF (MAX. 800x400px)</p>
        </div>
        <input id="dropzone-file" type="file" class="hide" />
      </label>
    </div>
  </div>
  <p class="mt-3">This file upload component is part of a comprehensive Foundation component library. For more details, visit the official <a class="text-primary" href="#" target="_blank">Foundation Documentation</a>.</p>
</div>

This section provides an overview of the user's profile and the key details that define the account. You can view and edit your basic information here. Switch tabs to access different sections.

In the Stats tab, you can monitor the overall performance of your account. Check metrics such as activity, engagement, and other key statistics to understand how well your profile is doing.

Here you can adjust your preferences, including notification settings, privacy options, and other personal configurations. Customize the platform to suit your needs and preferences.

The Connections section allows you to manage your connections and communication with others. You can add, remove, or update your contacts here for easy access and interaction.

                      
                      
                      <div class="grid-container my-5">
  <ul class="tabs" id="myTab" role="tablist">
    <li class="tabs-title">
      <a href="#overview" role="tab" aria-controls="overview" aria-selected="false">Overview</a>
    </li>
    <li class="tabs-title is-active">
      <a href="#stats" role="tab" aria-controls="stats" aria-selected="true">Stats</a>
    </li>
    <li class="tabs-title">
      <a href="#preferences" role="tab" aria-controls="preferences" aria-selected="false">Preferences</a>
    </li>
    <li class="tabs-title">
      <a href="#connections" role="tab" aria-controls="connections" aria-selected="false">Connections</a>
    </li>
  </ul>

  <div class="tabs-content mt-3" id="myTabContent">
    <div class="tabs-panel" id="overview" role="tabpanel" aria-labelledby="overview-tab">
      <p class="text-muted">This section provides an overview of the user's profile and the key details that define the account. You can view and edit your basic information here. Switch tabs to access different sections.</p>
    </div>
    <div class="tabs-panel is-active" id="stats" role="tabpanel" aria-labelledby="stats-tab">
      <p class="text-muted">In the Stats tab, you can monitor the overall performance of your account. Check metrics such as activity, engagement, and other key statistics to understand how well your profile is doing.</p>
    </div>
    <div class="tabs-panel" id="preferences" role="tabpanel" aria-labelledby="preferences-tab">
      <p class="text-muted">Here you can adjust your preferences, including notification settings, privacy options, and other personal configurations. Customize the platform to suit your needs and preferences.</p>
    </div>
    <div class="tabs-panel" id="connections" role="tabpanel" aria-labelledby="connections-tab">
      <p class="text-muted">The Connections section allows you to manage your connections and communication with others. You can add, remove, or update your contacts here for easy access and interaction.</p>
    </div>
  </div>
</div>

                      
                      
                      <div class="off-canvas position-left is-open" id="sideNav" aria-hidden="false">
  <div class="off-canvas-content">
    <div class="grid-x align-center">
      <img src="https://dummyimage.com/722x402" alt="Dummy Image" class="cell shrink" style="max-height: 200px;">
    </div>
    <nav class="mt-3">
      <ul class="vertical menu">
        <li>
          <a href="#" class="d-flex align-items-center p-3 my-2 text-primary text-uppercase">
            <i class="fi-home"></i>
            <span class="ml-3 small">Home</span>
          </a>
        </li>
        <li>
          <a href="#" class="d-flex align-items-center p-3 my-2 text-muted text-uppercase hover-primary">
            <i class="fi-folder"></i>
            <span class="ml-3 small">Files</span>
          </a>
        </li>
        <li>
          <a href="#" class="d-flex align-items-center p-3 my-2 text-muted text-uppercase hover-primary">
            <i class="fi-list"></i>
            <span class="ml-3 small">Tasks</span>
          </a>
        </li>
        <li>
          <a href="#" class="d-flex align-items-center p-3 my-2 text-muted text-uppercase hover-primary">
            <i class="fi-calendar"></i>
            <span class="ml-3 small">Schedule</span>
          </a>
        </li>
        <li>
          <a href="#" class="d-flex align-items-center p-3 my-2 text-muted text-uppercase hover-primary">
            <i class="fi-clock"></i>
            <span class="ml-3 small">Timing</span>
          </a>
        </li>
        <li>
          <a href="#" class="d-flex align-items-center p-3 my-2 text-muted text-uppercase hover-primary">
            <i class="fi-page"></i>
            <span class="ml-3 small">Documents</span>
          </a>
        </li>
        <li>
          <a href="#" class="d-flex align-items-center p-3 my-2 text-muted text-uppercase hover-primary">
            <i class="fi-settings"></i>
            <span class="ml-3 small">Options</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

Our Achievements

50

Users

15

Subscribes

12

Downloads

20

Products

                      
                      
                      <section class="text-gray-600 body-font">
  <div class="grid-container">
    <div class="grid-x grid-margin-x">
      <div class="cell small-12 mb-6">
        <h1 class="display-4 font-weight-bold mb-2 text-dark">Our Achievements</h1>
        <div class="h-1 w-20 bg-success rounded"></div>
      </div>
    </div>
    <div class="grid-x text-center">
      <div class="cell small-12 medium-3 mb-4">
        <div class="callout success text-center p-4 rounded-lg">
            <h2 class="font-weight-medium display-3 text-white">50</h2>
            <p class="text-white font-weight-bold">Users</p>
        </div>
      </div>
      <div class="cell small-12 medium-3 mb-4">
        <div class="callout success text-center p-4 rounded-lg">
            <h2 class="font-weight-medium display-3 text-white">15</h2>
            <p class="text-white font-weight-bold">Subscribes</p>
        </div>
      </div>
      <div class="cell small-12 medium-3 mb-4">
        <div class="callout success text-center p-4 rounded-lg">
            <h2 class="font-weight-medium display-3 text-white">12</h2>
            <p class="text-white font-weight-bold">Downloads</p>
        </div>
      </div>
      <div class="cell small-12 medium-3 mb-4">
        <div class="callout success text-center p-4 rounded-lg">
            <h2 class="font-weight-medium display-3 text-white">20</h2>
            <p class="text-white font-weight-bold">Products</p>
        </div>
      </div>
    </div>
  </div>
</section>

通知

未読メッセージが3件あります。

デバイスに通知を送信します。

通話が確認されました。
1時間前
新しいメッセージがあります！
1時間前
サブスクリプションが間もなく期限切れです！
2時間前

                      
                        
                      
                      <div class="grid-container">
  <div class="grid-x grid-padding-x align-center bg-light py-5">
    <div class="cell small-12 medium-8">
      <div class="card shadow-sm">
        <div class="card-section">
          <h5 class="font-weight-bold text-dark mb-4">通知</h5>
          <p class="text-muted mb-4">未読メッセージが3件あります。</p>
          <div class="d-flex align-items-center mb-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg me-2" viewBox="0 0 16 16">
              <path d="M13.485 1.515a.5.5 0 0 1 .707 0l1.5 1.5a.5.5 0 0 1 0 .707l-9.5 9.5a.5.5 0 0 1-.707 0l-5-5a.5.5 0 0 1 .707-.707l4.646 4.647 9.146-9.147z"/>
            </svg>
            <div>
              <small class="text-muted mb-4">デバイスに通知を送信します。</small>
            </div>
            <div class="switch right">
              <input type="checkbox" id="notificationSwitch" checked>
              <label for="notificationSwitch"></label>
            </div>
          </div>
          <ul class="no-bullet">
            <li class="d-flex align-items-start mb-3">
              <div class="round bg-primary me-3" style="width: 8px; height: 8px;"></div>
              <div>
                <p class="mb-0 font-weight-semibold">通話が確認されました。</p>
                <small class="text-muted">1時間前</small>
              </div>
            </li>
            <li class="d-flex align-items-start mb-3">
              <div class="round bg-primary me-3" style="width: 8px; height: 8px;"></div>
              <div>
                <p class="mb-0 font-weight-semibold">新しいメッセージがあります！</p>
                <small class="text-muted">1時間前</small>
              </div>
            </li>
            <li class="d-flex align-items-start">
              <div class="round bg-primary me-3" style="width: 8px; height: 8px;"></div>
              <div>
                <p class="mb-0 font-weight-semibold">サブスクリプションが間もなく期限切れです！</p>
                <small class="text-muted">2時間前</small>
              </div>
            </li>
          </ul>
          <button class="button primary expanded mt-4">
            すべて既読にする
          </button>
        </div>
      </div>
    </div>
  </div>
</div>