added some styling and background to form

This commit is contained in:
Joshua Perry 2022-04-13 12:35:39 +01:00
parent 21c92ebcfe
commit fc653073c1
2 changed files with 29 additions and 11 deletions

View File

@ -3,18 +3,29 @@ form {
grid-template-columns: 50% 50%;
grid-template-rows: 30% 30% 30% 10%;
gap: 1em;
margin-left: 38em;
background-color: rgba(0, 0, 0, 90%);
border-radius: 1em;
min-width: 42em;
padding-left: 0.5em;
padding-bottom: 0.5em;
}
input[type="text"] {
border: none;
input {
border-radius: 1em;
padding-left: 0.5em;
}
input[type="email"] {
textarea {
border-radius: 1em;
border: none;
max-width: 41em;
font-family: body;
}
input[type="tel"] {
input {
border: none;
font-family: body;
}
input[type="radio"] {
@ -50,4 +61,11 @@ input[type="radio"] {
input[type="submit"] {
grid-row: 4;
max-width: 10em;
}
}
#reason_answer {
margin-left: 1em;
min-width: 40em;
padding-top: 0.5em;
}

View File

@ -10,7 +10,7 @@
<base href="../">
<title>J-Pez Development</title>
<title>Contact: J-Pez Development</title>
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
<link rel="stylesheet" href="style/main.css" media = "screen">
@ -33,17 +33,17 @@
<form action="mailto:joshua.perry21@my.northampton.ac.uk?subject=Inquiry from website" method="POST">
<section id="contact_details">
<label for="contact_details">Contact Details</label>
<input type="text" name="first_name" placeholder="Enter your First name"/>
<input type="text" name="last_name" placeholder="Enter your Last name"/>
<input type="email" name="email_address" placeholder="Enter your Email address"/>
<input type="tel" name="phone_number" placeholder="Enter your Phone Number"/>
<input type="text" name="first_name" placeholder="First name"/>
<input type="text" name="last_name" placeholder="Last name"/>
<input type="email" name="email_address" placeholder="Email address (e.g. someone@domain.com)"/>
<input type="tel" name="phone_number" placeholder="Phone Number (e.g. +44 1632 960501)"/>
</section>
<section id="contact_reason">
<label for="contact_reason" class="header">Reason for contacting:</label>
<section id="reason_answer">
<label for="business_radio" class="label">Business</label>
<input type="radio" name="contact_type" value="business" id="business_radio"/>
<input type="radio" checked="checked" name="contact_type" value="business" id="business_radio"/>
<label for="academic_radio" class="label">Academic</label>
<input type="radio" name="contact_type" value="academic" id="academic_radio"/>