<html lang="en">
<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">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body class="min-h-screen bg-slate-50 dark:bg-black dark:text-white">
<header class="bg-orange-500 text-white sticky top-0 z-10">
<section class="max-w-4xl mx-auto p-4 flex justify-between items-center">
<h1 class="text-3xl font-medium">
<a href="#logo">ORGANIC FOODS</a>
</h1>
<div>
<button id="mobile-open-button" class="text-3xl sm:hidden focus:outline-none">
☰
</button>
<nav class="hidden sm:block space-x-8 text-xl" aria-label="main">
<a href="#shop" class="hover:opacity-90">Shop</a>
<a href="#orders" class="hover:opacity-90">Orders</a>
<a href="#contact" class="hover:opacity-90">Contact</a>
</nav>
</div>
</section>
</header>
<main class="max-w-4xl mx-auto">
<section id="hero" class="flex flex-col-reverse justify-center sm:flex-row p-6 items-center gap-8 mb-12">
<article class="sm:w-1/2">
<h2 class="max-w-md text-2xl font-bold text-center sm:text-5xl sm:text-left text-amber-800 dark:text-white ">
Food Taste<span class="text-indigo-700 dark:text-indigo-300">The tasty food of choice</span>goodand tasty food...
</h2>
<p class="max-w-md text-2xl mt-7 text-center sm:text-left text-slate-700 dark:text-slate-400">Once found only in health food stores organic is now feature at most grocery stores. </p>
<p class="max-w-md text-2xl mt-7 text-center sm:text-left text-slate-700 dark:text-slate-400">The word "organic" means the way farmers grow and process farming (agricultural) products. These products include fruits, vegetables, grains, dairy products such as milk and cheese</p>
</article>
<img class="w-1/2" src="./img/undraw_breakfast_psiw (1).png" alt="tasty food">
</section>
</main>
</body>
</html>
iThome鐵人賽
看影片追技術