Tất cả bài viết | Bootstrap

Hướng dẫn cách tạo thẻ VIP CARD với Bootstrap

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn cách tạo thẻ VIP CARD với Bootstrap

Bước 1: Tạo cấu trúc HTML

100

101

102

103

104

105

106

107

108

109

110

111

112

113

<div class="container"> 
 <div class="row"> 
  <h1 style="text-align:center">Thẻ học web online</h1>        
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">           
   <div class="offer offer-default">               
    <div class="shape">                    
     <div class="shape-text">                      MỚI                                                 </div>              
    </div>             
    <div class="offer-content">                    
     <h3 class="lead">                     VIP CARD 365                    </h3>                   
     <p>                       Thỏa sức học thiết kế web & lập trình web với tài khoản VIP365 tại website hocwebgiare.com                      
      <br> <i class="fa fa-hand-o-right"></i> Học phí: 500.000đ /1 năm 
      <br> <i class="fa fa-hand-o-right"></i> Áp dụng: Từ 24/02/2017 đến 28/02/2017 
      <br> <i class="fa fa-hand-o-right"></i> Ngày hết hạn đăng ký: Ngày 28/02/2017 
      <br> <i class="fa fa-phone"></i> Liên hệ: 0199 257 6350 - 0932 152 592                   
     </p> 
     <p style="text-align:right"><a href="https://hocwebgiare.com/dang-ky-thanh-vien-vip365.html" title="Đăng ký học thiết kế web"><button class="btn btn-default">Đăng ký ngay</button></a>
     </p>              
    </div>         
   </div>      
  </div>       
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">           
   <div class="offer offer-success">               
    <div class="shape">                    
     <div class="shape-text">                      MỚI                                                 </div>              
    </div>             
    <div class="offer-content">                    
     <h3 class="lead">                     VIP CARD 365                    </h3>                   
     <p>                       Thỏa sức học thiết kế web & lập trình web với tài khoản VIP365 tại website hocwebgiare.com                      
      <br> <i class="fa fa-hand-o-right"></i> Học phí: 500.000đ /1 năm 
      <br> <i class="fa fa-hand-o-right"></i> Áp dụng: Từ 24/02/2017 đến 28/02/2017 
      <br> <i class="fa fa-hand-o-right"></i> Ngày hết hạn đăng ký: Ngày 28/02/2017 
      <br> <i class="fa fa-phone"></i> Liên hệ: 0199 257 6350 - 0932 152 592                   
     </p> 
     <p style="text-align:right"><a href="https://hocwebgiare.com/dang-ky-thanh-vien-vip365.html" title="Đăng ký học thiết kế web"><button class="btn btn-success">Đăng ký ngay</button></a>
     </p>              
    </div>         
   </div>      
  </div>       
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">           
   <div class="offer offer-radius offer-primary">              
    <div class="shape">                    
     <div class="shape-text">                      MỚI                                                 </div>              
    </div>             
    <div class="offer-content">                    
     <h3 class="lead">                     VIP CARD 365                    </h3>                   
     <p>                       Thỏa sức học thiết kế web & lập trình web với tài khoản VIP365 tại website hocwebgiare.com                      
      <br> <i class="fa fa-hand-o-right"></i> Học phí: 500.000đ /1 năm 
      <br> <i class="fa fa-hand-o-right"></i> Áp dụng: Từ 24/02/2017 đến 28/02/2017 
      <br> <i class="fa fa-hand-o-right"></i> Ngày hết hạn đăng ký: Ngày 28/02/2017 
      <br> <i class="fa fa-phone"></i> Liên hệ: 0199 257 6350 - 0932 152 592                   
     </p> 
     <p style="text-align:right"><a href="https://hocwebgiare.com/dang-ky-thanh-vien-vip365.html" title="Đăng ký học thiết kế web"><button class="btn btn-primary">Đăng ký ngay</button></a>
     </p>              
    </div>         
   </div>      
  </div>       
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">           
   <div class="offer offer-info">              
    <div class="shape">                    
     <div class="shape-text">                      MỚI                                             </div>              
    </div>             
    <div class="offer-content">                    
     <h3 class="lead">                     VIP CARD 365                    </h3>                   
     <p>                       Thỏa sức học thiết kế web & lập trình web với tài khoản VIP365 tại website hocwebgiare.com                      
      <br> <i class="fa fa-hand-o-right"></i> Học phí: 500.000đ /1 năm 
      <br> <i class="fa fa-hand-o-right"></i> Áp dụng: Từ 24/02/2017 đến 28/02/2017 
      <br> <i class="fa fa-hand-o-right"></i> Ngày hết hạn đăng ký: Ngày 28/02/2017 
      <br> <i class="fa fa-phone"></i> Liên hệ: 0199 257 6350 - 0932 152 592                   
     </p> 
     <p style="text-align:right"><a href="https://hocwebgiare.com/dang-ky-thanh-vien-vip365.html" title="Đăng ký học thiết kế web"><button class="btn btn-info">Đăng ký ngay</button></a>
     </p>              
    </div>         
   </div>      
  </div>       
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">           
   <div class="offer offer-warning">               
    <div class="shape">                    
     <div class="shape-text">                      MỚI                                             </div>              
    </div>             
    <div class="offer-content">                    
     <h3 class="lead">                     VIP CARD 365                    </h3>                   
     <p>                       Thỏa sức học thiết kế web & lập trình web với tài khoản VIP365 tại website hocwebgiare.com                      
      <br> <i class="fa fa-hand-o-right"></i> Học phí: 500.000đ /1 năm 
      <br> <i class="fa fa-hand-o-right"></i> Áp dụng: Từ 24/02/2017 đến 28/02/2017 
      <br> <i class="fa fa-hand-o-right"></i> Ngày hết hạn đăng ký: Ngày 28/02/2017 
      <br> <i class="fa fa-phone"></i> Liên hệ: 0199 257 6350 - 0932 152 592                   
     </p> 
     <p style="text-align:right"><a href="https://hocwebgiare.com/dang-ky-thanh-vien-vip365.html" title="Đăng ký học thiết kế web"><button class="btn btn-warning">Đăng ký ngay</button></a>
     </p>              
    </div>         
   </div>      
  </div>       
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">           
   <div class="offer offer-radius offer-danger">               
    <div class="shape">                    
     <div class="shape-text">                      MỚI                                             </div>              
    </div>             
    <div class="offer-content">                    
     <h3 class="lead">                     VIP CARD 365                    </h3>                   
     <p>                       Thỏa sức học thiết kế web & lập trình web với tài khoản VIP365 tại website hocwebgiare.com                      
      <br> <i class="fa fa-hand-o-right"></i> Học phí: 500.000đ /1 năm 
      <br> <i class="fa fa-hand-o-right"></i> Áp dụng: Từ 24/02/2017 đến 28/02/2017 
      <br> <i class="fa fa-hand-o-right"></i> Ngày hết hạn đăng ký: Ngày 28/02/2017 
      <br> <i class="fa fa-phone"></i> Liên hệ: 0199 257 6350 - 0932 152 592                   
     </p> 
     <p style="text-align:right"><a href="https://hocwebgiare.com/dang-ky-thanh-vien-vip365.html" title="Đăng ký học thiết kế web"><button class="btn btn-danger">Đăng ký ngay</button></a>
     </p>              
    </div>         
   </div>      
  </div>       
 </div>
</div>

Bước 2: Định dạng CSS

.shape{     
border-style: solid; 
border-width: 0 70px 40px 0; 
float:right; 
height: 0px; 
width: 0px; 
-ms-transform:rotate(360deg);   
-o-transform: rotate(360deg);   
-webkit-transform:rotate(360deg);   
transform:rotate(360deg);
}
 
.offer{ 
background:#fff; 
border:1px solid #ddd; 
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
margin: 15px 0; overflow:hidden;
}
 
.shape {    
border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}
 
.offer-radius{  border-radius:7px;}
.offer-danger { border-color: #d9534f; }
.offer-danger .shape{   border-color: transparent #d9534f transparent transparent;}
.offer-success {    border-color: #5cb85c; }
.offer-success .shape{  border-color: transparent #5cb85c transparent transparent;}
.offer-default {    border-color: #999999; }
.offer-default .shape{  border-color: transparent #999999 transparent transparent;}
.offer-primary {    border-color: #428bca; }
.offer-primary .shape{  border-color: transparent #428bca transparent transparent;}
.offer-info {   border-color: #5bc0de; }.offer-info .shape{ border-color: transparent #5bc0de transparent transparent;}
.offer-warning {    border-color: #f0ad4e; }
.offer-warning .shape{  border-color: transparent #f0ad4e transparent transparent;}
 
 
.shape-text{    
color:#fff; 
font-size:12px; 
font-weight:bold; 
position:relative; 
right:-40px; 
top:2px; 
white-space: nowrap;    
-ms-transform:rotate(30deg);    
-o-transform: rotate(360deg);   
-webkit-transform:rotate(30deg);    
transform:rotate(30deg);
}   
 
.offer-content{ 
padding:0 20px 10px;
}
 
@media (min-width: 487px) {  
.container {    
max-width: 750px;  
}  
 
.col-sm-6 {    
width: 50%;  
}
}
 
@media (min-width: 900px) {  
.container {    
max-width: 970px;  
}  
 
.col-md-4 {    
width: 33.33333333333333%;  
}
}
 
 
@media (min-width: 1200px) {  
.container {    
max-width: 1170px;  
}  
.col-lg-4 {    
width: 33.33333333333333%;  
}  
}
}

Bước 3: Gọi thư viện Bootstrap và Font awesome

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Bước 4: Gọi thư viện JQUERY