davidtheweb-dev
diff --git a/‎email-subscribe/index.html‎
Lines changed: 53 additions & 0 deletions b/‎email-subscribe/index.html‎
Lines changed: 53 additions & 0 deletions
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <script src="https://cdn.tailwindcss.com"></script>
+ <title>Email Subscribe</title>
+ </head>
+ <body>
+ <!-- Background Container -->
+ <div class="flex items-center justify-center h-screen bg-zinc-700">
+ <!-- Card -->
+ <div class="bg-zinc-800 p-2 mx-6 rounded-2xl">
+ <!-- Flex Container -->
+ <div class="flex flex-col md:flex-row rounded-l-xl">
+ <!-- Image -->
+ <img
+ src="images/image.jpg"
+ alt=""
+ class="object-cover rounded-xl h-80 md:h-64 md:rounded-r-none transform hover:scale-105 hover:rounded-xl duration-200"
+ />
+ <!-- Content -->
+ <div class="p-6 md:p-12">
+ <h2 class="font-serif text-xl font-medium text-center text-white md:text-left">
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+ </h2>
+
+ <p
+ class="max-w-xs my-4 text-xs leading-5 tracking-wide text-center text-white md:text-left"
+ >
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto voluptate vel
+ minima nemo eaque alias?
+ </p>
+
+ <div class="flex flex-col mt-5 space-y-4 md:space-x-3 md:flex-row md:space-y-0">
+ <input
+ type="text"
+ placeholder="Enter your email address"
+ class="p-2 px-4 text-center text-white bg-zinc-800 border border-zinc-600 placeholder:text-xs placeholder:text-center md:text-left placeholder:md:text-left focus:outline-none"
+ />
+
+ <button
+ class="px-5 py-3 text-xs rounded-md text-zinc-800 bg-lime-500 hover:bg-lime-700 hover:text-white duration-500"
+ >
+ Subscribe
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>