Cách tạo trang dịch vụ bằng Bootstrap và CSS3 Transition

Cách tạo trang dịch vụ bằng Bootstrap và CSS3 Transition

05:14
Chào các bạn hôn nay Dũ xin hướng dẫn các bạn tạo trang dịch vụ bằng Bootstrap và CSS3 Transition


Bước 1: Tạo cấu trúc HTML cho trang dịch vụ
<h1 align="center">Dịch vụ thiết kế website</h1>
<div class="container">
 <div class="row">
  <div class="col-md-4 col-sm-4">
   <div class="serviceBox">
    <div class="service-icon1"> <strong></strong> <em class="icons"> <i class="fa fa-laptop"></i> </em>
    </div>
    <div class="service-content">
     <h3><a href="http://www.minhdublog.com" title="Tư vấn thiết kế websit">Tư vấn thiết kế website</a>
     </h3>
     <p> www.minhdublog.com cung cấp một giải pháp tư vấn thiết kế website chuyên nghiệp... </p>
    </div>
   </div>
  </div>
  <div class="col-md-4 col-sm-4">
   <div class="serviceBox">
    <div class="service-icon2"> <strong></strong> <em class="icons"> <i class="fa fa-briefcase"></i> </em>
    </div>
    <div class="service-content">
     <h3><a href="http://www.minhdublog.com" title="Thiết kế web theo yêu cầu">Thiết kế web theo yêu cầu</a>
     </h3>
     <p> www.minhdublog.com cung cấp dịch vụ xây dựng thiết kế website theo yêu cầu ... </p>
    </div>
   </div>
  </div>
  <div class="col-md-4 col-sm-4">
   <div class="serviceBox">
    <div class="service-icon3"> <strong></strong> <em class="icons"> <i class="fa fa-mobile"></i> </em>
    </div>
    <div class="service-content">
     <h3><a href="http://www.minhdublog.com" title="Thiết kế web doanh nghiệp">Thiết kế web doanh nghiệp</a>
     </h3>
     <p> www.minhdublog.com cung cấp dịch vụ xây dựng thiết kế website chuyên nghiệp ... </p>
    </div>
   </div>
  </div>
 </div>
</div>
Bước 2: Định dạng CSS
<style type="text/css">.serviceBox {  
text-align: center;
}
.serviceBox .service-icon1, .serviceBox .service-icon2, .serviceBox .service-icon3, .serviceBox .service-icon4 {   
width: 229px;  
height: 229px; 
line-height: 229px;
display: block;
overflow: hidden;  
position: relative;
margin: 0 auto;
}
.serviceBox .service-icon1 strong, .serviceBox .service-icon2 strong, .serviceBox .service-icon3 strong, .serviceBox .service-icon4 strong {   
position: absolute;
top: 0;
left: 0;   
width: 100%;   
height: 100%;  
border-width: 13px;
border-style: solid;   
border-color: hsl(201, 94%, 74%) hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0) hsl(201, 94%, 74%); 
border-radius: 400px;  
transform: rotate(-45deg); 
transition: all 0.5s ease 0s;  
z-index: 1;
}
.serviceBox .service-icon1:hover strong, .serviceBox .service-icon2:hover strong, .serviceBox .service-icon3:hover strong, .serviceBox .service-icon4:hover strong {   
transform: rotate(315deg); 
transition: all 0.5s ease 0s;
}
.serviceBox .service-icon1 span, .serviceBox .service-icon2 span, .serviceBox .service-icon3 span, .serviceBox .service-icon4 span {   
position: absolute;
top: 0;
left: 0;   
width: 100%;   
height: 100%;  
border-width: 13px;
border-style: solid;   
border-color: hsl(0, 2%, 90%);  border-radius: 400px;   z-index: 0;
}
.serviceBox .icons, .serviceBox .icons, .serviceBox .icons, .serviceBox .icons {   
display: inline-block;
}
.serviceBox .icons i, .serviceBox .icons i, .serviceBox .icons i, .serviceBox .icons i {   
font-size: 70px;   
margin-top: 75px;  
transform: rotateY(0deg);  
transition: all 0.5s ease 0s;
}
.serviceBox .service-icon1:hover .icons i, .serviceBox .service-icon2:hover .icons i, .serviceBox .service-icon3:hover .icons i, .serviceBox .service-icon4:hover .icons i {   
transform: rotateY(360deg);
transition: all 0.5s ease 0s;
}
.serviceBox .service-content p {   
font-size: 13px;   
font-family: Arial;
color: hsl(0, 1%, 65%);
line-height: 24px; 
margin:10px 0; 
padding: 0 20px;
}
.serviceBox .read {
background: hsl(0, 0%, 36%);   
color: hsl(0, 0%, 100%);   
font-size: 18px;   
font-family: Arial;
line-height: 24px; 
text-transform: capitalize;
padding: 14px 32px 15px;   
display: inline-block; 
transition: all 0.2s ease 0s;
}
.serviceBox .read:hover {  
background:#ec0303;
text-decoration: none;
}
.serviceBox .service-icon2 span, .serviceBox .service-icon3 span, .serviceBox .service-icon4 span {
border-color: hsl(0, 2%, 90%);
}
.serviceBox .service-icon2 strong {
border-color: hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0) hsl(0, 97%, 47%) hsl(0, 97%, 47%);
}
.serviceBox .service-icon3 strong {
border-color: hsl(201, 94%, 74%) hsl(201, 94%, 74%) hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0);}.serviceBox .service-icon4 strong { 
border-color: hsla(0, 0%, 0%, 0) hsl(0, 97%, 47%) hsl(0, 97%, 47%) hsla(0, 0%, 0%, 0);
}
@media screen and (max-width: 990px) {
.serviceBox {
margin-bottom: 35px;
}
}</style>
Bước 3: Gọi thư viện Bootstrap và Font Awesome
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Bước 4: Gọi thư viện JQUERY
<script src="js/jquery-1.11.1.min.js"></script>
hoc web gia re
Phuong Thảo

Chia Sẻ

Bài viết liên quan

Next
« Prev Post
Previous
Next Post »

Đăng ký: Đăng Nhận xét (Atom)