²é¿´/±à¼ ´úÂë
ÄÚÈÝ
@extends('layouts.app') @section('title','Home - Dusty helmets') @section('content') <style type="text/css"> .services:hover { opacity: 0.8 !important; /* transition: transform .5s ease; */ -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; transform: scale(1.5); } .profile-card-5 { margin-top: 20px; border-radius: 10px; } .profile-card-5:hover .card-img-top { border-bottom: 1px solid #fbaf32; -webkit-animation: movex 2s infinite alternate; animation: movex 2s infinite alternate; } @-webkit-keyframes movex { 0% { transform: translateY(0); } 100% { transform: translateY(-17px); } } @keyframes movex { 0% { transform: translateY(0); } 100% { transform: translateY(-17px); } } .profile-card-5 .btn { border-radius: 2px; text-transform: uppercase; font-size: 12px; padding: 7px 20px; } .profile-card-5 .card-img-block { width: 91%; margin: 0 auto; position: relative; top: -20px; } .profile-card-5 .card-img-block img { border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.63); } .profile-card-5 h5 { color: #4E5E30; font-weight: 600; margin-bottom: 0 !important; } .profile-card-5 .btn-primary { background-color: #719a0a; border-color: #719a0a; } #bbt { font-weight: 100 !important; text-transform: none !important; letter-spacing: 1px !important; padding: 10px 20px 10px !important; } #bbt:hover { color: #1e2714 !important; } .services__item__icon::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #fbaf32; content: ""; -webkit-transition: all, 0.5s; -o-transition: all, 0.5s; transition: all, 0.5s; } .services__item:hover .services__item__icon::after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .services__item__icon { position: relative; height: 70px; width: 70px; line-height: 70px; text-align: center; } .hh:hover { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; border-radius: .25rem; border-bottom: 1px solid #fbaf32; transform: translateY(-10px); -webkit-transform: translateY(-10px); { /*padding: 10px;*/ -moz-transform: translateY(-10px) ; } .fa { color: #757575 !important; } </style> @include('includes.slider') <!--<div id="preloader"></div>--> <!--<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>--> <div class="feature" id="vvv"> <div class="container"> <div class="row"> <div class="col-lg-5"> <div class="section-header"> <p>Welcome to</p> <h2>Dusty Helmets</h2> </div> <div class="feature-text"> <div class="mt-4 col-sm-12"> <div class="shadow card profile-card-5"> <div class="card-img-block"> <img class="card-img-top img-responsive" src="public/assets/P8/pic2.jpg" alt="motorbike offroad racing"> </div> <div class="pt-0 card-body"> <!-- <h5 class="card-title">Who we are</h5> --> {{-- <h4 style="color:#4E5E30;">Who we are</h4>--}} <h4 style="color:#4E5E30;">{{$page->title1}}</h4> <p class="card-text">{{strip_tags(substr(($page->content1),0,152))}}</p> {{-- <p class="card-text">Dusty Helmets is a collaboration of a group of Kenyans with a wealth of experience in both the tourism--}} {{-- industry and off-road riding on 'Piki Piki's'.</p>--}} <center><a class="primary-btn ty" style="color:#757575" href="#" id="bbt" onclick="$('.ty').hide(); $('#moreDoc').slideDown();">View More</a> </center> <div id="moreDoc" style="display:none;"> <p> {{strip_tags(substr(($page->content1),152))}} {{-- With our carefully thought-out itineraries designed to cater for people of all ages and varying levels of--}} {{-- experience on two wheels, we will offer you the adventure of a lifetime.--}} </p> <center><a class="primary-btn" href="#" id="bbt" onclick="$('#moreDoc').slideUp(); $('.ty').show();" style="color:#757575">View Less</a></center> </div> </div> </div> </div> </div> </div> <div class="col-lg-7"> <div class="mt-5 row"> <div class="col-sm-6"> <div class="mb-3 shadow card hh" style="border:none !important"> <div class="card-body services__item"> <div class="mb-2 services__item__icon"> <i class="mt-3 fa fa-motorcycle" style="font-size: 40px;"></i> </div> <h4 style="color: #4E5E30">{{$page->title2}}</h4> <p class="card-text">{{strip_tags(substr(($page->content2),0,109))}} {{-- <p class="card-text">This is the local vernacular for motorbikes. It is a noun in Swahili that describes a two-wheeled vehicle --}} <small><a style="color:#006FCD" href="#" id="ty1" onclick="$('#ty1').hide(); $('#moreDoc1').slideDown();">View More</a></small> <span id="moreDoc1" style="display:none;"> {{strip_tags(substr(($page->content2),109))}} <small><a href="#" onclick="$('#moreDoc1').slideUp(); $('#ty1').show();" style="color:#006FCD">View Less</a></small> </span></p> </div> </div> </div> <div class="col-sm-6"> <div class="mb-3 shadow card hh" style="border:none !important"> <div class="card-body services__item"> <div class="mb-2 services__item__icon"> <i class="mt-3 fa fa-motorcycle" style="font-size: 40px;"></i> </div> <h4 style="color: #4E5E30">{{$page->title3}}</h4> <p class="card-text"> {{strip_tags(substr(($page->content3),0,117))}} <small><a style="color:#006FCD" href="#" id="ty2" onclick="$('#ty2').hide(); $('#moreDoc2').slideDown();">View More</a></small> <span id="moreDoc2" style="display:none;"> {{strip_tags(substr(($page->content3),117))}} <small><a href="#" onclick="$('#moreDoc2').slideUp(); $('#ty2').show();" style="color:#006FCD">View Less</a></small> </span></p> </div> </div> </div> </div> <div class="row"> <div class="mb-3 col-sm-6"> <div class="shadow card hh" style="border:none !important"> <div class="card-body services__item"> <div class="mb-2 services__item__icon"> <i class="mt-3 flaticon-medal" style="font-size: 40px;"></i> </div> <h4 style="color: #4E5E30">{{$page->title4}}</h4> <p class="card-text"> {{strip_tags(substr(($page->content4),0,128))}} <small><a style="color:#006FCD" href="#" id="ty3" onclick="$('#ty3').hide(); $('#moreDoc3').slideDown();">View More</a></small> <span id="moreDoc3" style="display:none;"> {{strip_tags(substr(($page->content4),128))}} <small><a href="#" onclick="$('#moreDoc3').slideUp(); $('#ty3').show();" style="color:#006FCD">View Less</a></small> </span></p> </div> </div> </div> <div class="mb-3 col-sm-6"> <div class="shadow card hh" style="border:none !important"> <div class="card-body services__item"> <div class="mb-2 services__item__icon"> <i class="mt-3 flaticon-courier" style="font-size: 40px;"></i> </div> <h4 style="color: #4E5E30">{{$page->title5}}</h4> <p class="card-text">{{strip_tags(substr(($page->content5),0,123))}} <small><a style="color:#006FCD" href="#" id="ty4" onclick="$('#ty4').hide(); $('#moreDoc4').slideDown();">View More</a></small> <span id="moreDoc4" style="display:none;"> {{strip_tags(substr(($page->content5),123))}} <small><a href="#" onclick="$('#moreDoc4').slideUp(); $('#ty4').show();" style="color:#006FCD">View Less</a></small> </span></p> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> function scrl() { event.preventDefault(); $('html, body').animate({ scrollTop: $("#vvv").offset().top }, 1000); } </script> @endsection