r0r-5chach/CSY1018-assignment-1
r0r-5chach
/
CSY1018-assignment-1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
contact/contact.css
View File

@ -3,18 +3,29 @@ form {
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
grid-template-rows: 30% 30% 30% 10%; grid-template-rows: 30% 30% 30% 10%;
gap: 1em; 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"] { input {
border: none; border-radius: 1em;
padding-left: 0.5em;
} }
input[type="email"] { textarea {
border-radius: 1em;
border: none; border: none;
max-width: 41em;
font-family: body;
} }
input[type="tel"] { input {
border: none; border: none;
font-family: body;
} }
input[type="radio"] { input[type="radio"] {
@ -50,4 +61,11 @@ input[type="radio"] {
input[type="submit"] { input[type="submit"] {
grid-row: 4; grid-row: 4;
max-width: 10em; max-width: 10em;
} }
#reason_answer {
margin-left: 1em;
min-width: 40em;
padding-top: 0.5em;
}

12
contact/contact.html
View File

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