-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
83 lines (74 loc) · 4.87 KB
/
contact.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<title>Thiago Balera | Contact</title>
<meta name="author" content="Lucas Araujo">
<meta name="description" content="Contact page of Thiago Balera, photographer, graphic designer and web developer">
<meta name="keywords" content="thiago balera singer vocalist musician contact aquarela records sorocaba brazil">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!--link to Google Fonts API-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Raleway:ital@0;1&family=Nunito:wght@800;900;1000&display=swap" rel="stylesheet">
<!--link to external CSS stylesheet-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<div id="logo"></div>
<nav id="navbar">
<div id="menu">
<a href="index.html" title="Home">Home</a>
<a href="about.html" title="About">About</a>
<a href="media.html" title="Media">Media</a>
<a href="contact.html" title="Contact">Contact</a>
</div>
</nav>
<div id="socialMedia">
<a href="https://www.instagram.com/thiago.balera" target="_blank" title="Visit my Instagram!"><img src="images/socialmedia/instagram.png" alt="Instagram icon"></a>
<a href="https://www.facebook.com/thiago_maturano/" target="_blank" title="Visit my Facebook!"><img src="images/socialmedia/facebook.png" alt="Facebook icon"></a>
<a href="https://www.twitter.com/thiago_balera/" target="_blank" title="Visit my Twitter!"><img src="images/socialmedia/twitter.png" alt="Facebook icon"></a>
</div>
</header>
<main class="container">
<h1>Contact</h1>
<p>Thank you for your interest in getting in touch! Please feel free to use any of the methods below to contact Thiago Balera for booking inquiries, collaborations, or just to say hello.</p>
<form class="contact" action="mailto:[email protected]">
<label for="reason">Reason for contact</label>
<select name="reason" id="reason">
<option value="" disabled selected>Choose here</option><!--Reference: https://www.w3schools.com/tags/att_option_disabled.asp-->
<option value="Message">Message</option>
<option value="Booking">Booking</option>
<option value="Collaboration">Collaboration</option>
<option value="Inquiry">Inquiry</option>
<option value="Inquiry">Press</option>
<option value="Inquiry">Merchandise</option>
</select>
<label for="name">Your name*</label>
<input name="name" id="name" type="text" placeholder="Enter your name" required>
<label for="email">Your email*</label>
<input name="email" id="email" type="email" placeholder="Enter your email" required>
<label for="tel">Your telephone</label>
<input name="tel" id="tel" type="tel" placeholder="Enter your telephone">
<label for="message">Your message*</label>
<textarea name="message" id="message" placeholder="Enter your message" cols="30" rows="10" required></textarea>
<input type="submit">
</form>
<section class="address">
<img src="images/contact/thiago_balera_contact.jpg" alt="Contact Thiago Balera">
<br>
<strong>Address:</strong> Rua Amador Bueno, 44 - Centro, Sorocaba - SP, 18030-105, Brazil
<br>
<strong>Email:</strong> [email protected]
<br>
<strong>Phone:</strong> +55 15 99124-1983
<br><br>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14635.105858033041!2d-47.4626061!3d-23.5045597!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94c58abdf34ac785%3A0x5984c9ba84fcb11!2sAquarela%20Studios%20(Ensaios%2C%20Grava%C3%A7%C3%B5es%20e%20Produ%C3%A7%C3%A3o%20Musical)!5e0!3m2!1sen!2sca!4v1681800539788!5m2!1sen!2sca" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
</main>
<footer>
Copyright 2023 by <strong>Lucas Araujo</strong>.<br><em class="small">All Rights Reserved</em>.
</footer>
</body>
</html>