-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
138 lines (135 loc) · 6 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!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" />
<title>Contact | CoffeeBean</title>
<link rel="stylesheet" href="./assets/css/app.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
</head>
<body class="font-body font-size-md bg-light color-black relative">
<!-- Top Navigation - Sticky component -->
<div class="w-100 bg-light nav-wrapper py-10">
<div class="card relative h-100 max-width m-auto d-flex justify-between bg-white">
<!-- TODO: replace this with a proper logo -->
<a href="/" class="d-flex self-center pl-20 font-special font-size-xs">
<h1><span class="color-warning uppercase bold">Coffee</span>Bean</h1>
</a>
<nav class="desktop-visible nav-container self-center">
<ul class="nav-list d-flex flex-row">
<li class="px-10"><a href="./services.html">Services</a></li>
<li class="px-10"><a href="./about.html">About Us</a></li>
<li class="px-10"><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<nav class="mobile-visible nav-container self-center">
<details class="nav-toggle">
<summary class="nav-toggle-button px-40">
<span class="material-symbols-outlined">menu</span>
</summary>
<ul class="mobile-nav-list nav-list d-flex flex-col bg-white w-100">
<li class="px-10 py-20 d-flex mr-auto gap-10">
<span class="material-symbols-outlined">home</span>
<a href="/">Home</a>
</li>
<li class="px-10 py-20 d-flex mr-auto gap-10">
<span class="material-symbols-outlined">book</span>
<a href="./services.html">Services</a>
</li>
<li class="px-10 py-20 d-flex mr-auto gap-10">
<span class="material-symbols-outlined">book</span>
<a href="./about.html">About Us</a>
</li>
<li class="px-10 py-20 d-flex mr-auto gap-10">
<span class="material-symbols-outlined">contact_support</span>
<a href="./contact.html">Contact</a>
</li>
</ul>
</details>
</nav>
</div>
</div>
<!-- End of Top Navigation - Sticky component -->
<!-- Main -->
<main class="w-100">
<div class="d-flex flex-col">
<section class="color-black py-40 section">
<div class="max-width m-auto d-flex flex-row gap-40">
<div class="w-md-50 m-auto d-flex flex-col">
<p>
Contact us to learn more about our coffee bean shop and our delicious selection of
coffee beans from around the world. Our team is happy to assist with any questions
or inquiries you may have.
</p>
</div>
<div class="w-md-50 m-auto d-flex flex-col">
<form class="form-group flex-col d-flex">
<div class="d-flex flex-col">
<label class="font-size-md" for="full-name">Full Name</label>
<input
type="text"
class="form-control font-size-sm"
id="full-name"
placeholder="e.g. John Doe"
/>
</div>
<div class="d-flex flex-col">
<label class="font-size-md" for="favorite-origin">Favorite Bean Origin</label>
<input
type="text"
class="form-control font-size-sm"
id="favorite-origin"
placeholder="e.g. Ethiopia"
/>
</div>
<div class="d-flex flex-row my-20">
<input class="form-control" type="checkbox" id="terms-and-conditions" />
<label class="font-size-md ml-10" class="" for="terms-and-conditions">
I agree with the <a class="link" href="#">Terms & Conditions</a>
</label>
</div>
<div class="d-flex flex-col">
<label class="font-size-md" for="your-message">Message</label>
<textarea class="form-control" id="your-message" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-lg font-size-md btn-outline-dark color-black">
Submit
</button>
</form>
</div>
</div>
</section>
</div>
</main>
<!-- End of Main -->
<!-- Footer -->
<footer>
<div class="section bg-black color-light py-40">
<div class="max-width m-auto d-flex flex-col gap-20 font-size-md color-light">
<h4 class="font-size-xlg color-light font-special">Want to know more?</h4>
<a href="/"><h5 class="font-size-lg color-white font-special bold">Get in touch</h5></a>
<p class="font-size-sm">Copyright © 2023 CoffeeBean, Inc. All rights reserved.</p>
<p>
I've brewed my vision and crafted my idea from the comfort of my own home, and now I'm
ready to serve it to the world with a steaming cup of inspiration and a rich blend of
creativity.
</p>
<ul class="footer-list d-flex flex-col flex-wrap">
<li class="py-10"><a href="./">Home</a></li>
<li class="py-10"><a href="./services.html">Services</a></li>
<li class="py-10"><a href="./about.html">About Us</a></li>
<li class="py-10"><a href="./contact.html">Contact</a></li>
</ul>
</div>
</div>
</footer>
<!-- End of Footer -->
<div class="chat bg-accent color-light">
<span class="material-symbols-outlined">contact_support</span>
</div>
</body>
</html>