tieptk/hurasoft_2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

20/02/2024

Browse Source
This commit is contained in:
Tieptk
2024-02-20 09:12:28 +07:00
parent 8b2b8c98f2
commit 4ce7b2e3e9
17 changed files with 2162 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
article-detail.html Normal file
View File

@@ -0,0 +1,266 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hurasoft</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<div class="header not-home">
<div class="container">
<div class="content-main-header d-flex align-items space-between">
<a href="/" class="logo">
<img src="./assets/images/logo.png" width="100%" height="100%" alt="logo">
</a>
<div class="list-menu d-flex align-items">
<a href="/lien-he" class="item active">About</a>
<div class="item">
<a href="" class="item-cate">Product <i class="fa-solid fa-angle-down"></i></a>
<div class="box box_list_cate">
</div>
</div>
<div class="item">
<a href="" class="item-cate">Service <i class="fa-solid fa-angle-down"></i></a>
<div class="box box_list_cate">
</div>
</div>
<a href="" class="item">What's new</a>
<a href="" class="item">Job</a>
<a href="" class="item">Contact</a>
</div>
<select class="box-translate">
<option value="">VN</option>
<option value="">EN</option>
</select>
</div>
</div>
</div>
<div class="page-article-detail">
<div class="container">
<div class="breadcrumb-global">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul clearfix d-flex align-items">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="/" itemprop="item" class="nopad-l">
<p itemprop="name">Trang chủ</p>
</a> <i>/</i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="{#CURRENT_URL#}" itemprop="item" class="nopad-l">
<p itemprop="name">What's new</p>
</a><i>/</i>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="{#CURRENT_URL#}" itemprop="item" class="nopad-l">
<p itemprop="name">Detail</p>
</a>
<meta itemprop="position" content="1">
</li>
</ol>
</div>
<div class="clearfix"></div>
<div class="content-article-detail d-flex">
<div class="content-left">
<div class="main-title">
<h1 class="name">Hướng dẫn quản lý website dành cho Admin đơn giản nhất
</h1>
<div class="d-flex align-items">
<div class="tag-category">Tech new</div>
<div class="time">02/01/2024</div>
</div>
</div>
<div class="content-main nd">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker
including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a
page when looking at its
layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of
letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop publishing
packages and web page
editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will
uncover many web sites
still in their infancy. Various versions have evolved over the years, sometimes by accident,
sometimes on purpose
(injected humour and the like).</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a
page when looking at its
layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of
letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop publishing
packages and web page
editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will
uncover many web sites
still in their infancy. Various versions have evolved over the years, sometimes by accident,
sometimes on purpose
(injected humour and the like).
</p>
</div>
<div class="icon-share d-flex align-items">
<p style="margin-right: 15px;">Share:</p>
<div class="list-icon d-flex align-items">
<a href=""><i class="fa-brands fa-facebook"></i></a>
<a href=""><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
</div>
<div class="content-right">
<div class="box-featured-news">
<h2 class="title">Tin nổi bật</h2>
<div class="list">
<div class="item-article d-flex align-items">
<a href="" class="image-article">
<img src="./assets/images/article-big.png" alt="">
</a>
<div class="content-article">
<a href="" class="name-article line-clamp-2">Hướng dẫn quản lý website dành cho
Admin đơn giản
nhất</a>
<div class="d-flex align-items">
<div class="tab-category">Tech news</div>
<div class="time">01/01/2024</div>
</div>
</div>
</div>
<div class="item-article d-flex align-items">
<a href="" class="image-article">
<img src="./assets/images/article-big.png" alt="">
</a>
<div class="content-article">
<a href="" class="name-article line-clamp-2">Hướng dẫn quản lý website dành cho
Admin đơn giản
nhất</a>
<div class="d-flex align-items">
<div class="tab-category">Tech news</div>
<div class="time">01/01/2024</div>
</div>
</div>
</div>
<div class="item-article d-flex align-items">
<a href="" class="image-article">
<img src="./assets/images/article-big.png" alt="">
</a>
<div class="content-article">
<a href="" class="name-article line-clamp-2">Hướng dẫn quản lý website dành cho
Admin đơn giản
nhất</a>
<div class="d-flex align-items">
<div class="tab-category">Tech news</div>
<div class="time">01/01/2024</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="contact-us">
<h2 class="title">Contact us for cousultation</h2>
<div class="form-contact">
<div class="content-contact">
<input type="text" class="input-contact" placeholder="Enter email or number phone">
<a href="javascript:void(0)" class="btn-submit">
<i class="fa-solid fa-paper-plane"></i>
</a>
</div>
</div>
</div>
<div class="main-footer">
<div class="container">
<div class="content-main-footer d-flex">
<div class="item-footer">
<b class="title">Hurasoft Company Limited</b>
<div class="cnt">
<p>ADDRESS: Floor 5 - No. 3, Lane 18 Yen Lang, Dong Da District, Hanoi City</p>
<p>Hotline: 02422.138.068 - 0904.580.181</p>
<p>Email: hotro@hurasoft.com</p>
</div>
</div>
<div class="item-footer">
<b class="title">Introduce</b>
<div class="cnt">
<a href="">About us</a>
<a href="">Client</a>
<a href="">Blog</a>
<a href="">Contact</a>
<a href="">Information security</a>
</div>
</div>
<div class="item-footer">
<b class="title">Product</b>
<div class="cnt">
<a href="">Hura8</a>
<a href="">Xstore</a>
<a href="">adMan</a>
<a href="">Chatngay</a>
</div>
</div>
<div class="item-footer">
<b class="title">Service</b>
<div class="cnt">
<a href="">eCommerce Management</a>
<a href="">Cloud Service</a>
<a href="">The infrastructure</a>
</div>
<div class="d-flex">
<a href="">
<img src="./assets/images/icon-zalo.png" width="27px" height="27px" alt="zalo">
</a>
<a href="" style="margin-left: 10px;">
<img src="./assets/images/icon-facebook.png" width="27px" height="27px" alt="facebook">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p>Copyright @2024 Hurasoft. GPKD số: 0106897291 do Sở Kế hoạch và Đầu tư Thành phố Hà Nội cấp</p>
</div>
</div>
</div>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>

233
article.html Normal file
View File

@@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hurasoft</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<div class="header not-home">
<div class="container">
<div class="content-main-header d-flex align-items space-between">
<a href="/" class="logo">
<img src="./assets/images/logo.png" width="100%" height="100%" alt="logo">
</a>
<div class="list-menu d-flex align-items">
<a href="/lien-he" class="item active">About</a>
<div class="item">
<a href="" class="item-cate">Product <i class="fa-solid fa-angle-down"></i></a>
<div class="box box_list_cate">
</div>
</div>
<div class="item">
<a href="" class="item-cate">Service <i class="fa-solid fa-angle-down"></i></a>
<div class="box box_list_cate">
</div>
</div>
<a href="" class="item">What's new</a>
<a href="" class="item">Job</a>
<a href="" class="item">Contact</a>
</div>
<select class="box-translate">
<option value="">VN</option>
<option value="">EN</option>
</select>
</div>
</div>
</div>
<div class="page-article">
<div class="container">
<div class="tab-list d-flex align-items space-center">
<a href="javascript:void(0)" class="item">All</a>
<a href="javascript:void(0)" class="item active">Tech news</a>
<a href="javascript:void(0)" class="item">INTERNAL NEWS</a>
</div>
<div class="top-article d-flex">
<div class="article-left">
<div class="item-article">
<a href="" class="image-article">
<img src="./assets/images/article-big.png" alt="">
</a>
<div class="content-article">
<a href="" class="name-article">Hướng dẫn quản lý website dành cho Admin đơn giản nhất</a>
<div class="d-flex align-items">
<div class="tab-category">Tech news</div>
<div class="time">01/01/2024</div>
</div>
</div>
</div>
</div>
<div class="article-right">
<div class="item-article d-flex">
<a href="" class="image-article">
<img src="./assets/images/article-big.png" alt="">
</a>
<div class="content-article">
<a href="" class="name-article">Hướng dẫn quản lý website dành cho Admin đơn giản nhất</a>
<div class="d-flex align-items">
<div class="tab-category">Tech news</div>
<div class="time">01/01/2024</div>
</div>
</div>
</div>
<div class="item-article d-flex">
<a href="" class="image-article">
<img src="./assets/images/article-big.png" alt="">
</a>
<div class="content-article">
<a href="" class="name-article">Hướng dẫn quản lý website dành cho Admin đơn giản nhất</a>
<div class="d-flex align-items">
<div class="tab-category">Tech news</div>
<div class="time">01/01/2024</div>
</div>
</div>
</div>
<div class="item-article d-flex">
<a href="" class="image-article">
<img src="./assets/images/article-big.png" alt="">
</a>
<div class="content-article">
<a href="" class="name-article">Hướng dẫn quản lý website dành cho Admin đơn giản nhất</a>
<div class="d-flex align-items">
<div class="tab-category">Tech news</div>
<div class="time">01/01/2024</div>
</div>
</div>
</div>
</div>
</div>
<div class="list-article d-flex flex-wrap">
<div class="item-article">
<a href="" class="image-article">
<img src="./assets/images/article-big.png" alt="">
</a>
<div class="content-article">
<a href="" class="name-article">Hướng dẫn quản lý website dành cho Admin đơn giản nhất</a>
<div class="d-flex align-items">
<div class="tab-category">Tech news</div>
<div class="time">01/01/2024</div>
</div>
</div>
</div>
<div class="item-article">
<a href="" class="image-article">
<img src="./assets/images/article-big.png" alt="">
</a>
<div class="content-article">
<a href="" class="name-article">Hướng dẫn quản lý website dành cho Admin đơn giản nhất</a>
<div class="d-flex align-items">
<div class="tab-category">Tech news</div>
<div class="time">01/01/2024</div>
</div>
</div>
</div>
<div class="item-article">
<a href="" class="image-article">
<img src="./assets/images/article-big.png" alt="">
</a>
<div class="content-article">
<a href="" class="name-article">Hướng dẫn quản lý website dành cho Admin đơn giản nhất</a>
<div class="d-flex align-items">
<div class="tab-category">Tech news</div>
<div class="time">01/01/2024</div>
</div>
</div>
</div>
</div>
<div class="paging d-flex align-items space-center">
<a href="" class="item"><i class="fa-solid fa-angles-left"></i></a>
<a href="" class="item active">1</a>
<a href="" class="item">2</a>
<a href="" class="item">3</a>
<a href="" class="item">4</a>
<a href="" class="item">...</a>
<a href="" class="item">9</a>
<a href="" class="item"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
</div>
<div class="footer">
<div class="contact-us">
<h2 class="title">Contact us for cousultation</h2>
<div class="form-contact">
<div class="content-contact">
<input type="text" class="input-contact" placeholder="Enter email or number phone">
<a href="javascript:void(0)" class="btn-submit">
<i class="fa-solid fa-paper-plane"></i>
</a>
</div>
</div>
</div>
<div class="main-footer">
<div class="container">
<div class="content-main-footer d-flex">
<div class="item-footer">
<b class="title">Hurasoft Company Limited</b>
<div class="cnt">
<p>ADDRESS: Floor 5 - No. 3, Lane 18 Yen Lang, Dong Da District, Hanoi City</p>
<p>Hotline: 02422.138.068 - 0904.580.181</p>
<p>Email: hotro@hurasoft.com</p>
</div>
</div>
<div class="item-footer">
<b class="title">Introduce</b>
<div class="cnt">
<a href="">About us</a>
<a href="">Client</a>
<a href="">Blog</a>
<a href="">Contact</a>
<a href="">Information security</a>
</div>
</div>
<div class="item-footer">
<b class="title">Product</b>
<div class="cnt">
<a href="">Hura8</a>
<a href="">Xstore</a>
<a href="">adMan</a>
<a href="">Chatngay</a>
</div>
</div>
<div class="item-footer">
<b class="title">Service</b>
<div class="cnt">
<a href="">eCommerce Management</a>
<a href="">Cloud Service</a>
<a href="">The infrastructure</a>
</div>
<div class="d-flex">
<a href="">
<img src="./assets/images/icon-zalo.png" width="27px" height="27px" alt="zalo">
</a>
<a href="" style="margin-left: 10px;">
<img src="./assets/images/icon-facebook.png" width="27px" height="27px" alt="facebook">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p>Copyright @2024 Hurasoft. GPKD số: 0106897291 do Sở Kế hoạch và Đầu tư Thành phố Hà Nội cấp</p>
</div>
</div>
</div>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>

507
assets/css/style.css
View File

@@ -116,35 +116,35 @@ table {
}
.line-clamp-1 {
display: -webkit-box;
display: -webkit-box !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
display: -webkit-box;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
display: -webkit-box !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-4 {
display: -webkit-box;
display: -webkit-box !important;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-5 {
display: -webkit-box;
display: -webkit-box !important;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
@@ -217,6 +217,9 @@ table {
outline: none;
font-weight: bold;
}
.header.not-home {
box-shadow: 0px 0px 6.6999998093px 0px rgba(135, 135, 135, 0.25);
}
.homepage .banner {
background: url(../images/banner_home.png) no-repeat;
@@ -699,4 +702,498 @@ table {
margin-right: 20px;
padding: 20px;
border-radius: 20px;
background: rgb(235, 253, 255);
}
.page-product .item-product .left {
width: calc(100% - 300px);
}
.page-product .item-product .right {
width: 300px;
}
.page-product .item-product.blue {
background: rgb(57, 104, 218);
}
.page-product .item-product.blue .desc {
color: #fff;
}
.page-product .item-product.blue .logo img {
filter: brightness(0) invert(1);
}
.page-product .item-product.blue .link {
background: #fff;
}
.page-product .item-product.blue .link span {
background-image: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-product .item-product .desc {
font-size: 16px;
margin: 20px 0;
}
.page-product .item-product .link {
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
border-radius: 50px;
width: 135px;
height: 40px;
display: block;
text-align: center;
font-size: 16px;
color: #fff;
font-weight: 700;
line-height: 40px;
}
.page-service .title {
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 36px;
font-weight: 700;
text-align: center;
margin: 60px 0;
}
.page-service .list-service {
margin-right: -20px;
}
.page-service .item-service {
padding: 60px 0 100px 0;
width: calc(33.3333333333% - 20px);
margin-right: 20px;
background: rgb(217, 241, 255);
border-radius: 200px;
}
.page-service .item-service .image {
display: block;
margin: 0 auto;
height: 270px;
}
.page-service .item-service .image img {
display: block;
margin: 0 auto;
height: auto;
}
.page-service .item-service .content {
padding: 0 40px;
}
.page-service .item-service .name {
padding: 30px 0;
text-align: center;
font-size: 24px;
font-weight: 700;
color: rgb(12, 88, 139);
display: block;
}
.page-service .item-service .note {
color: rgb(85, 85, 85);
font-size: 15px;
text-align: center;
}
.page-service .item-service:nth-child(2) {
background: rgb(247, 234, 255);
}
.page-service .item-service:nth-child(3) {
background: rgb(234, 255, 249);
}
.item-article .image-article {
margin-bottom: 10px;
overflow: hidden;
display: block;
border-radius: 10px;
}
.item-article .image-article img {
width: 100%;
height: 100%;
display: block;
border-radius: 10px;
transition: 0.5s all;
transform: scale(1);
}
.item-article .image-article:hover img {
transform: scale(1.02);
transition: 0.5s all;
}
.item-article .name-article {
font-size: 16px;
font-weight: 700;
display: block;
margin-bottom: 10px;
}
.item-article .tab-category {
padding: 5px 15px;
background: rgb(211, 211, 211);
margin-right: 10px;
border-radius: 50px;
font-size: 15px;
}
.item-article .time {
color: rgb(85, 85, 85);
}
.page-article .tab-list {
padding: 50px 0;
border-bottom: 1px solid rgb(217, 217, 217);
}
.page-article .tab-list .item {
margin-right: 15px;
padding: 15px 30px;
border: 1px solid rgb(217, 217, 217);
border-radius: 50px;
color: rgb(85, 85, 85);
text-transform: uppercase;
font-size: 18px;
}
.page-article .tab-list .item.active {
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
color: #fff;
font-weight: 700;
padding: 15px 70px;
}
.page-article .top-article {
padding: 50px 0;
border-bottom: 1px solid rgb(217, 217, 217);
}
.page-article .top-article .article-left {
width: 50%;
margin-right: 15px;
}
.page-article .top-article .article-left .image-article {
height: 440px;
width: 100%;
display: block;
margin-bottom: 10px;
}
.page-article .top-article .article-left .image-article img {
width: 100%;
height: 100%;
display: block;
border-radius: 10px;
}
.page-article .top-article .article-right {
width: calc(50% - 15px);
}
.page-article .top-article .article-right .image-article {
height: 160px;
width: 290px;
margin-right: 10px;
}
.page-article .top-article .article-right .item-article {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid rgb(217, 217, 217);
}
.page-article .top-article .article-right .item-article:last-child {
border-bottom: 0;
}
.page-article .top-article .article-right .content-article {
width: calc(100% - 170px);
}
.page-article .list-article .item-article {
width: calc(33.3333333333% - 10px);
margin-right: 10px;
margin-bottom: 20px;
}
.page-article .list-article .image-article {
width: 100%;
height: 250px;
display: block;
margin-bottom: 10px;
}
.page-article .list-article .name-article:hover {
background: var(--color-active);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.paging {
margin-top: 20px;
}
.paging .item {
width: 35px;
height: 35px;
margin-right: 10px;
line-height: 36px;
background: rgb(234, 234, 234);
text-align: center;
border-radius: 50%;
}
.paging .item.active, .paging .item:hover {
background: linear-gradient(180deg, #1d8bca 0%, #0c588b 100%);
color: #fff;
}
.breadcrumb-global {
margin: 20px 0;
color: rgb(85, 85, 85);
}
.breadcrumb-global i {
margin: 0 10px;
display: block;
}
.breadcrumb-global li {
display: flex;
align-items: center;
}
.page-article-detail .content-left {
width: 65%;
margin-right: 20px;
}
.page-article-detail .content-right {
width: calc(35% - 20px);
}
.page-article-detail .main-title {
padding: 15px 0;
border-bottom: 1px solid rgb(217, 217, 217);
margin-bottom: 15px;
}
.page-article-detail .main-title .name {
font-size: 24px;
margin-bottom: 10px;
}
.page-article-detail .main-title .tag-category {
padding: 5px 15px;
background: rgb(211, 211, 211);
margin-right: 10px;
border-radius: 50px;
font-size: 15px;
}
.page-article-detail .main-title .time {
color: rgb(85, 85, 85);
}
.page-article-detail .icon-share {
padding-top: 15px;
margin-top: 15px;
border-top: 1px solid #d9d9d9;
}
.page-article-detail .icon-share a {
margin-left: 10px;
}
.page-article-detail .box-featured-news .title {
height: 40px;
width: 100%;
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
padding: 0 20px;
line-height: 40px;
color: #fff;
font-size: 18px;
font-weight: 700;
border-radius: 10px 10px 0 0;
}
.page-article-detail .box-featured-news .list {
padding: 15px;
border: 1px solid #d9d9d9;
border-top: 0;
}
.page-article-detail .box-featured-news .image-article {
width: 140px;
height: 85px;
margin-right: 10px;
}
.page-article-detail .box-featured-news .content-article {
width: calc(100% - 155px);
}
.nd p {
line-height: 23px;
font-size: 15px;
color: rgb(85, 85, 85);
}
.page-job .banner-job {
background: url(../images/background_job.png) no-repeat;
background-size: 100%;
height: 470px;
position: relative;
}
.page-job .banner-job .content-search {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.page-job .banner-job .title {
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
text-transform: capitalize;
font-size: 32px;
margin-bottom: 15px;
text-align: center;
}
.page-job .banner-job .note {
font-size: 20px;
text-align: center;
color: rgb(85, 85, 85);
margin-bottom: 25px;
}
.page-job .form-search-job {
display: flex;
padding: 55px 30px;
background: rgba(39, 39, 39, 0.2);
border-radius: 42px;
}
.page-job .form-search-job .input {
width: 595px;
height: 50px;
background: #fff;
margin-right: 20px;
border-radius: 60px;
padding: 0 20px;
}
.page-job .form-search-job .input input {
background: transparent;
outline: none;
border: 0;
width: calc(100% - 40px);
}
.page-job .form-search-job .input input::-moz-placeholder {
color: rgb(167, 166, 166);
}
.page-job .form-search-job .input input::placeholder {
color: rgb(167, 166, 166);
}
.page-job .form-search-job .input i {
width: 40px;
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
font-size: 24px;
}
.page-job .form-search-job .btn-search {
width: 160px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 18px;
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
border-radius: 60px;
}
.page-job .content-list-job {
padding: 25px 0;
}
.page-job .filter-job {
width: 390px;
margin-right: 15px;
}
.page-job .title-filter {
width: 100%;
height: 45px;
line-height: 45px;
background: rgb(12, 88, 139);
padding: 0 15px;
color: #fff;
border-radius: 50px;
cursor: pointer;
}
.page-job .title-filter span {
font-weight: 700;
}
.page-job .item-filter {
background: rgb(248, 248, 248);
border-radius: 20px;
margin-bottom: 30px;
}
.page-job .item-filter.hidden .content-filter {
height: 0;
padding: 0;
overflow: hidden;
}
.page-job .item-filter.hidden .title-filter i::before {
content: "\f107";
}
.page-job .icon-check {
width: 20px;
height: 20px;
margin-right: 10px;
border: 1px solid rgb(176, 176, 176);
position: relative;
z-index: 9;
border-radius: 4px;
overflow: hidden;
}
.page-job .icon-check.checkered {
border: 0;
}
.page-job .icon-check.checkered::before {
position: absolute;
content: "\f00c";
left: 50%;
top: 50%;
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 12px;
transform: translate(-50%, -50%);
background: var(--color-active);
width: 100%;
height: 100%;
color: #fff;
text-align: center;
line-height: 20px;
}
.page-job .content-filter {
padding: 20px;
height: 100%;
}
.page-job .item-attr {
padding-bottom: 15px;
}
.page-job .filter-right {
color: rgb(85, 85, 85);
}
.page-job .list-job {
width: calc(100% - 390px - 15px);
}
.page-job .item-job {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #d9d9d9;
}
.page-job .item-job .name-job {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
}
.page-job .item-job .desc-job {
color: rgb(85, 85, 85);
font-size: 15px;
margin-bottom: 25px;
}
.page-job .item-job .info-job {
margin-bottom: 15px;
}
.page-job .item-job .info-job .salary {
padding-right: 20px;
border-right: 2px solid rgb(170, 170, 170);
}
.page-job .item-job .info-job .salary b {
margin-left: 5px;
}
.page-job .item-job .info-job .time {
padding-left: 20px;
}
.page-job .item-job .info-job .time b {
margin-left: 5px;
}
.page-job .item-job .btn-apply {
display: block;
width: 150px;
height: 40px;
line-height: 40px;
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
text-align: center;
font-size: 15px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
border-radius: 50px;
}/*# sourceMappingURL=style.css.map */

2
assets/css/style.css.map
View File

File diff suppressed because one or more lines are too long

524
assets/css/style.scss
View File

@@ -111,33 +111,33 @@ table {
flex-direction: column;
}
.line-clamp-1 {
display: -webkit-box;
display: -webkit-box !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
display: -webkit-box;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
display: -webkit-box !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-4 {
display: -webkit-box;
display: -webkit-box !important;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-5 {
display: -webkit-box;
display: -webkit-box !important;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
@@ -210,6 +210,9 @@ table {
outline: none;
font-weight: bold;
}
&.not-home {
box-shadow: 0px 0px 6.699999809265137px 0px rgba(135, 135, 135, 0.25);
}
}
.homepage {
@@ -700,5 +703,516 @@ table {
margin-right: 20px;
padding: 20px;
border-radius: 20px;
background: rgba(235, 253, 255, 1);
.left {
width: calc(100% - 300px);
}
.right {
width: 300px;
}
&.blue {
background: rgba(57, 104, 218, 1);
.desc {
color: #fff;
}
.logo {
img {
filter: brightness(0) invert(1);
}
}
.link {
background: #fff;
span {
background-image: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
.desc {
font-size: 16px;
margin: 20px 0;
}
.link {
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
border-radius: 50px;
width: 135px;
height: 40px;
display: block;
text-align: center;
font-size: 16px;
color: #fff;
font-weight: 700;
line-height: 40px;
}
}
}
.page-service {
.title {
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 36px;
font-weight: 700;
text-align: center;
margin: 60px 0;
}
.list-service {
margin-right: -20px;
}
.item-service {
padding: 60px 0 100px 0;
width: calc(100% / 3 - 20px);
margin-right: 20px;
background: rgba(217, 241, 255, 1);
border-radius: 200px;
.image {
display: block;
margin: 0 auto;
height: 270px;
img {
display: block;
margin: 0 auto;
height: auto;
}
}
.content {
padding: 0 40px;
}
.name {
padding: 30px 0;
text-align: center;
font-size: 24px;
font-weight: 700;
color: rgba(12, 88, 139, 1);
display: block;
}
.note {
color: rgba(85, 85, 85, 1);
font-size: 15px;
text-align: center;
}
&:nth-child(2) {
background: rgba(247, 234, 255, 1);
}
&:nth-child(3) {
background: rgba(234, 255, 249, 1);
}
}
}
.item-article {
.image-article {
margin-bottom: 10px;
overflow: hidden;
display: block;
border-radius: 10px;
img {
width: 100%;
height: 100%;
display: block;
border-radius: 10px;
transition: 0.5s all;
transform: scale(1);
}
&:hover {
img {
transform: scale(1.02);
transition: 0.5s all;
}
}
}
.name-article {
font-size: 16px;
font-weight: 700;
display: block;
margin-bottom: 10px;
}
.tab-category {
padding: 5px 15px;
background: rgba(211, 211, 211, 1);
margin-right: 10px;
border-radius: 50px;
font-size: 15px;
}
.time {
color: rgba(85, 85, 85, 1);
}
}
.page-article {
.tab-list {
padding: 50px 0;
border-bottom: 1px solid rgba(217, 217, 217, 1);
.item {
margin-right: 15px;
padding: 15px 30px;
border: 1px solid rgba(217, 217, 217, 1);
border-radius: 50px;
color: rgba(85, 85, 85, 1);
text-transform: uppercase;
font-size: 18px;
&.active {
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
color: #fff;
font-weight: 700;
padding: 15px 70px;
}
}
}
.top-article {
padding: 50px 0;
border-bottom: 1px solid rgba(217, 217, 217, 1);
.article-left {
width: 50%;
margin-right: 15px;
.image-article {
height: 440px;
width: 100%;
display: block;
margin-bottom: 10px;
img {
width: 100%;
height: 100%;
display: block;
border-radius: 10px;
}
}
}
.article-right {
width: calc(50% - 15px);
.image-article {
height: 160px;
width: 290px;
margin-right: 10px;
}
.item-article {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(217, 217, 217, 1);
&:last-child {
border-bottom: 0;
}
}
.content-article {
width: calc(100% - 170px);
}
}
}
.list-article {
.item-article {
width: calc(100% / 3 - 10px);
margin-right: 10px;
margin-bottom: 20px;
}
.image-article {
width: 100%;
height: 250px;
display: block;
margin-bottom: 10px;
}
.name-article {
&:hover {
background: var(--color-active);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
.paging {
margin-top: 20px;
.item {
width: 35px;
height: 35px;
margin-right: 10px;
line-height: 36px;
background: rgba(234, 234, 234, 1);
text-align: center;
border-radius: 50%;
&.active,
&:hover {
background: linear-gradient(180deg, #1d8bca 0%, #0c588b 100%);
color: #fff;
}
}
}
.breadcrumb-global {
margin: 20px 0;
color: rgba(85, 85, 85, 1);
i {
margin: 0 10px;
display: block;
}
li {
display: flex;
align-items: center;
}
}
.page-article-detail {
.content-left {
width: 65%;
margin-right: 20px;
}
.content-right {
width: calc(35% - 20px);
}
.main-title {
padding: 15px 0;
border-bottom: 1px solid rgba(217, 217, 217, 1);
margin-bottom: 15px;
.name {
font-size: 24px;
margin-bottom: 10px;
}
.tag-category {
padding: 5px 15px;
background: rgba(211, 211, 211, 1);
margin-right: 10px;
border-radius: 50px;
font-size: 15px;
}
.time {
color: rgba(85, 85, 85, 1);
}
}
.icon-share {
padding-top: 15px;
margin-top: 15px;
border-top: 1px solid #d9d9d9;
a {
margin-left: 10px;
}
}
.box-featured-news {
.title {
height: 40px;
width: 100%;
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
padding: 0 20px;
line-height: 40px;
color: #fff;
font-size: 18px;
font-weight: 700;
border-radius: 10px 10px 0 0;
}
.list {
padding: 15px;
border: 1px solid #d9d9d9;
border-top: 0;
}
.image-article {
width: 140px;
height: 85px;
margin-right: 10px;
}
.content-article {
width: calc(100% - 155px);
}
}
}
.nd p {
line-height: 23px;
font-size: 15px;
color: rgba(85, 85, 85, 1);
}
.page-job {
.banner-job {
background: url(../images/background_job.png) no-repeat;
background-size: 100%;
height: 470px;
position: relative;
.content-search {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.title {
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
text-transform: capitalize;
font-size: 32px;
margin-bottom: 15px;
text-align: center;
}
.note {
font-size: 20px;
text-align: center;
color: rgba(85, 85, 85, 1);
margin-bottom: 25px;
}
}
.form-search-job {
display: flex;
padding: 55px 30px;
background: rgb(39 39 39 / 20%);
border-radius: 42px;
.input {
width: 595px;
height: 50px;
background: #fff;
margin-right: 20px;
border-radius: 60px;
padding: 0 20px;
input {
background: transparent;
outline: none;
border: 0;
width: calc(100% - 40px);
&::placeholder {
color: rgba(167, 166, 166, 1);
}
}
i {
width: 40px;
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
font-size: 24px;
}
}
.btn-search {
width: 160px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 18px;
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
border-radius: 60px;
}
}
.content-list-job {
padding: 25px 0;
}
.filter-job {
width: 390px;
margin-right: 15px;
}
.title-filter {
width: 100%;
height: 45px;
line-height: 45px;
background: rgba(12, 88, 139, 1);
padding: 0 15px;
color: #fff;
border-radius: 50px;
cursor: pointer;
span {
font-weight: 700;
}
}
.item-filter {
background: rgba(248, 248, 248, 1);
border-radius: 20px;
margin-bottom: 30px;
&.hidden {
.content-filter {
height: 0;
padding: 0;
overflow: hidden;
}
.title-filter {
i::before {
content: "\f107";
}
}
}
}
.icon-check {
width: 20px;
height: 20px;
margin-right: 10px;
border: 1px solid rgba(176, 176, 176, 1);
position: relative;
z-index: 9;
border-radius: 4px;
overflow: hidden;
&.checkered {
border: 0;
}
&.checkered::before {
position: absolute;
content: "\f00c";
left: 50%;
top: 50%;
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 12px;
transform: translate(-50%, -50%);
background: var(--color-active);
width: 100%;
height: 100%;
color: #fff;
text-align: center;
line-height: 20px;
}
}
.content-filter {
padding: 20px;
height: 100%;
}
.item-attr {
padding-bottom: 15px;
}
.filter-right {
color: rgba(85, 85, 85, 1);
}
.list-job {
width: calc(100% - 390px - 15px);
}
.item-job {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #d9d9d9;
.name-job {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
}
.desc-job {
color: rgba(85, 85, 85, 1);
font-size: 15px;
margin-bottom: 25px;
}
.info-job {
margin-bottom: 15px;
.salary {
padding-right: 20px;
border-right: 2px solid rgba(170, 170, 170, 1);
b {
margin-left: 5px;
}
}
.time {
padding-left: 20px;
b {
margin-left: 5px;
}
}
}
.btn-apply {
display: block;
width: 150px;
height: 40px;
line-height: 40px;
background: linear-gradient(90deg, #1fa5f1 0%, #2257bb 100%);
text-align: center;
font-size: 15px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
border-radius: 50px;
}
}
}

BIN
assets/images/article-big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 494 KiB

BIN
assets/images/background_job.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
assets/images/banner-contact.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 374 KiB

BIN
assets/images/icon-service-cloud.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 KiB

BIN
assets/images/icon-service-ecommerce.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
assets/images/icon-service-software.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

14
assets/js/main.js
View File

@@ -17,4 +17,16 @@ $(document).ready(function () {
clickable: true,
},
});
});
clickFillter();
});
function clickFillter() {
$(".item-filter").each(function () {
var nutClick = $(this).find(".title-filter");
$(nutClick).click(function () {
$(this).parent().toggleClass("hidden");
})
})
}

166
contact.html Normal file
View File

@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hurasoft</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<div class="header not-home">
<div class="container">
<div class="content-main-header d-flex align-items space-between">
<a href="/" class="logo">
<img src="./assets/images/logo.png" width="100%" height="100%" alt="logo">
</a>
<div class="list-menu d-flex align-items">
<a href="/lien-he" class="item active">About</a>
<div class="item">
<a href="" class="item-cate">Product <i class="fa-solid fa-angle-down"></i></a>
<div class="box box_list_cate">
</div>
</div>
<div class="item">
<a href="" class="item-cate">Service <i class="fa-solid fa-angle-down"></i></a>
<div class="box box_list_cate">
</div>
</div>
<a href="" class="item">What's new</a>
<a href="" class="item">Job</a>
<a href="" class="item">Contact</a>
</div>
<select class="box-translate">
<option value="">VN</option>
<option value="">EN</option>
</select>
</div>
</div>
</div>
<div class="page-contact">
<a href="" class="banner-contact">
<img src="./assets/images/banner-contact.png" width="100%" height="100%" alt="banner-contact">
</a>
<div class="container">
<div class="content-contact d-flex">
<div class="contact-left">
<h1 class="title">Contact us</h1>
<div class="item">
<b>ADDRESS:</b>
<p>Floor 5 - No. 3, Lane 18 Yen Lang, Dong Da District, Hanoi City
</p>
</div>
<div class="item">
<b>Hotline:</b>
<p>02422.138.068 - 0904.580.181</p>
</div>
<div class="item">
<b>Email:</b>
<p>hotro@hurasoft.com</p>
</div>
</div>
<div class="content-right">
<div class="form-control">
<input type="text" id="contact_name_detail" placeholder="Full name*">
</div>
<div class="d-flex align-items">
<div class="form-2">
<input type="text" id="contact_email_detail" placeholder="Email*">
</div>
<div class="form-2">
<input type="text" id="contact_tel_detail" placeholder="Phone*">
</div>
</div>
<div class="form-control">
<input type="text" id="contact_web_detail" placeholder="Website">
</div>
<div class="form-control">
<input type="text" id="contact_message_detail" placeholder="Content">
</div>
<a href="javascript:void(0)" class="btn-send">Send require</a>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="contact-us">
<h2 class="title">Contact us for cousultation</h2>
<div class="form-contact">
<div class="content-contact">
<input type="text" class="input-contact" placeholder="Enter email or number phone">
<a href="javascript:void(0)" class="btn-submit">
<i class="fa-solid fa-paper-plane"></i>
</a>
</div>
</div>
</div>
<div class="main-footer">
<div class="container">
<div class="content-main-footer d-flex">
<div class="item-footer">
<b class="title">Hurasoft Company Limited</b>
<div class="cnt">
<p>ADDRESS: Floor 5 - No. 3, Lane 18 Yen Lang, Dong Da District, Hanoi City</p>
<p>Hotline: 02422.138.068 - 0904.580.181</p>
<p>Email: hotro@hurasoft.com</p>
</div>
</div>
<div class="item-footer">
<b class="title">Introduce</b>
<div class="cnt">
<a href="">About us</a>
<a href="">Client</a>
<a href="">Blog</a>
<a href="">Contact</a>
<a href="">Information security</a>
</div>
</div>
<div class="item-footer">
<b class="title">Product</b>
<div class="cnt">
<a href="">Hura8</a>
<a href="">Xstore</a>
<a href="">adMan</a>
<a href="">Chatngay</a>
</div>
</div>
<div class="item-footer">
<b class="title">Service</b>
<div class="cnt">
<a href="">eCommerce Management</a>
<a href="">Cloud Service</a>
<a href="">The infrastructure</a>
</div>
<div class="d-flex">
<a href="">
<img src="./assets/images/icon-zalo.png" width="27px" height="27px" alt="zalo">
</a>
<a href="" style="margin-left: 10px;">
<img src="./assets/images/icon-facebook.png" width="27px" height="27px" alt="facebook">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p>Copyright @2024 Hurasoft. GPKD số: 0106897291 do Sở Kế hoạch và Đầu tư Thành phố Hà Nội cấp</p>
</div>
</div>
</div>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>

2
contact_us.html
View File

@@ -12,7 +12,7 @@
<body>
<div class="header">
<div class="header not-home">
<div class="container">
<div class="content-main-header d-flex align-items space-between">
<a href="/" class="logo">

290
job.html Normal file
View File

@@ -0,0 +1,290 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hurasoft</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<div class="header not-home">
<div class="container">
<div class="content-main-header d-flex align-items space-between">
<a href="/" class="logo">
<img src="./assets/images/logo.png" width="100%" height="100%" alt="logo">
</a>
<div class="list-menu d-flex align-items">
<a href="/lien-he" class="item active">About</a>
<div class="item">
<a href="" class="item-cate">Product <i class="fa-solid fa-angle-down"></i></a>
<div class="box box_list_cate">
</div>
</div>
<div class="item">
<a href="" class="item-cate">Service <i class="fa-solid fa-angle-down"></i></a>
<div class="box box_list_cate">
</div>
</div>
<a href="" class="item">What's new</a>
<a href="" class="item">Job</a>
<a href="" class="item">Contact</a>
</div>
<select class="box-translate">
<option value="">VN</option>
<option value="">EN</option>
</select>
</div>
</div>
</div>
<div class="page-job">
<div class="banner-job">
<div class="content-search">
<h1 class="title">Stand Strong With HURASOFT
</h1>
<p class="note">We always accompany you on your career development path
</p>
<div class="form-search-job">
<div class="input d-flex align-items">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" placeholder="Position you want to apply for
">
</div>
<a href="javascript:void(0)" class="btn-search">Search</a>
</div>
</div>
</div>
<div class="container">
<div class="content-list-job d-flex">
<div class="filter-job">
<div class="item-filter">
<div class="title-filter d-flex align-items space-between">
<span>Levels</span>
<i class="fa fa-angle-up"></i>
</div>
<div class="content-filter">
<div class="item-attr d-flex align-items">
<div class="icon-check checkered" onclick="location.href='#'">
</div>
<a href="#" class="filter-right">
Manager
</a>
</div>
<div class="item-attr d-flex align-items">
<div class="icon-check" onclick="location.href='#'">
</div>
<a href="#" class="filter-right">
Manager
</a>
</div>
<div class="item-attr d-flex align-items">
<div class="icon-check" onclick="location.href='#'">
</div>
<a href="#" class="filter-right">
Manager
</a>
</div>
<div class="item-attr d-flex align-items">
<div class="icon-check" onclick="location.href='#'">
</div>
<a href="#" class="filter-right">
Manager
</a>
</div>
<div class="item-attr d-flex align-items">
<div class="icon-check" onclick="location.href='#'">
</div>
<a href="#" class="filter-right">
Manager
</a>
</div>
</div>
</div>
<div class="item-filter">
<div class="title-filter d-flex align-items space-between">
<span>Levels</span>
<i class="fa fa-angle-up"></i>
</div>
<div class="content-filter">
<div class="item-attr d-flex align-items">
<div class="icon-check checkered" onclick="location.href='#'">
</div>
<a href="#" class="filter-right">
Manager
</a>
</div>
<div class="item-attr d-flex align-items">
<div class="icon-check" onclick="location.href='#'">
</div>
<a href="#" class="filter-right">
Manager
</a>
</div>
<div class="item-attr d-flex align-items">
<div class="icon-check" onclick="location.href='#'">
</div>
<a href="#" class="filter-right">
Manager
</a>
</div>
<div class="item-attr d-flex align-items">
<div class="icon-check" onclick="location.href='#'">
</div>
<a href="#" class="filter-right">
Manager
</a>
</div>
<div class="item-attr d-flex align-items">
<div class="icon-check" onclick="location.href='#'">
</div>
<a href="#" class="filter-right">
Manager
</a>
</div>
</div>
</div>
</div>
<div class="list-job">
<div class="item-job">
<div class="name-job">Junior PHP</div>
<div class="desc-job">
Mô tả: Tham gia các dự án sử dụng ngôn ngữ lập trình PHP và các công nghệ liên
quan cho các khách hàng
</div>
<div class="info-job d-flex align-items">
<div class="salary d-flex align-items">
<span>Salary:</span>
<b>10-20M</b>
</div>
<div class="time d-flex align-items">
<span>Hạn nộp hồ sơ:</span>
<b>20/01/2024</b>
</div>
</div>
<a href="javascript:void(0)" class="btn-apply">Ứng tuyển</a>
</div>
<div class="item-job">
<div class="name-job">Junior PHP</div>
<div class="desc-job">
Mô tả: Tham gia các dự án sử dụng ngôn ngữ lập trình PHP và các công nghệ liên
quan cho các khách hàng
</div>
<div class="info-job d-flex align-items">
<div class="salary d-flex align-items">
<span>Salary:</span>
<b>10-20M</b>
</div>
<div class="time d-flex align-items">
<span>Hạn nộp hồ sơ:</span>
<b>20/01/2024</b>
</div>
</div>
<a href="javascript:void(0)" class="btn-apply">Ứng tuyển</a>
</div>
<div class="paging d-flex align-items">
<a href="" class="item"><i class="fa-solid fa-angles-left"></i></a>
<a href="" class="item active">1</a>
<a href="" class="item">2</a>
<a href="" class="item">3</a>
<a href="" class="item">4</a>
<a href="" class="item">...</a>
<a href="" class="item">9</a>
<a href="" class="item"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="contact-us">
<h2 class="title">Contact us for cousultation</h2>
<div class="form-contact">
<div class="content-contact">
<input type="text" class="input-contact" placeholder="Enter email or number phone">
<a href="javascript:void(0)" class="btn-submit">
<i class="fa-solid fa-paper-plane"></i>
</a>
</div>
</div>
</div>
<div class="main-footer">
<div class="container">
<div class="content-main-footer d-flex">
<div class="item-footer">
<b class="title">Hurasoft Company Limited</b>
<div class="cnt">
<p>ADDRESS: Floor 5 - No. 3, Lane 18 Yen Lang, Dong Da District, Hanoi City</p>
<p>Hotline: 02422.138.068 - 0904.580.181</p>
<p>Email: hotro@hurasoft.com</p>
</div>
</div>
<div class="item-footer">
<b class="title">Introduce</b>
<div class="cnt">
<a href="">About us</a>
<a href="">Client</a>
<a href="">Blog</a>
<a href="">Contact</a>
<a href="">Information security</a>
</div>
</div>
<div class="item-footer">
<b class="title">Product</b>
<div class="cnt">
<a href="">Hura8</a>
<a href="">Xstore</a>
<a href="">adMan</a>
<a href="">Chatngay</a>
</div>
</div>
<div class="item-footer">
<b class="title">Service</b>
<div class="cnt">
<a href="">eCommerce Management</a>
<a href="">Cloud Service</a>
<a href="">The infrastructure</a>
</div>
<div class="d-flex">
<a href="">
<img src="./assets/images/icon-zalo.png" width="27px" height="27px" alt="zalo">
</a>
<a href="" style="margin-left: 10px;">
<img src="./assets/images/icon-facebook.png" width="27px" height="27px" alt="facebook">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p>Copyright @2024 Hurasoft. GPKD số: 0106897291 do Sở Kế hoạch và Đầu tư Thành phố Hà Nội cấp</p>
</div>
</div>
</div>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>

14
product.html
View File

@@ -11,7 +11,7 @@
</head>
<body>
<div class="header">
<div class="header not-home">
<div class="container">
<div class="content-main-header d-flex align-items space-between">
<a href="/" class="logo">
@@ -57,26 +57,28 @@
<img src="./assets/images/logo-chatngay.png" width="129px" height="38px">
</div>
<p class="desc">Customer live support redefined</p>
<a href="" class="link">Click here</a>
<a href="" class="link">
Click here
</a>
</div>
<div class="right">
<img src="./assets/images/image-product.png" alt="">
</div>
</div>
<div class="item-product d-flex">
<div class="item-product blue d-flex">
<div class="left">
<div class="logo">
<img src="./assets/images/logo_hura8.png" width="106px" height="20px" alt="logohura8">
</div>
<p class="desc">Best in class for enterprise's ecommerce operation</p>
<a href="" class="link">Click here</a>
<a href="" class="link"><span>Click here</span></a>
</div>
<div class="right">
<img src="./assets/images/image-product.png" alt="">
</div>
</div>
<div class="item-product d-flex">
<div class="item-product blue d-flex">
<div class="left">
<div class="logo">
<img src="./assets/images/logo_xstore.png" width="80p" height="24px" alt="logo_xstore">
@@ -85,7 +87,7 @@
<p class="desc">A complete suite of orders, inventory and customers management for SMEs.
Complemented
with a smart POS.</p>
<a href="" class="link">Click here</a>
<a href="" class="link"><span>Click here</span></a>
</div>
<div class="right">
<img src="./assets/images/image-product.png" alt="">

163
service.html Normal file
View File

@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hurasoft</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<div class="header not-home">
<div class="container">
<div class="content-main-header d-flex align-items space-between">
<a href="/" class="logo">
<img src="./assets/images/logo.png" width="100%" height="100%" alt="logo">
</a>
<div class="list-menu d-flex align-items">
<a href="/lien-he" class="item active">About</a>
<div class="item">
<a href="" class="item-cate">Product <i class="fa-solid fa-angle-down"></i></a>
<div class="box box_list_cate">
</div>
</div>
<div class="item">
<a href="" class="item-cate">Service <i class="fa-solid fa-angle-down"></i></a>
<div class="box box_list_cate">
</div>
</div>
<a href="" class="item">What's new</a>
<a href="" class="item">Job</a>
<a href="" class="item">Contact</a>
</div>
<select class="box-translate">
<option value="">VN</option>
<option value="">EN</option>
</select>
</div>
</div>
</div>
<div class="page-service">
<div class="container">
<h1 class="title">Service</h1>
<div class="list-service d-flex align-items">
<div class="item-service">
<div class="image">
<img src="./assets/images/icon-service-ecommerce.png" width="249px" height="248px"
alt="icon-service-ecommerce">
</div>
<div class="content">
<a href="#" class="name">eCommerce Management</a>
<p class="note">Outsource ecommerce operation's complexities to us and focus on delivering
happiness
to your customers.</p>
</div>
</div>
<div class="item-service">
<div class="image">
<img src="./assets/images/icon-service-cloud.png" width="247px" height="240px"
alt="icon-service-cloud">
</div>
<div class="content">
<a href="#" class="name">Cloud Service</a>
<p class="note">Rest assured of unin terrupted service with cloud infrastructure, backup, DNS
and
domain provided by HuraCloud</p>
</div>
</div>
<div class="item-service">
<div class="image">
<img src="./assets/images/icon-service-software.png" width="324px" height="268px"
alt="icon-service-software">
</div>
<div class="content">
<a href="#" class="name">Software Development</a>
<p class="note">Having ideas for app/web development? Contact us if you need an extra hand</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="contact-us">
<h2 class="title">Contact us for cousultation</h2>
<div class="form-contact">
<div class="content-contact">
<input type="text" class="input-contact" placeholder="Enter email or number phone">
<a href="javascript:void(0)" class="btn-submit">
<i class="fa-solid fa-paper-plane"></i>
</a>
</div>
</div>
</div>
<div class="main-footer">
<div class="container">
<div class="content-main-footer d-flex">
<div class="item-footer">
<b class="title">Hurasoft Company Limited</b>
<div class="cnt">
<p>ADDRESS: Floor 5 - No. 3, Lane 18 Yen Lang, Dong Da District, Hanoi City</p>
<p>Hotline: 02422.138.068 - 0904.580.181</p>
<p>Email: hotro@hurasoft.com</p>
</div>
</div>
<div class="item-footer">
<b class="title">Introduce</b>
<div class="cnt">
<a href="">About us</a>
<a href="">Client</a>
<a href="">Blog</a>
<a href="">Contact</a>
<a href="">Information security</a>
</div>
</div>
<div class="item-footer">
<b class="title">Product</b>
<div class="cnt">
<a href="">Hura8</a>
<a href="">Xstore</a>
<a href="">adMan</a>
<a href="">Chatngay</a>
</div>
</div>
<div class="item-footer">
<b class="title">Service</b>
<div class="cnt">
<a href="">eCommerce Management</a>
<a href="">Cloud Service</a>
<a href="">The infrastructure</a>
</div>
<div class="d-flex">
<a href="">
<img src="./assets/images/icon-zalo.png" width="27px" height="27px" alt="zalo">
</a>
<a href="" style="margin-left: 10px;">
<img src="./assets/images/icon-facebook.png" width="27px" height="27px" alt="facebook">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p>Copyright @2024 Hurasoft. GPKD số: 0106897291 do Sở Kế hoạch và Đầu tư Thành phố Hà Nội cấp</p>
</div>
</div>
</div>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>