-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
282 lines (278 loc) · 14 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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Montessori Lab School</title>
<meta name="description" content="Montessori Lab School of Chesapeake Virginia">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./responsive.css">
<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=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Sacramento&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/fav-icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/fav-icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/fav-icon/favicon-16x16.png">
<link rel="manifest" href="./assets/fav-icon/site.webmanifest">
<script src="https://kit.fontawesome.com/3fde3b7a1f.js" crossorigin="anonymous"></script>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GM7D4Q3929"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-GM7D4Q3929');
</script>
<body>
<div id='float' class="floating-btn" onclick="openFloat()">
<div>Ready to Enroll?</div>
<div class="float-icons">
<a class='admin-icon' href="tel:7575488762" style="font-size: 3rem;"><i class="fa-solid fa-phone"></i></a>
<a class='admin-icon' target="_blank" href="./contact.html"><i class="fa-solid fa-file-lines"></i></a>
</div>
</div>
<header>
<nav>
<ul class="nav-bar" id="topNav">
<img class='logo' src="./assets/fav-icon/apple-touch-icon.png" alt="">
<li class="nav-logo ">
<a class='active hover-underline-animation' href="./index.html">
<span class="long"> Montessori Lab School </span>
<span class="short"> MLS </span>
</a>
</li>
<li class="phone-nav"><a href="tel:7575488762">(757) 548-8762</a> </li>
<div class="menu">
<li class="home-sub menu-items hover-underline-animation"><a href="./index.html">Home</a></li>
<li class="menu-items hover-underline-animation"><a href="./programs.html">Curriculum</a>
<ul class="sub-nav-items">
<li><a href="./programs.html#pre-school">Pre-School Programs</a></li>
<li><a href="./programs.html#elementary">Elementary Program</a></li>
<li><a href="./programs.html#admission">Admissions Process</a></li>
</ul>
</li>
<li class="menu-items hover-underline-animation"><a href="./parents.html">Parents</a>
<ul class="sub-nav-items">
<li><a href="./parents.html#what-is-montessori">What is Montessori?</a></li>
<li><a href="./parents.html#calender">School Calendar</a></li>
<li><a href="./parents.html#reading">Recommended Reading</a></li>
</ul>
</li>
<li class="menu-items hover-underline-animation"><a href="./contact.html">Contact</a></li>
</div>
<li class="icon">
<a href="javascript:void(0);" class="icon" onclick="navBarMobile()">
<i class="fa fa-bars"></i>
</a>
</li>
</ul>
</nav>
</header>
<section class="head-banner">
<div class="head-overlay">
<div class="head-content">
<h2 class="main-header">Montessori Lab School</h2>
<h4>Serving Hampton Roads since 1977</h4>
<div class="mission-statements">
<p>
We offer children a <br/>
<strong>Bi-lingual</strong>,
<strong>Christian-Oriented </strong> <br/>
Learning Environment, that is <br/>
<em>Nurturing</em>, <em>Consistent</em>,
<em>Safe</em>, & <em>Peaceful.</em>
</p>
<p>
We serve the <br/>
<strong>Total Developmental Needs</strong>
<br/>of children, building <br/>
<em> Academic</em>, <em>Emotional</em>,
<em>Moral</em> & <em>Social Skills. </em>
</p>
</div>
</div>
</div>
</section>
<section class="cards">
<div class="container card-holder">
<div class="feature-card feature-1" data-open="1">
<div class="icon-wrapper">
<i class="fa-solid fa-earth-asia"></i>
</div>
<h5>International Focus</h5>
<p>Bilingual: <br/> English & Spanish</p>
<p>Cultural Studies</p>
<p>Multi-Cultural Events</p>
<div class="photo-tag">Click for Photos</div>
</div>
<div class="feature-card feature-2" data-open="2">
<div class="icon-wrapper">
<i class="fa-solid fa-masks-theater"></i>
</div>
<h5>Performing Arts</h5>
<p>Music: <br/> Instrumental & Vocal</p>
<p>Choregraphy</p>
<p>Drama</p>
<div class="photo-tag">Click for Photos</div>
</div>
<div class="feature-card feature-3" data-open="3">
<div class="icon-wrapper">
<i class="fa-solid fa-people-group"></i>
</div>
<h5>Character Building</h5>
<p>Leadership & Communication</p>
<p>Citizenship & Community Service</p>
<p>Emotional Development</p>
<div class="photo-tag">Click for Photos</div>
</div>
<div class="feature-card feature-4" data-open="4">
<div class="icon-wrapper">
<i class="fa-solid fa-graduation-cap"></i>
</div>
<h5>Academic Studies</h5>
<p>Sciences & Mathematics</p>
<p>Language Arts: Reading and Writing</p>
<p>Geography & History</p>
<div class="photo-tag">Click for Photos</div>
</div>
<div class="click-cover">
<h4 class="click-header"> Click Cards for Photos</h4>
</div>
<div class="card-cover">
<h4 class="sub-header"> Our Areas of Focus</h4>
</div>
</section>
<div class="pop-up-modals-container"></div>
<section class="white-space"></section>
<section>
<div class="container dots">
<div class="dots-header">Adding to the future success of your child</div>
<div class="dots-flex">
<div class="dots-letter">
<h1>D</h1>
<span>Decision Making</span>
</div>
<div class="dots-letter">
<h1>O</h1>
<span>Organization</span>
</div>
<div class="dots-letter">
<h1>T</h1>
<span>Time Management</span>
</div>
<div class="dots-letter">
<h1>S</h1>
<span>Self Control</span>
</div>
</div>
</div>
</section>
<section class="white-space"></section>
<section class="quote-section">
<div class="quote-photo photo-1">
<div class="photo-overlay">
<div class="quote-container">
<div class="quote">
"The goal of early childhood education should be to activate the child's own natural desire to learn."
</div>
<div class="author">-Dr. Maria Montessori</div>
</div>
</div>
</div>
</section>
<section class="white-space"></section>
<h4 class="sub-header">Our Programs</h4>
<section class="pre-school programs">
<div class="pre-school-info">
<h4>Pre-School Programs</h4>
<h5>Ages 2½ - 5</h5>
<p>Montessori Lab School provides a non-conventional Early Childhood Education through our half- and full-day bilingual programs for three to five year olds. <br/>Our programs foster the love of learning, self-reliance and independence.</p>
<button class="btn pre-k-btn"><a href="./programs.html#pre-school">Learn More</a></button>
</div>
<div class="img-wrapper"></div>
</section>
<section class="elementary programs">
<div class="elementary-info">
<h4>Elementary Program</h4>
<h5>Ages 6-11</h5>
<p>At Montessori Lab School, we provide older children a full-day Elementary Education program that is designed to meet the intellectual, emotional and cultural needs of six to ten year olds.</p>
<button class="btn elementary-btn"><a href="./programs.html#elementary">Learn More</a></button>
</div>
<div class="img-wrapper"></div>
</section>
<section class="white-space responsive-space"></section>
<div class="value-statement">Hampton Road's Longest Running Montessori School.
</div>
<section class="credentials">
<img class='flex-header' src="./assets/logo.png" alt="">
<div class="flex-container">
<img src="./assets/45 Year Badge.png" alt="">
<img src="./assets/namc-badge.png" alt="">
</div>
</section>
<section class="white-space"></section>
<section id="admission">
<h3 class="sub-header">Admission Process</h3>
<div class="admission-process">
<div class="step-bubble step-1">
<h3>Step 1</h3>
<div class="bubble-icon-wrapper">
<a class='admin-icon' href="tel:7575488762"><i class="fa-solid fa-phone"></i></a>
<a class='admin-icon' target="_blank" href="./contact.html"><i class="fa-solid fa-file-lines"></i></a>
</div>
<div class="description">Call or Fill Out Contact Form</div>
</div>
<div class="step-bubble step-2">
<h3>Step 2</h3>
<div class="bubble-icon-wrapper">
<i class="fa-regular fa-calendar-days"></i>
</div>
<div class="description">Schedule Parent Interview & Tour</div>
</div>
<div class="step-bubble step-3">
<h3>Step 3</h3>
<div class="bubble-icon-wrapper">
<i class="fa-solid fa-clipboard-question"></i>
</div>
<div class="description"> Application and Questionnaire</div>
</div>
<div class="step-bubble step-4">
<h3>Step 4</h3>
<div class="bubble-icon-wrapper">
<i class="fa-regular fa-calendar-days"></i>
</div>
<div class="description">Schedule Student Interview</div>
</div>
</div>
<a target="_blank" href="./contact.html"><button class="btn admission-btn">Start the Process</button></a>
</section>
<footer>
<div>
<h5>Address</h5>
<address>
<a target="_blank" href="https://www.google.com/maps/place/Montessori+Lab+School.com/@36.7605799,-76.2538223,17z/data=!3m2!4b1!5s0x89babca310d77bcb:0xc9bf75806c7ec709!4m5!3m4!1s0x89babca310645dcd:0x31bca33e4d08de74!8m2!3d36.7605756!4d-76.2516336">
<div>1101 Madison Plaza</div>
<div>Chesapeake, VA 23320</div>
</a>
</address>
</div>
<div class="footer-phone">
<div><a href="tel:7575488762">757-548-8762</a> </div>
</div>
<div class="social-icon">
<a target="_blank" href="https://www.facebook.com/montessorilabschool">
<i class="fa-brands fa-square-facebook"></i>
</a>
</div>
<div class="footer-hours">
<h5>Hours of Operation</h5>
<div>Monday-Friday</div>
<div>8:30 a.m. - 4:00 p.m.</div>
<div>September-June</div>
</div>
</footer>
<script src="./main.js" async defer></script>
</body>
</html>