Form 1
View Code
<div class="bg-light">
<section>
<div id="banner1" class="banner spacer" style="background-image:url(../assets/images/form-banners/banner1/banner-bg.jpg);">
<div class="container">
<div class="row">
<div class="col-md-7 col-lg-5 align-self-center" data-aos="fade-right" data-aos-duration="1500">
<h2 class="title font-bold">Give your Business Real boost Now!</h2>
<p class="m-t-40 m-b-30">To accomplish great things, we must not only act, but also dream; not only plan, but also believe.</p>
<div class="m-t-40">
<input type="text" name="email" placeholder="Enter Email Address" class="font-16" />
<input type="submit" value="Get Started" class="bg-success-gradiant font-semibold font-16 btn-rounded text-uppercase text-white text-center" />
</div>
</div>
<div class="col-md-5 col-lg-6 align-self-center ml-auto" data-aos="fade-left" data-aos-duration="1500">
<img src="../assets/images/form-banners/banner1/banner-img.png" alt="We are Digital Agency" class="img-fluid" />
</div>
</div>
</div>
</div>
</section>
</div>
#banner1 {
background: right -3em center no-repeat #e9f3f8;
h2 {
font-size: 48px;
line-height: 1;
letter-spacing: -1px;
}
input {
line-height: 72px;
padding: 0;
margin: 0;
border: none;
display: inline-block;
vertical-align: top;
}
input[type="text"] {
color: $bodytext;
border-radius: 36px 0 0 36px;
text-indent: 35px;
padding-right: 15px;
width: 61%;
font-weight: 300;
box-shadow: -5px 0 30px 0 rgba(0, 0, 0, 0.05);
text-overflow: ellipsis;
}
input[type="submit"] {
border-radius: 0 36px 36px 0;
width: auto;
padding: 0 30px;
cursor: pointer;
margin-left: -4px;
box-shadow: 5px 0 30px 0 rgba(0, 0, 0, 0.05);
transition: all 0.5s ease-in-out;
&:hover {
opacity: 0.7;
}
}
}
@media (min-width: 2301px) and (max-width: 2700px) {
#banner1 {
background-position: 70% center;
}
}
@media (min-width: 1900px) and (max-width: 2300px) {
#banner1 {
background-position: 80% center;
}
}
@media (min-width: 1500px) and (max-width: 1680px) {
#banner1 {
background-position: right center;
}
}
@media (max-width: 1100px) {
#banner1 {
background-position: right -14em center;
h2 {
font-size: 40px;
}
input[type="text"] {
width: 59%;
}
input[type="submit"] {
padding: 0 20px;
}
}
}
@media (max-width: 767px) {
.banner {
padding: 30px 0;
}
#banner1 {
background-image: none;
input {
font-size: 14px;
line-height: 50px;
}
input[type="text"] {
border-radius: 25px 0 0 25px;
text-indent: 20px;
}
input[type="submit"] {
border-radius: 0 25px 25px 0;
padding: 0 15px;
}
img {
margin-top: 25px;
}
}
}
@media (max-width: 320px) {
#banner1 {
input[type="submit"] {
padding: 0 10px;
}
}
}
Give your Business Real boost Now!
To accomplish great things, we must not only act, but also dream; not only plan, but also believe.
Form 2
View Code
<div class="spacer form2">
<div class="container">
<div class="row">
<!-- Column -->
<div class="col-lg-6 p-r-40" data-aos="flip-up" data-aos-duration="1200">
<img src="../assets/images/form/1.jpg" class="img-shadow img-responsive" alt="wrapkit" />
</div>
<div class="col-lg-6">
<div class="text-box">
<h1 class="font-light">Create your Free Account & Get Started Now</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing.</p>
<form class="m-t-20" data-aos="fade-left" data-aos-duration="1200">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input class="form-control" type="email" placeholder="email address">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input class="form-control" type="password" placeholder="password">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input class="form-control" type="password" placeholder="confirm password">
</div>
</div>
<div class="col-lg-12 d-flex">
<button type="submit" class="btn btn-md btn-danger-gradiant btn-arrow"><span> Create Account <i class="ti-arrow-right"></i></span></button>
<div class="have-ac ml-auto align-self-center">Already have an account? <a href="#" class="text-danger">Sign In</a></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@media (max-width: 1023px) {
.form2 {
h1 {
margin-top: 25px;
}
.have-ac {
margin-top: 25px;
}
}
}
Create your Free Account & Get Started Now
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing.
Form 3
View Code
<div class="bg-light">
<section>
<div id="banner2" class="banner spacer" style="background-image:url(../assets/images/form-banners/banner2/banner-bg.jpg);">
<div class="container">
<div class="row">
<div class="col-md-7 col-lg-5" data-aos="fade-up" data-aos-duration="1500">
<h2 class="title text-white font-semibold text-uppercase">Book Appointment</h2>
<div class="bg-white">
<div class="form-row b-b">
<div class="p-30 left b-r w-50">
<label class="text-inverse font-12 text-uppercase">First Name</label>
<input type="text" class="b-0 p-0 font-14 form-control" placeholder="Your First Name" />
</div>
<div class="p-30 right w-50">
<label class="text-inverse font-12 text-uppercase">Last Name</label>
<input type="text" class="b-0 p-0 font-14 form-control" placeholder="Your Last Name" />
</div>
</div>
<div class="form-row b-b p-30">
<label class="text-inverse font-12 text-uppercase">Email Address</label>
<input type="text" class="b-0 p-0 font-14 form-control" placeholder="Enter your Email Address" />
</div>
<div class="form-row b-b p-30">
<label class="text-inverse font-12 text-uppercase">Phone Number</label>
<input type="text" class="b-0 p-0 font-14 form-control" placeholder="Enter your Phone Number" />
</div>
<div class="form-row b-b p-30 po-relative">
<label class="text-inverse font-12 text-uppercase">Booking Date</label>
<div class="input-group date">
<input type="text" class="b-0 p-0 font-14 form-control" id="dp" placeholder="Select the Appointment Date" />
<label class="" for="dp"><i class="fa fa-calendar"></i></label>
</div>
</div>
<div class="form-row b-b p-30">
<label class="text-inverse font-12 text-uppercase">Message</label>
<textarea col="1" row="1" class="b-0 font-light p-0 font-14 form-control" placeholder="Write Down the Message"></textarea>
</div>
<div>
<button class="m-0 b-0 p-t-30 p-b-30 font-14 font-semibold bg-danger-gradiant btn btn-block btn-arrow text-center text-white text-uppercase">
<span>Book Yor Appointment Now <i class="ti-arrow-right"></i></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
#banner2 {
max-height: 800px;
.w-50 {
width: 50%;
}
.form-row {
margin: 0;
}
label.font-12 {
font-size: 12px;
font-weight: 500;
margin-bottom: 5px;
}
input[type=text] {
color: $bodytext;
font-weight: 300;
text-overflow: ellipsis;
}
button {
cursor: pointer;
border-radius: 0;
}
.date label {
cursor: pointer;
margin: 0;
}
}
@media (max-width: 370px) {
#banner2 {
.left,
.right {
padding: 25px;
}
}
}
@media (max-width: 320px) {
#banner2 {
.left,
.right {
padding: 25px 15px;
}
}
}
Form 4
View Code
<div class="spacer form4">
<div class="container">
<div class="row">
<!-- Column -->
<div class="col-lg-6 p-r-40" data-aos="flip-up" data-aos-duration="1200">
<h1 class="font-light">Create stunning designs with our Wrapkit in minutes of time & with ease</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing. sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing.</p>
<a href="#" data-toggle="modal" data-target="#exampleModal" class="video-link d-flex no-block m-t-30"><i class="icon-Play-Music text-danger m-r-10"></i> <span class="font-18 text-inverse align-self-center"> Watch Our Video</span></a>
</div>
<div class="modal fade" id="exampleModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Watch video</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="yt-player">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/DDwbjWCgxVM?" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="col-lg-5 ml-auto">
<div class="text-box">
<form data-aos="fade-left" data-aos-duration="1200">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input class="form-control" type="text" placeholder="first name">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input class="form-control" type="text" placeholder="last name">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input class="form-control" type="email" placeholder="email address">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input class="form-control" type="password" placeholder="password">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input class="form-control" type="password" placeholder="confirm password">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">I am agree with the <a href="#" class="link">terms and conditions</a></span>
</label>
</div>
</div>
<div class="col-lg-12 d-flex">
<button type="submit" class="btn btn-md btn-block btn-info-gradiant btn-arrow"><span> Create Account <i class="ti-arrow-right"></i></span></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
.form4 {
.video-link {
i {
font-size: 36px;
}
}
}
@media (max-width: 1023px) {
.form4 {
.text-box {
margin-top: 25px;
}
}
}
Create stunning designs with our Wrapkit in minutes of time & with ease
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing. sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing.
Watch Our Video
Form 5
View Code
<div class="spacer form5" style="background-image:url(../assets/images/form/2.jpg)">
<div class="container">
<!-- Row -->
<div class="row justify-content-center">
<div class="col-lg-4 col-md-7 text-center both-space">
<div class="card" data-aos="flip-left" data-aos-duration="1200">
<div class="card-body">
<div class="text-box">
<h2 class="title font-light"><span class="font-stylish">Make</span> <br> Reservation</h2>
<form class="m-t-30">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input class="form-control" type="text" placeholder="your name">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input class="form-control" type="email" placeholder="email address">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input class="form-control" type="text" placeholder="phone number">
</div>
</div>
<div class="col-lg-12">
<div class="form-group input-icon">
<input class="form-control po-relative" id="dp1" type="text" placeholder="choose date">
<i class="fa fa-calendar po-absolute"></i>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<select class="form-control">
<option>hour</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<select class="form-control">
<option>min</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="col-lg-12 d-flex">
<button type="submit" class="btn btn-md btn-block btn-danger-gradiant btn-arrow"><span> Reserve Table For Me <i class="ti-arrow-right"></i></span></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.form5 {
background-size: cover;
background-attachment: fixed;
background-position: left center;
.text-box {
padding: 10px 15px;
}
.input-icon {
i {
top: 17px;
right: 30px;
}
}
}
Make
Reservation
Form 6
View Code
<div class="form6 spacer">
<!-- Row -->
<div class="row">
<div class="container">
<div class="col-lg-6 align-justify-center p-r-40 p-l-0 contact-form">
<div class="" data-aos="fade-right" data-aos-duration="1200">
<h1 class="title font-light">Get Register For Free</h1>
<h6 class="subtitle">Lorem ipsum dolor sit amet, consectetuer adipiscing.</h6>
<form class="m-t-30" data-aos="fade-right" data-aos-duration="1200">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input class="form-control" type="text" placeholder="full name">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input class="form-control" type="email" placeholder="email address">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input class="form-control" type="password" placeholder="password">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input class="form-control" type="password" placeholder="confirm password">
</div>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-md btn-block btn-danger-gradiant btn-arrow"><span> Create Account <i class="ti-arrow-right"></i></span></button>
<!-- -->
</div>
</div>
</form>
<div class="row">
<div class="col-lg-12 text-center m-t-40">
<h6>Signup with Social Accounts</h6>
<div class="row">
<div class="col-lg-6 col-md-6">
<a href="#" class="btn btn-block bg-facebook text-white m-t-15">Facebook</a>
</div>
<div class="col-lg-6 col-md-6">
<a href="#" class="btn btn-block bg-twitter text-white m-t-15">Twitter</a>
</div>
</div>
</div>
<div class="col-lg-12 text-center m-t-30">
Already have an account? <a href="#" class="text-danger">Sign In</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 right-image" style="background-image:url(../assets/images/form/3.jpg);" data-aos="fade-left" data-aos-duration="3000" data-aos-offset="500">
</div>
</div>
</div>
.form6 {
overflow: hidden;
position: relative;
.right-image {
background-position: center bottom;
background-size: cover;
background-repeat: none;
position: absolute;
right: 0;
bottom: 0;
top: 0;
}
}
@media (max-width: 1023px) {
.form6 {
.contact-form {
padding-left: 0;
padding-right: 0;
}
}
}
@media (max-width: 767px) {
.form6 {
.contact-form {
padding-left: 15px;
padding-right: 15px;
}
}
}
Form 7
View Code
<div class="bg-light">
<section>
<div id="banner3" class="banner" style="background-image:url(../assets/images/form-banners/banner3/banner-bg.jpg);">
<div class="banner-content">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-9 p-0" data-aos="fade-down" data-aos-duration="1500">
<h2 class="title text-white text-center font-bold m-b-40">Lets Create Awesome Futures by Learning New Courses Online Now!</h2>
<div class="row m-0 form-data">
<div class="col-8 col-sm-9 col-lg-10 p-0">
<input type="text" name="search" placeholder="What do you want to learn today?" class="bg-white font-14 p-l-20 form-control b-0" />
</div>
<div class="col-4 col-sm-3 col-lg-2 p-0 text-center">
<button class="bg-danger-gradiant b-0 text-white font-14 form-control"><i class="ti-search m-r-10"></i>Search</button>
</div>
</div>
<div class="row m-0 suggetion">
<div class="col-sm-6 col-md-3 m-t-40 p-0">
<i class="icon-Student-Hat2"></i>
<span class="text-white font-14 p-l-10">Over 5 Million Students Enrolled</span>
</div>
<div class="col-sm-6 col-md-4 m-t-40 p-0 ml-auto">
<i class="icon-Open-Book"></i>
<span class="text-white font-14 p-l-10">More than 25,000 Online Available Courses</span>
</div>
<div class="col-sm-6 col-md-3 m-t-40 p-0 ml-auto">
<i class="icon-Laptop-Phone"></i>
<span class="text-white font-14 p-l-10">Learn skills on any Devices anytime</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
#banner3 {
h2 {
font-size: 36px;
line-height: 1.2;
}
input,
button {
line-height: 30px;
}
input[type=text] {
border-radius: 3px 0 0 3px;
text-overflow: ellipsis;
}
button {
border-radius: 0 3px 3px 0;
cursor: pointer;
transition: all 0.5s ease-in-out;
border: none;
&:hover {
opacity: 0.8;
}
}
.suggetion {
i {
font-size: 34px;
color: $white;
position: absolute;
left: 0;
top: 0;
}
span {
display: inline-block;
padding-left: 50px;
}
}
}
@media (max-width: 992px) {
#banner3 {
h2 {
font-size: 30px;
padding: 0 15px;
}
}
}
@media (max-width: 767px) {
#banner3 {
h2 {
font-size: 26px;
}
.col-sm-6 {
margin-right: auto;
margin-left: 0 !important;
}
}
}
@media (max-width: 428px) {
#banner3 {
padding-bottom: 50px;
h2 {
font-size: 22px;
}
}
}
@media (max-width: 590px) {
#banner3 {
.form-data {
padding: 0 15px;
}
.suggetion {
padding: 0 15px;
}
}
}
Form 8
View Code
<div class="form8 spacer">
<div class="container">
<div class="row">
<!-- column -->
<div class="col-lg-5">
<h6 class="text-themecolor text-uppercase">newsletter</h6>
<h2 class="title">Stay informed about new and upcoming causes</h2>
<h6 class="subtitle m-t-30">It 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.</h6>
<form class="m-t-30">
<div class="form-group">
<input class="form-control" type="text" placeholder="Your Name" />
</div>
<div class="form-group">
<input class="form-control" type="email" placeholder="Email Address" />
</div>
<div class="form-group">
<button class="btn btn-danger-gradiant btn-block btn-md text-uppercase ">Subscribe </button>
</div>
<div class="form-group">
<label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">I have read and agree to the <a href="#" class="link">terms and conditions</a></span>
</label>
</div>
</form>
</div>
<!-- column -->
<div class="col-lg-6 ml-auto">
<div class="d-flex b-b p-b-20 no-block font-medium text-uppercase">
<h6 class="no-shrink font-medium align-self-center m-b-0">Latest News At WrapKit</h6>
<a class="ml-auto text-danger align-self-center" href="#">View All</a>
</div>
<div class="row blog-row m-t-40">
<div class="col-md-4">
<a href="#"><img src="../assets/images/blog/blog-home/img12.jpg" alt="wrapkit" class="img-responsive" /></a>
</div>
<div class="col-md-8">
<h5><a href="#">The Universe is all of time and space and its contents.</a></h5>
<p>by <a href="#">Mark Freeman</a> / 23 May 2017</p>
</div>
</div>
<div class="row blog-row m-t-30">
<div class="col-md-4">
<a href="#"><img src="../assets/images/blog/blog-home/img13.jpg" alt="wrapkit" class="img-responsive" /></a>
</div>
<div class="col-md-8">
<h5><a href="#">Pellentesque mollis eros quis massa interdum porta et vel nisi. Duis vel viverra quamam...</a></h5>
<p>by <a href="#">Mark Freeman</a> / 23 May 2017</p>
</div>
</div>
<div class="row blog-row m-t-30">
<div class="col-md-4">
<a href="#"><img src="../assets/images/blog/blog-home/img14.jpg" alt="wrapkit" class="img-responsive" /></a>
</div>
<div class="col-md-8">
<h5><a href="#">Duis vel viverra quamam molesvulputate femy contenteu.</a></h5>
<p>by <a href="#">Mark Freeman</a> / 23 May 2017</p>
</div>
</div>
</div>
<!-- column -->
</div>
</div>
</div>
.form8 {
.blog-row {
margin-bottom: 30px;
a {
color: $dark;
&:hover {
color: $themecolor;
}
}
h5 {
font-weight: 500;
margin-top: 10px;
}
}
}
newsletter
Stay informed about new and upcoming causes
It 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.
Latest News At WrapKit
View All
The Universe is all of time and space and its contents.
by Mark Freeman / 23 May 2017
Duis vel viverra quamam molesvulputate femy contenteu.
by Mark Freeman / 23 May 2017
Form 9
View Code
<div class="bg-light">
<section>
<div id="banner4" class="banner" style="background-image:url(../assets/images/form-banners/banner4/banner-bg.jpg);">
<div class="banner-content">
<div class="container" data-aos="fade-down" data-aos-duration="1500">
<h2 class="title text-white text-center font-bold m-b-30">Find your Dream Travel Place</h2>
<div class="row form-data">
<div class="col-sm-6 col-md-3 b-r p-b-10 p-t-10 bg-white sec-icon po-relative">
<i class="fa fa-map-marker text-danger"></i>
<span class="span-select b-b m-l-20">
<select class="b-0 form-control text-uppercase">
<option>Destination</option>
</select>
<i class="fa fa-angle-down"></i>
</span>
</div>
<div class="col-sm-6 col-md-3 b-r p-b-10 p-t-10 bg-white sec-icon po-relative">
<i class="fa fa-list text-danger"></i>
<span class="span-select b-b m-l-20">
<select class="b-0 form-control text-uppercase">
<option>Tour Type</option>
</select>
<i class="fa fa-angle-down"></i>
</span>
</div>
<div class="col-sm-6 col-md-3 b-r p-b-10 p-t-10 bg-white sec-icon po-relative">
<div class="input-group date">
<input type="text" id="dp9" placeholder="Month" class="text-uppercase form-control b-b" />
<label clas="input-group-addon" for="dp9"><i class="fa fa-calendar text-danger"></i></label>
</div>
</div>
<div class="col-sm-6 col-md-2 p-b-10 p-t-10 bg-white">
<input type="text" name="" placeholder="Max Price" class="text-uppercase form-control b-b" />
</div>
<div class="col-md-1 p-0">
<button class="b-0 text-center bg-success-gradiant text-white font-14 form-control"><i class="ti-search"></i></button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
#banner4 {
h2 {
font-size: 36px;
line-height: 1.2;
}
button {
border-radius: 0;
line-height: 43px;
transition: all 0.5s ease-in-out;
cursor: pointer;
font-size: 20px;
&:hover {
opacity: 0.95;
}
}
input,
.span-select {
border-radius: 0;
font-size: 12px;
line-height: 1.7;
border: none;
border-bottom: 1px solid rgba(120, 130, 140, 0.13);
color: $bodytext;
font-weight: 300;
display: block;
}
.form-data {
border: 15px solid rgba(34, 50, 70, 0.5);
select {
background: tranparent;
font-size: 12px;
color: $bodytext;
font-weight: 300;
}
.sec-icon {
i {
left: 15px;
top: 18px;
position: absolute;
font-size: 20px;
z-index: 10;
}
}
.date label {
position: absolute;
right: 15px;
top: 8px;
i {
left: 0;
top: 0;
}
}
.span-select {
overflow: hidden;
position: relative;
i {
right: 0;
top: 8px;
left: auto;
position: absolute;
font-size: 20px;
}
select {
min-width: 250px;
}
}
}
}
@media (max-width: 767px) {
#banner4 {
.b-b {
border: none;
}
h2 {
font-size: 32px;
}
input {
margin-left: 20px;
}
}
}
@media (max-width: 428px) {
#banner4 {
.form-data {
overflow: hidden;
.span-select {
select {
width: 110%;
}
}
}
}
}
@media (max-width: 320px) {
#banner4 {
input,
select {
padding-left: 0;
padding-right: 0;
}
input {
margin-left: 45px;
}
.form-data {
.bg-white {
padding-left: 0;
padding-right: 0;
}
.sec-icon {
i {
left: 10px;
}
}
.date {
label {
right: 25px;
}
}
.span-select {
i {
right: 10px;
left: auto;
}
select {
margin-left: 20px;
width: 100%;
}
}
}
}
}