File: /var/www/dk/wp-content/themes/food/demo_html/zone.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
</head>
<body>
<main class=" w-100 py-[0.2rem] md:w-[768px] md:mx-auto xl:w-[1280px]">
<section class="text-gray-600 body-font relative">
<div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
<div class="lg:w-2/3 md:w-1/2 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
<div class="rounded-sm overflow-hidden absolute inset-0">
<video controls>
<source src="https://ossvideo.tangcn.com.cn/res/ggc/wp-content/uploads/2022/11/%E7%AC%AC%E4%B8%89%E8%AF%BE%E2%80%94%E2%80%94%E7%BB%93%E8%B4%A6.mp4"
type="video/mp4">
您的浏览器不支持Video标签。
</video>
</div>
<div class="bg-white relative flex flex-wrap py-6 pt-4 rounded shadow-md">
<div class="lg:w-1/4 px-6">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Shooting Stars</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art </p>
</div>
</div>
<div class="lg:w-1/4 px-6">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Shooting Stars</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art </p>
</div>
</div>
<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2>
<a class="text-indigo-500 leading-relaxed">example@email.com</a>
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2>
<p class="leading-relaxed">123-456-7890</p>
</div>
</div>
</div>
<div class="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
<h2 class="text-gray-900 text-lg mb-1 font-medium title-font">Feedback</h2>
<p class="leading-relaxed mb-5 text-gray-600">Post-ironic portland shabby chic echo park, banjo fashion
axe</p>
<div class="flex flex-wrap -m-4">
<div class=" md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Shooting Stars</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co,
subway tile poke farm.</p>
</div>
</div>
<div class=" md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<circle cx="6" cy="6" r="3"></circle>
<circle cx="6" cy="18" r="3"></circle>
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">The Catalyzer</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co,
subway tile poke farm.</p>
</div>
</div>
<div class=" md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Neptune</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co,
subway tile poke farm.</p>
</div>
</div>
<div class=" md:w-1/2 p-4">
<div class="border border-gray-200 p-6 rounded-lg">
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7"></path>
</svg>
</div>
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Melanchole</h2>
<p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waist co,
subway tile poke farm.</p>
</div>
</div>
</div>
<button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
Button
</button>
<p class="text-xs text-gray-500 mt-3">Chicharrones blog helvetica normcore iceland tousled brook viral
artisan.</p>
</div>
</div>
</section>
</main>
</body>