"Header"
Bootstrap 4.1.1 Snippet by skjnny

<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; } }

Related: See More


Questions / Comments: