-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
234 lines (222 loc) · 11.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Conquer Clone</title>
<link rel="stylesheet" href="normailze.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="p-wrapper">
<header>
<div class="container-nav">
<nav id="show-menue" class="none">
<ul class="main-nav">
<li><a href="#" class="navBtn active">homepage</a></li>
<li><a href="#scroll-anchor-features" class="navBtn">about us</a></li>
<li><a href="#scroll-anchor-services" class="navBtn">services</a></li>
<li><a href="#scroll-anchor-contact" class="navBtn">contact</a></li>
<li><a href="https://github.com/SebFine/chinguSoloTier1" target="_blank">github</a></li>
</ul>
</nav>
</div>
</header>
<div class="banner parallax">
<div class="menue">
<div class="menue-btn"></div>
<div class="menue-btn"></div>
<div class="menue-btn"></div>
</div>
<h1>conquer clone</h1>
<h3>a simple template without bootstrap</h3>
</div>
<div class="fixed-button">
<a href="#top">
<img src="img/top.png" alt="#">
</a>
</div>
<div class="container">
<!-- Begin main content | Begin feature area -->
<div id="scroll-anchor-features"></div>
<section id="features" class="column-layout">
<div class="col3 green-text">
<img src="img/1-1.jpg" alt="Colorful trees">
<h2>plain HTML, CSS & JS</h2>
<p>Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus
ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis
lectus magna, ornare ac scelerisque.</p>
<div class="center">
<a class="green-button button" href="#">green button</a>
</div>
</div>
<div class="col3 blue-text">
<img src="img/1-2.jpg" alt="Skyline">
<h2>responsive design</h2>
<p>Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus
ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis
lectus magna, ornare ac scelerisque.</p>
<div class="center">
<a class="blue-button button" href="#">blue button</a>
</div>
</div>
<div class="col3 red-text">
<img src="img/1-3.jpg" alt="Rails">
<h2>parallax layout</h2>
<p>Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus
ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis
lectus magna, ornare ac scelerisque.</p>
<div class="center">
<a class="red-button button" href="#">red button</a>
</div>
</div>
</div>
</section>
<!-- End feature area -->
<!-- Begin blog columns area-->
<section id="blog-columns" class="column-layout">
<div class="col2 grey-text">
<img src="img/2-1.jpg" alt="#" class="content-img">
<h2>article about chingu.IO</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor eros eget eros maximus, ut cursus
sem euismod. Donec iaculis tristique odio at consectetur. Nullam dignissim varius suscipit. Sed in
leo sit amet velit finibus pretium. Vestibulum vel mauris at erat mattis accumsan et ac lorem. Cras
non venenatis orci, sed tincidunt massa. Duis nisl lectus, auctor eu sodales at, dignissim eu orci.
Sed vitae venenatis magna, in blandit metus.</p>
<div class="center">
<a class="grey-button button" href="#">Read More</a>
</div>
</div>
<div class="col2 grey-text">
<img src="img/2-2.jpg" alt="#" class="content-img">
<h2>article about pomodoro</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor eros eget eros maximus, ut cursus
sem euismod. Donec iaculis tristique odio at consectetur. Nullam dignissim varius suscipit. Sed in
leo sit amet velit finibus pretium. Vestibulum vel mauris at erat mattis accumsan et ac lorem. Cras
non venenatis orci, sed tincidunt massa. Duis nisl lectus, auctor eu sodales at, dignissim eu orci.
Sed vitae venenatis magna, in blandit metus.</p>
<div class="center">
<a class="grey-button button" href="#">Read More</a>
</div>
</div>
</section>
<!-- End blog columns area-->
</div>
<!-- Begin sevices area-->
<div id="scroll-anchor-services"></div>
<section class="services parallax2">
<h2 class="whiteText">services</h2>
<p class="whiteText">Nunc diam leo, fringilla vulputate elit lobortis, consectetur vestibulum quam. Sed id felis
ligula. In
euismod libero at magna dapibus, in rutrum velit lacinia. Etiam a mi quis arcu varius condimentum.</p>
</section>
<!-- End services area-->
<div class="container">
<!-- Begin others area-->
<section class="column-layout">
<div class="col4 grey-text">
<img src="img/4-1.jpg" alt="">
<h2>column one</h2>
<p>Test 123 - Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus
ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus
magna, ornare ac scelerisque.</p>
</div>
<div class="col4 grey-text">
<img src="img/4-2.jpg" alt="">
<h2>column two</h2>
<p>Test 123 - Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus
ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus
magna, ornare ac scelerisque.</p>
<div class="center">
<a class="grey-button button" href="#">Grey button</a>
</div>
</div>
<div class="col4 grey-text">
<img src="img/4-3.jpg" alt="">
<h2>column three</h2>
<p>Test 123 - Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus
ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus
magna, ornare ac scelerisque.</p>
</div>
<div class="col4 grey-text">
<img src="img/4-4.jpg" alt="">
<h2>column four</h2>
<p>Test 123 - Morbi sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus
ullamcorper auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus
magna, ornare ac scelerisque.</p>
<div class="center">
<a class="grey-button button" href="#">Grey button</a>
</div>
</div>
<div class="column-layout">
<div class="col grey-text">
<img src="img/4-5.jpg" alt="" class="content-img">
<h2>one big column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor eros eget eros maximus, ut
cursus
sem euismod. Donec iaculis tristique odio at consectetur. Nullam dignissim varius suscipit. Sed
in
leo sit amet velit finibus pretium. Vivamus dictum nisi ac fermentum interdum. Vestibulum vel
mauris
at erat mattis accumsan et ac lorem. Cras non venenatis orci, sed tincidunt massa. Duis nisl
lectus,
auctor eu sodales at, dignissim eu orci. Sed vitae venenatis magna, in blandit metus. Praesent
volutpat cursus rhoncus. Aenean arcu diam, suscipit ac neque in, sollicitudin convallis orci.
</p>
<p>
Fusce eu porta massa, sed tincidunt turpis. Cum sociis natoque penatibus et magnis dis
parturient
montes, nascetur ridiculus mus. Vivamus a urna tellus. Integer pharetra vitae nisi et lacinia.
Morbi
sagittis justo a velit placerat ullamcorper quis quis velit. Sed convallis at risus ullamcorper
auctor. Praesent quis velit neque. Quisque semper porta nisi vitae suscipit. Duis lectus magna,
ornare ac scelerisque quis, maximus eget nisi.</p>
<a class="grey-button button" href="#">Grey button</a>
</div>
</div>
</section>
<!-- End others area-->
</div>
<!-- Begin contact area-->
<div id="scroll-anchor-contact"></div>
<section class="contact parallax3">
<div class="container-contact">
<h2 class="whiteText">Contact Form</h2>
<p class="whiteText contact-col info">Nunc diam leo, fringilla vulputate elit lobortis, consectetur
vestibulum
quam.
Sed
id felis
ligula. In
euismod libero at magna dapibus, in rutrum velit lacinia. Etiam a mi quis arcu varius condimentum.
</p>
<form action="">
<div class="column-layout">
<div class="contact-col half">
<input class="mgbtm" type="text" placeholder="Name">
<input class="mgbtm" placeholder="Email">
<input type="text" placeholder="Subject">
</div>
<div class="contact-col half">
<textarea placeholder="Your message"></textarea>
<button class="button green-button">Send</button>
</div>
</div>
</form>
</section>
<!-- End contact area-->
<!-- Begin footer area-->
<section class="footer">
<div>
<H4>Use it, contribute.</H4>
<p>Conquer clon is a clon from a website template.</p>
</div>
<hr>
<div>
<p>Copyright © 2020 | Design: templatemo | Github: SebFine | Discord: @SebFine#5354</p>
</div>
</section>
<!-- End footer area-->
<script src="parallax2.js"></script>
</div>
</body>
</html>