CSY1018-assignment-1/contact/contact.html

75 lines
3.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio showcasing projects worked on by Joshua Perry">
<meta name="keywords" content="HTML, CSS, JavaScript, jpez, jpez-development, home, bio, portfolio">
<meta name="author" content="Joshua Perry">
<base href="../">
<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">
<link rel="stylesheet" href="style/mobile.css" media ="screen and (max-width:800px)">
<link rel="stylesheet" href="contact/contact.css" media="screen">
</head>
<body id="clicked">
<nav class="navigation">
<a class="hidenav" href="contact/contact.html#"> X</a>
<a class="nav link" id="home" href="home/index.html"><h2>J-Pez Development</h2></a>
<a class="nav link" id="port" href="portfolio/portfolio.html"><h2>Portfolio</h2></a>
<a class="nav link" id="blog" href="blog/blog.html"><h2>Blog</h2></a>
<a class="nav link" id="contact" href="contact/contact.html"><h2>Contact</h2></a>
<a class="arrow right"></a>
</nav>
<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>
<a href="home/index.html">
<img src="assets/images/favicon.svg" id="footer_logo" alt="Logo"/>
<p>&copy;Joshua Perry 2022</p>
</a>
<a href="blog/blog.html"><h1>Blog</h1></a>
<a href="site/.html"><h1>Site Report</h1></a>
<a href="site/map.html"><h1>Site Map</h1></a>
<a href="site/construction.html"><h1>Terms</h1></a>
<a href="site/construction.html"><h1>Privacy</h1></a>
</footer>
</body>
</html>