-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdark.html
127 lines (121 loc) · 6.29 KB
/
dark.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
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="A simple framework wich can be used to create clean, minimalistic and responsive websites. Built by Raghav Kukreti">
<meta charset="utf-8">
<link rel="stylesheet" href="./css/dark.css">
<title>Cle.an</title>
</head>
<body>
<section class="hero fadeIn">
<h1>Cle.an</h1>
<h2>A clean, simple framework</h2>
<br>
<nav>
<a href="#typo">Typography</a> <a href="#forms">Forms</a> <a href="#creds">Download</a> <a class="button main" href="index.html">LightMode</a>
</nav>
<div class="content">
<p class="lead">Cle.an is an extremely simple front-end framework which contains useful defaults, classes
and typography. It was built using the powers of SASS and HTML5.</p>
<p class="lead">It has a flat color palette and sets the font-sizes, typography defaults, paddings and
margins to provide a hassle free coding experience.</p>
<p class="lead">Developed by <a href="http://www.raghavkukreti.tk" target="_blank">Raghav Kukreti</a></p>
</div>
</section>
<section class="info main-section">
<h1 class="article-header">Cle.an Docs</h1>
<article>
<h2 class="subheader" id="typo">1. Typography</h2>
<p><span class="word">Paragraph Text</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id,
consequuntur, earum, fugit suscipit aperiam asperiores autem consequatur labore odit exercitationem
totam itaque quae hic saepe porro quibusdam nisi dolorum. Possimus. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Iure, exercitationem, soluta esse modi sit vero quas perferendis a ad quae
id neque ea dolore rem illo obcaecati impedit sed cum!</p>
<p class="lead bump-top-5">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</p>
<p class="lead bump-top-5"> <span class="word">Lead Text</span> Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Obcaecati velit quidem laborum asperiores est aperiam consectetur quae optio vel
nobis. A, vel voluptas quibusdam recusandae labore similique nobis dolorum architecto.</p>
<p class="lead bump-top-5 bump-bottom-3">
<img src="img/car.jpg" alt="image" class="rounded responsive-image">
</p>
<p class="lead bump-top-5">
<h3>Blockquote</h3>
<blockquote>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dignissimos, tempore.
Eligendi accusamus delectus veniam voluptates tempora consectetur nobis fugit magnam assumenda
consequuntur. Quisquam, provident, dolore excepturi libero voluptatum inventore.
</p>
</blockquote>
</p>
<p class="lead bump-top-5">
<h3 class="bump-bottom-5">Color Swatches</h3>
<span class="color orange">#FFA500</span>
<span class="color midnight">#2C3E50</span>
<span class="color green">#2ECC71</span>
<span class="color red">#E74C3C</span>
</p>
<p class="lead bump-top-5">
<h1 class="bump-bottom-5" id="forms">Form Input Fields</h1>
<input type="text" placeholder="Normal input field">
<input type="text" value="Success!" class="success bump-left-5">
<input type="text" value="Error!" class="error bump-left-5">
</p>
<p class="lead bump-top-5">
<h1 class=" bump-bottom-5">Buttons</h1>
<a href="#" class="button main bump-right-5">Main Button</a>
<a href="#" class="button error bump-right-5">Error Button</a>
<a href="#" class="button success bump-right-5">Success Button</a>
</p>
</article>
<p class="lead bump-top-5 border-top" id="creds">Cle.an is liscenced under the MIT Liscence. If you have any
queries, suggestions or simply want to talk, </p>
<p class="lead"><a href="mailto:[email protected]" target="_blank">Mail Me</a>, <a
href="https://www.facebook.com/raghav.kukreti7" target="_blank">Facebook </a>or <a
href="https://www.twitter.com/RaghavKukreti">Twitter</a>
<br>
<div class="download">
<p class="lead"><a href="#" class="button success">Download!</a></p>
</div>
</p>
<p class="lead bump-top-5">Handcrafted with <span class="red"> ♡</span> by Raghav Kukreti</p>
<script>
$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
.click(function (event) {
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function () {
var $target = $(target);
$target.focus();
if ($target.is(":focus")) {
return false;
} else {
$target.attr('tabindex', '-1');
$target.focus();
};
});
}
}
});
</script>
</body>
</html>