Free
About
TrailBound About
A about block extracted from the TrailBound template, available in Tailwind CSS and Bootstrap.
0
2
trailbound.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TrailBound About | Tailwind CSS UI Block</title>
<meta name="description" content="A about block extracted from the TrailBound template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="TrailBound, Tailwind CSS template, HTML website template, hiking app landing page, offline trail maps, GPS route planner, responsive outdoor design">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="TrailBound | Tailwind CSS Hiking App Template">
<meta property="og:description" content="An adventurous Tailwind CSS hiking app template for outdoor explorers, offline trail maps, route planning, and GPS tracking products.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="TrailBound template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="TrailBound | Tailwind CSS Hiking App Template">
<meta name="twitter:description" content="An adventurous Tailwind CSS hiking app template for outdoor explorers, offline trail maps, route planning, and GPS tracking products.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="TrailBound template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
</style>
</head>
<body class="bg-white text-[#111111]">
<!-- block:start about -->
<section id="confidence" class="py-24 px-6 overflow-hidden bg-white">
<div class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-16 relative">
<!-- Decorative Orange Line (Simplified with SVG) -->
<svg class="absolute top-1/2 left-0 w-full h-full -z-10 opacity-20 pointer-events-none" viewBox="0 0 1000 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 200C150 200 250 50 400 50C550 50 650 350 800 350C950 350 1050 200 1200 200" stroke="#FF7A28" stroke-width="4" stroke-dasharray="12 12"/>
</svg>
<div class="w-full lg:w-1/2 relative">
<!-- Phone Mockup -->
<div class="relative mx-auto lg:ml-0 w-[280px] h-[580px] bg-[#1a1a1a] rounded-[45px] border-[8px] border-gray-900 shadow-2xl overflow-hidden z-20">
<div class="p-5 flex flex-col h-full bg-[#111111]">
<div class="text-white text-xs font-bold mb-4 opacity-50">9:41</div>
<div class="text-white text-xl font-bold mb-6">Good afternoon</div>
<div class="w-full h-10 bg-gray-800 rounded-full mb-6 flex items-center px-4">
<i class="fa-solid fa-magnifying-glass text-gray-500 text-xs"></i>
</div>
<div class="text-white text-sm font-bold mb-4">Popular</div>
<div class="flex gap-3 mb-8 overflow-hidden">
<div class="w-12 h-12 rounded-full bg-gray-800 flex-shrink-0"></div>
<div class="w-12 h-12 rounded-full bg-gray-800 flex-shrink-0"></div>
<div class="w-12 h-12 rounded-full bg-gray-800 flex-shrink-0"></div>
<div class="w-12 h-12 rounded-full bg-gray-800 flex-shrink-0"></div>
</div>
<div class="text-white text-sm font-bold mb-4">Top trails nearby</div>
<div class="flex-1 bg-gray-800 rounded-2xl p-3 flex flex-col gap-2">
<div class="w-full h-32 bg-gray-700 rounded-xl"></div>
<div class="w-2/3 h-4 bg-gray-700 rounded-full"></div>
</div>
</div>
</div>
<!-- Floating Cards -->
<div class="absolute -top-10 -left-12 w-44 bg-white/90 backdrop-blur shadow-xl rounded-3xl p-3 z-30 transform -rotate-6 hidden md:block">
<img class="w-full h-28 object-cover rounded-2xl mb-3" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_7a74e02c49_8c105ddf5f05d50a.png" alt="scenic view of Huangshan mountains in China, misty peaks, traditional ink painting style landscape" />
<div class="flex justify-between items-center px-1">
<span class="text-[10px] font-bold">Huangshan, China</span>
<div class="flex items-center gap-1">
<i class="fa-solid fa-star text-orange-400 text-[8px]"></i>
<span class="text-[8px] font-medium">4.9</span>
</div>
</div>
</div>
<div class="absolute top-24 -right-16 w-44 bg-white/90 backdrop-blur shadow-xl rounded-3xl p-3 z-30 transform rotate-6 hidden md:block">
<img class="w-full h-28 object-cover rounded-2xl mb-3" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_3af753c24e_04aa59da42fb4804.png" alt="remote base camp in Nepal Himalayas, tents under snowy peaks, high altitude mountaineering" />
<div class="flex justify-between items-center px-1">
<span class="text-[10px] font-bold">Camp, Nepal</span>
<div class="flex items-center gap-1">
<i class="fa-solid fa-star text-orange-400 text-[8px]"></i>
<span class="text-[8px] font-medium">4.6</span>
</div>
</div>
</div>
<div class="absolute bottom-12 -left-16 w-48 bg-white/90 backdrop-blur shadow-xl rounded-3xl p-3 z-30 transform -rotate-3 hidden md:block">
<img class="w-full h-32 object-cover rounded-2xl mb-3" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_5b778f5bac_f0736fd74cbe4692.png" alt="Overland Track Tasmania landscape, rugged wilderness, cradle mountain view" />
<div class="flex justify-between items-center px-1">
<span class="text-[10px] font-bold">Overland Track</span>
<div class="flex items-center gap-1">
<i class="fa-solid fa-star text-orange-400 text-[8px]"></i>
<span class="text-[8px] font-medium">4.7</span>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2">
<h2 class="text-6xl md:text-8xl font-black leading-[0.9] tracking-tighter uppercase mb-8">
TRAVEL WITH<br>CONFIDENCE
</h2>
<p class="text-xl text-gray-600 mb-10 max-w-lg leading-relaxed">
Discover amazing outdoor experiences, trusted route suggestions and the best maps around the world, recommended by thousands of mountain guides, trail rangers and other industry professionals.
</p>
<button class="bg-[#FF7A28] text-white px-10 py-5 rounded-full text-lg font-bold hover:bg-orange-600 transition-all shadow-xl shadow-orange-100">
Download the App
</button>
</div>
</div>
</section>
<!-- block:end about -->
</body>
</html>
From this template
Free
Travel
TrailBound
Unlimited access to all products
Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access