-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
245 lines (233 loc) · 25.7 KB
/
index.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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Surfbot - Escola de Surf</title>
<meta name="title" content="Surfbot - Escola de Surf" />
<meta name="description" content="Website developed from scratch, about a surfing school. Design made during the 'Advanced UI Design' course from origamid.com" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github.com/Barata-Ribeiro/surfbot" />
<meta property="og:title" content="Surfbot - Escola de Surf" />
<meta property="og:description" content="Website developed from scratch, about a surfing school. Design made during the 'Advanced UI Design' course from origamid.com" />
<meta property="og:image" content="https://raw.githubusercontent.com/Barata-Ribeiro/surfbot/main/img/og-image.jpg" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://github.com/Barata-Ribeiro/surfbot" />
<meta property="twitter:title" content="Surfbot - Escola de Surf" />
<meta property="twitter:description" content="Website developed from scratch, about a surfing school. Design made during the 'Advanced UI Design' course from origamid.com" />
<meta property="twitter:image" content="https://raw.githubusercontent.com/Barata-Ribeiro/surfbot/main/img/og-image.jpg" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<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=Alice&family=Nunito:wght@400;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="./css/style.min.css">
<script>document.documentElement.classList.add('js')</script>
</head>
<body>
<div class="superinfo-bg">
<div class="container">
<p class="font-2-s-b cor-6">Aulas na Praia Mansa de Sexta à Domingo das 06:00 às 14:00</p>
</div>
</div>
<header class="header-bg">
<div class="container header">
<a href="./" aria-label="Logo">
<svg width="152" height="38" viewBox="0 0 152 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>surfbot-logo</title>
<desc>Created using Figma</desc>
<g id="Canvas" transform="translate(-45 -41)">
<g id="surfbot-logo">
<use xlink:href="#path0_fill" transform="translate(45 41)" fill="#FFFFFF" />
<use xlink:href="#path1_fill" transform="translate(45 41)" fill="#FFFFFF" />
<use xlink:href="#path2_fill" transform="translate(45 41)" fill="#FFFFFF" />
<use xlink:href="#path3_fill" transform="translate(45 41)" fill="#FFFFFF" />
<use xlink:href="#path4_fill" transform="translate(45 41)" fill="#FFFFFF" />
<use xlink:href="#path5_fill" transform="translate(45 41)" fill="#FFFFFF" />
<use xlink:href="#path6_fill" transform="translate(45 41)" fill="#FFFFFF" />
<use xlink:href="#path7_fill" transform="translate(45 41)" fill="#FFFFFF" />
<use xlink:href="#path8_fill" transform="translate(45 41)" fill="#FFFFFF" />
</g>
</g>
<defs>
<path id="path0_fill" d="M 41.2744 33.464C 38.7544 33.464 36.8224 33.032 35.4784 32.168C 34.1584 31.28 33.4984 29.984 33.4984 28.28C 33.4984 27.416 33.7864 26.708 34.3624 26.156C 34.9624 25.58 35.7304 25.292 36.6664 25.292C 37.2184 25.316 37.6384 25.46 37.9264 25.724C 38.2144 25.964 38.3584 26.192 38.3584 26.408C 38.3584 26.432 38.2384 26.516 37.9984 26.66C 37.7584 26.804 37.5424 27.02 37.3504 27.308C 37.1584 27.596 37.0624 27.992 37.0624 28.496C 37.0624 29.624 37.3984 30.5 38.0704 31.124C 38.7664 31.724 39.8344 32.024 41.2744 32.024C 42.2584 32.024 43.1224 31.832 43.8664 31.448C 44.6104 31.064 45.1744 30.56 45.5584 29.936C 45.9664 29.288 46.1704 28.616 46.1704 27.92C 46.1704 27.056 45.9184 26.312 45.4144 25.688C 44.9344 25.064 44.3344 24.548 43.6144 24.14C 42.8944 23.708 41.9104 23.216 40.6624 22.664C 39.2224 22.016 38.0584 21.428 37.1704 20.9C 36.2824 20.372 35.5264 19.676 34.9024 18.812C 34.2784 17.924 33.9664 16.832 33.9664 15.536C 33.9664 13.448 34.6744 11.888 36.0904 10.856C 37.5304 9.824 39.4144 9.308 41.7424 9.308C 43.5664 9.308 45.1504 9.692 46.4944 10.46C 47.8624 11.228 48.5464 12.356 48.5464 13.844C 48.5464 14.708 48.2464 15.428 47.6464 16.004C 47.0704 16.556 46.3144 16.832 45.3784 16.832C 44.8264 16.808 44.4064 16.676 44.1184 16.436C 43.8304 16.172 43.6864 15.932 43.6864 15.716C 43.6864 15.692 43.8424 15.608 44.1544 15.464C 44.4904 15.32 44.7784 15.104 45.0184 14.816C 45.2824 14.528 45.4144 14.132 45.4144 13.628C 45.4144 12.74 45.0664 12.044 44.3704 11.54C 43.6984 11.036 42.8344 10.784 41.7784 10.784C 40.3144 10.784 39.1984 11.132 38.4304 11.828C 37.6864 12.5 37.3144 13.34 37.3144 14.348C 37.3144 15.188 37.5424 15.896 37.9984 16.472C 38.4544 17.024 39.1864 17.576 40.1944 18.128C 41.0104 18.56 41.8984 18.992 42.8584 19.424C 44.3944 20.12 45.6064 20.756 46.4944 21.332C 47.4064 21.908 48.1624 22.664 48.7624 23.6C 49.3864 24.536 49.6984 25.7 49.6984 27.092C 49.6984 28.292 49.3144 29.384 48.5464 30.368C 47.8024 31.328 46.7824 32.084 45.4864 32.636C 44.2144 33.188 42.8104 33.464 41.2744 33.464Z" />
<path id="path1_fill" d="M 59.4994 33.176C 57.8674 33.176 56.5714 32.684 55.6114 31.7C 54.6514 30.716 54.1714 29.42 54.1714 27.812L 54.1714 21.152C 54.1714 20.528 54.1474 20.072 54.0994 19.784C 54.0754 19.496 53.9314 19.244 53.6674 19.028C 53.4034 18.812 52.9594 18.704 52.3354 18.704C 52.0474 18.704 51.8314 18.668 51.6874 18.596C 51.5434 18.5 51.4714 18.296 51.4714 17.984C 51.4714 17.84 51.5194 17.708 51.6154 17.588C 51.7114 17.444 51.8554 17.36 52.0474 17.336C 53.5594 17.12 54.8554 16.808 55.9354 16.4C 56.2714 16.28 56.5474 16.208 56.7634 16.184L 56.8714 16.184C 57.2554 16.184 57.4474 16.412 57.4474 16.868L 57.4474 27.776C 57.4474 28.88 57.7954 29.732 58.4914 30.332C 59.1874 30.908 59.9914 31.196 60.9034 31.196C 62.0314 31.196 62.9914 30.92 63.7834 30.368C 64.5754 29.816 65.1034 29.264 65.3674 28.712L 65.3674 21.152C 65.3674 20.528 65.3434 20.072 65.2954 19.784C 65.2714 19.496 65.1274 19.244 64.8634 19.028C 64.5994 18.812 64.1554 18.704 63.5314 18.704C 63.2434 18.704 63.0274 18.668 62.8834 18.596C 62.7394 18.5 62.6674 18.296 62.6674 17.984C 62.6674 17.84 62.7154 17.708 62.8114 17.588C 62.9074 17.444 63.0514 17.36 63.2434 17.336C 64.7554 17.12 66.0514 16.808 67.1314 16.4C 67.4674 16.28 67.7434 16.208 67.9594 16.184L 68.0674 16.184C 68.4514 16.184 68.6434 16.412 68.6434 16.868L 68.6434 29.324C 68.6434 30.74 69.5914 31.448 71.4874 31.448C 71.8954 31.448 72.0994 31.676 72.0994 32.132C 72.0994 32.468 71.8954 32.672 71.4874 32.744L 65.6914 33.14C 65.5234 33.14 65.4274 33.08 65.4034 32.96C 65.3794 32.864 65.3674 32.684 65.3674 32.42L 65.3674 30.404L 65.2954 30.404C 64.5994 31.052 64.0354 31.556 63.6034 31.916C 63.1714 32.252 62.6074 32.54 61.9114 32.78C 61.2394 33.044 60.4354 33.176 59.4994 33.176Z" />
<path id="path2_fill" d="M 74.0687 32.852C 73.9007 32.852 73.7567 32.78 73.6367 32.636C 73.5407 32.492 73.4927 32.324 73.4927 32.132C 73.5167 31.82 73.5887 31.64 73.7087 31.592C 73.8287 31.52 74.0447 31.484 74.3567 31.484C 74.9807 31.484 75.4247 31.376 75.6887 31.16C 75.9527 30.944 76.0967 30.692 76.1207 30.404C 76.1687 30.116 76.1927 29.66 76.1927 29.036L 76.1927 20.792C 76.1927 20.168 76.1687 19.712 76.1207 19.424C 76.0967 19.136 75.9527 18.884 75.6887 18.668C 75.4247 18.452 74.9807 18.344 74.3567 18.344C 74.0687 18.344 73.8527 18.308 73.7087 18.236C 73.5647 18.14 73.4927 17.936 73.4927 17.624C 73.4927 17.48 73.5407 17.348 73.6367 17.228C 73.7327 17.084 73.8767 17 74.0687 16.976C 75.6287 16.736 76.9127 16.424 77.9207 16.04C 78.3287 15.92 78.6047 15.848 78.7487 15.824L 78.8567 15.824C 79.2407 15.824 79.4327 16.052 79.4327 16.508L 79.4327 18.74L 79.5407 18.74C 80.3807 17.9 81.2327 17.24 82.0967 16.76C 82.9607 16.256 83.7407 16.004 84.4367 16.004C 85.2287 16.004 85.8527 16.304 86.3087 16.904C 86.7887 17.48 87.0287 18.152 87.0287 18.92C 87.0287 19.592 86.8247 20.192 86.4167 20.72C 86.0087 21.248 85.4447 21.512 84.7247 21.512C 84.3887 21.512 84.0887 21.44 83.8247 21.296C 83.5847 21.152 83.4527 21.032 83.4287 20.936C 83.4527 20.888 83.5727 20.744 83.7887 20.504C 84.0047 20.24 84.1127 19.94 84.1127 19.604C 84.1127 19.172 83.9927 18.824 83.7527 18.56C 83.5367 18.296 83.2367 18.164 82.8527 18.164C 82.4447 18.164 81.9287 18.368 81.3047 18.776C 80.6807 19.16 80.0687 19.652 79.4687 20.252L 79.4687 29.036C 79.4687 29.66 79.4927 30.116 79.5407 30.404C 79.5887 30.692 79.7447 30.944 80.0087 31.16C 80.2727 31.376 80.7167 31.484 81.3407 31.484L 81.5567 31.484C 81.7487 31.484 81.8927 31.52 81.9887 31.592C 82.0847 31.664 82.1447 31.844 82.1687 32.132C 82.1687 32.324 82.1207 32.492 82.0247 32.636C 81.9287 32.78 81.7847 32.852 81.5927 32.852C 80.2007 32.78 78.9407 32.744 77.8127 32.744C 76.7327 32.744 75.4847 32.78 74.0687 32.852Z" />
<path id="path3_fill" d="M 129.981 33.176C 128.349 33.176 126.897 32.792 125.625 32.024C 124.353 31.232 123.357 30.2 122.637 28.928C 121.941 27.632 121.593 26.264 121.593 24.824C 121.593 23.024 122.013 21.464 122.853 20.144C 123.693 18.8 124.761 17.78 126.057 17.084C 127.353 16.364 128.661 16.004 129.981 16.004C 131.613 16.004 133.065 16.4 134.337 17.192C 135.609 17.96 136.593 18.992 137.289 20.288C 138.009 21.56 138.369 22.916 138.369 24.356C 138.369 26.156 137.937 27.728 137.073 29.072C 136.233 30.392 135.165 31.412 133.869 32.132C 132.573 32.828 131.277 33.176 129.981 33.176ZM 129.981 31.844C 131.613 31.844 132.801 31.148 133.545 29.756C 134.313 28.364 134.697 26.564 134.697 24.356C 134.697 22.292 134.301 20.612 133.509 19.316C 132.741 17.996 131.565 17.336 129.981 17.336C 128.325 17.336 127.125 18.02 126.381 19.388C 125.637 20.756 125.265 22.544 125.265 24.752C 125.265 26.816 125.649 28.52 126.417 29.864C 127.185 31.184 128.373 31.844 129.981 31.844Z" />
<path id="path4_fill" d="M 147.44 33.356C 146.264 33.356 145.256 32.924 144.416 32.06C 143.576 31.196 143.156 29.96 143.156 28.352L 143.156 17.768L 141.068 17.84C 140.924 17.84 140.804 17.78 140.708 17.66C 140.612 17.516 140.564 17.36 140.564 17.192C 140.564 16.976 140.6 16.796 140.672 16.652C 140.768 16.484 140.9 16.388 141.068 16.364C 141.908 16.196 142.556 15.932 143.012 15.572C 143.492 15.188 143.84 14.78 144.056 14.348C 144.272 13.892 144.536 13.208 144.848 12.296C 144.968 11.984 145.232 11.828 145.64 11.828C 145.808 11.828 145.976 11.876 146.144 11.972C 146.312 12.044 146.396 12.164 146.396 12.332L 146.144 16.436L 150.356 16.184L 150.428 16.184C 150.74 16.184 150.896 16.412 150.896 16.868C 150.896 17.132 150.848 17.384 150.752 17.624C 150.68 17.84 150.584 17.948 150.464 17.948L 146.432 17.84L 146.432 28.784C 146.432 29.576 146.588 30.236 146.9 30.764C 147.236 31.292 147.776 31.556 148.52 31.556C 149.264 31.556 149.924 31.424 150.5 31.16C 150.812 31.04 151.004 30.98 151.076 30.98C 151.244 30.98 151.376 31.052 151.472 31.196C 151.568 31.316 151.664 31.484 151.76 31.7C 151.784 31.748 151.796 31.808 151.796 31.88C 151.796 31.976 151.724 32.084 151.58 32.204C 150.884 32.66 150.224 32.96 149.6 33.104C 149 33.272 148.28 33.356 147.44 33.356Z" />
<path id="path5_fill" d="M 89.2536 32.636C 89.3496 32.78 89.4936 32.852 89.6856 32.852C 91.0536 32.78 92.3016 32.744 93.4296 32.744C 95.0376 32.744 96.5376 32.78 97.9296 32.852C 98.0976 32.852 98.2296 32.78 98.3256 32.636C 98.4216 32.492 98.4696 32.324 98.4696 32.132C 98.4456 31.844 98.3856 31.664 98.2896 31.592C 98.2176 31.52 98.0736 31.484 97.8576 31.484L 97.6416 31.484C 96.8496 31.484 96.2856 31.424 95.9496 31.304C 95.6136 31.184 95.3856 30.968 95.2656 30.656C 95.1456 30.32 95.0856 29.78 95.0856 29.036L 95.0856 17.84L 98.9016 17.84C 99.0696 17.84 99.2136 17.768 99.3336 17.624C 99.4536 17.48 99.5136 17.312 99.5136 17.12C 99.4896 16.832 99.4176 16.652 99.2976 16.58C 99.2016 16.484 99.0456 16.436 98.8296 16.436L 95.0856 16.436L 95.0856 14.276C 95.0856 13.124 95.1336 12.116 95.2296 11.252C 95.3256 10.364 95.6016 9.548 96.0576 8.804C 96.5136 8.06 97.2216 7.688 98.1816 7.688C 98.292 7.688 98.3988 7.6945 98.5019 7.7075C 98.4881 7.30132 98.5155 6.89272 98.581 6.50177C 98.5321 6.50059 98.483 6.5 98.4336 6.5C 96.3216 6.548 94.6776 7.352 93.5016 8.912C 92.3496 10.448 91.7736 12.452 91.7736 14.924L 91.7736 16.436L 89.6136 16.436C 89.3016 16.436 89.0856 16.472 88.9656 16.544C 88.8456 16.592 88.7736 16.784 88.7496 17.12C 88.7496 17.312 88.7976 17.48 88.8936 17.624C 89.0136 17.768 89.1696 17.84 89.3616 17.84L 91.7736 17.84L 91.7736 29.036C 91.7736 29.684 91.7496 30.152 91.7016 30.44C 91.6776 30.704 91.5336 30.944 91.2696 31.16C 91.0056 31.376 90.5616 31.484 89.9376 31.484C 89.6256 31.484 89.4096 31.52 89.2896 31.592C 89.1936 31.64 89.1336 31.82 89.1096 32.132C 89.1096 32.324 89.1576 32.492 89.2536 32.636Z" />
<path id="path6_fill" fill-rule="evenodd" d="M 108.498 7.5C 108.498 9.70914 106.707 11.5 104.498 11.5C 102.289 11.5 100.498 9.70914 100.498 7.5C 100.498 5.29086 102.289 3.5 104.498 3.5C 106.707 3.5 108.498 5.29086 108.498 7.5ZM 104.498 9.5C 105.603 9.5 106.498 8.60457 106.498 7.5C 106.498 6.39543 105.603 5.5 104.498 5.5C 103.394 5.5 102.498 6.39543 102.498 7.5C 102.498 8.60457 103.394 9.5 104.498 9.5Z" />
<path id="path7_fill" fill-rule="evenodd" d="M 102.745 13.2399L 102.745 32.528C 102.745 32.744 102.805 32.912 102.925 33.032C 103.045 33.176 103.213 33.248 103.429 33.248C 103.645 33.248 103.825 33.152 103.969 32.96C 104.113 32.792 104.245 32.54 104.365 32.204C 104.485 31.868 104.593 31.604 104.689 31.412L 104.869 31.412C 106.429 32.588 108.277 33.176 110.413 33.176C 111.853 33.176 113.209 32.792 114.481 32.024C 115.753 31.256 116.761 30.212 117.505 28.892C 118.273 27.548 118.657 26.072 118.657 24.464C 118.657 22.832 118.321 21.38 117.649 20.108C 117.001 18.812 116.101 17.804 114.949 17.084C 113.797 16.364 112.513 16.004 111.097 16.004C 110.233 16.004 109.357 16.184 108.469 16.544C 107.605 16.88 106.825 17.396 106.129 18.092L 106.021 18.092L 106.021 13.305C 104.951 13.5852 103.804 13.5628 102.745 13.2399ZM 113.617 29.972C 112.729 31.292 111.553 31.952 110.089 31.952C 109.321 31.952 108.637 31.784 108.037 31.448C 107.461 31.112 106.993 30.716 106.633 30.26C 106.297 29.78 106.093 29.348 106.021 28.964L 106.021 19.46C 107.053 18.356 108.325 17.804 109.837 17.804C 111.541 17.804 112.825 18.476 113.689 19.82C 114.553 21.14 114.985 22.736 114.985 24.608C 114.985 26.84 114.529 28.628 113.617 29.972Z" />
<path id="path8_fill" fill-rule="evenodd" d="M 9.63967 0.2794C 10.1612 -0.0931334 10.8618 -0.0931333 11.3834 0.2794C 17.8802 4.92002 20.8255 10.4833 21.0111 18.4651C 21.0968 22.2765 20.7299 25.7663 19.6133 28.781C 18.4681 31.7975 16.4315 34.5845 13.4332 36.938C 13.0549 37.2326 12.5585 37.3286 12.0976 37.1963C 11.1793 36.9327 11.023 35.8442 10.5115 35.1657C 9.99974 35.8446 9.84439 36.9325 8.9254 37.1963C 8.46452 37.3286 7.96817 37.2326 7.58987 36.938C 4.5915 34.5845 2.55499 31.7975 1.40971 28.781C 0.293102 25.7663 -0.0737632 22.2765 0.0119281 18.4651C 0.197553 10.4833 3.1428 4.92002 9.63967 0.2794ZM 12.9984 33.5C 14.8746 31.775 16.0052 29.8926 16.8041 27.7283C 17.8092 25.0815 18.0991 22.1583 18.0119 18.5349C 17.8672 12.311 16.4108 8.26064 11.9984 4.5L 11.9984 15.5C 13.7236 15.944 14.4984 17.6362 14.4984 19.5C 14.4984 21.3638 13.7236 23.056 11.9984 23.5L 11.9984 32.5C 11.9984 32.5 12.8001 33.2391 12.9984 33.5ZM 7.99835 33.5C 6.12206 31.775 5.01787 29.8926 4.21893 27.7283C 3.21389 25.0815 2.92391 22.1583 3.01112 18.5349C 3.15557 12.3234 4.60442 8.25563 8.99835 4.5L 8.99835 15.5C 7.27312 15.944 6.49835 17.6362 6.49835 19.5C 6.49835 21.3638 7.27312 23.056 8.99835 23.5L 8.99835 32.5C 8.99835 32.5 8.18923 33.2487 7.99835 33.5ZM 10.4984 17.5C 9.39378 17.5 8.49835 18.3954 8.49835 19.5C 8.49835 20.6046 9.39378 21.5 10.4984 21.5C 11.6029 21.5 12.4984 20.6046 12.4984 19.5C 12.4984 18.3954 11.6029 17.5 10.4984 17.5Z" />
</defs>
</svg>
</a>
<nav class="header-menu" data-menu="smooth">
<button id="btn-mobile" class="font-2-s-b cor-0" aria-label="Abrir Menu" aria-haspopup="true" aria-controls="header-menu" aria-expanded="false">Menu
<span id="burger"></span>
</button>
<ul class="font-2-r-b" id="nav-ul" role="menu">
<li role="menuitem"><a class="cor-6" href="#praia">Praia</a></li>
<li role="menuitem"><a class="cor-6" href="#aulas">Aulas</a></li>
<li role="menuitem"><a class="cor-6" href="#contato">Contato</a></li>
<li role="menuitem"><a class="cor-6" id="main" href="./matricula.html">Matricule-se</a></li>
</ul>
<div class="overlay"></div>
</nav>
</div>
</header>
<section class="intro-bg" id="intro" aria-label="Introdução">
<div class="intro container">
<h1 class="font-1-xl cor-6">Escola de Surf</h1>
<form class="intro-form" id="intro-form" action="./matricula.html" method="get">
<div class="intro-form-div">
<input type="email" id="intro_email" name="intro_email" placeholder="contato@email.com" required>
<button type="submit" class="intro-botao">Matricule-se</button>
</div>
</form>
</div>
</section>
<section class="praia container" id="praia" aria-label="Informação da Praia">
<div class="praia-galeria">
<img src="./img/pranchas.jpg" class="img-pranchas" alt="Pranchas">
<img src="./img/mapa.jpg" class="img-mapa" alt="Mapa da Praia">
<div class="praia-galera-info font-2-s-b cor-5">
<h3>Como Chegar</h3>
<ul>
<li>Carro <span class="cor-2">pela via Lúcio Costa sentido Barra</span></li>
<li>Ônibus <span class="cor-2">linha 2333, 138, 189, 170</span></li>
<li>Metrô <span class="cor-2">linha azul sentido Zona Sul</span></li>
</ul>
</div>
</div>
<div class="praia-info">
<h1 class="font-1-xl"><span class="cor-p2">Aulas</span> em uma das melhores praias do <span class="cor-p2">Rio</span>.</h1>
<ul class="font-2-l cor-3">
<li><img src="./img/sandalhas.svg" width="52" height="52" alt="Local"><span>8km de costa</span></li>
<li><img src="./img/coco.svg" width="52" height="52" alt="Restaurantes"><span>Restaurantes à beira mar</span></li>
<li><img src="./img/boia.svg" width="52" height="52" alt="Salva-vidas"><span>Salva-vidas a cada 300m</span></li>
</ul>
<div class="praia-info-p">
<p class="font-2-r cor-3">Como cidade capital, abriga na zona chamada Plateau, promontório à beira-mar, edifícios públicos e outras construções de importância, como o Palácio Presidencial, construído no fim do século XIX para ser a residência do governador português.</p>
<p class="font-2-r cor-3">Ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tempus urna at turpis condimentum lobortis.</p>
</div>
</div>
</section>
<section class="aulas-bg" id="aulas" aria-label="Planos de Aulas">
<div class="container">
<div class="aulas-titulo">
<img src="./img/ondas.svg" alt="Ondas">
<h1 class="font-1-xl cor-5">Aulas</h1>
</div>
<div class="aulas-planos">
<div class="aulas-cartao">
<img src="./img/surfbot-icon.svg" width="22" height="40" alt="Icone Surfbot">
<h2 class="font-2-l-b cor-4">Infantil</h2>
<ul class="font-2-s cor-3">
<li>Público entre 5 e 15 anos</li>
<li>Equipamentos fornecidos</li>
<li>Horários de Sex. à Sab.</li>
<li>2 horas seguidas de aula</li>
</ul>
<span class="font-2-s-b cor-p2">R$49,00 / Aula</span>
<a href="./matricula.html?produto=infantil">Matricule-se</a>
</div>
<div class="aulas-cartao">
<img src="./img/surfbot-icon2.svg" width="50" height="40" alt="Icone Surfbot">
<h2 class="font-2-l-b cor-4">Adulto</h2>
<ul class="font-2-s cor-3">
<li>Público entre 16 e 80 anos</li>
<li>Equipamentos fornecidos</li>
<li>Horários de Sex. à Sab.</li>
<li>3 horas seguidas de aula</li>
</ul>
<span class="font-2-s-b cor-p2">R$69,00 / Aula</span>
<a href="./matricula.html?produto=adulto">Matricule-se</a>
</div>
<div class="aulas-cartao">
<img src="./img/surfbot-icon3.svg" width="76" height="40" alt="Icone Surfbot">
<h2 class="font-2-l-b cor-4">Profissional</h2>
<ul class="font-2-s cor-3">
<li>Experiência de 3 anos</li>
<li>Trazer o seu equipamento</li>
<li>Horários de Sex. à Sab.</li>
<li>4 horas seguidas de aula</li>
</ul>
<span class="font-2-s-b cor-p2">R$99,00 / Aula</span>
<a href="./matricula.html?produto=profissional">Matricule-se</a>
</div>
</div>
<div class="aulas-info font-2-r cor-3">
<p>Possui um grupo com mais de <span class="cor-s2">3 pessoas</span>?</p>
<p>Entre <a href="#contato">em contato</a> para um desconto personalizado.</p>
</div>
</div>
</section>
<div class="frase-bg">
<div class="frase container">
<blockquote>
<p class="font-1-xl cor-6">“O surf liberta as ondas de uma vida.”</p>
</blockquote>
<span class="font-2-r-b cor-6">Regis Pereira</span>
</div>
</div>
<section class="contato container" id="contato" aria-label="Contato">
<h1 class="font-1-xl cor-5">Contato</h1>
<div class="contato-container">
<div class="contato-form">
<form target="_blank" action="https://formsubmit.co/surfnet@surfbot.com" method="post">
<div>
<label class="form-label" for="nome">Nome</label>
<input class="form-style" type="text" id="nome" name="contato_nome" required />
</div>
<div>
<label class="form-label" for="email">E-mail</label>
<input class="form-style" type="email" id="email" name="contato_email" placeholder="contato@email.com" required />
</div>
<div>
<label class="form-label" for="msg">Mensagem</label>
<textarea class="form-style" id="msg" name="contato_msg" required></textarea>
</div>
<div class="button">
<button type="submit">Enviar Mensagem</button>
</div>
</form>
</div>
<div class="contato-info">
<div>
<dl class="font-2-s cor-3">
<dt class="font-2-l-b">Endereço</dt>
<dd>Praia Mansa nº 47</dd>
<dd>Rio de Janeiro - RJ</dd>
<dd>Procure a barraca vermelha</dd>
</dl>
<a class="font-2-r-b cor-4" href="https://www.google.com/maps/place/Rio+de+Janeiro,+RJ/@-22.9137531,-43.5860658,11z/data=!3m1!4b1!4m5!3m4!1s0x9bde559108a05b:0x50dc426c672fd24e!8m2!3d-22.9068467!4d-43.1728965" target="_blank" rel="noopener">Ver no mapa</a>
</div>
<div>
<dl class="font-2-s cor-3">
<dt class="font-2-l-b cor-3">Email & Telefone</dt>
<dd>contato@surfbot.com</dd>
<dd>21 99999-9999</dd>
</dl>
</div>
<div>
<dl class="font-2-s cor-3">
<dt data-semana="5, 6" data-horario="6, 14" class="horario font-2-l-b cor-3">Horário</dt>
<dd>De Sexta à Sábado</dd>
<dd>Das 06:00 às 14:00</dd>
</dl>
</div>
</div>
</div>
</section>
<footer class="footer-bg">
<div class="footer container">
<p class="font-2-r-b cor-6">Surfnet 2023 © Alguns direitos reservados.</p>
<img class="cor-6" src="./img/surfbot-icon-f.svg" alt="Minilogo surfbot">
</div>
</footer>
<script src="./main.js"></script>
</body>
</html>