Skip to content

A
ahoadon
Commit 34e4b3a6 by Pham Huy
Options

add animate

parent bac2a2a6
Showing with 131 additions and 32 deletions
wp-content/themes/ahoadonviet/archive.php
......@@ -29,8 +29,8 @@ get_header();
<p class="sub-tit">Giải pháp hóa đơn điện tử chuyên nghiệp</p>
<p><span class="txt-red">A hóa đơn</span> giúp dễ dàng tạo lập, phát hành, quản lý hóa đơn với nhiều tính năng cao cấp, phù hợp đa dạng loại hình, quy mô doanh nghiệp</p>
<div id="lienket">
<div class="btn btn-1"><a href="#">Đăng ký sử dụng</a></div>
<div class="btn btn-2"><a href="#">Đăng ký đại lý</a></div>
<div class="btn btn-1 wow zoomIn"><a href="#">Đăng ký sử dụng</a></div>
<div class="btn btn-2 wow zoomIn"><a href="#">Đăng ký đại lý</a></div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
......
wp-content/themes/ahoadonviet/css/hdv-huypq.css
......@@ -11,7 +11,7 @@
}
.img-image-cover {
border-radius: 10px 10px 0px 0px;
height: 185px;
height: 200px;
background-size: cover !important;
}
span.item-time {
......@@ -37,6 +37,10 @@ span.item-time {
font-family: Proxima Nova;
font-size: 20px;
color: #56BC86;
overflow: hidden;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item-text p{
......
wp-content/themes/ahoadonviet/css/hdv.css
......@@ -616,3 +616,95 @@ ul#footer-menu li a {
display: block;
opacity: 1;
}
/* hover image */
.boxhover {
padding: 0;
}
.boxhover::after {
content: '';
clear: both;
display: block;
}
.boxhover div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
margin: 0;
padding: 0;
overflow: hidden;
}
.imghover figure {
position: relative;
}
.imghover figure::before, .imghover figure::after {
position: absolute;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
visibility: hidden;
}
.imghover figure::before {
top: 0;
left: -75%;
background: -webkit-linear-gradient(left, #ffffffbc 0%, #56bc861a 100%);
background: linear-gradient(to right, #ffffffbc 0%, #56bc861a 100%);
}
.imghover figure::after {
bottom: 0;
right: -75%;
background: -webkit-linear-gradient(left, #56bc861a 0%, #ffffffbc 100%);
background: linear-gradient(to right, #56bc861a 0%, #ffffffbc 100%);
}
.imghover figure:hover::before {
-webkit-animation: shine .85s;
animation: shine .85s;
}
.imghover figure:hover::after {
-webkit-animation: shineup .85s;
animation: shineup .85s;
/* animation-delay: 0.75s; */
}
@-webkit-keyframes shine {
100% {
left: 125%;
visibility: visible;
}
}
@keyframes shine {
100% {
left: 125%;
visibility: visible;
}
}
@-webkit-keyframes shineup {
100% {
right: 125%;
visibility: visible;
}
}
@keyframes shineup {
100% {
right: 125%;
visibility: visible;
}
}
\ No newline at end of file
wp-content/themes/ahoadonviet/template-parts/content.php
......@@ -9,12 +9,12 @@
?>
<div class="col-lg-4 col-md-4 col-xs-4 col-md-4">
<div class="card item">
<div class="card item imghover boxhover">
<span class="item-time"><?php echo date("Y/m/d", get_post_time()); ?></span>
<a href="<?php echo esc_url(get_permalink()) ?>">
<div class="img-image-cover " style="background: url('<?php echo get_the_post_thumbnail_url(); ?>') no-repeat center center;">
</div>
<figure>
<div class="img-image-cover wow flipInY" style="background: url('<?php echo get_the_post_thumbnail_url(); ?>') no-repeat center center;"></div>
</figure>
<div class="card-body">
<h5 class="card-title item-title"><?php echo the_title() ?></h5>
</a>
......
wp-content/themes/ahoadonviet/template-parts/homepage-tpl.php
......@@ -166,14 +166,16 @@ get_header();
<h2>Tin tức nổi bật</h2>
<div class="row">
<?php foreach($recent_posts as $post) : ?>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 item wow slideInUp">
<div class="item-child" title="<?php echo $post['post_title'] ?>" >
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 item ">
<div class="item-child imghover boxhover" title="<?php echo $post['post_title'] ?>" >
<?php $img_url = get_the_post_thumbnail_url($post['ID']); ?>
<div class="img">
<figure>
<div class="img wow slideInUp">
<a href="<?php echo get_permalink($post['ID']) ?>" >
<div class="bg_img" style="height:200px;width:100%;background: url('<?php echo $img_url; ?>') no-repeat center center; background-size: cover;border-radius: 10px 10px 0px 0px;"></div>
</a>
</div>
</figure>
<div class="title"><a href="<?php echo get_permalink($post['ID']) ?>"><?php echo $post['post_title'] ?></a></div>
<div class="desc_ct item-text"><p><?php echo $post['post_excerpt']; ?></p></div>
<div class="lienket"><a href="<?php echo get_permalink($post['ID']) ?>">Xem thêm</a></div>
......
wp-content/themes/ahoadonviet/template-parts/invoice-template-tpl.php
......@@ -27,8 +27,8 @@ $invoice_temp_09 = wp_get_attachment_image_src(69, '423x600' );
<p class="sub-tit">Giải pháp hóa đơn điện tử chuyên nghiệp</p>
<p><span class="txt-red">A hóa đơn</span> giúp dễ dàng tạo lập, phát hành, quản lý hóa đơn với nhiều tính năng cao cấp, phù hợp đa dạng loại hình, quy mô doanh nghiệp</p>
<div id="lienket">
<div class="btn btn-1"><a href="#">Đăng ký sử dụng</a></div>
<div class="btn btn-2"><a href="#">Đăng ký đại lý</a></div>
<div class="btn btn-1 wow zoomIn"><a href="#">Đăng ký sử dụng</a></div>
<div class="btn btn-2 wow zoomIn"><a href="#">Đăng ký đại lý</a></div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
......@@ -46,41 +46,41 @@ $invoice_temp_09 = wp_get_attachment_image_src(69, '423x600' );
</div>
<div class="row">
<!-- Hàng 1 -->
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<div class="col-xs-12 col-sm-12 col-md-4 text-center wow flipInY">
<img src="<?php echo $invoice_temp_01[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 1</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<div class="col-xs-12 col-sm-12 col-md-4 text-center wow flipInY">
<img src="<?php echo $invoice_temp_02[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 2</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<div class="col-xs-12 col-sm-12 col-md-4 text-center wow flipInY">
<img src="<?php echo $invoice_temp_03[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 3</p>
</div>
<!-- Hàng 2 -->
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<div class="col-xs-12 col-sm-12 col-md-4 text-center wow flipInY">
<img src="<?php echo $invoice_temp_04[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 4</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<div class="col-xs-12 col-sm-12 col-md-4 text-center wow flipInY">
<img src="<?php echo $invoice_temp_05[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 5</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<div class="col-xs-12 col-sm-12 col-md-4 text-center wow flipInY">
<img src="<?php echo $invoice_temp_06[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 6</p>
</div>
<!-- Hàng 3 -->
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<div class="col-xs-12 col-sm-12 col-md-4 text-center wow flipInY">
<img src="<?php echo $invoice_temp_07[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 7</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<div class="col-xs-12 col-sm-12 col-md-4 text-center wow flipInY">
<img src="<?php echo $invoice_temp_08[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 8</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<div class="col-xs-12 col-sm-12 col-md-4 text-center wow flipInY">
<img src="<?php echo $invoice_temp_09[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 9</p>
</div>
......
wp-content/themes/ahoadonviet/template-parts/price-tpl.php
......@@ -19,8 +19,8 @@ get_header();
<p class="sub-tit">Giải pháp hóa đơn điện tử chuyên nghiệp</p>
<p><span class="txt-red">A hóa đơn</span> giúp dễ dàng tạo lập, phát hành, quản lý hóa đơn với nhiều tính năng cao cấp, phù hợp đa dạng loại hình, quy mô doanh nghiệp</p>
<div id="lienket">
<div class="btn btn-1"><a href="#">Đăng ký sử dụng</a></div>
<div class="btn btn-2"><a href="#">Đăng ký đại lý</a></div>
<div class="btn btn-1 wow zoomIn"><a href="#">Đăng ký sử dụng</a></div>
<div class="btn btn-2 wow zoomIn"><a href="#">Đăng ký đại lý</a></div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
......@@ -34,7 +34,7 @@ get_header();
<h2 class="prices-title">BẢNG GIÁ PHẦN MỀM A HÓA ĐƠN</h2>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="card text-center box-price">
<div class="card text-center box-price wow flipInY">
<h2 class="card-header"> HD1 3000 </h2>
<article class="card-body">
<p class="card-text">Số hóa đơn</p>
......@@ -46,7 +46,7 @@ get_header();
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="card text-center box-price">
<div class="card text-center box-price wow flipInY">
<h2 class="card-header"> HD1 3000 </h2>
<article class="card-body">
<p class="card-text">Số hóa đơn</p>
......@@ -58,7 +58,7 @@ get_header();
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="card text-center box-price">
<div class="card text-center box-price wow flipInY">
<h2 class="card-header"> HD1 3000 </h2>
<article class="card-body">
<p class="card-text">Số hóa đơn</p>
......@@ -70,7 +70,7 @@ get_header();
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="card text-center box-price">
<div class="card text-center box-price wow flipInY">
<h2 class="card-header"> HD1 3000 </h2>
<article class="card-body">
<p class="card-text">Số hóa đơn</p>
......@@ -82,7 +82,7 @@ get_header();
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="card text-center box-price">
<div class="card text-center box-price wow flipInY">
<h2 class="card-header"> HD1 3000 </h2>
<article class="card-body">
<p class="card-text">Số hóa đơn</p>
......@@ -94,7 +94,7 @@ get_header();
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="card text-center box-price">
<div class="card text-center box-price wow flipInY">
<h2 class="card-header"> HD1 3000 </h2>
<article class="card-body">
<p class="card-text">Số hóa đơn</p>
......@@ -106,7 +106,7 @@ get_header();
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="card text-center box-price">
<div class="card text-center box-price wow flipInY">
<h2 class="card-header"> HD1 3000 </h2>
<article class="card-body">
<p class="card-text">Số hóa đơn</p>
......@@ -118,7 +118,7 @@ get_header();
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="card text-center box-price">
<div class="card text-center box-price wow flipInY">
<h2 class="card-header"> HD1 3000 </h2>
<article class="card-body">
<p class="card-text">Số hóa đơn</p>
......@@ -130,7 +130,7 @@ get_header();
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="card text-center box-price">
<div class="card text-center box-price wow flipInY">
<h2 class="card-header"> HD1 3000 </h2>
<article class="card-body">
<p class="card-text">Số hóa đơn</p>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment