Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 44 | Author: devwajahat 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!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>
    <style>
        body {
            background-color: #f77fbe;
            background-image:
                /* Right side par jo white glass effect ka glow hai */
                radial-gradient(at 85% 55%, rgba(255, 255, 255, 0.4) 0px, transparent 50%),
                /* Bottom-Left ka yellow/peach glow */
                radial-gradient(at 0% 100%, #ffcc99 0px, transparent 50%),
                /* Bottom-Right ka cyan/blue glow */
                radial-gradient(at 100% 100%, #00cccc 0px, transparent 50%),
                /* Top-Left ka light pink glow */
                radial-gradient(at 0% 0%, #ff99dd 0px, transparent 50%),
                /* Top-Right ka purple glow */
                radial-gradient(at 100% 0%, #cc66ff 0px, transparent 50%),
                /* Base linear gradient background */
                linear-gradient(135deg, #ff99dd 0%, #cc66ff 100%);
            background-repeat: no-repeat;
            background-size: cover;
            min-height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body class="pb-10">

    <header class="w-full">
        <div class="w-full h-48 md:h-64 bg-gray-400 bg-cover bg-center"></div>
        <div class="max-w-3xl mx-auto px-4">
            <div class="-mt-12 md:-mt-16">
                <div class="w-24 h-24 md:w-32 md:h-32 bg-white rounded-full border-4 border-white/60 p-1 shadow-lg">
                    <div class="w-full h-full rounded-full bg-gray-300"></div>
                </div>
            </div>
        </div>
    </header>

    <main class="max-w-3xl mx-auto p-6 md:p-10 mt-4 
                 bg-white/30 backdrop-blur-md border border-white/40 
                 rounded-2xl shadow-xl">
        
        <h1 class="text-3xl font-bold text-gray-900 mb-4">Request a project</h1>
        <p class="text-gray-700 mb-6">To ensure high quality, my animation projects start from a budget of 2,000 €.</p>

        <form action="#" method="POST" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <input type="text" placeholder="Full Name" class="w-full p-3 bg-white/40 border border-white/60 rounded-xl placeholder-gray-600 focus:bg-white/80 outline-none transition">
                <input type="email" placeholder="Email" class="w-full p-3 bg-white/50 border border-white/60 rounded-xl placeholder-gray-600 focus:bg-white/80 outline-none transition">
                <input type="text" placeholder="Company name" class="w-full p-3 bg-white/50 border border-white/60 rounded-xl placeholder-gray-600 focus:bg-white/80 outline-none transition">
                <input type="text" placeholder="Website" class="w-full p-3 bg-white/50 border border-white/60 rounded-xl placeholder-gray-600 focus:bg-white/80 outline-none transition">
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <select class="w-full p-3 bg-white/50 border border-white/60 rounded-xl outline-none"><option>Storyboard ready</option></select>
                <select class="w-full p-3 bg-white/50 border border-white/60 rounded-xl outline-none"><option>Assets ready</option></select>
                <select class="w-full p-3 bg-white/50 border border-white/60 rounded-xl outline-none"><option>Script ready</option></select>
            </div>

            <input type="text" placeholder="Deadline" class="w-full p-3 bg-white/50 border border-white/60 rounded-xl placeholder-gray-600 outline-none">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <select class="w-full p-3 bg-white/50 border border-white/60 rounded-xl outline-none"><option>Project type</option></select>
                <select class="w-full p-3 bg-white/50 border border-white/60 rounded-xl outline-none"><option>Budget</option></select>
            </div>

            <textarea placeholder="Information about your project" rows="4" class="w-full p-3 bg-white/50 border border-white/60 rounded-xl placeholder-gray-600 outline-none"></textarea>

            <div class="flex items-center gap-2 text-gray-800">
                <input type="checkbox" id="privacy" class="w-4 h-4">
                <label for="privacy" class="text-sm">I agree to the processing of my data according to the Privacy Policy</label>
            </div>

            <button type="submit" class="w-full md:w-auto bg-purple-700 text-white px-8 py-3 rounded-xl font-medium hover:bg-purple-800 transition shadow-lg">
                Submit →
            </button>
        </form>
    </main>

</body>
</html>

Share this file: