-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 550827f
Showing
3 changed files
with
205 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
# freeCodeCamp_responsiveWebDesign_registrationForm | ||
|
||
## Live Demo | ||
|
||
[Registration Form](https://dracula27.github.io/freeCodeCamp_responsiveWebDesign_registrationForm/) | ||
|
||
## Project Information | ||
|
||
The first of four(4) learning projects before the first certification project in freeCodeCamp's [Responsive Web Design course](https://www.freecodecamp.org/learn/2022/responsive-web-design/). | ||
|
||
The course/project description from their website is as follows: | ||
|
||
> You can use HTML forms to collect information from people who visit your webpage. In this course, you'll learn HTML forms by building a signup page. You'll learn how to control what types of data people can type into your form, and some new CSS tools for styling your page. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<title>Registration Form</title> | ||
<link rel="stylesheet" href="styles.css" /> | ||
</head> | ||
<body> | ||
<h1>Registration Form</h1> | ||
<p>Please fill out this form with the required information</p> | ||
<form | ||
method="post" | ||
action="https://register-demo.freecodecamp.org" | ||
> | ||
<fieldset> | ||
<label for="first-name" | ||
>Enter Your First Name: | ||
<input | ||
id="first-name" | ||
name="first-name" | ||
type="text" | ||
required | ||
/></label> | ||
<label for="last-name" | ||
>Enter Your Last Name: | ||
<input id="last-name" name="last-name" type="text" required | ||
/></label> | ||
<label for="email" | ||
>Enter Your Email: | ||
<input id="email" name="email" type="email" required | ||
/></label> | ||
<label for="new-password" | ||
>Create a New Password: | ||
<input | ||
id="new-password" | ||
name="new-password" | ||
type="password" | ||
pattern="[a-z0-5]{8,}" | ||
required | ||
/></label> | ||
</fieldset> | ||
<fieldset> | ||
<legend>Account type (required)</legend> | ||
<label for="personal-account" | ||
><input | ||
id="personal-account" | ||
type="radio" | ||
name="account-type" | ||
class="inline" | ||
checked | ||
/> | ||
Personal</label | ||
> | ||
<label for="business-account" | ||
><input | ||
id="business-account" | ||
type="radio" | ||
name="account-type" | ||
class="inline" | ||
/> | ||
Business</label | ||
> | ||
</fieldset> | ||
<fieldset> | ||
<label for="profile-picture" | ||
>Upload a profile picture: | ||
<input id="profile-picture" type="file" name="file" | ||
/></label> | ||
<label for="age" | ||
>Input your age (years): | ||
<input id="age" type="number" name="age" min="13" max="120" | ||
/></label> | ||
<label for="referrer" | ||
>How did you hear about us? | ||
<select id="referrer" name="referrer"> | ||
<option value="">(select one)</option> | ||
<option value="1">freeCodeCamp News</option> | ||
<option value="2">freeCodeCamp YouTube Channel</option> | ||
<option value="3">freeCodeCamp Forum</option> | ||
<option value="4">Other</option> | ||
</select> | ||
</label> | ||
<label for="bio" | ||
>Provide a bio: | ||
<textarea | ||
id="bio" | ||
name="bio" | ||
rows="3" | ||
cols="30" | ||
placeholder="I like coding on the beach..." | ||
></textarea> | ||
</label> | ||
</fieldset> | ||
<label for="terms-and-conditions"> | ||
<input | ||
class="inline" | ||
id="terms-and-conditions" | ||
type="checkbox" | ||
required | ||
name="terms-and-conditions" | ||
/> | ||
I accept the | ||
<a href="https://www.freecodecamp.org/news/terms-of-service/" | ||
>terms and conditions</a | ||
> | ||
</label> | ||
<input type="submit" value="Submit" /> | ||
</form> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
body { | ||
width: 100%; | ||
height: 100vh; | ||
margin: 0; | ||
background-color: #1b1b32; | ||
color: #f5f6f7; | ||
font-family: Tahoma; | ||
font-size: 16px; | ||
} | ||
|
||
h1, | ||
p { | ||
margin: 1em auto; | ||
text-align: center; | ||
} | ||
|
||
form { | ||
width: 60vw; | ||
max-width: 500px; | ||
min-width: 300px; | ||
margin: 0 auto; | ||
padding-bottom: 2em; | ||
} | ||
|
||
fieldset { | ||
border: none; | ||
padding: 2rem 0; | ||
border-bottom: 3px solid #3b3b4f; | ||
} | ||
|
||
fieldset:last-of-type { | ||
border-bottom: none; | ||
} | ||
|
||
label { | ||
display: block; | ||
margin: 0.5rem 0; | ||
} | ||
|
||
input, | ||
textarea, | ||
select { | ||
margin: 10px 0 0 0; | ||
width: 100%; | ||
min-height: 2em; | ||
} | ||
|
||
input, | ||
textarea { | ||
background-color: #0a0a23; | ||
border: 1px solid #0a0a23; | ||
color: #ffffff; | ||
} | ||
|
||
.inline { | ||
width: unset; | ||
margin: 0 0.5em 0 0; | ||
vertical-align: middle; | ||
} | ||
|
||
input[type='submit'] { | ||
display: block; | ||
width: 60%; | ||
margin: 1em auto; | ||
height: 2em; | ||
font-size: 1.1rem; | ||
background-color: #3b3b4f; | ||
border-color: white; | ||
min-width: 300px; | ||
} | ||
|
||
input[type='file'] { | ||
padding: 1px 2px; | ||
} | ||
|
||
.inline { | ||
display: inline; | ||
} | ||
|
||
a { | ||
color: #dfdfe2; | ||
} |