<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="sg-banner">
<div class="_overlay"></div>
<div class="container centerXY">
<div class="row">
<div class="col-md-6 col-lg-5 ml-auto d-none d-sm-block">
<div>
<h1 class="font-weight-bold h6 text-success">#1 Học Lái Xe Ô Tô Đồng Nai</h1>
<h2 class="font-weight-bold text-capitalize">Trung tâm Dạy Nghề<br>Lái Xe Sài Gòn</h2>
<p class="text-capitalize"><i class="fa fa-check-circle text-blue"></i> Uy Tín Chất Lượng Tận Tâm<br>
<i class="fa fa-check-circle text-blue"></i> Cam Kết Trọn Gói Không Phát Sinh<br>
<i class="fa fa-check-circle text-blue"></i> Các Khóa Học Khai Giảng Liên Tục<br>
<i class="fa fa-check-circle text-blue"></i> Lịch Học Linh Động Tự Chọn<br>
<i class="fa fa-check-circle text-blue"></i> Trả Góp Lãi Suất 0%</p>
<span class="d-none d-sm-inline mx-auto">
<a class="font-weight-bold btn btn-danger" type="button" title="Tư Vấn Tôi Ngay" data-toggle="modal" data-target="#modalSubscriptionForm">Tư Vấn Tôi Ngay</a>
</span>
</div>
</div>
<div class="col-md-6 col-lg-5 mr-auto align-items-center pl-md-5 pt-5 pt-sm-0" id="id-countdown">
<h2 class="h4 text-center font-weight-bold">Ưu Đãi Khóa Cuối Năm Bộ Đề 450 Câu Lý Thuyết 2019</h2>
<div class="alert alert-success d-none" id="contactSuccessBox">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
{{ lang['contact_msg_success'] }}
</div>
<div class="alert alert-danger alert-dismissable d-none" id="contactErrorBox">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<div></div>
</div>
<div id="clockdiv" class="sg-countdown">
<div>
<div class="smalltext">Ngày</div>
<span class="days">1</span>
</div>
<div>
<div class="smalltext">Giờ</div>
<span class="hours">1</span>
</div>
<div>
<div class="smalltext">Phút</div>
<span class="minutes">1</span>
</div>
<div>
<div class="smalltext">Giây</div>
<span class="seconds">1</span>
</div>
</div>
<form action="{{url.get('contact/index/ajax')}}" method="post" class="info-content">
<div class="form-group">
<input type="text" required class="form-control _radius" name="box_full_name" placeholder="Họ và tên *">
</div>
<div class="form-group">
<input type="text" required class="form-control _radius" id="box_phone" name="box_phone" placeholder="Nhập số điện thoại *">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success w-100 _radius">Đăng ký</button>
</div>
</form>
</div>
</div>
</div>
<div class="cloud-banner d-none d-sm-block"></div>
</div>
.sg-banner {
position: relative;
height: 100vh;
background: url(https://hoclaixedongnai.net/themes/daylaixebienhoa/images/girl_hair_mood_145370_1920x1080.jpg) center center no-repeat;
background-size: cover;
color: white;
}
.sg-banner h1 {
margin: 0 0 1rem;
}
.sg-banner .bell {
display: block;
width: 40px;
height: 40px;
color: var(--color-yellow);
-webkit-animation: ring 4s .7s ease-in-out infinite;
-webkit-transform-origin: 50% 4px;
-moz-animation: ring 4s .7s ease-in-out infinite;
-moz-transform-origin: 50% 4px;
animation: ring 4s .7s ease-in-out infinite;
transform-origin: 50% 4px;
}
.cloud-banner {
width: 100%;
height: 162px;
background: url(../../daylaixebienhoa/images/cloud-banner.png) center bottom no-repeat;
position: absolute;
bottom: 0;
}
.centerXY {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Form Uu Dai */
#clockdiv div span {
border-radius: 50%;
background: none;
font-size: 2rem;
width: 4rem;
height: 4rem;
padding-top: 0.5rem;
border: 2px solid var(--color-danger);
}
@media screen and (max-width: 320px) {
#id-countdown h2 {
font-size: 1.15rem;
}
#clockdiv div span {
font-size: 1.5rem;
width: 3.5rem;
height: 3.5rem;
}
}
/* Overlay Header */
.overlay {
position: fixed;
display: none;
background-color: rgba(0, 0, 0, 0.7);
}
._overlay {
position: absolute;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8), black);
background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8), black);
background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8), black);
background: -linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8), black);
}
._overlay,
.overlay {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/* Form Uu Dai */
#clockdiv div span {
border-radius: 50%;
background: none;
font-size: 2rem;
width: 4rem;
height: 4rem;
padding-top: 0.5rem;
border: 2px solid var(--color-danger);
}
@media screen and (max-width: 320px) {
#id-countdown h2 {
font-size: 1.15rem;
}
#clockdiv div span {
font-size: 1.5rem;
width: 3.5rem;
height: 3.5rem;
}
}
