Pure.css
Home Bluma Bootstrap Materialize Foundation

Card List


Card Text


Page


Form


Footer


Button


Component




...
Card 3

This card has a footer and a button for interaction.

Last updated 5 mins ago Details
...
Card 3

This card has a footer and a button for interaction.

Last updated 5 mins ago Details
...
Card 3

This card has a footer and a button for interaction.

Last updated 5 mins ago Details

              
              

              <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css">
  <title>Pure.css Cards</title>
  <style>
    .card {
      border: 1px solid #ddd;
      border-radius: 5px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .card img {
      width: 100%;
      height: auto;
    }
    .card-body {
      padding: 1rem;
    }
    .card-footer {
      padding: 0.5rem 1rem;
      border-top: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .btn {
      text-decoration: none;
      padding: 0.5rem 1rem;
      border: 1px solid #0078e7;
      border-radius: 3px;
      color: #0078e7;
    }
    .btn:hover {
      background-color: #0078e7;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3">
      <div class="card">
        <img src="https://dummyimage.com/700x400" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">This card has a footer and a button for interaction.</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 5 mins ago</small>
          <a href="#" class="btn">Details</a>
        </div>
      </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
      <div class="card">
        <img src="https://dummyimage.com/700x400" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">This card has a footer and a button for interaction.</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 5 mins ago</small>
          <a href="#" class="btn">Details</a>
        </div>
      </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-3">
      <div class="card">
        <img src="https://dummyimage.com/700x400" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card 3</h5>
          <p class="card-text">This card has a footer and a button for interaction.</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 5 mins ago</small>
          <a href="#" class="btn">Details</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>


        
          

...
Featured
Card 8

This card has a badge overlay on the image.


Read More Share
...
Featured
Card 8

This card has a badge overlay on the image.


Read More Share
...
Featured
Card 8

This card has a badge overlay on the image.


Read More Share

                                            
                              
                              <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css">
  <title>Pure.css with Overlay Badge</title>
  <style>
    .container {
      padding: 2rem 1rem;
    }
    .pure-g {
      gap: 1rem;
    }
    .card {
      border: 1px solid #ddd;
      border-radius: 5px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .card img {
      width: 100%;
      height: auto;
    }
    .card-body {
      padding: 1rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }
    .position-relative {
      position: relative;
    }
    .position-absolute {
      position: absolute;
    }
    .top-0 {
      top: 0;
    }
    .start-0 {
      left: 0;
    }
    .bg-dark {
      background-color: #000;
    }
    .bg-opacity-50 {
      opacity: 0.5;
    }
    .text-white {
      color: #fff;
    }
    .p-2 {
      padding: 0.5rem;
    }
    .btn {
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 3px;
      font-size: 0.875rem;
      text-align: center;
    }
    .btn-primary {
      background-color: #0078e7;
      color: #fff;
      border: 1px solid #0078e7;
    }
    .btn-primary:hover {
      background-color: #005bb5;
    }
    .btn-secondary {
      background-color: #6c757d;
      color: #fff;
      border: 1px solid #6c757d;
    }
    .btn-secondary:hover {
      background-color: #5a6268;
    }
    .ms-2 {
      margin-left: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <div class="position-relative">
            <img src="https://dummyimage.com/722x402" alt="Card Image">
            <div class="position-absolute top-0 start-0 bg-dark bg-opacity-50 text-white p-2">
              Featured
            </div>
          </div>
          <div class="card-body">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">This card has a badge overlay on the image.</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-primary">Read More</a>
              <a href="#" class="btn btn-secondary ms-2">Share</a>
            </div>
          </div>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <div class="position-relative">
            <img src="https://dummyimage.com/722x402" alt="Card Image">
            <div class="position-absolute top-0 start-0 bg-dark bg-opacity-50 text-white p-2">
              Featured
            </div>
          </div>
          <div class="card-body">
            <h5 class="card-title">Card 2</h5>
            <p class="card-text">This card has a badge overlay on the image.</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-primary">Read More</a>
              <a href="#" class="btn btn-secondary ms-2">Share</a>
            </div>
          </div>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <div class="position-relative">
            <img src="https://dummyimage.com/722x402" alt="Card Image">
            <div class="position-absolute top-0 start-0 bg-dark bg-opacity-50 text-white p-2">
              Featured
            </div>
          </div>
          <div class="card-body">
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">This card has a badge overlay on the image.</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-primary">Read More</a>
              <a href="#" class="btn btn-secondary ms-2">Share</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>


                        
                          

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.

...

                                  
                              

                              <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css">
  <title>Pure.css Cards</title>
  <style>
    .container {
      padding: 2rem 1rem;
    }
    .pure-g {
      gap: 1rem;
    }
    .card {
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f8f9fa;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .card-body {
      padding: 1rem;
      display: flex;
      align-items: center;
    }
    .card img {
      width: 120px;
      height: auto;
      border-radius: 5px;
      margin-left: 1rem;
    }
    .card-title {
      margin: 0;
      font-size: 1.25rem;
    }
    .card-text {
      margin: 0.5rem 0 0 0;
      font-size: 0.875rem;
      color: #6c757d;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <div class="card-body">
            <div>
              <h5 class="card-title">Card 1</h5>
              <p class="card-text">A card with a vertical alignment for image and text.</p>
            </div>
            <img src="https://dummyimage.com/722x402" alt="Image">
          </div>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <div class="card-body">
            <div>
              <h5 class="card-title">Card 2</h5>
              <p class="card-text">A card with a vertical alignment for image and text.</p>
            </div>
            <img src="https://dummyimage.com/722x402" alt="Image">
          </div>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <div class="card-body">
            <div>
              <h5 class="card-title">Card 3</h5>
              <p class="card-text">A card with a vertical alignment for image and text.</p>
            </div>
            <img src="https://dummyimage.com/722x402" alt="Image">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

        
                        
                          

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

                      
                      
                      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css">
  <title>Pure.css Cards with List Group</title>
  <style>
    .container {
      padding: 2rem 1rem;
    }
    .pure-g {
      gap: 1rem;
    }
    .card {
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .card-body {
      padding: 1rem;
    }
    .card-title {
      margin: 0;
      font-size: 1.25rem;
    }
    .card-text {
      margin: 0.5rem 0;
      font-size: 0.875rem;
      color: #6c757d;
    }
    .list-group {
      list-style: none;
      margin: 0;
      padding: 0;
      border-top: 1px solid #ddd;
    }
    .list-group-item {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid #ddd;
      font-size: 0.875rem;
    }
    .list-group-item:last-child {
      border-bottom: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">A card with a list group to show details.</p>
            <ul class="list-group">
              <li class="list-group-item">Item 1</li>
              <li class="list-group-item">Item 2</li>
              <li class="list-group-item">Item 3</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card 2</h5>
            <p class="card-text">A card with a list group to show details.</p>
            <ul class="list-group">
              <li class="list-group-item">Item 1</li>
              <li class="list-group-item">Item 2</li>
              <li class="list-group-item">Item 3</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">A card with a list group to show details.</p>
            <ul class="list-group">
              <li class="list-group-item">Item 1</li>
              <li class="list-group-item">Item 2</li>
              <li class="list-group-item">Item 3</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>


       
                
                  

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

                      
                      
                      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css">
  <title>Pure.css Cards with Badges</title>
  <style>
    .container {
      padding: 2rem 1rem;
    }
    .pure-g {
      gap: 1rem;
    }
    .card {
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #fff;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .card-title {
      font-size: 1.25rem;
      margin: 0 0 0.5rem;
    }
    .card-text {
      font-size: 0.875rem;
      margin: 0 0 1rem;
      color: #6c757d;
    }
    .badge {
      background-color: #dc3545;
      color: #fff;
      font-size: 0.75rem;
      padding: 0.2rem 0.5rem;
      border-radius: 5px;
      margin-left: 0.5rem;
    }
    .list-group {
      list-style: none;
      margin: 0;
      padding: 0;
      border-top: 1px solid #ddd;
    }
    .list-group-item {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid #ddd;
      font-size: 0.875rem;
    }
    .list-group-item:last-child {
      border-bottom: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">This card includes a badge for notifications.</p>
          <h6>Notifications <span class="badge">5</span></h6>
          <ul class="list-group">
            <li class="list-group-item">New Comment</li>
            <li class="list-group-item">Friend Request</li>
            <li class="list-group-item">System Update</li>
          </ul>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">This card includes a badge for notifications.</p>
          <h6>Notifications <span class="badge">5</span></h6>
          <ul class="list-group">
            <li class="list-group-item">New Comment</li>
            <li class="list-group-item">Friend Request</li>
            <li class="list-group-item">System Update</li>
          </ul>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <h5 class="card-title">Card 3</h5>
          <p class="card-text">This card includes a badge for notifications.</p>
          <h6>Notifications <span class="badge">5</span></h6>
          <ul class="list-group">
            <li class="list-group-item">New Comment</li>
            <li class="list-group-item">Friend Request</li>
            <li class="list-group-item">System Update</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>



                     
                  

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.

                      
                      

                      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css">
  <title>Pure.css Dark-Themed Cards with Accordion</title>
  <style>
    .container {
      padding: 2rem 1rem;
    }
    .pure-g {
      gap: 1rem;
    }
    .card {
      background-color: #343a40;
      color: #fff;
      border: 1px solid #454d55;
      border-radius: 5px;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .card-title {
      font-size: 1.25rem;
      margin: 0 0 0.5rem;
    }
    .card-text {
      font-size: 0.875rem;
      margin: 0 0 1rem;
      color: #adb5bd;
    }
    .accordion {
      border-top: 1px solid #454d55;
    }
    .accordion-item {
      border-bottom: 1px solid #454d55;
    }
    .accordion-header {
      margin: 0;
    }
    .accordion-button {
      background-color: transparent;
      border: none;
      color: #fff;
      text-align: left;
      padding: 0.75rem 1rem;
      width: 100%;
      cursor: pointer;
      font-size: 1rem;
    }
    .accordion-button:focus {
      outline: none;
    }
    .accordion-button:hover {
      background-color: #495057;
    }
    .accordion-collapse {
      padding: 0.75rem 1rem;
      background-color: #495057;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="card">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">A dark-themed card with an accordion.</p>
          <div class="accordion">
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button" onclick="toggleAccordion(this)">
                  Accordion Item #1
                </button>
              </h2>
              <div class="accordion-collapse">
                <p>This is the first item's accordion body.</p>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button class="accordion-button" onclick="toggleAccordion(this)">
                  Accordion Item #2
                </button>
              </h2>
              <div class="accordion-collapse" style="display: none;">
                <p>This is the second item's accordion body.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Repeat the above block for additional cards -->
    </div>
  </div>
  <script>
    function toggleAccordion(button) {
      const content = button.parentElement.nextElementSibling;
      const isOpen = content.style.display === "block";
      document.querySelectorAll('.accordion-collapse').forEach(collapse => collapse.style.display = 'none');
      if (!isOpen) {
        content.style.display = "block";
      }
    }
  </script>
</body>
</html>


                     
                  

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="pure-g">
  <div class="pure-u-1 pure-u-md-1-3">
    <div class="pure-u-1-1 card">
      <div class="card-body">
        <h5 class="card-title">Card 7</h5>
        <p class="card-text">This card uses a table to organize information.</p>
        <table class="pure-table pure-table-bordered">
          <thead>
            <tr>
              <th>Feature</th>
              <th>Details</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Speed</td>
              <td>Fast</td>
            </tr>
            <tr>
              <td>Reliability</td>
              <td>High</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  
  <div class="pure-u-1 pure-u-md-1-3">
    <div class="pure-u-1-1 card">
      <div class="card-body">
        <h5 class="card-title">Card 7</h5>
        <p class="card-text">This card uses a table to organize information.</p>
        <table class="pure-table pure-table-bordered">
          <thead>
            <tr>
              <th>Feature</th>
              <th>Details</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Speed</td>
              <td>Fast</td>
            </tr>
            <tr>
              <td>Reliability</td>
              <td>High</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="pure-u-1 pure-u-md-1-3">
    <div class="pure-u-1-1 card">
      <div class="card-body">
        <h5 class="card-title">Card 7</h5>
        <p class="card-text">This card uses a table to organize information.</p>
        <table class="pure-table pure-table-bordered">
          <thead>
            <tr>
              <th>Feature</th>
              <th>Details</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Speed</td>
              <td>Fast</td>
            </tr>
            <tr>
              <td>Reliability</td>
              <td>High</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>



                     
                  

Card Header
Card 8

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

Footer Text
Card Header
Card 8

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

Footer Text
Card Header
Card 8

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

Footer Text

                      
                      
                      <div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-3">
    <div class="pure-card">
      <div class="pure-card-header pure-bg-primary pure-text-center">
        Card Header
      </div>
      <div class="pure-card-body">
        <h5 class="pure-card-title">Card 8</h5>
        <p class="pure-card-text">This card uses a header and footer to frame its content.</p>
      </div>
      <div class="pure-card-footer pure-text-muted pure-text-center">
        Footer Text
      </div>
    </div>
  </div>
  
  <div class="pure-u-1 pure-u-md-1-3">
    <div class="pure-card">
      <div class="pure-card-header pure-bg-primary pure-text-center">
        Card Header
      </div>
      <div class="pure-card-body">
        <h5 class="pure-card-title">Card 8</h5>
        <p class="pure-card-text">This card uses a header and footer to frame its content.</p>
      </div>
      <div class="pure-card-footer pure-text-muted pure-text-center">
        Footer Text
      </div>
    </div>
  </div>
  
  <div class="pure-u-1 pure-u-md-1-3">
    <div class="pure-card">
      <div class="pure-card-header pure-bg-primary pure-text-center">
        Card Header
      </div>
      <div class="pure-card-body">
        <h5 class="pure-card-title">Card 8</h5>
        <p class="pure-card-text">This card uses a header and footer to frame its content.</p>
      </div>
      <div class="pure-card-footer pure-text-muted pure-text-center">
        Footer Text
      </div>
    </div>
  </div>
</div>



                     
                  

Our Team

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

team member
John Doe

UI Developer

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

team member
Jane Smith

Graphic Designer

Crafting stunning visual designs that inspire and captivate audiences worldwide.

team member
Emily Brown

Software Engineer

Developing robust and scalable solutions to power innovative technologies.


                      
                      
                      <section class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 bg-light py-5">
  <div class="pure-g container">
    <div class="pure-u-1 pure-text-center mb-5">
      <h1 class="pure-text-primary pure-font-bold">Our Team</h1>
      <p class="pure-text-muted">Discover the amazing individuals behind our success, working together to make a difference.</p>
    </div>
    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-g">
          <div class="pure-u-1">
            <img src="https://dummyimage.com/200x200" alt="team member" class="pure-img-rounded" width="100" height="100">
            <div>
              <h5 class="pure-text-dark">John Doe</h5>
              <p class="pure-text-muted mb-1">UI Developer</p>
              <p class="pure-text-muted small">Creating seamless user experiences and innovative interfaces with a touch of creativity.</p>
              <div class="pure-u-1">
                <a href="#" class="pure-text-muted">Facebook</a>
                <a href="#" class="pure-text-muted">Twitter</a>
                <a href="#" class="pure-text-muted">LinkedIn</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-g">
          <div class="pure-u-1">
            <img src="https://dummyimage.com/201x201" alt="team member" class="pure-img-rounded" width="100" height="100">
            <div>
              <h5 class="pure-text-dark">Jane Smith</h5>
              <p class="pure-text-muted mb-1">Graphic Designer</p>
              <p class="pure-text-muted small">Crafting stunning visual designs that inspire and captivate audiences worldwide.</p>
              <div class="pure-u-1">
                <a href="#" class="pure-text-muted">Facebook</a>
                <a href="#" class="pure-text-muted">Twitter</a>
                <a href="#" class="pure-text-muted">LinkedIn</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <div class="pure-g">
          <div class="pure-u-1">
            <img src="https://dummyimage.com/204x204" alt="team member" class="pure-img-rounded" width="100" height="100">
            <div>
              <h5 class="pure-text-dark">Emily Brown</h5>
              <p class="pure-text-muted mb-1">Software Engineer</p>
              <p class="pure-text-muted small">Developing robust and scalable solutions to power innovative technologies.</p>
              <div class="pure-u-1">
                <a href="#" class="pure-text-muted">Facebook</a>
                <a href="#" class="pure-text-muted">Twitter</a>
                <a href="#" class="pure-text-muted">LinkedIn</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.

Image

                      
                      
                      <div class="pure-u-1 pure-u-md-1">
  <div class="pure-g pure-u-1">
    <div class="pure-u-1 pure-u-md-1-2">
      <h2 class="pure-font-size-xxl pure-mb-4">NOBALISH</h2>
      <p>We provide the best services for your business growth. Let us help you reach new heights.</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-2">
      <img src="https://dummyimage.com/722x402" class="pure-img-responsive" alt="Image">
    </div>
  </div>
</div>



                     
                  

Innovative Solutions

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

Trusted by top companies
Image

                      
                      
                      <div class="pure-g" style="width: 100%; background-color: #f8f9fa; padding: 40px 0;">
  <div class="pure-u-1 pure-u-md-1-2">
    <h3 class="pure-display-3" style="color: #007bff; margin-bottom: 32px;">Innovative Solutions</h3>
    <p style="margin-bottom: 32px;">Discover cutting-edge solutions for your business challenges. Let us help you stay ahead in a competitive world.</p>
    <div class="pure-g">
      <div class="pure-u-1">
        <span style="color: green; font-size: 16px;">&#10003; Trusted by top companies</span>
      </div>
    </div>
  </div>
  <div class="pure-u-1 pure-u-md-1-2">
    <img src="https://dummyimage.com/722x402" class="pure-img" alt="Image" style="width: 100%;">
  </div>
</div>



                     
                  

Discover cutting-edge solutions .

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

hero

                      
                      

                      <section style="padding: 40px 0;">
  <div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 text-center text-md-left" style="margin-bottom: 32px;">
      <h1 class="pure-display-3" style="color: #343a40; margin-bottom: 32px;">Discover cutting-edge solutions.</h1>
      <p class="pure-lead" style="color: #6c757d; margin-bottom: 32px;">Discover cutting-edge solutions for your business challenges. Let us help you stay ahead in a competitive world.</p>
      <button class="pure-button pure-button-primary" style="font-size: 16px; padding: 12px 24px;">Button</button>
      <button class="pure-button" style="font-size: 16px; padding: 12px 24px; border: 2px solid #6c757d; margin-left: 12px;">Button</button>
    </div>
    <div class="pure-u-1 pure-u-md-1-2">
      <img class="pure-img" alt="hero" src="https://dummyimage.com/720x600" style="width: 100%; border-radius: 8px;">
    </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
hero

                      
                      
                      <section class="py-5">
  <div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2">
      <div class="py-5">
        <div class="text-center mb-5">
          <h1 class="display-4 fw-bold text-primary mb-4">Modern Features Showcase</h1>
          <p class="lead text-muted">Explore a range of cutting-edge features designed to elevate your experience.</p>
        </div>
        <div class="pure-g">
          <div class="pure-u-1 pure-u-md-1-2">
            <div class="pure-g">
              <div class="pure-u-1-3">
                <div class="pure-u-1-3">
                  <i class="bi bi-check-circle-fill text-primary fs-4 me-3"></i>
                </div>
              </div>
              <span class="fw-medium">Innovative Design</span>
            </div>
          </div>
          <div class="pure-u-1 pure-u-md-1-2">
            <div class="pure-g">
              <div class="pure-u-1-3">
                <div class="pure-u-1-3">
                  <i class="bi bi-check-circle-fill text-primary fs-4 me-3"></i>
                </div>
              </div>
              <span class="fw-medium">Seamless Integration</span>
            </div>
          </div>
        </div>
      </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

statistic image

                      
                      
                      <section class="text-muted">
  <div class="pure-g py-5">
    <div class="pure-u-1 pure-u-lg-1-2 pure-u-md-3-5 mb-3 mb-lg-0">
      <div class="w-100 mb-4">
        <h1 class="h3 mb-2 text-dark">Innovative Tech Solutions</h1>
        <p class="lead">Providing cutting-edge solutions to everyday challenges through technology and design.</p>
      </div>

      <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4 mb-4">
        <h2 class="h4 text-dark">100</h2>
        <p>text 1</p>
      </div>
      <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4 mb-4">
        <h2 class="h4 text-dark">200</h2>
        <p>text 2</p>
      </div>
      <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4 mb-4">
        <h2 class="h4 text-dark">300</h2>
        <p>text 3</p>
      </div>
      <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4 mb-4">
        <h2 class="h4 text-dark">400</h2>
        <p>text 4</p>
      </div>
      <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4 mb-4">
        <h2 class="h4 text-dark">500</h2>
        <p>text 5</p>
      </div>
      <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4 mb-4">
        <h2 class="h4 text-dark">600</h2>
        <p>text 6</p>
      </div>
      <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4 mb-4">
        <h2 class="h4 text-dark">700</h2>
        <p>text 7</p>
      </div>
      <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4 mb-4">
        <h2 class="h4 text-dark">800</h2>
        <p>text 8</p>
      </div>
    </div>
    <div class="pure-u-1 pure-u-lg-1-2 pure-u-md-2-5 rounded-lg overflow-hidden mt-4 mt-lg-0">
      <img class="img-fluid w-100 h-auto" src="https://dummyimage.com/600x300" alt="statistic image">
    </div>
  </div>
</section>



                     
                  

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

                      
                      

                      <div class="pure-u-1 pure-u-md-1-2 pure-g" style="background-image: url('https://picsum.photos/id/1018/1000'); background-size: cover; background-position: center;">
  <div class="pure-u-1">
    <div class="pure-u-1-2 pure-u-lg-1-3" style="background-color: rgba(255, 255, 255, 0.7); padding: 20px; border-radius: 8px;">
      <div class="pure-u-1 pure-text-center">
        <div class="mb-4">
          <img src="https://dummyimage.com/722x402" class="pure-img-responsive" style="max-height: 100px; width: auto;" alt="Image">
        </div>
        <div>
          <div class="pure-u-1">
            <ul class="pure-list">
              <li class="pure-u-1 pure-u-md-1-2 mb-3">
                <span class="pure-u-1">
                  <i class="bi bi-check-circle-fill" style="color: #007bff;"></i>
                  Create and customize your design system
                </span>
              </li>
              <li class="pure-u-1 pure-u-md-1-2 mb-3">
                <span class="pure-u-1">
                  <i class="bi bi-check-circle-fill" style="color: #007bff;"></i>
                  Leverage utilities for rapid development
                </span>
              </li>
              <li class="pure-u-1 pure-u-md-1-2 mb-3">
                <span class="pure-u-1">
                  <i class="bi bi-check-circle-fill" style="color: #007bff;"></i>
                  From beginner to production-ready skills
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


                     
                  

Placeholder Logo
Need innovative design frameworks?

Discover unique tools →

Searching for cutting-edge platforms?

Explore advanced systems →

Looking for a quick-start guide?

Find comprehensive insights →

Want to elevate your expertise?

Access professional resources →

Return to Next-Gen Solutions

                      
                      
                      <div class="pure-g" style="background: linear-gradient(to bottom right, #e0f7fa, #80deea, #26c6da); padding: 20px 0;">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 mx-auto" style="background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
    
    <div class="pure-u-1 pure-text-center mb-4">
      <img src="https://dummyimage.com/722x402" class="pure-img-responsive mb-3" alt="Placeholder Logo" />
    </div>

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

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

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

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

    <a href="/new-path/home" class="pure-button pure-button-primary w-100">
      Return to Next-Gen Solutions
    </a>

  </div>
</div>



                     
                  

Event Starting Soon

Join us for an exciting Saturday!

Start Time: 9:00 AM

02
Day
09
Hour
00
Min
00
Second

                      
                      
                      <section class="pure-u-1 pure-u-md-1-2" style="background: linear-gradient(to bottom right, #4c6ef5, #5562f6); padding: 4rem 0;">
  <div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 text-center pure-u-md-text-left" style="color: white;">
      <h6 class="pure-u-1 pure-u-md-1-2" style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: #e0e0e0;">Event Starting Soon</h6>
      <h3 class="pure-u-1 pure-u-md-1-2" style="font-size: 2rem; font-weight: bold; margin-top: 1rem;">Join us for an exciting Saturday!</h3>
      <h3 class="pure-u-1 pure-u-md-1-2" style="font-size: 1.25rem; font-weight: bold; margin-top: 1rem;">Start Time: 9:00 AM</h3>
    </div>

    <div class="pure-u-1 pure-u-md-1-2" style="display: flex; justify-content: center; align-items: center;">
      <div class="pure-u-1 pure-u-md-1-4" style="margin: 0 1rem; text-align: center; padding: 1rem; border-radius: 0.375rem; background-color: #ffffff;">
        <div style="font-size: 2rem; font-weight: bold;">02</div>
        <div style="margin-top: 0.75rem; font-size: 0.75rem; text-transform: uppercase; opacity: 0.75;">Day</div>
      </div>

      <div class="pure-u-1 pure-u-md-1-4" style="margin: 0 1rem; text-align: center; padding: 1rem; border-radius: 0.375rem; background-color: #ffffff;">
        <div style="font-size: 2rem; font-weight: bold;">09</div>
        <div style="margin-top: 0.75rem; font-size: 0.75rem; text-transform: uppercase; opacity: 0.75;">Hour</div>
      </div>

      <div class="pure-u-1 pure-u-md-1-4" style="margin: 0 1rem; text-align: center; padding: 1rem; border-radius: 0.375rem; background-color: #ffffff;">
        <div style="font-size: 2rem; font-weight: bold;">00</div>
        <div style="margin-top: 0.75rem; font-size: 0.75rem; text-transform: uppercase; opacity: 0.75;">Min</div>
      </div>

      <div class="pure-u-1 pure-u-md-1-4" style="margin: 0 1rem; text-align: center; padding: 1rem; border-radius: 0.375rem; background-color: #ffffff;">
        <div style="font-size: 2rem; font-weight: bold;">00</div>
        <div style="margin-top: 0.75rem; font-size: 0.75rem; text-transform: uppercase; opacity: 0.75;">Second</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="pure-g m-4 p-2">
  <div class="pure-u-1 pure-u-md-1-2 p-2 p-md-6 bg-light rounded shadow">
    <h4 class="h4">Feedback Overview</h4>
    <div class="pure-u-1 pure-u-md-1-1 m-2 mt-5">
      <div class="pure-u-1">
        <span class="bg-success d-inline-block" style="width: 12px; height: 12px; margin-right: 8px; border-radius: 50%;"></span>
        Extremely Happy
      </div>
    </div>
    <div class="mt-5">
      <div class="pure-g">
        <div class="pure-u-1 pure-u-md-1-3 p-3">
          Many people felt very positive about the service, with a majority expressing satisfaction.
        </div>
        <div class="pure-u-1 pure-u-md-2-3" style="min-height: 60px;">
          <div class="bg-success text-white text-center p-3" style="width: 80%; border-radius: 5px;">
            80%
          </div>
        </div>
      </div>
      <div class="pure-g mt-4">
        <div class="pure-u-1 pure-u-md-1-3 p-3">
          Some users were less satisfied with certain aspects of the product, especially regarding usability.
        </div>
        <div class="pure-u-1 pure-u-md-2-3" style="min-height: 60px;">
          <div class="bg-success text-white text-center p-3" style="width: 60%; border-radius: 5px;">
            60%
          </div>
        </div>
      </div>
      <div class="pure-g mt-4">
        <div class="pure-u-1 pure-u-md-1-3 p-3">
          There were a few complaints about delivery times and product quality, but these were in the minority.
        </div>
        <div class="pure-u-1 pure-u-md-2-3" style="min-height: 60px;">
          <div class="bg-success text-white text-center p-3" style="width: 40%; border-radius: 5px;">
            40%
          </div>
        </div>
      </div>
    </div>
    <p class="pure-u-1 small text-muted my-5 px-3">
      Our team is reviewing all the feedback to identify key areas for improvement. We appreciate all the insights provided and will work towards making necessary enhancements. Thank you for your input!
    </p>
  </div>
</section>



                     
                  

Recent Announcements

  1. Updated Interface Design 05 / 10 / 2023

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

  2. 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.

  3. Top Companies Hiring 30 / 09 / 2023

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


                      
                      

                      <h3 class="h3 text-dark mb-12">Recent Announcements</h3>
<ol class="pure-list">
  <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
    <div class="pure-g">
      <div class="pure-u-1-4">
        <div class="circle bg-primary"></div>
      </div>
      <div class="pure-u-3-4">
        <div class="announcement-box">
          <div class="announcement-header">
            <a href="#" class="text-primary">Updated Interface Design</a>
            <span class="text-primary">05 / 10 / 2023</span>
          </div>
          <p class="text-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
          <button class="pure-button pure-button-primary">Learn More</button>
          <button class="pure-button pure-button-outline">Try Demo</button>
        </div>
      </div>
    </div>
  </li>
  <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
    <div class="pure-g">
      <div class="pure-u-1-4">
        <div class="circle bg-success"></div>
      </div>
      <div class="pure-u-3-4">
        <div class="announcement-box">
          <div class="announcement-header">
            <a href="#" class="text-primary">5,000 New Job Listings</a>
            <span class="text-primary">10 / 12 / 2023</span>
          </div>
          <p class="text-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
          <button class="pure-button pure-button-primary">Explore More</button>
          <button class="pure-button pure-button-outline">View Demo</button>
        </div>
      </div>
    </div>
  </li>
  <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
    <div class="pure-g">
      <div class="pure-u-1-4">
        <div class="circle bg-info"></div>
      </div>
      <div class="pure-u-3-4">
        <div class="announcement-box">
          <div class="announcement-header">
            <a href="#" class="text-primary">Top Companies Hiring</a>
            <span class="text-primary">30 / 09 / 2023</span>
          </div>
          <p class="text-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
          <button class="pure-button pure-button-primary">Learn More</button>
          <button class="pure-button pure-button-outline">See Demo</button>
        </div>
      </div>
    </div>
  </li>
</ol>

<style>
  .circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bg-primary { background-color: #007bff; }
  .bg-success { background-color: #28a745; }
  .bg-info { background-color: #17a2b8; }
  
  .announcement-box {
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .announcement-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .text-primary {
    color: #007bff;
  }

  .pure-button {
    margin-top: 8px;
  }

  .pure-button-primary {
    background-color: #007bff;
    color: white;
  }

  .pure-button-outline {
    border: 1px solid #007bff;
    color: #007bff;
  }

  .pure-button-outline:hover {
    background-color: #007bff;
    color: white;
  }
</style>


                     
                  

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="pure-g">
  <section class="pure-u-1 pure-u-md-3-4">
    <div class="pure-u-1">
      <div class="text-center">
        <h3 class="text-dark text-xl">We have solutions</h3>
        <h1 class="text-dark text-3xl font-bold my-4">Something Asked Questions</h1>
        <p class="text-muted my-4 text-lg">See what others often inquire about!</p>
      </div>
    </div>

    <div class="pure-u-1 pure-u-lg-2-3">
      <h5 class="mt-4 mb-2 font-semibold text-dark">What is Bootstrap?</h5>
      <p class="text-muted mb-4">Bootstrap is a popular front-end framework that helps developers create beautiful, responsive websites quickly. It's filled with pre-styled components and tools to ease the web design process.</p>
      <hr class="pure-u-1">

      <h5 class="mt-4 mb-2 font-semibold text-dark">Can Bootstrap be used with React?</h5>
      <p class="text-muted mb-4">Absolutely! Bootstrap can be easily integrated with React to enhance the UI with responsive design elements and ready-to-use components.</p>
      <hr class="pure-u-1">

      <h5 class="mt-4 mb-2 font-semibold text-dark">What makes Bootstrap so popular?</h5>
      <p class="text-muted mb-4">Bootstrap's popularity is due to its easy-to-use grid system, reusable components, and extensive documentation. It helps developers quickly build well-structured and responsive websites.</p>
    </div>

    <div class="pure-u-1">
      <div class="text-center text-muted small mt-5">
        Made with <a href="/" target="_blank" class="font-semibold">Bootstrap</a> by <a href="#" class="font-semibold" target="_blank">Bootstrap Team</a>.
      </div>
    </div>
  </section>
</div>

<style>
  /* Text styles for headings and paragraphs */
  .font-semibold {
    font-weight: 600;
  }

  .text-dark {
    color: #343a40;
  }

  .text-muted {
    color: #6c757d;
  }

  /* Adjustments for spacing */
  .my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .mb-5 {
    margin-bottom: 3rem;
  }

  /* Small font for footer */
  .small {
    font-size: 0.875rem;
  }
</style>


                     
                  

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="pure-u-1 pure-u-md-1-2">
    <div class="pure-u-1 pure-u-md-1-2">
        <div class="pure-u-1 pure-u-md-1-2">
            <a href="#" class="pure-link text-danger font-weight-bold text-uppercase">NEW TOPIC</a>
        </div>
        <div class="pure-u-1 pure-u-md-1-2 text-dark font-weight-bold">
            New Developments in the Tech World
        </div>

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

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

        <div class="pure-u-1 pure-u-md-1-2 mt-8">
            <p class="pure-u-1">The tech industry has seen remarkable growth this year, with major advancements in artificial intelligence, cloud computing, and quantum technology.</p>
            <p class="pure-u-1">Companies across the globe are investing heavily in these technologies, driving innovation and competition. Major players like Apple, Google, and Microsoft have unveiled new products aimed at revolutionizing how we work, communicate, and live.</p>
            <p class="pure-u-1">AI applications are now widely used in healthcare, finance, and customer service. These developments promise to improve efficiency and productivity while also raising concerns about data privacy and job displacement.</p>
            <p class="pure-u-1">Cloud services continue to expand, with many companies opting for hybrid and multi-cloud strategies to meet their needs. The shift towards remote work has accelerated the demand for scalable and secure cloud solutions.</p>
        </div>
    </div>
</div>



                     
                  

What we do at our company:

  • 01.
    Investigation

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

  • 02.
    Planning

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

  • 03.
    Creative

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

  • 04.
    Building

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

  • 05.
    Launching

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

  • 06.
    Launching

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


                      
                      
                      <div class="pure-u-1 pure-u-md-1-1">
    <h1 class="pure-u-1 text-center font-weight-bold text-primary">What we do at our company:</h1>
    <ul class="pure-g pure-u-1">
        <li class="pure-u-1 pure-u-md-1-2">
            <div class="pure-u-1 pure-u-md-1-12 text-info">01.</div>
            <div>
                <div class="pure-u-1 font-weight-bold text-dark">Investigation</div>
                <p class="max-w-xs py-2 text-muted">We analyze data and insights, and take the time to understand your business goals. We ask the right questions to learn about your objectives.</p>
            </div>
        </li>
        <li class="pure-u-1 pure-u-md-1-2">
            <div class="pure-u-1 pure-u-md-1-12 text-info">02.</div>
            <div>
                <div class="pure-u-1 font-weight-bold text-dark">Planning</div>
                <p class="max-w-xs py-2 text-muted">We develop strategies based on thorough research and strong planning to help you achieve success with data-driven decisions.</p>
            </div>
        </li>
        <li class="pure-u-1 pure-u-md-1-2">
            <div class="pure-u-1 pure-u-md-1-12 text-info">03.</div>
            <div>
                <div class="pure-u-1 font-weight-bold text-dark">Creative</div>
                <p class="max-w-xs py-2 text-muted">We design intuitive and user-friendly interfaces that look great and are easy to maintain, perfectly suited for your business needs.</p>
            </div>
        </li>
        <li class="pure-u-1 pure-u-md-1-2">
            <div class="pure-u-1 pure-u-md-1-12 text-info">04.</div>
            <div>
                <div class="pure-u-1 font-weight-bold text-dark">Building</div>
                <p class="max-w-xs py-2 text-muted">Our development process focuses on building solutions that not only work, but provide an excellent user experience and are simple to manage.</p>
            </div>
        </li>
        <li class="pure-u-1 pure-u-md-1-2">
            <div class="pure-u-1 pure-u-md-1-12 text-info">05.</div>
            <div>
                <div class="pure-u-1 font-weight-bold text-dark">Launching</div>
                <p class="max-w-xs py-2 text-muted">We make sure everything is ready to go, providing smooth deployments that ensure your product reaches the right audience effectively.</p>
            </div>
        </li>
        <li class="pure-u-1 pure-u-md-1-2">
            <div class="pure-u-1 pure-u-md-1-12 text-info">06.</div>
            <div>
                <div class="pure-u-1 font-weight-bold text-dark">Launching</div>
                <p class="max-w-xs py-2 text-muted">We make sure everything is ready to go, providing smooth deployments that ensure your product reaches the right audience effectively.</p>
            </div>
        </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="pure-g">
  <div class="pure-u-1 pure-u-md-1-4">
    <h1 class="pure-text-center">Pricing Plans</h1>
    <h3 class="pure-text-center">Choose the best plan for our service. Each plan has different features and benefits.</h3>
    <p class="pure-text-center">*Prices are monthly</p>
  </div>
  <div class="pure-u-1 pure-u-md-3-4">
    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-3">
        <div class="pricing-box">
          <h2 class="pure-text-center">Basic Plan</h2>
          <h3 class="pure-text-center">¥500<span class="pricing-month">/month</span></h3>
          <ul class="pricing-list">
            <li>Basic Features</li>
            <li>Support Included</li>
          </ul>
          <button class="pure-button pure-button-primary">Buy Now</button>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-3">
        <div class="pricing-box pricing-featured">
          <h2 class="pure-text-center">Team Plan</h2>
          <h3 class="pure-text-center">¥1500<span class="pricing-month">/month</span></h3>
          <ul class="pricing-list">
            <li>Team Features</li>
            <li>24/7 Support</li>
            <li>Multiple Account Management</li>
          </ul>
          <button class="pure-button pure-button-primary">Buy Now</button>
        </div>
      </div>
      <div class="pure-u-1 pure-u-md-1-3 pure-u-lg-1-3">
        <div class="pricing-box">
          <h2 class="pure-text-center">Pro Plan</h2>
          <h3 class="pure-text-center">¥3500<span class="pricing-month">/month</span></h3>
          <ul class="pricing-list">
            <li>Advanced Features</li>
            <li>Dedicated Support</li>
            <li>Priority Access</li>
            <li>Additional Benefits</li>
          </ul>
          <button class="pure-button pure-button-primary">Buy Now</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .pricing-box {
    background-color: white;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

  .pricing-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .pricing-list li {
    margin-bottom: 8px;
  }

  .pricing-month {
    font-size: 0.75rem;
    color: gray;
  }

  .pure-button-primary {
    background-color: #4CAF50;
    border: none;
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s;
  }

  .pure-button-primary:hover {
    background-color: #45a049;
  }

  .pricing-featured {
    border: 2px solid #4CAF50;
  }
</style>



                     
                  

Nobalish
Dashboard News Plans Contact
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="pure-g bg-white pb-12">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-1 pure-u-xl-1-1 pure-g">
    <div class="pure-u-1 pure-u-md-1-1 pure-u-lg-1-1 pure-g">
      <a href="/" class="pure-button pure-button-xlarge text-2xl font-weight-bold text-dark">
        Nobalish
      </a>
      <nav class="pure-u-1 pure-u-lg-1-1">
        <a href="#" class="pure-button pure-button-sm text-lg font-weight-semibold text-muted">Dashboard</a>
        <a href="#" class="pure-button pure-button-sm text-lg font-weight-semibold text-indigo-500">
          News
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-dark" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M7 7l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
        <a href="#" class="pure-button pure-button-sm text-lg font-weight-semibold text-muted">Plans</a>
        <a href="#" class="pure-button pure-button-sm text-lg font-weight-semibold text-muted">Contact</a>
      </nav>
      <div class="pure-u-1 pure-u-sm-1-1">
        <a href="#" class="pure-button pure-button-sm pure-button-primary">Join Now</a>
      </div>
      <button type="button" class="pure-button pure-button-sm">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
        </svg>
        Menu
      </button>
    </div>
    <div class="pure-g bg-light border rounded-lg shadow-sm">
      <div class="pure-u-1 pure-u-lg-2-3">
        <a href="#" class="pure-g group">
          <div class="pure-u-1 pure-u-lg-1-12 bg-indigo-500 text-white shadow-lg group-hover:bg-indigo-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2v20m10-10H2" />
            </svg>
          </div>
          <div class="pure-u-1 pure-u-lg-11-12">
            <div class="font-weight-semibold mb-1">Innovative Design</div>
            <p class="text-sm text-muted">Explore a range of cutting-edge features designed to elevate your experience.</p>
          </div>
        </a>
        <a href="#" class="pure-g group">
          <div class="pure-u-1 pure-u-lg-1-12 bg-indigo-500 text-white shadow-lg group-hover:bg-indigo-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
          </div>
          <div class="pure-u-1 pure-u-lg-11-12">
            <div class="font-weight-semibold mb-1">Solutions</div>
            <p class="text-sm text-muted">Providing cutting-edge solutions to everyday challenges through technology and design.</p>
          </div>
        </a>
        <a href="#" class="pure-g group">
          <div class="pure-u-1 pure-u-lg-1-12 bg-indigo-500 text-white shadow-lg group-hover:bg-indigo-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
            </svg>
          </div>
          <div class="pure-u-1 pure-u-lg-11-12">
            <div class="font-weight-semibold mb-1">Innovative Tech</div>
            <p class="text-sm text-muted">Discover the amazing individuals behind our success, working together to make a difference.</p>
          </div>
        </a>
        <a href="#" class="pure-g group">
          <div class="pure-u-1 pure-u-lg-1-12 bg-indigo-500 text-white shadow-lg group-hover:bg-indigo-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path d="M12 3V7H8V3H12zM3 7H7V3H3V7zM7 17H3V13H7V17zM13 7H17V3H13V7zM17 13H13V17H17V13z" />
            </svg>
          </div>
          <div class="pure-u-1 pure-u-lg-11-12">
            <div class="font-weight-semibold mb-1">Create Account</div>
            <p class="text-sm text-muted">Fill in the details below to create your account.</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  .group:hover .group-hover {
    background-color: #4c6ef5;
  }
  .group-active .group-active {
    background-color: #3867d6;
  }
</style>



                     
                  


                      
                      

                      <div class="pure-g" style="background: linear-gradient(135deg, #007bff, #6610f2); color: white; padding: 20px;">
    <div class="pure-u-1 pure-u-md-1-2" style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
        <div class="pure-u-1 pure-u-md-1-2">
            <div class="mb-4">
                <label for="name" class="pure-label" style="display: block; margin-bottom: 8px;">Credit Card</label>
                <input type="text" id="name" class="pure-input-1" placeholder="Full Name" style="padding: 8px; width: 100%; border: 1px solid #ccc; border-radius: 4px;">
            </div>
            <div class="mb-4">
                <label for="cardNumber" class="pure-label" style="display: block; margin-bottom: 8px;">Credit Card Number</label>
                <input type="text" id="cardNumber" class="pure-input-1" placeholder="1234 5678 9012 3456" maxlength="19" style="padding: 8px; width: 100%; border: 1px solid #ccc; border-radius: 4px;">
            </div>
            <div class="pure-g">
                <div class="pure-u-1 pure-u-md-2-3">
                    <div class="mb-4">
                        <label for="expiryDate" class="pure-label" style="display: block; margin-bottom: 8px;">Expiration Date</label>
                        <input type="text" id="expiryDate" class="pure-input-1" placeholder="MM/YY" maxlength="5" pattern="\d{2}/\d{2}" style="padding: 8px; width: 100%; border: 1px solid #ccc; border-radius: 4px;">
                    </div>
                </div>
                <div class="pure-u-1 pure-u-md-1-3">
                    <div class="mb-4">
                        <label for="cvv" class="pure-label" style="display: block; margin-bottom: 8px;">Security Code</label>
                        <input type="text" id="cvv" class="pure-input-1" placeholder="123" maxlength="3" pattern="\d{3}" style="padding: 8px; width: 100%; border: 1px solid #ccc; border-radius: 4px;">
                    </div>
                </div>
            </div>
            <button class="pure-button pure-button-primary" style="width: 100%; padding: 10px; background-color: #333; color: white; border-radius: 4px;">Complete Purchase</button>
        </div>
    </div>
</div>


                     
                  

Create Account

Fill in the details below to create your account.

Already have an account? Log In

Created using Nobalish.

                      
                      
                      <div class="pure-g" style="justify-content: center; padding: 40px; background-color: #f7f7f7;">
  <div class="pure-u-1 pure-u-md-1-2" style="background: white; border-radius: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 30px;">
    <h4 class="pure-u-1" style="font-size: 24px; font-weight: bold; color: #007bff;">Create Account</h4>
    <p class="pure-u-1" style="margin-top: 10px; font-size: 16px; color: #6c757d;">Fill in the details below to create your account.</p>
    <form class="pure-u-1" style="margin-top: 20px;">
      <div class="pure-u-1" style="margin-bottom: 15px;">
        <label for="username" style="font-size: 14px; font-weight: bold; color: #333;">Username</label>
        <input type="text" class="pure-input-1" id="username" placeholder="Choose a username" style="padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%;">
      </div>
      <div class="pure-u-1" style="margin-bottom: 15px;">
        <label for="useremail" style="font-size: 14px; font-weight: bold; color: #333;">Email Address</label>
        <input type="email" class="pure-input-1" id="useremail" placeholder="Enter your email address" style="padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%;">
      </div>
      <div class="pure-u-1" style="margin-bottom: 15px;">
        <label for="userpassword" style="font-size: 14px; font-weight: bold; color: #333;">Password</label>
        <input type="password" class="pure-input-1" id="userpassword" placeholder="Set your password" style="padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%;">
      </div>
      <div class="pure-u-1" style="margin-bottom: 20px;">
        <label class="pure-checkbox" style="font-size: 14px; color: #333;">
          <input type="checkbox" id="acceptTerms" /> I agree to the <a href="#" class="text-info" style="color: #007bff;">Privacy Policy</a> and <a href="#" class="text-info" style="color: #007bff;">Terms of Service</a>.
        </label>
      </div>
      <button type="submit" class="pure-button pure-button-primary" style="width: 100%; padding: 12px; font-size: 16px; background-color: #28a745; border: none; border-radius: 4px; color: white;">
        Sign Up
      </button>
      <p class="pure-u-1" style="margin-top: 20px; text-align: center; font-size: 14px; color: #6c757d;">
        Already have an account? <a href="#" class="text-info" style="color: #007bff;">Log In</a>
      </p>
    </form>
    <div class="pure-u-1" style="padding-top: 20px; text-align: center; font-size: 12px; color: #6c757d;">
      Created using <a href="#" target="_blank" style="color: #6c757d;">Nobalish</a>.
    </div>
  </div>
</div>



                     
                  


                      
                      
                      <div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 pure-u-xl-1/4">
    <div class="pure-form pure-form-stacked">
      <form>
        <div class="pure-control-group">
          <label for="number" class="pure-u-1">Contact Number</label>
          <input type="number" id="number" name="number" placeholder="Enter your number" class="pure-input-1-2">
        </div>

        <div class="pure-control-group">
          <label for="range" class="pure-u-1">Experience Level</label>
          <input type="range" id="range" name="range" class="pure-input-1-2">
        </div>

        <div class="pure-control-group">
          <label for="file" class="pure-u-1">Upload File</label>
          <input type="file" id="file" name="file" class="pure-input-1-2">
        </div>

        <div class="pure-control-group">
          <label for="date" class="pure-u-1">Event Date</label>
          <input type="date" id="date" name="date" class="pure-input-1-2">
        </div>

        <div class="pure-control-group">
          <label for="month" class="pure-u-1">Start Month</label>
          <input type="month" id="month" name="month" class="pure-input-1-2">
        </div>

        <div class="pure-control-group">
          <label for="time" class="pure-u-1">Preferred Time</label>
          <input type="time" id="time" name="time" class="pure-input-1-2">
        </div>

        <div class="pure-control-group">
          <label for="password" class="pure-u-1">Password</label>
          <input type="password" id="password" name="password" placeholder="Create a password" class="pure-input-1-2">
        </div>

        <div class="pure-controls">
          <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </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.

*Required fields

By submitting, you agree to our Terms and Conditions.


                      
                      
                      <div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
    <div class="pure-u-1">
      <h2 class="pure-u-1 text-center text-xl font-bold">Let's Connect</h2>
      <p class="pure-u-1 text-center text-muted">Welcome to our contact page. Feel free to share your thoughts or ask questions, and we'll get back to you as soon as possible.</p>
    </div>
    <form class="pure-form pure-form-stacked">
      <div class="pure-control-group">
        <label for="first-name" class="pure-u-1">Name of the Explorer*</label>
        <input name="first-name" class="pure-input-1-2" id="first-name" placeholder="Your full name" required />
      </div>
      <div class="pure-control-group">
        <label for="last-name" class="pure-u-1">Family Name*</label>
        <input name="last-name" class="pure-input-1-2" id="last-name" placeholder="Your surname" required />
      </div>
      <div class="pure-control-group">
        <label for="company" class="pure-u-1">Organization Name</label>
        <input name="company" class="pure-input-1-2" id="company" placeholder="Enter your organization" />
      </div>
      <div class="pure-control-group">
        <label for="email" class="pure-u-1">Your Email Address*</label>
        <input name="email" class="pure-input-1-2" id="email" placeholder="email@example.com" required />
      </div>
      <div class="pure-control-group">
        <label for="subject" class="pure-u-1">Topic of Discussion*</label>
        <input name="subject" class="pure-input-1-2" id="subject" placeholder="Subject of your message" required />
      </div>
      <div class="pure-control-group">
        <label for="message" class="pure-u-1">Your Thoughts*</label>
        <textarea name="message" class="pure-input-1-2" id="message" rows="6" placeholder="Write your message here" required></textarea>
      </div>
      <div class="pure-controls">
        <button class="pure-button pure-button-primary" type="submit">Send Your Message</button>
        <span class="text-sm text-muted">*Required fields</span>
      </div>
      <p class="text-xs text-muted">By submitting, you agree to our <a href="#" class="text-decoration-underline">Terms and Conditions</a>.</p>
    </form>
  </div>
</div>



                     
                  


                      
                      
                      <form>
    <div class="pure-g mb-6">
        <div class="pure-u-1 pure-u-md-1-2">
            <label for="product_name" class="pure-form-label">Product Name</label>
            <input type="text" id="product_name" class="pure-input-1-2" placeholder="Gadget X100" required>
        </div>
        <div class="pure-u-1 pure-u-md-1-2">
            <label for="brand_name" class="pure-form-label">Brand Name</label>
            <input type="text" id="brand_name" class="pure-input-1-2" placeholder="TechNova" required>
        </div>
        <div class="pure-u-1 pure-u-md-1-2">
            <label for="price" class="pure-form-label">Price</label>
            <input type="text" id="price" class="pure-input-1-2" placeholder="$499.99" required>
        </div>
        <div class="pure-u-1 pure-u-md-1-2">
            <label for="availability" class="pure-form-label">Availability</label>
            <input type="text" id="availability" class="pure-input-1-2" placeholder="In Stock" required>
        </div>
        <div class="pure-u-1 pure-u-md-1-2">
            <label for="category" class="pure-form-label">Category</label>
            <input type="text" id="category" class="pure-input-1-2" placeholder="Electronics" required>
        </div>
        <div class="pure-u-1 pure-u-md-1-2">
            <label for="rating" class="pure-form-label">Customer Rating</label>
            <input type="number" id="rating" class="pure-input-1-2" placeholder="4.5" required>
        </div>
    </div>
    <div class="mb-6">
        <label for="manufacturer_email" class="pure-form-label">Manufacturer Email</label>
        <input type="email" id="manufacturer_email" class="pure-input-1-2" placeholder="support@technova.com" required>
    </div>
    <div class="mb-6">
        <label for="warranty_period" class="pure-form-label">Warranty Period</label>
        <input type="text" id="warranty_period" class="pure-input-1-2" placeholder="2 years" required>
    </div>
    <div class="pure-u-1 mb-6">
        <label for="accept_terms" class="pure-checkbox">
            <input id="accept_terms" type="checkbox" value="" required>
            I agree to the <a href="#" class="pure-text-primary">terms and conditions</a>.
        </label>
    </div>
    <button type="submit" class="pure-button pure-button-primary w-100">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="pure-g py-6">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
    <div class="pure-u-1 bg-white p-4 rounded">
      <div class="pure-g h-100">
        <div class="pure-u-1 pure-u-md-1-2 bg-primary p-4 text-white">
          <h2 class="font-weight-bold mb-4">Contact Information</h2>
          <p class="font-weight-bold mb-3">
            Location Address
            <span class="d-block text-light">123 Tech Street, Silicon Valley, CA, USA</span>
          </p>
          <p class="font-weight-bold mb-3">
            Phone Number
            <span class="d-block text-light">+1 (800) 123 4567</span>
          </p>
          <p class="font-weight-bold mb-3">
            Email Address
            <span class="d-block text-light">contact@company.com</span>
          </p>
          <p class="font-weight-bold mb-3">
            Web Address
            <span class="d-block text-light">www.companywebsite.com</span>
          </p>
        </div>
        <div class="pure-u-1 pure-u-md-1-2 bg-light p-4">
          <h2 class="font-weight-bold mb-4 text-primary">Contact Us</h2>
          <form>
            <div class="pure-g mb-4">
              <div class="pure-u-1 pure-u-sm-1-2">
                <input type="text" class="pure-input-1-2 pure-input-rounded" placeholder="Full Name" />
              </div>
              <div class="pure-u-1 pure-u-sm-1-2">
                <input type="text" class="pure-input-1-2 pure-input-rounded" placeholder="Your Email" />
              </div>
            </div>
            <div class="pure-g mb-4">
              <div class="pure-u-1 pure-u-sm-1-2">
                <input type="email" class="pure-input-1-2 pure-input-rounded" placeholder="Your Phone Number" />
              </div>
              <div class="pure-u-1 pure-u-sm-1-2">
                <input type="text" class="pure-input-1-2 pure-input-rounded" placeholder="Message Subject" />
              </div>
            </div>
            <div class="mb-4">
              <textarea class="pure-input-1-2 pure-input-rounded" placeholder="Your Inquiry" rows="6"></textarea>
            </div>
            <div class="text-center">
              <button type="submit" class="pure-button pure-button-primary pure-button-lg">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<p class="pure-text-muted">The Connections section allows you to manage your connections and communication with others.</p>



                     
                  

Get Started with Amazing Projects

Join thousands of businesses growing with our powerful solutions.

Services
  • Overview
  • Support
  • Features
  • Pricing
  • Blog
  • Updates
About Us
  • Our Team
  • Careers
  • News
  • Partnerships
  • Contact
Resources
  • FAQ
  • Documentation
  • Support Center
  • Community
Legal
  • Privacy Policy
  • Terms of Use
  • Cookies Policy
Social
  • Twitter
  • Facebook
  • LinkedIn
  • Instagram
Quick Links
  • Blog
  • Events
  • Help Center
  • Newsletter

© 2023 Your Company. All Rights Reserved.

                      
                      
                      <div class="pure-u-1 pure-g">
  <div class="pure-u-1 pure-g">
    <div class="pure-u-1">
      <h2 class="text-primary">Get Started with Amazing Projects</h2>
      <p class="text-muted">Join thousands of businesses growing with our powerful solutions.</p>
    </div>
  </div>
  <div class="pure-u-1 pure-g">
    <div class="pure-u-1 pure-u-md-1-4">
      <h5 class="text-primary">Services</h5>
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Overview</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Support</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Features</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Pricing</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Updates</a></li>
      </ul>
    </div>
    <div class="pure-u-1 pure-u-md-1-4">
      <h5 class="text-primary">About Us</h5>
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Our Team</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Careers</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Partnerships</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
      </ul>
    </div>
    <div class="pure-u-1 pure-u-md-1-4">
      <h5 class="text-primary">Resources</h5>
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">FAQ</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Documentation</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Support Center</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Community</a></li>
      </ul>
    </div>
    <div class="pure-u-1 pure-u-md-1-4">
      <h5 class="text-primary">Legal</h5>
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Privacy Policy</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Terms of Use</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Cookies Policy</a></li>
      </ul>
    </div>
    <div class="pure-u-1 pure-u-md-1-4">
      <h5 class="text-primary">Social</h5>
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Facebook</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">LinkedIn</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Instagram</a></li>
      </ul>
    </div>
    <div class="pure-u-1 pure-u-md-1-4">
      <h5 class="text-primary">Quick Links</h5>
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Events</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Help Center</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Newsletter</a></li>
      </ul>
    </div>
  </div>
  <hr>
  <div class="pure-u-1">
    <div class="text-muted">
      <small>© 2023 Your Company. All Rights Reserved.</small>
    </div>
  </div>
</div>


                    
                     
                  

My Website
  • Home
  • Terms of Service
  • Support
  • Feedback

© 2022 My Website™. All Rights Reserved.

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="pure-g">
  <div class="pure-u-1 pure-u-md-1-1 pure-u-lg-1-1">
    <div class="pure-u-1-1 pure-u-md-1-1 pure-u-lg-1-1">
      <div class="pure-menu pure-menu-horizontal">
        <a href="#" class="pure-menu-heading pure-menu-link">My Website</a>
        <ul class="pure-menu-list">
          <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
          <li class="pure-menu-item"><a href="#" class="pure-menu-link">Terms of Service</a></li>
          <li class="pure-menu-item"><a href="#" class="pure-menu-link">Support</a></li>
          <li class="pure-menu-item"><a href="#" class="pure-menu-link">Feedback</a></li>
        </ul>
      </div>
    </div>
    <hr class="pure-u-1-1">
    <span class="pure-u-1-1 pure-u-md-1-1 pure-u-lg-1-1" style="text-align:center;">
      © 2022 <a href="#" class="pure-menu-link">My Website™</a>. All Rights Reserved.
    </span>
  </div>
  <p class="pure-u-1-1 pure-u-md-1-1 pure-u-lg-1-1">
    This footer component is part of a larger, open-source library of Pure.css components. Learn more by going to the official <a class="pure-menu-link" href="#">My Website Documentation</a>.
  </p>
</div>



                     
                  

Company Partners Careers Newsroom Updates
© 2021 - Present CompanyX. All rights reserved.

                      
                      
                      <div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-1">
    <div class="pure-menu pure-menu-horizontal">
      <a href="#" class="pure-menu-heading pure-menu-link">My Website</a>
      <ul class="pure-menu-list">
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Company</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Partners</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Careers</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Newsroom</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Updates</a>
        </li>
      </ul>
    </div>

    <div class="pure-g">
      <div class="pure-u-1-4">
        <a href="#" class="pure-link">Facebook</a>
      </div>
      <div class="pure-u-1-4">
        <a href="#" class="pure-link">Twitter</a>
      </div>
      <div class="pure-u-1-4">
        <a href="#" class="pure-link">LinkedIn</a>
      </div>
      <div class="pure-u-1-4">
        <a href="#" class="pure-link">Instagram</a>
      </div>
    </div>

    <div class="pure-u-1 pure-u-md-1-1 pure-u-lg-1-1">
      <footer class="pure-u-1">
        <div class="pure-u-1 text-center pure-text-muted">
          <p>© 2021 - Present CompanyX. All rights reserved.</p>
        </div>
      </footer>
    </div>
  </div>
</div>



                     
                  


                      
                      
                      <div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <button class="pure-button pure-button-primary w-100">Primary Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <button class="pure-button pure-button-outline w-100">Outline Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <button class="pure-button pure-button-success w-100">
      <i class="bi bi-check-circle me-2"></i> Success Button
    </button>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <button class="pure-button pure-button-warning w-100" title="This is a tooltip!">
      Warning Button
    </button>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <button class="pure-button pure-button-danger w-100">
      Delete <span class="badge">5</span>
    </button>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <button class="pure-button pure-button-info w-100">Info Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <button class="pure-button pure-button-dark w-100">Dark Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
    <button class="pure-button pure-button-light w-100">Light Button</button>
  </div>
</div>



                    
                  


                      
                      
                      <div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-4">
    <button class="pure-button gradient-button">Gradient Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-4">
    <button class="pure-button gradient-button">Gradient Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-4">
    <button class="pure-button gradient-button">Gradient Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-4">
    <button class="pure-button gradient-button">Gradient Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-4">
    <button class="pure-button gradient-button">Gradient Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-4">
    <button class="pure-button gradient-button">Gradient Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-4">
    <button class="pure-button gradient-button">Gradient Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-4">
    <button class="pure-button gradient-button">Gradient Button</button>
  </div>
  <div class="pure-u-1 pure-u-md-1-4">
    <button class="pure-button gradient-button">Gradient Button</button>
  </div>
</div>

<style>
  .pure-g {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .pure-button {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    width: 100%;
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .gradient-button {
    background: linear-gradient(to right, #ff7e5f, rgb(0, 0, 0));
  }

  .pure-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }

  /* Customize other gradient button colors */
  .gradient-button:nth-child(2) {
    background: linear-gradient(to right, rgb(95, 255, 124), rgb(0, 0, 0));
  }

  .gradient-button:nth-child(3) {
    background: linear-gradient(to right, rgb(176, 223, 192), rgb(0, 0, 0));
  }

  .gradient-button:nth-child(4) {
    background: linear-gradient(to right, rgb(182, 180, 184), rgb(0, 0, 0));
  }

  .gradient-button:nth-child(5) {
    background: linear-gradient(to right, rgb(100, 67, 191), rgb(0, 0, 0));
  }

  .gradient-button:nth-child(6) {
    background: linear-gradient(to right, rgb(183, 0, 255), rgb(0, 0, 0));
  }

  .gradient-button:nth-child(7) {
    background: linear-gradient(to right, rgb(255, 27, 221), rgb(0, 0, 0));
  }

  .gradient-button:nth-child(8) {
    background: linear-gradient(to right, rgb(219, 253, 23), rgb(6, 6, 6));
  }
</style>



                    
                  


                      
                      
                      <div class="pure-g">
  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
    <button class="pure-button custom-button red-button">Button</button>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
    <button class="pure-button custom-button blue-button">Button</button>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
    <button class="pure-button custom-button green-button">Button</button>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
    <button class="pure-button custom-button yellow-button">Button</button>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
    <button class="pure-button custom-button cyan-button">Button</button>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
    <button class="pure-button custom-button purple-button">Button</button>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
    <button class="pure-button custom-button pink-button">Button</button>
  </div>
  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-4">
    <button class="pure-button custom-button orange-button">Button</button>
  </div>
</div>

<style>
  .pure-g {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  
  .pure-button {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 30px;
    width: 100%;
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .pure-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }

  .red-button {
    background-color: #dc3545;
  }

  .blue-button {
    background-color: rgb(5, 51, 255);
  }

  .green-button {
    background-color: rgb(21, 255, 9);
  }

  .yellow-button {
    background-color: rgb(153, 155, 28);
  }

  .cyan-button {
    background-color: rgb(0, 247, 255);
  }

  .purple-button {
    background-color: rgb(95, 9, 255);
  }

  .pink-button {
    background-color: rgb(255, 0, 217);
  }

  .orange-button {
    background-color: rgb(255, 145, 0);
  }
</style>



                     
                  


                      
                      

                      <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure.css Buttons</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    .button-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    .pure-button {
      width: 100%;
      padding: 20px;
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .pure-button:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    /* Custom button colors */
    .btn-red {
      background-color: #dc3545;
      color: white;
    }
    .btn-green {
      background-color: #28a745;
      color: white;
    }
    .btn-blue {
      background-color: #007bff;
      color: white;
    }
    .btn-yellow {
      background-color: #ffc107;
      color: black;
    }
    .btn-white {
      background-color: #ffffff;
      color: black;
      border: 1px solid #ddd;
    }
    .btn-gray {
      background-color: #6c757d;
      color: white;
    }
    .btn-teal {
      background-color: #17a2b8;
      color: white;
    }
    .btn-black {
      background-color: #343a40;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="button-container">
      <button class="pure-button btn-red">Red</button>
      <button class="pure-button btn-green">Green</button>
      <button class="pure-button btn-blue">Blue</button>
      <button class="pure-button btn-yellow">Yellow</button>
      <button class="pure-button btn-white">White</button>
      <button class="pure-button btn-gray">Gray</button>
      <button class="pure-button btn-teal">Teal</button>
      <button class="pure-button btn-black">Black</button>
    </div>
  </div>
</body>
</html>


                     
                  

>

                      
                      
                      <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure.css Buttons</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    .button-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    .pure-button {
      width: 100%;
      padding: 20px;
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 2px solid transparent;
    }

    .pure-button:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    /* Outline Button Styles */
    .btn-outline-danger {
      border-color: #dc3545;
      color: #dc3545;
    }
    .btn-outline-danger:hover {
      background-color: #dc3545;
      color: white;
    }

    .btn-outline-success {
      border-color: #28a745;
      color: #28a745;
    }
    .btn-outline-success:hover {
      background-color: #28a745;
      color: white;
    }

    .btn-outline-primary {
      border-color: #007bff;
      color: #007bff;
    }
    .btn-outline-primary:hover {
      background-color: #007bff;
      color: white;
    }

    .btn-outline-warning {
      border-color: #ffc107;
      color: #ffc107;
    }
    .btn-outline-warning:hover {
      background-color: #ffc107;
      color: black;
    }

    .btn-outline-secondary {
      border-color: #6c757d;
      color: #6c757d;
    }
    .btn-outline-secondary:hover {
      background-color: #6c757d;
      color: white;
    }

    .btn-outline-info {
      border-color: #17a2b8;
      color: #17a2b8;
    }
    .btn-outline-info:hover {
      background-color: #17a2b8;
      color: white;
    }

    .btn-outline-dark {
      border-color: #343a40;
      color: #343a40;
    }
    .btn-outline-dark:hover {
      background-color: #343a40;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="button-container">
      <button class="pure-button btn-outline-danger">Red</button>
      <button class="pure-button btn-outline-success">Green</button>
      <button class="pure-button btn-outline-primary">Blue</button>
      <button class="pure-button btn-outline-warning">Yellow</button>
      <button class="pure-button btn-outline-secondary">Gray</button>
      <button class="pure-button btn-outline-info">Teal</button>
      <button class="pure-button btn-outline-dark">Black</button>
    </div>
  </div>
</body>
</html>



                     
                  


                      
                      
                      <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure CSS Example</title>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
  <style>
    /* Additional styles to match the desired button appearance */
    .button-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 20px;
      padding: 20px;
    }

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15px;
      border-radius: 15px;
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn svg {
      margin-right: 8px;
    }

    .btn:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    /* Button Colors */
    .btn-primary {
      background-color: #007bff;
      color: white;
      border: none;
    }
    .btn-success {
      background-color: #28a745;
      color: white;
      border: none;
    }
    .btn-warning {
      background-color: #ffc107;
      color: white;
      border: none;
    }
    .btn-danger {
      background-color: #dc3545;
      color: white;
      border: none;
    }
    .btn-info {
      background-color: #17a2b8;
      color: white;
      border: none;
    }
    .btn-pink {
      background-color: #e83e8c;
      color: white;
      border: none;
    }
    .btn-secondary {
      background-color: #6c757d;
      color: white;
      border: none;
    }
    .btn-dark {
      background-color: #343a40;
      color: white;
      border: none;
    }

    /* Button Outline Colors */
    .btn-outline-primary {
      border: 2px solid #007bff;
      color: #007bff;
      background-color: transparent;
    }
    .btn-outline-success {
      border: 2px solid #28a745;
      color: #28a745;
      background-color: transparent;
    }
    .btn-outline-warning {
      border: 2px solid #ffc107;
      color: #ffc107;
      background-color: transparent;
    }
    .btn-outline-danger {
      border: 2px solid #dc3545;
      color: #dc3545;
      background-color: transparent;
    }
    .btn-outline-info {
      border: 2px solid #17a2b8;
      color: #17a2b8;
      background-color: transparent;
    }
    .btn-outline-secondary {
      border: 2px solid #6c757d;
      color: #6c757d;
      background-color: transparent;
    }
    .btn-outline-dark {
      border: 2px solid #343a40;
      color: #343a40;
      background-color: transparent;
    }
  </style>
</head>
<body>

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

</body>
</html>



                    
                  

Sun

1

Mon

2

Tue

3

Wed

4

Thu

5

Fri

6

Sat

7

Sun

1

Mon

2

Tue

3

Wed

4

Thu

5

Fri

6

Sat

7


                      
                      
                      <div class="pure-g p-4">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 bg-white shadow-box rounded mx-auto py-3 px-2 mb-4">
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-dark text-white cursor-pointer p-3">
      <p class="small">Sun</p>
      <p class="fw-bold">1</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-dark text-white cursor-pointer p-3">
      <p class="small">Mon</p>
      <p class="fw-bold">2</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-dark text-white cursor-pointer p-3">
      <p class="small">Tue</p>
      <p class="fw-bold">3</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-primary text-white cursor-pointer p-3">
      <p class="small">Wed</p>
      <p class="fw-bold">4</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-dark text-white cursor-pointer p-3">
      <p class="small">Thu</p>
      <p class="fw-bold">5</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-dark text-white cursor-pointer p-3">
      <p class="small">Fri</p>
      <p class="fw-bold">6</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-dark text-white cursor-pointer p-3">
      <p class="small">Sat</p>
      <p class="fw-bold">7</p>
    </div>
  </div>
  
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 bg-white shadow-box rounded mx-auto py-3 px-2">
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-light text-dark cursor-pointer p-3">
      <p class="small">Sun</p>
      <p class="fw-bold">1</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-light text-dark cursor-pointer p-3">
      <p class="small">Mon</p>
      <p class="fw-bold">2</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-light text-dark cursor-pointer p-3">
      <p class="small">Tue</p>
      <p class="fw-bold">3</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-primary text-white cursor-pointer p-3">
      <p class="small">Wed</p>
      <p class="fw-bold">4</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-light text-dark cursor-pointer p-3">
      <p class="small">Thu</p>
      <p class="fw-bold">5</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-light text-dark cursor-pointer p-3">
      <p class="small">Fri</p>
      <p class="fw-bold">6</p>
    </div>
    <div class="pure-u-1 pure-u-md-1-7 text-center rounded mx-1 bg-light text-dark cursor-pointer p-3">
      <p class="small">Sat</p>
      <p class="fw-bold">7</p>
    </div>
  </div>
</div>

<style>
  .cursor-pointer {
    cursor: pointer;
  }

  .bg-primary {
    background-color: #007bff;
  }

  .bg-dark {
    background-color: #343a40;
  }

  .bg-light {
    background-color: #f8f9fa;
  }

  .text-white {
    color: white;
  }

  .text-dark {
    color: black;
  }

  .shadow-box {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .rounded {
    border-radius: 0.375rem;
  }

  .fw-bold {
    font-weight: bold;
  }

  .small {
    font-size: 0.8rem;
  }

  /* Add custom hover effect */
  .pure-u-1 .cursor-pointer:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
  }
</style>



                    
                  

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

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

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

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


                      
                      
                      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.0.5/pure-min.css" />

<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
  <div class="pure-u-1 pure-u-md-1-2">
    <div class="alert pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 pure-alert-primary">
      <div class="alert-container">
        <p class="font-weight-bold text-warning">Holiday Sale
          <span class="text-light">
            - Up to 40% off on home decor!
          </span>
          <span title="" class="pure-button pure-button-primary ml-3">
            Shop Now 
          </span>
        </p>
      </div>
      <button class="pure-button pure-button-active">X</button>
    </div>
  </div>
</div>

<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
  <div class="pure-u-1 pure-u-md-1-2">
    <div class="alert pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 pure-alert-danger">
      <div class="alert-container">
        <p class="font-weight-bold text-warning">Holiday Sale
          <span class="text-light">
            - Up to 40% off on home decor!
          </span>
          <span title="" class="pure-button pure-button-primary ml-3">
            Shop Now 
          </span>
        </p>
      </div>
      <button class="pure-button pure-button-active">X</button>
    </div>
  </div>
</div>

<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
  <div class="pure-u-1 pure-u-md-1-2">
    <div class="alert pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 pure-alert-success">
      <div class="alert-container">
        <p class="font-weight-bold text-warning">Holiday Sale
          <span class="text-light">
            - Up to 40% off on home decor!
          </span>
          <span title="" class="pure-button pure-button-primary ml-3">
            Shop Now 
          </span>
        </p>
      </div>
      <button class="pure-button pure-button-active">X</button>
    </div>
  </div>
</div>

<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
  <div class="pure-u-1 pure-u-md-1-2">
    <div class="alert pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 pure-alert-info">
      <div class="alert-container">
        <p class="font-weight-bold text-warning">Holiday Sale
          <span class="text-light">
            - Up to 40% off on home decor!
          </span>
          <span title="" class="pure-button pure-button-primary ml-3">
            Shop Now 
          </span>
        </p>
      </div>
      <button class="pure-button pure-button-active">X</button>
    </div>
  </div>
</div>



                     
                  

Sample Heading One

Sample Heading Two

Sample Heading Three

Sample Heading Four

Sample Heading Five

Sample Heading Six


                      
                      
                      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.0.5/pure-min.css" />

<div class="pure-g my-5">
  <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
    <h1 class="pure-text-primary" style="font-size: 3rem; font-weight: bold;">Sample Heading One</h1>
    <h2 class="pure-text-secondary" style="font-size: 2.5rem; font-weight: bold;">Sample Heading Two</h2>
    <h3 class="pure-text-success" style="font-size: 2rem; font-weight: bold;">Sample Heading Three</h3>
    <h4 class="pure-text-warning" style="font-size: 1.75rem; font-weight: bold;">Sample Heading Four</h4>
    <h5 class="pure-text-info" style="font-size: 1.5rem; font-weight: bold;">Sample Heading Five</h5>
    <p class="pure-text-muted" style="font-size: 1.25rem; font-weight: 600;">Sample Heading Six</p>
  </div>
</div>



                     
                  

  • « Previous
  • 1
  • 2
  • 3
  • 4
  • 5
  • Next »

                      
                      

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


                     
                  

Flexible Billing

2.0%

for transactions within Europe

3.5%

for international transactions

Premium Business Plan

2.0%

for transactions within Europe

3.5%

for international transactions


                      
                      
                      <div class="pure-g py-5">
  <div class="pure-u-md-1-2 mb-4">
    <div class="pure-card pure-u-1 pure-u-md-24-24">
      <div class="pure-card-header pure-text-center pure-bg-light pure-text-primary pure-font-weight-bold">
        Flexible Billing
      </div>
      <div class="pure-card-body">
        <div class="pure-g mb-4">
          <div class="pure-u-1-2 pure-text-center">
            <h3 class="h4">2.0%</h3>
            <p class="pure-text-muted small mt-2">for transactions within Europe</p>
          </div>
          <div class="pure-u-1-2 pure-text-center">
            <h3 class="h4">3.5%</h3>
            <p class="pure-text-muted small mt-2">for international transactions</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-u-md-1-2 mb-4">
    <div class="pure-card pure-u-1 pure-u-md-24-24">
      <div class="pure-card-header pure-text-center pure-bg-dark pure-text-white pure-font-weight-bold">
        Premium Business Plan
      </div>
      <div class="pure-card-body">
        <div class="pure-g mb-4">
          <div class="pure-u-1-2 pure-text-center">
            <h3 class="h4">2.0%</h3>
            <p class="pure-text-muted small mt-2">for transactions within Europe</p>
          </div>
          <div class="pure-u-1-2 pure-text-center">
            <h3 class="h4">3.5%</h3>
            <p class="pure-text-muted small mt-2">for international transactions</p>
          </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="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
        <div class="pure-u-1-2 pure-g-card">
            <div class="pure-u-1">
                <div class="pure-u-1 bg-light">
                    <div class="pure-u-1 pure-g">
                        <span class="pure-u-1 pure-u-md-1-4">December 2024</span>
                        <div class="pure-u-1 pure-u-md-3-4">
                            <button aria-label="calendar backward" class="pure-button">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M0 0h24v24H0z" fill="none"/>
                                    <polyline points="15 6 9 12 15 18" />
                                </svg>
                            </button>
                            <button aria-label="calendar forward" class="pure-button">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M0 0h24v24H0z" fill="none"/>
                                    <polyline points="9 6 15 12 9 18" />
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="pure-u-1 pure-g">
                        <table class="pure-table">
                            <thead>
                                <tr>
                                    <th class="pure-u-1-7">Mo</th>
                                    <th class="pure-u-1-7">Tu</th>
                                    <th class="pure-u-1-7">We</th>
                                    <th class="pure-u-1-7">Th</th>
                                    <th class="pure-u-1-7">Fr</th>
                                    <th class="pure-u-1-7">Sa</th>
                                    <th class="pure-u-1-7">Su</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-center"></td>
                                    <td class="text-center"></td>
                                    <td class="text-center"></td>
                                    <td class="text-center"><p>1</p></td>
                                    <td class="text-center"><p>2</p></td>
                                    <td class="text-center"><p>3</p></td>
                                    <td class="text-center"><p>4</p></td>
                                </tr>
                                <tr>
                                    <td class="text-center"><p>5</p></td>
                                    <td class="text-center"><p>6</p></td>
                                    <td class="text-center"><p>7</p></td>
                                    <td class="text-center"><a class="pure-button pure-button-primary" href="#">8</a></td>
                                    <td class="text-center"><p>9</p></td>
                                    <td class="text-center"><p>10</p></td>
                                    <td class="text-center"><p>11</p></td>
                                </tr>
                                <tr>
                                    <td class="text-center"><p>12</p></td>
                                    <td class="text-center"><p>13</p></td>
                                    <td class="text-center"><p>14</p></td>
                                    <td class="text-center"><p>15</p></td>
                                    <td class="text-center"><p>16</p></td>
                                    <td class="text-center"><p>17</p></td>
                                    <td class="text-center"><p>18</p></td>
                                </tr>
                                <tr>
                                    <td class="text-center"><p>19</p></td>
                                    <td class="text-center"><p>20</p></td>
                                    <td class="text-center"><p>21</p></td>
                                    <td class="text-center"><p>22</p></td>
                                    <td class="text-center"><p>23</p></td>
                                    <td class="text-center"><p>24</p></td>
                                    <td class="text-center"><p>25</p></td>
                                </tr>
                                <tr>
                                    <td class="text-center"><p>26</p></td>
                                    <td class="text-center"><p>27</p></td>
                                    <td class="text-center"><p>28</p></td>
                                    <td class="text-center"><p>29</p></td>
                                    <td class="text-center"><p>30</p></td>
                                    <td class="text-center"><p>31</p></td>
                                    <td class="text-center"><p></p></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



                     
                  

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


                      
                      
                      <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3 pure-g">
    <div class="pure-u-1">
        <label for="dropzone-file" class="pure-u-1 pure-u-lg-1 pure-u-md-1 border-dashed border-light rounded">
            <div class="pure-u-1 pure-g center">
                <svg class="pure-u-1 pure-u-md-2 pure-u-lg-3 pure-icon" width="40" height="40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                </svg>
                <p class="pure-u-1 center">Choose your file or simply drag it here</p>
                <p class="pure-u-1 text-muted pure-small">Supported formats: SVG, PNG, JPG, GIF (MAX. 800x400px)</p>
            </div>
            <input id="dropzone-file" type="file" class="pure-u-1-2 pure-input-hidden" />
        </label>
    </div>
    <p class="pure-u-1 pure-text-center">
        This file upload component is part of a comprehensive component library. For more details, visit the official
        <a class="pure-u-1 pure-button" href="#" target="_blank">Documentation</a>.
    </p>
</div>



                     
                  

  • Overview
  • Stats
  • Preferences
  • Connections

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="pure-g my-5">
    <div class="pure-u-1">
        <ul class="pure-menu pure-menu-horizontal">
            <li class="pure-menu-item">
                <a href="#overview" class="pure-menu-link">Overview</a>
            </li>
            <li class="pure-menu-item">
                <a href="#stats" class="pure-menu-link pure-menu-selected">Stats</a>
            </li>
            <li class="pure-menu-item">
                <a href="#preferences" class="pure-menu-link">Preferences</a>
            </li>
            <li class="pure-menu-item">
                <a href="#connections" class="pure-menu-link">Connections</a>
            </li>
        </ul>
    </div>

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



                     
                  

Dummy Image
Home Files Tasks Schedule Timing Documents Options

                      
                      

                      <div class="position-relative d-none h-100 my-4 ms-4 shadow-lg d-lg-block w-25">
    <div class="h-100 bg-light rounded-2 bg-dark">
        <div class="d-flex align-items-center justify-content-center pt-3">
            <img src="https://dummyimage.com/722x402" alt="Dummy Image" class="img-fluid">
        </div>
        <nav class="mt-3">
            <div>
                <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 fw-light text-primary text-uppercase bg-light bg-gradient" href="#">
                    <span class="text-start">
                        <i class="bi bi-house"></i>
                    </span>
                    <span class="ms-3 small fw-normal">
                        Home
                    </span>
                </a>
                <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 fw-light text-muted text-uppercase transition-all hover-primary" href="#">
                    <span class="text-start">
                        <i class="bi bi-folder"></i>
                    </span>
                    <span class="ms-3 small fw-normal">
                        Files
                    </span>
                </a>
                <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 fw-light text-muted text-uppercase transition-all hover-primary" href="#">
                    <span class="text-start">
                        <i class="bi bi-list-task"></i>
                    </span>
                    <span class="ms-3 small fw-normal">
                        Tasks
                    </span>
                </a>
                <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 fw-light text-muted text-uppercase transition-all hover-primary" href="#">
                    <span class="text-start">
                        <i class="bi bi-calendar3"></i>
                    </span>
                    <span class="ms-3 small fw-normal">
                        Schedule
                    </span>
                </a>
                <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 fw-light text-muted text-uppercase transition-all hover-primary" href="#">
                    <span class="text-start">
                        <i class="bi bi-clock"></i>
                    </span>
                    <span class="ms-3 small fw-normal">
                        Timing
                    </span>
                </a>
                <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 fw-light text-muted text-uppercase transition-all hover-primary" href="#">
                    <span class="text-start">
                        <i class="bi bi-file-earmark"></i>
                    </span>
                    <span class="ms-3 small fw-normal">
                        Documents
                    </span>
                </a>
                <a class="d-flex align-items-center justify-content-start w-100 p-3 my-2 fw-light text-muted text-uppercase transition-all hover-primary" href="#">
                    <span class="text-start">
                        <i class="bi bi-gear"></i>
                    </span>
                    <span class="ms-3 small fw-normal">
                        Options
                    </span>
                </a>
            </div>
        </nav>
    </div>
  </div>




                     
                  

Our Achievements

50

Users

15

Subscribes

12

Downloads

20

Products


                      
                      
                      <section class="pure-g">
  <div class="pure-u-1 pure-u-lg-1">
    <div class="pure-u-1-1">
      <h1 class="pure-u-1 pure-u-lg-1 font-weight-bold mb-2 text-dark">Our Achievements</h1>
      <div class="h-1 w-20 bg-success rounded"></div>
    </div>
  </div>
  
  <div class="pure-u-1 pure-u-lg-1-2 pure-u-md-1-4">
    <div class="pure-g-r">
      <div class="pure-u-1 pure-u-sm-1-2">
        <div class="bg-success rounded-lg p-4">
            <h2 class="font-weight-medium display-3 text-white">50</h2>
            <p class="text-white font-weight-bold">Users</p>
        </div>
      </div>
    </div>
  </div>

  <div class="pure-u-1 pure-u-lg-1-2 pure-u-md-1-4">
    <div class="pure-g-r">
      <div class="pure-u-1 pure-u-sm-1-2">
        <div class="bg-success rounded-lg p-4">
            <h2 class="font-weight-medium display-3 text-white">15</h2>
            <p class="text-white font-weight-bold">Subscribes</p>
        </div>
      </div>
    </div>
  </div>

  <div class="pure-u-1 pure-u-lg-1-2 pure-u-md-1-4">
    <div class="pure-g-r">
      <div class="pure-u-1 pure-u-sm-1-2">
        <div class="bg-success rounded-lg p-4">
            <h2 class="font-weight-medium display-3 text-white">12</h2>
            <p class="text-white font-weight-bold">Downloads</p>
        </div>
      </div>
    </div>
  </div>

  <div class="pure-u-1 pure-u-lg-1-2 pure-u-md-1-4">
    <div class="pure-g-r">
      <div class="pure-u-1 pure-u-sm-1-2">
        <div class="bg-success rounded-lg p-4">
            <h2 class="font-weight-medium display-3 text-white">20</h2>
            <p class="text-white font-weight-bold">Products</p>
        </div>
      </div>
    </div>
  </div>
</section>



                     
                  

通知

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

デバイスに通知を送信します。
  • 通話が確認されました。

    1時間前
  • 新しいメッセージがあります!

    1時間前
  • サブスクリプションが間もなく期限切れです!

    2時間前

                      
                        
                      
                      <div class="pure-u-1 pure-u-lg-1">
    <div class="pure-g">
        <div class="pure-u-1">
            <div class="pure-u-1 bg-light">
                <div class="pure-u-1-1">
                    <div class="pure-u-1-1">
                        <h5 class="font-weight-bold text-dark mb-4">通知</h5>
                        <p class="text-muted mb-4">未読メッセージが3件あります。</p>
                        <div class="pure-g">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg me-2" viewBox="0 0 16 16">
                                <path d="M13.485 1.515a.5.5 0 0 1 .707 0l1.5 1.5a.5.5 0 0 1 0 .707l-9.5 9.5a.5.5 0 0 1-.707 0l-5-5a.5.5 0 0 1 .707-.707l4.646 4.647 9.146-9.147z"/>
                            </svg>
                            <div>
                                <small class="text-muted mb-4">デバイスに通知を送信します。</small>
                            </div>
                            <div class="pure-u-1">
                                <label class="pure-material-switch">
                                    <input type="checkbox" checked>
                                    <span class="pure-material-switch-indicator"></span>
                                </label>
                            </div>
                        </div>
                        <ul class="pure-u-1 pure-u-lg-1">
                            <li class="pure-u-1 pure-u-md-1-3 mb-3">
                                <div class="pure-u-1 pure-u-md-1-1">
                                    <div class="rounded-circle bg-primary me-3" style="width: 8px; height: 8px;"></div>
                                    <div>
                                        <p class="mb-0 font-weight-semibold">通話が確認されました。</p>
                                        <small class="text-muted">1時間前</small>
                                    </div>
                                </div>
                            </li>
                            <li class="pure-u-1 pure-u-md-1-3 mb-3">
                                <div class="pure-u-1 pure-u-md-1-1">
                                    <div class="rounded-circle bg-primary me-3" style="width: 8px; height: 8px;"></div>
                                    <div>
                                        <p class="mb-0 font-weight-semibold">新しいメッセージがあります!</p>
                                        <small class="text-muted">1時間前</small>
                                    </div>
                                </div>
                            </li>
                            <li class="pure-u-1 pure-u-md-1-3">
                                <div class="pure-u-1 pure-u-md-1-1">
                                    <div class="rounded-circle bg-primary me-3" style="width: 8px; height: 8px;"></div>
                                    <div>
                                        <p class="mb-0 font-weight-semibold">サブスクリプションが間もなく期限切れです!</p>
                                        <small class="text-muted">2時間前</small>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <button class="pure-button pure-button-primary w-100 mt-4">
                            すべて既読にする
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>