Bluma

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">
        <figure class="image is-4by3">
          <img src="https://dummyimage.com/700x400" alt="...">
        </figure>
      </div>
      <div class="card-content">
        <div class="media">
          <div class="media-content">
            <p class="title is-5">Card 3</p>
            <p class="subtitle is-6">This card has a footer and a button for interaction.</p>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <p class="card-footer-item">
          <small class="has-text-grey">Last updated 5 mins ago</small>
        </p>
        <p class="card-footer-item">
          <a href="#" class="button is-small is-outlined">Details</a>
        </p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://dummyimage.com/700x400" alt="...">
        </figure>
      </div>
      <div class="card-content">
        <div class="media">
          <div class="media-content">
            <p class="title is-5">Card 3</p>
            <p class="subtitle is-6">This card has a footer and a button for interaction.</p>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <p class="card-footer-item">
          <small class="has-text-grey">Last updated 5 mins ago</small>
        </p>
        <p class="card-footer-item">
          <a href="#" class="button is-small is-outlined">Details</a>
        </p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://dummyimage.com/700x400" alt="...">
        </figure>
      </div>
      <div class="card-content">
        <div class="media">
          <div class="media-content">
            <p class="title is-5">Card 3</p>
            <p class="subtitle is-6">This card has a footer and a button for interaction.</p>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <p class="card-footer-item">
          <small class="has-text-grey">Last updated 5 mins ago</small>
        </p>
        <p class="card-footer-item">
          <a href="#" class="button is-small is-outlined">Details</a>
        </p>
      </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 h-100 has-background-light">
        <div class="card-content">
          <div class="columns is-vcentered">
            <div class="column">
              <h5 class="title is-5">Card 3</h5>
              <p class="subtitle is-6">A card with a vertical alignment for image and text.</p>
            </div>
            <div class="column is-narrow">
              <figure class="image is-120x120">
                <img src="https://dummyimage.com/722x402" class="is-rounded" alt="...">
              </figure>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-one-third">
      <div class="card h-100 has-background-light">
        <div class="card-content">
          <div class="columns is-vcentered">
            <div class="column">
              <h5 class="title is-5">Card 3</h5>
              <p class="subtitle is-6">A card with a vertical alignment for image and text.</p>
            </div>
            <div class="column is-narrow">
              <figure class="image is-120x120">
                <img src="https://dummyimage.com/722x402" class="is-rounded" alt="...">
              </figure>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-one-third">
      <div class="card h-100 has-background-light">
        <div class="card-content">
          <div class="columns is-vcentered">
            <div class="column">
              <h5 class="title is-5">Card 3</h5>
              <p class="subtitle is-6">A card with a vertical alignment for image and text.</p>
            </div>
            <div class="column is-narrow">
              <figure class="image is-120x120">
                <img src="https://dummyimage.com/722x402" class="is-rounded" alt="...">
              </figure>
            </div>
          </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 h-100">
        <div class="card-content">
          <p class="title is-5">Card 4</p>
          <p class="subtitle is-6">A card with a list group to show details.</p>
          <ul>
            <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 h-100">
        <div class="card-content">
          <p class="title is-5">Card 4</p>
          <p class="subtitle is-6">A card with a list group to show details.</p>
          <ul>
            <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 h-100">
        <div class="card-content">
          <p class="title is-5">Card 4</p>
          <p class="subtitle is-6">A card with a list group to show details.</p>
          <ul>
            <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="container py-5">
  <div class="columns is-multiline">
    <div class="column is-one-third">
      <div class="card h-100">
        <div class="card-content">
          <p class="title is-5">Card 23</p>
          <p class="subtitle is-6">This card includes a badge for notifications.</p>
          <h6 class="mb-3">
            Notifications <span class="tag is-danger">5</span>
          </h6>
          <ul>
            <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 h-100">
        <div class="card-content">
          <p class="title is-5">Card 23</p>
          <p class="subtitle is-6">This card includes a badge for notifications.</p>
          <h6 class="mb-3">
            Notifications <span class="tag is-danger">5</span>
          </h6>
          <ul>
            <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 h-100">
        <div class="card-content">
          <p class="title is-5">Card 23</p>
          <p class="subtitle is-6">This card includes a badge for notifications.</p>
          <h6 class="mb-3">
            Notifications <span class="tag is-danger">5</span>
          </h6>
          <ul>
            <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>
</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="container py-5">
  <div class="columns is-multiline">
    <div class="column is-one-third">
      <div class="card h-100 has-background-dark has-text-light">
        <div class="card-content">
          <p class="title is-5">Card 25</p>
          <p class="subtitle is-6">A dark-themed card with an accordion.</p>
          <div class="accordion">
            <div class="accordion-item">
              <p class="accordion-title" onclick="toggleAccordion(this)">
                Accordion Item #1
              </p>
              <div class="accordion-content">
                This is the first item's accordion body.
              </div>
            </div>
            <div class="accordion-item">
              <p class="accordion-title" onclick="toggleAccordion(this)">
                Accordion Item #2
              </p>
              <div class="accordion-content">
                This is the second item's accordion body.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-one-third">
      <div class="card h-100 has-background-dark has-text-light">
        <div class="card-content">
          <p class="title is-5">Card 25</p>
          <p class="subtitle is-6">A dark-themed card with an accordion.</p>
          <div class="accordion">
            <div class="accordion-item">
              <p class="accordion-title" onclick="toggleAccordion(this)">
                Accordion Item #1
              </p>
              <div class="accordion-content">
                This is the first item's accordion body.
              </div>
            </div>
            <div class="accordion-item">
              <p class="accordion-title" onclick="toggleAccordion(this)">
                Accordion Item #2
              </p>
              <div class="accordion-content">
                This is the second item's accordion body.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column is-one-third">
      <div class="card h-100 has-background-dark has-text-light">
        <div class="card-content">
          <p class="title is-5">Card 25</p>
          <p class="subtitle is-6">A dark-themed card with an accordion.</p>
          <div class="accordion">
            <div class="accordion-item">
              <p class="accordion-title" onclick="toggleAccordion(this)">
                Accordion Item #1
              </p>
              <div class="accordion-content">
                This is the first item's accordion body.
              </div>
            </div>
            <div class="accordion-item">
              <p class="accordion-title" onclick="toggleAccordion(this)">
                Accordion Item #2
              </p>
              <div class="accordion-content">
                This is the second item's accordion body.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  function toggleAccordion(element) {
    const content = element.nextElementSibling;
    const isOpen = content.style.display === 'block';
    content.style.display = isOpen ? 'none' : 'block';
  }
</script>

<style>
  .accordion-item .accordion-title {
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .accordion-content {
    display: none;
    margin-bottom: 15px;
  }
</style>

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="container py-5">
  <div class="columns is-multiline">
    <div class="column is-one-third">
      <div class="card h-100 has-background-light">
        <div class="card-content">
          <p class="title is-5">Card 7</p>
          <p class="subtitle is-6">This card uses a table to organize information.</p>
          <table class="table is-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 is-one-third">
      <div class="card h-100 has-background-light">
        <div class="card-content">
          <p class="title is-5">Card 7</p>
          <p class="subtitle is-6">This card uses a table to organize information.</p>
          <table class="table is-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 is-one-third">
      <div class="card h-100 has-background-light">
        <div class="card-content">
          <p class="title is-5">Card 7</p>
          <p class="subtitle is-6">This card uses a table to organize information.</p>
          <table class="table is-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>
</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 has-text-centered">
      <header class="card-header has-background-primary has-text-white">
        <p class="card-header-title">Card Header</p>
      </header>
      <div class="card-content">
        <h5 class="title is-5">Card 8</h5>
        <p>This card uses a header and footer to frame its content.</p>
      </div>
      <footer class="card-footer has-background-light">
        <p class="card-footer-item has-text-muted">Footer Text</p>
      </footer>
    </div>
  </div>

  <div class="column">
    <div class="card has-text-centered">
      <header class="card-header has-background-primary has-text-white">
        <p class="card-header-title">Card Header</p>
      </header>
      <div class="card-content">
        <h5 class="title is-5">Card 8</h5>
        <p>This card uses a header and footer to frame its content.</p>
      </div>
      <footer class="card-footer has-background-light">
        <p class="card-footer-item has-text-muted">Footer Text</p>
      </footer>
    </div>
  </div>

  <div class="column">
    <div class="card has-text-centered">
      <header class="card-header has-background-primary has-text-white">
        <p class="card-header-title">Card Header</p>
      </header>
      <div class="card-content">
        <h5 class="title is-5">Card 8</h5>
        <p>This card uses a header and footer to frame its content.</p>
      </div>
      <footer class="card-footer has-background-light">
        <p class="card-footer-item has-text-muted">Footer Text</p>
      </footer>
    </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="section is-medium is-light">
  <div class="container">
    <div class="has-text-centered mb-5">
      <h1 class="title is-3 has-text-weight-bold has-text-dark has-text-uppercase mb-4">Our Team</h1>
      <p class="subtitle is-5 has-text-grey">Discover the amazing individuals behind our success, working together to make a difference.</p>
    </div>
    <div class="columns is-centered is-multiline">
      <div class="column is-one-third">
        <div class="media">
          <div class="media-left">
            <figure class="image is-100x100">
              <img src="https://dummyimage.com/200x200" alt="team member" class="is-rounded">
            </figure>
          </div>
          <div class="media-content">
            <h5 class="title is-5 has-text-dark">John Doe</h5>
            <p class="subtitle is-6 has-text-grey mb-1">UI Developer</p>
            <p class="has-text-grey is-small">Creating seamless user experiences and innovative interfaces with a touch of creativity.</p>
            <div class="level">
              <div class="level-left">
                <a href="#" class="has-text-grey me-3"><i class="bi bi-facebook"></i></a>
                <a href="#" class="has-text-grey me-3"><i class="bi bi-twitter"></i></a>
                <a href="#" class="has-text-grey"><i class="bi bi-linkedin"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-one-third">
        <div class="media">
          <div class="media-left">
            <figure class="image is-100x100">
              <img src="https://dummyimage.com/201x201" alt="team member" class="is-rounded">
            </figure>
          </div>
          <div class="media-content">
            <h5 class="title is-5 has-text-dark">Jane Smith</h5>
            <p class="subtitle is-6 has-text-grey mb-1">Graphic Designer</p>
            <p class="has-text-grey is-small">Crafting stunning visual designs that inspire and captivate audiences worldwide.</p>
            <div class="level">
              <div class="level-left">
                <a href="#" class="has-text-grey me-3"><i class="bi bi-facebook"></i></a>
                <a href="#" class="has-text-grey me-3"><i class="bi bi-twitter"></i></a>
                <a href="#" class="has-text-grey"><i class="bi bi-linkedin"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-one-third">
        <div class="media">
          <div class="media-left">
            <figure class="image is-100x100">
              <img src="https://dummyimage.com/204x204" alt="team member" class="is-rounded">
            </figure>
          </div>
          <div class="media-content">
            <h5 class="title is-5 has-text-dark">Emily Brown</h5>
            <p class="subtitle is-6 has-text-grey mb-1">Software Engineer</p>
            <p class="has-text-grey is-small">Developing robust and scalable solutions to power innovative technologies.</p>
            <div class="level">
              <div class="level-left">
                <a href="#" class="has-text-grey me-3"><i class="bi bi-facebook"></i></a>
                <a href="#" class="has-text-grey me-3"><i class="bi bi-twitter"></i></a>
                <a href="#" class="has-text-grey"><i class="bi bi-linkedin"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

NOBALISH

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

                      
                      
                      &amp;lt;div class=&amp;quot;container is-fluid&amp;quot;&amp;gt;
  &amp;lt;div class=&amp;quot;columns is-vcentered&amp;quot;&amp;gt;
    &amp;lt;div class=&amp;quot;column is-half&amp;quot;&amp;gt;
      &amp;lt;h2 class=&amp;quot;title is-1 mb-4&amp;quot;&amp;gt;NOBALISH&amp;lt;/h2&amp;gt;
      &amp;lt;p&amp;gt;We provide the best services for your business growth. Let us help you reach new heights.&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
    &amp;lt;div class=&amp;quot;column is-half&amp;quot;&amp;gt;
      &amp;lt;figure class=&amp;quot;image is-fluid&amp;quot;&amp;gt;
        &amp;lt;img src=&amp;quot;https://dummyimage.com/722x402&amp;quot; alt=&amp;quot;Image&amp;quot;&amp;gt;
      &amp;lt;/figure&amp;gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;

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 is-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-6">Innovative Solutions</h3>
      <p class="mb-6">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 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">
      <figure class="image is-fluid">
        <img src="https://dummyimage.com/722x402" alt="Image">
      </figure>
    </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="section py-5">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column is-12 is-md-half 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-mobile">
        </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-half">
        <figure class="image is-fluid">
          <img class="is-rounded" alt="hero" src="https://dummyimage.com/720x600">
        </figure>
      </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 is-vcentered">
      <div class="column is-12 is-md-half has-text-centered has-text-left-mobile mb-4 mb-md-0">
        <div class="section 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 is-5 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="level is-mobile has-background-light p-3 has-radius-small">
                  <span class="icon has-text-primary is-medium"><i class="bi bi-check-circle-fill"></i></span>
                  <span class="level-item has-text-weight-medium">Innovative Design</span>
                </div>
              </div>
              <div class="column is-12 is-md-6">
                <div class="level is-mobile has-background-light p-3 has-radius-small">
                  <span class="icon has-text-primary is-medium"><i class="bi bi-check-circle-fill"></i></span>
                  <span class="level-item has-text-weight-medium">Seamless Integration</span>
                </div>
              </div>
              <div class="column is-12 is-md-6">
                <div class="level is-mobile has-background-light p-3 has-radius-small">
                  <span class="icon has-text-primary is-medium"><i class="bi bi-check-circle-fill"></i></span>
                  <span class="level-item has-text-weight-medium">Enhanced Usability</span>
                </div>
              </div>
              <div class="column is-12 is-md-6">
                <div class="level is-mobile has-background-light p-3 has-radius-small">
                  <span class="icon has-text-primary is-medium"><i class="bi bi-check-circle-fill"></i></span>
                  <span class="level-item has-text-weight-medium">Reliable Performance</span>
                </div>
              </div>
              <div class="column is-12 is-md-6">
                <div class="level is-mobile has-background-light p-3 has-radius-small">
                  <span class="icon has-text-primary is-medium"><i class="bi bi-check-circle-fill"></i></span>
                  <span class="level-item has-text-weight-medium">Customizable Options</span>
                </div>
              </div>
              <div class="column is-12 is-md-6">
                <div class="level is-mobile has-background-light p-3 has-radius-small">
                  <span class="icon has-text-primary is-medium"><i class="bi bi-check-circle-fill"></i></span>
                  <span class="level-item has-text-weight-medium">Scalable Solutions</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-12 is-md-half">
        <figure class="image is-fluid">
          <img class="is-rounded" alt="hero" src="https://dummyimage.com/720x600">
        </figure>
      </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-flex-wrap-wrap">
      <div class="column is-12 is-md-8 is-lg-6 mb-3 mb-lg-0">
        <div class="mb-4">
          <h1 class="title is-3 has-text-dark mb-2">Innovative Tech Solutions</h1>
          <p class="subtitle is-5">Providing cutting-edge solutions to everyday challenges through technology and design.</p>
        </div>
        
        <div class="column is-6 is-small is-3 mb-4">
          <h2 class="title is-4 has-text-dark">100</h2>
          <p>text 1</p>
        </div>
        <div class="column is-6 is-small is-3 mb-4">
          <h2 class="title is-4 has-text-dark">200</h2>
          <p>text 2</p>
        </div>
        <div class="column is-6 is-small is-3 mb-4">
          <h2 class="title is-4 has-text-dark">300</h2>
          <p>text 3</p>
        </div>
        <div class="column is-6 is-small is-3 mb-4">
          <h2 class="title is-4 has-text-dark">400</h2>
          <p>text 4</p>
        </div>
        <div class="column is-6 is-small is-3 mb-4">
          <h2 class="title is-4 has-text-dark">500</h2>
          <p>text 5</p>
        </div>
        <div class="column is-6 is-small is-3 mb-4">
          <h2 class="title is-4 has-text-dark">600</h2>
          <p>text 6</p>
        </div>
        <div class="column is-6 is-small is-3 mb-4">
          <h2 class="title is-4 has-text-dark">700</h2>
          <p>text 7</p>
        </div>
        <div class="column is-6 is-small is-3 mb-4">
          <h2 class="title is-4 has-text-dark">800</h2>
          <p>text 8</p>
        </div>
      </div>
      <div class="column is-12 is-sm-8 is-lg-6 rounded-lg overflow-hidden mt-4 mt-lg-0">
        <figure class="image is-fluid">
          <img src="https://dummyimage.com/600x300" alt="statistic image">
        </figure>
      </div>
    </div>
  </div>
</section>

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

                      
                      
                      <div class="section is-medium has-background-light" style="background-image: url('https://picsum.photos/id/1018/1000'); background-size: cover; background-position: center;">
  <div class="container">
    <div class="card has-background-white has-shadow-small is-rounded p-4" style="backdrop-filter: blur(20px);">
      <div class="card-content has-text-centered">
        <div class="mb-4">
          <img src="https://dummyimage.com/722x402" class="image is-fluid" style="max-width: 100%; max-height: 100px;" alt="Bootstrap Logo">
        </div>
        <div class="border-top pt-4">
          <div class="mb-4">
            <ul class="list is-none mb-8">
              <li class="level is-mobile mb-3">
                <span class="icon has-text-primary me-2"><i class="bi bi-check-circle-fill"></i></span>
                <span>Create and customize your design system</span>
              </li>
              <li class="level is-mobile mb-3">
                <span class="icon has-text-primary me-2"><i class="bi bi-check-circle-fill"></i></span>
                <span>Leverage utilities for rapid development</span>
              </li>
              <li class="level is-mobile mb-3">
                <span class="icon has-text-primary me-2"><i class="bi bi-check-circle-fill"></i></span>
                <span>From beginner to production-ready skills</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

                      
                      
                      <div class="section is-medium has-background-gradient" style="background: linear-gradient(to bottom right, #e0f7fa, #80deea, #26c6da);">
  <div class="container">
    <div class="box has-background-white has-shadow-small is-rounded p-4" style="max-width: 600px; margin: auto;">
        <div class="has-text-centered mb-4">
            <img src="https://dummyimage.com/722x402" class="image is-fluid mb-3" alt="Placeholder Logo" />
        </div>

        <div class="mb-4">
            <h5 class="title is-5 has-text-dark">Need innovative design frameworks?</h5>
            <p>
                <a href="/new-path/free-components" class="has-text-info has-text-decoration-none">Discover unique tools →</a>
            </p>
        </div>

        <div class="mb-4">
            <h5 class="title is-5 has-text-dark">Searching for cutting-edge platforms?</h5>
            <p>
                <a href="/new-path/premium-themes" class="has-text-info has-text-decoration-none">Explore advanced systems →</a>
            </p>
        </div>

        <div class="mb-4">
            <h5 class="title is-5 has-text-dark">Looking for a quick-start guide?</h5>
            <p>
                <a href="/new-path/cheatsheet" class="has-text-info has-text-decoration-none">Find comprehensive insights →</a>
            </p>
        </div>

        <div class="mb-4">
            <h5 class="title is-5 has-text-dark">Want to elevate your expertise?</h5>
            <p>
                <a href="/new-path/docs" class="has-text-info has-text-decoration-none">Access professional resources →</a>
            </p>
        </div>

        <a href="/new-path/home" class="button is-info is-fullwidth has-text-white">
            Return to Next-Gen Solutions
        </a>
    </div>
  </div>
</div>

Event Starting Soon

Join us for an exciting Saturday!

Start Time: 9:00 AM

Day

Hour

Min

Second

                      
                      
                      <section class="py-6 has-background-primary-dark is-dark">
  <div class="container has-text-centered">
    <div class="columns is-vcentered is-multiline">
      <div class="column is-full has-text-left-mobile">
        <h6 class="is-size-7 has-text-weight-semibold has-text-link is-uppercase has-text-white">
          Event Starting Soon
        </h6>
        <h3 class="is-size-2 has-text-weight-bold has-text-white">
          Join us for an exciting Saturday!
        </h3>
        <h3 class="mt-4 is-size-4 has-text-weight-bold has-text-white">
          Start Time: 9:00 AM
        </h3>
      </div>
      <div class="column is-full-mobile is-auto">
        <div class="columns is-centered is-vcentered">
          <div class="column is-narrow">
            <div class="box has-background-light has-text-centered py-4">
              <div class="is-size-2 has-text-weight-semibold">02</div>
              <div class="is-size-7 has-text-uppercase has-text-grey-lighter">
                Day
              </div>
            </div>
          </div>
          <div class="column is-narrow">
            <div class="box has-background-light has-text-centered py-4">
              <div class="is-size-2 has-text-weight-semibold">09</div>
              <div class="is-size-7 has-text-uppercase has-text-grey-lighter">
                Hour
              </div>
            </div>
          </div>
          <div class="column is-narrow">
            <div class="box has-background-light has-text-centered py-4">
              <div class="is-size-2 has-text-weight-semibold">00</div>
              <div class="is-size-7 has-text-uppercase has-text-grey-lighter">
                Min
              </div>
            </div>
          </div>
          <div class="column is-narrow">
            <div class="box has-background-light has-text-centered py-4">
              <div class="is-size-2 has-text-weight-semibold">00</div>
              <div class="is-size-7 has-text-uppercase has-text-grey-lighter">
                Second
              </div>
            </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="section">
  <div class="container box has-background-light has-shadow">
    <h4 class="title is-4">Feedback Overview</h4>
    <div class="tags">
      <span class="tag is-success">Extremely Happy</span>
    </div>
    <div class="mt-5">
      <div class="columns is-vcentered">
        <div class="column is-full-mobile is-one-third-desktop">
          Many people felt very positive about the service, with a majority expressing satisfaction.
        </div>
        <div class="column is-full-mobile is-two-thirds-desktop">
          <div class="notification is-success is-light">
            <div class="has-text-centered has-text-white">80%</div>
          </div>
        </div>
      </div>
      <div class="columns is-vcentered mt-4">
        <div class="column is-full-mobile is-one-third-desktop">
          Some users were less satisfied with certain aspects of the product, especially regarding usability.
        </div>
        <div class="column is-full-mobile is-two-thirds-desktop">
          <div class="notification is-success is-light">
            <div class="has-text-centered has-text-white">60%</div>
          </div>
        </div>
      </div>
      <div class="columns is-vcentered mt-4">
        <div class="column is-full-mobile is-one-third-desktop">
          There were a few complaints about delivery times and product quality, but these were in the minority.
        </div>
        <div class="column is-full-mobile is-two-thirds-desktop">
          <div class="notification is-success is-light">
            <div class="has-text-centered has-text-white">40%</div>
          </div>
        </div>
      </div>
    </div>
    <p class="has-text-grey-light mt-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="title is-4 has-text-dark has-font-weight-bold mb-6 ml-3">Recent Announcements</h3>
<ol class="list is-unstyled">
  <li class="is-border-start">
    <div class="columns is-vcentered">
      <div class="column is-narrow">
        <div class="notification is-primary is-light has-text-centered has-rounded-full is-6">
          <svg aria-hidden="true" focusable="false" data-prefix="fas" class="has-text-white is-size-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path>
          </svg>
        </div>
      </div>
      <div class="column">
        <div class="box has-background-light mb-4">
          <div class="columns is-mobile is-vcentered">
            <div class="column is-narrow">
              <a href="#" class="has-text-primary has-font-weight-medium">Updated Interface Design</a>
            </div>
            <div class="column is-narrow">
              <a href="#" class="has-text-primary has-font-weight-medium">05 / 10 / 2023</a>
            </div>
          </div>
          <p class="has-text-dark mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
          <button class="button is-primary is-small">Learn More</button>
          <button class="button is-outlined is-primary is-small">Try Demo</button>
        </div>
      </div>
    </div>
  </li>
  <li class="is-border-start">
    <div class="columns is-vcentered">
      <div class="column is-narrow">
        <div class="notification is-success is-light has-text-centered has-rounded-full is-6">
          <svg aria-hidden="true" focusable="false" data-prefix="fas" class="has-text-white is-size-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path>
          </svg>
        </div>
      </div>
      <div class="column">
        <div class="box has-background-light mb-4">
          <div class="columns is-mobile is-vcentered">
            <div class="column is-narrow">
              <a href="#" class="has-text-primary has-font-weight-medium">5,000 New Job Listings</a>
            </div>
            <div class="column is-narrow">
              <a href="#" class="has-text-primary has-font-weight-medium">10 / 12 / 2023</a>
            </div>
          </div>
          <p class="has-text-dark mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
          <button class="button is-primary is-small">Explore More</button>
          <button class="button is-outlined is-primary is-small">View Demo</button>
        </div>
      </div>
    </div>
  </li>
  <li class="is-border-start">
    <div class="columns is-vcentered">
      <div class="column is-narrow">
        <div class="notification is-info is-light has-text-centered has-rounded-full is-6">
          <svg aria-hidden="true" focusable="false" data-prefix="fas" class="has-text-white is-size-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path>
          </svg>
        </div>
      </div>
      <div class="column">
        <div class="box has-background-light mb-4">
          <div class="columns is-mobile is-vcentered">
            <div class="column is-narrow">
              <a href="#" class="has-text-primary has-font-weight-medium">Top Companies Hiring</a>
            </div>
            <div class="column is-narrow">
              <a href="#" class="has-text-primary has-font-weight-medium">30 / 09 / 2023</a>
            </div>
          </div>
          <p class="has-text-dark mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
          <button class="button is-primary is-small">Learn More</button>
          <button class="button is-outlined is-primary is-small">See Demo</button>
        </div>
      </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="has-text-centered mb-5">
      <h3 class="is-size-3 has-text-weight-semibold mb-4 mt-5">We have solutions</h3>
      <h1 class="is-size-4 has-text-weight-bold my-4">Something Asked Questions</h1>
      <p class="my-4 mx-auto is-size-5 has-text-grey">See what others often inquire about!</p>
    </div>
    <div class="columns is-centered">
      <div class="column is-12 is-half">
        <h5 class="mt-4 mb-2 has-text-weight-semibold">What is Bootstrap?</h5>
        <div class="has-text-grey 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-weight-semibold">Can Bootstrap be used with React?</h5>
        <div class="has-text-grey 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-weight-semibold">What makes Bootstrap so popular?</h5>
        <div class="has-text-grey 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="column is-half is-offset-one-quarter">
  <div class="box p-4">
    <div class="has-text-danger is-size-7 has-text-weight-bold is-uppercase mb-3">
      <a href="#">NEW TOPIC</a>
    </div>
    <div class="has-text-dark is-size-3 has-text-weight-bold mb-3">
      New Developments in the Tech World
    </div>
    <div class="has-text-grey mb-4">
      The latest trends and innovations in the tech industry are transforming businesses.
    </div>
    <div class="has-text-grey">
      <p class="border-bottom py-3">12/30/2024 10:00 AM EDT</p>
    </div>
    <div class="mt-6">
      <p class="my-2">The tech industry has seen remarkable growth this year, with major advancements in artificial intelligence, cloud computing, and quantum technology.</p>
      <p class="my-2">Companies across the globe are investing heavily in these technologies, driving innovation and competition. Major players like Apple, Google, and Microsoft have unveiled new products aimed at revolutionizing how we work, communicate, and live.</p>
      <p class="my-2">AI applications are now widely used in healthcare, finance, and customer service. These developments promise to improve efficiency and productivity while also raising concerns about data privacy and job displacement.</p>
      <p class="my-2">Cloud services continue to expand, with many companies opting for hybrid and multi-cloud strategies to meet their needs. The shift towards remote work has accelerated the demand for scalable and secure cloud solutions.</p>
    </div>
  </div>
</div>

What we do at our company:

01.

Investigation

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

Planning

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

Creative

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

Building

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

Launching

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

Launching

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

                      
                      
                      <div class="p-4 has-text-grey">
  <h1 class="mb-8 has-text-centered is-size-1 has-text-weight-bold has-text-primary">What we do at our company:</h1>
  <ul class="columns is-multiline is-centered">
    <li class="column is-12-mobile is-6-tablet is-4-desktop">
      <div class="columns">
        <div class="column is-narrow">
          <div class="is-size-1 has-text-info">01.</div>
        </div>
        <div class="column">
          <div class="is-size-3 has-text-weight-bold has-text-dark">Investigation</div>
          <p class="is-max-desktop py-2 has-text-grey-light">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 is-12-mobile is-6-tablet is-4-desktop">
      <div class="columns">
        <div class="column is-narrow">
          <div class="is-size-1 has-text-info">02.</div>
        </div>
        <div class="column">
          <div class="is-size-3 has-text-weight-bold has-text-dark">Planning</div>
          <p class="is-max-desktop py-2 has-text-grey-light">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 is-12-mobile is-6-tablet is-4-desktop">
      <div class="columns">
        <div class="column is-narrow">
          <div class="is-size-1 has-text-info">03.</div>
        </div>
        <div class="column">
          <div class="is-size-3 has-text-weight-bold has-text-dark">Creative</div>
          <p class="is-max-desktop py-2 has-text-grey-light">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 is-12-mobile is-6-tablet is-4-desktop">
      <div class="columns">
        <div class="column is-narrow">
          <div class="is-size-1 has-text-info">04.</div>
        </div>
        <div class="column">
          <div class="is-size-3 has-text-weight-bold has-text-dark">Building</div>
          <p class="is-max-desktop py-2 has-text-grey-light">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 is-12-mobile is-6-tablet is-4-desktop">
      <div class="columns">
        <div class="column is-narrow">
          <div class="is-size-1 has-text-info">05.</div>
        </div>
        <div class="column">
          <div class="is-size-3 has-text-weight-bold has-text-dark">Launching</div>
          <p class="is-max-desktop py-2 has-text-grey-light">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 is-12-mobile is-6-tablet is-4-desktop">
      <div class="columns">
        <div class="column is-narrow">
          <div class="is-size-1 has-text-info">06.</div>
        </div>
        <div class="column">
          <div class="is-size-3 has-text-weight-bold has-text-dark">Launching</div>
          <p class="is-max-desktop py-2 has-text-grey-light">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="has-background-light p-5">
  <div class="container box p-6 has-background-white has-text-grey-dark mb-10">
    <div class="columns">
      <div class="column is-12-mobile is-3-tablet is-3-desktop">
        <div class="content">
          <h1 class="title is-4">Pricing Plans</h1>
          <h3 class="subtitle is-6">Choose the best plan for our service. Each plan has different features and benefits.</h3>
        </div>
        <p class="has-text-grey-light is-size-7">*Prices are monthly</p>
      </div>
      <div class="column is-12-mobile is-9-tablet is-9-desktop">
        <div class="columns">
          <div class="column is-12-mobile is-4-tablet">
            <div class="box has-background-white p-5 has-text-centered">
              <h2 class="title is-5 has-text-weight-bold">Basic Plan</h2>
              <h3 class="title is-3 has-text-weight-bold">¥500 <span class="is-size-5">/month</span></h3>
              <ul class="list has-text-left">
                <li><i class="mdi mdi-check-bold"></i> Basic Features</li>
                <li><i class="mdi mdi-check-bold"></i> Support Included</li>
              </ul>
              <button class="button is-link is-fullwidth has-text-weight-bold">Buy Now</button>
            </div>
          </div>
          <div class="column is-12-mobile is-4-tablet">
            <div class="box has-background-white p-5 has-text-centered is-shadowed">
              <h2 class="title is-5 has-text-weight-bold">Team Plan</h2>
              <h3 class="title is-3 has-text-weight-bold">¥1500 <span class="is-size-5">/month</span></h3>
              <ul class="list has-text-left">
                <li><i class="mdi mdi-check-bold"></i> Team Features</li>
                <li><i class="mdi mdi-check-bold"></i> 24/7 Support</li>
                <li><i class="mdi mdi-check-bold"></i> Multiple Account Management</li>
              </ul>
              <button class="button is-link is-fullwidth has-text-weight-bold">Buy Now</button>
            </div>
          </div>
          <div class="column is-12-mobile is-4-tablet">
            <div class="box has-background-white p-5 has-text-centered">
              <h2 class="title is-5 has-text-weight-bold">Pro Plan</h2>
              <h3 class="title is-3 has-text-weight-bold">¥3500 <span class="is-size-5">/month</span></h3>
              <ul class="list has-text-left">
                <li><i class="mdi mdi-check-bold"></i> Advanced Features</li>
                <li><i class="mdi mdi-check-bold"></i> Dedicated Support</li>
                <li><i class="mdi mdi-check-bold"></i> Priority Access</li>
                <li><i class="mdi mdi-check-bold"></i> Additional Benefits</li>
              </ul>
              <button class="button is-link is-fullwidth has-text-weight-bold">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="section">
  <div class="container">
    <div class="level is-mobile">
      <div class="level-left">
        <a href="/" class="is-size-4 has-text-weight-bold has-text-dark">
          Nobalish
        </a>
      </div>
      <div class="level-right">
        <nav class="level-item">
          <a href="#" class="button is-text is-size-5 has-text-grey-dark is-hovered is-active">Dashboard</a>
          <a href="#" class="button is-text is-size-5 has-text-indigo is-hovered">
            News
            <svg xmlns="http://www.w3.org/2000/svg" class="icon is-small" 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="button is-text is-size-5 has-text-grey-dark is-hovered is-active">Plans</a>
          <a href="#" class="button is-text is-size-5 has-text-grey-dark is-hovered is-active">Contact</a>
        </nav>
        <div class="buttons">
          <a href="#" class="button is-link is-small">Join Now</a>
        </div>
      </div>
    </div>
    <div class="box has-shadow">
      <div class="columns is-desktop">
        <div class="column is-two-thirds">
          <a href="#" class="tile is-ancestor">
            <div class="tile is-parent">
              <article class="tile is-child notification is-link has-text-white">
                <div class="content">
                  <div class="icon has-text-centered">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon is-medium" 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 class="title is-5">Innovative Design</div>
                  <p class="subtitle is-6">Explore a range of cutting-edge features designed to elevate your experience.</p>
                </div>
              </article>
            </div>
          </a>
          <a href="#" class="tile is-ancestor">
            <div class="tile is-parent">
              <article class="tile is-child notification is-link has-text-white">
                <div class="content">
                  <div class="icon has-text-centered">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon is-medium" 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 class="title is-5">Solutions</div>
                  <p class="subtitle is-6">Providing cutting-edge solutions to everyday challenges through technology and design.</p>
                </div>
              </article>
            </div>
          </a>
          <a href="#" class="tile is-ancestor">
            <div class="tile is-parent">
              <article class="tile is-child notification is-link has-text-white">
                <div class="content">
                  <div class="icon has-text-centered">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon is-medium" 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 class="title is-5">Innovative Tech</div>
                  <p class="subtitle is-6">Discover the amazing individuals behind our success, working together to make a difference.</p>
                </div>
              </article>
            </div>
          </a>
          <a href="#" class="tile is-ancestor">
            <div class="tile is-parent">
              <article class="tile is-child notification is-link has-text-white">
                <div class="content">
                  <div class="icon has-text-centered">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon is-medium" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M12 3V7H8V3H12zM3 7H7V3H3V7zM7 17H3V13H7V17zM13 7H17V3H13V7zM17 13H13V17H17V13z" />
                    </svg>
                  </div>
                  <div class="title is-5">Create Account</div>
                  <p class="subtitle is-6">Fill in the details below to create your account.</p>
                </div>
              </article>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

credit card

Credit Card Number

Expiration Date

Security Code

                      
                      
                      <div class="section is-fullheight has-background-gradient">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-half-tablet is-one-third-desktop">
        <div class="box has-background-light has-shadow-lg p-5">
          <div class="content">
            <div class="field">
              <label for="name" class="label">Credit Card</label>
              <div class="control">
                <input type="text" class="input" id="name" placeholder="Full Name" />
              </div>
            </div>
            <div class="field">
              <label for="cardNumber" class="label">Credit Card Number</label>
              <div class="control">
                <input type="text" class="input" id="cardNumber" placeholder="1234 5678 9012 3456" maxlength="19" />
              </div>
            </div>
            <div class="columns">
              <div class="column is-two-thirds">
                <div class="field">
                  <label for="expiryDate" class="label">Expiration Date</label>
                  <div class="control">
                    <input type="text" class="input" id="expiryDate" placeholder="MM/YY" maxlength="5" pattern="\d{2}/\d{2}" />
                  </div>
                </div>
              </div>
              <div class="column is-one-third">
                <div class="field">
                  <label for="cvv" class="label">Security Code</label>
                  <div class="control">
                    <input type="text" class="input" id="cvv" placeholder="123" maxlength="3" pattern="\d{3}" />
                  </div>
                </div>
              </div>
            </div>
            <button class="button is-dark is-fullwidth mt-4">Complete Purchase</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Create Account

Fill in the details below to create your account.

Created using Nobalish.

                      
                      
                      <div class="section is-fullheight">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-half-tablet is-one-third-desktop">
        <div class="box has-background-light p-5 has-shadow-lg">
          <h4 class="title is-3 has-text-primary">Create Account</h4>
          <p class="subtitle is-5 has-text-secondary">Fill in the details below to create your account.</p>
          <form class="mt-4">
            <div class="field">
              <label for="username" class="label">Username</label>
              <div class="control">
                <input type="text" class="input" id="username" placeholder="Choose a username" />
              </div>
            </div>
            <div class="field">
              <label for="useremail" class="label">Email Address</label>
              <div class="control">
                <input type="email" class="input" id="useremail" placeholder="Enter your email address" />
              </div>
            </div>
            <div class="field">
              <label for="userpassword" class="label">Password</label>
              <div class="control">
                <input type="password" class="input" id="userpassword" placeholder="Set your password" />
              </div>
            </div>
            <div class="field">
              <div class="control">
                <label class="checkbox">
                  <input type="checkbox" id="acceptTerms" />
                  I agree to the <a href="#" class="has-text-info">Privacy Policy</a> and <a href="#" class="has-text-info">Terms of Service</a>.
                </label>
              </div>
            </div>
            <button type="submit" class="button is-success is-fullwidth">Sign Up</button>
            <p class="mt-3 has-text-centered has-text-grey-light">
              Already have an account? <a href="#" class="has-text-info">Log In</a>
            </p>
          </form>
          <div class="pt-4 has-text-centered is-size-7 has-text-grey">
            Created using <a class="has-text-grey" href="#" target="_blank">Nobalish</a>.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

                      
                      

                      <div class="section py-5">
  <div class="container">
    <div class="box has-background-white p-5 has-shadow-lg is-max-w-100">
      <form action="">
        <div class="field is-horizontal mb-4">
          <div class="field-label is-normal">
            <label for="name" class="label has-text-weight-bold has-text-grey-dark" style="width: 120px;">Full Name</label>
          </div>
        </div>

        <div class="field is-horizontal mb-4">
          <div class="field-label is-normal">
            <label for="number" class="label has-text-weight-bold has-text-grey-dark" style="width: 120px;">Contact Number</label>
          </div>
          <div class="field-body">
            <div class="control">
              <input type="number" id="number" name="number" placeholder="Enter your number" class="input is-large" />
            </div>
          </div>
        </div>

        <div class="field is-horizontal mb-4">
          <div class="field-label is-normal">
            <label for="range" class="label has-text-weight-bold has-text-grey-dark" style="width: 120px;">Experience Level</label>
          </div>
          <div class="field-body">
            <div class="control">
              <input type="range" id="range" name="range" class="slider is-fullwidth" />
            </div>
          </div>
        </div>

        <div class="field is-horizontal mb-4">
          <div class="field-label is-normal">
            <label for="file" class="label has-text-weight-bold has-text-grey-dark" style="width: 120px;">Upload File</label>
          </div>
          <div class="field-body">
            <div class="control">
              <input type="file" id="file" name="file" class="input is-large" />
            </div>
          </div>
        </div>

        <div class="field is-horizontal mb-4">
          <div class="field-label is-normal">
            <label for="date" class="label has-text-weight-bold has-text-grey-dark" style="width: 120px;">Event Date</label>
          </div>
          <div class="field-body">
            <div class="control">
              <input type="date" id="date" name="date" class="input is-large" />
            </div>
          </div>
        </div>

        <div class="field is-horizontal mb-4">
          <div class="field-label is-normal">
            <label for="month" class="label has-text-weight-bold has-text-grey-dark" style="width: 120px;">Start Month</label>
          </div>
          <div class="field-body">
            <div class="control">
              <input type="month" id="month" name="month" class="input is-large" />
            </div>
          </div>
        </div>

        <div class="field is-horizontal mb-4">
          <div class="field-label is-normal">
            <label for="time" class="label has-text-weight-bold has-text-grey-dark" style="width: 120px;">Preferred Time</label>
          </div>
          <div class="field-body">
            <div class="control">
              <input type="time" id="time" name="time" class="input is-large" />
            </div>
          </div>
        </div>

        <div class="field is-horizontal mb-4">
          <div class="field-label is-normal">
            <label for="password" class="label has-text-weight-bold has-text-grey-dark" style="width: 120px;">Password</label>
          </div>
          <div class="field-body">
            <div class="control">
              <input type="password" id="password" name="password" placeholder="Create a password" class="input is-large" />
            </div>
          </div>
        </div>

        <div class="field is-horizontal mb-4">
          <div class="field-label is-normal">
            <label for="select" class="label has-text-weight-bold has-text-grey-dark" style="width: 120px;">City</label>
          </div>
        </div>

        <div class="field is-grouped is-grouped-right">
          <div class="control">
            <button type="submit" class="button is-success is-large">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </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="section py-6">
  <div class="container">
    <div class="mb-10 md:mb-16">
      <h2 class="mb-4 has-text-centered has-text-weight-bold has-text-dark is-size-3">Let's Connect</h2>
      <p class="mx-auto has-text-centered has-text-grey-lighter is-size-5">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="columns is-multiline is-max-w-100 mx-auto">
      <div class="column is-12 is-md-6">
        <label for="first-name" class="label has-text-weight-bold has-text-dark">Name of the Explorer*</label>
        <div class="control">
          <input name="first-name" class="input is-large" id="first-name" placeholder="Your full name" required />
        </div>
      </div>
      <div class="column is-12 is-md-6">
        <label for="last-name" class="label has-text-weight-bold has-text-dark">Family Name*</label>
        <div class="control">
          <input name="last-name" class="input is-large" id="last-name" placeholder="Your surname" required />
        </div>
      </div>
      <div class="column is-12">
        <label for="company" class="label has-text-weight-bold has-text-dark">Organization Name</label>
        <div class="control">
          <input name="company" class="input is-large" id="company" placeholder="Enter your organization" />
        </div>
      </div>
      <div class="column is-12">
        <label for="email" class="label has-text-weight-bold has-text-dark">Your Email Address*</label>
        <div class="control">
          <input name="email" class="input is-large" id="email" placeholder="email@example.com" required />
        </div>
      </div>
      <div class="column is-12">
        <label for="subject" class="label has-text-weight-bold has-text-dark">Topic of Discussion*</label>
        <div class="control">
          <input name="subject" class="input is-large" id="subject" placeholder="Subject of your message" required />
        </div>
      </div>
      <div class="column is-12">
        <label for="message" class="label has-text-weight-bold has-text-dark">Your Thoughts*</label>
        <div class="control">
          <textarea name="message" class="textarea is-large" id="message" rows="6" placeholder="Write your message here" required></textarea>
        </div>
      </div>
      <div class="column is-12 is-flex is-justify-content-space-between is-align-items-center">
        <button class="button is-success is-large" type="submit">Send Your Message</button>
        <span class="has-text-grey-light is-size-7">*Required fields</span>
      </div>
      <p class="has-text-centered has-text-grey-light is-size-7">By submitting, you agree to our <a href="#" class="has-text-decoration-underline">Terms and Conditions</a>.</p>
    </form>
  </div>
</div>

                      
                      
                      <form>
  <div class="columns is-multiline is-gapless 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 for="accept_terms" class="checkbox">
      <input id="accept_terms" type="checkbox" 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 has-background-white p-4 has-rounded">
      <div class="columns is-gapless">
        <div class="column is-one-third has-background-primary p-4 has-text-white">
          <h2 class="title is-4 has-font-weight-bold mb-4">Contact Information</h2>
          <p class="has-font-weight-bold mb-3">
            Location Address
            <span class="d-block has-text-light">123 Tech Street, Silicon Valley, CA, USA</span>
          </p>
          <p class="has-font-weight-bold mb-3">
            Phone Number
            <span class="d-block has-text-light">+1 (800) 123 4567</span>
          </p>
          <p class="has-font-weight-bold mb-3">
            Email Address
            <span class="d-block has-text-light">contact@company.com</span>
          </p>
          <p class="has-font-weight-bold mb-3">
            Web Address
            <span class="d-block has-text-light">www.companywebsite.com</span>
          </p>
        </div>
        <div class="column is-two-thirds has-background-light p-4">
          <h2 class="title is-4 has-font-weight-bold has-text-primary mb-4">Contact Us</h2>
          <form>
            <div class="columns is-gapless mb-4">
              <div class="column is-half">
                <input type="text" class="input is-rounded" placeholder="Full Name" />
              </div>
              <div class="column is-half">
                <input type="text" class="input is-rounded" placeholder="Your Email" />
              </div>
            </div>
            <div class="columns is-gapless mb-4">
              <div class="column is-half">
                <input type="email" 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 is-rounded" placeholder="Your Inquiry" rows="6"></textarea>
            </div>
            <div class="has-text-centered">
              <button type="submit" class="button is-primary is-large is-rounded px-5 py-3">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<p class="has-text-grey-light">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="has-background-light has-text-centered">
  <div class="container py-5">
    <div class="columns">
      <div class="column is-full mb-4">
        <h2 class="title is-4 has-font-weight-bold has-text-primary">Get Started with Amazing Projects</h2>
        <p class="has-text-grey-light">Join thousands of businesses growing with our powerful solutions.</p>
      </div>
    </div>
    <div class="columns is-multiline">
      <div class="column is-one-sixth">
        <h5 class="title is-5 has-font-weight-bold has-text-primary">Services</h5>
        <ul>
          <li><a href="#" class="has-text-grey-dark">Overview</a></li>
          <li><a href="#" class="has-text-grey-dark">Support</a></li>
          <li><a href="#" class="has-text-grey-dark">Features</a></li>
          <li><a href="#" class="has-text-grey-dark">Pricing</a></li>
          <li><a href="#" class="has-text-grey-dark">Blog</a></li>
          <li><a href="#" class="has-text-grey-dark">Updates</a></li>
        </ul>
      </div>
      <div class="column is-one-sixth">
        <h5 class="title is-5 has-font-weight-bold has-text-primary">About Us</h5>
        <ul>
          <li><a href="#" class="has-text-grey-dark">Our Team</a></li>
          <li><a href="#" class="has-text-grey-dark">Careers</a></li>
          <li><a href="#" class="has-text-grey-dark">News</a></li>
          <li><a href="#" class="has-text-grey-dark">Partnerships</a></li>
          <li><a href="#" class="has-text-grey-dark">Contact</a></li>
        </ul>
      </div>
      <div class="column is-one-sixth">
        <h5 class="title is-5 has-font-weight-bold has-text-primary">Resources</h5>
        <ul>
          <li><a href="#" class="has-text-grey-dark">FAQ</a></li>
          <li><a href="#" class="has-text-grey-dark">Documentation</a></li>
          <li><a href="#" class="has-text-grey-dark">Support Center</a></li>
          <li><a href="#" class="has-text-grey-dark">Community</a></li>
        </ul>
      </div>
      <div class="column is-one-sixth">
        <h5 class="title is-5 has-font-weight-bold has-text-primary">Legal</h5>
        <ul>
          <li><a href="#" class="has-text-grey-dark">Privacy Policy</a></li>
          <li><a href="#" class="has-text-grey-dark">Terms of Use</a></li>
          <li><a href="#" class="has-text-grey-dark">Cookies Policy</a></li>
        </ul>
      </div>
      <div class="column is-one-sixth">
        <h5 class="title is-5 has-font-weight-bold has-text-primary">Social</h5>
        <ul>
          <li><a href="#" class="has-text-grey-dark">Twitter</a></li>
          <li><a href="#" class="has-text-grey-dark">Facebook</a></li>
          <li><a href="#" class="has-text-grey-dark">LinkedIn</a></li>
          <li><a href="#" class="has-text-grey-dark">Instagram</a></li>
        </ul>
      </div>
      <div class="column is-one-sixth">
        <h5 class="title is-5 has-font-weight-bold has-text-primary">Quick Links</h5>
        <ul>
          <li><a href="#" class="has-text-grey-dark">Blog</a></li>
          <li><a href="#" class="has-text-grey-dark">Events</a></li>
          <li><a href="#" class="has-text-grey-dark">Help Center</a></li>
          <li><a href="#" class="has-text-grey-dark">Newsletter</a></li>
        </ul>
      </div>
    </div>
    <hr class="my-4">
    <div class="columns is-mobile">
      <div class="column has-text-centered">
        <small class="has-text-grey-light">© 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="box has-background-light has-shadow-sm p-4 rounded-lg">
    <div class="columns is-mobile is-vcentered">
      <div class="column is-narrow">
        <a href="#" target="_blank" class="is-flex is-align-items-center mb-4 mb-sm-0">
          <span class="title is-4 has-font-weight-bold has-text-dark">My Website</span>
        </a>
      </div>
      <div class="column is-flex is-justify-content-flex-end">
        <ul class="is-flex is-wrap mb-6 mb-sm-0">
          <li><a href="#" class="mr-4 has-text-grey-dark is-size-7 is-hovered">Home</a></li>
          <li><a href="#" class="mr-4 has-text-grey-dark is-size-7 is-hovered">Terms of Service</a></li>
          <li><a href="#" class="mr-4 has-text-grey-dark is-size-7 is-hovered">Support</a></li>
          <li><a href="#" class="has-text-grey-dark is-size-7 is-hovered">Feedback</a></li>
        </ul>
      </div>
    </div>
    <hr class="my-4 has-border-gray-light" />
    <span class="block has-text-centered has-text-grey-light is-size-7">
      © 2022 <a href="#" target="_blank" class="is-hovered">My Website™</a>. All Rights Reserved.
    </span>
  </div>
  <p class="mt-4 is-size-7">
    This footer component is part of a larger, open-source library of Bootstrap components. Learn more by going to the official 
    <a class="has-text-primary is-hovered" href="#" target="_blank">My Website Documentation</a>.
  </p>
</div>

                      
                      
                      <div class="container">
  <div class="box has-background-light has-shadow-sm p-6">
    <div class="columns is-mobile is-vcentered">
      <div class="column is-12 has-text-centered">
        <nav class="mb-4 is-flex is-flex-wrap-wrap is-justify-content-center is-gapless">
          <a href="#" class="has-text-grey-dark hover:has-text-primary is-size-7 mx-3">Company</a>
          <a href="#" class="has-text-grey-dark hover:has-text-primary is-size-7 mx-3">Partners</a>
          <a href="#" class="has-text-grey-dark hover:has-text-primary is-size-7 mx-3">Careers</a>
          <a href="#" class="has-text-grey-dark hover:has-text-primary is-size-7 mx-3">Newsroom</a>
          <a href="#" class="has-text-grey-dark hover:has-text-primary is-size-7 mx-3">Updates</a>
        </nav>
        <div class="is-flex is-justify-content-center is-gapless">
          <a href="#" target="_blank" class="has-text-grey hover:has-text-dark mx-2">
            <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.03 20 4 16.97 4 12C4 7.03 7.03 4 12 4C16.97 4 20 7.03 20 12C20 16.97 16.97 20 12 20ZM12 5C10.9 5 10 5.9 10 7C10 8.1 10.9 9 12 9C13.1 9 14 8.1 14 7C14 5.9 13.1 5 12 5ZM12 15C10.9 15 10 15.9 10 17C10 18.1 10.9 19 12 19C13.1 19 14 18.1 14 17C14 15.9 13.1 15 12 15Z" />
            </svg>
          </a>
          <a href="#" target="_blank" class="has-text-grey hover:has-text-dark mx-2">
            <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M20 2H4C2.89 2 2 2.89 2 4V20C2 21.1 2.89 22 4 22H20C21.1 22 22 21.1 22 20V4C22 2.89 21.1 2 20 2ZM10 18V6H14V18H10ZM12 5C13.1 5 14 5.9 14 7C14 8.1 13.1 9 12 9C10.9 9 10 8.1 10 7C10 5.9 10.9 5 12 5ZM16 18H8V6H16V18Z" />
            </svg>
          </a>
          <a href="#" target="_blank" class="has-text-grey hover:has-text-dark mx-2">
            <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 7H17.6L14 2H10L6.4 7H3C2.45 7 2 7.45 2 8V20C2 20.55 2.45 21 3 21H21C21.55 21 22 20.55 22 20V8C22 7.45 21.55 7 21 7ZM10 4H14L16.6 7H7.4L10 4ZM20 18H4V9H20V18Z" />
            </svg>
          </a>
          <a href="#" target="_blank" class="has-text-grey hover:has-text-dark mx-2">
            <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0ZM12 20C7.03 20 4 16.97 4 12C4 7.03 7.03 4 12 4C16.97 4 20 7.03 20 12C20 16.97 16.97 20 12 20ZM12 5C10.9 5 10 5.9 10 7C10 8.1 10.9 9 12 9C13.1 9 14 8.1 14 7C14 5.9 13.1 5 12 5ZM12 15C10.9 15 10 15.9 10 17C10 18.1 10.9 19 12 19C13.1 19 14 18.1 14 17C14 15.9 13.1 15 12 15Z" />
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="has-text-centered has-text-grey-light is-size-7 py-8">
      © 2021 - Present CompanyX. All rights reserved.
    </div>
  </div>
</div>

                      
                      

                      <div class="container py-5">
  <div class="columns is-multiline is-gap-4">
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-primary is-fullwidth">Primary Button</button>
    </div>
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-outlined is-secondary is-fullwidth">Outline Button</button>
    </div>
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-success is-fullwidth">
        <i class="bi bi-check-circle me-2"></i> Success Button
      </button>
    </div>
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-warning is-fullwidth" data-bs-toggle="tooltip" data-bs-placement="top" title="This is a tooltip!">
        Warning Button
      </button>
    </div>
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-danger is-fullwidth">
        Delete <span class="tag is-light is-dark ms-2">5</span>
      </button>
    </div>
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-info is-fullwidth">Info Button</button>
    </div>
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-dark is-fullwidth">Dark Button</button>
    </div>
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-light is-fullwidth">Light Button</button>
    </div>
  </div>
</div>

                      
                      
                      <div class="container py-5">
  <div class="columns is-multiline is-gap-4">
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-multiline is-gap-4">
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" style="background-color: #dc3545; font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 30px;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Button</button>
    </div>
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" style="background-color: rgb(21, 255, 9); font-size: 16px; font-weight: 600; text-transform: uppercase; border-radius: 30px;" onmouseover="this.style.transform='scale(1.1)'; this.style.boxShadow='0 4px 20px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='none';">Button</button>
    </div>
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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 is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-fullwidth" 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="columns is-multiline is-gap-4">
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-danger is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-success is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-primary is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-warning is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-light is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-secondary is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-info is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-dark is-fullwidth is-rounded p-5" 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 is-gap-4">
    <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-outline is-danger is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-outline is-success is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-outline is-primary is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-outline is-warning is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-outline is-secondary is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-outline is-info is-fullwidth is-rounded p-5" 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="column is-full-mobile is-half-tablet is-one-quarter-desktop">
      <button class="button is-outline is-dark is-fullwidth is-rounded p-5" 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="button is-primary is-fullwidth is-flex is-align-items-center is-justify-content-center p-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-house-door mr-2" viewBox="0 0 16 16">
          <path d="M8 3.293l6 6V13h-4v3H6v-3H2V9.293l6-6zM0 9.293l7-7 7 7V14h-3v-4h-8v4H0V9.293z"/>
        </svg>
        Home
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="button is-success is-fullwidth is-flex is-align-items-center is-justify-content-center p-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search mr-2" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6 6 0 1 0-1.398 1.398l4.672 4.671a1 1 0 1 0 1.414-1.414l-4.672-4.671zM12 6a5.978 5.978 0 0 1-1.162 3.626l-4.326-4.327A5.978 5.978 0 0 1 12 6z"/>
        </svg>
        Search
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="button is-warning is-fullwidth is-flex is-align-items-center is-justify-content-center p-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle mr-2" viewBox="0 0 16 16">
          <path d="M8 3a5 5 0 1 0 5 5 5 5 0 0 0-5-5zM8 0a8 8 0 1 1-8 8 8 8 0 0 1 8-8zm0 14a6 6 0 1 0-6-6 6 6 0 0 0 6 6z"/>
        </svg>
        Add
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="button is-danger is-fullwidth is-flex is-align-items-center is-justify-content-center p-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-gear mr-2" viewBox="0 0 16 16">
          <path d="M8 3.5a4.5 4.5 0 1 0 4.5 4.5A4.5 4.5 0 0 0 8 3.5zM8 1a5 5 0 1 1-5 5 5 5 0 0 1 5-5z"/>
        </svg>
        Settings
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="button is-info is-fullwidth is-flex is-align-items-center is-justify-content-center p-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-cart mr-2" viewBox="0 0 16 16">
          <path d="M0 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1h9V1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h1V1zM1 2h1v1H1zM14 2h1v1h-1zM0 12h16V4H0z"/>
        </svg>
        Cart
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="button is-pink is-fullwidth is-flex is-align-items-center is-justify-content-center p-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-heart mr-2" viewBox="0 0 16 16">
          <path d="M8 13s3-2.5 6-5c2-2 2-4 0-6-2-2-4-2-6 0-2-2-4-2-6 0-2 2-2 4 0 6 3 2.5 6 5 6 5z"/>
        </svg>
        Favorite
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="button is-secondary is-fullwidth is-flex is-align-items-center is-justify-content-center p-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-chat mr-2" viewBox="0 0 16 16">
          <path d="M2 4a2 2 0 0 0 2-2h8a2 2 0 0 0 2 2v8a2 2 0 0 0-2 2H4a2 2 0 0 0-2-2V4zm3 0v8h8V4H5z"/>
        </svg>
        Messages
      </button>
    </div>
    <div class="column is-one-quarter">
      <button class="button is-dark is-fullwidth is-flex is-align-items-center is-justify-content-center p-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person mr-2" viewBox="0 0 16 16">
          <path d="M8 1a4 4 0 1 1-4 4 4 4 0 0 1 4-4zm0 8a6 6 0 0 0-6 6v1h12v-1a6 6 0 0 0-6-6z"/>
        </svg>
        Profile
      </button>
    </div>
  </div>
</div>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Mon

Tue

Wed

Thu

Fri

Sat

                      
                      
                      <div class="p-4">
  <div class="columns is-multiline is-mobile is-centered bg-white shadow-sm rounded overflow-auto mx-auto py-3 px-2 mb-4">
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Sun</p>
      <p class="mb-0 has-text-weight-bold">1</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Mon</p>
      <p class="mb-0 has-text-weight-bold">2</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Tue</p>
      <p class="mb-0 has-text-weight-bold">3</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-primary text-white shadow-lg position-relative p-3">
      <p class="mb-1 is-small">Wed</p>
      <p class="mb-0 has-text-weight-bold">4</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Thu</p>
      <p class="mb-0 has-text-weight-bold">5</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Fri</p>
      <p class="mb-0 has-text-weight-bold">6</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-dark text-white shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Sat</p>
      <p class="mb-0 has-text-weight-bold">7</p>
    </div>
  </div>
  <div class="columns is-multiline is-mobile is-centered bg-white shadow-sm rounded overflow-auto mx-auto py-3 px-2">
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Sun</p>
      <p class="mb-0 has-text-weight-bold">1</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Mon</p>
      <p class="mb-0 has-text-weight-bold">2</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Tue</p>
      <p class="mb-0 has-text-weight-bold">3</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded bg-primary text-white shadow-lg position-relative p-3">
      <p class="mb-1 is-small">Wed</p>
      <p class="mb-0 has-text-weight-bold">4</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Thu</p>
      <p class="mb-0 has-text-weight-bold">5</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Fri</p>
      <p class="mb-0 has-text-weight-bold">6</p>
    </div>
    <div class="column is-narrow has-text-centered is-flex is-flex-direction-column is-align-items-center is-rounded transition-all bg-light text-dark shadow-sm hover-shadow-lg cursor-pointer p-3">
      <p class="mb-1 is-small">Sat</p>
      <p class="mb-0 has-text-weight-bold">7</p>
    </div>
  </div>
</div>

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

                      
                      

                      <div class="columns is-centered">
  <div class="column is-full is-flex is-justify-content-center p-4">
    <div class="notification is-primary is-flex is-align-items-center is-rounded-lg p-4">
      <div class="mr-5">
        <p class="has-text-weight-bold has-text-warning">Holiday Sale
          <span class="has-text-light">
            - Up to 40% off on home decor!
          </span>
          <span class="d-inline-flex align-items-center justify-content-center text-sm has-text-weight-bold has-text-warning ml-3">
            Shop Now <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
          </span>
        </p>
      </div>
      <button class="delete position-absolute top-0 end-0" type="button"></button>
    </div>
  </div>
</div>

<div class="columns is-centered">
  <div class="column is-full is-flex is-justify-content-center p-4">
    <div class="notification is-danger is-flex is-align-items-center is-rounded-lg p-4">
      <div class="mr-5">
        <p class="has-text-weight-bold has-text-warning">Holiday Sale
          <span class="has-text-light">
            - Up to 40% off on home decor!
          </span>
          <span class="d-inline-flex align-items-center justify-content-center text-sm has-text-weight-bold has-text-warning ml-3">
            Shop Now <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
          </span>
        </p>
      </div>
      <button class="delete position-absolute top-0 end-0" type="button"></button>
    </div>
  </div>
</div>

<div class="columns is-centered">
  <div class="column is-full is-flex is-justify-content-center p-4">
    <div class="notification is-success is-flex is-align-items-center is-rounded-lg p-4">
      <div class="mr-5">
        <p class="has-text-weight-bold has-text-warning">Holiday Sale
          <span class="has-text-light">
            - Up to 40% off on home decor!
          </span>
          <span class="d-inline-flex align-items-center justify-content-center text-sm has-text-weight-bold has-text-warning ml-3">
            Shop Now <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
          </span>
        </p>
      </div>
      <button class="delete position-absolute top-0 end-0" type="button"></button>
    </div>
  </div>
</div>

<div class="columns is-centered">
  <div class="column is-full is-flex is-justify-content-center p-4">
    <div class="notification is-info is-flex is-align-items-center is-rounded-lg p-4">
      <div class="mr-5">
        <p class="has-text-weight-bold has-text-warning">Holiday Sale
          <span class="has-text-light">
            - Up to 40% off on home decor!
          </span>
          <span class="d-inline-flex align-items-center justify-content-center text-sm has-text-weight-bold has-text-warning ml-3">
            Shop Now <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
          </span>
        </p>
      </div>
      <button class="delete position-absolute top-0 end-0" type="button"></button>
    </div>
  </div>
</div>

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="has-text-primary has-text-weight-bold is-size-1">Sample Heading One</h1>
    <h2 class="has-text-secondary has-text-weight-bold is-size-2">Sample Heading Two</h2>
    <h3 class="has-text-success has-text-weight-bold is-size-3">Sample Heading Three</h3>
    <h4 class="has-text-warning has-text-weight-bold is-size-4">Sample Heading Four</h4>
    <h5 class="has-text-info has-text-weight-bold is-size-5">Sample Heading Five</h5>
    <p class="has-text-grey has-text-weight-semibold is-size-6">Sample Heading Six</p>
  </div>
</div>

                      
                      
                      <nav class="pagination is-large" role="navigation" aria-label="pagination">
  <a class="pagination-previous" href="#" aria-label="Previous">&laquo; Previous</a>
  <a class="pagination-next" href="#" aria-label="Next">Next &raquo;</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" href="#">1</a></li>
    <li><a class="pagination-link" href="#">2</a></li>
    <li><a class="pagination-link is-current" href="#" aria-current="page">3</a></li>
    <li><a class="pagination-link" href="#">4</a></li>
    <li><a class="pagination-link" href="#">5</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 has-shadow-sm is-rounded">
        <div class="card-header has-background-light has-text-primary has-text-weight-bold has-text-centered">
          Flexible Billing
        </div>
        <div class="card-content">
          <div class="columns is-centered mb-4">
            <div class="column is-narrow 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 is-narrow 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 has-shadow-sm is-rounded">
        <div class="card-header has-background-dark has-text-white has-text-weight-bold has-text-centered">
          Premium Business Plan
        </div>
        <div class="card-content">
          <div class="columns is-centered mb-4">
            <div class="column is-narrow 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 is-narrow 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="column is-one-third mb-4">
      <div class="card has-shadow-sm">
        <div class="card-header has-background-light has-text-primary has-text-weight-bold has-text-centered">
          December 2024
        </div>
        <div class="card-content">
          <div class="columns is-mobile is-vcentered mb-4">
            <div class="column is-narrow">
              <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>
            </div>
            <div class="column is-narrow">
              <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>
          <table class="table 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"></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">
    <div class="column is-half">
      <label for="dropzone-file" class="file is-boxed is-fullwidth has-text-centered is-flex is-flex-direction-column is-align-items-center is-justify-content-center is-size-5 is-clickable">
        <div class="file-cta">
          <div class="file-icon">
            <svg class="w-10 h-10 mb-3 text-muted" 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>
          </div>
          <span class="file-label">
            <span class="has-text-weight-bold">Choose your file</span> or simply drag it here
          </span>
        </div>
        <p class="file-cta is-small has-text-grey-dark">
          Supported formats: SVG, PNG, JPG, GIF (MAX. 800x400px)
        </p>
        <input id="dropzone-file" type="file" class="file-input is-hidden" />
      </label>
    </div>
  </div>
  <p class="mt-3 has-text-centered">
    This file upload component is part of a comprehensive Bootstrap component library. For more details, visit the official <a class="has-text-primary" href="#" target="_blank">Bulma 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">
  <div class="tabs is-boxed">
    <ul>
      <li class="is-active"><a id="overview-tab" data-target="#overview">Overview</a></li>
      <li><a id="stats-tab" data-target="#stats">Stats</a></li>
      <li><a id="preferences-tab" data-target="#preferences">Preferences</a></li>
      <li><a id="connections-tab" data-target="#connections">Connections</a></li>
    </ul>
  </div>
  <div class="tab-content mt-3">
    <div class="tab-pane" id="overview">
      <p class="has-text-grey">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 is-active" id="stats">
      <p class="has-text-grey">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="has-text-grey">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="has-text-grey">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="box is-shadowless is-fullheight my-4 ms-4 is-hidden-mobile is-25">
  <div class="is-fullheight has-background-dark rounded">
    <div class="d-flex align-items-center justify-content-center pt-3">
      <img src="https://dummyimage.com/722x402" alt="Dummy Image" class="image is-fluid">
    </div>
    <nav class="mt-3">
      <div>
        <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 has-text-primary is-uppercase has-background-light has-background-gradient" href="#">
          <span class="mr-3">
            <i class="bi bi-house"></i>
          </span>
          <span class="is-size-7 has-text-weight-normal">Home</span>
        </a>
        <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 has-text-grey is-uppercase transition-all is-hoverable" href="#">
          <span class="mr-3">
            <i class="bi bi-folder"></i>
          </span>
          <span class="is-size-7 has-text-weight-normal">Files</span>
        </a>
        <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 has-text-grey is-uppercase transition-all is-hoverable" href="#">
          <span class="mr-3">
            <i class="bi bi-list-task"></i>
          </span>
          <span class="is-size-7 has-text-weight-normal">Tasks</span>
        </a>
        <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 has-text-grey is-uppercase transition-all is-hoverable" href="#">
          <span class="mr-3">
            <i class="bi bi-calendar3"></i>
          </span>
          <span class="is-size-7 has-text-weight-normal">Schedule</span>
        </a>
        <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 has-text-grey is-uppercase transition-all is-hoverable" href="#">
          <span class="mr-3">
            <i class="bi bi-clock"></i>
          </span>
          <span class="is-size-7 has-text-weight-normal">Timing</span>
        </a>
        <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 has-text-grey is-uppercase transition-all is-hoverable" href="#">
          <span class="mr-3">
            <i class="bi bi-file-earmark"></i>
          </span>
          <span class="is-size-7 has-text-weight-normal">Documents</span>
        </a>
        <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 has-text-grey is-uppercase transition-all is-hoverable" href="#">
          <span class="mr-3">
            <i class="bi bi-gear"></i>
          </span>
          <span class="is-size-7 has-text-weight-normal">Options</span>
        </a>
      </div>
    </nav>
  </div>
</div>

Our Achievements

50

Users

15

Subscribes

12

Downloads

20

Products

                      
                      
                      <section class="has-text-grey-light">
  <div class="container px-5 py-24">
    <div class="columns is-full mb-8">
      <div class="column is-12 mb-6">
        <h1 class="title is-2 has-text-dark mb-2">Our Achievements</h1>
        <div class="is-size-1 has-background-success has-height-1 is-rounded"></div>
      </div>
    </div>
    <div class="columns is-centered">
      <div class="column is-3 is-6-mobile mb-4">
        <div class="has-background-success has-border-radius p-4">
          <h2 class="title is-1 has-text-white">50</h2>
          <p class="has-text-white has-text-weight-bold">Users</p>
        </div>
      </div>
      <div class="column is-3 is-6-mobile mb-4">
        <div class="has-background-success has-border-radius p-4">
          <h2 class="title is-1 has-text-white">15</h2>
          <p class="has-text-white has-text-weight-bold">Subscribes</p>
        </div>
      </div>
      <div class="column is-3 is-6-mobile mb-4">
        <div class="has-background-success has-border-radius p-4">
          <h2 class="title is-1 has-text-white">12</h2>
          <p class="has-text-white has-text-weight-bold">Downloads</p>
        </div>
      </div>
      <div class="column is-3 is-6-mobile mb-4">
        <div class="has-background-success has-border-radius p-4">
          <h2 class="title is-1 has-text-white">20</h2>
          <p class="has-text-white has-text-weight-bold">Products</p>
        </div>
      </div>
    </div>
  </div>
</section>

通知

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

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

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

                      
                        
                      
                      <div class="is-flex is-flex-direction-column is-align-items-center has-background-light">
  <div class="container my-5">
    <div class="box has-shadowless has-border-0">
      <div class="box-content">
        <h5 class="title is-5 has-text-dark mb-4">通知</h5>
        <p class="has-text-grey-light mb-4">未読メッセージが3件あります。</p>
        <div class="is-flex is-align-items-center mb-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg mr-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="has-text-grey-light mb-4">デバイスに通知を送信します。</small>
          </div>
          <div class="switch ms-auto">
            <input class="switch-input" type="checkbox" id="notificationSwitch" checked>
          </div>
        </div>
        <ul class="list-style-none">
          <li class="is-flex is-align-items-start mb-3">
            <div class="is-rounded-full has-background-primary mr-3" style="width: 8px; height: 8px;"></div>
            <div>
              <p class="mb-0 has-text-weight-semibold">通話が確認されました。</p>
              <small class="has-text-grey-light">1時間前</small>
            </div>
          </li>
          <li class="is-flex is-align-items-start mb-3">
            <div class="is-rounded-full has-background-primary mr-3" style="width: 8px; height: 8px;"></div>
            <div>
              <p class="mb-0 has-text-weight-semibold">新しいメッセージがあります！</p>
              <small class="has-text-grey-light">1時間前</small>
            </div>
          </li>
          <li class="is-flex is-align-items-start">
            <div class="is-rounded-full has-background-primary mr-3" style="width: 8px; height: 8px;"></div>
            <div>
              <p class="mb-0 has-text-weight-semibold">サブスクリプションが間もなく期限切れです！</p>
              <small class="has-text-grey-light">2時間前</small>
            </div>
          </li>
        </ul>
        <button class="button is-primary is-fullwidth mt-4">
          すべて既読にする
        </button>
      </div>
    </div>
  </div>
</div>