"Responsive Event Html template bootstrap 4"
Bootstrap 4.0.0 Snippet by dipendra

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <body> <nav class="navbar fixed-top navbar-expand-lg navbar-dark"> <div class="container"> <a class="navbar-brand" href="index.html"> <h3 class="my-heading ">MOJO<span class="bg-main">AVE</span></h3> </a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="fa fa-bars mfa-white"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <form class="form-inline my-2 my-lg-0 col-md-7"> <input class="myform-control mr-sm-2" type="search" placeholder="find peoples, instruments, bands and more... #hashtags" aria-label="Search"> <button class="btn btn-light"><i class="fa fa-search"></i></button> </form> <ul class="navbar-nav ml-auto"> <li class="nav-link"> <a class="btn btn-primary btn-block btn-login" href="#">Login</a> </li> <li class="nav-link"> <a class="btn btn-primary btn-block btn-register" href="#">Register</a> </li> </ul> </div> </div> </nav> <header class="masthead text-white "> <div class="overlay"></div> <div class="container slider-top-text"> <div class="row"> <div class="col-md-12 text-center"> <h3 class="my-heading ">WELCOME TO MOJO<span class="bg-main">AVE</span></h3> <p class="myp-slider text-center">Where musicians unite and become better together</p> <p class="myp text-center">SHARE YOUR MEMORIES   |   CONNECT WITH OTHERS   |   MAKE NEW FRIENDS</p> <a class="btn btn-primary btn-join" href="#">JOIN THE COMMUNITY</a> </div> <div class="col-md-12 text-center mt-5"> <div class="scroll-down"> <a class="btn btn-default btn-scroll floating-arrow" href="#about"><i class="fa fa-angle-down"></i></a> </div> </div> </div> </div> </header> <section class="testimonials"> <div class="container"> <div class="row"> <div class="col-md-4 mb-3"> <div class="big-img"> <img src="https://images.pexels.com/photos/167631/pexels-photo-167631.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="img-fluid"> </div> </div> <div class="col-md-8"> <div class="inner-section"> <h3>Follow the <span class="bg-main">Next Event</span></h3> <br> <p class="text-justify">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.</p> <div class="linear-grid"> <div class="row"> <div class="col-sm-6 col-md-3 mb-2"> <img src="https://images.pexels.com/photos/534031/pexels-photo-534031.jpeg?auto=compress&cs=tinysrgb&h=350" class="img-thumbnail"> </div> <div class=" col-sm-6 col-md-3 mb-2"> <img src="https://images.pexels.com/photos/258804/pexels-photo-258804.jpeg?auto=compress&cs=tinysrgb&h=350" class="img-thumbnail"> </div> <div class="col-sm-6 col-md-3 mb-2"> <img src="https://images.pexels.com/photos/285598/pexels-photo-285598.jpeg?auto=compress&cs=tinysrgb&h=350" class="img-thumbnail"> </div> <div class="col-sm-6 col-md-3 mb-2"> <img src="https://images.pexels.com/photos/167605/pexels-photo-167605.jpeg?auto=compress&cs=tinysrgb&h=350" class="img-thumbnail"> </div> </div> </div> </div> </div> </div> </div> </section> <section class="testimonials mybg-events"> <div class="container"> <div class="overlay"></div> <div class="row"> <div class="col-md-12"> <h3 class="title-heading text-center">MOJOAVE EVENTS</h3> <p class="myp text-center">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.</p> </div> </div> <div class="row"> <div class="col-md-4 mb-3"> <div class="big-img2"> <img src="https://images.pexels.com/photos/167527/pexels-photo-167527.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="img-fluid"> </div> </div> <div class="col-md-8"> <div class="inner-section"> <div class="my-grid"> <div class="row"> <div class="col-md-4 mb-3"> <img src="https://images.pexels.com/photos/761963/pexels-photo-761963.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="img-fluid"> </div> <div class="col-md-8 mb-3"> <img src=" https://images.pexels.com/photos/164693/pexels-photo-164693.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="img-fluid"> </div> <div class="col-md-8 mb-3"> <div class="text-block"> <h5 class="events-heading">Lorem ipsum is simply dummy text of the printing and typesetting industry.</h5> <p class="myp-font">contrary to popular belief, 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 and more recently with desktop publishing software like Aldus PageMaker.</p> </div> </div> <div class="col-md-4"> <img src="https://images.pexels.com/photos/1150837/pexels-photo-1150837.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="img-fluid"> </div> </div> </div> </div> </div> </div> </div> </section> <section class="testimonials text-center"> <div class="container"> <div class="row"> <div class="col-md-8 mx-auto"> <h3 class="text-center font-weight-bold">JOIN MOJO<span class="bg-main">AVE</span> GROUPS</h3> <p class=" text-center">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.</p> </div> </div> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/258732/pexels-photo-258732.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="card-block"> <h4 class="card-title text-center">CATHERINA GAIL</h4> <div class="card-text text-center"> <div class="social-icons"> <a href="#" class="btn btn-circle my-social-btn fb"><i class="fa fa-facebook"></i></a> <a href="#" class="btn btn-circle my-social-btn twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="btn btn-circle my-social-btn google"><i class="fa fa-google"></i></a> </div> </div> </div> <div class="card-footer text-center"> <small>Lorem Ipsum is simply dummy text of the printing and typesetting</small> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/210922/pexels-photo-210922.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="card-block"> <h4 class="card-title text-center">HARVEY RUBE</h4> <div class="card-text text-center"> <div class="social-icons"> <a href="#" class="btn btn-circle my-social-btn fb"><i class="fa fa-facebook"></i></a> <a href="#" class="btn btn-circle my-social-btn twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="btn btn-circle my-social-btn google"><i class="fa fa-google"></i></a> </div> </div> </div> <div class="card-footer text-center"> <small>Lorem Ipsum is simply dummy text of the printing and typesetting</small> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/756242/pexels-photo-756242.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="card-block"> <h4 class="card-title text-center">JANET PRIS</h4> <div class="card-text text-center"> <div class="social-icons"> <a href="#" class="btn btn-circle my-social-btn fb"><i class="fa fa-facebook"></i></a> <a href="#" class="btn btn-circle my-social-btn twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="btn btn-circle my-social-btn google"><i class="fa fa-google"></i></a> </div> </div> </div> <div class="card-footer text-center"> <small>Lorem Ipsum is simply dummy text of the printing and typesetting</small> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/167445/pexels-photo-167445.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="card-block"> <h4 class="card-title text-center">KEVIN WARD</h4> <div class="card-text text-center"> <div class="social-icons"> <a href="#" class="btn btn-circle my-social-btn fb"><i class="fa fa-facebook"></i></a> <a href="#" class="btn btn-circle my-social-btn twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="btn btn-circle my-social-btn google"><i class="fa fa-google"></i></a> </div> </div> </div> <div class="card-footer text-center"> <small>Lorem Ipsum is simply dummy text of the printing and typesetting</small> </div> </div> </div> </div> </div> </section> <section class="testimonials text-center mybg-music"> <div class="container"> <div class="row"> <div class="col-md-12"> <h3 class="title-heading text-center font-weight-bold">MOJOAVE LATEST MUSIC</h3> <p class="myp text-center">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.</p> </div> </div> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/761963/pexels-photo-761963.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/838696/pexels-photo-838696.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/1047930/pexels-photo-1047930.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/164693/pexels-photo-164693.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/876713/pexels-photo-876713.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/258732/pexels-photo-258732.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/210887/pexels-photo-210887.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/210922/pexels-photo-210922.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/462442/pexels-photo-462442.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/167589/pexels-photo-167589.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/167626/pexels-photo-167626.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-2 mt-4"> <div class="card"> <img class="card-img-top" src="https://images.pexels.com/photos/167527/pexels-photo-167527.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> </div> </div> </div> </div> </section> <section class="testimonials bg-light"> <div class="container"> <div class="row"> <div class="col-md-8 mx-auto"> <h3 class="text-center font-weight-bold">MOJO<span class="bg-main">AVE</span> MARKET PLACE</h3> <p class=" text-center">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.</p> </div> </div> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-4 mt-4"> <div class="card"> <img class="card-img-top h-262" src="https://images.pexels.com/photos/449627/pexels-photo-449627.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="card-block"> <h4 class="card-title">Lorem Ipsum Dolor Site Amet</h4> <div class="card-text"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p> </div> </div> <div class="card-footer"> <small>$ 170</small> <a href="#" class="pull-right">More Info</a> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-4 mt-4"> <div class="card"> <img class="card-img-top h-262" src="https://images.pexels.com/photos/56005/fiji-beach-sand-palm-trees-56005.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"> <div class="card-block"> <h4 class="card-title">Lorem Ipsum Dolor Site Amet</h4> <div class="card-text"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p> </div> </div> <div class="card-footer"> <small>$ 170</small> <a href="#" class="pull-right">More Info</a> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-4 mt-4"> <div class="card"> <img class="card-img-top h-262" src="https://images.pexels.com/photos/753626/pexels-photo-753626.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"> <div class="card-block"> <h4 class="card-title ">Lorem Ipsum Dolor Site Amet</h4> <div class="card-text "> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p> </div> </div> <div class="card-footer"> <small>$ 170</small> <a href="#" class="pull-right">More Info</a> </div> </div> </div> </div> </div> </section> <section class="testimonials text-center "> <div class="container"> <div class="row"> <div class="col-md-8 mx-auto"> <h3 class="text-center font-weight-bold">MOJO<span class="bg-main">AVE</span> FEATURED ARTIST</h3> <p class=" text-center">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.</p> </div> </div> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-6 mt-4"> <div class="big-img-3"> <img src="https://images.pexels.com/photos/167480/pexels-photo-167480.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="img-fluid"> </div> </div> <div class="col-sm-6 col-md-4 col-lg-6 mt-4"> <div class="my-right-text"> <p class="text-justify pt-5 font-italic">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. remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown.</p> <a href="#" class="link-color">Michael U</a> <p class="text-muted">Lorem Ipsum Dolor Sit Amet</p> </div> </div> </div> </div> </section> <footer class="footer bg-dark"> <div class="container"> <div class="row"> <div class="col-lg-6 h-100 text-center text-lg-left my-auto"> <ul class="list-inline mb-2"> <li class="list-inline-item"> <a href="#">About</a> </li> <li class="list-inline-item">⋅</li> <li class="list-inline-item"> <a href="#">Contact</a> </li> <li class="list-inline-item">⋅</li> <li class="list-inline-item"> <a href="#">Terms of Use</a> </li> <li class="list-inline-item">⋅</li> <li class="list-inline-item"> <a href="#">Privacy Policy</a> </li> </ul> <p class="text-muted small mb-4 mb-lg-0">© Your Website 2018. All Rights Reserved.</p> </div> <div class="col-lg-6 h-100 text-center text-lg-right my-auto"> <ul class="list-inline mb-0"> <li class="list-inline-item mr-3"> <a href="#"> <i class="fa fa-facebook fa-2x fa-fw"></i> </a> </li> <li class="list-inline-item mr-3"> <a href="#"> <i class="fa fa-twitter fa-2x fa-fw"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fa fa-instagram fa-2x fa-fw"></i> </a> </li> </ul> </div> </div> </div> </footer> <script> $(window).on("scroll", function() { if ($(this).scrollTop() > 10) { $("nav.navbar").addClass("mybg-dark"); $("nav.navbar").addClass("navbar-shrink"); } else { $("nav.navbar").removeClass("mybg-dark"); $("nav.navbar").removeClass("navbar-shrink"); } }); </script> </body>
body { font-family: 'Open Sans', sans-serif; background: #fff; color: #222; } .navbar-shrink{ padding-top: 0; padding-bottom: 0; } .mybg-dark { background: #000 !important; } header.masthead { position: relative; height: 100vh; background-color: #343a40; background: url('https://images.pexels.com/photos/1047442/pexels-photo-1047442.jpeg?auto=compress&cs=tinysrgb&h=650&w=940') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top: 8rem; padding-bottom: 8rem; } header.masthead .overlay{position:absolute;background-color:#212529;height:100%;width:100%;top:0;left:0;opacity:.3} @media (min-width:768px) { header.masthead { padding-top: 12rem; padding-bottom: 12rem; } header.masthead h3 { font-size: 4rem; } } .testimonials{padding-top:7rem;padding-bottom:7rem} .myform-control { display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } button.btn.btn-light { position: absolute; background: transparent; border: none; height: 38px; right: 23px; } a.btn.btn-default.btn-scroll { border: 1px solid #fff; color: #fff; border-radius: 100%; } .scroll-down { position: absolute; left: 50%; transform: translate(-50%, -50%); top: 135px; } .big-img img { height: 325px; object-fit: cover; } .container.slider-top-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .btn-login { width: 138px; background: #3683a1 !important; border: 1px solid #1fc6d8 !important; } .mfa-white { color: #fff !important; } h3.my-heading { color: #fff; font-weight: bold; font-size: 39px; } p.myp-slider.text-center { color: #fff; } .btn-register { width: 138px; background: #1fc6d8 !important; } .btn-join { background: #1fc6d8 !important; border: 1px solid #1fc6d8 !important; } section#about { width: 100%; padding-top: 2.1rem; padding-bottom: 2.1rem; } .btn-circle { border-radius: 50%; } .my-social-btn { background: lightgrey; } a.btn.btn-circle.my-social-btn.fb:hover { background: #205b9f; } a.btn.btn-circle.my-social-btn.twitter:hover { background: #00ace3; } a.btn.btn-circle.my-social-btn.google:hover { background: #ff3921; } a.btn.btn-circle.my-social-btn { color: #fff; } .inner-section h3 { text-transform: uppercase; } span.bg-main { color: #008ba3; } hr.my-border { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 2px solid #008ba3; width: 117px; } .linear-grid img { width: 100%; height: 124px; } .mybg-events { background: url('https://images.pexels.com/photos/167605/pexels-photo-167605.jpeg?auto=compress&cs=tinysrgb&h=650&w=940') no-repeat center center fixed; background-size: cover; } .h-262 { height: 262px !important; } h3.title-heading.text-center { color: #fff; font-weight: bold; } p.myp.text-center { color: #fff; font-size: 14px; margin-bottom: 3rem; } .big-img2 img { height: 472px; width: 100%; object-fit: cover; } .my-grid img { height: 228px; width: 100%; object-fit: cover; } .text-block { min-height: 228px; height: auto; background: #fff; padding: 15px; } h5.events-heading { font-weight: bold; font-size: 17px; } p.myp-font { font-size: 15px; } section#group { background: #fff; height: 100%; width: 100%; padding-top: 2rem; padding-bottom: 2rem; } .card { font-size: 1em; overflow: hidden; padding: 0; border: none !important; border-radius: .28571429rem; } .card:hover { color: #222 !important; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5; } .card-block { font-size: 1em; position: relative; margin: 0; padding: 1em; border: none !important; border-top: 1px solid rgba(34, 36, 38, .1); box-shadow: none; } .card-img-top { display: block; width: 100%; height: auto; } .card-title { font-size: 1.28571429em; font-weight: 700; line-height: 1.2857em; } .card-text { clear: both; margin-top: .5em; color: rgba(0, 0, 0, .68); } .card-footer { font-size: 1em; position: static; top: 0; left: 0; max-width: 100%; padding: .75em 1em; color: rgba(0, 0, 0, .4); border-top: 1px solid rgba(0, 0, 0, .05) !important; background: #fff; } .card-inverse .btn { border: 1px solid rgba(0, 0, 0, .05); } .mybg-music { background: url('https://images.pexels.com/photos/167605/pexels-photo-167605.jpeg?auto=compress&cs=tinysrgb&h=650&w=940') no-repeat center center fixed; background-size: cover; } section#marketplace { background: #f7f7f7; height: 100%; width: 100%; padding-top: 5rem; padding-bottom: 5rem; } section#marketplace .card { font-size: 1em; overflow: hidden; padding: 0; border: none; border-radius: .28571429rem; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5; } section#artist { background: #fff; height: 100%; width: 100%; padding-top: 2rem; padding-bottom: 2rem; } a.link-color { color: #008ba3; font-weight: bold; } .floating-arrow { -webkit-animation: floating-arrow 1.6s infinite ease-in-out 0s; -o-animation: floating-arrow 1.6s infinite ease-in-out 0s; animation: floating-arrow 1.6s infinite ease-in-out 0s; } @keyframes floating-arrow { from { -webkit-transform: translateY(0); transform: translateY(0); } 65% { -webkit-transform: translateY(11px); transform: translateY(11px); } to { -webkit-transform: translateY(0); transform: translateY(0); } } footer.footer{padding-top:4rem;padding-bottom:4rem} li.list-inline-item a { color: #fff; text-decoration: none; } /*-------------------responsive-----------------*/ @media screen and (max-width: 520px) { ::placeholder { font-size: 10px; } .scroll-down { position: absolute; left: 50%; transform: translate(-50%, -50%); top: 45px; } .text-block { padding: 15px; } .linear-grid img { width: 100%; height: 181px; } .my-grid img { width: 100%; } .inner-section h3 { font-size: 22px; } .inner-section p { font-size: 13px; } } @media screen and (max-width: 767px) { .btn-login{ width:100%; } .btn-register { width:100%; } }

Related: See More


Questions / Comments: