-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
254 lines (242 loc) · 8.67 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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="theme-color" content="#ffffff" />
<link rel="shortcut icon" href="./media/favicon.ico" type="image/x-icon" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Traleor's Metas -->
<title>Traleor Templates | Create A Website That Speaks For You</title>
<meta name="author" content="Traleor" />
<meta name="copyright" content="traleor.com" />
<meta name="robots" content="index,follow" />
<meta name="geo.placename" content="Africa" />
<meta
name="description"
content="Traleor templates are crafted with love to help you to build or customize your own website templates."
/>
<!-- Canonical -->
<link rel="canonical" href="https://github.com/traleor/templates" />
<!-- Social Sharing -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github.com/traleor/templates" />
<meta
property="og:title"
content="Traleor Templates | Create A Website That Speaks For You"
/>
<meta
property="og:description"
content="Traleor templates are crafted with love to help you to build or customize your own website templates."
/>
<meta
property="og:image"
content="https://github.com/traleor/templates/blob/main/media/welcome.png?raw=true"
/>
<!-- Twitter Metas -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="traleor.com" />
<meta
name="twitter:title"
content="Traleor Templates | Create A Website That Speaks For You"
/>
<meta
name="twitter:description"
content="Traleor templates are crafted with love to help you to build or customize your own website templates."
/>
<meta
property="twitter:url"
content="https://github.com/traleor/templates"
/>
<meta
name="twitter:image"
content="https://github.com/traleor/templates/blob/main/media/welcome.png?raw=true"
/>
<meta http-equiv="”content-language”" content="”en-US”" />
<link rel="stylesheet" href="nova/css/nova.css" />
<style>
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.card {
width: 45%;
flex: 45% 0 0;
margin: auto 1rem;
}
.card__body h3 {
color: rgba(0, 0, 0, 0.8);
font-weight: 400;
font-size: 16px;
}
@media screen and (max-width: 750px) {
.card {
width: 100%;
flex: 100% 0 0;
margin: auto 1rem;
}
}
</style>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<div class="container">
<!-- NAVBAR -------------------------------------------------->
<nav
class="navbar flex fixed full-width a-j-space-between"
role="navigation"
>
<div class="navbar__logo">
<a href="">
<b>Templates</b>
</a>
</div>
<!-- checkbox to track when the hamburger menu is clicked on -->
<input type="checkbox" id="menu_check" />
<label for="menu_check" class="menu__btn">
<div class="hamburger__menu"></div>
</label>
<ul class="navbar__menu flex a-j-center">
<li class="navbar__menu__list">
<a href="https://traleor.com" class="navbar__menu__list__item"
>Home</a
>
</li>
<li class="navbar__menu__list">
<a
href="https://traleor.com/about-us/"
class="navbar__menu__list__item"
>About</a
>
</li>
<li class="navbar__menu__list">
<!-- Place this tag where you want the button to render. -->
<a
class="github-button"
href="https://github.com/traleor/templates"
data-color-scheme="no-preference: light_high_contrast; light: light; dark: light;"
data-size="large"
data-show-count="true"
aria-label="Star traleor/templates on GitHub"
>Star</a
>
</li>
</ul>
</nav>
<section
style="padding-top: 8rem"
class="text__component default-padding full-width"
>
<div class="list__block__item">
<div class="rich__text">
<h1>Start something Big with Traleor</h1>
</div>
</div>
</section>
<!-- CARDS AREA - BLOGS --------------------------------------------->
<section class="card__block full-width default-padding">
<div class="title">
<h2>Current Templates</h2>
</div>
<div class="cards">
<div class="card">
<a href="./nova/index.html" class="card__image">
<img src="./media/hill-cover.png" alt="traleor hill cover" />
</a>
<div class="card__body">
<p>Starter</p>
<h2>Nova Template</h2>
<h3>
This is the default template for Traleor. It is a clean,
minimalist and mobile responsive template. It can be easily
customized using the css variables so you can a unique and
beautiful website in no time.
</h3>
</div>
</div>
<div class="card">
<a href="./rolly/index.html" class="card__image">
<img src="./media/dark-cover.png" alt="traleor hill cover" />
</a>
<div class="card__body">
<p>Starter</p>
<h2>Rolly Template</h2>
<h3>
This is a beautiful weblog template that is simple and clean. It
is great for blogs and people insterested in sharing stories to
the world. As always, it is open sourced, mobile friendly and
free to use.
</h3>
</div>
</div>
<div class="card">
<a href="./techa/index.html" class="card__image">
<img src="./media/yellow-cover.png" alt="traleor yellow cover" />
</a>
<div class="card__body">
<p>Technology</p>
<h2>Techa Template</h2>
<h3>
Techa (Greek for "late summer") is a bold and gorgeous template
for tech bloggers and vloggers.
</h3>
</div>
</div>
<div class="card">
<a href="./bellissima/index.html" class="card__image">
<img src="./media/belle.png" alt="traleor yellow cover" />
</a>
<div class="card__body">
<p>Premium</p>
<h2>Bellisima Template</h2>
<h3>
Bellissima (Italian for "Beautiful") is a unique, beautifully designed template
for you who dares to be different and stand out.
</h3>
</div>
</div>
</div>
</section>
<!-- BANNER --------------------------------------------->
<section class="banner flex a-j-center full-width default-padding">
<div class="banner__content flex a-j-center flex-column">
<h2>Star Us On GitHub</h2>
<h3>
The stars are the most valuable thing in the universe. They make us
build more beautiful templates.
</h3>
<br />
<!-- Place this tag where you want the button to render. -->
<a
class="github-button"
href="https://github.com/traleor/templates"
data-color-scheme="no-preference: light_high_contrast; light: light; dark: light;"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star traleor/templates on GitHub"
>Star</a
>
</div>
</section>
<footer class="footer">
<div class="title__text__wrapper full-width">
<div class="title__text__content flex flex-column a-j-center">
<h2>Learn More About Traleor CMS</h2>
<h3>
We help you create beautiful content driven websites in no time
with our powerful content management system.
</h3>
</div>
</div>
<div class="footer__mark">
<h4>Traleor Templates - With Love From Traleor</h4>
</div>
</footer>
</div>
<script src="./nova/js/nova.js"></script>
</body>
</html>