-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathstarter.html
101 lines (85 loc) · 3.64 KB
/
starter.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Papier CSS - Minimal Starter</title>
<!-- FONT -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600">
<!-- ICONS -->
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css">
<!-- MAGIC -->
<link rel="stylesheet" href="dist/papier.css">
</head>
<body class="bg-subtle">
<header class="bg-orange top-bar depth-3 center l-padding">This is just a <strong>demo for Papier</strong>, a minimal, pretty semantic, responsive CSS library. Like what you see? - Star and download it on <a href="https://github.com/alexanderGugel/papier">Github</a>!</header>
<main class="l-padding">
<h1 class="center">Demo Consulting Company Inc.</h1>
<section class="row">
<h2 class="col-12">Our process</h2>
<div class="col-md-3 bg-lime m-padding">
<h3><i class="icon ion-beer"></i> Drink</h3>
<p>Alcohol is always a good start. There is not much to say about this project phase, we simply enjoy it - without our clients. Thanks for sponsoring this event.</p>
</div>
<div class="col-md-4 bg-blue m-padding">
<h3><i class="icon ion-chatbubble"></i> Talk</h3>
<p>Usually, we're still drunk during the first meeting with our clients, but to give you a good first impression, we nod a lot and love to say yes to make you happy. But after a certain point, we would prefer if you would consider shutting up. Thanks.</p>
</div>
<div class="col-md-3 bg-amber m-padding">
<h3><i class="icon ion-ios-nutrition"></i> Eat</h3>
<p>Honestly, we prefer Burger King and McDonalds, but we couldn't find an actual burger, only menu burgers. But this carrot icon gets the job done, so there is no problem I guess.</p>
</div>
<div class="col-md-2 bg-orange m-padding">
<h3><i class="icon ion-cash"></i> Charge</h3>
<p>That's actually the part we enjoy the most. Charging money is fun. This is always going to be a surprise for you.</p>
</div>
</section>
<hr>
<section class="row">
<h2 class="col-12">Our Awesome Team</h2>
<div class="col-md-4">
<div class="card">
<img src="http://i.imgur.com/1MAPr5Q.gif" class="full-width">
<h3>Alexander Gugel, Senior Software Engineer</h3>
<p>Be amazed by his skillz</p>
<p class="subtle">
Twitter: <a href="https://twitter.com/alexanderGugel">@alexanderGugel</a> Ι
GitHub: <a href="https://github.com/alexanderGugel">@alexanderGugel</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="http://i.imgur.com/qh5JTsV.gif" class="full-width">
<h3>Alexander Gugel, Senior Designer</h3>
<p>He makes everything beautyful</p>
<p class="subtle">
Twitter: <a href="https://twitter.com/alexanderGugel">@alexanderGugel</a> Ι
GitHub: <a href="https://github.com/alexanderGugel">@alexanderGugel</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="http://i.imgur.com/aX6HH13.gif" class="full-width">
<h3>Alexander Gugel, Baby Elephant</h3>
<p>An elephant, you know?</p>
<p class="subtle">
Twitter: <a href="https://twitter.com/alexanderGugel">@alexanderGugel</a> Ι
GitHub: <a href="https://github.com/alexanderGugel">@alexanderGugel</a>
</p>
</div>
</div>
</section>
<hr>
<section class="center l-padding l-margin">
<button class="bg-blue">
<h1>Hire us!</h1>
<p>It's going to be fun!</p>
</button>
</section>
</main>
<footer class="bg-black l-padding">
<small class="subtle">© Demo Consulting Company Inc. - Do whatever you want with this website.</small>
</footer>
</body>
</html>