<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 ----------> <nav class="navbar navbar-expand-sm bg-light justify-content-center"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#" style="background-color:#F8F9FA">Location : 1143 NEW DELHI,INDIA</a> </li> <li class="nav-item"> <a class="nav-link" href="#" style="background-color:#F8F9FA">Contact : +9198283868</a> </li> <li class="nav-item"> <a class="nav-link" href="#" style="background-color:#F8F9FA">Mail : info@example.com</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm navbar-dark "> <!-- Links --> <ul class="navbar-nav container "> <li class="nav-item" style="margin-left:-20px;font-size:30px"> <a class="nav-link" href="#">TRAVEL TRIP</a> </li> <li class="nav-item"> <a class="nav-link" href="#">HOMEPAGE</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ABOUT US</a> </li> <li class="nav-item"> <a class="nav-link" href="#">SERVICES</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CONTACTS</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> MORE </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </nav> <main role="main"> <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <div class="container"> <h1 class="display-3">Travel the World!</h1> <p>Wherever you go , go with all your heart.</p> <button class="button" href="#" role="button"><span>Learn more</span> </button> </div> </div> <!-- Services section --> <section> <div class="container" id="what-we-do"> <h2 class="section-title h1 text-center" style="color:black">OUR SERVICES</h2> <p class="text-center mb-2 text-muted h5">You’ll always have fascinating places to be and friendly people to see.</p> <div class="row mt-5"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <div class="card-block block-1"> <h3 class="card-title">Air Tickets</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="javascript:void();" title="Read more" class="read-more" >Read more<i class="fa fa-angle-double-right ml-2" style="color:black"></i></a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <div class="card-block block-2"> <h3 class="card-title">Summer Tour</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="javascript:void();" title="Read more" class="read-more" >Read more<i class="fa fa-angle-double-right ml-2"></i></a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <div class="card-block block-3"> <h3 class="card-title">Adventure Tour</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="javascript:void();" title="Read more" class="read-more" >Read more<i class="fa fa-angle-double-right ml-2"></i></a> </div> </div> </div> </div> </div> <!-- /Services section --> </section> <hr> <div class="container"> <!-- Example row of columns --> <h2 class="text-center">Tours and Travels</h2> <div class="row" > <div class=" card col-md-3" style="margin:30px;"> <img src = "https://japan-magazine.jnto.go.jp/jnto2wm/wp-content/uploads/1608_special_TOTO_main.jpg" height="200px" width="100%"> <P>JAPAN</P> <p><a class="button" href="#" role="button">View details</a></p> </div> <div class=" card col-md-3" style="margin:30px;"> <img src = "https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" height="200px" width="100%"> <p>NEW YORK</p> <p><a class="button" href="#" role="button">View details</a></p> </div> <div class="card col-md-3" style="margin:30px;"> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkE7W1ZiBi33L4mHPL0YnBi4S8dWWQmje3c5E1Dq86KAGdkOXtvQ" height="200px" width="100%"> <P>CANADA</P> <p><a class="button" href="#" role="button">View details </a></p> </div> </div> <div class="row" > <div class=" card col-md-3" style="margin:30px;"> <img src = "https://japan-magazine.jnto.go.jp/jnto2wm/wp-content/uploads/1608_special_TOTO_main.jpg" height="200px" width="100%"> <P>JAPAN</P> <p><a class="button" href="#" role="button">View details</a></p> </div> <div class=" card col-md-3" style="margin:30px;"> <img src = "https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" height="200px" width="100%"> <p>NEW YORK</p> <p><a class="button" href="#" role="button">View details</a></p> </div> <div class="card col-md-3" style="margin:30px;"> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkE7W1ZiBi33L4mHPL0YnBi4S8dWWQmje3c5E1Dq86KAGdkOXtvQ" height="200px" width="100%"> <P>CANADA</P> <p><a class="button" href="#" role="button">View details </a></p> </div> </div> <br> </div> <!-- /container --> <hr> <h1 class="text-center">Feedbacks</h1> <section class="carouselsection"> <div class="container"> <div id="demo" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"style="background-color:black;opacity:0.7;height:400px"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>We had such a great time in LA!</p> </div> </div> <div class="carousel-item" style="background-color:black;opacity:0.7;height:400px"> <div class="carousel-caption"> <h3>Chicago</h3> <p>Thank you, Chicago!</p> </div> </div> <div class="carousel-item" style="background-color:black;opacity:0.7;height:400px"> <div class="carousel-caption"> <h3>New York</h3> <p>We love the Big Apple!</p> </div> </div> </div> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> </section> <hr> </main> <!-- Footer --> <section id="footer"> <div class="container"> <div class="row text-center text-xs-center text-sm-left text-md-left"> <div class="col-xs-12 col-sm-4 col-md-4"> <h5>Quick links</h5> <ul class="list-unstyled quick-links"> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>Home</a></li> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>About</a></li> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>FAQ</a></li> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>Get Started</a></li> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>Videos</a></li> </ul> </div> <div class="col-xs-12 col-sm-4 col-md-4"> <h5>Quick links</h5> <ul class="list-unstyled quick-links"> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>Home</a></li> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>About</a></li> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>FAQ</a></li> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>Get Started</a></li> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>Videos</a></li> </ul> </div> <div class="col-xs-12 col-sm-4 col-md-4"> <h5>Quick links</h5> <ul class="list-unstyled quick-links"> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>Home</a></li> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>About</a></li> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>FAQ</a></li> <li><a href="javascript:void();"><i class="fa fa-angle-double-right"></i>Get Started</a></li> <li><a href="https://wwwe.sunlimetech.com" title="Design and developed by"><i class="fa fa-angle-double-right"></i>Imprint</a></li> </ul> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-5"> <ul class="list-unstyled list-inline social text-center"> <li class="list-inline-item"><a href="javascript:void();"><i class="fa fa-facebook"></i></a></li> <li class="list-inline-item"><a href="javascript:void();"><i class="fa fa-twitter"></i></a></li> <li class="list-inline-item"><a href="javascript:void();"><i class="fa fa-instagram"></i></a></li> <li class="list-inline-item"><a href="javascript:void();"><i class="fa fa-google-plus"></i></a></li> <li class="list-inline-item"><a href="javascript:void();" target="_blank"><i class="fa fa-envelope"></i></a></li> </ul> </div> </hr> </div> </div> </section> <!-- ./Footer -->

