-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
263 lines (252 loc) · 14 KB
/
index.html
File metadata and controls
263 lines (252 loc) · 14 KB
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
<!--
Project: Moderna framework
Author: Muhammad
Official repo: github.com/dev-muhammad/moderna
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/icon.png" sizes="any" type="image/png">
<title>Moderna - framework to build landing pages with pure HTML and CSS, a bit JS</title>
<link rel="stylesheet" href="css/moderna.css">
</head>
<body>
<header class="header" id="header">
<div class="header-content">
<div class="header-branding mr-3">
<a href="#top">
<img class="logo" src="img/logo.svg" alt="LOGO">
</a>
</div>
<nav class="header-nav">
<ul id="menu" class="menu pa-0">
<li class="menu-item"><a href="#about">About</a></li>
<li class="menu-item"><a href="#components">Components</a></li>
<li class="menu-item"><a href="#author">Author</a></li>
<li class="menu-item"><a href="#start">How to start?</a></li>
</ul>
<div class="menu-action">
<a class="button" href="#start" >Start</a>
</div>
<span id="showMenuBtn" class="mobile-menu-icon closed"></span>
</nav>
</div>
</header>
<main class="mt-5" id="top">
<!-- First screen -->
<section class="container pa-5 full-height">
<div class="item text-item pl-5">
<h2 class="title mb-1">Moderna</h2>
<p class="subtitle">Yet another framework to build landing pages faster with minimalistic design. With pure HTML and CSS, a bit JS without any third party libraries</p>
<br>
<a href="#about" class="button mt-5">More info</a>
</div>
<div class="item image-item">
<img class="image" src="img/desktop-mockup.png" alt="">
</div>
</section>
<!-- About section -->
<article id="about" class="container pa-7 ma-0 reverse-mobile full-background-color">
<div class="item image-item">
<img class="image" src="img/mobile-mockup.png" alt="">
</div>
<div class="item text-item pl-5">
<h2 class="title mb-1">About Moderna framework</h2>
<p class="subtitle">There are many web frameworks on the net, but every new idea has a chance to come true. This framework is built to create landing pages using pure HTML, CSS, JS without any third party libraries. The framework is published under the <a class="white-text" href="https://github.com/dev-muhammad/moderna/blob/main/LICENSE" target="_blank">MIT license</a> and it's free to use.</p>
</div>
</article>
<!-- Components section -->
<!-- Cards -->
<article id="components" class="pa-5">
<div class="content-center text-center">
<h2 class="title">Components</h2>
<p class="subtitle">Use prebuilt component to design your content</p>
</div>
<div id="cards" class="content-center text-center">
<h3 class="title">Horizontal and Vertical Cards</h3>
</div>
<div class="card-containter">
<div class="card elevation horizontal-card">
<div class="card-image">
<img src="img/logo.svg" alt="card image">
</div>
<div class="card-content">
<div class="card-title">Horizontal card</div>
<p class="card-text">This is horizontal card with image and action button. The block is responsive and will be vertical on mobile view and horizontal on large screens. Also has shadow effect on mouse hover.</p>
<p class="card-action">
<a class="link" href="#">Action button</a>
</p>
</div>
</div>
<div class="card elevation horizontal-card">
<div class="card-image">
<img src="img/logo.svg" alt="card image">
</div>
<div class="card-content">
<div class="card-title">Horizontal card</div>
<p class="card-text">This is horizontal card with image and action button. The block is responsive and will be vertical on mobile view and horizontal on large screens. Also has shadow effect on mouse hover.</p>
<p class="card-action">
<a class="link" href="#">Action button</a>
</p>
</div>
</div>
</div>
<div class="card-containter">
<div class="card elevation vertical-card">
<div class="card-image">
<img src="img/logo.svg" alt="card image">
</div>
<div class="card-content">
<div class="card-title">Vertical card</div>
<p class="card-text">This is vertical card with image. The block always vertical. Has shadow effect like horizontal card, but title is aligned in center.</p>
</div>
</div>
<div class="card elevation vertical-card">
<div class="card-image">
<img src="img/logo.svg" alt="card image">
</div>
<div class="card-content">
<div class="card-title">Vertical card</div>
<p class="card-text">This is vertical card with image and action button. The block always vertical. Has shadow effect like horizontal card, but title is aligned in center.</p>
<p class="text-center card-action">
<a class="link" href="#">More info</a>
</p>
</div>
</div>
<div class="card elevation vertical-card">
<div class="card-image">
<img src="img/logo.svg" alt="card image">
</div>
<div class="card-content">
<div class="card-title">Vertical card</div>
<p class="card-text">This is vertical card with image. The block always vertical. Has shadow effect like horizontal card, but title is aligned in center.</p>
</div>
</div>
</div>
</article>
<!-- Testimonial -->
<article id="testimonial" class="container pa-7 pt-2 ma-0 full-background-color flex-column">
<div class="text-center">
<h2 class="title white-text">Testimonial</h2>
</div>
<div class="testimonial">
<div class="item">
<div class="image">
<img class="circle-rounded-image" src="img/author-avatar.jpg" alt="">
</div>
<div class="testimonial-content">
<span class="testimonial-title">Muhammad (author)</span>
<p class="testimonial-text">Use this component to share your customer's opinion on the product. It grabs attention and builds confidence. Please use real photos and names, and only honest reviews.</p>
</div>
</div>
<div class="item">
<div class="image">
<img class="circle-rounded-image" src="img/icon.png" alt="">
</div>
<div class="testimonial-content">
<span class="testimonial-title">Moderna framework</span>
<p class="testimonial-text">I'm another framework to build landing pages with pure HTML and CSS, a bit JS without any third party libraries.</p>
</div>
</div>
</div>
</article>
<!-- Accordion -->
<article id="accordion" class="container flex-column">
<div class="text-center">
<h2 class="title">Accordion</h2>
<p class="subtitle">Use this component to answer frequently asked questions from your users</p>
</div>
<div class="accordion">
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2>How to use this framework?</h2>
<p>Thank you, that your interested on it. You can download source code from github page. If you are starter on front-end, you can just copy&paste prebuilt components to your file or modify current file. For next steps look <a href="#start">How to start?</a> section.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>How much it cost?</h2>
<p>It's totally free. MIT license means:
<br/>
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Why it has few component?</h2>
<p>The main goal of creating this framework is to simplify the creation of landing pages without heavy external libraries and dependencies. Therefore, the most popular components have been implemented. Also, do not forget that there are not only those mentioned above, but also this page itself was created using the same framework. Check out what other non-listed components are available. This is the navigation menu, footer, СTA and block with image and text.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>How lightweight is the framework?</h2>
<p>It weighs less than 12 kb. It has only 2 .css and .js files.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Who is author?</h2>
<p>Thank you for not forgetting about the author. It is written about in the next block.</p>
</li>
</ul>
</div>
</article>
<!-- Author section -->
<article id="author" class="container pa-5">
<div class="item text-item pl-5">
<h2 class="title mb-1">About author</h2>
<p class="subtitle">Hi, my name is Muhammad. I'm more than 5 years in programming field. Also I have more than 3 years experience on web front-end development.</p>
<p class="subtitle">
I have many ideas for digital products and always need to create landing pages on protyping process to validate idea and check demand. I used many tools to build landing pages, but they have so many unnecassary parts and unused code. Because of it page will be heavy and loads long time.</p>
<p class="subtitle">
So I decided to build my own lightweight framework with only necessary components.</p>
</div>
<div class="item image-item">
<img class="image circle-rounded-image" src="img/author-avatar.jpg" alt="">
</div>
</article>
<!-- How to start section -->
<article id="start" class="container pa-5">
<div class="text-center-item">
<h2 class="title mb-1">How to start?</h2>
<p class="subtitle">Just download CSS and JS file from official github repository or clone it. If you like it, don't forget mark with star the repository:)</p>
<a href="https://github.com/dev-muhammad/moderna" target="_blank" class="button mt-5">Github Page</a>
</div>
</article>
</main>
<footer class="footer">
<div class="footer-item">
<p class="subtitle">Moderna - yet another framework to build landing pages faster with minimalistic design. With pure HTML and CSS, a bit JS without any third party libraries. </p>
</div>
<div class="footer-item">
<p class="list-title">Sections</p>
<ul>
<li class="list-item"><a class="link-hover" href="#about">About</a></li>
<li class="list-item"><a class="link-hover" href="#components">Components</a></li>
<li class="list-item"><a class="link-hover" href="#author">Author</a></li>
<li class="list-item"><a class="link-hover" href="#start">How to start?</a></li>
</ul>
</div>
<div class="footer-item">
<p class="list-title">Components</p>
<ul>
<li class="list-item"><a class="link-hover" href="#cards">Cards</a></li>
<li class="list-item"><a class="link-hover" href="#testimonial">Testimonial</a></li>
<li class="list-item"><a class="link-hover" href="#accordion">Accordion</a></li>
</ul>
</div>
</footer>
<p class="sign">Made by Moderna</p>
<script src="js/moderna.js"></script>
</body>
</html>