<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<body>
<form
action=""
method="post"
id="theform"
onsubmit="myFormSubmit(this); return false;"
>
<table class="container">
<tr>
<td><span class="title">Your Info</span></td>
<td><div class="star star1"></div><div class="star star2"></div><div class="star"></div>
</td>
</tr>
<tr>
<th>Name</th>
<td>
<input type="text" required size="20" name="name" />
</td>
</tr>
<tr>
<th>Address</th>
<td>
<input type="text" required size="20" name="address" />
</td>
</tr>
<tr>
<th>APT / Unit #</th>
<td>
<input type="text" required size="20" name="address1" />
</td>
</tr>
<tr>
<th>City</th>
<td>
<input type="text" required size="20" name="city" />
</td>
</tr>
<tr>
<th>Zip</th>
<td>
<input type="text" required size="6" maxlength="5" name="zip" />
</td>
</tr>
<tr>
<th>State</th>
<td>
<select name="state" required>
<option>Maine</option>
<option selected>California</option>
<option>Oregon</option>
<option>Idaho</option>
<option>Utah</option>
<option>nevada</option>
<option>New Hampshire</option>
<option>Washington</option>
<option>Mississippi</option>
<option>New York</option>
<option>North Carolina</option>
</select>
</td>
</tr>
<tr>
<th>Phone</th>
<td>
<input
type="text"
name="phone"
required
placeholder="(***) ***-****"
/>
</td>
</tr>
<tr>
<th>Email</th>
<td><input type="email" name="email" required></td>
</tr>
<tr>
<th>Age</th>
<td><input type="number" min="18" max="99" required name="age" value="40" /></td>
</tr>
<tr>
<th>Birthdate</th><td>
<input type="date" name="birthdate" required>
</td></tr>
</tr>
<tr>
<th>Thoughts..</th>
<td>
<textarea name="thoughts" id="thoughts" required></textarea>
</td>
</tr>
<tr>
<th>Donation Amount</th>
<td>
<label
><input
required
type="radio"
value="200"
name="amount"
/>$200</label
>
<label
><input
required
type="radio"
value="500"
name="amount"
/>$500</label
>
<label
><input
required
type="radio"
value="1000"
name="amount"
/>$1000</label
>
</td>
</tr>
<tr>
<th>Referred By</th>
<td>
<select name="referred" required>
<option>Friend</option>
<option>Relative</option>
<option>Business</option>
<option>Government</option>
<option>Email</option>
<option selected>Other</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button>Submit</button>
</td>
</tr>
</table>
</form>
</body>
</html>
/* Add your styles here */
body{
font-family:"Arial Narrow",sans-serif;
font-size:200%;
border:15px solid #b5aee4;
border-radius:10px;
width:80%;
margin:2% auto 2% auto;
}
table {
width:100%;
margin:0;
border:3px solid #b5aee4;
}
.overlay{
position:relative;
z-index: 1;
color:#333;
}
.container {
/* Step 3: Makes positioning of the pseudo-element relative to this container */
position: relative;
z-index: 1; /* Ensures content is on top of the pseudo-element */
padding: 5px;
color: white; /* Content color */
}
.container::before {
content: ""; /* Step 1: Necessary for pseudo-elements */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url('https://i.pinimg.com/originals/17/d8/d8/17d8d865ab83b4915a4f9262a47908fd.jpg');
background-size: cover;
background-position: center;
/* Step 2: Controls the image transparency */
opacity: 0.6;
/* Step 4: Pushes the image layer behind the content */
z-index: -1;
}
table input[type="texxt"]:active{
border:2px solid #fff;
}
table input[type="text"],select,input[type="number"],input[type="date"],input[type="email"]{
height:25px;
font-weight:bold;
border:2px solid cornflowerblue;
border-radius:3px;
font-size:18px;
}
textarea{
margin-top:6px;
width:240px;
height:50px;
border:2px solid cornflowerblue;
border-radius:3px;
font-weight:bold;
font-size:18px;
}
table label {
margin-right:5px;
padding-right:5px;
font-size:75%;
border-radius:3px;
font-weight: bold;
text-shadow:2px -1px #333;
display:inline-block;
}
input[type="radio"]{
display:inline;
}
table th {
font-size:80%;
color: #fffbbb;
vertical-align: bottom;
text-align: left;
}
button:hover{
background-color: #f5e5e5;
color:#a5a056;
}
button{
font-weight:bold;
border:3px solid #675e9e;
background-color: #ffeddd;
font-size:16px;
margin-right:15px;
border-radius:5px;
padding:5px;
}
h1{
font-size:80px;
margin:5px 5px 5px 15px;
text-align:left;
text-shadow:-2px -1px #000;
}
.star1 {
background: #feedae;
}
.star2 {
background: #b2daf1;
}
.star {
width: 50px;
height: 50px;
display: inline-block;
margin-right:5%;
z-index:5;
/* Define the five points of the star */
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
}
table .title {
font-weight:bolder;
font-size:50px;
text-shadow:-2px -2px #333;
}
function myFormSubmit(obj) {
var res={
"name":obj.name.value,
"address":obj.address.value,
"address2":obj.address1.value,
"city":obj.city.value,
"state":obj.state.value,
"zip":obj.zip.value,
"phone":obj.phone.value,
"age":obj.age.value,
"birthdate":obj.birthdate.value,
"thoughts":obj.thoughts.value,
"amount":obj.amount.value,
"referred":obj.referred.value
};
console.log(res);
alert(JSON.stringify(res));
return false;
}