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

Merge pull request #2 from jpez-development/contact_page 

Contact page
This commit is contained in:
Joshua Perry 2022-04-13 15:00:43 +01:00 committed by GitHub
parent 43cae90c8d fc653073c1
commit e84fff4b33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 100 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
contact/contact.css
View File

@ -0,0 +1,71 @@
form {
display: grid;
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 {
border-radius: 1em;
padding-left: 0.5em;
}
textarea {
border-radius: 1em;
border: none;
max-width: 41em;
font-family: body;
}
input {
border: none;
font-family: body;
}
input[type="radio"] {
accent-color: #f29602;
}
#contact_details {
grid-row: 1;
display: grid;
grid-template-rows: 20% 20% 20% 20% 20%;
gap: 0.2em;
}
#contact_details > input {
min-width: 40em;
}
#contact_reason {
grid-row: 2;
display: grid;
grid-template-columns: 40% 60%;
gap: 0.2em;
}
#contact_body {
grid-row: 3;
}
#contact_body > textarea {
min-width: 40em;
}
input[type="submit"] {
grid-row: 4;
max-width: 10em;
}
#reason_answer {
margin-left: 1em;
min-width: 40em;
padding-top: 0.5em;
}

30
contact/contact.html
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">
@ -30,6 +30,34 @@
<main>
<a class="shownav" href="contact/contact.html#clicked"></a>
<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="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" 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"/>
<label for="personal_radio" class="label">Personal</label>
<input type="radio" name="contact_type" value="personal" id="personal_radio"/>
</section>
</section>
<section id="contact_body">
<textarea placeholder="Enter your message or query here..."></textarea>
</section>
<input type="submit" name="submit" value="submit"/>
</form>
</main>
<footer>

1
style/main.css
View File

@ -83,7 +83,6 @@ nav > .link:hover {
#blog {
grid-area: blog;
}
#contact {
grid-area: contact;
border-top-right-radius: 10em;