/
home.html
221 lines (189 loc) · 10.3 KB
/
home.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Meg's Moments</title>
<link rel="stylesheet" type="text/css" href="styles/core-styles.css" />
<link rel="stylesheet" type="text/css" href="styles/section-styles.css" />
<link rel="stylesheet" type="text/css" href="styles/form-styles.css" />
<link rel="stylesheet" type="text/css" href="styles/animation-styles.css" />
<link rel="stylesheet" type="text/css" href="styles/media-queries.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,700italic,900,400italic|Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- ////////////////////////////////////////////////////////// -->
<!-- Header: Nav bar and main photo -->
<!-- ////////////////////////////////////////////////////////// -->
<header class="no-select">
<!-- Nav bar -->
<nav class="fade-in">
<div id="logo">
<div id="logo-circle">
<div id="logo-mm"></div>
<img id="logo-mm-mobile" src="img/core/mm-logo-w-o.png" alt="" />
</div>
<div id="logo-name">Meg's Moments</div>
</div>
<div id="nav-options">
<ul>
<li id="nav-about"><span>About</span></li>
<li id="nav-gallery"><span>Gallery</span></li>
<li id="nav-information"><span>Info</span></li>
<li id="nav-contact"><span>Let's Talk</span><span id="hover-circle"></span></li>
</ul>
</div>
</nav>
<!-- Title overlaying main photo -->
<div class="title-container scroll-in" id="header-title-container">
<i class="fa fa-angle-down" id="scroll-to-about" ></i>
<div class="title" id="header-title">
<h2>A MOMENT</h2>
<h3><em>forever captured</em></h3>
</div>
</div>
<!-- Background Image -->
<div id="header-background-image"></div>
</header>
<!-- ////////////////////////////////////////////////////////// -->
<!-- About: Second photo with about section -->
<!-- ////////////////////////////////////////////////////////// -->
<section id="section-about">
<img src="img/core/megan-about.jpg" class="no-select" id="profile-photo" alt="" />
<div class="title-container scroll-in" id="about-title-container">
<i class="fa fa-angle-down" id="scroll-to-gallery" ></i>
<div class="title" id="about-title">
<h2>MEET MEG</h2>
<p>Hi! I’m Megan Reymann Brauner, affectionately know as Meg. I love the color purple; The Office tv show; elephants, animals, and their conservation; feminism (I’m from a long line of strong women); loom knitting (it’s the easiest); crosswords; older adults and aging (my Master’s is in Gerontology); medical billing (a day job that I love), my home state of Maryland and its beautiful Eastern Shore and Chesapeake Bay.</p>
<p>Above all, I am largely defined and expressed through FAMILY - the greatest passion of my life. My closest family ring consists of my co-adventurer and husband, Jordan, and our little monster man, Wills (... a five-year old rescued English Toy Spaniel).</p>
<p>I am also a daughter, sister, grandaughter, one of over 40 cousins, and an immensely proud Aunt of six nieces and a new nephew (with more on the way)! My passion for photography naturally grew from my immersion with the beautiful family around me. The wish to capture moments was irresisitible when the first littles ones started entering our lives… and since then my desire has only grown. I so enjoy capturing the tender, beautiful, hilarious, awkward, and precious moments of my own family, and feel honored and blessed when given the opportunity to share that gift with others.</p>
</div>
</div>
</section>
<!-- ////////////////////////////////////////////////////////// -->
<!-- Gallery -->
<!-- ////////////////////////////////////////////////////////// -->
<section id="section-gallery">
<!-- Gallery Title -->
<div class="title-container scroll-in" id="gallery-title-container">
<i class="fa fa-angle-down" id="scroll-to-information" ></i>
<div class="title" id="gallery-title">
<img class="no-select" id="gallery-mm" src="img/core/mm-logo.png" alt="" />
<h2>GALLERY</h2>
<p>Children que volore pro quatiunt volore pos aboressint, ut ilita volor.</p>
</div>
</div>
<!-- Maximized Image -->
<div id="full-image"><img src="" class="no-select" alt="" /></div>
<!-- Photo Gallery -->
<div id="photo-gallery">
<div class="thumbnail scroll-in quick no-select"><img src="http://www.megsmoments.com/img/gallery/img-5028.jpg" class="portrait" alt="" /></div>
<div class="thumbnail scroll-in quick no-select"><img src="http://www.megsmoments.com/img/gallery/img-5414.jpg" alt="" /></div>
<div class="thumbnail scroll-in quick no-select"><img src="http://www.megsmoments.com/img/gallery/img-8185.jpg" alt="" /></div>
<div class="thumbnail scroll-in quick no-select"><img src="http://www.megsmoments.com/img/gallery/img-9513.jpg" class="portrait" alt="" /></div>
<div class="thumbnail scroll-in quick no-select"><img src="http://www.megsmoments.com/img/gallery/img-jacob.jpg" alt="" /></div>
<div class="thumbnail scroll-in quick no-select"><img src="http://www.megsmoments.com/img/gallery/img-foot.jpg" class="portrait" alt="" /></div>
<div class="thumbnail scroll-in quick no-select"><img src="http://www.megsmoments.com/img/gallery/img-9532.jpg" alt="" /></div>
<div class="thumbnail scroll-in quick no-select"><img src="http://www.megsmoments.com/img/gallery/img-dsc0105.jpg" alt="" /></div>
</div>
</section>
<!-- ////////////////////////////////////////////////////////// -->
<!-- Information -->
<!-- ////////////////////////////////////////////////////////// -->
<section id="section-information">
<div id="information-border">
<!-- <div>
<p>I would never want cost to be a barrier for someone that wishes to have their incredibly precious moments captured in photographs. I will put hours of creative time and talent into each family’s project, and seek to offer pricing that is fair, simple, and not cost-prohibitive for new families (or established ones :)</p>
<p>My price packages currently range between $200 and $400 for a session - and that is an all-inclusive price that includes our time together (ranging from 30 minutes to 2 hours), editing and polishing of 20-40 images (depending upon the session), and high-resolution digital copies of the images so that you can save, print, and share to your heart’s content --- you will have full rights to all of the images.</p>
<p>I offer maternity, newborn, and family sessions. I most certainly love working with pets, little ones, older children, older adults, and the full spectrum of family - however YOU define it.</p>
</div> -->
</div>
</section>
<!-- ////////////////////////////////////////////////////////// -->
<!-- Contact -->
<!-- ////////////////////////////////////////////////////////// -->
<section id="section-contact">
<div id="contact-logo">
<img src="img/core/mm-logo-circle.png" class="no-select" alt="" />
</div>
<div class="title scroll-in quick" id="contact-title">
<h2>LET'S TALK</h2>
<h4><em>Conse quae eslb us ame ist ihil us am nonem lab.</em></h4>
</div>
<div class="scroll-in quick" id="contact-form">
<form action="mail.php" method="POST">
<!-- Row 1 -->
<div class="form-row" id="form-name">
<div class="form-column">
<label>First Name *</label>
<input name="firstname" placeholder="Jane">
</div>
<div class="form-column">
<label>Last Name *</label>
<input name="lastname" placeholder="Doe">
</div>
</div>
<!-- Row 2 -->
<div class="form-row" id="form-email">
<div class="form-column">
<label>Email Address *</label>
<input name="email" placeholder="jane@janedoe.com">
</div>
</div>
<!-- Row 3 -->
<div class="form-row" id="form-phone">
<div class="form-column">
<label>Phone Number</label>
<input name="phone" placeholder="(123)456-7890">
</div>
</div>
<!-- Row 4 -->
<div class="form-row" id="form-dropdown">
<div class="form-column">
<label>Project type</label>
<select name="pType" size="1">
<option value="Select">Select project type</option>
<option value="Newborn">Newborn</option>
<option value="Family">Family</option>
<option value="Pets">Pets</option>
<option value="Elderly">Elderly</option>
<option value="Other">Other</option>
</select>
<div id="form-select-arrows">
<i class="fa fa-sort" aria-hidden="true"></i>
</div>
</div>
</div>
<!-- Row 5 -->
<div class="form-row" id="form-message">
<div class="form-column">
<label>Message *</label>
<textarea name="message" placeholder="Let me know how I can help you."></textarea>
</div>
</div>
<div class="form-row" id="form-submit">
<input id="submit" name="submit" type="submit" value="SEND">
</div>
</form>
</div>
</section>
<!-- ////////////////////////////////////////////////////////// -->
<!-- Footer -->
<!-- ////////////////////////////////////////////////////////// -->
<footer>
<div class="footer-column-left">
<p>© 2016 Meg's Moments. All rights reserved. <a href="mailto:meg@megsmoments.com">meg@megsmoments.com</a></p>
</div>
<div class="footer-column-right">
<span id="footer-about">About</span>
<span id="footer-gallery">Gallery</span>
<span id="footer-information">Info</span>
<div id="scroll-to-top"><i class="fa fa-angle-up"></i></div>
</div>
</footer>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>
<!-- Script files -->
<script src="scripts/app.js"></script>
</body>
</html>