Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions lab2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<title>Week 3 Lab 2</title>
</head>

<body>
<div class="center">
<form>
<h3>Step 1: Your details</h3>
<div class="name1">
<label for="name" >Name</label>
<input type="text" id="name" name="full_name"> <br>

</div>
<div class="name1">
<label for="email">Email</label>
<input type="email" id="email" name="email_address" multiple> <br>
</div>
<div class="name1">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone_number"><br>
</div>
<h3>Step 2: Delivery address</h3>
<div class="name1">
<label for="address">Address</label>
<textarea id="address" name="address" rows="4" cols="20"></textarea> <br>
</div>
<div class="name1">
<label for="pcode">Post code</label>
<input type="text" id="pcode" name="post_code"> <br>
</div>
<div class="name1">
<label for="country">Country</label>
<input type="text" id="country" name="location"> <br>
</div>

<h3>Step 3: Card details</h3>
<div class="name2">
<label>Card type</label><br><br>
<input type="radio" id="visa" value="visa" name="card_type"><label for="visa">Visa</label>
<input type="radio" id="amex" value="amex" name="card_type"><label for="amex">Amex</label>
<input type="radio" id="mcard" value="mcard" name="card_type"><label for="mcard">Mastercard</label> <br>
</div>
<div class="name1">
<label for="cnum">Card number</label>
<input type="text" id="cardnum" name="card_number"> <br>
</div>
<div class="name1">
<label for="scode">Security code</label>
<input type="text" id="scode" name="security_code"> <br>
</div>
<div class="name1">
<label for="ncard">Name on card</label>
<input type="text" id="ncard" name="name_on_card"> <br>
</div>
<button type="submit">BUY IT!</button> <br>
</form>
</div>
</body>
</html>
46 changes: 46 additions & 0 deletions stylesheet.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
.center {
margin: auto;
width: 20%;
border: 1px solid white;
padding: 10px;
background-color: rgba(161, 204, 82, 0.884);
border-radius: 5px;

}
body {
font-family: Georgia, serif;
color:olive;
}
.name1{
display:flex;
justify-content: space-between;
background-color: rgba(198, 226, 147, 0.884);
border: 2px solid white;
padding:10px;
border-radius: 15px;
margin-bottom: 2px;


}
button {

background-color: black;
color: white;
border-radius: 15px;
padding:4px 16px;
margin-top: 5px;
margin-left: 40%;

}

.name2{

background-color: rgba(161, 204, 82, 0.884);
border: 2px solid white;
padding:10px;
border-radius: 15px;
margin-bottom: 2px;


}