-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-2.html
279 lines (246 loc) · 13 KB
/
index-2.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
<!DOCTYPE html>
<html>
<!--HEAD-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<meta name="google-site-verification" content="tLskusxOM581Dv9je41Rbd37Hf1eoFXTa0JOCy688y4" />
<meta name="description"
content="Webside.io is an industry leading solution for web development, at a price that won't break the bank. We're here to support small businesses, and anyone that may need a modern, on-brand portfolio/brochure website for their business." />
<meta name="robots" content="index, follow" />
<meta name="keywords"
content="webdevelopment, build_a_website, website, agency, web, development, design, design_company" />
<meta name="author" content="jhardyjhardy + angellemarie" />
<link rel="stylesheet" type-"text/css" href="resources/css/reset.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="shortcut icon" href="resources/images/logo%20blue.png" type="image/x-icon">
<title>broomstick</title>
</head>
<!--END HEAD-->
<!--BODY-->
<body>
<!--PAGE CONTAINER-->
<div class="container page column">
<!--HEADER CONTAINER-->
<div class="container column pageWidth" id="headerContainer">
<!--HEADER SITE CONTAINER-->
<div class="container row siteContainer" id="headerSiteContainer">
<!--HEADER LOGO CONTAINER-->
<a href="index-2.html" class="container column hContainer" id="headerLogoContainer">
<img class="object logo" id="headerMainLogo" src="resources/images/logo.png">
<img class="object logo" id="headerScrollLogo" src="resources/images/logo.png">
</a>
<!-- HEADER NAV CONTAINER -->
<div class="navContainer hContainer container row" id="headerNavContainer">
<nav class="container headerNav row" id="headerNav">
<p class="object navItem" id="navItem1"><a href="index-2.html">Home</a></p>
<p class="object navItem" id="navItem2"><a href="pricing.html">Pricing</a></p>
<p class="object navItem" id="navItem3"><a href="about.html">About Us</a></p>
</nav>
<a class="button outline container" id="contactButton" href="contact.html">
<div class="container column" id="buttonOutline">
<p class="buttonText object" id="contactButtonText">Contact</p>
</div>
</a>
<div class="mobileNav container column" id="mobileNavBurger" onclick="openNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div> <!-- END HEADER NAV -->
</div> <!-- END HEADER SITE CONTAINER -->
</div> <!-- END HEADER CONTAINER -->
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="index-2.html">Home</a>
<a href="pricing.html">Pricing</a>
<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>
</div>
</div>
<!-- BANNER CONTAINER -->
<div class="banner container pageWidth column" id="banner">
<!-- BANNER SITE CONTAINER -->
<div class="container column siteContainer" id="bannerTextContainer">
<h1 class="object text mainHeadline" id="headlineTop">We build websites around <strong>
<div id="banana">your brand.
</strong>
</div>
</h1>
<!-- <h1 class="object text mainHeadline" id="headlineBottom">So do websites.</h1> -->
</div> <!-- END BANNER SITE CONTAINER -->
<i class="fa fa-angle-down fa-3x" id="arrowBoy"></i>
</div> <!-- END BANNER CONTAINER -->
<!-- FOLD ONE CONTAINER redo this with scss nesting method **** messy af with all these Id's -->
<div class="container column pageWidth foldOne" id="foldOneContainer">
<!-- FOLD ONE SITE CONTAINER -->
<div class="container column siteContainer" id="foldOneSiteContainer">
<div class="container column" id="foldOneTextContainer">
<h2 class="object f1text text" id="f1TopText">We design, create, and develop websites that embody your brand,
and propel your business forward.</h2>
<h2 class="object f1text text" id="f1BottomText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
</div>
<!-- FOLD ONE SQUARES -->
<div class="container column squaresContainer" id="foldOneBoxes">
<div class="container row squaresContent" id="threeSquares">
<!-- SQUARE ONE -->
<div class="container column featureSquare" id="featureOne">
<img class="object squareIcon" id="featureOneIcon" src="resources/images/customizedIcon.png">
<p class="object squareTextMobile" id="mobileSquareText1">Customized</p>
</div>
<!-- SQUARE TWO -->
<div class="container column featureSquare" id="featureTwo">
<img class="object squareIcon" id="featureTwoIcon" src="resources/images/userFocusedIcon.png">
<p class="object squareTextMobile" id="mobileSquareText2">User-Focused</p>
</div>
<!-- SQUARE THREE -->
<div class="container column featureSquare" id="featureThree">
<img class="object squareIcon" id="featureThreeIcon" src="resources/images/affordableIcon.png">
<p class="object squareTextMobile" id="mobileSquareText3">Affordable</p>
</div>
</div>
<!-- SQUARE SUB-WORDS -->
<div class="container row squareWords" id="squareWordsRow">
<!-- SUB-WORDS 1 -->
<div class="container column squareInfo" id="squareInfo1">
<div class="object squareInfoText" id="squareInfoTop1">
<p>Customized</p>
</div>
<div class="object squareInfoText" id="squareInfoBottom1">
<p>Our site are tailored to your brand your vision. Every step of the process is built around ensuring you
end up with a final product perfectly crafted for your needs.</p>
</div>
</div>
<!-- SUB-WORDS 2 -->
<div class="container column squareInfo" id="squareInfo2">
<div class="object squareInfoText" id="squareInfoTop2">
<p>User-Focused</p>
</div>
<div class="object squareInfoText" id="squareInfoBottom2">
<p>The end user is never left out of the equation. We make sure every element of our sites are built to
the highest modern standards of UX design.</p>
</div>
</div>
<!-- SUB-WORDS 3 -->
<div class="container column squareInfo" id="squareInfo3">
<div class="object squareInfoText" id="squareInfoTop3">
<p>Affordable</p>
</div>
<div class="object squareInfoText" id="squareInfoBottom3">
<p>The site your business needs doesn't have to break the bank. Our focus on brochure/portfolio style
sites allows us to create sites efficiently and on budget. Our sites are inexpensive to host and
maintain, and can be built on nearly any budget.</p>
</div>
</div>
</div>
</div>
</div> <!-- END FOLD ONE SITE CONTAINER -->
</div> <!-- END FOLD ONE CONTAINER -->
<!-- TEXT AND BUTTON PAGE CONTAINER -->
<div class="container column pageWidth textButtonContainer" id="textButtonContainer1">
<!-- TEXT AND BUTTON SITE CONTAINER -->
<div class="container column siteContainer textButtonSiteContainer" id="textButtonSiteContainer1">
<!-- SECTION TITLE -->
<h2 class="object textButtonTitle" id="textButtonTitle1">Our websites are priced <span>around you.</span></h2>
<p class="object textButtonParagraph" id="textButtonParagraph1">We make it our business to provide companies, both
big and small, with professional, yet affordable, websites. Our transparent pricing structure lets you know the
full scope and cost of your project, before any commitment is required.</p>
<a href="#" class="container column button" id="textButtonButton">
<p class="object buttonText" id="textButtonButtonText">Learn More</p>
</a>
</div> <!-- END SITE CONTAINER -->
</div> <!-- END PAGE CONTAINER -->
<!-- RIGHT FIT CONTAINER -->
<div class="container column pageWidth blue06 foldFour" id="foldFourContainer">
<!-- RIGHT FIT SITE CONTAINER -->
<div class="container column siteContainer" id="foldFourSiteContainer">
<div class="logoContainer imageContainer container column" id="logoRightFitContainer">
<img class="logo icon image object" id="logoRightFit" src="resources/images/logo.png">
</div>
<h2 class="object text" id="rightFitTop">Think we might be the right fit?</h2>
<p class="objec text" id="rightFitParagraph">Don't hesitate to get in touch. We're more than happy to speak to you
about what you're looking for, and how we can help. If we're not the right solution, we'll direct you to the
best fit for your needs. Plus, consultations and quotes are free.</p>
<a href="contact.html" class="container column button" id="contactBottomButton">
<p class="object buttonText text" id="bottomButtonText">Let's Work Together</p>
</a>
</div> <!-- END RIGHT FIT SITE CONTAINER -->
</div> <!-- END RIGHT FIT CONTAINER -->
<!-- FOOTER CONTAINER -->
<footer class="footer container pageWidth column" id="footerContainer">
<!-- FOOTER SITE CONTAINER -->
<div class="container siteContainer row" id="footerSiteContainer">
<!-- FOOTER LEFT SIDE -->
<div class="container column" id="footerLeftContainer">
<div class="container column" id="footerLeftTop">
<img class="footerLogo object" id="footerLogoIcon" src="resources/images/logo.png">
</div>
<p class="object text copyright" id="footerCopyright"> © <a href="index.html">broomstick.cc</a></p>
</div>
<!-- FOOTER NAV -->
<div class="container column" id="footerNavContainer">
<nav class="footerNav container row" id="footerNav">
<span class="footerNavItem object text"><a href="pricing.html">Pricing</a></span>
<span class="footerNavItem object text"><a href="about.html">About Us</a></span>
<span class="footerNavItem object text"><a href="contact.html">Contact</a></span>
<span class="footerNavItem object text"><a href="terms.html">Terms</a></span>
</nav>
</div>
</div> <!-- END FOOTER SITE CONTAINER -->
</footer> <!-- END FOOTER CONTAINER -->
</div> <!-- END PAGE CONTAINER -->
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-NQQ99V7');
</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NQQ99V7" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- FIREBASE -->
<script src="https://www.gstatic.com/firebasejs/4.8.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyDmHohRLVQQKpL7m1pYpCeC7XOSxzwb9Yc",
authDomain: "webside-1110a.firebaseapp.com",
databaseURL: "https://webside-1110a.firebaseio.com",
projectId: "webside-1110a",
storageBucket: "webside-1110a.appspot.com",
messagingSenderId: "1027742748230"
};
firebase.initializeApp(config);
</script>
<!-- END FIREBASE -->
<!-- FONT AWESOME -->
<script src="https://use.fontawesome.com/be62200700.js"></script>
<!-- MAIN JS FILE -->
<script src="resources/js/main.js"></script>
<!-- SCROLLMAGIC -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<!-- END SCROLLMAGIC -->
<!-- JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body> <!-- END BODY -->
<!-- Mirrored from webside.io/ by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 07 Dec 2019 20:41:35 GMT -->
</html>