Card.dinamico/index.html at master · fullstack-cleverton/Card.dinamico · GitHub

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
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pure CSS Card Carousel</title>
  <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


      <link rel="stylesheet" href="css/style.css">


</head>

<body>

  <div id='wrap'>
  <input class='trigger' name='rad' type='radio'>
  <input class='trigger' name='rad' type='radio'>
  <input class='trigger' name='rad' type='radio'>
  <input class='trigger' name='rad' type='radio'>
  <input class='trigger' name='rad' type='radio'>
  <input class='trigger' name='rad' type='radio'>
  <input class='trigger' name='rad' type='radio'>
  <input checked='checked' class='trigger' name='rad' type='radio'>
  <div class='innerwrap'>
    <input type='checkbox'>
    <input type='checkbox'>
    <input type='checkbox'>
    <input type='checkbox'>
    <input type='checkbox'>
    <input type='checkbox'>
    <input type='checkbox'>
    <input type='checkbox'>
    <div class='cards'>
      <div class='cardwrap'>
        <div class='card'>
          <div class='inner'>
            <h1><span>Hey Now</span>Somebody</h1>
            <div class='text'>
              <p>Well the years start coming and they don't stop coming</p>
            </div>
            <div class='link'>
              <p>Fed to the rules and I hit the ground running</p>
            </div>
          </div>
        </div>
      </div>
      <div class='cardwrap'>
        <div class='card'>
          <div class='inner'>
            <h1><span>You're an All-Star</span>once told</h1>
            <div class='text'>
              <p>Didn't make sense not to live for fun</p>
            </div>
            <div class='link'>
              <p>Your brain gits smart but your head gits dumb</p>
            </div>
          </div>
        </div>
      </div>
      <div class='cardwrap'>
        <div class='card'>
          <div class='inner'>
            <h1><span>Get your game on</span>me the world</h1>
            <div class='text'>
              <p>So much to do, so much to see</p>
            </div>
            <div class='link'>
              <p>So what's wrong with taking the back streets?</p>
            </div>
          </div>
        </div>
      </div>
      <div class='cardwrap'>
        <div class='card'>
          <div class='inner'>
            <h1><span>go play</span>was gonna</h1>
            <div class='text'>
              <p>You'll never know if you don't go You'll never shine if you don't glow</p>
            </div>
            <div class='link'>
              <p>It's a cool place and they say it gits colder</p>
            </div>
          </div>
        </div>
      </div>
      <div class='cardwrap'>
        <div class='card'>
          <div class='inner'>
            <h1><span>Hey Now</span>roll me</h1>
            <div class='text'>
              <p>You're bundled up now, wait till you git older But the meteor men beg to differ</p>
            </div>
            <div class='link'>
              <p>Judging by the hole in the satellite picture</p>
            </div>
          </div>
        </div>
      </div>
      <div class='cardwrap'>
        <div class='card'>
          <div class='inner'>
            <h1><span>you're a rockstar</span>I ain't the</h1>
            <div class='text'>
              <p>The ice we skate is getting pretty thin</p>
            </div>
            <div class='link'>
              <p>The water's getting warm so you might as well swim</p>
            </div>
          </div>
        </div>
      </div>
      <div class='cardwrap'>
        <div class='card'>
          <div class='inner'>
            <h1><span>get the show on</span>sharpest tool</h1>
            <div class='text'>
              <p>My world's on fire, how about yours? That's the way I like it and I never get bored</p>
            </div>
            <div class='link'>
              <p>Somebody once asked could I spare some change for gas?</p>
            </div>
          </div>
        </div>
      </div>
      <div class='cardwrap'>
        <div class='card'>
          <div class='inner'>
            <h1><span>get paid</span>in the shed</h1>
            <div class='text'>
              <p>I need to get myself away from this place I said yep what a concept</p>
            </div>
            <div class='link'>
              <p>I could use a little fuel myself And we could all use a little change</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


</body>

</html>