-
Notifications
You must be signed in to change notification settings - Fork 0
/
signup.html
131 lines (111 loc) · 4.27 KB
/
signup.html
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up - Zig Programming Tutorials Blog</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
/* Add your custom styles here */
/* You can also copy the styles from index.html and modify them if needed */
body {
background-color: #f7f7f7;
font-family: 'Arial', sans-serif;
}
.text-dark {
color: #333;
}
.header-text {
color: #1a202c;
}
.nav-link {
color: #1a202c;
}
.search-bar::placeholder,
.search-bar {
color: #4a5568;
}
.search-button {
background-color: #f7a41d;
color: #fff;
}
.sidebar {
background-color: transparent;
}
.sidebar-heading {
color: #4a5568;
}
.sidebar-category {
color: #1e40af;
}
.sidebar-category:hover {
color: #1a202c;
}
/* Additional styles for the sign-up form */
/* Update form input styles */
input[type="text"],
input[type="email"],
input[type="password"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
/* Style for the sign-up button */
button[type="submit"] {
background-color: #f7a41d;
color: #fff;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #ffd700; /* Change color on hover */
}
</style>
</head>
<body class="font-sans antialiased flex flex-col min-h-screen">
<nav class="bg-f7a41d text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="text-2xl font-bold header-text">Zig Tutorials</div>
<ul class="flex space-x-4">
<li><a href="profile.html" class="nav-link hover:text-gray-300">Home</a></li>
<li><a href="#" class="nav-link hover:text-gray-300">Tutorials</a></li>
<li><a href="#" class="nav-link hover:text-gray-300">About</a></li>
</ul>
</div>
</nav>
<!-- Main Content for Sign Up -->
<div class="container mx-auto py-8 flex justify-center">
<div class="w-full md:w-1/2 lg:w-1/3 bg-white p-4 rounded shadow-md">
<h1 class="text-3xl font-bold mb-4 header-text">Sign Up</h1>
<form action="#" method="POST">
<div class="mb-4">
<label for="username" class="block text-sm font-medium text-dark">Username</label>
<input type="text" id="username" name="username" class="mt-1 rounded-md focus:outline-none focus:ring focus:border-f7a41d">
</div>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-dark">Email</label>
<input type="email" id="email" name="email" class="mt-1 rounded-md focus:outline-none focus:ring focus:border-f7a41d">
</div>
<div class="mb-4">
<label for="password" class="block text-sm font-medium text-dark">Password</label>
<input type="password" id="password" name="password" class="mt-1 rounded-md focus:outline-none focus:ring focus:border-f7a41d">
</div>
<button type="submit" class="rounded-md bg-f7a41d text-white hover:bg-yellow-500 transition duration-300">Sign Up</button>
<p class="mt-2">Already have an account? <a href="login.html" class="text-f7a41d">Login here</a></p>
</form>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white text-center py-4 mt-auto">
<p>© 2024 Zig Tutorials Blog. All rights reserved.</p>
</footer>
</body>
</html>