Spectre

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

              
              

              <div class="columns">
  <div class="column">
    <div class="card">
      <div class="card-image">
        <img src="https://dummyimage.com/700x400" alt="...">
      </div>
      <div class="card-body">
        <h5 class="card-title">Card 3</h5>
        <p class="card-text">This card has a footer and a button for interaction.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 5 mins ago</small>
        <a href="#" class="btn btn-primary btn-sm">Details</a>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <div class="card-image">
        <img src="https://dummyimage.com/700x400" alt="...">
      </div>
      <div class="card-body">
        <h5 class="card-title">Card 3</h5>
        <p class="card-text">This card has a footer and a button for interaction.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 5 mins ago</small>
        <a href="#" class="btn btn-primary btn-sm">Details</a>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <div class="card-image">
        <img src="https://dummyimage.com/700x400" alt="...">
      </div>
      <div class="card-body">
        <h5 class="card-title">Card 3</h5>
        <p class="card-text">This card has a footer and a button for interaction.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 5 mins ago</small>
        <a href="#" class="btn btn-primary btn-sm">Details</a>
      </div>
    </div>
  </div>
</div>

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="container py-5">
  <div class="columns is-multiline">
    <div class="column is-one-third">
      <div class="card">
        <div class="card-body">
          <div class="media">
            <div class="media-content">
              <h5 class="card-title">Card 3</h5>
              <p class="card-text">A card with a vertical alignment for image and text.</p>
            </div>
            <figure class="media-left">
              <img src="https://dummyimage.com/722x402" class="image is-120x120" alt="...">
            </figure>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-one-third">
      <div class="card">
        <div class="card-body">
          <div class="media">
            <div class="media-content">
              <h5 class="card-title">Card 3</h5>
              <p class="card-text">A card with a vertical alignment for image and text.</p>
            </div>
            <figure class="media-left">
              <img src="https://dummyimage.com/722x402" class="image is-120x120" alt="...">
            </figure>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-one-third">
      <div class="card">
        <div class="card-body">
          <div class="media">
            <div class="media-content">
              <h5 class="card-title">Card 3</h5>
              <p class="card-text">A card with a vertical alignment for image and text.</p>
            </div>
            <figure class="media-left">
              <img src="https://dummyimage.com/722x402" class="image is-120x120" alt="...">
            </figure>
          </div>
        </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="container py-5">
  <div class="columns is-multiline">
    <div class="column is-one-third">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 4</h5>
          <p class="card-text">A card with a list group to show details.</p>
          <ul class="list">
            <li class="list-item">Item 1</li>
            <li class="list-item">Item 2</li>
            <li class="list-item">Item 3</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="column is-one-third">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 4</h5>
          <p class="card-text">A card with a list group to show details.</p>
          <ul class="list">
            <li class="list-item">Item 1</li>
            <li class="list-item">Item 2</li>
            <li class="list-item">Item 3</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="column is-one-third">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 4</h5>
          <p class="card-text">A card with a list group to show details.</p>
          <ul class="list">
            <li class="list-item">Item 1</li>
            <li class="list-item">Item 2</li>
            <li class="list-item">Item 3</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="columns is-multiline">
  <div class="column is-one-third">
    <div class="card">
      <div class="card-body">
        <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="tag is-danger">5</span>
        </h6>
        <ul class="list">
          <li class="list-item">New Comment</li>
          <li class="list-item">Friend Request</li>
          <li class="list-item">System Update</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="column is-one-third">
    <div class="card">
      <div class="card-body">
        <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="tag is-danger">5</span>
        </h6>
        <ul class="list">
          <li class="list-item">New Comment</li>
          <li class="list-item">Friend Request</li>
          <li class="list-item">System Update</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="column is-one-third">
    <div class="card">
      <div class="card-body">
        <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="tag is-danger">5</span>
        </h6>
        <ul class="list">
          <li class="list-item">New Comment</li>
          <li class="list-item">Friend Request</li>
          <li class="list-item">System Update</li>
        </ul>
      </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="columns is-multiline">
  <div class="column is-one-third">
    <div class="card has-background-dark">
      <div class="card-body">
        <h5 class="card-title has-text-light">Card 25</h5>
        <p class="card-text has-text-light">A dark-themed card with an accordion.</p>
        <div class="accordion">
          <div class="accordion-item">
            <div class="accordion-header">
              <button class="accordion-button" data-toggle="collapse" data-target="#collapseOne">
                Accordion Item #1
              </button>
            </div>
            <div id="collapseOne" class="accordion-collapse collapse">
              <div class="accordion-body">
                This is the first item's accordion body.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <div class="accordion-header">
              <button class="accordion-button" data-toggle="collapse" data-target="#collapseTwo">
                Accordion Item #2
              </button>
            </div>
            <div id="collapseTwo" class="accordion-collapse collapse">
              <div class="accordion-body">
                This is the second item's accordion body.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="column is-one-third">
    <div class="card has-background-dark">
      <div class="card-body">
        <h5 class="card-title has-text-light">Card 25</h5>
        <p class="card-text has-text-light">A dark-themed card with an accordion.</p>
        <div class="accordion">
          <div class="accordion-item">
            <div class="accordion-header">
              <button class="accordion-button" data-toggle="collapse" data-target="#collapseOne">
                Accordion Item #1
              </button>
            </div>
            <div id="collapseOne" class="accordion-collapse collapse">
              <div class="accordion-body">
                This is the first item's accordion body.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <div class="accordion-header">
              <button class="accordion-button" data-toggle="collapse" data-target="#collapseTwo">
                Accordion Item #2
              </button>
            </div>
            <div id="collapseTwo" class="accordion-collapse collapse">
              <div class="accordion-body">
                This is the second item's accordion body.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="column is-one-third">
    <div class="card has-background-dark">
      <div class="card-body">
        <h5 class="card-title has-text-light">Card 25</h5>
        <p class="card-text has-text-light">A dark-themed card with an accordion.</p>
        <div class="accordion">
          <div class="accordion-item">
            <div class="accordion-header">
              <button class="accordion-button" data-toggle="collapse" data-target="#collapseOne">
                Accordion Item #1
              </button>
            </div>
            <div id="collapseOne" class="accordion-collapse collapse">
              <div class="accordion-body">
                This is the first item's accordion body.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <div class="accordion-header">
              <button class="accordion-button" data-toggle="collapse" data-target="#collapseTwo">
                Accordion Item #2
              </button>
            </div>
            <div id="collapseTwo" class="accordion-collapse collapse">
              <div class="accordion-body">
                This is the second item's accordion body.
              </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="columns">
  <div class="column">
    <div class="card">
      <div class="card-header">
        <h5 class="card-title">Card 7</h5>
      </div>
      <div class="card-body">
        <p class="card-text">This card uses a table to organize information.</p>
        <table class="table table-bordered">
          <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="column">
    <div class="card">
      <div class="card-header">
        <h5 class="card-title">Card 7</h5>
      </div>
      <div class="card-body">
        <p class="card-text">This card uses a table to organize information.</p>
        <table class="table table-bordered">
          <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="column">
    <div class="card">
      <div class="card-header">
        <h5 class="card-title">Card 7</h5>
      </div>
      <div class="card-body">
        <p class="card-text">This card uses a table to organize information.</p>
        <table class="table table-bordered">
          <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>

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="columns">
  <div class="column">
    <div class="card">
      <div class="card-header bg-primary text-white text-center">
        Card Header
      </div>
      <div class="card-body">
        <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 text-muted">
        Footer Text
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <div class="card-header bg-primary text-white text-center">
        Card Header
      </div>
      <div class="card-body">
        <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 text-muted">
        Footer Text
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <div class="card-header bg-primary text-white text-center">
        Card Header
      </div>
      <div class="card-body">
        <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 text-muted">
        Footer Text
      </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="container">
    <div class="text-center mb-5">
      <h1 class="h5 fw-semibold 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="columns is-multiline">
      <div class="column is-one-third">
        <div class="card">
          <div class="card-image">
            <figure class="image is-128x128">
              <img src="https://dummyimage.com/200x200" alt="team member" class="is-rounded">
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-5">John Doe</p>
            <p class="subtitle is-6 text-muted">UI Developer</p>
            <p class="text-muted">Creating seamless user experiences and innovative interfaces with a touch of creativity.</p>
            <div class="buttons">
              <a href="#" class="button is-small is-text"><i class="bi bi-facebook"></i></a>
              <a href="#" class="button is-small is-text"><i class="bi bi-twitter"></i></a>
              <a href="#" class="button is-small is-text"><i class="bi bi-linkedin"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-one-third">
        <div class="card">
          <div class="card-image">
            <figure class="image is-128x128">
              <img src="https://dummyimage.com/201x201" alt="team member" class="is-rounded">
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-5">Jane Smith</p>
            <p class="subtitle is-6 text-muted">Graphic Designer</p>
            <p class="text-muted">Crafting stunning visual designs that inspire and captivate audiences worldwide.</p>
            <div class="buttons">
              <a href="#" class="button is-small is-text"><i class="bi bi-facebook"></i></a>
              <a href="#" class="button is-small is-text"><i class="bi bi-twitter"></i></a>
              <a href="#" class="button is-small is-text"><i class="bi bi-linkedin"></i></a>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-one-third">
        <div class="card">
          <div class="card-image">
            <figure class="image is-128x128">
              <img src="https://dummyimage.com/204x204" alt="team member" class="is-rounded">
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-5">Emily Brown</p>
            <p class="subtitle is-6 text-muted">Software Engineer</p>
            <p class="text-muted">Developing robust and scalable solutions to power innovative technologies.</p>
            <div class="buttons">
              <a href="#" class="button is-small is-text"><i class="bi bi-facebook"></i></a>
              <a href="#" class="button is-small is-text"><i class="bi bi-twitter"></i></a>
              <a href="#" class="button is-small is-text"><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="container-fluid">
  <div class="columns is-vcentered">
    <div class="column is-half">
      <h2 class="title is-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="column is-half">
      <figure class="image is-16by9">
        <img src="https://dummyimage.com/722x402" class="is-fluid" alt="Image">
      </figure>
    </div>
  </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="container-fluid">
  <div class="columns is-vcentered py-5" style="background-color: #f8f9fa;">
    <div class="column is-half">
      <h3 class="title is-3 has-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="level">
        <div class="level-left">
          <span class="icon is-small has-text-success">
            <i class="fas fa-check-circle"></i>
          </span>
          <span>Trusted by top companies</span>
        </div>
      </div>
    </div>
    <div class="column is-half">
      <img src="https://dummyimage.com/722x402" class="image is-fluid" alt="Image">
    </div>
  </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="container">
    <div class="columns is-vcentered">
      <div class="column is-12 is-md-6 has-text-centered has-text-left-mobile mb-4 mb-md-0">
        <h1 class="title is-2 has-text-dark mb-4">Discover cutting-edge solutions.
          <br class="is-hidden-desktop">
        </h1>
        <p class="subtitle is-5 has-text-grey mb-4">Discover cutting-edge solutions for your business challenges. Let us help you stay ahead in a competitive world.</p>
        <button class="button is-primary is-large">Button</button>
        <button class="button is-outlined is-secondary is-large ml-3">Button</button>
      </div>
      <div class="column is-12 is-md-6">
        <img class="image is-rounded" alt="hero" src="https://dummyimage.com/720x600">
      </div>
    </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="section py-5">
  <div class="container">
    <div class="columns align-items-center">
      <div class="column is-12 is-md-6 has-text-centered has-text-left-mobile mb-4 mb-md-0">
        <div class="py-5">
          <div class="container">
            <div class="has-text-centered mb-5">
              <h1 class="title is-2 has-text-primary mb-4">Modern Features Showcase</h1>
              <p class="subtitle has-text-grey">Explore a range of cutting-edge features designed to elevate your experience.</p>
            </div>
            <div class="columns is-multiline">
              <div class="column is-12 is-md-6">
                <div class="box is-light p-3 has-text-centered">
                  <span class="icon has-text-primary">
                    <i class="fa fa-check-circle"></i>
                  </span>
                  <span class="has-text-weight-medium">Innovative Design</span>
                </div>
              </div>
              <div class="column is-12 is-md-6">
                <div class="box is-light p-3 has-text-centered">
                  <span class="icon has-text-primary">
                    <i class="fa fa-check-circle"></i>
                  </span>
                  <span class="has-text-weight-medium">Seamless Integration</span>
                </div>
              </div>
              <div class="column is-12 is-md-6">
                <div class="box is-light p-3 has-text-centered">
                  <span class="icon has-text-primary">
                    <i class="fa fa-check-circle"></i>
                  </span>
                  <span class="has-text-weight-medium">Enhanced Usability</span>
                </div>
              </div>
              <div class="column is-12 is-md-6">
                <div class="box is-light p-3 has-text-centered">
                  <span class="icon has-text-primary">
                    <i class="fa fa-check-circle"></i>
                  </span>
                  <span class="has-text-weight-medium">Reliable Performance</span>
                </div>
              </div>
              <div class="column is-12 is-md-6">
                <div class="box is-light p-3 has-text-centered">
                  <span class="icon has-text-primary">
                    <i class="fa fa-check-circle"></i>
                  </span>
                  <span class="has-text-weight-medium">Customizable Options</span>
                </div>
              </div>
              <div class="column is-12 is-md-6">
                <div class="box is-light p-3 has-text-centered">
                  <span class="icon has-text-primary">
                    <i class="fa fa-check-circle"></i>
                  </span>
                  <span class="has-text-weight-medium">Scalable Solutions</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-12 is-md-6">
        <img class="image is-fluid rounded" alt="hero" src="https://dummyimage.com/720x600">
      </div>
    </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="has-text-grey">
  <div class="container py-5">
    <div class="columns is-multiline is-mobile mb-3 mb-lg-0">
      <div class="column is-full-tablet is-6-desktop pr-lg-5">
        <div class="mb-4">
          <h1 class="title is-3 has-text-dark mb-2">Innovative Tech Solutions</h1>
          <p class="subtitle is-medium">Providing cutting-edge solutions to everyday challenges through technology and design.</p>
        </div>
        
        <div class="column is-6-mobile is-4-tablet is-3-desktop mb-4">
          <h2 class="title is-4 has-text-dark">100</h2>
          <p>text 1</p>
        </div>
        <div class="column is-6-mobile is-4-tablet is-3-desktop mb-4">
          <h2 class="title is-4 has-text-dark">200</h2>
          <p>text 2</p>
        </div>
        <div class="column is-6-mobile is-4-tablet is-3-desktop mb-4">
          <h2 class="title is-4 has-text-dark">300</h2>
          <p>text 3</p>
        </div>
        <div class="column is-6-mobile is-4-tablet is-3-desktop mb-4">
          <h2 class="title is-4 has-text-dark">400</h2>
          <p>text 4</p>
        </div>
        <div class="column is-6-mobile is-4-tablet is-3-desktop mb-4">
          <h2 class="title is-4 has-text-dark">500</h2>
          <p>text 5</p>
        </div>
        <div class="column is-6-mobile is-4-tablet is-3-desktop mb-4">
          <h2 class="title is-4 has-text-dark">600</h2>
          <p>text 6</p>
        </div>
        <div class="column is-6-mobile is-4-tablet is-3-desktop mb-4">
          <h2 class="title is-4 has-text-dark">700</h2>
          <p>text 7</p>
        </div>
        <div class="column is-6-mobile is-4-tablet is-3-desktop mb-4">
          <h2 class="title is-4 has-text-dark">800</h2>
          <p>text 8</p>
        </div>
      </div>
      
      <div class="column is-full-tablet is-6-desktop rounded-lg overflow-hidden mt-4 mt-lg-0">
        <img class="image is-fluid" src="https://dummyimage.com/600x300" alt="statistic image">
      </div>
    </div>
  </div>
</section>

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

                      
                      
                      <div class="container-fluid d-flex flex-column justify-center align-center bg-light py-5" style="background-image: url('https://picsum.photos/id/1018/1000'); background-size: cover; background-position: center;">
  <div class="container">
    <div class="card bg-white shadow-2 p-4 rounded">
      <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="Image">
        </div>
        <div class="border-top pt-4">
          <div class="mb-4">
            <ul class="list-unstyled">
              <li class="d-flex align-items-start mb-3">
                <i class="icon-check-circle text-primary mr-2"></i>
                <span>Create and customize your design system</span>
              </li>
              <li class="d-flex align-items-start mb-3">
                <i class="icon-check-circle text-primary mr-2"></i>
                <span>Leverage utilities for rapid development</span>
              </li>
              <li class="d-flex align-items-start mb-3">
                <i class="icon-check-circle text-primary mr-2"></i>
                <span>From beginner to production-ready skills</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

                      
                      
                      <div class="container d-flex justify-center align-center py-5" style="background: linear-gradient(to bottom right, #e0f7fa, #80deea, #26c6da);">
  <div class="card bg-white p-4 shadow-2 rounded w-100" style="max-width: 600px;">
    <div class="card-body 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">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">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">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">Access professional resources →</a>
      </p>
    </div>

    <a href="/new-path/home" class="btn btn-primary w-100">
      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-primary text-white">
  <div class="container">
    <div class="d-flex flex-column align-items-center mx-n5 md-flex-row">
      <div class="w-100 px-5 mb-5 text-center md-0">
        <h6 class="text-xs font-semibold text-dark text-uppercase md-text-base">
          Event Starting Soon
        </h6>
        <h3 class="mx-2 text-2xl font-weight-bold text-white md-text-4xl">
          Join us for an exciting Saturday!
        </h3>
        <h3 class="mt-4 text-lg font-weight-bold text-white md-text-xl">
          Start Time: 9:00 AM
        </h3>
      </div>
      <div class="w-100 px-5 md-w-auto">
        <div class="d-flex justify-content-center text-center">
          <div class="w-20 py-3 mx-2 border rounded-lg md-w-24 border-light bg-light-100 md-py-4">
            <div class="text-2xl font-weight-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="w-20 py-3 mx-2 border rounded-lg md-w-24 border-light bg-light-100 md-py-4">
            <div class="text-2xl font-weight-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="w-20 py-3 mx-2 border rounded-lg md-w-24 border-light bg-light-100 md-py-4">
            <div class="text-2xl font-weight-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="w-20 py-3 mx-2 border rounded-lg md-w-24 border-light bg-light-100 md-py-4">
            <div class="text-2xl font-weight-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-lg-row m-4 p-2 p-md-5">
  <div class="w-100 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="w-100 w-md-1/3 p-3">
          Many people felt very positive about the service, with a majority expressing satisfaction.
        </div>
        <div class="d-flex w-100 w-md-2/3 min-h-[60px]">
          <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="w-100 w-md-1/3 p-3">
          Some users were less satisfied with certain aspects of the product, especially regarding usability.
        </div>
        <div class="d-flex w-100 w-md-2/3 min-h-[60px]">
          <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="w-100 w-md-1/3 p-3">
          There were a few complaints about delivery times and product quality, but these were in the minority.
        </div>
        <div class="d-flex w-100 w-md-2/3 min-h-[60px]">
          <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="h3 text-dark mb-4 ml-3">Recent Announcements</h3>
<ol class="list-unstyled">
  <li class="border-start mb-4">
    <div class="d-flex align-items-start">
      <div class="bg-primary w-6 h-6 d-flex justify-center align-items-center rounded-circle mr-3">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 1rem; height: 1rem;">
          <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 bg-light shadow-sm rounded">
        <div class="d-flex justify-content-between mb-3">
          <a href="#" class="text-primary">Updated Interface Design</a>
          <span class="text-muted">05 / 10 / 2023</span>
        </div>
        <p class="text-dark mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
        <button type="button" class="btn btn-primary btn-sm mr-2">Learn More</button>
        <button type="button" class="btn btn-outline-primary btn-sm">Try Demo</button>
      </div>
    </div>
  </li>
  <li class="border-start mb-4">
    <div class="d-flex align-items-start">
      <div class="bg-success w-6 h-6 d-flex justify-center align-items-center rounded-circle mr-3">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 1rem; height: 1rem;">
          <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 bg-light shadow-sm rounded">
        <div class="d-flex justify-content-between mb-3">
          <a href="#" class="text-primary">5,000 New Job Listings</a>
          <span class="text-muted">10 / 12 / 2023</span>
        </div>
        <p class="text-dark mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
        <button type="button" class="btn btn-primary btn-sm mr-2">Explore More</button>
        <button type="button" class="btn btn-outline-primary btn-sm">View Demo</button>
      </div>
    </div>
  </li>
  <li class="border-start mb-4">
    <div class="d-flex align-items-start">
      <div class="bg-info w-6 h-6 d-flex justify-center align-items-center rounded-circle mr-3">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 1rem; height: 1rem;">
          <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 bg-light shadow-sm rounded">
        <div class="d-flex justify-content-between mb-3">
          <a href="#" class="text-primary">Top Companies Hiring</a>
          <span class="text-muted">30 / 09 / 2023</span>
        </div>
        <p class="text-dark mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
        <button type="button" class="btn btn-primary btn-sm mr-2">Learn More</button>
        <button type="button" class="btn btn-outline-primary btn-sm">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="columns is-centered">
  <section class="section px-5">
    <div class="mb-5 has-text-centered">
      <h3 class="title is-3 has-text-dark mb-4 mt-5">We have solutions</h3>
      <h1 class="title is-1 has-text-dark my-4">Something Asked Questions</h1>
      <p class="my-4 mx-auto is-size-5 has-text-grey-dark">See what others often inquire about!</p>
    </div>
    <div class="columns is-multiline">
      <div class="column is-12 is-offset-3-tablet is-6-desktop">
        <h5 class="mt-4 mb-2 has-text-dark">What is Bootstrap?</h5>
        <div class="content is-size-6 has-text-grey-dark 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 has-text-dark">Can Bootstrap be used with React?</h5>
        <div class="content is-size-6 has-text-grey-dark 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 has-text-dark">What makes Bootstrap so popular?</h5>
        <div class="content is-size-6 has-text-grey-dark 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 has-text-centered">
      <div class="is-size-7 has-text-grey">
        Made with <a class="has-text-weight-semibold" href="/" target="_blank">Bootstrap</a> by <a href="#" class="has-text-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="container">
  <div class="columns">
    <div class="column col-12 col-md-6 offset-md-3">
      <div class="my-3">
        <a href="#" class="text-danger text-uppercase font-weight-bold">NEW TOPIC</a>
      </div>
      <div class="h3 text-dark font-weight-bold">
        New Developments in the Tech World
      </div>

      <div class="text-muted my-2">
        The latest trends and innovations in the tech industry are transforming businesses.
      </div>


      <div class="my-3">
        <p class="text-muted">12/30/2024 10:00 AM EDT</p>
      </div>

      <div class="my-3">
        <p>The tech industry has seen remarkable growth this year, with major advancements in artificial intelligence, cloud computing, and quantum technology.</p>
        <p>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>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>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>
</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="container py-4">
  <h1 class="text-center mb-8 display-3 font-weight-bold text-primary">What we do at our company:</h1>
  <ul class="columns">
    <li class="column col-12 col-md-6 col-lg-4">
      <div class="d-flex">
        <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="column col-12 col-md-6 col-lg-4">
      <div class="d-flex">
        <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="column col-12 col-md-6 col-lg-4">
      <div class="d-flex">
        <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="column col-12 col-md-6 col-lg-4">
      <div class="d-flex">
        <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="column col-12 col-md-6 col-lg-4">
      <div class="d-flex">
        <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="column col-12 col-md-6 col-lg-4">
      <div class="d-flex">
        <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="container py-5">
  <div class="columns">
    <div class="column col-12 col-md-3">
      <div class="text-left mb-3">
        <h1 class="display-4 mb-5">Pricing Plans</h1>
        <h3 class="h5 mb-5">Choose the best plan for our service. Each plan has different features and benefits.</h3>
      </div>
      <p class="text-xs">*Prices are monthly</p>
    </div>
    
    <div class="column col-12 col-md-9">
      <div class="columns">
        <!-- Basic Plan -->
        <div class="column col-12 col-md-4">
          <div class="card mb-3 shadow-sm">
            <div class="card-header text-center">
              <h2 class="h6 mb-4">Basic Plan</h2>
              <h3 class="display-4 mb-5">¥500 <span class="text-small">/month</span></h3>
            </div>
            <div class="card-body">
              <ul>
                <li>Basic Features</li>
                <li>Support Included</li>
              </ul>
            </div>
            <div class="card-footer text-center">
              <button class="btn btn-primary btn-block">Buy Now</button>
            </div>
          </div>
        </div>

        <!-- Team Plan -->
        <div class="column col-12 col-md-4">
          <div class="card mb-3 shadow-lg">
            <div class="card-header text-center">
              <h2 class="h6 mb-4">Team Plan</h2>
              <h3 class="display-4 mb-5">¥1500 <span class="text-small">/month</span></h3>
            </div>
            <div class="card-body">
              <ul>
                <li>Team Features</li>
                <li>24/7 Support</li>
                <li>Multiple Account Management</li>
              </ul>
            </div>
            <div class="card-footer text-center">
              <button class="btn btn-primary btn-block">Buy Now</button>
            </div>
          </div>
        </div>

        <!-- Pro Plan -->
        <div class="column col-12 col-md-4">
          <div class="card mb-3 shadow-sm">
            <div class="card-header text-center">
              <h2 class="h6 mb-4">Pro Plan</h2>
              <h3 class="display-4 mb-5">¥3500 <span class="text-small">/month</span></h3>
            </div>
            <div class="card-body">
              <ul>
                <li>Advanced Features</li>
                <li>Dedicated Support</li>
                <li>Priority Access</li>
                <li>Additional Benefits</li>
              </ul>
            </div>
            <div class="card-footer text-center">
              <button class="btn btn-primary btn-block">Buy Now</button>
            </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="container py-5">
  <div class="navbar bg-white">
    <div class="navbar-start">
      <a href="/" class="navbar-item h5 text-dark">Nobalish</a>
    </div>
    <div class="navbar-center d-none d-lg-flex">
      <a href="#" class="navbar-item text-muted text-lg">Dashboard</a>
      <a href="#" class="navbar-item text-indigo-500 text-lg">
        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="navbar-item text-muted text-lg">Plans</a>
      <a href="#" class="navbar-item text-muted text-lg">Contact</a>
    </div>
    <div class="navbar-end">
      <a href="#" class="btn btn-primary">Join Now</a>
      <button class="btn btn-link">
        <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>

  <div class="w-full bg-light border rounded-lg shadow-sm mt-5">
    <div class="container d-flex flex-wrap gap-4 p-4">
      <!-- Item 1 -->
      <a href="#" class="card flex-column justify-center align-center gap-3 p-4 w-1/4">
        <div class="icon bg-indigo-500 text-white rounded-circle p-3">
          <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>
          <h5 class="font-weight-bold mb-2">Innovative Design</h5>
          <p class="text-muted">Explore a range of cutting-edge features designed to elevate your experience.</p>
        </div>
      </a>

      <!-- Item 2 -->
      <a href="#" class="card flex-column justify-center align-center gap-3 p-4 w-1/4">
        <div class="icon bg-indigo-500 text-white rounded-circle p-3">
          <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>
          <h5 class="font-weight-bold mb-2">Solutions</h5>
          <p class="text-muted">Providing cutting-edge solutions to everyday challenges through technology and design.</p>
        </div>
      </a>

      <!-- Item 3 -->
      <a href="#" class="card flex-column justify-center align-center gap-3 p-4 w-1/4">
        <div class="icon bg-indigo-500 text-white rounded-circle p-3">
          <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>
          <h5 class="font-weight-bold mb-2">Innovative Tech</h5>
          <p class="text-muted">Discover the amazing individuals behind our success, working together to make a difference.</p>
        </div>
      </a>

      <!-- Item 4 -->
      <a href="#" class="card flex-column justify-center align-center gap-3 p-4 w-1/4">
        <div class="icon bg-indigo-500 text-white rounded-circle p-3">
          <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>
          <h5 class="font-weight-bold mb-2">Create Account</h5>
          <p class="text-muted">Fill in the details below to create your account.</p>
        </div>
      </a>
    </div>
  </div>
</div>

credit card

Credit Card Number

Expiration Date

Security Code

                      

                      <div class="m-0 p-0 d-flex justify-center align-items-center" style="background: linear-gradient(135deg, #007bff, #6610f2); height: 100vh;">
    <div class="container w-100 max-w-sm p-4 bg-white rounded shadow-lg">
        <div class="mx-auto mb-4">
            <div class="mb-3">
                <label for="name" class="form-label">Credit Card</label>
                <input type="text" class="form-input" id="name" placeholder="Full Name" />
            </div>
            <div class="mb-3">
                <label for="cardNumber" class="form-label">Credit Card Number</label>
                <input type="text" class="form-input" id="cardNumber" placeholder="1234 5678 9012 3456" maxlength="19" />
            </div>
            <div class="columns">
                <div class="column col-8 mb-3">
                    <label for="expiryDate" class="form-label">Expiration Date</label>
                    <input type="text" class="form-input" id="expiryDate" placeholder="MM/YY" maxlength="5" pattern="\d{2}/\d{2}" />
                </div>
                <div class="column col-4 mb-3">
                    <label for="cvv" class="form-label">Security Code</label>
                    <input type="text" class="form-input" id="cvv" placeholder="123" maxlength="3" pattern="\d{3}" />
                </div>
            </div>
            <button class="btn btn-primary w-100 mt-4">Complete Purchase</button>
        </div>
    </div>
</div>

Create Account

Fill in the details below to create your account.

Created using Nobalish.

                      

                      <div class="m-0 p-0 d-flex justify-center align-items-center" style="height: 100vh;">
  <div class="card shadow-lg rounded p-5 bg-light">
    <h4 class="h4 font-weight-bold text-primary">Create Account</h4>
    <p class="mt-2 text-lg text-secondary">Fill in the details below to create your account.</p>
    <form class="mt-4">
      <div class="mb-3">
        <label for="username" class="form-label">Username</label>
        <input type="text" class="form-input" id="username" placeholder="Choose a username" />
      </div>
      <div class="mb-3">
        <label for="useremail" class="form-label">Email Address</label>
        <input type="email" class="form-input" id="useremail" placeholder="Enter your email address" />
      </div>
      <div class="mb-3">
        <label for="userpassword" class="form-label">Password</label>
        <input type="password" class="form-input" 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="btn btn-success w-100">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 text-sm text-muted">
      Created using <a class="text-muted" href="#" target="_blank">Nobalish</a>.
    </div>
  </div>
</div>

                      

                      <div class="container py-5 px-3">
  <div class="card bg-white p-5 mx-auto shadow-lg rounded-lg">
    <form action="">
      <div class="form-group mb-4">
        <label for="number" class="form-label">Contact Number</label>
        <input type="number" id="number" name="number" placeholder="Enter your number" class="form-input">
      </div>
      <div class="form-group mb-4">
        <label for="range" class="form-label">Experience Level</label>
        <input type="range" id="range" name="range" class="form-range">
      </div>
      <div class="form-group mb-4">
        <label for="file" class="form-label">Upload File</label>
        <input type="file" id="file" name="file" class="form-input">
      </div>
      <div class="form-group mb-4">
        <label for="date" class="form-label">Event Date</label>
        <input type="date" id="date" name="date" class="form-input">
      </div>
      <div class="form-group mb-4">
        <label for="month" class="form-label">Start Month</label>
        <input type="month" id="month" name="month" class="form-input">
      </div>
      <div class="form-group mb-4">
        <label for="time" class="form-label">Preferred Time</label>
        <input type="time" id="time" name="time" class="form-input">
      </div>
      <div class="form-group mb-4">
        <label for="password" class="form-label">Password</label>
        <input type="password" id="password" name="password" placeholder="Create a password" class="form-input">
      </div>
      <div class="text-right">
        <button type="submit" class="btn btn-primary">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="container py-6 sm:py-8 lg:py-12">
  <div class="card bg-light p-6 mx-auto">
    <div class="mb-10 md:mb-16">
      <h2 class="mb-4 text-center text-2xl font-bold text-dark md:mb-6 lg:text-3xl">Let's Connect</h2>
      <p class="mx-auto max-w-screen-md text-center text-muted md:text-lg">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="mx-auto row g-4 max-w-screen-md">
      <div class="col-12 col-md-6">
        <label for="first-name" class="form-label">Name of the Explorer*</label>
        <input name="first-name" class="form-input" id="first-name" placeholder="Your full name" required />
      </div>
      <div class="col-12 col-md-6">
        <label for="last-name" class="form-label">Family Name*</label>
        <input name="last-name" class="form-input" id="last-name" placeholder="Your surname" required />
      </div>
      <div class="col-12">
        <label for="company" class="form-label">Organization Name</label>
        <input name="company" class="form-input" id="company" placeholder="Enter your organization" />
      </div>
      <div class="col-12">
        <label for="email" class="form-label">Your Email Address*</label>
        <input name="email" class="form-input" id="email" placeholder="email@example.com" required />
      </div>
      <div class="col-12">
        <label for="subject" class="form-label">Topic of Discussion*</label>
        <input name="subject" class="form-input" id="subject" placeholder="Subject of your message" required />
      </div>
      <div class="col-12">
        <label for="message" class="form-label">Your Thoughts*</label>
        <textarea name="message" class="form-input" id="message" rows="6" placeholder="Write your message here" required></textarea>
      </div>
      <div class="col-12 d-flex justify-content-between align-items-center">
        <button class="btn btn-primary px-8 py-3 text-sm font-semibold" type="submit">Send Your Message</button>
        <span class="text-sm text-muted">*Required fields</span>
      </div>
      <p class="text-xs text-muted">By submitting, you agree to our <a href="#" class="text-decoration-underline">Terms and Conditions</a>.</p>
    </form>
  </div>
</div>

                      
                      

                      <form>
  <div class="columns is-multiline mb-6">
    <div class="column is-half">
      <label for="product_name" class="label">Product Name</label>
      <input type="text" id="product_name" class="input" placeholder="Gadget X100" required>
    </div>
    <div class="column is-half">
      <label for="brand_name" class="label">Brand Name</label>
      <input type="text" id="brand_name" class="input" placeholder="TechNova" required>
    </div>
    <div class="column is-half">
      <label for="price" class="label">Price</label>
      <input type="text" id="price" class="input" placeholder="$499.99" required>
    </div>
    <div class="column is-half">
      <label for="availability" class="label">Availability</label>
      <input type="text" id="availability" class="input" placeholder="In Stock" required>
    </div>
    <div class="column is-half">
      <label for="category" class="label">Category</label>
      <input type="text" id="category" class="input" placeholder="Electronics" required>
    </div>
    <div class="column is-half">
      <label for="rating" class="label">Customer Rating</label>
      <input type="number" id="rating" class="input" placeholder="4.5" required>
    </div>
  </div>
  <div class="mb-6">
    <label for="manufacturer_email" class="label">Manufacturer Email</label>
    <input type="email" id="manufacturer_email" class="input" placeholder="support@technova.com" required>
  </div>
  <div class="mb-6">
    <label for="warranty_period" class="label">Warranty Period</label>
    <input type="text" id="warranty_period" class="input" placeholder="2 years" required>
  </div>
  <div class="mb-6">
    <label class="checkbox">
      <input type="checkbox" id="accept_terms" required>
      I agree to the <a href="#" class="has-text-primary">terms and conditions</a>.
    </label>
  </div>
  <button type="submit" class="button is-primary is-fullwidth">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="columns is-centered">
    <div class="column is-half-tablet is-one-third-desktop">
      <div class="columns is-gapless">
        <!-- Contact Information Section -->
        <div class="column is-one-third has-background-primary p-4 text-white">
          <h2 class="title is-4 has-text-weight-bold mb-4">Contact Information</h2>
          <p class="mb-3">
            <span class="has-text-weight-bold">Location Address</span>
            <span class="d-block">123 Tech Street, Silicon Valley, CA, USA</span>
          </p>
          <p class="mb-3">
            <span class="has-text-weight-bold">Phone Number</span>
            <span class="d-block">+1 (800) 123 4567</span>
          </p>
          <p class="mb-3">
            <span class="has-text-weight-bold">Email Address</span>
            <span class="d-block">contact@company.com</span>
          </p>
          <p class="mb-3">
            <span class="has-text-weight-bold">Web Address</span>
            <span class="d-block">www.companywebsite.com</span>
          </p>
        </div>
        
        <!-- Contact Us Form Section -->
        <div class="column is-two-thirds has-background-light p-4">
          <h2 class="title is-4 has-text-primary has-text-weight-bold mb-4">Contact Us</h2>
          <form>
            <div class="columns is-multiline">
              <div class="column is-half">
                <input type="text" class="input is-rounded" placeholder="Full Name" />
              </div>
              <div class="column is-half">
                <input type="email" class="input is-rounded" placeholder="Your Email" />
              </div>
            </div>
            <div class="columns is-multiline">
              <div class="column is-half">
                <input type="tel" class="input is-rounded" placeholder="Your Phone Number" />
              </div>
              <div class="column is-half">
                <input type="text" class="input is-rounded" placeholder="Message Subject" />
              </div>
            </div>
            <div class="mb-4">
              <textarea class="textarea" placeholder="Your Inquiry" rows="6"></textarea>
            </div>
            <div class="has-text-centered">
              <button type="submit" class="button is-primary is-rounded is-large px-5 py-3">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<p class="has-text-centered has-text-muted">
  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="container py-5">
    <div class="row">
      <div class="col-12 mb-4">
        <h2 class="h4 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="row">
      <div class="col-md-2">
        <h5 class="h5 font-weight-bold text-primary">Services</h5>
        <ul class="list-unstyled">
          <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="col-md-2">
        <h5 class="h5 font-weight-bold text-primary">About Us</h5>
        <ul class="list-unstyled">
          <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="col-md-2">
        <h5 class="h5 font-weight-bold text-primary">Resources</h5>
        <ul class="list-unstyled">
          <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="col-md-2">
        <h5 class="h5 font-weight-bold text-primary">Legal</h5>
        <ul class="list-unstyled">
          <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="col-md-2">
        <h5 class="h5 font-weight-bold text-primary">Social</h5>
        <ul class="list-unstyled">
          <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="col-md-2">
        <h5 class="h5 font-weight-bold text-primary">Quick Links</h5>
        <ul class="list-unstyled">
          <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="d-flex justify-content-between align-items-center">
      <div class="text-muted">
        <small>© 2023 Your Company. All Rights Reserved.</small>
      </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="container">
  <div class="p-4 bg-light rounded-lg shadow">
    <div class="d-flex justify-between align-items-center">
      <a href="#" target="_blank" class="d-flex align-items-center mb-4 mb-sm-0">
        <span class="h5 text-dark font-weight-bold">My Website</span>
      </a>
      <ul class="list-inline mb-6 mb-sm-0">
        <li class="list-inline-item">
          <a href="#" class="text-muted text-sm">Home</a>
        </li>
        <li class="list-inline-item">
          <a href="#" class="text-muted text-sm">Terms of Service</a>
        </li>
        <li class="list-inline-item">
          <a href="#" class="text-muted text-sm">Support</a>
        </li>
        <li class="list-inline-item">
          <a href="#" class="text-muted text-sm">Feedback</a>
        </li>
      </ul>
    </div>
    <hr class="my-4">
    <span class="block text-center text-sm text-muted">© 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 Spectre components. Learn more by going to the official <a class="text-primary" href="#" target="_blank">My Website Documentation</a>.</p>
</div>

                      
                      

                      <div class="container">
  <div class="p-4 bg-light rounded-lg shadow-sm">
    <div class="d-flex justify-between items-center">
      <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>
      <ul class="d-flex flex-wrap mb-6 mb-sm-0">
        <li>
          <a href="#" class="mr-4 text-sm text-muted hover:text-primary">Home</a>
        </li>
        <li>
          <a href="#" class="mr-4 text-sm text-muted hover:text-primary">Terms of Service</a>
        </li>
        <li>
          <a href="#" class="mr-4 text-sm text-muted hover:text-primary">Support</a>
        </li>
        <li>
          <a href="#" class="text-sm text-muted hover:text-primary">Feedback</a>
        </li>
      </ul>
    </div>
    <hr class="my-4 border-gray-200" />
    <span class="block text-sm text-muted text-center">© 2022 <a href="#" target="_blank" class="hover:text-primary">My Website™</a>. All Rights Reserved.</span>
  </div>
  <p class="mt-4">This footer component is part of a larger, open-source library of Bootstrap components. Learn more by going to the official <a class="text-primary hover:text-dark" href="#" target="_blank">My Website Documentation</a>.</p>
</div>

                      
                      

                      <div class="container py-5">
  <div class="columns is-multiline">
    <div class="column is-12 is-half-tablet is-one-quarter-desktop">
      <button class="btn btn-primary is-fullwidth">Primary Button</button>
    </div>
    <div class="column is-12 is-half-tablet is-one-quarter-desktop">
      <button class="btn btn-outline is-fullwidth">Outline Button</button>
    </div>
    <div class="column is-12 is-half-tablet is-one-quarter-desktop">
      <button class="btn btn-success is-fullwidth">
        <i class="icon-check-circle me-2"></i> Success Button
      </button>
    </div>
    <div class="column is-12 is-half-tablet is-one-quarter-desktop">
      <button class="btn btn-warning is-fullwidth" data-tooltip="This is a tooltip!">
        Warning Button
      </button>
    </div>
    <div class="column is-12 is-half-tablet is-one-quarter-desktop">
      <button class="btn btn-danger is-fullwidth">
        Delete <span class="tag is-light is-dark ms-2">5</span>
      </button>
    </div>
    <div class="column is-12 is-half-tablet is-one-quarter-desktop">
      <button class="btn btn-info is-fullwidth">Info Button</button>
    </div>
    <div class="column is-12 is-half-tablet is-one-quarter-desktop">
      <button class="btn btn-dark is-fullwidth">Dark Button</button>
    </div>
    <div class="column is-12 is-half-tablet is-one-quarter-desktop">
      <button class="btn btn-light is-fullwidth">Light Button</button>
    </div>
  </div>
</div>

                      
                      

                      <div class="container py-5">
  <div class="columns">
    <div class="column col-12 col-sm-6 col-md-3">
      <button class="btn btn-primary w-100" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn btn-outline w-100" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn btn-success w-100" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn btn-warning w-100" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn btn-info w-100" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn btn-danger w-100" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn btn-light w-100" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn btn-secondary w-100" 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="container py-5">
  <div class="columns">
    <div class="column col-12 col-sm-6 col-md-3">
      <button class="btn btn-danger w-100" style="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="column col-12 col-sm-6 col-md-3">
      <button class="btn" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn btn-success w-100" style="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="column col-12 col-sm-6 col-md-3">
      <button class="btn" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn" 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="column col-12 col-sm-6 col-md-3">
      <button class="btn" 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="container py-5">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4">
    <div class="col">
      <button class="btn btn-danger rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-success rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-primary rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-warning rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-light rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-secondary rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-info rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-dark rounded-circle w-100 p-4" 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="container py-5">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4">
    <div class="col">
      <button class="btn btn-outline-danger rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-outline-success rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-outline-primary rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-outline-warning rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-outline-secondary rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-outline-info rounded-circle w-100 p-4" 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="col">
      <button class="btn btn-outline-dark rounded-circle w-100 p-4" 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="container py-5">
  <div class="columns is-multiline">
    <div class="column is-one-quarter">
      <button class="btn btn-primary is-fullwidth has-text-white is-rounded p-4">
        <span class="icon is-small mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-house-door" 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>
        </span>
        Home
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="btn btn-success is-fullwidth has-text-white is-rounded p-4">
        <span class="icon is-small mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search" 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>
        </span>
        Search
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="btn btn-warning is-fullwidth has-text-white is-rounded p-4">
        <span class="icon is-small mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" 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>
        </span>
        Add
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="btn btn-danger is-fullwidth has-text-white is-rounded p-4">
        <span class="icon is-small mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-gear" 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>
        </span>
        Settings
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="btn btn-info is-fullwidth has-text-white is-rounded p-4">
        <span class="icon is-small mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-cart" 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>
        </span>
        Cart
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="btn btn-pink is-fullwidth has-text-white is-rounded p-4">
        <span class="icon is-small mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-heart" 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>
        </span>
        Favorite
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="btn btn-secondary is-fullwidth has-text-white is-rounded p-4">
        <span class="icon is-small mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-chat" 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>
        </span>
        Messages
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="btn btn-dark is-fullwidth has-text-white is-rounded p-4">
        <span class="icon is-small mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person" 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>
        </span>
        Profile
      </button>
    </div>
  </div>
</div>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Mon

Tue

Wed

Thu

Fri

Sat

                      
                      
                      <div class="p-4">
  <div class="columns is-multiline is-centered bg-white shadow-sm rounded p-3 mb-4">
    <div class="column is-one-sixth">
      <div class="box has-background-dark has-text-white has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Sun</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">1</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-dark has-text-white has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Mon</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">2</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-dark has-text-white has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Tue</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">3</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-primary has-text-white has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Wed</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">4</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-dark has-text-white has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Thu</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">5</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-dark has-text-white has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Fri</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">6</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-dark has-text-white has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Sat</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">7</p>
      </div>
    </div>
  </div>
  <div class="columns is-multiline is-centered bg-white shadow-sm rounded p-3">
    <div class="column is-one-sixth">
      <div class="box has-background-light has-text-dark has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Sun</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">1</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-light has-text-dark has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Mon</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">2</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-light has-text-dark has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Tue</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">3</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-primary has-text-white has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Wed</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">4</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-light has-text-dark has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Thu</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">5</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-light has-text-dark has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Fri</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">6</p>
      </div>
    </div>
    <div class="column is-one-sixth">
      <div class="box has-background-light has-text-dark has-text-centered is-rounded p-4">
        <p class="mb-1 is-small">Sat</p>
        <p class="mb-0 is-size-4 has-text-weight-bold">7</p>
      </div>
    </div>
  </div>
</div>

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

                      
                      

                      &lt;div class=&quot;columns is-centered&quot;&gt;
  &lt;div class=&quot;column is-half&quot;&gt;
    &lt;div class=&quot;notification is-primary is-light p-4 is-rounded&quot;&gt;
      &lt;div class=&quot;level&quot;&gt;
        &lt;div class=&quot;level-left&quot;&gt;
          &lt;p class=&quot;has-text-weight-bold has-text-warning&quot;&gt;Holiday Sale
            &lt;span class=&quot;has-text-light&quot;&gt;- Up to 40% off on home decor!&lt;/span&gt;
            &lt;span class=&quot;has-text-weight-bold has-text-warning ml-3&quot;&gt;
              Shop Now
              &lt;svg class=&quot;icon is-small ml-1&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
                &lt;path d=&quot;M12 2L15 5L12 8M5 12H19&quot; /&gt;
              &lt;/svg&gt;
            &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;level-right&quot;&gt;
          &lt;button class=&quot;delete&quot;&gt;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;columns is-centered&quot;&gt;
  &lt;div class=&quot;column is-half&quot;&gt;
    &lt;div class=&quot;notification is-danger is-light p-4 is-rounded&quot;&gt;
      &lt;div class=&quot;level&quot;&gt;
        &lt;div class=&quot;level-left&quot;&gt;
          &lt;p class=&quot;has-text-weight-bold has-text-warning&quot;&gt;Holiday Sale
            &lt;span class=&quot;has-text-light&quot;&gt;- Up to 40% off on home decor!&lt;/span&gt;
            &lt;span class=&quot;has-text-weight-bold has-text-warning ml-3&quot;&gt;
              Shop Now
              &lt;svg class=&quot;icon is-small ml-1&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
                &lt;path d=&quot;M12 2L15 5L12 8M5 12H19&quot; /&gt;
              &lt;/svg&gt;
            &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;level-right&quot;&gt;
          &lt;button class=&quot;delete&quot;&gt;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;columns is-centered&quot;&gt;
  &lt;div class=&quot;column is-half&quot;&gt;
    &lt;div class=&quot;notification is-success is-light p-4 is-rounded&quot;&gt;
      &lt;div class=&quot;level&quot;&gt;
        &lt;div class=&quot;level-left&quot;&gt;
          &lt;p class=&quot;has-text-weight-bold has-text-warning&quot;&gt;Holiday Sale
            &lt;span class=&quot;has-text-light&quot;&gt;- Up to 40% off on home decor!&lt;/span&gt;
            &lt;span class=&quot;has-text-weight-bold has-text-warning ml-3&quot;&gt;
              Shop Now
              &lt;svg class=&quot;icon is-small ml-1&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
                &lt;path d=&quot;M12 2L15 5L12 8M5 12H19&quot; /&gt;
              &lt;/svg&gt;
            &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;level-right&quot;&gt;
          &lt;button class=&quot;delete&quot;&gt;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;columns is-centered&quot;&gt;
  &lt;div class=&quot;column is-half&quot;&gt;
    &lt;div class=&quot;notification is-info is-light p-4 is-rounded&quot;&gt;
      &lt;div class=&quot;level&quot;&gt;
        &lt;div class=&quot;level-left&quot;&gt;
          &lt;p class=&quot;has-text-weight-bold has-text-warning&quot;&gt;Holiday Sale
            &lt;span class=&quot;has-text-light&quot;&gt;- Up to 40% off on home decor!&lt;/span&gt;
            &lt;span class=&quot;has-text-weight-bold has-text-warning ml-3&quot;&gt;
              Shop Now
              &lt;svg class=&quot;icon is-small ml-1&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; fill=&quot;none&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
                &lt;path d=&quot;M12 2L15 5L12 8M5 12H19&quot; /&gt;
              &lt;/svg&gt;
            &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;level-right&quot;&gt;
          &lt;button class=&quot;delete&quot;&gt;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

Sample Heading One

Sample Heading Two

Sample Heading Three

Sample Heading Four

Sample Heading Five

Sample Heading Six

                      
                      
                      <div class="container my-5">
  <div class="columns is-flex-direction-column is-gapless is-align-items-start">
    <h1 class="title is-1 has-text-primary has-font-weight-bold">Sample Heading One</h1>
    <h2 class="title is-2 has-text-secondary has-font-weight-bold">Sample Heading Two</h2>
    <h3 class="title is-3 has-text-success has-font-weight-bold">Sample Heading Three</h3>
    <h4 class="title is-4 has-text-warning has-font-weight-bold">Sample Heading Four</h4>
    <h5 class="title is-5 has-text-info has-font-weight-bold">Sample Heading Five</h5>
    <p class="has-text-muted has-font-weight-semibold">Sample Heading Six</p>
  </div>
