"Geisilene Index loja carros"
Bootstrap 4.1.1 Snippet by psd06t

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag -------> <!doctype html> <html lang="pt-BR"> <hhead> <title>My loja de carros —</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://fonts.googleapis.com/css?family=DM+Sans:300,400,700&display=swap" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"> <link rel="stylesheet" href="fonts/icomoon/style.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-datepicker.css"> <link rel="stylesheet" href="css/jquery.fancybox.min.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css"> <link rel="stylesheet" href="css/aos.css"> <!-- MAIN CSS --> <link rel="stylesheet" href="css/style.css"> </head> <body data-spy="scroll" data-target=".site-navbar-target" data-offset="300"> <div class="site-wrap" id="home-section"> <div class="site-mobile-menu site-navbar-target"> <div class="site-mobile-menu-header"> <div class="site-mobile-menu-close mt-3"> <span class="icon-close2 js-menu-toggle"></span> </div> </div> <div class="site-mobile-menu-body"></div> </div> <header class="site-navbar site-navbar-target" role="banner"> <div class="container"> <div class="row align-items-center position-relative"> <div class="col-3 "> <div class="site-logo"> <a href="index.html">GScar</a> </div> </div> <div class="col-9 text-right"> <span class="d-inline-block d-lg-none"><a href="#" class="text-white site-menu-toggle js-menu-toggle py-5 text-white"><span class="icon-menu h3 text-white"></span></a></span> <nav class="site-navigation text-right ml-auto d-none d-lg-block" role="navigation"> <ul class="site-menu main-menu js-clone-nav ml-auto "> <li class="active"><a href="index.html" class="nav-link">Home</a></li> <li><a href="services.html" class="nav-link">Serviços</a></li> <li><a href="cars.html" class="nav-link">Carros</a></li> <li><a href="about.html" class="nav-link">Sobre</a></li> <li><a href="blog.html" class="nav-link">Blog</a></li> <li><a href="contact.html" class="nav-link">Contato</a></li> </ul> </nav> </div> </div> </div> </header> <div class="ftco-blocks-cover-1"> <div class="ftco-cover-1 overlay" style="background-image: url('images/hero_1.jpg')"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-5"> <div class="feature-car-rent-box-1"> <h3>Audi A4</h3> <ul class="list-unstyled"> <li> <span>Portas</span> <span class="spec">4</span> </li> <li> <span>Assentos</span> <span class="spec">5</span> </li> <li> <span>Bagageiro</span> <span class="spec">2 Porta Malas/2 Bolsas</span> </li> <li> <span>Transmissão</span> <span class="spec">Automatica</span> </li> <li> <span>Minium age</span> <span class="spec">Automatica</span> </li> </ul> <div class="d-flex align-items-center bg-light p-3"> <span>R$350,00 /dia</span> <a href="contact.html" class="ml-auto btn btn-primary">Alugue</a> </div> </div> </div> </div> </div> </div> </div> <div class="site-section pt-0 pb-0 bg-light"> <div class="container"> <div class="row"> <div class="col-12"> <form class="trip-form"> <div class="row align-items-center mb-4"> <div class="col-md-6"> <h3 class="m-0">Comece sua viagem aqui</h3> </div> <div class="col-md-6 text-md-right"> <span class="text-primary">3</span> <span>carros disponíveis</span></span> </div> </div> <div class="row"> <div class="form-group col-md-3"> <label for="cf-1">De onde você é</label> <input type="text" id="cf-1" placeholder="Seu endereço de retirada" class="form-control"> </div> <div class="form-group col-md-3"> <label for="cf-2">Aonde você vai</label> <input type="text" id="cf-2" placeholder="Seu endereço de retirada" class="form-control"> </div> <div class="form-group col-md-3"> <label for="cf-3">Data da viagem</label> <input type="text" id="cf-3" placeholder="Seu endereço de retirada" class="form-control datepicker px-3"> </div> <div class="form-group col-md-3"> <label for="cf-4">Data do retono</label> <input type="text" id="cf-4" placeholder="Seu endereço de retirada" class="form-control datepicker px-3"> </div> </div> <div class="row"> <div class="col-lg-6"> <input type="submit" value="Enviar" class="btn btn-primary"> </div> </div> </form> </div> </div> </div> </div> <div class="site-section bg-light"> <div class="container"> <div class="row"> <div class="col-lg-3"> <h3>Nossa oferta</h3> <p class="mb-4">Ideal para demandas momentâneas como uma viagem de negócios, uma visita a um cliente, substituição de veículos ou qualquer outra situação. O aluguel diário é uma solução pontual e simples para os problemas do dia a dia da sua empresa. Benefícios:</p> <p> <a href="#" class="btn btn-primary custom-prev">Anterior</a> <span class="mx-2">/</span> <a href="#" class="btn btn-primary custom-next">Próxima</a> </p> </div> <div class="col-lg-9"> <div class="nonloop-block-13 owl-carousel"> <div class="item-1"> <a href=""><img src="images/img_1.jpg" alt="Image" class="img-fluid"></a> <div class="item-1-contents"> <div class="text-center"> <h3><a href="#"> Renault Kwid</a></h3> <div class="rating"> <span class="icon-star text-warning"></span> <span class="icon-star text-warning"></span> <span class="icon-star text-warning"></span> <span class="icon-star text-warning"></span> <span class="icon-star text-warning"></span> </div> <div class="rent-price"><span>R$ 170/</span>dia</div> </div> <ul class="specs"> <li> <span>Portas</span> <span class="spec">4</span> </li> <li> <span>Assentos</span> <span class="spec">5</span> </li> <li> <span>Transmissão</span> <span class="spec">Automatica</span> </li> <li> <span>Idade minina</span> <span class="spec">18 anos</span> </li> </ul> <div class="d-flex action"> <a href="contact.html" class="btn btn-primary">Alugue</a> </div> </div> </div> <div class="item-1"> <a href="#"><img src="images/img_2.jpg" alt="Image" class="img-fluid"></a> <div class="item-1-contents"> <div class="text-center"> <h3><a href="#">Fiat Mobi</a></h3> <div class="rating"> <span class="icon-star text-warning"></span> <span class="icon-star text-warning"></span> <span class="icon-star text-warning"></span> <span class="icon-star text-warning"></span> <span class="icon-star text-warning"></span> </div> <div class="rent-price"><span>R$190/</span>dia</div> </div> <ul class="specs"> <li> <span>Portas</span> <span class="spec">4</span> </li> <li> <span>Assentos</span> <span class="spec">5</span> </li> <li> <span>Transmissâo</span> <span class="spec">Automatic</span> </li> <li> <span>Idade minima</span> <span class="spec">18 anos</span> </li> </ul> <div class="d-flex action"> <a href="contact.html" class="btn btn-primary">Alugue</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="site-section section-3" style="background-image: url('images/hero_2.jpg');"> <div class="container"> <div class="row"> <div class="col-12 text-center mb-5"> <h2 class="text-white">Nossos serviços</h2> </div> </div> <div class="row"> <div class="col-lg-4"> <div class="service-1"> <span class="service-1-icon"> <span class="flaticon-car-1"></span> </span> <div class="service-1-contents"> <h3>Reparar</h3> <p>Nossa empresa conta com excelente serviços de reparo.</p> </div> </div> </div> <div class="col-lg-4"> <div class="service-1"> <span class="service-1-icon"> <span class="flaticon-traffic"></span> </span> <div class="service-1-contents"> <h3>Acessórios para automóvel</h3> <p>Confira os acessórios que garantem mais conforto e praticidade para você ao alugar o seu veículo disponibilidade dos acessórios devem ser confirmados por meio da Central de Reservas.</p> </div> </div> </div> <div class="col-lg-4"> <div class="service-1"> <span class="service-1-icon"> <span class="flaticon-valet"></span> </span> <div class="service-1-contents"> <h3>Possuir um carro</h3> <p>Veja como alugar um carro na Gscar é fácil e rápido necessario apenas alguns requisitos.</p> </div> </div> </div> </div> </div> </div> <div class="container site-section mb-5"> <div class="row justify-content-center text-center"> <div class="col-7 text-center mb-5"> <h2>Como funciona</h2> <p>Veja como alugar um carro na É fácil e rápido.!</p> </div> </div> <div class="how-it-works d-flex"> <div class="step"> <span class="number"><span>01</span></span> <span class="caption">Hora e local</span> </div> <div class="step"> <span class="number"><span>02</span></span> <span class="caption">Carro</span> </div> <div class="step"> <span class="number"><span>03</span></span> <span class="caption">Detalhes</span> </div> <div class="step"> <span class="number"><span>04</span></span> <span class="caption">Confira</span> </div> <div class="step"> <span class="number"><span>05</span></span> <span class="caption">Feito</span> </div> </div> </div> <div class="site-section bg-light"> <div class="container"> <div class="row justify-content-center text-center mb-5"> <div class="col-7 text-center mb-5"> <h2>Depoimento do Cliente</h2> <p>Aluns depoimentos de nossos clientes, esparamos por você aqui também!</p> </div> </div> <div class="row"> <div class="col-lg-4 mb-4 mb-lg-0"> <div class="testimonial-2"> <blockquote class="mb-4"> <p>"Fechamos todo o serviço e deu tudo certo! O carro escolhido, chegou no horário combinado; O atendente foi super atencioso e simpático conosco, não nos apressou em nenhum momento e nos deixou bem à vontade;"</p> </blockquote> <div class="d-flex v-card align-items-center"> <img src="images/person_1.jpg" alt="Image" class="img-fluid mr-3"> <span>Dan Stubark</span> </div> </div> </div> <div class="col-lg-4 mb-4 mb-lg-0"> <div class="testimonial-2"> <blockquote class="mb-4"> <p>"Serviços prestados com rapidez e qualidade. Super recomento"</p> </blockquote> <div class="d-flex v-card align-items-center"> <img src="images/person_2.jpg" alt="Image" class="img-fluid mr-3"> <span>Elisabet Savala</span> </div> </div> </div> <div class="col-lg-4 mb-4 mb-lg-0"> <div class="testimonial-2"> <blockquote class="mb-4"> <p>"Uma empresa q atende seus clientes com qualidade!"</p> </blockquote> <div class="d-flex v-card align-items-center"> <img src="images/person_3.jpg" alt="Image" class="img-fluid mr-3"> <span>Katie Pears</span> </div> </div> </div> </div> </div> </div> <div class="site-section bg-white"> <div class="container"> <div class="row justify-content-center text-center mb-5"> <div class="col-7 text-center mb-5"> <h2>Nosso Blog</h2> <p>Estar atento aos detalhes do contrato e do processo de locação pode ajudá-lo a evitar aborrecimentos futuros e até cobranças.</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="post-entry-1 h-100"> <a href="single.html"> <img src="images/post_1.jpg" alt="Image" class="img-fluid"> </a> <div class="post-entry-1-contents"> <h2><a href="single.html">O melhor conforto em carros</a></h2> <span class="meta d-inline-block mb-3">Abril 17, 2019 <span class="mx-2">by</span> <a href="#">Admin</a></span> <p> O melhor conforto, em sua locação e segurança para você e sua Familía. </p> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="post-entry-1 h-100"> <a href="single.html"> <img src="images/img_2.jpg" alt="Image" class="img-fluid"> </a> <div class="post-entry-1-contents"> <h2><a href="single.html">O melhor aluguel de carros em todo o planeta</a></h2> <span class="meta d-inline-block mb-3">Agosto 17, 2019 <span class="mx-2">by</span> <a href="#">Admin</a></span> <p>Aluguel de carros com pacotes flexíveis, durações variadas, e pagamento facilitado.</p> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="post-entry-1 h-100"> <a href="single.html"> <img src="images/img_3.jpg" alt="Image" class="img-fluid"> </a> <div class="post-entry-1-contents"> <h2><a href="single.html">Diversidades de modelos</a></h2> <span class="meta d-inline-block mb-3">Julho 17, 2019 <span class="mx-2">by</span> <a href="#">Admin</a></span> <p>Veículos de diversas categorias, tanto para passeio quanto para operações especiais..</p> </div> </div> </div> </div> </div> </div> <footer class="site-footer"> <div class="container"> <div class="row"> <div class="col-lg-3"> <h2 class="footer-heading mb-4">Sobre Nós</h2> <p>///texts. </p> </div> <div class="col-lg-8 ml-auto"> <div class="row"> <div class="col-lg-3"> <h2 class="footer-heading mb-4">Links rápidos</h2> <ul class="list-unstyled"> <li><a href="#">Sobre Nós</a></li> <li><a href="#">Depoimentos</a></li> <li><a href="#">Termos de Serviço</a></li> <li><a href="#">Privacidade</a></li> <li><a href="#">Contate-nos</a></li> </ul> </div> <div class="col-lg-3"> <h2 class="footer-heading mb-4">Depoimentos</h2> <ul class="list-unstyled"> <li><a href="#">Sobre Nós</a></li> <li><a href="#">Depoimentos</a></li> <li><a href="#">Termos de Serviço</a></li> <li><a href="#">Privacidade</a></li> <li><a href="#">Contate-nos</a></li> </ul> </div> <div class="col-lg-3"> <h2 class="footer-heading mb-4">Termos de Serviço</h2> <ul class="list-unstyled"> <li><a href="#">About Us</a></li> <li><a href="#">Depoimentos</a></li> <li><a href="#">Termos de Serviço</a></li> <li><a href="#">Privacidade</a></li> <li><a href="#">Contate-nos</a></li> </ul> </div> <div class="col-lg-3"> <h2 class="footer-heading mb-4">Contate-nos</h2> <ul class="list-unstyled"> <li><a href="#">About Us</a></li> <li><a href="#">Depoimentos</a></li> <li><a href="#">Termos de Serviço</a></li> <li><a href="#">Privacidade</a></li> <li><a href="#">Contate-nos</a></li> </ul> </div> </div> </div> </div> <div class="row pt-5 mt-5 text-center"> <div class="col-md-12"> <div class="border-top pt-5"> <p> <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart text-danger" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank" >Colorlib</a> <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> </p> </div> </div> </div> </div> </footer> </div> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/jquery.sticky.js"></script> <script src="js/jquery.waypoints.min.js"></script> <script src="js/jquery.animateNumber.min.js"></script> <script src="js/jquery.fancybox.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/aos.js"></script> <script src="js/main.js"></script> </body> </html>
/* Base */ html { overflow-x: hidden; } .font-size-10 { font-size: 10px; } .font-size-11 { font-size: 11px; } .font-size-12 { font-size: 12px; } .font-size-13 { font-size: 13px; } .font-size-14 { font-size: 14px; } .font-size-15 { font-size: 15px; } .font-size-16 { font-size: 16px; } .font-size-17 { font-size: 17px; } .font-size-18 { font-size: 18px; } .font-size-19 { font-size: 19px; } .font-size-20 { font-size: 20px; } .font-size-21 { font-size: 21px; } .font-size-22 { font-size: 22px; } .font-size-23 { font-size: 23px; } .font-size-24 { font-size: 24px; } .font-size-25 { font-size: 25px; } .font-size-26 { font-size: 26px; } .font-size-27 { font-size: 27px; } .font-size-28 { font-size: 28px; } .font-size-29 { font-size: 29px; } .font-size-30 { font-size: 30px; } .font-gray-1 { color: #f7f7f7; } .font-gray-2 { color: #e9e9e9; } .font-gray-3 { color: #d9d9d9; } .font-gray-4 { color: #c9c9c9; } .font-gray-5, .block-heading-1 span { color: #b8b8b8; } .font-gray-6 { color: #a8a8a8; } .font-gray-7 { color: #939393; } .font-gray-8 { color: #7b7b7b; } .font-gray-9 { color: #636363 #4d4d4d; } .font-gray-10 { color: #353535; } .border-gray-1 { border-color: #f7f7f7; } .border-gray-2 { border-color: #e9e9e9; } .border-gray-3 { border-color: #d9d9d9; } .border-gray-4 { border-color: #c9c9c9; } .border-gray-5 { border-color: #b8b8b8; } .border-gray-6 { border-color: #a8a8a8; } .border-gray-7 { border-color: #939393; } .border-gray-8 { border-color: #7b7b7b; } .border-gray-9 { border-color: #636363 #4d4d4d; } .border-gray-10 { border-color: #353535; } .bg-gray-1 { border-color: #f7f7f7; } .bg-gray-2 { border-color: #e9e9e9; } .bg-gray-3 { border-color: #d9d9d9; } .bg-gray-4 { border-color: #c9c9c9; } .bg-gray-5 { border-color: #b8b8b8; } .bg-gray-6 { border-color: #a8a8a8; } .bg-gray-7 { border-color: #939393; } .bg-gray-8 { border-color: #7b7b7b; } .bg-gray-9 { border-color: #636363 #4d4d4d; } .bg-gray-10 { border-color: #353535; } .letter-spacing-1 { letter-spacing: 0.1em; } .letter-spacing-2 { letter-spacing: 0.2em; } .border-w-1 { border-width: 1px; } .border-w-2 { border-width: 2px; } .border-w-3 { border-width: 3px; } .border-w-4 { border-width: 4px; } .border-w-5 { border-width: 5px; } .primary-black--hover { background: #007bff; color: #fff; } .primary-black--hover:hover { background: #000; color: #fff; } .primary-dark--hover { background: #007bff; color: #fff; } .primary-dark--hover:hover { background: gray; color: #fff; } .primary-primary-outline--hover { background: #007bff; color: #fff; } .primary-primary-outline--hover:hover { border-color: #007bff; background: transparent; } .primary-outline-primary--hover { background: transparent; border-color: #007bff; } .primary-outline-primary--hover:hover { color: #fff; background: #007bff; } body { line-height: 1.7; color: #364d59 !important; font-weight: 300; font-size: 1rem; } ::-moz-selection { background: #000; color: #fff; } ::selection { background: #000; color: #fff; } a { -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; text-decoration: none; } a:hover { text-decoration: none; } h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-weight: 300; color: #364d59; } .border-2 { border-width: 2px; } .text-black { color: #000 !important; } .bg-black { background: #000 !important; } .color-black-opacity-5 { color: rgba(0, 0, 0, 0.5); } .color-white-opacity-5 { color: rgba(255, 255, 255, 0.5); } .btn.btn-outline-white { border-color: #fff; background: transparent; color: #fff; } .btn.btn-outline-white:hover { background: #fff; border-color: #fff; color: #000; } .line-height-1 { line-height: 1 !important; } .bg-black { background: #000; } .form-control { height: 55px; background: #fff !important; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .form-control:active, .form-control:focus { border-color: #007bff; } .form-control:hover, .form-control:active, .form-control:focus { -webkit-box-shadow: none !important; box-shadow: none !important; } .site-section { padding: 2.5em 0; } @media (min-width: 768px) { .site-section { padding: 5em 0; } } .site-section.site-section-sm { padding: 4em 0; } .site-footer { padding: 4em 0; background: #000; } @media (min-width: 768px) { .site-footer { padding: 8em 0; } } .site-footer .border-top { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } .site-footer p { color: #fff; } .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5 { color: #fff; } .site-footer a { color: rgba(255, 255, 255, 0.5); } .site-footer a:hover { color: white; } .site-footer ul li { margin-bottom: 10px; } .site-footer .footer-heading { font-size: 16px; color: #fff; } .bg-text-line { display: inline; background: #000; -webkit-box-shadow: 20px 0 0 #000, -20px 0 0 #000; box-shadow: 20px 0 0 #000, -20px 0 0 #000; } .text-white-opacity-05 { color: rgba(255, 255, 255, 0.5); } .text-black-opacity-05 { color: rgba(0, 0, 0, 0.5); } .hover-bg-enlarge { overflow: hidden; position: relative; } @media (max-width: 991.98px) { .hover-bg-enlarge { height: auto !important; } } .hover-bg-enlarge > div { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: .8s all ease-in-out; -o-transition: .8s all ease-in-out; transition: .8s all ease-in-out; } .hover-bg-enlarge:hover > div, .hover-bg-enlarge:focus > div, .hover-bg-enlarge:active > div { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } @media (max-width: 991.98px) { .hover-bg-enlarge .bg-image-md-height { height: 300px !important; } } .bg-image { background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } .bg-image.overlay { position: relative; } .bg-image.overlay:after { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; background: rgba(0, 0, 0, 0.7); } .bg-image > .container { position: relative; z-index: 1; } @media (max-width: 991.98px) { .img-md-fluid { max-width: 100%; } } @media (max-width: 991.98px) { .display-1, .display-3 { font-size: 3rem; } } .play-single-big { width: 90px; height: 90px; display: inline-block; border: 2px solid #fff; color: #fff !important; border-radius: 50%; position: relative; -webkit-transition: .3s all ease-in-out; -o-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .play-single-big > span { font-size: 50px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-40%, -50%); -ms-transform: translate(-40%, -50%); transform: translate(-40%, -50%); } .play-single-big:hover { width: 120px; height: 120px; } .overlap-to-top { margin-top: -150px; } .ul-check { margin-bottom: 50px; } .ul-check li { position: relative; padding-left: 35px; margin-bottom: 15px; line-height: 1.5; } .ul-check li:before { left: 0; font-size: 20px; top: -.3rem; font-family: "icomoon"; content: "\e5ca"; position: absolute; } .ul-check.white li:before { color: #fff; } .ul-check.success li:before { color: #71bc42; } .ul-check.primary li:before { color: #007bff; } .select-wrap, .wrap-icon { position: relative; } .select-wrap .icon, .wrap-icon .icon { position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 22px; } .select-wrap select, .wrap-icon select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; } .top-bar { border-bottom: 1px solid #e9ecef !important; }

Related: See More


Questions / Comments: