Paid-by-themewiki.top

Mẫu Bootrap đẹp 2022

Đăng nhận xét
Có rất nhiều template Bootstrap đẹp dành cho thiết kế trang Admin, tuy nhiên nhiều trang web phải trả phí. Hôm nay xin giới thiệu các bạn một số theme đẹp mà miễn phí, đảm bảo các bạn chỉ cần nhìn là hài lòng. Những template khác còn rất nhiều, tuy nhiên với cái nhìn “khó tính”, zonyone.com chỉ giới thiệu bạn vài template như sau.

Code mẫu 1


<style>/* <![CDATA[ */
table {
    table-layout: fixed;
    word-wrap: break-word;
    margin-top:auto;
    margin-bottom:auto;
}
.text-sm {
    font-size: 12px;
}
.price {
    font-size: 3em;
}
/* ]]> */</style>
<table class="table table-hover table-bordered" style="padding-left: 200px; padding-right: 200px; text-align: center;">
    <thead>
      <tr class="active">
          <th style="background: rgb(255, 255, 255);"><center></center></th>
          <th><center><h3>Basic</h3><p class="text-muted text-sm">Ideal for small operations.</p></center></th>
          <th><center><h3>Plus</h3><p class="text-muted text-sm">Perfect for larger operations.</p></center></th>
          <th><center><h3>Super</h3><p class="text-muted text-sm">Perfect for those who want software.</p></center></th>
          <th><center><h3>Platinum</h3><p class="text-muted text-sm">The best fit for larger operations.</p></center></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><br />Price</td>
        <td><h3 class="panel-title price">$399</h3></td>
        <td><h3 class="panel-title price">$699</h3></td>
        <td><h3 class="panel-title price">$799</h3></td>
        <td><h3 class="panel-title price">$1299</h3></td>
      </tr>
      <tr>
        <td align="left" class="active" colspan="5" style="padding-left: 20px;"><b>Website Features</b></td>
      </tr>
      <tr>
        <td>Responsive design</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
      <tr>
        <td>Scales to mobile</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
      <tr>
        <td>Contact Form</td>
        <td>-</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
            <tr>
        <td>Social Media Integration</td>
        <td>-</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
      <tr>
        <td>Custom Pages</td>
        <td>3</td>
        <td>10</td>
        <td>5</td>
        <td>13</td>
      </tr>
      <tr>
        <td>Storage</td>
        <td>2GB</td>
        <td>10GB</td>
        <td>10GB</td>
        <td>50GB</td>
      </tr>
      <tr>
        <td align="left" class="active" colspan="5" style="padding-left: 20px;"><b>Features</b></td>
      </tr>
            <tr>
        <td>Powerful Analytics</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
            <tr>
        <td>24/7 Support</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
      <tr>
        <td>Free Domain Name</td>
        <td>-</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td>-</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
      <tr>
        <td>Free SSL Certificate</td>
        <td>-</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td>-</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
            <tr>
        <td>SEO Setup</td>
        <td>Basic</td>
        <td>Advanced</td>
        <td>Basic</td>
        <td>Advanced</td>
      </tr>
      <tr>
        <td>Free Hosting</td>
        <td>6 Months</td>
        <td>1 Year</td>
        <td>6 Months</td>
        <td>1 Year</td>
      </tr>
      <tr>
        <td>Social Media Management</td>
        <td>+$60 p/m</td>
        <td>+$60 p/m</td>
        <td>+$60 p/m</td>
        <td>+$60 p/m</td>
      </tr>
              <tr>
        <td>Free Updates</td>
        <td>-</td>
        <td>For 3 Months</td>
        <td>-</td>
        <td>For 3 Months</td>
      </tr>
      <tr>
        <td align="left" class="active" colspan="5" style="padding-left: 20px;"><b>Integration</b></td>
      </tr>
      <tr>
        <td>Wordpress</td>
        <td>+$250</td>
        <td>+$250</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
      <tr>
        <td>Woocommerce</td>
        <td>+$250</td>
        <td>+$250</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
        <tr>
        <td>Joomla</td>
        <td>+$250</td>
        <td>+$250</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
        <tr>
        <td>Drupal</td>
        <td>+$250</td>
        <td>+$250</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
        <tr>
        <td>Ghost</td>
        <td>+$250</td>
        <td>+$250</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
        <tr>
        <td>Shopify</td>
        <td>+$250</td>
        <td>+$250</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
        <tr>
        <td>Opencart</td>
        <td>+$350</td>
        <td>+$350</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
        <tr>
        <td>Magento</td>
        <td>+$350</td>
        <td>+$350</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
        <tr>
        <td>Prestashop</td>
        <td>+$350</td>
        <td>+$350</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
        <tr>
        <td>phpBB</td>
        <td>+$250</td>
        <td>+$250</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
        <tr>
        <td>vBulletin</td>
        <td>+$250</td>
        <td>+$250</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
        <tr>
        <td>Invision Power</td>
        <td>+$250</td>
        <td>+$250</td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
        <td><i class="fa fa-check fa-lg" style="color: limegreen;"></i></td>
      </tr>
        <tr><td></td>
        <td><a class="btn btn-info" style="margin-bottom: 10px; margin-top: 10px;">Order Now</a></td>
        <td><a class="btn btn-info" style="margin-bottom: 10px; margin-top: 10px;">Order Now</a></td>
        <td><a class="btn btn-info" style="margin-bottom: 10px; margin-top: 10px;">Order Now</a></td>
        <td><a class="btn btn-info" style="margin-bottom: 10px; margin-top: 10px;">Order Now</a></td></tr>
    </tbody>
  </table>

