-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
99 lines (87 loc) · 7.1 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
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="«Rapid Bootstrap V5» is a toolkit for kickstarting web-projects, apps, and more. It includes the essential set of CSS elements optimized for perfect typography, a super simple fluid grid system and everything else necessary to develop mobile friendly content. It is optimized for speed and efficiency, only 2kb gzipped, and will support all major desktop and mobile browsers. One of the cleanest and simplest bootstraps you will ever get you hands on.">
<meta content="index,follow" name="robots">
<title>
Rapid Bootstrav V5 | Niklaus Gerber
</title>
<!-- Example Google Author -->
<link href="https://plus.google.com/u/0/108253621194230928293" rel="author" title="Niklaus Gerber">
<!-- Twitter Share Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@niklausgerber">
<meta name="twitter:title" content="Niklaus Gerber">
<meta name="twitter:description" content="Digital architect focussed on making the complex clear & beautiful. Niklaus is specialised in digital innovation and creating and developing software products.">
<!-- Example Facebook Opengraph -->
<meta property="og:type" content="profile">
<meta property="og:title" content="Niklaus Gerber">
<meta property="og:url" content="https://www.niklausgerber.com">
<meta property="og:image" content="http://api.niklausgerber.com/opengraph/niklausgerber-com.png">
<meta property="profile:first_name" content="Niklaus">
<meta property="profile:last_name" content="Gerber">
<!-- Example Favicons | http://realfavicongenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/assets/images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/assets/images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/assets/images/favicons/manifest.json">
<link rel="mask-icon" href="/assets/images/favicons/safari-pinned-tab.svg" color="#222222">
<link rel="shortcut icon" href="/assets/images/favicons/favicon.ico">
<meta name="msapplication-config" content="/assets/images/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- CSS -->
<link rel="stylesheet" href="./assets/css/styles.css">
</head>
<body>
<div class="container">
<div class="grid">
<div class="col">
<h1>Rapid Bootstrap V5</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p><a href="#" title="Lorem ipsum dolor sit amet" target="_blank">Lorem ipsum dolor sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<h4>Headline</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<h5>Headline</h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<h6>Headline</h6>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<h2>Responsive Images</h2>
<img src="https://unsplash.it/1200/600" />
<h2>Responsive Video and iFrame Embeds</h2>
<div class="Flexible-container">
<iframe src="http://player.vimeo.com/video/53914149?title=0&byline=0&portrait=0&badge=0&color=808080" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<h2>Responsive iFrame Embeds</h2>
<div class="Flexible-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d10811.431834885825!2d8.54942!3d47.35617105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sde!2sch!4v1452608455378" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="grid">
<div class="col">Half width grid<span class="placeholder"></span></div>
<div class="col">Half width grid<span class="placeholder"></span></div>
</div>
<div class="grid">
<div class="col">⅓ width grid<span class="placeholder"></span></div>
<div class="col">⅓ width grid<span class="placeholder"></span></div>
<div class="col">⅓ width grid<span class="placeholder"></span></div>
</div>
<div class="grid">
<div class="col">¼ width grid<span class="placeholder"></span></div>
<div class="col">¼ width grid<span class="placeholder"></span></div>
<div class="col">¼ width grid<span class="placeholder"></span></div>
<div class="col">¼ width grid<span class="placeholder"></span></div>
</div>
<!-- You can add as many columns as needed -->
</div>
</body>
</html>