</div>

                      
                      

                      <nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Previous">
        <span aria-hidden="true">&laquo; Previous</span>
      </a>
    </li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item active" aria-current="page"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">4</a></li>
    <li class="page-item"><a href="#" class="page-link">5</a></li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Next">
        <span aria-hidden="true">Next &raquo;</span>
      </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="container py-5">
  <div class="columns is-centered">
    <div class="column is-half mb-4">
      <div class="card shadow-2">
        <header class="card-header has-background-light has-text-primary has-text-centered">
          <p class="card-header-title is-size-4 has-text-weight-bold">Flexible Billing</p>
        </header>
        <div class="card-content">
          <div class="columns is-centered">
            <div class="column has-text-centered">
              <h3 class="is-size-4">2.0%</h3>
              <p class="is-size-7 has-text-grey mt-2">for transactions within Europe</p>
            </div>
            <div class="column has-text-centered">
              <h3 class="is-size-4">3.5%</h3>
              <p class="is-size-7 has-text-grey mt-2">for international transactions</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column is-half mb-4">
      <div class="card shadow-2">
        <header class="card-header has-background-dark has-text-white has-text-centered">
          <p class="card-header-title is-size-4 has-text-weight-bold">Premium Business Plan</p>
        </header>
        <div class="card-content">
          <div class="columns is-centered">
            <div class="column has-text-centered">
              <h3 class="is-size-4">2.0%</h3>
              <p class="is-size-7 has-text-grey mt-2">for transactions within Europe</p>
            </div>
            <div class="column has-text-centered">
              <h3 class="is-size-4">3.5%</h3>
              <p class="is-size-7 has-text-grey 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="container py-5">
    <div class="columns is-centered">
        <div class="card is-shadowless" style="max-width: 22rem;">
            <div class="card-header has-background-light">
                <div class="columns is-vcentered">
                    <div class="column has-text-dark">
                        <span class="is-size-5 has-text-weight-bold">December 2024</span>
                    </div>
                    <div class="column is-narrow">
                        <div class="buttons">
                            <button aria-label="calendar backward" class="button is-text">
                                <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>
                            <button aria-label="calendar forward" class="button is-text">
                                <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>
            </div>
            <div class="card-content">
                <div class="table-container">
                    <table class="table is-bordered is-striped is-hoverable is-fullwidth">
                        <thead>
                            <tr>
                                <th class="has-text-centered">Mo</th>
                                <th class="has-text-centered">Tu</th>
                                <th class="has-text-centered">We</th>
                                <th class="has-text-centered">Th</th>
                                <th class="has-text-centered">Fr</th>
                                <th class="has-text-centered">Sa</th>
                                <th class="has-text-centered">Su</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="has-text-centered"></td>
                                <td class="has-text-centered"></td>
                                <td class="has-text-centered"></td>
                                <td class="has-text-centered"><p>1</p></td>
                                <td class="has-text-centered"><p>2</p></td>
                                <td class="has-text-centered"><p>3</p></td>
                                <td class="has-text-centered"><p>4</p></td>
                            </tr>
                            <tr>
                                <td class="has-text-centered"><p>5</p></td>
                                <td class="has-text-centered"><p>6</p></td>
                                <td class="has-text-centered"><p>7</p></td>
                                <td class="has-text-centered"><a class="button is-primary is-rounded" href="#">8</a></td>
                                <td class="has-text-centered"><p>9</p></td>
                                <td class="has-text-centered"><p>10</p></td>
                                <td class="has-text-centered"><p>11</p></td>
                            </tr>
                            <tr>
                                <td class="has-text-centered"><p>12</p></td>
                                <td class="has-text-centered"><p>13</p></td>
                                <td class="has-text-centered"><p>14</p></td>
                                <td class="has-text-centered"><p>15</p></td>
                                <td class="has-text-centered"><p>16</p></td>
                                <td class="has-text-centered"><p>17</p></td>
                                <td class="has-text-centered"><p>18</p></td>
                            </tr>
                            <tr>
                                <td class="has-text-centered"><p>19</p></td>
                                <td class="has-text-centered"><p>20</p></td>
                                <td class="has-text-centered"><p>21</p></td>
                                <td class="has-text-centered"><p>22</p></td>
                                <td class="has-text-centered"><p>23</p></td>
                                <td class="has-text-centered"><p>24</p></td>
                                <td class="has-text-centered"><p>25</p></td>
                            </tr>
                            <tr>
                                <td class="has-text-centered"><p>26</p></td>
                                <td class="has-text-centered"><p>27</p></td>
                                <td class="has-text-centered"><p>28</p></td>
                                <td class="has-text-centered"><p>29</p></td>
                                <td class="has-text-centered"><p>30</p></td>
                                <td class="has-text-centered"><p>31</p></td>
                                <td class="has-text-centered"><p></p></td>
                            </tr>
                        </tbody>
                    </table>
                </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="container my-5">
    <div class="columns is-centered">
        <label for="dropzone-file" class="column is-12 has-text-centered has-border has-background-light is-flex is-flex-direction-column is-align-items-center is-justify-content-center is-rounded">
            <div class="is-flex is-flex-direction-column is-align-items-center is-justify-content-center py-5">
                <svg class="is-size-3 mb-3 has-text-grey" 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 has-text-grey"><span class="has-text-weight-bold">Choose your file</span> or simply drag it here</p>
                <p class="has-text-grey-light is-small">Supported formats: SVG, PNG, JPG, GIF (MAX. 800x400px)</p>
            </div>
            <input id="dropzone-file" type="file" class="is-hidden" />
        </label>
    </div>
    <p class="mt-3">This file upload component is part of a comprehensive Spectre.css component library. For more details, visit the official <a class="has-text-primary" href="#" target="_blank">Spectre 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="container my-5">
    <ul class="tabs">
        <li class="tab-item">
            <a class="tab-link" href="#overview">Overview</a>
        </li>
        <li class="tab-item">
            <a class="tab-link active" href="#stats">Stats</a>
        </li>
        <li class="tab-item">
            <a class="tab-link" href="#preferences">Preferences</a>
        </li>
        <li class="tab-item">
            <a class="tab-link" href="#connections">Connections</a>
        </li>
    </ul>

    <div class="tab-content mt-3">
        <div class="tab-pane" id="overview">
            <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="tab-pane active" id="stats">
            <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="tab-pane" id="preferences">
            <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="tab-pane" id="connections">
            <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="container my-4">
    <div class="columns is-desktop">
        <div class="column is-3 is-hidden-mobile">
            <div class="box has-background-dark">
                <div class="has-text-centered p-3">
                    <img src="https://dummyimage.com/722x402" alt="Dummy Image" class="image is-fluid">
                </div>
                <nav class="mt-3">
                    <a class="button is-fullwidth is-light has-text-primary is-uppercase" href="#">
                        <span class="icon">
                            <i class="bi bi-house"></i>
                        </span>
                        <span>Home</span>
                    </a>
                    <a class="button is-fullwidth is-light has-text-grey is-uppercase" href="#">
                        <span class="icon">
                            <i class="bi bi-folder"></i>
                        </span>
                        <span>Files</span>
                    </a>
                    <a class="button is-fullwidth is-light has-text-grey is-uppercase" href="#">
                        <span class="icon">
                            <i class="bi bi-list-task"></i>
                        </span>
                        <span>Tasks</span>
                    </a>
                    <a class="button is-fullwidth is-light has-text-grey is-uppercase" href="#">
                        <span class="icon">
                            <i class="bi bi-calendar3"></i>
                        </span>
                        <span>Schedule</span>
                    </a>
                    <a class="button is-fullwidth is-light has-text-grey is-uppercase" href="#">
                        <span class="icon">
                            <i class="bi bi-clock"></i>
                        </span>
                        <span>Timing</span>
                    </a>
                    <a class="button is-fullwidth is-light has-text-grey is-uppercase" href="#">
                        <span class="icon">
                            <i class="bi bi-file-earmark"></i>
                        </span>
                        <span>Documents</span>
                    </a>
                    <a class="button is-fullwidth is-light has-text-grey is-uppercase" href="#">
                        <span class="icon">
                            <i class="bi bi-gear"></i>
                        </span>
                        <span>Options</span>
                    </a>
                </nav>
            </div>
        </div>
    </div>
</div>

Our Achievements

50

Users

15

Subscribes

12

Downloads

20

Products

                      
                      
                      <section class="text-gray-600 body-font">
  <div class="container py-24">
    <div class="row mb-8">
      <div class="col-12 mb-6">
        <h1 class="display-4 fw-bold mb-2 text-dark">Our Achievements</h1>
        <div class="h-1 w-20 bg-success"></div>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-3 mb-4">
        <div class="card bg-success p-4 text-white">
            <h2 class="display-3 fw-medium">50</h2>
            <p class="fw-bold">Users</p>
        </div>
      </div>
      <div class="col-3 mb-4">
        <div class="card bg-success p-4 text-white">
            <h2 class="display-3 fw-medium">15</h2>
            <p class="fw-bold">Subscribes</p>
        </div>
      </div>
      <div class="col-3 mb-4">
        <div class="card bg-success p-4 text-white">
            <h2 class="display-3 fw-medium">12</h2>
            <p class="fw-bold">Downloads</p>
        </div>
      </div>
      <div class="col-3 mb-4">
        <div class="card bg-success p-4 text-white">
            <h2 class="display-3 fw-medium">20</h2>
            <p class="fw-bold">Products</p>
        </div>
      </div>
    </div>
  </div>
</section>

通知

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

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

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

                      
                        
                      <div class="d-flex flex-column justify-center align-center bg-light">
    <div class="container my-5">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title fw-bold text-dark mb-4">通知</h5>
                <p class="card-text text-muted mb-4">未読メッセージが3件あります。</p>
                <div class="d-flex align-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="form-switch ms-auto">
                        <input class="form-switch-input" type="checkbox" id="notificationSwitch" checked>
                    </div>
                </div>
                <ul class="list-unstyled">
                    <li class="d-flex align-items-start mb-3">
                        <div class="rounded-circle bg-primary me-3" style="width: 8px; height: 8px;"></div>
                        <div>
                            <p class="mb-0 fw-semibold">通話が確認されました。</p>
                            <small class="text-muted">1時間前</small>
                        </div>
                    </li>
                    <li class="d-flex align-items-start mb-3">
                        <div class="rounded-circle bg-primary me-3" style="width: 8px; height: 8px;"></div>
                        <div>
                            <p class="mb-0 fw-semibold">新しいメッセージがあります！</p>
                            <small class="text-muted">1時間前</small>
                        </div>
                    </li>
                    <li class="d-flex align-items-start">
                        <div class="rounded-circle bg-primary me-3" style="width: 8px; height: 8px;"></div>
                        <div>
                            <p class="mb-0 fw-semibold">サブスクリプションが間もなく期限切れです！</p>
                            <small class="text-muted">2時間前</small>
                        </div>
                    </li>
                </ul>
                <button class="btn btn-primary w-100 mt-4">
                    すべて既読にする
                </button>
            </div>
        </div>
    </div>
</div>