Basic

Ideal for small operations.

Plus

Perfect for larger operations.

Super

Perfect for those who want software.

Platinum

The best fit for larger operations.

Price

$399

$699

$799

$1299
Website Features
Responsive design
Scales to mobile
Contact Form -
Social Media Integration -
Custom Pages 3 10 5 13
Storage 2GB 10GB 10GB 50GB
Features
Powerful Analytics
24/7 Support
Free Domain Name - -
Free SSL Certificate - -
SEO Setup Basic Advanced Basic Advanced
Free Hosting 6 Months 1 Year 6 Months 1 Year
Social Media Management +$60 p/m +$60 p/m +$60 p/m +$60 p/m
Free Updates - For 3 Months - For 3 Months
Integration
Wordpress +$250 +$250
Woocommerce +$250 +$250
Joomla +$250 +$250
Drupal +$250 +$250
Ghost +$250 +$250
Shopify +$250 +$250
Opencart +$350 +$350
Magento +$350 +$350
Prestashop +$350 +$350
phpBB +$250 +$250
vBulletin +$250 +$250
Invision Power +$250 +$250
Order Now Order Now Order Now Order Now

Mẫu Code 2


<style>/* <![CDATA[ */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800|Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat',sans-serif;
}
.cards{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
}
.cards h2.header{
  font-size: 40px;
  margin: 0 0 30px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.services{
  display: flex;
  align-items: center;
}
.content{
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin: 20px;
  padding: 20px;
  border: 2px solid black;
  border-radius: 4px;
  transition: all .3s ease;
}
.content .fab{
  font-size: 70px;
  margin: 16px 0;
}
.content > *{
  flex: 1 1 100%;
}
.content:hover{
  color: white;
}
.content:hover a{
  border-color: white;
  background: white;
}
.content-1:hover{
  border-color: #1DA1F2;
  background: #1DA1F2;
}
.content-1:hover a{
  color: #1DA1F2;
}
.content-2:hover{
  border-color: #E1306C;
  background: #E1306C;
}
.content-2:hover a{
  color: #E1306C;
}
.content-3:hover{
  border-color: #ff0000;
  background: #ff0000;
}
.content-3:hover a{
  color: #ff0000;
}
.content h2{
  font-size: 30px;
  margin: 16px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.content p{
  font-size: 17px;
  font-family: 'Poppins',sans-serif;
}
.content a{
  margin: 22px 0;
  background: black;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid black;
  padding: 15px 0;
  border-radius: 25px;
  transition: .3s ease;
}
.content a:hover{
  border-radius: 4px;
}
@media (max-width: 900px) {
  .services{
    display: flex;
    flex-direction: column;
  }
}
/* ]]> */</style>




<html dir="ltr" lang="en">
   <head>
      <meta charset="utf-8"></meta>
      <!-- <title>Responsive Cards</title> -->
      <link href="style.css" rel="stylesheet"></link>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"></link>
      <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
   </head>
   <body>
      <div class="cards">
         <h2 class="header">
            Responsive Cards CSS
         </h2>
         <div class="services">
            <div class="content content-1">
               <div class="fab fa-twitter"></div>
               <h2>
                  Twitter
               </h2>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?
               </p>
               <a href="#">Read More</a>
            </div>
            <div class="content content-2">
               <div class="fab fa-instagram"></div>
               <h2>
                  Instagram
               </h2>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?
               </p>
               <a href="#">Read More</a>
            </div>
            <div class="content content-3">
               <div class="fab fa-youtube"></div>
               <h2>
                  Youtube
               </h2>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?
               </p>
               <a href="#">Read More</a>
            </div>
         </div>
      </div>
   </body>
</html>

Responsive Cards CSS

Twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?

Read More

Instagram

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?

Read More

Youtube

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?

Read More

Đăng nhận xét

Đăng nhận xét