-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample-reference.html
226 lines (204 loc) · 11.1 KB
/
sample-reference.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Financer - New Amazing HTML5 Template</title>
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/responsee.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<link rel="stylesheet" href="css/lightcase.css">
<!-- CUSTOM STYLE -->
<link rel="stylesheet" href="css/template-style.css">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&display=swap" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/validation.js"></script>
</head>
<!--
You can change the color scheme of the page. Just change the class of the <body> tag.
You can use this class: "primary-color-white", "primary-color-yellow", "primary-color-red", "primary-color-orange", "primary-color-pink", "primary-color-purple", "primary-color-blue", "primary-color-light-blue", "primary-color-aqua", "primary-color-green", "primary-color-dark"
-->
<!--
Each element is able to have its own background or text color. Just change the class of the element.
You can use this class:
"background-white", "background-yellow", "background-red", "background-orange", "background-pink", "background-purple", "background-blue", "background-light-blue", "background-aqua", "background-green", "background-grey", "background-sand", "background-primary"
"text-white", "text-yellow", "text-red", "text-orange", "text-pink", "text-purple", "text-blue", "text-light-blue", "text-aqua", "text-green", "text-primary"
-->
<!--
If you want animated elements after scroll, add class "animated-element" or "animated-element slow" (for slower animation) to the elements.
-->
<!--
If you want the hover zoom animation effect, wrapp the element to <div class="hover-zoom"> ... </div>
-->
<body class="size-1280 primary-color-red border-dark">
<!-- Page overlay with fade out effect after page load. Try to change class background-dark to another color (for example white or primary color) -->
<div id="page-overlay" class="background-dark"></div>
<!-- HEADER -->
<header role="banner" class="position-absolute">
<!-- Top Bar -->
<div class="top-bar full-width hide-s hide-m">
<div class="right">
<a href="tel:080055544444444" class="text-white text-primary-hover">more info: 0800 555 444</a> <span class="sep">|</span> <a href="mailto:[email protected]" class="text-white text-primary-hover">write us: [email protected]</a>
</div>
</div>
<!-- Top Navigation -->
<nav class="background-transparent background-transparent-hightlight full-width sticky">
<div class="s-12 l-2">
<a href="index.html" class="logo">
<!-- Logo White Version -->
<img class="logo-white" src="img/logo.svg" alt="">
<!-- Logo Dark Version -->
<img class="logo-dark" src="img/logo-dark.svg" alt="">
</a>
</div>
<div class="top-nav s-12 l-10">
<ul class="right chevron">
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a>Products</a>
<ul>
<li><a>Products 1</a>
<ul>
<li><a>Products 1 A</a></li>
<li><a>Products 1 B</a></li>
</ul>
</li>
<li><a>Products 2</a></li>
</ul>
</li>
<li><a href="references.html">Our Work</a></li>
<li><a href="our-services.html">Our Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN -->
<main role="main">
<article>
<!-- Nav background -->
<div class="section-head-post background-dark"></div>
<!-- Section 1 -->
<section class="section background-white">
<div class="line">
<div class="margin2x">
<!-- Images -->
<div class="s-12 m-8 l-9">
<img class="full-img margin-bottom" src="img/portfolio/portfolio-03.jpg" alt=""/>
<img class="full-img margin-bottom" src="img/portfolio/portfolio-07.jpg" alt=""/>
<img class="full-img margin-bottom" src="img/portfolio/portfolio-04.jpg" alt=""/>
<img class="full-img margin-bottom" src="img/portfolio/portfolio-05.jpg" alt=""/>
</div>
<!-- Text -->
<div class="s-12 m-4 l-3">
<!-- Header -->
<header class="line">
<h1 class="text-strong text-size-30">
Investigationes demonstrav lectores anteposuerit
</h1>
<p>November 12 <b>2021</b></p>
<hr class="break">
</header>
<p>
<strong>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis.
</strong>
</p>
<p>
Hendrerit in vulputate duis autem vel eum iriure dolor
in velit esse molestie consequat, vel illum dolore nulla facilisis.
Vulputate duis autem vel eum iriure dolor in velit esse molestie consequat, illum nulla facilisis.
</p>
<a href="references.html" class="button background-primary text-white"><i class="icon-chevron_right"></i> Our Work</a>
</div>
</div>
</div>
</section>
<section class="section background-parallax-container">
<div class="line">
<div class="s-12 m-12 l-7 xl-5 text-right">
<h2 class="text-s-size-40 text-m-size-60 text-size-90 text-line-height-1 text-extra-strong text-uppercase text-white margin-bottom-30">
We are here for you <span class="text-red">24/7</span>
</h2>
<p class="text-white margin-bottom-40">
Hendrerit in vulputate duis autem vel eum iriure dolor in velit esse molestie consequat, vel illum dolore nulla facilisis. Vulputate duis autem vel eum iriure dolor in velit esse molestie consequat, illum nulla facilisis.
</p>
<a href="contact.html" class="button background-primary right">Contact Us</a>
</div>
</div>
<div class="background-parallax" style="background-image:url(img/parallax-06.jpg)"></div>
<!-- red full width arrow object -->
<img class="arrow-object" src="img/object-red.svg" alt="">
</section>
</article>
</main>
<!-- FOOTER -->
<footer>
<!-- Social -->
<div class="background-primary padding text-center">
<a href="/"><i class="icon-facebook_circle text-size-30 text-white"></i></a>
<a href="/"><i class="icon-twitter_circle text-size-30 text-white"></i></a>
<a href="/"><i class="icon-google_plus_circle text-size-30 text-white"></i></a>
<a href="/"><i class="icon-instagram_circle text-size-30 text-white"></i></a>
<a href="/"><i class="icon-linked_in_circle text-size-30 text-white"></i></a>
</div>
<!-- Main Footer -->
<section class="section background-dark">
<div class="line">
<div class="margin2x">
<div class="hide-s hide-m hide-l xl-2">
<img src="img/footer.jpg" alt="">
</div>
<div class="s-12 m-6 l-3 xl-3">
<h4 class="text-white text-strong">Our Mission</h4>
<p>
Veri fastidii consectetuer ius in, eum alii dicunt omnium eu. Wisi nostrud equidem ut usu. Deleniti pertinacia eu est, te his soluta quaestio pericula vulputate velit.
</p>
</div>
<div class="s-12 m-6 l-3 xl-2">
<h4 class="text-white text-strong margin-m-top-30">Useful Links</h4>
<a class="text-primary-hover" href="sample-post-without-sidebar.html">FAQ</a><br>
<a class="text-primary-hover" href="contact-1.html">Contact Us</a><br>
<a class="text-primary-hover" href="blog.html">Blog</a>
</div>
<div class="s-12 m-6 l-3 xl-2">
<h4 class="text-white text-strong margin-m-top-30">Term of Use</h4>
<a class="text-primary-hover" href="sample-post-without-sidebar.html">Terms and Conditions</a><br>
<a class="text-primary-hover" href="sample-post-without-sidebar.html">Refund Policy</a><br>
<a class="text-primary-hover" href="sample-post-without-sidebar.html">Disclaimer</a>
</div>
<div class="s-12 m-6 l-3 xl-3">
<h4 class="text-white text-strong margin-m-top-30">Contact Us</h4>
<a class="text-primary-hover" href="tel:0800452180050"><i class="icon-sli-screen-smartphone text-primary"></i> 0800 4521 800 50</a><br>
<a class="text-primary-hover" href="mailto:[email protected]"><i class="icon-sli-mouse text-primary"></i> [email protected]</a><br>
<a class="text-primary-hover" href="mailto:[email protected]"><i class="icon-sli-mouse text-primary"></i> [email protected]</a>
</div>
</div>
</div>
</section>
<div class="background-dark">
<hr class="break margin-top-bottom-0" style="border-color: #777;">
</div>
<!-- Bottom Footer -->
<section class="padding-2x background-dark full-width">
<div class="full-width">
<div class="s-12 l-6">
<p class="text-size-12 margin-bottom-0">Copyright 2020, Vision Design - graphic zoo</p>
<p class="text-size-12">All images have been purchased from Bigstock. Do not use the images in your website.</p>
</div>
<div class="s-12 l-6">
<a class="right text-size-12 text-primary-hover" href="https://www.myresponsee.com" title="Responsee - lightweight responsive framework">Design and coding<br> by Responsee Team</a>
</div>
</div>
</section>
</footer>
<script type="text/javascript" src="js/responsee.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/template-scripts.js"></script>
</body>
</html>