How To Create Tour And Travel Website Using HTML CSS JS
Travel website using HTML CSS and JavaScript. I Create this tour and travel website project using HTML, CSS, and JavaScript. This Tour And Travel Website is fully Responsive and has all browser compatibility. If you follow this tutorial step by step, you will be able to make this tour and travel website project
I have more than Four years experience in Frontend(HTML, CSS, and JS). I promise you, I will try to provide you best way to create Tour Website using HTML CSS And JavaScript.
Make a Travel Website Using HTML CSS And JavaScript
<span class="pln"> </span><span class="com"><!--doctype html--></span><span class="pln"> </span><span class="tag"><html></span><span class="pln"> </span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--==Title============================================================--></span><span class="pln"> </span><span class="tag"><title></span><span class="pln">Travel Website</span><span class="tag"></title></span><span class="pln"> </span><span class="com"><!--==Stylesheet=======================================================--></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/style.css"</span><span class="tag">/></span><span class="pln"> </span><span class="com"><!--==Fav-icon=========================================================--></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"shortcut icon"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"images/fav-icon.png"</span><span class="tag">/></span><span class="pln"> </span><span class="com"><!--==Using-Font-Awesome-for-Icons=====================================--></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://kit.fontawesome.com/c8e4d183c2.js"</span><span class="pln"> </span><span class="atn">crossorigin</span><span class="pun">=</span><span class="atv">"anonymous"</span><span class="tag">></script></span><span class="pln"> </span><span class="com"><!--==Import-Poppins-Font-Family-From-Google-Font======================--></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"preconnect"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://fonts.googleapis.com"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"preconnect"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://fonts.gstatic.com"</span><span class="pln"> </span><span class="atn">crossorigin</span><span class="tag">></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!-- Link Swiper's CSS --></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"</span><span class="pln"> </span><span class="tag">/></span><span class="pln"> </span><span class="tag"></head></span><span class="pln"> </span><span class="tag"><body></span><span class="pln"> </span><span class="com"><!--==Navigation=============================--></span><span class="pln"> </span><span class="tag"><nav</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navigation"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--logo--></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"index.html"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"logo"</span><span class="tag">><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fab fa-phoenix-framework"</span><span class="tag">></i></span><span class="pln">Travel</span><span class="tag"></a></span><span class="pln"> </span><span class="com"><!--menu-btn--></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"menu-btn"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"menu-btn"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"menu-btn"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"menu-icon"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-icon"</span><span class="tag">></span></span><span class="pln"> </span><span class="tag"></label></span><span class="pln"> </span><span class="com"><!--menu--></span><span class="pln"> </span><span class="tag"><ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"menu"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"index.html"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">></span><span class="pln">Home</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#trending"</span><span class="tag">></span><span class="pln">Trending</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#destination"</span><span class="tag">></span><span class="pln">Destination</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#testimonials"</span><span class="tag">></span><span class="pln">Testimonials</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span><span class="com"><!--book-now-btn--></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"book-now-btn"</span><span class="tag">></span><span class="pln">Book Now</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></nav></span><span class="pln"> </span><span class="com"><!--nav-end--></span><span class="pln"> </span><span class="com"><!--==main==============================--></span><span class="pln"> </span><span class="tag"><section</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"main"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"main-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Explore The World </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-globe-americas"</span><span class="tag">></i></strong></span><span class="pln"> </span><span class="tag"><h1></span><span class="pln">It's a Big World Out There, Go Explore</span><span class="tag"></h1></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo ab nesciunt possimus blanditiis amet! </span><span class="tag"></p></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Book Online</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--img--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"main-img"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Traveling"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/main.png"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--==Search-Tour=====================--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"search-tour"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><form></span><span class="pln"> </span><span class="com"><!--Location--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-search-box"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"s-b-icon"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-map-marker-alt"</span><span class="tag">></i></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"s-b-input"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Location </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-chevron-down"</span><span class="tag">></i></span></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"location"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"New York, USA"</span><span class="pln"> </span><span class="atn">required</span><span class="tag">/></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--Date--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-search-box"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"s-b-icon"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"far fa-calendar-alt"</span><span class="tag">></i></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"s-b-input"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Tour Date </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-chevron-down"</span><span class="tag">></i></span></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"date"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"tourdate"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"tourdate"</span><span class="pln"> </span><span class="atn">required</span><span class="tag">/></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--Guest--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-search-box"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"s-b-icon"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-users"</span><span class="tag">></i></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"s-b-input"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Persons </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-chevron-down"</span><span class="tag">></i></span></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"number"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"total-tourist"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"5 Tourist"</span><span class="pln"> </span><span class="atn">required</span><span class="tag">/></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--Btn--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-search-btn"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><button><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-search"</span><span class="tag">></i></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></form></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></section></span><span class="pln"> </span><span class="com"><!--==Trending===========================--></span><span class="pln"> </span><span class="tag"><section</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"trending"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--heading-container************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"trending-heading-container"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--heading--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"trending-heading"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">Trending 2022</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">Sost Brilliant reasons Entrada should be your one-stop-stop!</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--btns--></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--==trend-box-container==============--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"trending-box-container"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!-- Swiper Slider --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper mySwipercard"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-wrapper"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--**Slide-1*******************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-slide"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--box**********--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"trending-box"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--img--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-img"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Travel"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/t-1.jpg"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Forest Wild Life</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">12 Places | 3 Activites</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--price-&-Book--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"price-book"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-price"</span><span class="tag">></span><span class="pln">200$</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-book-btn"</span><span class="tag">></span><span class="pln">Book Now</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--agency-name--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"agency-name"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Agence Logo"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/Agency_Name.png"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Agence Name</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--**Slide-1*******************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-slide"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--box**********--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"trending-box"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--img--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-img"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Travel"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/t-2.jpg"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Forest Wild Life</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">12 Places | 3 Activites</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--price-&-Book--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"price-book"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-price"</span><span class="tag">></span><span class="pln">200$</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-book-btn"</span><span class="tag">></span><span class="pln">Book Now</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--agency-name--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"agency-name"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Agence Logo"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/Agency_Name.png"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Agence Name</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--**Slide-1*******************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-slide"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--box**********--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"trending-box"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--img--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-img"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Travel"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/t-3.webp"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Forest Wild Life</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">12 Places | 3 Activites</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--price-&-Book--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"price-book"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-price"</span><span class="tag">></span><span class="pln">200$</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-book-btn"</span><span class="tag">></span><span class="pln">Book Now</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--agency-name--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"agency-name"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Agence Logo"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/Agency_Name.png"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Agence Name</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--**Slide-1*******************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-slide"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--box**********--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"trending-box"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--img--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-img"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Travel"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/t-4.jpg"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Forest Wild Life</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">12 Places | 3 Activites</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--price-&-Book--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"price-book"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-price"</span><span class="tag">></span><span class="pln">200$</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-book-btn"</span><span class="tag">></span><span class="pln">Book Now</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--agency-name--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"agency-name"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Agence Logo"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/Agency_Name.png"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Agence Name</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--**Slide-1*******************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-slide"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--box**********--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"trending-box"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--img--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-img"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Travel"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/t-5.jpg"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Forest Wild Life</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">12 Places | 3 Activites</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--price-&-Book--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"price-book"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-price"</span><span class="tag">></span><span class="pln">200$</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-book-btn"</span><span class="tag">></span><span class="pln">Book Now</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--agency-name--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"agency-name"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Agence Logo"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/Agency_Name.png"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Agence Name</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--**Slide-1*******************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-slide"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--box**********--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"trending-box"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--img--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-img"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Travel"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/t-6.jpg"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Forest Wild Life</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">12 Places | 3 Activites</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--price-&-Book--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"price-book"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-price"</span><span class="tag">></span><span class="pln">200$</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"t-book-btn"</span><span class="tag">></span><span class="pln">Book Now</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--agency-name--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"agency-name"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Agence Logo"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/Agency_Name.png"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Agence Name</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-pagination"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></section></span><span class="pln"> </span><span class="com"><!--==Destination===========================--></span><span class="pln"> </span><span class="tag"><section</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"destination"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--heading******************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"destination-heading"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">TOP Destinations</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">Sost Brilliant reasons Entrada should be your one-stop-stop!</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--destination-grid*********--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"destination-grid"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--box=======--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"destination-box d-b-1"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Destination"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/d-1.jpg"</span><span class="tag">/></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ration"</span><span class="tag">></span><span class="pln">3.5</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Vientam</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Worefall</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--box=======--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"destination-box d-b-2"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Destination"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/d-2.jpg"</span><span class="tag">/></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ration"</span><span class="tag">></span><span class="pln">3.5</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Vientam</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Worefall</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--box=======--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"destination-box d-b-3"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Destination"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/d-3.jpg"</span><span class="tag">/></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ration"</span><span class="tag">></span><span class="pln">3.5</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Vientam</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Worefall</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--box=======--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"destination-box d-b-4"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Destination"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/d-4.webp"</span><span class="tag">/></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ration"</span><span class="tag">></span><span class="pln">3.5</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Vientam</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Worefall</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--box=======--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"destination-box d-b-5"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Destination"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/d-5.jpg"</span><span class="tag">/></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ration"</span><span class="tag">></span><span class="pln">3.5</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Vientam</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Worefall</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--box=======--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"destination-box d-b-6"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Destination"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/d-6.webp"</span><span class="tag">/></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ration"</span><span class="tag">></span><span class="pln">3.5</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"d-b-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Vientam</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><span></span><span class="pln">Worefall</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></section></span><span class="pln"> </span><span class="com"><!--==Testimonials========================--></span><span class="pln"> </span><span class="tag"><section</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"testimonials"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--**Img******************************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"testmonials-img"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Tour"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/testimonials-img.png"</span><span class="tag">/></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--**Slider***************************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"testmonials-slider"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!-- Swiper --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper mySwipertest"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-wrapper"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--1--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-slide"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--==box============--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"testimonials-box"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"testimonials-box-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-quote-left"</span><span class="tag">></i></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur cupiditate commodi.</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Alex Falcan</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--img--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"testimonials-box-img"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Testimonials"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/t-member.jpg"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="com"><!--slide-end--></span><span class="pln"> </span><span class="com"><!--2--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-slide"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--==box============--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"testimonials-box"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"testimonials-box-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-quote-left"</span><span class="tag">></i></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur cupiditate commodi.</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Alex Falcan</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--img--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"testimonials-box-img"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Testimonials"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/t-member.jpg"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="com"><!--slide-end--></span><span class="pln"> </span><span class="com"><!--3--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-slide"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--==box============--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"testimonials-box"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--text--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"testimonials-box-text"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-quote-left"</span><span class="tag">></i></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur cupiditate commodi.</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Alex Falcan</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--img--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"testimonials-box-img"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"Testimonials"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"images/t-member.jpg"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="com"><!--slide-end--></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"swiper-pagination"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></section></span><span class="pln"> </span><span class="com"><!--==Subscribe===========================--></span><span class="pln"> </span><span class="tag"><section</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"subscribe"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Subscribe our newsletter</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">Reacive Latest News, Updates, and other things every weak.</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"><form></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"email"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"subscribe"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Enter Your Email Address"</span><span class="pln"> </span><span class="atn">required</span><span class="tag">/></span><span class="pln"> </span><span class="tag"><button><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-paper-plane"</span><span class="tag">></i></button></span><span class="pln"> </span><span class="tag"></form></span><span class="pln"> </span><span class="tag"></section></span><span class="pln"> </span><span class="com"><!--==footer===============================--></span><span class="pln"> </span><span class="tag"><footer></span><span class="pln"> </span><span class="com"><!--container**********************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"footer-container"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!--footer-box********************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"footer-box"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fab fa-phoenix-framework"</span><span class="tag">></i></span><span class="pln"> Travel</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias fuga</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"footer-social"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fab fa-facebook-f"</span><span class="tag">></i></span><span class="pln"> </span><span class="tag"></a></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fab fa-twitter"</span><span class="tag">></i></span><span class="pln"> </span><span class="tag"></a></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fab fa-instagram"</span><span class="tag">></i></span><span class="pln"> </span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--footer-box***********************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"footer-box"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Links</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><ul></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Home</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">About</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Destinations</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Trending</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Book Online</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Contact</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--footer-box***********************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"footer-box"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Social</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><ul></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Home</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">About</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Destinations</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Trending</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Book Online</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Contact</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--footer-box***********************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"footer-box"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">External</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><ul></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Home</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">About</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Destinations</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Trending</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Book Online</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"><li><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Contact</span><span class="tag"></a></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!--**Footer-box*******************--></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"footer-box"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><strong></span><span class="pln">Contact</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><span><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-map-marker-alt"</span><span class="tag">></i></span><span class="pln"> New York, United Sate</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"><span><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"far fa-envelope"</span><span class="tag">></i></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">Example@gmail.com</span><span class="tag"></a></span></span><span class="pln"> </span><span class="tag"><span><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-phone-square-alt"</span><span class="tag">></i><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">0123456789</span><span class="tag"></a></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></footer></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"copyright"</span><span class="tag">></span><span class="pln">GoingToInternet 2021 - All Copyright Reserved</span><span class="tag"></span></span><span class="pln"> </span><span class="com"><!-- Swiper JS --></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> swiper </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Swiper</span><span class="pun">(</span><span class="str">".mySwipercard"</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> slidesPerView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> spaceBetween</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10</span><span class="pun">,</span><span class="pln"> pagination</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> el</span><span class="pun">:</span><span class="pln"> </span><span class="str">".swiper-pagination"</span><span class="pun">,</span><span class="pln"> clickable</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> breakpoints</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="lit">640</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> slidesPerView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> spaceBetween</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20</span><span class="pun">,</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="lit">768</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> slidesPerView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> spaceBetween</span><span class="pun">:</span><span class="pln"> </span><span class="lit">40</span><span class="pun">,</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="lit">1024</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> slidesPerView</span><span class="pun">:</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> spaceBetween</span><span class="pun">:</span><span class="lit">20</span><span class="pun">,</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> swiper </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Swiper</span><span class="pun">(</span><span class="str">".mySwipertest"</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> pagination</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> el</span><span class="pun">:</span><span class="pln"> </span><span class="str">".swiper-pagination"</span><span class="pun">,</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="tag"></script></span><span class="pln"> </span><span class="tag"></body></span><span class="pln"> </span><span class="tag"></html></span>
*{ margin: 0px; padding: 0px; font-family: poppins; box-sizing: border-box; scroll-behavior: smooth; } body{ margin: 0px; padding: 0px; font-family: poppins; } ul{ list-style: none; } a{ text-decoration: none; } /* width */ ::-webkit-scrollbar { width: 5px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; } /*===============================*/ .navigation{ display: flex; justify-content: space-between; align-items: center; max-width: 1200px; width: 90%; margin: auto; padding: 35px 0px } .logo{ font-size: 2rem; color: #333333; font-weight: 700; } .logo i{ color: #3647df; } .menu{ display: flex; justify-content: center; align-items: center; } .menu li a{ margin: 0px 4px; padding: 5px 10px; color: #696969; transition: all ease 0.3s; position: relative; } .menu li a::after{ content: ''; position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); height: 3px; width: 0%; border-radius: 2px; background-color: #3647df; transition: all ease 0.3s; } .menu li a:hover::after, .menu li a.active::after{ width: 30%; transition: all ease 0.3s; } .menu li a:hover, .menu li a.active{ color: #333333; transition: all ease 0.3s; } .book-now-btn{ background: linear-gradient(48deg, rgb(174, 181, 254) 0%, rgb(215, 214, 255) 93%); color: #202020; font-weight: 600; width: 150px; height: 45px; text-transform: uppercase; letter-spacing: 1px; display: flex; justify-content: center; align-items: center; font-size: 0.9rem; border-radius: 5px; transition: all ease 0.3s; } .book-now-btn:hover{ transform: scale(1.05); } .nav-right-btns{ display: flex; align-items: center; justify-content: center; } /*==main====================*/ #main{ max-width: 1200px; width: 90%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 50px auto 50px auto; } .content{ width: 100%; display: flex; justify-content: space-between; align-items: center; } .main-img{ width: 500px; height: 500px; border-radius: 50%; background: linear-gradient(48deg, rgb(174, 181, 254) 0%, rgb(215, 214, 255) 93%); } .main-img img{ width: 100%; height: 100%; object-position: center; object-fit: contain; } .main-text{ width: 500px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .main-text strong{ color: #333333; font-size: 1rem; background-color: #ebf1ff; height: 40px; padding: 0px 20px; border-radius: 20px; font-size: 0.9rem; display: flex; justify-content: flex-start; align-items:center; } .main-text strong i{ margin-left: 5px; } .main-text h1{ font-size: 3.6rem; font-weight: 700; letter-spacing: 1px; line-height: 4.3rem; margin: 15px 0px; color: #141316; } .main-text p{ color: #696969; } .main-text a{ width: 180px; height:50px; display: flex; justify-content: center; align-items: center; background: linear-gradient(48deg, rgb(174, 181, 254) 0%, rgb(215, 214, 255) 93%); margin-top: 20px; color: #1f1f1f; border-radius: 10px; font-weight: 600; } /*==Search======================*/ .search-tour{ border-radius: 80px; margin: 50px auto; max-width: 1000px; box-shadow: 8px 8px 30px rgb(29, 29, 29,0.15); background-color: #ffffff; } .search-tour form{ display: flex; justify-content: center; align-items: center; } .t-search-box{ display: flex; align-items: center; justify-content: center; margin-right: 20px; } .s-b-icon{ margin-right:10px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; color: #242424; background-color:#e9e5ff; border-radius: 50%; } .t-search-box span{ font-size: 1rem; font-weight: 500; color: #141316; margin-bottom: 4px; } .t-search-box span i{ font-size: 0.6rem; } .s-b-input{ width:calc(100% - 60px); } .t-search-box input{ border: 1px solid rgba(0,0,0,0.03); padding: 6px 10px; background-color: #f9f8ff; width: 100%; outline: none; } .search-tour form{ padding: 20px; } .t-search-btn button{ width:60px; height: 60px; border-radius: 50%; border: none; outline: none; cursor: pointer; color: #252525; font-size: 1rem; background: linear-gradient(48deg, rgb(174, 181, 254) 0%, rgb(215, 214, 255) 93%); } /*==Trending=====================*/ #trending{ background-color: #f9f9ff; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 50px auto; padding: 50px 0px; } .trending-heading-container{ max-width: 1200px; width: 90%; display: flex; justify-content: space-between; align-items: center; } .trending-heading h2, .destination-heading h2{ font-size: 2.4rem; color: #141314; font-weight: 700; } .trending-heading p, .destination-heading p{ color: #696969; margin: 10px 0px; } .trending-box-container{ display: flex; justify-content: center; align-items: center; width: 90%; margin-top: 40px; max-width: 1200px; } .trending-box{ width: 100%; padding: 15px; margin-bottom: 60px; border-radius: 10px; background-color: #ffffff; border: 1px solid rgb(37, 37, 37,0.1); transition: all ease 0.3s; } .trending-box:hover{ box-shadow: 8px 20px 30px rgba(0,0,0,0.1); transition: all ease 0.3s; } .t-b-img{ width: 100%; height: 190px; object-fit: cover; object-position: center; border-radius: 10px; overflow: hidden; } .t-b-img img{ width: 100%; height: 100%; object-position: center; object-fit: cover; } .t-b-text{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin: 20px 0px; } .t-b-text a{ color: #1b1b1b; font-weight: 600; font-size: 1.2rem; } .t-b-text span{ color: #696969; font-size: 0.8rem; letter-spacing: 1px; } .price-book{ display: flex; justify-content: space-between; align-items: center; width: 100%; } .t-price{ font-size: 1.5rem; color: #363636; font-weight: 700; letter-spacing: 1px; } .t-book-btn{ width: 120px; height: 40px; display: flex; justify-content: center; align-items: center; border:1px solid #3647df; color: #3647df; border-radius: 8px; font-size: 0.9rem; font-weight: 500; letter-spacing: 1px; transition: all ease 0.3s; } .t-book-btn:hover{ color: #ffffff; background-color: #3647df; transition: all ease 0.3s; } .agency-name{ background-color: #f1efff; display: flex; justify-content: flex-start; align-items: center; padding: 10px 20px; border-radius: 10px; width: 100%; margin-top: 15px ; } .agency-name img{ width: 25px; height: 25px; border-radius: 50%; margin-right: 10px; object-fit: cover; object-position: center; } .agency-name span{ color: #474747; font-size: 0.8rem; font-weight: 500; letter-spacing: 1px; } /*==destination-=================*/ #destination{ width: 90%; max-width: 1200px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 100px auto 70px auto; } .destination-heading{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; } .destination-grid{ width: 100%; display: grid; grid-template-columns: 1fr 1.3fr 0.7fr 1fr; grid-template-rows: 1fr 1fr; height: 550px; grid-gap: 30px; margin: 40px 0px; } .destination-box{ width:100%; height: 100%; border-radius: 20px; overflow: hidden; position: relative; } .destination-box img{ width: 100%; height: 100%; object-position: center; object-fit: cover; } .d-b-text-container{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 20px; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0, 0, 0, 0.6) 100%); } .d-b-text-container .ration{ background-color: #ffffff; color: #1b1b1b; border-radius: 10px; width: 50px; height: 25px; font-size: 0.8rem; font-weight: 500; display: flex; justify-content: center; align-items: center; box-shadow: 2px 2px 30px rgba(0,0,0,0.1); } .d-b-text{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .d-b-text strong{ color: #ffffff; font-size: 1.6rem; font-weight: 700; letter-spacing: 1px; } .d-b-text span{ color: #ffffff; font-size: 0.9rem; letter-spacing: 1px; } .d-b-2{ grid-column-start: 2; grid-column-end: 3; grid-row: 1; grid-row-end: 3; } .d-b-3{ grid-column-start: 3; grid-column-end: 5; } /*==subscribe======================*/ #subscribe{ min-height: 300px; max-width: 1200px; width:90%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #faf9ff; border: 1px solid rgba(0,0,0,0.06); border-radius: 20px; margin: 50px auto; padding: 30px; background-image: url(../images/s-bg.png); background-size: cover; background-repeat: no-repeat; background-position: top center; } #subscribe strong{ font-size: 2.5rem; color: #1b1b1b; letter-spacing: 1px; font-weight: 700; text-align: center; } #subscribe p{ color: #333333; font-size: 0.9rem; letter-spacing: 1px; } #subscribe form{ max-width: 450px; width: 100%; height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 10px; border-radius: 10px; background-color: #ffffff; margin-top: 30px; box-shadow: 2px 2px 30px rgba(0,0,0,0.1); } #subscribe form input{ border: none; outline: none; width: 100%; height: 40px; padding: 0px 20px; } #subscribe form button{ width: 50px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 10px; background-color: #fa479a; color: #ffffff; border: none; outline: none; box-shadow: 2px 2px 30px rgba(0,0,0,0.15); cursor: pointer; } /*==testimonials==================*/ #testimonials{ display: flex; justify-content: space-between; align-items: center; margin: 0px auto; max-width: 1200px; width: 90%; } .testmonials-img{ max-width: 500px; width: 100%; } .testmonials-img img{ width: 100%; height: 100%; object-position: center; object-fit: contain; } .testmonials-slider{ max-width: 550px; width: 100%; } .testimonials-box{ background-color: #ffffff; padding: 30px; border: 1px solid rgba(0,0,0,0.06); display: flex; justify-content: space-between; align-items: center; width: 100%; box-shadow: 2px 2px 30px rgba(0,0,0,0.06); } .testimonials-box-img{ width: 100px; height: 100px; border-radius: 50%; overflow: hidden; display: flex; background-color: #fa479a; margin-left: 20px; } .testimonials-box-img img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } .testimonials-box-text{ width: 80%; } .testimonials-box-text i{ color: #3647df; font-size: 1.3rem; } .testimonials-box-text p{ color: #696969; font-size: 0.9rem; letter-spacing: 1px; margin: 5px 0px 15px 0px; } .testimonials-box-text strong{ color: #363636; font-weight: 700; letter-spacing: 1px; } /*==footer======================*/ footer{ display: flex; justify-content: center; align-items: center; margin-top: 100px; padding: 50px 30px; flex-direction: column; background-color: #f9f9ff; } .footer-container{ max-width: 1200px; width: 100%; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 2fr; grid-gap: 50px; } .footer-box strong{ color: #363636; font-size: 1.6rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 15px; } .footer-box p{ color: #696969; font-size: 0.9rem; letter-spacing: 1px; margin-bottom: 15px; } .footer-social{ display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; } .footer-social a{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; margin-right: 5px; border-radius:5px; border: 1px solid rgba(0,0,0,0.1); color: #3647df; transition: all ease 0.3s; } .footer-social a:hover{ background-color: #3647df; color: #ffffff; transition: all ease 0.3s; } .footer-social a:hover i{ color: #ffffff; } .footer-box span{ color: #696969; margin: 6px 0px; font-size: 0.9rem; } .footer-box span a{ color: #696969; } .footer-box span i{ margin-right: 6px; color: #3647df; } .footer-box{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .footer-box ul{ margin-bottom: 15px; } .footer-box ul li a{ color: #696969; margin: 5px 0px; font-size: 0.9rem; letter-spacing: 1px; display: flex; justify-content: flex-start; } .footer-box a:hover{ color: #1b1b1b; transition: all ease 0.3s; } .copyright{ padding: 15px; color: #3b3b3b; font-weight: 400; letter-spacing: 1px; background-color: #ececec; width: 100%; font-size: 0.8rem; display: flex; justify-content: center; align-items: center; } /*==making-responsive=================*/ .menu-icon, .menu-btn{ display: none; } @media(max-width:1100px){ .content{ flex-direction: column-reverse; } .main-text{ width: 100%; margin-top: 50px; } } @media(max-width:1000px){ .navigation{ justify-content: space-between; padding: 20px; position: relative; width: 100%; z-index: 103; } .logo img{ max-height: 30px;} .navigation .menu{ display: none; position: absolute; left: 0px; top:calc(100% - 1px); background-color: #ffffff; width: 100%; padding: 0px; margin: 0px; z-index: 104; box-shadow: 2px 30px 30px rgba(0,0,0,0.06); } .navigation .menu li{ width:100%; margin: 0px; padding: 0px; } .navigation .menu li a{ width: 100%; display: flex; align-items: center; margin: 0px; padding: 20px; border-bottom: 1px solid #e2e2e26e; } .menu li a::after{ display: none; } .menu-icon{ display: block; } .navigation .menu-icon{ cursor: pointer; float: right; padding: 10px 0px; position: relative; user-select: none; z-index: 106; } .navigation .menu-icon .nav-icon{ background-color: #181818; display: block; position: relative; height: 2px; transition: background 0.2s ease-out; width: 25px; } .navigation .menu-icon .nav-icon::before, .navigation .menu-icon .nav-icon::after{ background-color: #181818; content: ''; position: absolute; height: 100%; transition: all ease-out 0.2s; width: 100%; } .navigation .menu-icon .nav-icon::before{ top: 9px; } .navigation .menu-icon .nav-icon::after{ top: -9px; } .navigation .menu-icon:checked ~ .menu-icon .nav-icon, .navigation .menu-btn:checked ~ .menu-icon .nav-icon{ background-color: transparent; } .navigation .menu-btn:checked ~ .menu-icon .nav-icon::before{ transform: rotate(-45deg); top: 0px; } .navigation .menu-btn:checked ~ .menu-icon .nav-icon::after{ transform: rotate(45deg); top: 0px; } .navigation .menu-btn:checked ~ .menu{ display: block; } .destination-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; height: auto; grid-gap: 10px; } .d-b-3{ grid-column-start: 1; grid-column-end:3; } .destination-box{ height: 100%; max-height: 300px; } .d-b-2{ grid-row: 1/2; } #testimonials{ flex-direction: column; } .footer-container{ grid-template-columns: 1fr 1fr; grid-gap: 20px; } } @media(max-width:780px){ .search-tour form{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .t-search-btn button{ width: 100%; max-width: 100%; border-radius: 10px; } .search-tour{ border-radius: 10px; } .main-text h1, .trending-heading h2, .destination-heading h2, #subscribe strong{ font-size: 1.8rem; line-height: 2rem; } .d-b-text strong{ font-size: 1rem; } } @media(max-width:600px){ .main-img{ width: 300px; height: 300px; } } @media(max-width:550px){ .logo{ font-size: 1.4rem; } .search-tour form{ grid-template-columns: 1fr; } .testimonials-box{ flex-direction: column; text-align: center; } .testimonials-box-img{ margin-left: 0px; margin-top: 10px; } } @media(max-width:370px){ .footer-container{ grid-template-columns: 1fr; } .main-img{ width: 250px; height: 250px; } .book-now-btn{ display: none; } .search-tour form{ padding: 5px; } } .mySwipertest .swiper-slide{ padding: 20px; } .mySwipertest .swiper-pagination{ position: static !important; }
