-
Notifications
You must be signed in to change notification settings - Fork 0
/
heading.html
174 lines (151 loc) · 8.38 KB
/
heading.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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/mercury.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/scripts/prefixfree.min.js"></script>
<script src="js/scripts/jarallax.js"></script>
<script src="js/scripts/slick.min.js"></script>
<script src="js/mercury.js"></script>
<script src="js/mercury-extra.js"></script>
</head>
<body>
<float>
<p id="widthDispaly"></p>
</float>
<container>
<section style="background-color: darkolivegreen;">
<content>
<div class="margin10">
<h2 class="subHeading center whiteText">Extra Large heading variation</h2>
</div>
<space class="S100"></space>
<div class="content">
<h1 class="heading center whiteText"><span class="extraLarge">This is h1 Extra Large heading</span></h1>
<space class="S100"></space>
<p class="heading center whiteText"><span class="extraLarge">This is p Extra Large heading</span></p>
<space class="S100"></space>
<h1 class="heading center whiteText"><span class="extraLarge">This is extra extra long and Extra Large h1 heading</span></h1>
<space class="S100"></space>
<p class="heading center whiteText"><span class="extraLarge">This isextra extra long and Extra Large p heading</span></p>
<space class="S100"></space>
<h1 class="heading center whiteText"><span class="extraLargeCompact">This is h1 Extra Large heading <span class="tag">This is Tag</span></span></h1>
</div>
<space class="S100"></space>
</content>
</section>
<section style="background-color: darkslateblue;">
<content>
<div class="margin10">
<h2 class="subHeading center whiteText">Large heading variation</h2>
</div>
<space class="S100"></space>
<div class="content">
<h1 class="heading center whiteText"><span class="large">This is h1 Extra Large Heading</span></h1>
<p class="heading center whiteText"><span class="large">This is p Extra Large Heading</span></p>
</div>
<space class="S100"></space>
<div class="content">
<h1 class="heading center whiteText"><span class="largeCompact">This is h1 Extra Large Heading <span class="tag">This is Tag</span></span></h1>
</div>
<space class="S100"></space>
</content>
</section>
<section style="background-color: darkslategray;">
<content>
<div class="margin10">
<h2 class="subHeading center whiteText">heading variation</h2>
</div>
<space class="S100"></space>
<div class="content">
<h1 class="center whiteText">This is normal h1 heading</h1>
<h2 class="center whiteText">This is normal h2 heading</h2>
<h3 class="center whiteText">This is normal h3 heading</h3>
<h4 class="center whiteText">This is normal h4 heading</h4>
<h5 class="center whiteText">This is normal h5 heading</h5>
<h6 class="center whiteText">This is normal h6 heading</h6>
</div>
<space class="S100"></space>
<div class="content">
<h2 class="subHeading center whiteText"><span class="extraLargeCompact">This is normal sub heading with extra large class</span></h2>
<h2 class="subHeading center whiteText"><span class="largeCompact">This is normal sub heading with large class</span></h2>
<h2 class="subHeading center whiteText">This is normal sub heading</h2>
</div>
</content>
</section>
<section style="background-color: darkslategray;">
<content class="cardx400 center">
<div class="margin10">
<h2 class="subHeading center whiteText">Sub heading variation</h2>
</div>
<space class="S50"></space>
<span class="card">
<span class="content">
<h4 class="subHeading center whiteText">This is small heading</h4>
<p class="justify whiteText">This is paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<i class="icon-dot"></i></p>
</span>
</span>
<span class="card">
<span class="content">
<h4 class="subHeading center whiteText underline">This is small heading</h4>
<p class="justify whiteText">This is paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</span>
</span>
<space class="S50"></space>
<span class="card">
<span class="content">
<h4 class="subHeading center whiteText">This is small heading</h4>
<p class="justify whiteText">This is paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<i class="icon-dot"></i></p>
</span>
</span>
<span class="card">
<span class="content">
<h4 class="subHeading center whiteText">This is small heading <span class="tag">This is tag</span></h4>
<p class="justify whiteText">This is paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</span>
</span>
</content>
</section>
<section style="background-color: dimgray;">
<content class="cardx400 center">
<div class="margin10">
<h2 class="subHeading center whiteText">Small heading variations</h2>
</div>
<space class="S50"></space>
<span class="card">
<span class="content">
<h4 class="smallHeading center whiteText">This is small heading</h4>
<p class="justify whiteText">This is paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<i class="icon-dot"></i></p>
</span>
</span>
<span class="card">
<span class="content">
<h4 class="smallHeading center whiteText underline">This is small heading</h4>
<p class="justify whiteText">This is paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</span>
</span>
<space class="S50"></space>
<span class="card">
<span class="content">
<h4 class="smallHeading center whiteText">This is small heading</h4>
<p class="justify whiteText">This is paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<i class="icon-dot"></i></p>
</span>
</span>
<span class="card">
<span class="content">
<h4 class="smallHeading center whiteText">This is small heading <span class="tag">This is tag</span></h4>
<p class="justify whiteText">This is paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</span>
</span>
</content>
</section>
</container>
</body>
</html>