-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwhy.html
311 lines (280 loc) · 15.4 KB
/
why.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
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="We empower both individuals and small businesses to increase their reach through educational content and digital products + services.">
<meta name="author" content="MPowheard Agency">
<title>MPowheard: Why | We see and push past the current reality.</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/loader.css" rel="stylesheet">
<link href="assets/css/mpowheard.css" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" type="image/png" href="./logo.png">
<!-- Schema -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "CollectionPage",
"name": "MPowheard Agency: Our Work & Why",
"description": "See samples of our work and learn about our why.",
"publisher": {
"@type": "Organization",
"name": "MPowheard Agency"
},
"review": {
"@type": "Review",
"author": "Effie of Mil's Diner",
"datePublished": "2021-04-01",
"reviewBody": "When shelter–in-place happened, the accessibility of my family's restaurant website was instrumental for viewing the menu hands-free. Melanie involved me in every detail of the design including colors, verbiage, and photographs for a clean website. She has been available for any requested updates, and stayed calm through my edits and re-edits. She also met with me and made a step-by-step written guide for me to edit items myself. For all the reasons stated and more, Melanie is very devoted to her work, personable, and a strong candidate for your website needs.",
"reviewRating": {
"@type": "Rating",
"bestRating": "5",
"ratingValue": "5",
"worstRating": "1"
}
}
}
</script>
</head>
<body id="why">
<!-- LOADER -->
<div id="bubblingG-wrapper">
<div class="bubblingG">
<span id="bubblingG_1">
</span>
<span id="bubblingG_2">
</span>
<span id="bubblingG_3">
</span>
</div>
</div>
<!-- -->
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="./index.html"><img src="assets/images/logo.png" alt="MPowheard logo linking to the home page" width="60px"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<img src="./assets/images/menu.png" height="25"/>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li id="nav-why" class="nav-item active" onclick="window.location.assign('./why.html')">
<a class="nav-link" href="./why.html">Why</a>
</li>
<li id="nav-opt" class="nav-item" onclick="window.location.assign('./options.html')">
<a class="nav-link" href="./options.html">Offers</a>
</li>
<li id="nav-connect" class="nav-item" onclick="window.location.assign('./connect.html')">
<a class="nav-link" href="./connect.html">Connect</a>
</li>
<li id="nav-blog" class="nav-item" onclick="window.location.assign('./blog/index.html')">
<a class="nav-link" href="./blog/index.html">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<section>
<div class="container">
<div class="row top-main">
<div class="col-12">
<h1 class="mt-5 slide-left"><span class="hotpink">MPowheard</span><br class="title-br"/> Agency</h1>
</div>
<div class="col-lg-6">
<h2 class="slide-left">WHY</h2>
</div>
<div class="col-lg-6">
<p class="anchor-nav">
<a class="anchor-link hotpink" id="subnav-story" href="#story-anchor">
Story<br class="hide-on-desktop"/>
</a>
<a class="anchor-link hotpink" id="subnav-work" href="#ourwork-anchor">
Our Work<br class="hide-on-desktop"/>
</a>
<a class="anchor-link hotpink pr-0" id="subnav-test" href="#test-anchor">
Testimonials<br class="hide-on-desktop"/>
</a>
</p>
</div>
</div>
<article class="row section white py-5 story">
<span id="story-anchor" style="margin-top:-5rem;"> </span>
<div class="col-12 section-header" id="story-title-container">
<h3 id="story" class="uppercase center">STORY</h3>
<hr/>
</div>
<div class="row section-content">
<section class="col-12 col-sm-6 section-content left-side">
<h4>WHAT WE DO</h4>
<p class="pt-2">
We empower both individuals and small businesses to increase their reach<sup>1</sup> through educational content and digital products + services.
</p>
<p class="mt-n2" style="line-height:0.1rem">
<small style="line-height:1rem"><sup>1</sup><i>reach</i> is open for reader interpretation, as it is applicable for achieving goals, increasing audience connections, etc.</small></p>
<h4>OUR VALUES</h4>
<ol id="values-list">
<li>Constantly striving to improve while still living in contentment with the present moment.</li>
<li>Act with uncompromising integrity and thus maintain consistent balance in our relationships.</li>
<li>Be weird and attract weird; collaborate to create genius!</li>
</ol>
</section>
<section class="col-12 col-sm-6 section-content right-side">
<h4>HOW WE GOT HERE</h4>
<p class="pt-2">
We have an incessant need to produce impactful work and a desire for freedom of professional style and growth. Unfortunately, the general workforce is not structured in ways that distribute these perks equally. Thus, we broke the cycle and made something that holds space for our success.
</p>
<p class="pt-4">
These are just the beginning stages but our vision reaches far beyond consulting. There is so much untapped potential. However, realistic, human-sized steps need to be taken to get there.
</p>
</section>
</div>
</article>
<article class="row section light-gray py-5">
<span id="ourwork-anchor" style="margin-top:-5rem;"> </span>
<div class="col-12 section-header" id="ourwork-title-container">
<h3 id="our-work" class="uppercase center">OUR WORK</h3>
<hr/>
</div>
<div class="col-12 section-content portfolo" id="portfolio">
<!-- <a class="ourwork-link" href="https://karinderyasatx.com" target="_blank">
<section class="our-work small-business" id="ourwork-link-1">
<div class="bg-overlay">
<h4 class="uppercase center">Small Business</h4>
<h5 class="pt-3 uppercase center px-2">Static Website</h5>
<p class="mt-n3 center"><b>Karinderya:</b> Family-owned and operated Filipino pop-up food truck in San Antonio, Texas.</p>
</div>
</section>
</a> -->
<a class="ourwork-link" href="https://milsdiner.com" target="_blank">
<section class="our-work small-business" id="ourwork-link-1">
<div class="bg-overlay">
<h4 class="uppercase center">Small Business</h4>
<h5 class="pt-3 uppercase center px-2">Static Website</h5>
<p class="mt-n3 center"><b>Mil's Diner:</b> Family-owned and operated Greek American diner out of Milpitas, California.</p>
</div>
</section>
</a>
<a class="ourwork-link" href="http://detailedbypanem.shop" target="_blank">
<section class="our-work ecommerce" id="ourwork-link-2">
<div class="bg-overlay">
<h4 class="uppercase center">E-Commerce</h4>
<h5 class="pt-3 uppercase center px-2">WordPress E-Commerce</h5>
<p class="mt-n3 center"><b>Detailed by Panem:</b> Custom carbon fiber auto parts and accessories.</p>
</div>
</section>
</a>
<a class="ourwork-link" href="https://www.instagram.com/cramcryptos/" target="_blank">
<section class="our-work branding" id="ourwork-link-4">
<div class="bg-overlay">
<h4 class="uppercase center">Branding</h4>
<h5 class="pt-3 uppercase center px-2">Instagram Content Templates</h5>
<p class="mt-n3 center"><b>Cram Cryptos:</b> Instagram account for blockchain & cryptocurrency education.</p>
</div>
</section>
</a>
</div>
</article>
<article class="row section light-yellow pt-5 extra-bottom">
<span id="test-anchor" style="margin-top:-5rem;"> </span>
<div class="col-12 section-header" id="test-title-container">
<h3 id="testimonials" class="uppercase center">TESTIMONIALS</h3>
<hr/>
</div>
<div class="col-12 section-content testimonial" id="review-container">
<div class="col-6 col-sm-1 arrow left-arrow desktop-review-slide-buttons carousel-control px-0 mx-0">
<i class="fa fa-angle-left fw-700 hotpink" aria-label="Previous review"></i>
</div>
<section class="col-12 col-sm-10 section-content carousel slide" data-ride="carousel" id="quote-carousel" style="min-height:380px;">
<p class="center quote">
<img src="assets/images/quote.png" id="quote-img" width="50px"/>
</p>
<div class="review-text item active" id="review-01">
<p class="center" id="mils-review">
When shelter–in-place happened, the accessibility of my family's restaurant website was instrumental for viewing the menu hands-free. Melanie involved me in every detail of the design including colors, verbiage, and photographs for a clean website. She has been available for any requested updates, and stayed calm through my edits and re-edits. She also met with me and made a step-by-step written guide for me to edit items myself. For all the reasons stated and more, Melanie is very devoted to her work, personable, and a strong candidate for your website needs.
</p>
<p class="text-right">
- Effie P. of Mil's Diner<br/>
<a href="https://milsdiner.com" target="_blank" class="hotpink">milsdiner.com</a>
</p>
</div>
<div class="review-text item" id="review-02">
<p class="center" id="eds-review" style="padding-top:3.5rem;">
I needed someone to audit my B2B site and help guide my outsourced developer in maintenance updates. Melanie did an amazing job from start to finish! After, she made design improvements and integrated a scheduling tool on my personal consulting site. It looks great and functions flawlessly.
</p>
<p class="text-right">
- Ed R. of Ahhh Massage<br/>
<a href="https://neurobodywork.com" target="_blank" class="hotpink">neurobodywork.com</a>
</p>
</div>
</section>
<div class="mobile-review-slide-buttons">
<div class="col-6 col-sm-1 arrow left-arrow mobile-reviews carousel-control px-0 mx-0" href="#quote-carousel" data-slide-to="prev">
<i class="fa fa-angle-left fw-700 hotpink" aria-label="Previous review"></i>
</div>
<div class="col-6 col-sm-1 arrow right-arrow mobile-reviews carousel-control px-0 mx-0" href="#quote-carousel" data-slide-to="next">
<i class="fa fa-angle-right fw-700 hotpink" aria-label="Next review"></i>
</div>
</div>
<div class="col-6 col-sm-1 arrow right-arrow desktop-review-slide-buttons carousel-control px-0 mx-0" href="#quote-carousel" data-slide-to="next">
<i class="fa fa-angle-right fw-700 hotpink" aria-label="Next review"></i>
</div>
</div>
</article>
</div>
</section>
<!-- Footer -->
<footer class="copyright footer fixed-bottom text-right">
<small class="pr-3">© <span class="cyan" id="currentYear">2021</span> MPowheard Agency</small>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="assets/js/mpowheard.js"></script>
<script src="assets/js/reviews.js"></script>
<script type="text/javascript">
// remove horizontal scroll
document.documentElement.style.overflowX = 'hidden';
</script>
<!-- GSAP Animations -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script>
gsap.fromTo(".navbar", {y:-200}, {duration: 1, y: 0});
gsap.fromTo(".footer", {y:200}, {duration: 1, y: 0});
gsap.fromTo(".slide-left", {opacity:0, x: -500}, {duration: 1, opacity:1, x: 0});
gsap.fromTo("#subnav-story", {opacity: 0, x: 500}, {delay: 1.2, duration: 1, opacity: 1, x: 0});
gsap.fromTo("#subnav-work", {opacity: 0, x: 500}, {delay: 1.4, duration: 1, opacity: 1, x: 0});
gsap.fromTo("#subnav-test", {opacity: 0, x: 500}, {delay: 1.6, duration: 1, opacity: 1, x: 0});
gsap.fromTo("#nav-why", {opacity: 0, x: 500}, {delay: 1.2, duration: 1, opacity: 1, x: 0});
gsap.fromTo("#nav-opt", {opacity: 0, x: 500}, {delay: 1.4, duration: 1, opacity: 1, x: 0});
gsap.fromTo("#nav-connect", {opacity: 0, x: 500}, {delay: 1.6, duration: 1, opacity: 1, x: 0});
gsap.fromTo("#nav-blog", {opacity: 0, x: 500}, {delay: 1.8, duration: 1, opacity: 1, x: 0});
gsap.fromTo("#story-title-container", {opacity: 0}, {delay: 2, duration: 1, opacity: 1});
gsap.fromTo(".left-side", {opacity:0, x: -500}, {delay: 2.2, duration: 1, opacity:1, x: 0});
gsap.fromTo(".right-side", {opacity:0, x: 500}, {delay: 2.4, duration: 1, opacity:1, x: 0});
// Fix these scroll-based animations later
gsap.fromTo("#ourwork-title-container", {opacity: 0}, {delay: 2.6, duration: 1, opacity: 1});
gsap.fromTo("#ourwork-link-1", {opacity: 0}, {delay: 2.6, duration: 1, opacity: 1});
gsap.fromTo("#ourwork-link-2", {opacity: 0}, {delay: 2.6, duration: 1, opacity: 1});
gsap.fromTo("#ourwork-link-3", {opacity: 0}, {delay: 2.6, duration: 1, opacity: 1});
gsap.fromTo("#ourwork-link-4", {opacity: 0}, {delay: 2.6, duration: 1, opacity: 1});
gsap.fromTo("#test-title-container", {opacity: 0}, {delay: 2.8, duration: 1, opacity: 1});
gsap.fromTo("#review-container", {opacity: 0}, {delay: 3, duration: 1, opacity: 1});
</script>
<script>
$(window).on("load",function(){
$("#bubblingG-wrapper").fadeOut()
});
</script>
</body>
</html>