-
Notifications
You must be signed in to change notification settings - Fork 0
/
Contact.html
105 lines (97 loc) · 4.56 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
<title>Adam Smith</title>
</head>
<body>
<header>
<div class="navbar">
<div class="name">Adam Smith</div>
<nav>
<ul class="nav-links">
<li><a href="MainPage.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="FAQ.html">FAQ</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="adam-contact-section">
<div class="adam-contact-info">
<h1>CONTACT</h1>
<div class="adam-info-columns">
<div class="adam-info-column">
<h3>Art Commissions & Inquiries</h3>
<p>Available: 10 a.m. – 5 p.m.<br>
Closed on Monday & Holidays</p>
</div>
<div class="adam-info-column">
<h3>Upcoming Exhibitions</h3>
<p>Impressionistic Journeys</p><br>
</div>
<div class="adam-info-column">
<h3>Studio Location</h3>
<p>Adam's Art Studio<br>
Installation: "The Colors of Emotion"</p>
</div>
</div>
</div>
<div class="adam-contact-form">
<form action="#" method="post">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email Address" required>
<textarea name="message" placeholder="Message" required></textarea>
<button type="submit" class="adam-contact-button">SUBMIT</button>
</form>
</div>
<div class="adam-contact-map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.8354345094736!2d-122.41941508468144!3d37.77492977975921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085815374bc3c89%3A0x7d831f9e774bbd8e!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1602628390136!5m2!1sen!2sus"
width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0"></iframe>
<p>456 Creative Drive, Suite 202, Los Angeles, CA 90036</p>
</div>
<script>
document.getElementById("adamContactForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent the form from actually submitting
alert("Submitted");
// Optionally, reset the form here if desired
// this.reset();
});
</script>
</section>
<footer class="footer">
<div class="footer-content">
<div class="footer-section contact">
<h2 class="section-title2">Adam Smith</h2>
</div>
<div class="footer-section contact">
<h2 class="section-title">Contact</h2>
<ul class="contact-info">
<li><span class="contact-icon"><i class="fas fa-map-marker-alt"></i></span> Via Rossini 10, 10136
Turin Italy</li>
<li><span class="contact-icon"><i class="fas fa-phone"></i></span> Phone: (0039) 333 12 68 347</li>
<li><span class="contact-icon"><i class="fas fa-envelope"></i></span> Email: hello@domain.com</li>
<li><span class="contact-icon"><i class="fab fa-skype"></i></span> Skype: you_online</li>
</ul>
</div>
<div class="footer-section follow">
<h2 class="section-title">Follow us</h2>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon"><i class="fab fa-google"></i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon"><i class="fab fa-pinterest"></i></a>
</div>
</div>
</div>
</footer>
</body>
<script src="script.js"></script>
</html>