Skip to content

Commit d09bee9

Browse files
rudra016rudra016
authored
Merge pull request #326 from MrBlackGhostt/signup-page-design
Add Signup page design #236
2 parents a7d1492 + 92683ac commit d09bee9

File tree

3 files changed

+246
-0
lines changed

3 files changed

+246
-0
lines changed

‎package-lock.json

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎signup Page/index.html

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
8+
<title>Signup Page</title>
9+
</head>
10+
<body>
11+
<form action="">
12+
<div class="container">
13+
<div class="column">
14+
<h2 class="info">General Information</h2>
15+
<input type="text" placeholder="Title" />
16+
17+
<div class="inline-container">
18+
<input
19+
type="text"
20+
id="Name"
21+
name="firstName"
22+
required
23+
placeholder="First Name"
24+
style="margin-right: 10px"
25+
/>
26+
27+
<input
28+
type="text"
29+
id="Name"
30+
name="lastName"
31+
required
32+
placeholder="Last Name"
33+
/>
34+
</div>
35+
36+
<input
37+
type="text"
38+
id="Position"
39+
name="position"
40+
placeholder="Position"
41+
/>
42+
<input
43+
type="text"
44+
id="company"
45+
name="company"
46+
placeholder="Company"
47+
/>
48+
49+
<div class="inline-container">
50+
<input
51+
type="text"
52+
id="Business Arena"
53+
name="business arena"
54+
style="margin-right: 10px"
55+
placeholder="Business Arena"
56+
/>
57+
<input
58+
type="text"
59+
id="Employees"
60+
name="Employees"
61+
placeholder="Employees"
62+
/>
63+
</div>
64+
</div>
65+
66+
<div class="column">
67+
<h2 class="details">Contact Details</h2>
68+
<input type="text" id="street" placeholder="Street + Nr" />
69+
<input
70+
type="text"
71+
id="additional-information"
72+
placeholder="Additional Information"
73+
/>
74+
<div class="inline-container">
75+
<input type="text" id="zip-code" placeholder="Zip Code" />
76+
<input type="text" id="place" placeholder="Place" />
77+
</div>
78+
79+
<input type="text" id="Country" placeholder="Country" />
80+
81+
<div class="inline-container">
82+
<input type="text" id="code" placeholder="Code+" />
83+
<input
84+
type="tel"
85+
id="phone"
86+
name="phone"
87+
placeholder="Phone Number"
88+
required
89+
/>
90+
</div>
91+
92+
<input type="email" id="email" placeholder="Your Email" />
93+
94+
<div class="checkbox">
95+
<input type="checkbox" name="checkbox" id="checkbox" />
96+
<p>
97+
I do accept the <a href="">Terms and Conditions </a> of your site
98+
</p>
99+
</div>
100+
101+
<button type="submit">Sign Up</button>
102+
</div>
103+
</div>
104+
</form>
105+
</body>
106+
</html>

‎signup Page/style.css

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
body {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
font-family: serif;
6+
margin: 0;
7+
padding: 0;
8+
background-color: rgba(140, 171, 225, 255);
9+
}
10+
11+
form {
12+
margin: 1rem;
13+
}
14+
15+
.info {
16+
font-weight: 100;
17+
color: #c9e5fa;
18+
}
19+
20+
.details {
21+
font-weight: 100;
22+
color: white;
23+
}
24+
.container {
25+
display: flex;
26+
max-width: 800px;
27+
margin: 50px auto;
28+
overflow: hidden;
29+
background-color: #fff;
30+
border-radius: 20px;
31+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
32+
}
33+
34+
.column {
35+
padding: 1rem;
36+
width: 50%;
37+
float: left;
38+
margin-right: 2%;
39+
padding: 2.6rem 1rem 2rem 3rem;
40+
}
41+
42+
.column:last-child {
43+
width: auto;
44+
padding: 2.6rem 3rem 2rem 3rem;
45+
margin-right: 0;
46+
background-color: #4835d4;
47+
}
48+
49+
label {
50+
display: block;
51+
margin-bottom: 8px;
52+
}
53+
54+
input {
55+
width: 100%;
56+
padding: 10px;
57+
margin-bottom: 15px;
58+
border: none;
59+
border-bottom: 1px solid #ccc;
60+
box-sizing: border-box;
61+
}
62+
63+
.column:last-child input {
64+
color: #d3c7e8;
65+
background-color: #4835d4;
66+
}
67+
.column:last-child input::placeholder {
68+
color: #d3c7e8; /* Set the placeholder text color to white */
69+
background-color: #4835d4;
70+
}
71+
72+
.inline-container {
73+
display: flex;
74+
}
75+
76+
.inline-container input {
77+
flex: 1;
78+
}
79+
80+
.inline-container input#zip-code {
81+
flex: 1;
82+
width: 40%;
83+
margin-right: 20px;
84+
}
85+
86+
.inline-container input#place {
87+
flex: 2;
88+
width: 60%;
89+
}
90+
91+
.inline-container input#code {
92+
flex: 1;
93+
width: 30%;
94+
}
95+
96+
.inline-container input#phone {
97+
flex: 2;
98+
}
99+
100+
button {
101+
display: block;
102+
background-color: white;
103+
color: black;
104+
padding: 10px 40px;
105+
border: none;
106+
border-radius: 15px;
107+
cursor: pointer;
108+
float: left;
109+
margin: 1rem 1rem 1rem 0;
110+
}
111+
112+
button:hover {
113+
background-color: whitesmoke;
114+
}
115+
116+
.checkbox {
117+
margin-top: 1rem;
118+
font-size: 13px;
119+
}
120+
121+
.checkbox p {
122+
display: inline;
123+
color: rgb(244, 229, 229);
124+
}
125+
a {
126+
color: rgb(244, 229, 229);
127+
}
128+
129+
input#checkbox {
130+
color: #4835d4;
131+
width: fit-content;
132+
align-items: center;
133+
margin-right: 0.8rem;
134+
}

0 commit comments

Comments
 (0)