-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (109 loc) · 4.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Welcome to your playground. This is a comment in html. You can use command + slash to turn it on or off. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
Your Title Goes Here
</title>
<meta name="author" content="your name">
<meta name="description" content="minimal template to building responsive websites with html5 and postcss">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/mnml.css">
</head>
<body class="p-l">
<header>
<h1>Hello</h1>
<p>stuff</p>
</header>
<section>
<div class="py-l">
<h1 class="measure">Heading 1 - A new and simple way to own a car, keep on trucking in the free world. </h1>
<h2 class="measure">Heading 2 - A new and simple way to own a car, keep on trucking in the free world. </h2>
<h3 class="measure">Heading 3 - A new and simple way to own a car, keep on trucking in the free world. </h3>
<h4 class="measure">Heading 4 - A new and simple way to own a car, keep on trucking in the free world. </h4>
<h5 class="measure">Heading 5 - A new and simple way to own a car, keep on trucking in the free world. </h5>
<h6 class="measure">Heading 6 - A new and simple way to own a car, keep on trucking in the free world. </h6>
<p class="measure">Sample text regarding Canvas. Lorem Khaled Ipsum is a major key to success. Wraith talk. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started. We the best. Find peace, life is like a water fall, you’ve gotta flow. Give thanks to the most high. It’s on you how you want to live your life. Everyone has a choice. I pick my choice, squeaky clean. I’m up to something. Learning is cool, but knowing is better, and I know the key to success. Egg whites, turkey sausage, wheat toast, water. Of course they don’t want us to eat our breakfast, so we are going to enjoy our breakfast.</p>
<p class="text-center">This text is centered.</p>
<p class="text-right">This text is aligned right.</p>
</div>
<hr>
<div class="py-l">
<p class="">Percentage based typography.</p>
<h1 class="measure vw-10">Typography scaling to 10% of viewport width.</h1>
<h1 class="measure vw-05">Type scaling to 5% of viewport width.</h1>
</div>
<hr>
<div class="py-l">
<h2 class="bold">Font Styles</h2>
<p class="bold">Bold </p>
<p class="italic">Italic </p>
<p class="bold italic">Bold Italic </p>
<p class="caps">Caps </p>
<p class="bold caps">Bold Caps</span></p>
</div>
<hr>
<div class="py-l">
<h2 class="bold">Font Scale</h2>
<p>Our typography is based on a base scale of 1rem / 16px.</p>
<code>
<pre>
16 x .75 = 12
16 x .875= 14
16 x 1 = 16
16 x 1.25= 20
16 x 1.5 = 24
16 x 2 = 32
</pre>
</code>
</div>
<hr>
<div class="py-l">
<p class="grid">Bootstrap Grid</p>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 text-center">
12 columns, 6 tablet, 3 large
</div>
<div class="col-12 col-md-6 col-lg-4 text-center">
12 columns, 6 tablet, 3 large
</div>
<div class="col-12 col-md-6 col-lg-4 text-center">
12 columns, 6 tablet, 3 large
</div>
<div class="col-12 col-md-6 col-lg-4 text-center">
12 columns, 6 tablet, 3 large
</div>
</div>
<div class="row">
<div class="col-6 text-center">
6 columns
</div>
<div class="col-6 text-center">
6 columns
</div>
</div>
<div class="row">
<div class="col-4 text-center">
4 columns
</div>
<div class="col-4 text-center">
4 columns
</div>
<div class="col-4 text-center">
4 columns
</div>
</div>
</div>
</div>
<div class="shadow test p-xl">
test
</div>
</section>
<footer>
This is footer content!!!
</footer>
</body>
</html>