Files
tailShape/public/componets/hero/7_hero.html

47 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero 6</title>
<link rel="stylesheet" href="./../../../dist/tailshape.css">
</head>
<body>
<!-- hero 7 start -->
<section class="section_divider">
<div>Hero 7</div>
</section>
<div class="flex items-center justify-center min-h-screen bg-white dark:bg-gray-800 min-w-screen">
<div class="flex flex-col flex-col-reverse items-center justify-center mx-auto lg:flex-row lg:max-w-4xl lg:p-0">
<div class="container flex flex-col w-full px-5 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
<h1 class="font-sans text-4xl font-extrabold leading-none text-black sm:text-5xl xl:text-6xl sm:text-center lg:text-left">
<span class="text-gray-800 dark:text-blue-400">Stay focused</span>
<span class="block text-blue-400 dark:text-gray-200">and know yourself.</span>
</h1>
<p class="mt-6 text-base text-gray-600 xl:text-lg s">Your guide to mental health and happiness. How about
try to meditate? Start to meditate just 5 min per day and see the results.</p>
<div class="items-center justify-center m-10 rflex">
<a href="#_" class="flex items-center self-start justify-center px-5 py-3 text-base font-medium leading-tight text-white bg-blue-800 border border-transparent rounded-lg shadow md:py-4 md:text-lg xl:text-xl md:px-10">
Come with us
</a>
</div>
</div>
<div class="px-5 md:w-2/3 lg:w-1/2">
<img src="https://images.unsplash.com/photo-1559941727-6fb446e7e8ae?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=3936&h=2624&fit=crop&ixid=eyJhcHBfaWQiOjF9"
alt="Illustration of person meditating" class="object-cover w-full h-50 rounded-md shadow-lg shadow-gray-800 hover:translate-y-2 transition duration-500">
</div>
</div>
</div>
<!-- hero 7 end -->
</body>
</html>