-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
233 lines (233 loc) · 20.8 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
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Acordeon web basado en los guidelines de material design." />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Material acordeon</title>
<link rel="shortcut icon" href="./public/images/icon.ico" />
<style>
/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:sans-serif;font-size:16px;font-family:'Roboto',Arial,Calibri}body{background-color:#f5f7f8;margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}button{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:none;outline:none;-ms-touch-action:none;touch-action:none}img{height:auto;max-width:100%}.U-material-wrapper{background-color:#fff;margin:-11em auto 5em auto;-webkit-box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);padding:100px;position:relative;width:550px;z-index:50}@media screen and (max-width:760px){.U-material-wrapper{margin:-9em auto 5em auto;padding:50px 5%;width:70%}}@media screen and (max-width:570px){.U-material-wrapper{margin:-8em auto 0 auto;padding:25px 5%;width:90%}}.U-header-text{display:block;margin:0;text-align:right}@media screen and (max-width:570px){.U-header-text{text-align:center}}.U-animated-link::before,.U-animated-link::after{background-color:#3e515a;content:'';display:block;height:50%;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);position:absolute;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;width:0;z-index:-1}.U-animated-link::before{border-radius:.125em .125em 0 0;top:0;left:0}.U-animated-link::after{border-radius:0 0 .125em .125em;bottom:0;right:0}.U-animated-link:hover::after,.U-animated-link:hover::before{width:100%}.header{background:#455a64;height:15.625em;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);padding:3.25em 0 0 0;position:relative;width:100%;}.header::after{background-color:#3e515a;content:'';height:1.5em;left:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);position:absolute;top:0;width:100%}.header-wrapper{margin:0 auto;text-align:left;width:750px}.header__info{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;height:50px;padding:0 .5em 0 0;position:relative;vertical-align:top;}.header__info::after{border-right:1px solid #aaa;content:'';height:100%;position:absolute;right:0;top:0}.header__title{color:#dedede;font-size:24px;font-weight:400;line-height:32px}.header__autor{color:#aaa;font-size:12px;font-weight:400;line-height:18px}.header__link{color:#dedede;margin-left:.25em;padding:.1em .25em;position:relative;text-decoration:none;-webkit-transition:all .3s ease;transition:all .3s ease;}.header__link:hover{background-color:#3e515a;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);padding-bottom:.3em}@media screen and (max-width:760px){.header-wrapper{width:80%}}@media screen and (max-width:570px){.header-wrapper{width:100%}.header__info{display:block;margin-bottom:.5em;width:100%;}.header__info::after{border:none}.header__title{margin-bottom:.25em}.header__autor{margin-bottom:.25em}}.nav{display:inline-block;margin-left:.5em;height:50px;}.nav__btn{background-color:#3e515a;border-radius:.125em;color:#dedede;display:inline-block;margin:6.8125px .5em 0 .5em;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);font-size:14px;font-weight:500;line-height:20px;text-transform:uppercase;padding:.55em;text-align:center;text-decoration:none;-webkit-transition:all .3s ease;transition:all .3s ease;width:7em;}.nav__btn:hover{background-color:#4c636e;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}@media screen and (max-width:570px){.nav{display:block;margin:0;text-align:center;width:100%}}.acordeon{background-color:#fff;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);}.acordeon-item{display:block;}.acordeon-item__label{background-color:#607d8b;border-bottom:solid 1px #859ca6;color:#dedede;cursor:pointer;display:block;font-size:16px;font-weight:400;line-height:28px;padding:.5em;-webkit-transition:all .5s ease;transition:all .5s ease;}.acordeon-item__label:hover{background-color:#506873}.acordeon-item__label::after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;content:'\e61f';float:right;font-family:'Material-icon';font-size:1.5rem;-webkit-transition:all .5s ease;transition:all .5s ease}.acordeon-item__label::before{background-color:#82b1ff;bottom:0;content:'';display:block;height:4px;position:absolute;right:0;-webkit-transition:all .2s linear;transition:all .2s linear;width:0}.acordeon-item__label:hover::before{width:100%}.acordeon-item__input{display:none;}.acordeon-item__input:checked + .ripple-parent > .acordeon-item__label{background-color:#506873}.acordeon-item__input:checked + .ripple-parent > .acordeon-item__label::before{background-color:#a8c8ff;left:0;width:100%}.acordeon-item__input:checked + .ripple-parent > .acordeon-item__label::after{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.post{background-color:#fafbfb;color:#607d8b;height:0;opacity:0;overflow:hidden;padding:0;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:padding .4s ease,-webkit-transform .55s ease,opacity .55s ease-in-out .2s;transition:padding .4s ease,transform .55s ease,opacity .55s ease-in-out .2s;visibility:hidden;width:100%;}.post__image{border-radius:2px 2px 0 0;opacity:.9;width:100%}.post__content{padding:4%}.post__title{margin:0;font-size:24px;font-weight:400;line-height:32px}.post__date{color:#95abb6;margin:0;font-size:12px;font-weight:400;line-height:18px}.post__paragraph{margin:1em 0 0 0;font-size:14px;font-weight:400;line-height:20px}.acordeon-item__input:checked + .ripple-parent + .post{height:auto;opacity:1;padding:0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);visibility:visible}@media screen and (max-width:600px){.post{font-size:1.1rem;line-height:1.6rem}}.mobile{background-color:#82b1ff;border-radius:50%;color:#fff;height:3.75em;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);overflow:hidden;position:absolute;right:1.875em;text-align:center;top:-1.875em;-webkit-transition:all .3s ease;transition:all .3s ease;width:3.75em;z-index:100;}.mobile:hover{background-color:#95bdff;-webkit-box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23)}.mobile__checkbox{display:none}.mobile__label{cursor:pointer;display:inline-block;font-size:1.75rem;font-weight:300;height:100%;line-height:60px;position:relative;text-align:center;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:all .3s linear .4s;transition:all .3s linear .4s;width:100%;}.mobile__checkbox:checked + .mobile__label{color:rgba(255,255,255,0);cursor:auto;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}.mobile__qr-image{bottom:14%;left:0;opacity:0;position:absolute;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);visibility:hidden;width:100%;z-index:500;}.mobile__checkbox:checked + .mobile__label + .mobile__qr-image{-webkit-animation:mobile__qr-image .2s ease .8s 1 normal forwards;animation:mobile__qr-image .2s ease .8s 1 normal forwards}@media screen and (max-width:600px){.mobile,.mobile--active{display:none}}.footer{background-color:#455a64;-webkit-box-shadow:0 -1px 3px rgba(0,0,0,0.12),0 -1px 2px rgba(0,0,0,0.24);box-shadow:0 -1px 3px rgba(0,0,0,0.12),0 -1px 2px rgba(0,0,0,0.24);color:#aaa;height:1em;margin:3em 0 0 0;padding:1em 0;text-align:center;width:100%;font-size:14px;font-weight:400;line-height:20px;}.footer__text{margin:0}.footer__link{color:#dedede;margin:0 .1em;padding:0 .35em;position:relative;text-decoration:none;z-index:10}
</style>
</head>
<body>
<header class="header">
<div class="header-wrapper">
<div class="header__info">
<h1 class="header__title U-header-text">Material acordeon</h1>
<h2 class="header__autor U-header-text">
by<a
href="https://www.twitter.com/_JorgeBarron"
title="Jorge Eduardo"
target="_blank"
class="header__link"
>Jorge Eduardo</a
>
</h2>
</div>
<nav class="nav">
<a
href="http://www.github.com/jorge8168711/Css-Acordeon"
title="GitHub"
target="_blank"
class="nav__btn"
>GitHub</a
><a
href="http://www.github.com/jorge8168711/Css-Acordeon/archive/master.zip"
title="Download"
target="_blank"
class="nav__btn"
>Download</a
>
</nav>
</div>
</header>
<section class="U-material-wrapper">
<section id="mobile" class="mobile">
<input id="mobile-checkbox" type="checkbox" class="mobile__checkbox" /><label
id="mobileBtn"
data-inkColor="rgba(255,255,255, .5)"
for="mobile-checkbox"
title="see me on your phone"
class="ripple mobile__label"
>+</label
><img src="public/images/qrcode.png" alt="qr-code" class="mobile__qr-image" />
</section>
<div class="acordeon">
<div class="acordeon-item">
<input
id="input-1"
type="radio"
name="acordeon-input"
checked="true"
class="acordeon-item__input"
/>
<div class="ripple-parent">
<label
data-inkColor="rgba(255,255,255, .4)"
for="input-1"
class="ripple acordeon-item__label"
>Title 1</label
>
</div>
<article class="post">
<div class="post__content">
<h2 class="post__title">Title of this article</h2>
<h4 class="post__date">28/August/2015</h4>
<p class="post__paragraph">
Now that we know who you are, I know who I am. I'm not a mistake! It all makes
sense! In a comic, you know how you can tell who the arch-villain's going to be?
He's the exact opposite of the hero. And most times they're friends, like you and
me! I should've known way back when... You know why, David? Because of the kids.
They called me Mr Glass.
</p>
<p class="post__paragraph">
Look, just because I don't be givin' no man a foot massage don't make it right for
Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the
nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause
I'll kill the motherfucker, know what I'm sayin'?
</p>
<p class="post__paragraph">
Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my
shirt with my name printed on it? Do you see a little Asian child with a blank
expression on his face sitting outside on a mechanical helicopter that shakes when
you put quarters in it? No? Well, that's what you see at a toy store. And you must
think you're in a toy store, because you're here shopping for an infant named Jeb.
</p>
</div>
</article>
</div>
<div class="acordeon-item">
<input id="input-2" type="radio" name="acordeon-input" class="acordeon-item__input" />
<div class="ripple-parent">
<label
data-inkColor="rgba(255,255,255, .4)"
for="input-2"
class="ripple acordeon-item__label"
>Title 2</label
>
</div>
<article class="post">
<img src="./public/images/img1.jpg" alt="Article Image" class="post__image" />
<div class="post__content">
<h2 class="post__title">Title of this other article</h2>
<h4 class="post__date">28/August/2015</h4>
<p class="post__paragraph">
Now that we know who you are, I know who I am. I'm not a mistake! It all makes
sense! In a comic, you know how you can tell who the arch-villain's going to be?
He's the exact opposite of the hero. And most times they're friends, like you and
me! I should've known way back when... You know why, David? Because of the kids.
They called me Mr Glass.
</p>
<p class="post__paragraph">
Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my
shirt with my name printed on it? Do you see a little Asian child with a blank
expression on his face sitting outside on a mechanical helicopter that shakes when
you put quarters in it? No? Well, that's what you see at a toy store. And you must
think you're in a toy store, because you're here shopping for an infant named Jeb.
</p>
</div>
</article>
</div>
<div class="acordeon-item">
<input id="input-3" type="radio" name="acordeon-input" class="acordeon-item__input" />
<div class="ripple-parent">
<label
data-inkColor="rgba(255,255,255, .4)"
for="input-3"
class="ripple acordeon-item__label"
>Title 3</label
>
</div>
<article class="post">
<img src="./public/images/img2.jpg" alt="Article Image" class="post__image" />
<div class="post__content">
<h2 class="post__title">Title of this great article</h2>
<h4 class="post__date">28/August/2015</h4>
<p class="post__paragraph">
Well, the way they make shows is, they make one show. That show's called a pilot.
Then they show that show to the people who make shows, and on the strength of that
one show they decide if they're going to make more shows. Some pilots get picked and
become television programs. Some don't, become nothing. She starred in one of the
ones that became nothing.
</p>
</div>
</article>
</div>
<div class="acordeon-item">
<input id="input-4" type="radio" name="acordeon-input" class="acordeon-item__input" />
<div class="ripple-parent">
<label
data-inkColor="rgba(255,255,255, .4)"
for="input-4"
class="ripple acordeon-item__label"
>Title 4</label
>
</div>
<article class="post">
<img src="./public/images/img1.jpg" alt="Article Image" class="post__image" />
<div class="post__content">
<h2 class="post__title">Title of this damn article</h2>
<h4 class="post__date">28/August/2015</h4>
<p class="post__paragraph">
Now that we know who you are, I know who I am. I'm not a mistake! It all makes
sense! In a comic, you know how you can tell who the arch-villain's going to be?
He's the exact opposite of the hero. And most times they're friends, like you and
me! I should've known way back when... You know why, David? Because of the kids.
They called me Mr Glass.
</p>
<p class="post__paragraph">
My money's in that office, right? If she start giving me some bullshit about it
ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the
head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where
my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you,
motherfucker. You listen: we go in there, and that nigga Winston or anybody else is
in there, you the first motherfucker to get shot. You understand?
</p>
</div>
</article>
</div>
<div class="acordeon-item">
<input id="input-5" type="radio" name="acordeon-input" class="acordeon-item__input" />
<div class="ripple-parent">
<label
data-inkColor="rgba(255,255,255, .4)"
for="input-5"
class="ripple acordeon-item__label"
>Title 5</label
>
</div>
<article class="post">
<img src="./public/images/img1.jpg" alt="Article Image" class="post__image" />
<div class="post__content">
<h2 class="post__title">Title of this article</h2>
<h4 class="post__date">28/August/2015</h4>
<p class="post__paragraph">
The path of the righteous man is beset on all sides by the iniquities of the selfish
and the tyranny of evil men. Blessed is he who, in the name of charity and good
will, shepherds the weak through the valley of darkness, for he is truly his
brother's keeper and the finder of lost children. And I will strike down upon thee
with great vengeance and furious anger those who would attempt to poison and destroy
My brothers. And you will know My name is the Lord when I lay My vengeance upon
thee.
</p>
<p class="post__paragraph">
The path of the righteous man is beset on all sides by the iniquities of the selfish
and the tyranny of evil men. Blessed is he who, in the name of charity and good
will, shepherds the weak through the valley of darkness, for he is truly his
brother's keeper and the finder of lost children. And I will strike down upon thee
with great vengeance and furious anger those who would attempt to poison and destroy
My brothers. And you will know My name is the Lord when I lay My vengeance upon
thee.
</p>
</div>
</article>
</div>
</div>
</section>
<link rel="stylesheet" type="text/css" href="./public/css/index.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="./public/js/index.min.js"></script>
</body>
</html>