accessibility-plugin
Version:
You can use this plugin to make a accessibility friendly website fast and easily
86 lines (67 loc) • 4.66 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="output.css">
</head>
<body>
<div class="w-full h-auto">
<div class="w-full min-h-screen grid grid-cols-12 relative items-center">
<div class="col-span-10 md:col-span-8 lg:col-span-6 md:col-start-3 lg:col-start-4 col-start-2 rounded z-10">
<div class="w-full h-auto bg-white bg-opacity-75 p-2 rounded-2xl backdrop-blur-sm backdrop-saturate-150 drop-shadow-2xl drop shadow-2xl">
<!--User registration form-->
<div class="w-full h-auto grid grid-cols-1 md:grid-cols-2 p-5 ">
<form class="col-span-1 grid grid-cols-1 gap-4" action="register.php" method="post">
<div class="w-full h-auto">
<label for="username" class="text-sm font-bold text-blue-800">Username</label>
<input type="text" name="username" id="username"
class="w-full h-10 border border-gray-300 rounded-lg border-none p-2 placeholder:text-sm placeholder:ps-3"
placeholder="Enter your username here">
</div>
<div class="w-full h-auto">
<label for="email" class="text-sm font-bold text-blue-800">Email</label>
<input type="email" name="email" id="email"
class="w-full h-10 border border-gray-300 rounded-lg border-none p-2 placeholder:text-sm placeholder:ps-3"
placeholder="Enter your email here">
</div>
<div class="w-full h-auto">
<label for="password" class="text-sm font-bold text-blue-800">Password</label>
<input type="password" name="password" id="password"
class="w-full h-10 border border-gray-300 rounded-lg border-none p-2 placeholder:text-sm placeholder:ps-3"
placeholder="Enter your password here">
</div>
<div class="w-full h-auto">
<label for="password2" class="text-sm font-bold text-blue-800">Confirm Password</label>
<input type="password" name="password2" id="password2"
class="w-full h-10 border border-gray-300 rounded-lg border-none p-2 placeholder:text-sm placeholder:ps-3"
placeholder="Re-type your password here">
</div>
<!--User agreement-->
<div class="w-full h-auto flex">
<input type="checkbox" name="agreement" id="agreement" class="h-5 w-5 rounded border-none">
<label for="agreement" class="text-sm ms-3">I agree to the <a href="#" class="text-blue-800 underline underline-offset-5">terms and conditions.</a></label>
</div>
<div class="w-full h-auto">
<button type="submit" class="w-full h-10 bg-blue-500 text-white rounded-lg border-none">Register</button>
</div>
</form>
<div class="col-span-1 flex-wrap flex-col ms-10 py-5">
<video src="video.mp4"
class="w-full object-cover rounded-2xl aspect-video" muted autoplay loop></video>
<p class="py-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci beatae eius iste laudantium nihil voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, itaque soluta? Amet assumenda at beatae blanditiis commodi cum, debitis deserunt, earum facilis fuga hic incidunt ipsam iste iure modi nobis numquam perferendis perspiciatis placeat quae reiciendis totam voluptates.
</p>
</div>
</div>
</div>
</div>
<img src="1128040_OQ3D060.jpg" class="w-full h-full object-cover absolute top-0 left-0" alt="">
</div>
</div>
<script src="accessibility-menu.js"></script>
</body>
</html>