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(); ...@@ -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 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> <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 id="lienket">
<div class="btn btn-1"><a href="#">Đăng ký sử dụng</a></div> <div class="btn btn-1 wow zoomIn"><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-2 wow zoomIn"><a href="#">Đăng ký đại lý</a></div>
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <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 @@ ...@@ -11,7 +11,7 @@
} }
.img-image-cover { .img-image-cover {
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
height: 185px; height: 200px;
background-size: cover !important; background-size: cover !important;
} }
span.item-time { span.item-time {
...@@ -37,6 +37,10 @@ span.item-time { ...@@ -37,6 +37,10 @@ span.item-time {
font-family: Proxima Nova; font-family: Proxima Nova;
font-size: 20px; font-size: 20px;
color: #56BC86; color: #56BC86;
overflow: hidden;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.item-text p{ .item-text p{
......
wp-content/themes/ahoadonviet/css/hdv.css
...@@ -616,3 +616,95 @@ ul#footer-menu li a { ...@@ -616,3 +616,95 @@ ul#footer-menu li a {
display: block; display: block;
opacity: 1; 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 @@ ...@@ -9,12 +9,12 @@
?> ?>
<div class="col-lg-4 col-md-4 col-xs-4 col-md-4"> <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> <span class="item-time"><?php echo date("Y/m/d", get_post_time()); ?></span>
<a href="<?php echo esc_url(get_permalink()) ?>"> <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;"> <figure>
</div> <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"> <div class="card-body">
<h5 class="card-title item-title"><?php echo the_title() ?></h5> <h5 class="card-title item-title"><?php echo the_title() ?></h5>
</a> </a>
......
wp-content/themes/ahoadonviet/template-parts/homepage-tpl.php
...@@ -166,14 +166,16 @@ get_header(); ...@@ -166,14 +166,16 @@ get_header();
<h2>Tin tức nổi bật</h2> <h2>Tin tức nổi bật</h2>
<div class="row"> <div class="row">
<?php foreach($recent_posts as $post) : ?> <?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="col-xs-12 col-sm-12 col-md-4 col-lg-4 item ">
<div class="item-child" title="<?php echo $post['post_title'] ?>" > <div class="item-child imghover boxhover" title="<?php echo $post['post_title'] ?>" >
<?php $img_url = get_the_post_thumbnail_url($post['ID']); ?> <?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']) ?>" > <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> <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> </a>
</div> </div>
</figure>
<div class="title"><a href="<?php echo get_permalink($post['ID']) ?>"><?php echo $post['post_title'] ?></a></div> <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="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> <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' ); ...@@ -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 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> <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 id="lienket">
<div class="btn btn-1"><a href="#">Đăng ký sử dụng</a></div> <div class="btn btn-1 wow zoomIn"><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-2 wow zoomIn"><a href="#">Đăng ký đại lý</a></div>
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <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' ); ...@@ -46,41 +46,41 @@ $invoice_temp_09 = wp_get_attachment_image_src(69, '423x600' );
</div> </div>
<div class="row"> <div class="row">
<!-- Hàng 1 --> <!-- 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"> <img src="<?php echo $invoice_temp_01[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 1</p> <p class="invoice-template-name">Mẫu hóa đơn số 1</p>
</div> </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"> <img src="<?php echo $invoice_temp_02[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 2</p> <p class="invoice-template-name">Mẫu hóa đơn số 2</p>
</div> </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"> <img src="<?php echo $invoice_temp_03[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 3</p> <p class="invoice-template-name">Mẫu hóa đơn số 3</p>
</div> </div>
<!-- Hàng 2 --> <!-- 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"> <img src="<?php echo $invoice_temp_04[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 4</p> <p class="invoice-template-name">Mẫu hóa đơn số 4</p>
</div> </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"> <img src="<?php echo $invoice_temp_05[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 5</p> <p class="invoice-template-name">Mẫu hóa đơn số 5</p>
</div> </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"> <img src="<?php echo $invoice_temp_06[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 6</p> <p class="invoice-template-name">Mẫu hóa đơn số 6</p>
</div> </div>
<!-- Hàng 3 --> <!-- 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"> <img src="<?php echo $invoice_temp_07[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 7</p> <p class="invoice-template-name">Mẫu hóa đơn số 7</p>
</div> </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"> <img src="<?php echo $invoice_temp_08[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 8</p> <p class="invoice-template-name">Mẫu hóa đơn số 8</p>
</div> </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"> <img src="<?php echo $invoice_temp_09[0] ?>" class="img-fluid">
<p class="invoice-template-name">Mẫu hóa đơn số 9</p> <p class="invoice-template-name">Mẫu hóa đơn số 9</p>
</div> </div>
......
wp-content/themes/ahoadonviet/template-parts/price-tpl.php
...@@ -19,8 +19,8 @@ get_header(); ...@@ -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 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> <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 id="lienket">
<div class="btn btn-1"><a href="#">Đăng ký sử dụng</a></div> <div class="btn btn-1 wow zoomIn"><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-2 wow zoomIn"><a href="#">Đăng ký đại lý</a></div>
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
...@@ -34,7 +34,7 @@ get_header(); ...@@ -34,7 +34,7 @@ get_header();
<h2 class="prices-title">BẢNG GIÁ PHẦN MỀM A HÓA ĐƠN</h2> <h2 class="prices-title">BẢNG GIÁ PHẦN MỀM A HÓA ĐƠN</h2>
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <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> <h2 class="card-header"> HD1 3000 </h2>
<article class="card-body"> <article class="card-body">
<p class="card-text">Số hóa đơn</p> <p class="card-text">Số hóa đơn</p>
...@@ -46,7 +46,7 @@ get_header(); ...@@ -46,7 +46,7 @@ get_header();
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <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> <h2 class="card-header"> HD1 3000 </h2>
<article class="card-body"> <article class="card-body">
<p class="card-text">Số hóa đơn</p> <p class="card-text">Số hóa đơn</p>
...@@ -58,7 +58,7 @@ get_header(); ...@@ -58,7 +58,7 @@ get_header();
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <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> <h2 class="card-header"> HD1 3000 </h2>
<article class="card-body"> <article class="card-body">
<p class="card-text">Số hóa đơn</p> <p class="card-text">Số hóa đơn</p>
...@@ -70,7 +70,7 @@ get_header(); ...@@ -70,7 +70,7 @@ get_header();
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <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> <h2 class="card-header"> HD1 3000 </h2>
<article class="card-body"> <article class="card-body">
<p class="card-text">Số hóa đơn</p> <p class="card-text">Số hóa đơn</p>
...@@ -82,7 +82,7 @@ get_header(); ...@@ -82,7 +82,7 @@ get_header();
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <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> <h2 class="card-header"> HD1 3000 </h2>
<article class="card-body"> <article class="card-body">
<p class="card-text">Số hóa đơn</p> <p class="card-text">Số hóa đơn</p>
...@@ -94,7 +94,7 @@ get_header(); ...@@ -94,7 +94,7 @@ get_header();
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <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> <h2 class="card-header"> HD1 3000 </h2>
<article class="card-body"> <article class="card-body">
<p class="card-text">Số hóa đơn</p> <p class="card-text">Số hóa đơn</p>
...@@ -106,7 +106,7 @@ get_header(); ...@@ -106,7 +106,7 @@ get_header();
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <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> <h2 class="card-header"> HD1 3000 </h2>
<article class="card-body"> <article class="card-body">
<p class="card-text">Số hóa đơn</p> <p class="card-text">Số hóa đơn</p>
...@@ -118,7 +118,7 @@ get_header(); ...@@ -118,7 +118,7 @@ get_header();
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <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> <h2 class="card-header"> HD1 3000 </h2>
<article class="card-body"> <article class="card-body">
<p class="card-text">Số hóa đơn</p> <p class="card-text">Số hóa đơn</p>
...@@ -130,7 +130,7 @@ get_header(); ...@@ -130,7 +130,7 @@ get_header();
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <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> <h2 class="card-header"> HD1 3000 </h2>
<article class="card-body"> <article class="card-body">
<p class="card-text">Số hóa đơn</p> <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