-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (105 loc) · 3.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
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<title>Aah pourquoi le W</title>
<link rel="icon" href="favicon.png">
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One|Open+Sans+Condensed:300|Open+Sans:800" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<style type="text/css">
body {
background: #fff;
margin: 0;
}
.hide {
display: none;
}
.container#initial {
/* Koen Vendrik - https://codepen.io/kvendrik/pen/nfjas */
background: #fff;
padding: 75px 0;
height: 100vh;
font: 300 16px "Open Sans";
}
.container#initial div {
margin: 0 auto;
padding: 0 20px;
width: 600px;
overflow: hidden;
border-bottom: solid 3px #1f8a70;
margin-bottom: 20px;
line-height: 0;
}
.container#initial h1 {
font-weight: 900;
text-transform: uppercase;
color: #1f8a70;
font-size: 4em;
line-height: 1.1em;
color: transparent;
background-image: url(img/initial.jpg);
-webkit-background-clip: text;
background-clip: text;
}
.container#secondaire {
/* Mayur Elbhar - https://codepen.io/mayurelbhar/pen/ogNGLv */
background: #222222;;
padding: 100px 0;
height: 100vh;
}
.container#secondaire h1 {
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
line-height: 0px;
color: #A4A4A4;
text-align: right;
margin-right: 200px;
font-size: 50px;
word-spacing: -10px;
margin-bottom: -7px;
}
.container#secondaire span {
font-family: 'Hammersmith One', sans-serif;
}
.container#secondaire .one { color: #009069; }
.container#secondaire .two { color: #0C9587; }
.container#secondaire .three { color: #04A77C; }
.container#secondaire .four { color: #06C08E; }
.container#secondaire .five { color: #2BD9A8; }
.container#secondaire .six { color: #1CC20A; }
.container#secondaire .seven { color: #9AC20A; }
.container#secondaire .eight { color: #CADA13; }
.container#secondaire .nine { color: #BDBA07; }
.container#secondaire .ten { color: #C5A60A; }
.container#secondaire .eleven { color: #C5870A; }
.container#secondaire .twelve { color: #D47B22; }
.container#secondaire .thirteen { color: #E65918; }
.container#secondaire .fourteen { color: #CE2C2C; }
</style>
</head>
<body>
<section class="container hide" id="initial">
<div>
<h1>Parce-que le problème avec le chômage c'est que la minute où tu te réveille le matin, tu es au travail.</h1>
</div>
</section>
<section class="container hide" id="secondaire">
<div>
<h1><span class="one">En travaillant</span> fidèlement </h1>
<h1><span class="two">8 heures par jour</span> vous pouvez</h1>
<h1><span class="three">potentiellement</span> devenir</h1>
<h1><span class="four">un patron</span> et travailler</h1>
<h1><span class="five">12 heures</span> par jour </h1>
</div>
</section>
<script type="text/javascript" >
(function($) {
$.fn.random = function() {
var n = this.length;
var r = Math.floor(n * Math.random());
return n ? $(this[r]) : $();
};
$('.hide').random().removeClass("hide");
})(jQuery);
</script>
</body>
</html>