/* Make the image fully responsive */ .carousel-inner img { width: 100%; height: 100%; } /********************** /***** Services ******* /*********************/ section{ padding: 60px 0; } section .section-title{ text-align:center; color:#007b5e; margin-bottom:50px; text-transform:uppercase; } #what-we-do{ background:#ffffff; } #what-we-do .card{ padding: 1rem!important; border: none; margin-bottom:1rem; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; } #what-we-do .card:hover{ -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); } #what-we-do .card .card-block{ padding-left: 50px; position: relative; } #what-we-do .card .card-block a{ color: #007b5e !important; font-weight:700; text-decoration:none; } #what-we-do .card .card-block a i{ display:none; } #what-we-do .card:hover .card-block a i{ display:inline-block; font-weight:700; } #what-we-do .card .card-block:before{ font-family: FontAwesome; position: absolute; font-size: 39px; color: #007b5e; left: 0; -webkit-transition: -webkit-transform .2s ease-in-out; transition:transform .2s ease-in-out; } .button { border-radius: 4px; border: none; color: black; text-align: center; font-size: 20px; width: 200px; transition: all 0.5s; cursor: pointer; } .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button:hover span { padding-right: 25px; } .button:hover span:after { opacity: 1; right: 0; } .nav-link{ color:black; background-color: #4D4D4D; margin-left: 1em; margin-right: 1em; } nav{ background-color: #4D4D4D; } #topnav{ background-color: #F8F9FA; } .jumbotron{ background-image: url("http://backgroundcheckall.com/wp-content/uploads/2017/12/soothing-background-music-14.jpg") ; background-size: 2000px 600px; height: 600px; } .carouselsection{ background-image: url("https://www.training.com.au/wp-content/uploads/travel-and-tourism-courses-copy.jpg"); background-size: cover; height: 500px; } /* Footer */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); section { padding: 60px 0; } section .section-title { text-align: center; color: #007b5e; margin-bottom: 50px; text-transform: uppercase; } #footer { background: black !important; opacity: 0.7; } #footer h5{ padding-left: 10px; border-left: 3px solid #eeeeee; padding-bottom: 6px; margin-bottom: 20px; color:#ffffff; } #footer a { color: #ffffff; text-decoration: none !important; background-color: transparent; -webkit-text-decoration-skip: objects; } #footer ul.social li{ padding: 3px 0; } #footer ul.social li a i { margin-right: 5px; font-size:25px; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; } #footer ul.social li:hover a i { font-size:30px; margin-top:-10px; } #footer ul.social li a, #footer ul.quick-links li a{ color:#ffffff; } #footer ul.social li a:hover{ color:#eeeeee; } #footer ul.quick-links li{ padding: 3px 0; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; } #footer ul.quick-links li:hover{ padding: 3px 0; margin-left:5px; font-weight:700; } #footer ul.quick-links li a i{ margin-right: 5px; } #footer ul.quick-links li:hover a i { font-weight: 700; } @media (max-width:767px){ #footer h5 { padding-left: 0; border-left: transparent; padding-bottom: 0px; margin-bottom: 10px; } }