Respuesta :
An HTML form can be improved by adding the upcoming style guidelines. To set the bottom margin to 2%, create a style rule for the fieldset and input elements.
/*
Author:
Date:
File Name:
body {
background: linear-gradient(to top right, #fff 0%, #6699ff 100%) no-repeat fixed center;
font-family: Geneva, Arial, sans-serif;
}
container {
width: 90%;
margin: 0 auto;
}
input {
margin-bottom: 2%;
}
legend {
font-size:1.25em;
font-weight:bold;
}
.btn {
border:none;
margin: 0 auto 0 auto;
display:block;
padding:5%;
background-color:003399;
font-size:1.25em;
border-radius:10px;
color:;
}
footer {
font-size: .9em;
text-align: center;
}
media only screen and (min-width: 600px) {
input {
width: 80%;
margin: 0 auto 0 auto;
}
.grid {
display: grid;
grid-template-columns: auto auto;
grid-gap: 20px;
grid-column: 1 / span 2;
padding:3%;
}
}
And,
The HTML file is: "analyze08.html"
<!DOCTYPE html>
<!-- Student's Name, Today's Date -->
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style08.css">
</head>
<body>
<div id="container">
<!-- Use the main area to add the main content of the webpage -->
<main>
<form class="grid">
<!-- field set for Customer Information -->
<fieldset>
<legend>Customer Information</legend>
<label for="FirstName">First Name</label><br>
<input type="text" name="fName" id="fName"><br><br>
<label for="LastName">Last Name</label><br>
<input type="text" name="lName" id="lName"><br><br>
<label for="Email Address">Email Address</label><br>
<input type="email" name="email" id="email"><br><br>
<label for="Phone Number">Phone Number</label><br>
<input type="tel" name="phone" id="phone"><br><br>
</fieldset>
<!-- field set for Payment Information -->
<fieldset>
<legend>Payment Information</legend>
<label for="Card Name">Card Name</label><br>
<input type="text" name="cName" id="cName"><br><br>
<label for="Card Number">Card Number</label><br>
<input type="number" name="cNum" id="cNum"><br><br>
<label for="Expiration Date">Expiration Date</label><br>
<input type="text" name="expDate" id="expDate" placeholder="MM/YY"><br><br>
<label for="CCV">CCV</label><br>
<input type="number" name="ccv" id="ccv">
</fieldset><br>
<!-- Button CSS -->
<button type="button" class="btn">SUBMIT</button>
</form>
</main>
<!-- Use the footer area to add webpage footer content -->
<footer>
<!-- please change with your name and date -->
<p>Student's Name, Today's Date</p>
</footer>
</div>
</body>
</html>
Learn more about HTML here:
https://brainly.com/question/15093505
#SPJ4
