CSS COMPONENTS

bower install components-css
          <div class="carousel-box">

            <input class="carousel-open" type="radio" id="carousel-1" name="carousel" checked>
            <div class="carousel-item">
              <img src="assets/images/harley-1.jpg" alt="">
            </div>
            <input class="carousel-open" type="radio" id="carousel-2" name="carousel">
            <div class="carousel-item">
              <img src="assets/images/harley-2.jpg" alt="">
            </div>
            <input class="carousel-open" type="radio" id="carousel-3" name="carousel">
            <div class="carousel-item">
              <img src="assets/images/harley-3.jpg" alt="">
            </div>

            <label for="carousel-3" class="carousel-control prev control-1"></label>
            <label for="carousel-2" class="carousel-control next control-1"></label>
            <label for="carousel-1" class="carousel-control prev control-2"></label>
            <label for="carousel-3" class="carousel-control next control-2"></label>
            <label for="carousel-2" class="carousel-control prev control-3"></label>
            <label for="carousel-1" class="carousel-control next control-3"></label>

            <ol class="carousel-indicators">
              <li><label for="carousel-1" class="carousel-bullet"></label></li>
              <li><label for="carousel-2" class="carousel-bullet"></label></li>
              <li><label for="carousel-3" class="carousel-bullet"></label></li>
            </ol>
        </div>
        
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
          //CSS
          @-webkit-keyframes alpha {
              0%{
                  opacity: 0;
              }
              100%{
                  opacity: 1;
              }
          }
            input{
                display: none;
            }
            .box-estrela{
                width: 76px;;
                height: 111px;
                float: left;
                margin-right: 10px;
                position: relative;
                cursor: pointer;
            }
            .estrela-diagrama,
            .estrela-diagrama:before,
            .estrela-diagrama:after{
                width: 0px;
                height: 0px;
                position: absolute;
                border-right: 38px solid transparent;
                border-left: 38px solid transparent;
                border-bottom: 22px solid #c0c8c9;
            }              
            .estrela-diagrama{
                z-index: 5;
                transform: rotate(-180deg);
                left: 0px;
                top: 47px;
            }
            .estrela-diagrama:before{
                content: "";
                z-index: 6;
                transform: rotate(-72deg);
                left: -36px;
                top: 1px;
            }
            .estrela-diagrama:after{
                content: "";
                z-index: 6;
                transform: rotate(71deg);
                left: -40px;
                top: 1px;
            }
            #estrela-1:checked ~ label[for="estrela-1"] .estrela-diagrama,
            #estrela-1:checked ~ label[for="estrela-1"] .estrela-diagrama:before,
            #estrela-1:checked ~ label[for="estrela-1"] .estrela-diagrama:after{
                -webkit-animation: alpha .2s ease;
                width: 0;
                height: 0;
                position: absolute;
                border-right: 38px solid transparent;
                border-left: 38px solid transparent;
                border-bottom: 22px solid gold;
            }
            #estrela-2:checked ~ label[for="estrela-1"] .estrela-diagrama,
            #estrela-2:checked ~ label[for="estrela-1"] .estrela-diagrama:before,
            #estrela-2:checked ~ label[for="estrela-1"] .estrela-diagrama:after,
            #estrela-2:checked ~ label[for="estrela-2"] .estrela-diagrama,
            #estrela-2:checked ~ label[for="estrela-2"] .estrela-diagrama:before,
            #estrela-2:checked ~ label[for="estrela-2"] .estrela-diagrama:after{
                -webkit-animation: alpha .2s ease;
                width: 0;
                height: 0;
                position: absolute;
                border-right: 38px solid transparent;
                border-left: 38px solid transparent;
                border-bottom: 22px solid gold;
            }
            #estrela-3:checked ~ label[for="estrela-1"] .estrela-diagrama,
            #estrela-3:checked ~ label[for="estrela-1"] .estrela-diagrama:before,
            #estrela-3:checked ~ label[for="estrela-1"] .estrela-diagrama:after,
            #estrela-3:checked ~ label[for="estrela-2"] .estrela-diagrama,
            #estrela-3:checked ~ label[for="estrela-2"] .estrela-diagrama:before,
            #estrela-3:checked ~ label[for="estrela-2"] .estrela-diagrama:after,
            #estrela-3:checked ~ label[for="estrela-3"] .estrela-diagrama,
            #estrela-3:checked ~ label[for="estrela-3"] .estrela-diagrama:before,
            #estrela-3:checked ~ label[for="estrela-3"] .estrela-diagrama:after{
                -webkit-animation: alpha .2s ease;
                width: 0;
                height: 0;
                position: absolute;
                border-right: 38px solid transparent;
                border-left: 38px solid transparent;
                border-bottom: 22px solid gold;
            }
            #estrela-4:checked ~ label[for="estrela-1"] .estrela-diagrama,
            #estrela-4:checked ~ label[for="estrela-1"] .estrela-diagrama:before,
            #estrela-4:checked ~ label[for="estrela-1"] .estrela-diagrama:after,
            #estrela-4:checked ~ label[for="estrela-2"] .estrela-diagrama,
            #estrela-4:checked ~ label[for="estrela-2"] .estrela-diagrama:before,
            #estrela-4:checked ~ label[for="estrela-2"] .estrela-diagrama:after,
            #estrela-4:checked ~ label[for="estrela-3"] .estrela-diagrama,
            #estrela-4:checked ~ label[for="estrela-3"] .estrela-diagrama:before,
            #estrela-4:checked ~ label[for="estrela-3"] .estrela-diagrama:after,
            #estrela-4:checked ~ label[for="estrela-4"] .estrela-diagrama,
            #estrela-4:checked ~ label[for="estrela-4"] .estrela-diagrama:before,
            #estrela-4:checked ~ label[for="estrela-4"] .estrela-diagrama:after{
                -webkit-animation: alpha .2s ease;
                width: 0;
                height: 0;
                position: absolute;
                border-right: 38px solid transparent;
                border-left: 38px solid transparent;
                border-bottom: 22px solid gold;
            }
            #estrela-5:checked ~ label[for="estrela-1"] .estrela-diagrama,
            #estrela-5:checked ~ label[for="estrela-1"] .estrela-diagrama:before,
            #estrela-5:checked ~ label[for="estrela-1"] .estrela-diagrama:after,
            #estrela-5:checked ~ label[for="estrela-2"] .estrela-diagrama,
            #estrela-5:checked ~ label[for="estrela-2"] .estrela-diagrama:before,
            #estrela-5:checked ~ label[for="estrela-2"] .estrela-diagrama:after,
            #estrela-5:checked ~ label[for="estrela-3"] .estrela-diagrama,
            #estrela-5:checked ~ label[for="estrela-3"] .estrela-diagrama:before,
            #estrela-5:checked ~ label[for="estrela-3"] .estrela-diagrama:after,
            #estrela-5:checked ~ label[for="estrela-4"] .estrela-diagrama,
            #estrela-5:checked ~ label[for="estrela-4"] .estrela-diagrama:before,
            #estrela-5:checked ~ label[for="estrela-4"] .estrela-diagrama:after,
            #estrela-5:checked ~ label[for="estrela-5"] .estrela-diagrama,
            #estrela-5:checked ~ label[for="estrela-5"] .estrela-diagrama:before,
            #estrela-5:checked ~ label[for="estrela-5"] .estrela-diagrama:after{
                -webkit-animation: alpha .2s ease;
                width: 0;
                height: 0;
                position: absolute;
                border-right: 38px solid transparent;
                border-left: 38px solid transparent;
                border-bottom: 22px solid gold;
            }
 
        
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
          //SASS
          .carousel-box{
            width: 100%;
            height: 440px;
            display: inline-block;
            position: relative;
              .carousel-open{
                display:none;
              }
              .carousel-item{
                display:none;
                width: 100%;
                height: 440px;
                position: absolute;
                z-index: 100;

                  img{
                    width: 100%;
                  }
              }
              .carousel-control{
                display:none;
                width: 50px;
                height: 83px;
                position: absolute;
                z-index: 1001;
                top: 179px;
                padding: 3px 15px;
                cursor: pointer;
                font-size: 0px;
              }
              .prev{
                left: 10px;
                &:hover{
                  &:before,
                  &:after{
                    background-color: $vermelho;
                  }
                }
                &:before,
                &:after{
                  content: "";
                  width: 50px;
                  height: 5px;
                  position: absolute;
                  background-color: $branco;
                  transition: all .3s ease;
                }
                &:before{
                  transform: rotate(-55deg);
                  top: 21px;
                }
                &:after{
                  transform: rotate(55deg);
                  left: 14px;
                  top: 60px;
                }
              }
              .next{
                right: 10px;
                &:hover{
                  &:before,
                  &:after{
                    background-color: $vermelho;
                  }
                }
                &:before,
                &:after{
                  content: "";
                  width: 50px;
                  height: 5px;
                  position: absolute;
                  background-color: $branco;
                }
                &:before{
                  transform: rotate(-125deg);
                  top: 21px;
                }
                &:after{
                  transform: rotate(125deg);
                  left: 14px;
                  top: 60px;
                }
              }
              .carousel-indicators{
                list-style: none;
                width: 100%;
                position: absolute;
                z-index: 1002;
                bottom:0px;
                margin:0;
                padding:0;
                text-align: center;

                  li {
                      display: inline-block;
                      margin: 0 5px;

                        .carousel-bullet {
                          color: #fff;
                          cursor: pointer;
                          display: block;
                          font-size: 35px;
                      }
                  }

              }
          }
          .carousel-open:checked + .carousel-item{
            display:block;
            -webkit-animation: alpha 4s ease-out;
          }
          #carousel-1:checked ~ .control-1,
          #carousel-2:checked ~ .control-2,
          #carousel-3:checked ~ .control-3{
            display: block;
          }
          #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
          #carousel-2:checked ~ .control-1 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
          #carousel-3:checked ~ .control-1 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
            color: $vermelho;
          }

        

Container do collapse 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque quae eos natus est asperiores consectetur sit, deserunt saepe totam tenetur numquam dicta harum distinctio, accusamus sed minima, reiciendis expedita.

Container do collapse 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque quae eos natus est asperiores consectetur sit, deserunt saepe totam tenetur numquam dicta harum distinctio, accusamus sed minima, reiciendis expedita.

Container do collapse 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque quae eos natus est asperiores consectetur sit, deserunt saepe totam tenetur numquam dicta harum distinctio, accusamus sed minima, reiciendis expedita.

Container do collapse 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque quae eos natus est asperiores consectetur sit, deserunt saepe totam tenetur numquam dicta harum distinctio, accusamus sed minima, reiciendis expedita.

bower install components-css
            <div class="collapse-box">

              <div class="collapse-painel">

                <input type="checkbox" id="collapse-1" class="check-open">
                <label for="collapse-1" class="collapse-nav">Titulo do collapse 1 <span class="icon"></span></label>

                  <div class="collapse-container">

                    <h2>Container do collapse 1</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque
                     quae eos natus est asperiores consectetur sit, deserunt saepe totam tenetur 
                     numquam dicta harum distinctio, accusamus sed minima, reiciendis expedita.</p>

                  </div>


              </div>

              <div class="collapse-painel">

                <input type="checkbox" id="collapse-2" class="check-open">
                <label for="collapse-2" class="collapse-nav">Titulo do collapse 2 <span class="icon"></span></label>

                  <div class="collapse-container">

                    <h2>Container do collapse 2</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque 
                    quae eos natus est asperiores consectetur sit, deserunt saepe totam tenetur numquam 
                    dicta harum distinctio, accusamus sed minima, reiciendis expedita.</p>

                  </div>


              </div>

              <div class="collapse-painel">

                <input type="checkbox" id="collapse-3" class="check-open">
                <label for="collapse-3" class="collapse-nav">Titulo do collapse 3 <span class="icon"></span></label>

                  <div class="collapse-container">

                    <h2>Container do collapse 3</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque 
                    quae eos natus est asperiores consectetur sit, deserunt saepe totam tenetur numquam 
                    dicta harum distinctio, accusamus sed minima, reiciendis expedita.</p>

                  </div>


              </div>

              <div class="collapse-painel">

                <input type="checkbox" id="collapse-4" class="check-open">
                <label for="collapse-4" class="collapse-nav">Titulo do collapse 4 <span class="icon"></span></label>

                  <div class="collapse-container">

                    <h2>Container do collapse 4</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque quae 
                    eos natus est asperiores consectetur sit, deserunt saepe totam tenetur numquam dicta 
                    harum distinctio, accusamus sed minima, reiciendis expedita.</p>

                  </div>


              </div>

            </div>
          
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
            //CSS
            @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100);
            body{
                font-family: 'Roboto', sans-serif;;
                font-size: 100%;
            }
            @-webkit-keyframes alpha {
                0%{
                    opacity: 0;
                }
                100%{
                    opacity: 1px;
                }
            }
            .collapse-box{
                width: 100%;
            }
            .collapse-box .check-open{
                display: none;
            }
            .collapse-box .collapse-painel{
                width: 100%;
                display: inline-block;
            }
            .collapse-box .collapse-painel .collapse-nav{
                width: 98%;
                display: inline-block;
                cursor: pointer;
                background-color: #F2F2F2;
                padding: 1%;
                margin-bottom: 5px;
                font-size: .9em;
                color: #000000;
                font-weight: 600;
                transition: all .25s linear;
            }
            .collapse-box .collapse-painel .collapse-nav:hover{
                background-color: #E6E6E6;
            }
            .collapse-box .collapse-painel .collapse-nav .icon{
                width: 12px;
                height: 10px;
                float: right;
                margin: 5px 6px;
            }
            .collapse-box .collapse-painel .collapse-nav .icon:after{
                content: "";
                width: 0;
                height: 0;
                border-top: 10px solid #000;
                border-left: 5px solid transparent;
                position: absolute;
                border-right: 5px solid transparent;
            }
            .collapse-box .collapse-painel .collapse-nav .icon:before{
                content: "";
                width: 0;
                height: 0;
                border-bottom: 10px solid #000;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                position: absolute;
                opacity: 0;
            }
            .collapse-box .collapse-painel .collapse-container{
                width: 100%;
                height: auto;
                display: none;
            }
            .collapse-box .collapse-painel .check-open:checked ~ .collapse-container{
                display: block;
                -webkit-animation: alpha 2s ease-out;
            }
            .collapse-box .collapse-painel .check-open:checked ~ .collapse-nav .icon:after{
                opacity: 0;
            }
            .collapse-box .collapse-painel .check-open:checked ~ .collapse-nav .icon:before{
                opacity: 1;
            }
          
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
            //SASS
            .collapse-box{
              width: 100%;

                .check-open{
                  display:none;
                }

                .collapse-painel{
                  width: 100%;
                  display: inline-block;

                    .collapse-nav{
                      width: 98%;
                      display: inline-block;
                      cursor: pointer;
                      background-color:#F2F2F2;
                      padding: 1%;
                      margin-bottom: 5px;
                      font-size: .9em;
                      color: #000;
                      font-weight: 600;
                      transition: all .25s linear;

                        &:hover{
                          background-color:#E6E6E6;
                        }

                        .icon{
                          width: 12px;
                          height: 10px;
                          float: right;
                          margin: 5px 6px;

                            &:after{
                              content: "";
                              width: 0;
                              height: 0;
                              border-top: 10px solid #000;
                              border-left: 5px solid transparent;
                              position: absolute;
                              border-right: 5px solid transparent;
                            }
                            &:before{
                              content: "";
                              width: 0;
                              height: 0;
                              border-bottom: 10px solid #000;
                              border-left: 5px solid transparent;
                              position: absolute;
                              border-right: 5px solid transparent;
                              opacity: 0;
                            }
                        }
                    }

                    .collapse-container{
                      width: 100%;
                      height: auto;
                      display: none;
                    }
                    .check-open:checked ~ .collapse-container{
                      display: block;
                      -webkit-animation: alpha 2s ease-out;

                    }
                    .check-open:checked ~ .collapse-nav .icon:after{
                      opacity: 0;
                    }
                    .check-open:checked ~ .collapse-nav .icon:before{
                      opacity: 1;
                    }


                }
            }

          

PAINEL 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam laboriosam modi quaerat, doloremque placeat perspiciatis distinctio eos sit! Dignissimos eum consectetur vero perferendis iusto blanditiis nulla repellat repellendus, aliquid.

PAINEL 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam laboriosam modi quaerat, doloremque placeat perspiciatis distinctio eos sit! Dignissimos eum consectetur vero perferendis iusto blanditiis nulla repellat repellendus, aliquid.

PAINEL 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam laboriosam modi quaerat, doloremque placeat perspiciatis distinctio eos sit! Dignissimos eum consectetur vero perferendis iusto blanditiis nulla repellat repellendus, aliquid.

bower install components-css
            <div class="tab-box">

              <div class="tab-painel">

                <input type="radio" id="tab-1" name="tab-content" class="tab-open" checked>
                <label for="tab-1" class="tab-nav">TITULO 1 </label>

                  <div class="tab-inner">

                    <h2>PAINEL 1</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam 
                    laboriosam modi quaerat, doloremque placeat perspiciatis distinctio eos sit! 
                    Dignissimos eum consectetur vero perferendis iusto blanditiis nulla repellat 
                    repellendus, aliquid.</p>

                  </div>
              </div>

              <div class="tab-painel">

                <input type="radio" id="tab-2" name="tab-content" class="tab-open">
                <label for="tab-2" class="tab-nav">TITULO 2</label>

                  <div class="tab-inner">

                    <h2>PAINEL 2</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam 
                    laboriosam modi quaerat, doloremque placeat perspiciatis distinctio eos sit! 
                    Dignissimos eum consectetur vero perferendis iusto blanditiis nulla repellat r
                    epellendus, aliquid.</p>

                  </div>
              </div>

              <div class="tab-painel">

                <input type="radio" id="tab-3" name="tab-content" class="tab-open">
                <label for="tab-3" class="tab-nav">TITULO 3</label>
                  <div class="tab-inner">

                    <h2>PAINEL 3</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam l
                    aboriosam modi quaerat, doloremque placeat perspiciatis distinctio eos sit! 
                    Dignissimos eum consectetur vero perferendis iusto blanditiis nulla repellat 
                    repellendus, aliquid.</p>

                  </div>
              </div>

            </div>
          
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
            @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100);
            body{
                font-family: 'Roboto', sans-serif;;
                font-size: 100%;
            }
            @-webkit-keyframes alpha {
                0%{
                    opacity: 0;
                }
                100%{
                    opacity: 1px;
                }
            }
            .tab-box{
                width: 100%;
            }
            .tab-box .tab-open{
                display: none;
            }
            .tab-box .tab-painel{
                min-width: 100px;
                display: inline-block;
            }
            .tab-box .tab-painel .tab-nav{
                width: 100%;
                display: inline-block;
                cursor: pointer;
                border: 1px solid #666;
                line-height: 30px;
                text-align: center;
                font-weight: 500;
                font-size: .9em;
                color: #2E2929;
            }
            .tab-box .tab-painel .tab-nav:hover{
                background-color: #F2F2F2;
            }
            .tab-box .tab-inner{
                width: 98%;
                height: auto;
                padding: 1%;
                margin-top: 5px;
                display: inline-block;
                background-color: #F2F2F2;
                position: absolute;
                left: 0;
                opacity: 0;
                visibility: hidden;
            }
            .tab-box .tab-open:checked ~ .tab-inner{
                opacity: 1;
                visibility: visible;
                -webkit-animation: alpha 2s ease;
            }
            .tab-box .tab-open:checked ~ label{
                background-color: #F2F2F2;
            }
 
          
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
            //SASS
            .tab-box{
              width: 100%;
              margin-bottom: 50px;

                .tab-open{
                  display: none;
                }
                .tab-painel{
                  min-width: 100px;
                  display: inline-block;

                    .tab-nav{
                      width: 100%;
                      display: inline-block;
                      cursor: pointer;
                      border: 1px solid #666;
                      line-height: 30px;
                      text-align: center;
                      font-weight: 500;
                      font-size: .9em;
                      color: $preto;

                        &:hover{
                          background-color:#F2F2F2;
                        }


                    }
                }
                .tab-inner{
                  width: 98%;
                  height: auto;
                  padding: 1%;
                  margin-top: 5px;
                  display: inline-block;
                  background-color: #F2F2F2;
                  position: absolute;
                  left: 0;
                  opacity: 0;
                  visibility: hidden;
                }

                .tab-open:checked ~ .tab-inner{
                  opacity: 1;
                  visibility: visible;
                  -webkit-animation: alpha 2s ease-in;
                }
                .tab-open:checked ~ label{
                  background-color:#F2F2F2;
                }


            }


          
bower install components-css
          <div class="box-modal">

            <label for="modal" class="btn">Clique e veja a magica!</label>
            <input type="checkbox" id="modal" name="modal">

              <div class="modal-content">

                <div class="modal-in">

                  <label for="modal" id="modal" class="modal-fechar">X</label>

                  <h2>Titulo modal</h2>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia fugiat earum 
                  tempora reprehenderit aliquid consectetur ut, quod a dicta alias esse facere 
                  repellendus, libero mollitia repellat corporis maiores, delectus illum!</p>

                </div>

              </div>


        </div>
        
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
          //CSS
          @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100);
            body{
                font-family: 'Roboto', sans-serif;;
                font-size: 100%;
            }
            @-webkit-keyframes alpha {
                0%{
                    opacity: 0;
                }
                100%{
                    opacity: 1px;
                }
            }
            .box-modal{
                width: 100%;
            }
            .box-modal input[type="checkbox"]{
                display: none;
            }
            .box-modal .btn{
                width: 100%;
                height: 40px;
                display: inline-block;
                background: #73b1d4;
                box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
                line-height: 40px;
                text-align: center;
                font-weight: 500;
                font-size: 1.2em;
                color: #FFFFFF;
                cursor: pointer;
            }
            .box-modal .btn:hover{
                background: #679ebe;
            }
            .box-modal .modal-content{
                width: 100%;
                height: 100%;
                position: fixed;
                z-index: 1000;
                background: rgba(0, 0, 0, 0.6);;
                top: 0;
                left: 0;
                display: none;
            }
            .modal-in{
                widht: 500px;
                height: 300px;
                background: #FFFFFF;
                border: 1px solid #999;
                position: absolute;
                z-index: 1000;
                top: 50%;
                left: 50%;
                margin: -150px 0 0 -250px;
                padding: 20px;
            }
            .modal-in .modal-fechar{
                position: absolute;
                z-index: 1002;
                top: -11px;
                right: -13px;
                padding: 5px 10px;
                cursor: pointer;
                background: red;
                border-radius: 50%;
                font-weight: 500;
                font-size: .8em;
                color: #FFFFFF;
            }
            #modal:checked ~ .modal-content{
                display: block;
                -webkit-animation:  alpha 1s ease-in;
            }

 
        
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
          //SASS
          .box-modal{
            width: 100%;

              input[type="checkbox"]{
                display: none;
              }
              .btn{
                width: 100%;
                height: 40px;
                display: inline-block;
                background: #73b1d4;
                box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
                line-height: 40px;
                text-align: center;
                font-weight: 500;
                font-size: 1.2em;
                color: $branco;
                cursor: pointer;

                  &:hover{
                    background: #679ebe;
                  }
              }

              .modal-content{
                width:100%;
                height:100%;
                z-index:1000;
                background: rgba(0,0,0,0.6);
                position: fixed;
                top: 0;
                left: 0;
                display: none;
              }

          }
          .modal-in{
            width: 500px;
            height: 300px;
            background: #FFF;
            border: 1px solid #999;
            position: absolute;
            z-index: 1001;
            top:50%;
            left:50%;
            margin: -150px 0 0 -250px;
            padding:20px;

              .modal-fechar{
                position: absolute;
                z-index: 1002;
                top: -11px;
                right: -13px;
                padding: 5px 10px;
                cursor: pointer;
                background: red;
                border-radius: 50%;
                font-weight: 500;
                font-size: .8em;
                color: $branco;
              }
          }
          #modal:checked ~ .modal-content{
            display:block;
            -webkit-animation: alpha 1s ease-in;
          }


        
    <input type="checkbox" id="menu" class="check-open">
    <label for="menu" class="menu-open"></label>

      <nav class="menu-box">
        <label for="menu" class="menu-fechar">X</label>
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5</a></li>
          <li><a href="#">Item 6</a></li>
          <li><a href="#">Item 7</a></li>
          <li><a href="#">Item 8</a></li>
          <li><a href="#">Item 9</a></li>
          <li><a href="#">Item 10</a></li>
          <li><a href="#">Item 11</a></li>
        </ul>
      </nav>
    
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
      //CSS
      @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100);
      body{
          font-family: 'Roboto', sans-serif;;
          font-size: 100%;
      }
      .check-open{
          display: none;
      }
      .menu-open{
          width: 40px;
          height: 32px;
          display: flex;
          float: left;
          background: #000000;
          cursor: pointer;
          position: relative;
          transition: all .25s linear;
      }
      .menu-open:before{
          content: "";
          display: block;
          margin: 7px auto;
          width: 70%;
          height: 0.25em;
          background: #FFFFFF;
          box-shadow: 0 .45em 0 0 #FFF, 0 .9em 0 0 #FFF;
      }
      .menu-open:hover, .menu-open:focus{
          background: #FA58F4;
      }
      .menu-box{
          width: 300px;
          height: 100%;
          padding: 50px 10px;
          position: fixed;
          top: 0px;
          left: 0px;
          z-index: 1000;
          background: #333333;
          transform: translateX(-320px);;
          transition: all .25s linear;;
      }
      .menu-box .menu-fechar{
          font-weight: 500;
          color: #FFFFFF;
          cursor: pointer;
          position: absolute;
          top: 10px;
          right: 20px;
      }
      .menu-box .menu-fechar:hover{
          color: #CC0000;
      }
      .menu-box ul{
          width: 100%;
          height: auto;
          float: left;
          margin: 0;
          padding: 0;
          list-style: none;
      }
      .menu-box li{
          width: 100%;
          height: 40px;
          float: left;
          border-bottom: 2px solid #666666;
      }
      .menu-box a{
          width: 98%;
          height: 40px;
          float: left;
          padding-left: 2%;
          text-decoration: none;
          line-height: 40px;
          font-weight: 500;
          font-size: 1em;
          color: #FFFFFF;
      }
      .menu-box a:hover{
          background: #666666;
      }
      #menu:checked ~ .menu-box{
          left: 0px;
          transform: translateX(0);
          transition: all .25s linear;
      }
    
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
      //SASS
      .check-open{
        display: none;
      }

      .menu-open{
        width: 40px;
        height: 32px;
        display: flex;
        margin: 0 auto;
        background: #000;
        cursor: pointer;
        position: relative;
        transition: all .25s linear;


          &:before{
            content: "";
            display: block;
            margin: 7px auto;
            width: 70%;
            height: 0.25em;
            background: #FFF;
            box-shadow: 0 .45em 0 0 #FFF, 0 .9em 0 0 #FFF;
          }
          &:hover,
          &:focus{
            background: #FA58F4;
          }
      }
      .menu-box{
        width:300px;
        height: 100%;
        padding: 50px 10px;
        position: fixed;
        top:0px;
        left:0px;
        z-index: 1000;
        background: #333333;
        transform: translateX(-320px);
        transition: all .25s linear;

          .menu-fechar{
            font-weight: 500;
            color: #FFF;
            cursor: pointer;
            position: absolute;
            top:10px;
            right:20px;

              &:hover{
                color: #CC0000;
              }
          }
          ul{
            width: 100%;
            height: auto;
            float: left;
            margin: 0;
            padding: 0;
            list-style: none;
          }
          li{
            width: 100%;
            height: 40px;
            float: left;
            border-bottom:2px solid #666666;
          }
          a{
            width: 98%;
            height: 40px;
            float: left;
            padding-left:2%;
            text-decoration:none;
            line-height: 40px;
            font-weight: 500;
            font-size: 1em;
            color: $branco;

              &:hover{
                background: #666666;
              }
          }
      }
      #menu:checked ~ .menu-box{
        left: 0px;
        transform: translateX(0);
        transition: all .25s linear;
      }

    
Harckers
Card Titulo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus laborum atque, a iste numquam adipisci eos magni amet hic tempora natus eaque, libero deserunt consequatur eius! Similique, nesciunt tempore expedita.

bower install components-css
      <div class="card-box">
        <figure class="card-img">
          <img src="assets/images/harckers.jpg" alt="Harckers">
        </figure>
          <div class="card-titulo">
            Card Titulo
          </div>

            <input type="checkbox" id="click-card">
            <div class="click-card">
              <label for="click-card"></label>
            </div>
              <article class="card-texto">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus laborum atque, a iste numquam adipisci eos magni amet hic tempora natus eaque, libero deserunt consequatur eius! Similique, nesciunt tempore expedita.</p>
              </article>

      </div>
    
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
      //CSS
      @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100);
      body{
          font-family: 'Roboto', sans-serif;;
          font-size: 100%;
      }
      @-webkit-keyframes alpha {
          0%{
              opacity: 0;
          }
          100%{
              opacity: 1px;
          }
      }
      .card-box{
          width: 390px;
          height: 280px;
          float: left;
          box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);;
          position: relative;
      }
      .card-box input[type="checkbox"]{
          display: none;
      }
      .card-img{
          width: 100%;
          height: auto;
          float: left;
          margin: 0;
      }
      .card-box .card-titulo{
          width: 350px;
          height: 240px;
          padding: 10px 20px 0;
          font-weight: 300;
          color: #FF1493;
          font-size: 1.4em;
      }
      .card-box .click-card{
          width: 26px;
          height: 14px;
          position: absolute;
          right: 10px;
          bottom: 10px;
          z-index: 1;
      }
      .card-box .click-card label{
          width: 26px;
          height: 14px;
          float: left;
          cursor: pointer;
      }
      .card-box .click-card label:before{
          content: "";
          width: 15px;
          height: 2px;
          position: absolute;
          left: 0px;
          top: 6px;
          background-color: #2E2929;
          transform: rotate(-50deg);
      }
      .card-box .click-card label:after{
          content: "";
          width: 15px;
          height: 2px;
          position: absolute;
          left: 10px;
          top: 6px;
          background-color: #2E2929;
          transform: rotate(50deg);
      }
      .card-box .card-texto{
          display: none;
          width: 350px;
          height: 240px;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
          padding: 20px;
          line-height: 30px;
          font-family: 'Roboto', sans-serif;
          font-weight: 500;
          color: #2E2929;
          background-color: #FFFFFF;
      }
      .card-box #click-card:checked ~ .card-texto{
          display: block;
          -webkit-animation: alpha .3s linear;
      }
      .card-box #click-card:checked ~ .click-card label:after{
          content: "";
          width: 15px;
          height: 2px;
          left: 0px;
          top: 6px;
          position: absolute;
          background-color: #2E2929;
          transform: rotate(50deg);
      }

    
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
      //SASS
      .card-box{
        width: 390px;
        height: 280px;
        margin: 0 auto;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        position: relative;

          input[type="checkbox"]{
            display: none;
          }
          .card-img{
            width: 100%;
            height: auto;
            float: left;
            margin: 0px;
          }

          .card-titulo{
            width: 350px;
            height: 240px;
            padding: 10px 20px 0;
            font-weight: 300;
            color: $rosa;
            font-size: 1.4em;
          }
          .click-card{
            width: 26px;
            height: 14px;
            position: absolute;
            right: 10px;
            bottom: 10px;
            z-index: 1;
              label{
                width: 26px;
                height: 14px;
                float: left;
                cursor: pointer;
                &:before{
                  content: "";
                  width: 15px;
                  height: 2px;
                  position: absolute;
                  left: 0px;
                  top: 6px;
                  background-color: #2E2929;
                  transform: rotate(-50deg);
                }
                &:after{
                  content: "";
                  width: 15px;
                  height: 2px;
                  left: 10px;
                  top: 6px;
                  position: absolute;
                  background-color: #2E2929;
                  transform: rotate(50deg);
                }
              }
          }
          .card-texto{
            display: none;
            width: 350px;
            height: 240px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            padding: 20px;
            line-height: 30px;
            font-family: $font-padrao;
            font-weight: 500;
            color: $preto;
            background-color: $branco;
          }
          #click-card:checked ~ .card-texto{
            display: block;
            -webkit-animation: alpha .3s linear;
          }
          #click-card:checked ~ .click-card{
              label{
                &:after{
                  content: "";
                  width: 15px;
                  height: 2px;
                  left: 0px;
                  top: 6px;
                  position: absolute;
                  background-color: #2E2929;
                  transform: rotate(50deg);
                }
              }

          }
      }

    
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
bower install components-css
      <div class="drop-box">
          <label for="open-drop" class="title">Selecione um item</label>
          <input type="checkbox" id="open-drop">
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
          </ul>
      </div>
    
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
      //CSS
      @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100);
      body{
          font-family: 'Roboto', sans-serif;;
          font-size: 100%;
      }
      @-webkit-keyframes animationDropdown {
          0%{
              height: 0px;
          }
          100%{
              height: 360px;
          }
      }
      @-webkit-keyframes alpha {
          0%{
              opacity: 0;
          }
          100%{
              opacity: 1px;
          }
      }
      .drop-box{
          width: 350px;
          height: auto;
          float: left;
          position: relative;
      }
      .drop-box input[type="checkbox"]{
          display: none;
      }
      .drop-box .title{
          width: 340px;
          height: 50px;
          float: left;
          position: relative;
          padding-left: 10px;
          background-color: #2E2929;
          line-height: 50px;
          font-weight: 500;
          color: #FFFFFF;
          cursor: pointer;
          transition: all .3s ease;
      }
      .drop-box .title:after{
          content: "\25BC";
          width: 50px;
          height: 50px;
          position: absolute;
          top: 0;
          right: 0;
          background-color: #FF00B7;
          text-align: center;
          line-height: 55px;
          font-size: 1.2em;
      }
      .drop-box .title:hover:after{
          content: "\25BC";
          width: 50px;
          height: 50px;
          position: absolute;
          top: 0;
          right: 0;
          background-color: #FF1493;
          text-align: center;
          line-height: 55px;
          font-size: 1.2em;
      }
      .drop-box ul{
          display: none;
          width: 100%;
          height: auto;
          float: left;
          position: absolute;
          top: 57px;
          background-color: #2E2929;
          -webkit-animation: animationDropdown .3s ease;
          padding: 0px;
          margin: 0px;
          list-style: none;
          text-decoration: none;
      }
      .drop-box li{
          width: 330px;
          height: 40px;
          float: left;
          padding: 10px;
          line-height: 50px;
          font-weight: 300;
          font-size: 1em;
          color: #FFFFFF;
          -webkit-animation: alpha .5s ease;
      }
      .drop-box li:hover{
          background-color: #FF1493;
      }
      .drop-box #open-drop:checked ~ ul{
          display: block;
      }

    
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
      //SASS
      .drop-box{
        width: 350px;
        height: auto;
        margin: 0 auto;
        position: relative;
          input[type="checkbox"]{
            display: none;
          }
          .title{
            width: 340px;
            height: 50px;
            float: left;
            padding-left: 10px;
            background-color: $preto;
            line-height: 50px;
            font-weight: 500;
            color: $branco;
            cursor: pointer;
            transition: all .3s ease;
              &:after{
                content: "\25BC";
                width: 50px;
                height: 50px;
                position: absolute;
                top: 0;
                right: 0;
                background-color: $rosa2;
                text-align: center;
                line-height: 55px;
                font-size: 1.2em;
              }
              &:hover{
                &:after{
                  content: "\25BC";
                  width: 50px;
                  height: 50px;
                  position: absolute;
                  top: 0;
                  right: 0;
                  background-color: $rosa;
                  text-align: center;
                  line-height: 55px;
                  font-size: 1.2em;
                }
              }
          }
          ul{
            display: none;
            width: 100%;
            height: auto;
            float: left;
            position: absolute;
            top: 57px;
            background-color: $preto;
            -webkit-animation: animationDropdown .3s ease;
            -moz-animation: animationDropdown .3s ease;
            -o-animation: animationDropdown .3s ease;
            -ms-animation: animationDropdown .3s ease;
            animation: animationDropdown .3s ease;
              li{
                width: 330px;
                height: 40px;
                float: left;
                padding: 10px;
                line-height: 50px;
                font-weight: 300;
                font-size: 1em;
                color: $branco;
                -webkit-animation: alpha .5s ease;
                -moz-animation: alpha .5s ease;
                -o-animation: alpha .5s ease;
                -ms-animation: alpha .5s ease;
                animation: alpha .5s ease;
                &:hover{
                  background-color: $rosa;
                }
              }
          }
          #open-drop:checked ~ ul{
            display: block;
          }
      }

    

Titulo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, doloribus magni dicta temporibus, distinctio magnam quod quas eaque neque facilis quis laboriosam non porro iure excepturi voluptas deserunt omnis aut.

Titulo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, doloribus magni dicta temporibus, distinctio magnam quod quas eaque neque facilis quis laboriosam non porro iure excepturi voluptas deserunt omnis aut.

Titulo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, doloribus magni dicta temporibus, distinctio magnam quod quas eaque neque facilis quis laboriosam non porro iure excepturi voluptas deserunt omnis aut.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, doloribus magni dicta temporibus, distinctio magnam quod quas eaque neque facilis quis laboriosam non porro iure excepturi voluptas deserunt omnis aut.

Titulo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, doloribus magni dicta temporibus, distinctio magnam quod quas eaque neque facilis quis laboriosam non porro iure excepturi voluptas deserunt omnis aut.

bower install components-css
      <div class="timeline">

          <section class="timeline-item">
            <article class="timeline-texto timeline-left">
              <h2>Titulo</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, doloribus magni dicta temporibus, distinctio magnam quod quas eaque neque facilis quis laboriosam non porro iure excepturi voluptas deserunt omnis aut.</p>
            </article>
          </section>

          <section class="timeline-item">
            <article class="timeline-texto timeline-right">
              <h2>Titulo</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, doloribus magni dicta temporibus, distinctio magnam quod quas eaque neque facilis quis laboriosam non porro iure excepturi voluptas deserunt omnis aut.</p>
            </article>
          </section>

          <section class="timeline-item">
            <article class="timeline-texto timeline-left">
              <h2>Titulo</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, doloribus magni dicta temporibus, distinctio magnam quod quas eaque neque facilis quis laboriosam non porro iure excepturi voluptas deserunt omnis aut.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, doloribus magni dicta temporibus, distinctio magnam quod quas eaque neque facilis quis laboriosam non porro iure excepturi voluptas deserunt omnis aut.</p>
            </article>
          </section>

          <section class="timeline-item">
            <article class="timeline-texto timeline-right">
              <h2>Titulo</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, doloribus magni dicta temporibus, distinctio magnam quod quas eaque neque facilis quis laboriosam non porro iure excepturi voluptas deserunt omnis aut.</p>
            </article>
          </section>

      </div>
    
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
      //CSS
      @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100);
      body{
          font-family: 'Roboto', sans-serif;;
          font-size: 100%;
      }
      .timeline{
          width: 100%;
          height: auto;
          float: left;
          padding: 50px 0;
          position: relative;
          background-color: #c0c8c9;
      }
      .timeline:before{
          content: "";
          width: 10px;
          height: 100%;
          position: absolute;
          top: 0px;
          left: 50%;
          background-color: #9ca3a4;
      }
      .timeline .timeline-item{
          width: 100%;
          height: auto;
          float: left;
          margin-bottom: 40px;
      }
      .timeline .timeline-item:last-child{
          margin-bottom: 0px;
      }
      .timeline .timeline-item .timeline-texto{
          width: 350px;
          height: auto;
          padding: 20px;
          background-color: #FF1493;
          position: relative;
      }
      .timeline .timeline-item .timeline-texto.timeline-left{
          float: left;
          margin-left: 60px;
      }
      .timeline .timeline-item .timeline-texto.timeline-left:before{
          content: "";
          width: 50px;
          height: 50px;
          position: absolute;
          right: -80px;
          bottom: 13px;
          background-color: #980b0b;
          border-radius: 50%;
      }
      .timeline .timeline-item .timeline-texto.timeline-left:after{
          content: "";
          width: 35px;
          height: 35px;
          position: absolute;
          right: -73px;
          bottom: 20px;
          background-color: #cd1717;
          border-radius: 50%;
      }
      .timeline .timeline-item .timeline-texto.timeline-right{
          float: right;
          margin-right: 60px;
      }
      .timeline .timeline-item .timeline-texto.timeline-right:before{
          content: "";
          width: 50px;
          height: 50px;
          position: absolute;
          left: -72px;
          bottom: 13px;
          background-color: #980b0b;
          border-radius: 50%;
      }
      .timeline .timeline-item .timeline-texto.timeline-right:after{
          content: "";
          width: 35px;
          height: 35px;
          position: absolute;
          left: -64px;
          bottom: 20px;
          background-color: #cd1717;
          border-radius: 50%;
      }
      .timeline .timeline-item .timeline-texto h2{
          width: 100%;
          height: auto;
          float: left;
          margin-bottom: 20px;
          font-size: 1.2em;
          color: #FFFFFF;
          font-weight: 500;
      }
      .timeline .timeline-item .timeline-texto p{
          width: 100%;
          height: auto;
          float: left;
          margin-bottom: 10px;
          font-size: 1em;
          color: #FFFFFF;
          font-weight: 300;
      }
      .timeline .timeline-item .timeline-texto p:last-child{
          margin-bottom: 0px;
      }

    
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
      //SASS
      .timeline{
        width: 100%;
        height: auto;
        float: left;
        padding: 50px 0;
        position: relative;
        background-color: $cinza;
          &:before{
            content: "";
            width: 10px;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 50%;
            background-color: $cinza2;
          }

          .timeline-item{
            width: 100%;
            height: auto;
            float: left;
            margin-bottom: 40px;
            &:last-child{
              margin-bottom: 0px;
            }
              .timeline-texto{
                width: 350px;
                height: auto;
                padding: 20px;
                background-color: $rosa;
                position: relative;
                &.timeline-left{
                  float: left;
                  margin-left: 60px;
                  &:before{
                    content: "";
                    width: 50px;
                    height: 50px;
                    position: absolute;
                    right: -80px;
                    bottom: 13px;
                    background-color: $vermelho2;
                    border-radius: 50%;
                  }
                  &:after{
                    content: "";
                    width: 35px;
                    height: 35px;
                    position: absolute;
                    right: -73px;
                    bottom: 20px;
                    background-color: $vermelho3;
                    border-radius: 50%;
                  }
                }
                &.timeline-right{
                  float: right;
                  margin-right: 60px;
                  &:before{
                    content: "";
                    width: 50px;
                    height: 50px;
                    position: absolute;
                    left: -72px;
                    bottom: 13px;
                    background-color: $vermelho2;
                    border-radius: 50%;
                  }
                  &:after{
                    content: "";
                    width: 35px;
                    height: 35px;
                    position: absolute;
                    left: -64px;
                    bottom: 20px;
                    background-color: $vermelho3;
                    border-radius: 50%;
                  }
                }
                  h2{
                    width: 100%;
                    height: auto;
                    float: left;
                    margin-bottom: 20px;
                    font-size: 1.2em;
                    color: $branco;
                    font-weight: 500;
                  }
                  p{
                    width: 100%;
                    height: auto;
                    float: left;
                    margin-bottom: 10px;
                    font-size: 1em;
                    color: $branco;
                    font-weight: 300;
                    &:last-child{
                      margin-bottom: 0px;
                    }
                  }
              }
          }
      }
    
bower install components-css
      <div class="box-preloaders">

        <div class="line">
          <div class="preloaders-1"></div>
          <div class="preloaders-2"></div>
          <div class="preloaders-3">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="line">
          <div class="preloaders-4"></div>
          <div class="preloaders-5"></div>
        </div>

      </div>
    
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
      //CSS
      @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100);
      body{
          font-family: 'Roboto', sans-serif;;
          font-size: 100%;
      }
      @-webkit-keyframes preloader1 {
          0%{
              transform: rotate(0deg);
          }
          100%{
              transform: rotate(360deg);
          }
      }
      @-webkit-keyframes preloader2after {
          0%{
              transform: rotate(0deg);
          }
          50%{
              transform: rotate(190deg);
          }
          100%{
              transform: rotate(0deg);
          }
      }
      @-webkit-keyframes preloader2before {
          0%{
              transform: rotate(0deg);
          }
          50%{
              transform: rotate(190deg);
          }
          100%{
              transform: rotate(0deg);
          }
      }
      @-webkit-keyframes preloader3 {
          0%{
              transform: scale(.2);
          }
          50%{
              transform: scale(1);
          }
          100%{
              transform: scale(.2);
          }
      }
      @-webkit-keyframes preloader3b {
          0%{
              transform: scale(1);
          }
          50%{
              transform: scale(.2);
          }
          100%{
              transform: scale(1);
          }
      }
      @-webkit-keyframes preloader4 {
          0%{
              transform: rotate(0deg);
          }
          100%{
              transform: rotate(360deg);
          }
      }
      @-webkit-keyframes preloaders-5{
        0%{
          left: 0;
        }
        50%{
          left: 150px;
        }
        100%{
          left: 0;
        }
      }
      /* PRELOADER 1 */
      .box-preloaders{
          width: 100%;
          height: auto;
          float: left;
      }
      .box-preloaders .preloaders-1{
          width: 200px;
          height: 200px;
          float: left;
          margin-right: 150px;
          position: relative;
          border: 10px solid #2E2929;
          border-radius: 50%;
      }
      .box-preloaders .preloaders-1:after{
          content: "";
          width: 200px;
          height: 200px;
          position: absolute;
          top: -10px;
          left: -11px;
          border: 10px solid transparent;
          border-right: 12px solid #FF1493;
          border-radius: 50%;
          -webkit-animation: preloader1 1s linear infinite;
      }
      /* PRELOADER 2 */
      .box-preloaders .preloaders-2{
          width: 200px;
          height: 200px;
          float: left;
          margin-right: 150px;
          position: relative;
          border: 10px solid #2E2929;
          border-radius: 50%;
      }
      .box-preloaders .preloaders-2:after{
          content: "";
          width: 200px;
          height: 200px;
          position: absolute;
          top: -10px;
          left: -11px;
          border: 10px solid transparent;
          border-right: 12px solid #FF1493;
          border-radius: 50%;
          -webkit-animation: preloader2after 1s cubic-bezier(0.49, 0, 0.46, 1) infinite;
      }
      .box-preloaders .preloaders-2:before{
          content: "";
          width: 200px;
          height: 200px;
          position: absolute;
          top: -10px;
          left: -11px;
          border: 10px solid transparent;
          border-left: 12px solid #FF1493;
          border-radius: 50%;
          -webkit-animation: preloader2before 1s cubic-bezier(0.49, 0, 0.46, 1) infinite;
      }
      /* PRELOADER 3 */
      .box-preloaders .preloaders-3{
          width: 230px;
          height: 50px;
          float: left;
          margin-top: 80px;
      }
      .box-preloaders .preloaders-3 span{
          width: 50px;
          height: 50px;
          float: left;
          margin-right: 30px;
          background-color: #2E2929;
          border-radius: 50px;
      }
      .box-preloaders .preloaders-3 span:last-child{
          margin-right: 0;
      }
      .box-preloaders .preloaders-3 span:nth-child(1){
          -webkit-animation: preloader3 1s cubic-bezier(0.49, 0, 0.46, 1) infinite;
      }
      .box-preloaders .preloaders-3 span:nth-child(2){
          -webkit-animation: preloader3b 1s cubic-bezier(0.49, 0, 0.46, 1) infinite;
      }
      .box-preloaders .preloaders-3 span:nth-child(3){
          -webkit-animation: preloader3 1s cubic-bezier(0.49, 0, 0.46, 1) infinite;
      }
      /* PRELOADER 4 */
      .box-preloaders .preloaders-4{
          width: 200px;
          height: 200px;
          float: left;
          position: relative;
          border-radius: 50%;
          border-right: 20px solid #FF1493;
          border-left: 20px solid transparent;
          border-top: 20px solid transparent;
          border-bottom: 20px solid transparent;
          -webkit-animation: preloader4 1s linear infinite;
      }
      .box-preloaders .preloaders-4:before{
          content: "";
          width: 100px;
          height: 100px;
          position: absolute;
          left: 50px;
          top: 50px;
          background-color: #2E2929;
          border-radius: 50%;
      }
      /* PRELOADER 5*/
      .preloaders-5 {
          width: 200px;
          height: 20px;
          float: left;
          position: relative;
          margin: 100px 0 0 150px;
          background-color: #2E2929;
      }
      .preloaders-5:after {
          content: "";
          width: 50px;
          height: 20px;
          position: absolute;
          top: 0;
          left: 0;
          background-color: #FF1493;
          animation: preloaders-5 1s linear infinite;
      }

    
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
      @-webkit-keyframes preloader1 {
          0%{
              transform: rotate(0deg);
          }
          100%{
              transform: rotate(360deg);
          }
      }
      @-webkit-keyframes preloader2after {
          0%{
              transform: rotate(0deg);
          }
          50%{
              transform: rotate(190deg);
          }
          100%{
              transform: rotate(0deg);
          }
      }
      @-webkit-keyframes preloader2before {
          0%{
              transform: rotate(0deg);
          }
          50%{
              transform: rotate(190deg);
          }
          100%{
              transform: rotate(0deg);
          }
      }
      @-webkit-keyframes preloader3 {
          0%{
              transform: scale(.2);
          }
          50%{
              transform: scale(1);
          }
          100%{
              transform: scale(.2);
          }
      }
      @-webkit-keyframes preloader3b {
          0%{
              transform: scale(1);
          }
          50%{
              transform: scale(.2);
          }
          100%{
              transform: scale(1);
          }
      }
      @-webkit-keyframes preloader4 {
          0%{
              transform: rotate(0deg);
          }
          100%{
              transform: rotate(360deg);
          }
      }
      @-webkit-keyframes preloaders-5{
        0%{
          left: 0;
        }
        50%{
          left: 150px;
        }
        100%{
          left: 0;
        }
      }
      //SASS
      .box-preloaders{
      	width: 100%;
      	height: auto;
      	float: left;
      	.preloaders-1{
      		width: 200px;
      		height: 200px;
      		float: left;
      		margin-right: 150px;
      		position: relative;
      		border: 10px solid $preto;
      		border-radius: 50%;
      		&:after{
      			content: "";
      			width: 200px;
      			height: 200px;
      			position: absolute;
      			top: -10px;
          		left: -11px;
      			border: 10px solid transparent;
      			border-right: 12px solid $rosa;
      			border-radius: 50%;
      			-webkit-animation: preloader1 1s linear infinite;
      		}
      	}
      	.preloaders-2{
      		width: 200px;
      		height: 200px;
      		float: left;
      		margin-right: 150px;
      		position: relative;
      		border: 10px solid $preto;
      		border-radius: 50%;
      		&:after{
      			content: "";
      			width: 200px;
      			height: 200px;
      			position: absolute;
      			top: -10px;
          		left: -11px;
      			border: 10px solid transparent;
      			border-right: 12px solid $rosa;
      			border-radius: 50%;
      			-webkit-animation: preloader2after 1s cubic-bezier(.49,0,.46,1) infinite;
      		}
      		&:before{
      			content: "";
      			width: 200px;
      			height: 200px;
      			position: absolute;
      			top: -10px;
          		left: -11px;
      			border: 10px solid transparent;
      			border-left: 12px solid $rosa;
      			border-radius: 50%;
      			-webkit-animation: preloader2before 1s cubic-bezier(.49,0,.46,1) infinite;
      		}
      	}
      	.preloaders-3{
      		width: 230px;
      		height: 50px;
      		float: left;
      		margin-top: 80px;
      			span{
      				width: 50px;
      				height: 50px;
      				float: left;
      				margin-right: 30px;
      				background-color: $preto;
      				border-radius: 50px;
      				&:last-child{
      					margin-right: 0;
      				}
      				&:nth-child(1){
      					-webkit-animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite;
      				}
      				&:nth-child(2){
      					-webkit-animation: preloader3b 1s cubic-bezier(.49,0,.46,1) infinite;
      				}
      				&:nth-child(3){
      					-webkit-animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite;
      				}
      			}
      	}
      	.preloaders-4{
      		width: 200px;
      		height: 200px;
      		float: left;
      		position: relative;
      		border-radius: 50%;
      		border-right: 20px solid $rosa;
      		border-left: 20px solid transparent;
      		border-top: 20px solid transparent;
      		border-bottom: 20px solid transparent;
      		-webkit-animation: preloader4 1s linear infinite;
      		&:before{
      			content: "";
      			width: 100px;
      			height: 100px;
      			position: absolute;
      			left: 50px;
      			top: 50px;
      			background-color: $preto;
      			border-radius: 50%;
      		}
      	}
        .preloaders-5{
      		width: 200px;
      		height: 20px;
      		float: left;
      		position: relative;
      		margin: 100px 0 0 150px;
      		background-color: $preto;
      		&:after{
      			content: "";
      			width: 50px;
      			height: 20px;
      			position: absolute;
      			top: 0;
      			left: 0;
      			background-color: $rosa;
      			animation: preloaders-5 1s linear infinite;
      		}
      	}
      }
    
Passe o mouse e veja a magica.
bower install components-css
      <div class="box-tooltips" data-title="Oi, eu sou o Tooltips!">
        Passe o mouse e veja a magica.
      </div>
    
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
      //CSS
      @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100);
      body{
          font-family: 'Roboto', sans-serif;;
          font-size: 100%;
      }
      @-webkit-keyframes alpha {
          0%{
              opacity: 0;
          }
          100%{
              opacity: 1;
          }
      }
      .box-tooltips{
          width: 350px;
          height: 50px;
          float: left;
          margin: 50px 0;
          position: relative;
          background-color: #2E2929;
          text-align: center;
          line-height: 50px;
          color: #FFFFFF;
          font-weight: 300;
          font-size: 1.2em;
      }
      .box-tooltips:after{
          display: none;
      }
      .box-tooltips:hover:after{
          display: block;
          content: attr(data-title);
          position: absolute;
          top: 60px;
          left: 72px;
          font-weight: 300;
          color: #2E2929;
          font-size: 1.2em;
          -webkit-animation: alpha 2s ease-out;
      }

    
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
      //SASS
      .box-tooltips{
        width: 350px;
        height: 50px;
        margin: 50px auto;
        position: relative;
        background-color: $preto;
        text-align: center;
        line-height: 50px;
        font-weight: 300;
        color: $branco;
        font-size: 1.2em;
        &:after{
          display: none;
        }
        &:hover{
          &:after{
            display: block;
            -webkit-animation: alpha 2s ease-out;
            content: attr(data-title);
            position: absolute;
            top: 60px;
            left: 72px;
            font-weight: 300;
            color: $preto;
            font-size: 1.2em;
          }
        }
      }
    
STAR WARS CELEBRATION
bower install components-css
      <article class="texto-filtro">
        STAR WARS CELEBRATION
      </article>
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
      //CSS
      @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100);
      body{
          font-family: 'Roboto', sans-serif;;
          font-size: 100%;
      }
      .texto-filtro{
          widht: 100%;
          height: auto;
          float: left;
          text-align: center;
          font-size: 9em;
          font-weight: 900;
          background: url('http://wallpapercave.com/wp/4W0KpiW.jpg');
          background-size: cover;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
      }

    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
      //SASS
      .texto-filtro{
      	width: 100%;
      	height: auto;
      	float: left;
      	text-align: center;
      	font-size: 9em;
      	font-weight: 900;
      	background: url('http://hjdesigner.github.io/css-components/images/star-wars.jpg');
          background-size: cover;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
      }
    
bower install components-css
      <div class="row-checkbox">
        <input type="checkbox" id="checkbox-1" class="input-checkbox" checked>
        <label for="checkbox-1" class="checkbox-1"></label>
      </div>

      <div class="row-checkbox">
        <input type="checkbox" id="checkbox-2" class="input-checkbox" checked>
        <label for="checkbox-2" class="checkbox-2"></label>
      </div>

      <div class="row-checkbox">
        <input type="checkbox" id="checkbox-3" class="input-checkbox" checked>
        <label for="checkbox-3" class="checkbox-3"></label>
      </div>

      <div class="row-checkbox">
        <input type="checkbox" id="checkbox-4" class="input-checkbox">
        <label for="checkbox-4" class="checkbox-4"></label>
      </div>

      <div class="row-checkbox">
        <input type="checkbox" id="checkbox-5" class="input-checkbox">
        <label for="checkbox-5" class="checkbox-5"></label>
      </div>
    
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
      //CSS
      .input-checkbox{
          display: none;
      }
      .row-checkbox{
          width: auto;
          height: 50px;
          float: left;
          margin: 50px 50px 0 0;
      }
      .checkbox-1{
          width: 30px;
          height: 30px;
          float: left;
          position: relative;
          border-radius: 50%;
          background-color: #2E2929;
          cursor: pointer;
      }
      .checkbox-1:before{
          display: none;
          content: "";
          position: absolute;
          width: 20px;
          height: 20px;
          background-color: #3CA3F2;
          border-radius: 50%;
          top: 5px;
          left: 5px;
      }
      #checkbox-1:checked ~ .checkbox-1:before{
          display: block;
      }
      .checkbox-2{
          width: 30px;
          height: 30px;
          float: left;
          position: relative;
          background-color: #2E2929;
          cursor: pointer;
      }
      .checkbox-2:before{
          display: none;
          content: "";
          position: absolute;
          width: 20px;
          height: 20px;
          background-color: #3CA3F2;
          top: 5px;
          left: 5px;
      }
      #checkbox-2:checked ~ .checkbox-2:before{
          display: block;
      }
      .checkbox-3{
          width: 30px;
          height: 30px;
          float: left;
          position: relative;
          background-color: #2E2929;
          cursor: pointer;
      }
      .checkbox-3:before{
          display: none;
          content: "";
          position: absolute;
          width: 20px;
          height: 2px;
          background-color: #3CA3F2;
          top: 14px;
          left: 5px;
          transform: rotate(-42deg);
      }
      .checkbox-3:after{
          display: none;
          content: "";
          position: absolute;
          width: 20px;
          height: 2px;
          background-color: #3CA3F2;
          top: 14px;
          left: 5px;
          transform: rotate(42deg);
      }
      #checkbox-3:checked ~ .checkbox-3:before, #checkbox-3:checked ~ .checkbox-3:after{
          display: block;
      }
      .checkbox-4{
          width: 30px;
          height: 30px;
          float: left;
          position: relative;
          background-color: #2E2929;
          cursor: pointer;
      }
      .checkbox-4:before{
          display: none;
          content: "";
          position: absolute;
          width: 15px;
          height: 2px;
          background-color: #3CA3F2;
          top: 13px;
          left: 12px;
          transform: rotate(-59deg);
      }
      .checkbox-4:after{
          display: none;
          content: "";
          position: absolute;
          width: 9px;
          height: 2px;
          background-color: #3CA3F2;
          top: 16px;
          left: 8px;
          transform: rotate(42deg);
      }
      #checkbox-4:checked ~ .checkbox-4:before, #checkbox-4:checked ~ .checkbox-4:after{
          display: block;
      }
      .checkbox-5{
          width: 70px;
          height: 30px;
          float: left;
          position: relative;
          border-radius: 44px;
          background-color: #c0c8c9;
          cursor: pointer;
      }
      .checkbox-5:before{
          content: "";
          width: 24px;
          height: 24px;
          position: absolute;
          left: 4px;
          top: 3px;
          background-color: #FFFFFF;
          border-radius: 50%;
          transition: .25s;
      }
      #checkbox-5:checked ~ .checkbox-5{
          background-color: #4bd865;
      }
      #checkbox-5:checked ~ .checkbox-5:before{
          transform: translateX(38px);
      }

    
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
      //SASS
      .input-checkbox{
      	display: none;
      }
      .row-checkbox{
      	width: auto;
      	height: 50px;
      	float: left;
      	margin: 50px 50px 0 0;
      }
      .checkbox-1{
      	width: 30px;
      	height: 30px;
      	float: left;
      	position: relative;
      	border-radius: 50%;
      	background-color: $preto;
      	cursor: pointer;
      	&:before{
      		display: none;
      		content: "";
      		position: absolute;
      		width: 20px;
      		height: 20px;
      		background-color: $azul;
      		border-radius: 50%;
      		top: 5px;
          	left: 5px;
      	}
      }
      #checkbox-1:checked ~ .checkbox-1{
      	&:before{
      		display: block;
      	}
      }

      .checkbox-2{
      	width: 30px;
      	height: 30px;
      	float: left;
      	position: relative;
      	background-color: $preto;
      	cursor: pointer;
      	&:before{
      		display: none;
      		content: "";
      		position: absolute;
      		width: 20px;
      		height: 20px;
      		background-color: $azul;
      		top: 5px;
          	left: 5px;
      	}
      }
      #checkbox-2:checked ~ .checkbox-2{
      	&:before{
      		display: block;
      	}
      }
      .checkbox-3{
      	width: 30px;
      	height: 30px;
      	float: left;
      	position: relative;
      	background-color: $preto;
      	cursor: pointer;
      	&:before{
      		display: none;
      		content: "";
      		position: absolute;
      		width: 20px;
      		height: 2px;
      		background-color: $azul;
      		top: 14px;
      	    left: 5px;
      	    transform: rotate(-42deg);
      	}
      	&:after{
      		display: none;
      		content: "";
      		position: absolute;
      		width: 20px;
      		height: 2px;
      		background-color: $azul;
      		top: 14px;
      	    left: 5px;
      	    transform: rotate(42deg);
      	}
      }
      #checkbox-3:checked ~ .checkbox-3{
      	&:before,
      	&:after{
      		display: block;
      	}
      }
      .checkbox-4{
      	width: 30px;
      	height: 30px;
      	float: left;
      	position: relative;
      	background-color: $preto;
      	cursor: pointer;
      	&:before{
      		display: none;
      		content: "";
      		position: absolute;
      		width: 15px;
      		height: 2px;
      		background-color: $azul;
      		top: 13px;
      	    left: 12px;
      	    transform: rotate(-59deg);
      	}
      	&:after{
      		display: none;
      		content: "";
      		position: absolute;
      		width: 9px;
      		height: 2px;
      		background-color: $azul;
      		top: 16px;
      	    left: 8px;
      	    transform: rotate(42deg);
      	}
      }
      #checkbox-4:checked ~ .checkbox-4{
      	&:before,
      	&:after{
      		display: block;
      	}
      }
      .checkbox-5{
      	width: 70px;
      	height: 30px;
      	float: left;
      	position: relative;
      	border-radius: 44px;
      	background-color: $cinza;
      	cursor: pointer;
      	&:before{
      		content: "";
      	    width: 24px;
      	    height: 24px;
      	    position: absolute;
      	    left: 4px;
      	    top: 3px;
      		background-color: $branco;
      	    border-radius: 50%;
      	    transition: .25s;
      	}
      }
      #checkbox-5:checked ~ .checkbox-5{
      	background-color: $verde;
      	&:before{
      		transform: translateX(38px);
      	}
      }
    
bower install components-css
      <input type="radio" name="estrela" id="estrela-1" class="input-estrela">
      <input type="radio" name="estrela" id="estrela-2" class="input-estrela">
      <input type="radio" name="estrela" id="estrela-3" class="input-estrela" checked>
      <input type="radio" name="estrela" id="estrela-4" class="input-estrela">
      <input type="radio" name="estrela" id="estrela-5" class="input-estrela">
        <label for="estrela-1" class="box-estrela estrela-1">
            <div class="estrela-diagrama"></div>
        </label>
        <label for="estrela-2" class="box-estrela">
            <div class="estrela-diagrama"></div>
        </label>
        <label for="estrela-3" class="box-estrela">
            <div class="estrela-diagrama"></div>
        </label>
        <label for="estrela-4" class="box-estrela">
            <div class="estrela-diagrama"></div>
        </label>
        <label for="estrela-5" class="box-estrela">
            <div class="estrela-diagrama"></div>
        </label>
    
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
      //CSS
      @-webkit-keyframes alpha {
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
      }
      input{
          display: none;
      }
      .box-estrela{
          width: 76px;;
          height: 111px;
          float: left;
          margin-right: 10px;
          position: relative;
          cursor: pointer;
      }
      .estrela-diagrama,
      .estrela-diagrama:before,
      .estrela-diagrama:after{
          width: 0px;
          height: 0px;
          position: absolute;
          border-right: 38px solid transparent;
          border-left: 38px solid transparent;
          border-bottom: 22px solid #c0c8c9;
      }
      .estrela-diagrama{
          z-index: 5;
          transform: rotate(-180deg);
          left: 0px;
          top: 47px;
      }
      .estrela-diagrama:before{
          content: "";
          z-index: 6;
          transform: rotate(-72deg);
          left: -36px;
          top: 1px;
      }
      .estrela-diagrama:after{
          content: "";
          z-index: 6;
          transform: rotate(71deg);
          left: -40px;
          top: 1px;
      }
      #estrela-1:checked ~ label[for="estrela-1"] .estrela-diagrama,
      #estrela-1:checked ~ label[for="estrela-1"] .estrela-diagrama:before,
      #estrela-1:checked ~ label[for="estrela-1"] .estrela-diagrama:after{
          -webkit-animation: alpha .2s ease;
          width: 0;
          height: 0;
          position: absolute;
          border-right: 38px solid transparent;
          border-left: 38px solid transparent;
          border-bottom: 22px solid gold;
      }
      #estrela-2:checked ~ label[for="estrela-1"] .estrela-diagrama,
      #estrela-2:checked ~ label[for="estrela-1"] .estrela-diagrama:before,
      #estrela-2:checked ~ label[for="estrela-1"] .estrela-diagrama:after,
      #estrela-2:checked ~ label[for="estrela-2"] .estrela-diagrama,
      #estrela-2:checked ~ label[for="estrela-2"] .estrela-diagrama:before,
      #estrela-2:checked ~ label[for="estrela-2"] .estrela-diagrama:after{
          -webkit-animation: alpha .2s ease;
          width: 0;
          height: 0;
          position: absolute;
          border-right: 38px solid transparent;
          border-left: 38px solid transparent;
          border-bottom: 22px solid gold;
      }
      #estrela-3:checked ~ label[for="estrela-1"] .estrela-diagrama,
      #estrela-3:checked ~ label[for="estrela-1"] .estrela-diagrama:before,
      #estrela-3:checked ~ label[for="estrela-1"] .estrela-diagrama:after,
      #estrela-3:checked ~ label[for="estrela-2"] .estrela-diagrama,
      #estrela-3:checked ~ label[for="estrela-2"] .estrela-diagrama:before,
      #estrela-3:checked ~ label[for="estrela-2"] .estrela-diagrama:after,
      #estrela-3:checked ~ label[for="estrela-3"] .estrela-diagrama,
      #estrela-3:checked ~ label[for="estrela-3"] .estrela-diagrama:before,
      #estrela-3:checked ~ label[for="estrela-3"] .estrela-diagrama:after{
          -webkit-animation: alpha .2s ease;
          width: 0;
          height: 0;
          position: absolute;
          border-right: 38px solid transparent;
          border-left: 38px solid transparent;
          border-bottom: 22px solid gold;
      }
      #estrela-4:checked ~ label[for="estrela-1"] .estrela-diagrama,
      #estrela-4:checked ~ label[for="estrela-1"] .estrela-diagrama:before,
      #estrela-4:checked ~ label[for="estrela-1"] .estrela-diagrama:after,
      #estrela-4:checked ~ label[for="estrela-2"] .estrela-diagrama,
      #estrela-4:checked ~ label[for="estrela-2"] .estrela-diagrama:before,
      #estrela-4:checked ~ label[for="estrela-2"] .estrela-diagrama:after,
      #estrela-4:checked ~ label[for="estrela-3"] .estrela-diagrama,
      #estrela-4:checked ~ label[for="estrela-3"] .estrela-diagrama:before,
      #estrela-4:checked ~ label[for="estrela-3"] .estrela-diagrama:after,
      #estrela-4:checked ~ label[for="estrela-4"] .estrela-diagrama,
      #estrela-4:checked ~ label[for="estrela-4"] .estrela-diagrama:before,
      #estrela-4:checked ~ label[for="estrela-4"] .estrela-diagrama:after{
          -webkit-animation: alpha .2s ease;
          width: 0;
          height: 0;
          position: absolute;
          border-right: 38px solid transparent;
          border-left: 38px solid transparent;
          border-bottom: 22px solid gold;
      }
      #estrela-5:checked ~ label[for="estrela-1"] .estrela-diagrama,
      #estrela-5:checked ~ label[for="estrela-1"] .estrela-diagrama:before,
      #estrela-5:checked ~ label[for="estrela-1"] .estrela-diagrama:after,
      #estrela-5:checked ~ label[for="estrela-2"] .estrela-diagrama,
      #estrela-5:checked ~ label[for="estrela-2"] .estrela-diagrama:before,
      #estrela-5:checked ~ label[for="estrela-2"] .estrela-diagrama:after,
      #estrela-5:checked ~ label[for="estrela-3"] .estrela-diagrama,
      #estrela-5:checked ~ label[for="estrela-3"] .estrela-diagrama:before,
      #estrela-5:checked ~ label[for="estrela-3"] .estrela-diagrama:after,
      #estrela-5:checked ~ label[for="estrela-4"] .estrela-diagrama,
      #estrela-5:checked ~ label[for="estrela-4"] .estrela-diagrama:before,
      #estrela-5:checked ~ label[for="estrela-4"] .estrela-diagrama:after,
      #estrela-5:checked ~ label[for="estrela-5"] .estrela-diagrama,
      #estrela-5:checked ~ label[for="estrela-5"] .estrela-diagrama:before,
      #estrela-5:checked ~ label[for="estrela-5"] .estrela-diagrama:after{
          -webkit-animation: alpha .2s ease;
          width: 0;
          height: 0;
          position: absolute;
          border-right: 38px solid transparent;
          border-left: 38px solid transparent;
          border-bottom: 22px solid gold;
      }
    
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
      //SASS
      .input-estrela{
        display: none;
      }
      .box-estrela{
        width: 76px;
        height: 111px;
        float: left;
        margin-right: 10px;
        position: relative;
        cursor: pointer;
      }
      .estrela-diagrama,
      .estrela-diagrama:before,
      .estrela-diagrama:after{
        width: 0px;
        height: 0px;
        position: absolute;
        border-right: 38px solid transparent;
        border-left: 38px solid transparent;
        border-bottom: 22px solid $cinza;
      }
      .estrela-diagrama{
        z-index: 5;
        transform: rotate(-180deg);
        left: 0px;
        top: 47px;
        &:before {
          content: "";
          z-index: 6;
          transform: rotate(-72deg);
          left: -36px;
          top: 1px;
        }
        &:after {
          content: "";
          z-index: 6;
          transform: rotate(71deg);
          left: -40px;
          top: 1px;
        }
      }
      #estrela-1:checked ~ label[for="estrela-1"]{
        .estrela-diagrama,
        .estrela-diagrama:before,
        .estrela-diagrama:after{
          -webkit-animation: alpha .2s ease;
          width: 0px;
          height: 0px;
          position: absolute;
          border-right: 38px solid transparent;
          border-left: 38px solid transparent;
          border-bottom: 22px solid $gold;
        }
      }
      #estrela-2:checked ~ label[for="estrela-1"],
      #estrela-2:checked ~ label[for="estrela-2"]{
        .estrela-diagrama,
        .estrela-diagrama:before,
        .estrela-diagrama:after{
          -webkit-animation: alpha .2s ease;
          width: 0px;
          height: 0px;
          position: absolute;
          border-right: 38px solid transparent;
          border-left: 38px solid transparent;
          border-bottom: 22px solid $gold;
        }
      }
      #estrela-3:checked ~ label[for="estrela-1"],
      #estrela-3:checked ~ label[for="estrela-2"],
      #estrela-3:checked ~ label[for="estrela-3"]{
        .estrela-diagrama,
        .estrela-diagrama:before,
        .estrela-diagrama:after{
          -webkit-animation: alpha .2s ease;
          width: 0px;
          height: 0px;
          position: absolute;
          border-right: 38px solid transparent;
          border-left: 38px solid transparent;
          border-bottom: 22px solid $gold;
        }
      }
      #estrela-4:checked ~ label[for="estrela-1"],
      #estrela-4:checked ~ label[for="estrela-2"],
      #estrela-4:checked ~ label[for="estrela-3"],
      #estrela-4:checked ~ label[for="estrela-4"]{
        .estrela-diagrama,
        .estrela-diagrama:before,
        .estrela-diagrama:after{
          -webkit-animation: alpha .2s ease;
          width: 0px;
          height: 0px;
          position: absolute;
          border-right: 38px solid transparent;
          border-left: 38px solid transparent;
          border-bottom: 22px solid $gold;
        }
      }
      #estrela-5:checked ~ label[for="estrela-1"],
      #estrela-5:checked ~ label[for="estrela-2"],
      #estrela-5:checked ~ label[for="estrela-3"],
      #estrela-5:checked ~ label[for="estrela-4"],
      #estrela-5:checked ~ label[for="estrela-5"]{
        .estrela-diagrama,
        .estrela-diagrama:before,
        .estrela-diagrama:after{
          -webkit-animation: alpha .2s ease;
          width: 0px;
          height: 0px;
          position: absolute;
          border-right: 38px solid transparent;
          border-left: 38px solid transparent;
          border-bottom: 22px solid $gold;
        }
      }
    
bower install components-css
      <input type="radio" id="reactions-curtir" name="reactions">
      <input type="radio" id="reactions-amei" name="reactions">
      <input type="radio" id="reactions-haha" name="reactions">
      <input type="radio" id="reactions-uau" name="reactions">
      <input type="radio" id="reactions-triste" name="reactions">
      <input type="radio" id="reactions-grr" name="reactions">
      <div class="facebook-reactions">

          <span>CURTIR</span>

          <div class="reactions">
            <ul>
              <li class="reactions-curtir" data-title="Curtir"><label for="reactions-curtir"></label></li>
              <li class="reactions-amei" data-title="Amei"><label for="reactions-amei"></label></li>
              <li class="reactions-haha" data-title="Haha"><label for="reactions-haha"></label></li>
              <li class="reactions-uau" data-title="Uau"><label for="reactions-uau"></label></li>
              <li class="reactions-triste" data-title="Triste"><label for="reactions-triste"></label></li>
              <li class="reactions-grr" data-title="Grr"><label for="reactions-grr"></label></li>
            </ul>
          </div>

      </div>
    
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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
      //CSS
      @-webkit-keyframes facebook{
        0%{
          opacity: 0;
          transform: translateY(30px);
        }
        100%{
          opacity: 1;
          transform: translateY(0px);
        }
      }
      input {
        display: none;
      }

      .facebook-reactions {
        width: 100px;
        height: 52px;
        float:left;
        position: relative;
        margin: 50px 0 50px calc(50% - 50px);
        text-align: center;
        line-height: 87px;
        transition: opacity .20s ease;
        font-size: 1em;
        color: #2E2929;
        cursor: pointer;
      }
      .facebook-reactions:before {
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: 1px;
        left: 3px;
        background-image: url(../assets/images/sprite-reactions.png);
        background-position: -33px 53px;
      }
      .facebook-reactions:hover {
        text-decoration: underline;
      }
      .facebook-reactions:hover .reactions {
        display: block;
        opacity: 1;
      }
      .facebook-reactions:hover .reactions li.reactions-curtir {
        -webkit-animation: facebook 0.1s cubic-bezier(0.49, 0, 0.46, 1);
      }
      .facebook-reactions:hover .reactions li.reactions-amei {
        -webkit-animation: facebook 0.2s cubic-bezier(0.49, 0, 0.46, 1);
      }
      .facebook-reactions:hover .reactions li.reactions-haha {
        -webkit-animation: facebook 0.3s cubic-bezier(0.49, 0, 0.46, 1);
      }
      .facebook-reactions:hover .reactions li.reactions-uau {
        -webkit-animation: facebook 0.4s cubic-bezier(0.49, 0, 0.46, 1);
      }
      .facebook-reactions:hover .reactions li.reactions-triste {
        -webkit-animation: facebook 0.5s cubic-bezier(0.49, 0, 0.46, 1);
      }
      .facebook-reactions:hover .reactions li.reactions-grr {
        -webkit-animation: facebook 0.6s cubic-bezier(0.49, 0, 0.46, 1);
      }
      .facebook-reactions .reactions {
        opacity: 0;
        display: none;
        width: 292px;
        height: 52px;
        position: absolute;
        top: -30px;
        left: -94px;
        background-color: #FFFFFF;
        box-shadow: 1px 1px 11px #c0c8c9;
        border-radius: 50px;
      }
      .facebook-reactions .reactions ul {
        width: 100%;
        height: auto;
        float: left;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .facebook-reactions .reactions li {
        width: 40px;
        height: 40px;
        float: left;
        position: relative;
        margin: 7px 0 0 7px;
        background-image: url(../assets/images/sprite-reactions.png);
        transition: transform .25s ease;
        transform: translateY(0px);
        opacity: 1;
      }
      .facebook-reactions .reactions li.reactions-curtir,
      .facebook-reactions .reactions li.reactions-amei,
      .facebook-reactions .reactions li.reactions-haha,
      .facebook-reactions .reactions li.reactions-uau,
      .facebook-reactions .reactions li.reactions-triste,
      .facebook-reactions .reactions li.reactions-grr {
        background-size: cover;
      }
      .facebook-reactions .reactions li.reactions-curtir {
        background-position: 0 -80px;
      }
      .facebook-reactions .reactions li.reactions-curtir:hover {
        transform: translateY(-6px) scale(1.2);
      }
      .facebook-reactions .reactions li.reactions-curtir:hover:before {
        content: attr(data-title);
        transform: scale(0.8);
        position: absolute;
        top: -24px;
        left: -3px;
        width: 46px;
        height: 21px;
        background-color: #2E2929;
        border-radius: 50px;
        font-size: .8em;
        color: #FFFFFF;
        text-align: center;
        line-height: 21px;
        font-weight: 600;
      }
      .facebook-reactions .reactions li.reactions-amei {
        background-position: 0 -119px;
      }
      .facebook-reactions .reactions li.reactions-amei:hover {
        transform: translateY(-6px) scale(1.2);
      }
      .facebook-reactions .reactions li.reactions-amei:hover:before {
        content: attr(data-title);
        transform: scale(0.8);
        position: absolute;
        top: -24px;
        left: -3px;
        width: 46px;
        height: 21px;
        background-color: #2E2929;
        border-radius: 50px;
        font-size: .8em;
        color: #FFFFFF;
        text-align: center;
        line-height: 21px;
        font-weight: 600;
      }
      .facebook-reactions .reactions li.reactions-haha {
        background-position: 0 -39px;
      }
      .facebook-reactions .reactions li.reactions-haha:hover {
        transform: translateY(-6px) scale(1.2);
      }
      .facebook-reactions .reactions li.reactions-haha:hover:before {
        content: attr(data-title);
        transform: scale(0.8);
        position: absolute;
        top: -24px;
        left: -3px;
        width: 46px;
        height: 21px;
        background-color: #2E2929;
        border-radius: 50px;
        font-size: .8em;
        color: #FFFFFF;
        text-align: center;
        line-height: 21px;
        font-weight: 600;
      }
      .facebook-reactions .reactions li.reactions-uau {
        background-position: 0 -199px;
      }
      .facebook-reactions .reactions li.reactions-uau:hover {
        transform: translateY(-6px) scale(1.2);
      }
      .facebook-reactions .reactions li.reactions-uau:hover:before {
        content: attr(data-title);
        transform: scale(0.8);
        position: absolute;
        top: -24px;
        left: -3px;
        width: 46px;
        height: 21px;
        background-color: #2E2929;
        border-radius: 50px;
        font-size: .8em;
        color: #FFFFFF;
        text-align: center;
        line-height: 21px;
        font-weight: 600;
      }
      .facebook-reactions .reactions li.reactions-triste {
        background-position: 0 -159px;
      }
      .facebook-reactions .reactions li.reactions-triste:hover {
        transform: translateY(-6px) scale(1.2);
      }
      .facebook-reactions .reactions li.reactions-triste:hover:before {
        content: attr(data-title);
        transform: scale(0.8);
        position: absolute;
        top: -24px;
        left: -3px;
        width: 46px;
        height: 21px;
        background-color: #2E2929;
        border-radius: 50px;
        font-size: .8em;
        color: #FFFFFF;
        text-align: center;
        line-height: 21px;
        font-weight: 600;
      }
      .facebook-reactions .reactions li.reactions-grr {
        background-position: 0 0;
      }
      .facebook-reactions .reactions li.reactions-grr:hover {
        transform: translateY(-6px) scale(1.2);
      }
      .facebook-reactions .reactions li.reactions-grr:hover:before {
        content: attr(data-title);
        transform: scale(0.8);
        position: absolute;
        top: -24px;
        left: -3px;
        width: 46px;
        height: 21px;
        background-color: #2E2929;
        border-radius: 50px;
        font-size: .8em;
        color: #FFFFFF;
        text-align: center;
        line-height: 21px;
        font-weight: 600;
      }
      .facebook-reactions .reactions li label {
        width: 100%;
        height: 100%;
        float: left;
        cursor: pointer;
      }

      #reactions-curtir:checked ~ .facebook-reactions:before {
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: 1px;
        left: 3px;
        background-image: url(../assets/images/sprite-reactions.png);
        background-position: 0 35px;
      }

      #reactions-amei:checked ~ .facebook-reactions:before {
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: 1px;
        left: 3px;
        background-image: url(../assets/images/sprite-reactions.png);
        background-position: -17px 35px;
      }

      #reactions-haha:checked ~ .facebook-reactions:before {
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: 1px;
        left: 3px;
        background-image: url(../assets/images/sprite-reactions.png);
        background-position: -17px 52px;
      }

      #reactions-uau:checked ~ .facebook-reactions:before {
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: 1px;
        left: 3px;
        background-image: url(../assets/images/sprite-reactions.png);
        background-position: -17px 18px;
      }

      #reactions-triste:checked ~ .facebook-reactions:before {
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: 1px;
        left: 3px;
        background-image: url(../assets/images/sprite-reactions.png);
        background-position: 0px 18px;
      }

      #reactions-grr:checked ~ .facebook-reactions:before {
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: 1px;
        left: 3px;
        background-image: url(../assets/images/sprite-reactions.png);
        background-position: 0px 52px;
      }
    
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
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
      //SASS
      @-webkit-keyframes facebook{
        0%{
          opacity: 0;
          transform: translateY(30px);
        }
        100%{
          opacity: 1;
          transform: translateY(0px);
        }
      }
      input{
        display: none;
      }
      .facebook-reactions{
        width: 100px;
        height: 52px;
        position: relative;
        margin: 50px 0 50px calc(50% - 50px);
        text-align: center;
        line-height: 87px;
        transition: opacity .20s ease;
        font-size: 1em;
        color: $preto;
        cursor: pointer;
          &:before{
            content: "";
            width: 16px;
            height: 16px;
            position: absolute;
            bottom: 1px;
            left: 3px;
            background-image: url(../assets/images/sprite-reactions.png);
            background-position: -33px 53px;
          }
          &:hover{
            text-decoration: underline;
            .reactions{
              display: block;
              opacity: 1;
                li{
                  &.reactions-{
                    &curtir{
                      -webkit-animation: facebook .10s cubic-bezier(.49,0,.46,1);
                    }
                    &amei{
                      -webkit-animation: facebook .20s cubic-bezier(.49,0,.46,1);
                    }
                    &haha{
                      -webkit-animation: facebook .30s cubic-bezier(.49,0,.46,1);
                    }
                    &uau{
                      -webkit-animation: facebook .40s cubic-bezier(.49,0,.46,1);
                    }
                    &triste{
                      -webkit-animation: facebook .50s cubic-bezier(.49,0,.46,1);
                    }
                    &grr{
                      -webkit-animation: facebook .60s cubic-bezier(.49,0,.46,1);
                    }
                  }
                }
            }
          }
          .reactions{
            opacity: 0;
            display: none;
            width: 292px;
            height: 52px;
            position: absolute;
            top: -30px;
            left: -94px;
            background-color: $branco;
            box-shadow: 1px 1px 11px $cinza;
            border-radius: 50px;
              ul{
                width: 100%;
                height: auto;
                float: left;
                margin: 0;
                padding: 0;
                list-style: none;
              }
              li{
                width: 40px;
                height: 40px;
                float: left;
                position: relative;
                margin: 7px 0 0 7px;
                background-image: url(../assets/images/sprite-reactions.png);
                transition: transform .25s ease;
                transform: translateY(0px);
                opacity: 1;
                &.reactions-{
                  &curtir,
                  &amei,
                  &haha,
                  &uau,
                  &triste,
                  &grr{
                    background-size: cover;
                  }
                  &curtir{
                    background-position: 0 -80px;
                      &:hover{
                          transform: translateY(-6px) scale(1.2);
                          &:before{
                            content: attr(data-title);
                            transform: scale(.8);
                            position: absolute;
                            top: -24px;
                            left: -3px;
                            width: 46px;
                            height: 21px;
                            background-color: $preto;
                            border-radius: 50px;
                            font-size: .8em;
                            color: $branco;
                            text-align: center;
                            line-height: 21px;
                            font-weight: 600;
                          }
                      }
                  }
                  &amei{
                    background-position: 0 -119px;
                    &:hover{
                      transform: translateY(-6px) scale(1.2);
                        &:before{
                          content: attr(data-title);
                          transform: scale(.8);
                          position: absolute;
                          top: -24px;
                          left: -3px;
                          width: 46px;
                          height: 21px;
                          background-color: $preto;
                          border-radius: 50px;
                          font-size: .8em;
                          color: $branco;
                          text-align: center;
                          line-height: 21px;
                          font-weight: 600;
                        }
                    }
                  }
                  &haha{
                    background-position: 0 -39px;
                    &:hover{
                      transform: translateY(-6px) scale(1.2);
                        &:before{
                          content: attr(data-title);
                          transform: scale(.8);
                          position: absolute;
                          top: -24px;
                          left: -3px;
                          width: 46px;
                          height: 21px;
                          background-color: $preto;
                          border-radius: 50px;
                          font-size: .8em;
                          color: $branco;
                          text-align: center;
                          line-height: 21px;
                          font-weight: 600;
                        }
                    }
                  }
                  &uau{
                    background-position: 0 -199px;
                    &:hover{
                      transform: translateY(-6px) scale(1.2);
                        &:before{
                          content: attr(data-title);
                          transform: scale(.8);
                          position: absolute;
                          top: -24px;
                          left: -3px;
                          width: 46px;
                          height: 21px;
                          background-color: $preto;
                          border-radius: 50px;
                          font-size: .8em;
                          color: $branco;
                          text-align: center;
                          line-height: 21px;
                          font-weight: 600;
                        }
                    }
                  }
                  &triste{
                    background-position: 0 -159px;
                    &:hover{
                      transform: translateY(-6px) scale(1.2);
                        &:before{
                          content: attr(data-title);
                          transform: scale(.8);
                          position: absolute;
                          top: -24px;
                          left: -3px;
                          width: 46px;
                          height: 21px;
                          background-color: $preto;
                          border-radius: 50px;
                          font-size: .8em;
                          color: $branco;
                          text-align: center;
                          line-height: 21px;
                          font-weight: 600;
                        }
                    }
                  }
                  &grr{
                    background-position: 0 0;
                    &:hover{
                      transform: translateY(-6px) scale(1.2);
                        &:before{
                          content: attr(data-title);
                          transform: scale(.8);
                          position: absolute;
                          top: -24px;
                          left: -3px;
                          width: 46px;
                          height: 21px;
                          background-color: $preto;
                          border-radius: 50px;
                          font-size: .8em;
                          color: $branco;
                          text-align: center;
                          line-height: 21px;
                          font-weight: 600;
                        }
                    }
                  }
                }
                label{
                  width: 100%;
                  height: 100%;
                  float: left;
                  cursor: pointer{}
                }
              }
          }
      }
      #reactions-curtir:checked ~ .facebook-reactions{
        &:before{
          content: "";
          width: 16px;
          height: 16px;
          position: absolute;
          bottom: 1px;
          left: 3px;
          background-image: url(../assets/images/sprite-reactions.png);
          background-position: 0 35px;
        }
      }
      #reactions-amei:checked ~ .facebook-reactions{
        &:before{
          content: "";
          width: 16px;
          height: 16px;
          position: absolute;
          bottom: 1px;
          left: 3px;
          background-image: url(../assets/images/sprite-reactions.png);
          background-position: -17px 35px;
        }
      }
      #reactions-haha:checked ~ .facebook-reactions{
        &:before{
          content: "";
          width: 16px;
          height: 16px;
          position: absolute;
          bottom: 1px;
          left: 3px;
          background-image: url(../assets/images/sprite-reactions.png);
          background-position: -17px 52px;
        }
      }
      #reactions-uau:checked ~ .facebook-reactions{
        &:before{
          content: "";
          width: 16px;
          height: 16px;
          position: absolute;
          bottom: 1px;
          left: 3px;
          background-image: url(../assets/images/sprite-reactions.png);
          background-position: -17px 18px;
        }
      }
      #reactions-triste:checked ~ .facebook-reactions{
        &:before{
          content: "";
          width: 16px;
          height: 16px;
          position: absolute;
          bottom: 1px;
          left: 3px;
          background-image: url(../assets/images/sprite-reactions.png);
          background-position: 0px 18px;
        }
      }
      #reactions-grr:checked ~ .facebook-reactions{
        &:before{
          content: "";
          width: 16px;
          height: 16px;
          position: absolute;
          bottom: 1px;
          left: 3px;
          background-image: url(../assets/images/sprite-reactions.png);
          background-position: 0px 52px;
        }
      }
    
bower install components-css
      <div class="root-menu">

        <nav class="menu-vertical">
          <ul>
            <li><i class="typicons-home"></i><div class="nav-texto">Principal</div></li>
            <li><i class="typicons-group"></i><div class="nav-texto">Usuários</div></li>
            <li><i class="typicons-camera"></i><div class="nav-texto">Galeria</div></li>
            <li><i class="typicons-lineChart"></i><div class="nav-texto">Gráficos</div></li>
            <li><i class="typicons-music"></i><div class="nav-texto">Musica</div></li>
            <li><i class="typicons-mail"></i><div class="nav-texto">Contato</div></li>
          </ul>
        </nav>

      </div>
    
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
      //CSS
      @import url(http://weloveiconfonts.com/api/?family=entypo|typicons);
      /* typicons */
      [class*="typicons-"]:before {
        font-family: 'Typicons', sans-serif;
      }

      .root-menu {
        width: 100%;
        height: 600px;
        float: left;
        background-color: deepPink;
        position: relative;
      }
      .root-menu nav {
        width: 80px;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: #0e0f12;
      }
      .root-menu nav li, .root-menu nav i {
        width: 80px;
        height: 50px;
        float: left;
        cursor: pointer;
        transition: all .10s ease;
      }
      .root-menu nav li {
        position: relative;
        margin-top: 30px;
      }
      .root-menu nav li:hover {
        background-color: #b40e68;
      }
      .root-menu nav li:hover i {
        color: #FFF;
      }
      .root-menu nav i {
        line-height: 60px;
        text-align: center;
        color: #878789;
        font-size: 50px;
        font-style: normal;
      }
      .root-menu nav .nav-texto {
        width: 100px;
        height: 50px;
        position: absolute;
        left: -190px;
        top: 0px;
        background-color: #b40e68;
        line-height: 50px;
        text-align: right;
        font-family: 'Roboto', sans-serif;
        color: #FFF;
        font-size: 1.5em;
        padding-right: 30px;
        transition: all .5s ease;
      }
      .root-menu nav li:hover .nav-texto {
        left: 80px;
      }
    
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
      //SASS
      @import url(http://weloveiconfonts.com/api/?family=entypo|typicons);
      /* typicons */
      [class*="typicons-"]:before {
        font-family: 'Typicons', sans-serif;
      }
      .root-menu{
        width: 100%;
        height: 600px;
        float: left;
        background-color: deepPink;
        position: relative;

          nav{
            width: 80px;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #0e0f12;

              li, i{
                width: 80px;
                height: 50px;
                float: left;
                cursor: pointer;
                transition: all .10s ease;
              }
              li{
                position: relative;
                margin-top: 30px;
              }
              li:hover{
                background-color: #b40e68;
              }
              li:hover i{
                color: #FFF;
              }
              i{
                line-height: 60px;
                text-align: center;
                color: #878789;
                font-size: 50px;
                font-style: normal;
              }
              .nav-texto{
                width: 100px;
                height: 50px;
                position: absolute;
                left: -190px;
                top: 0px;
                background-color: #b40e68;
                line-height: 50px;
                text-align: right;
                font-family: 'Roboto', sans-serif;
                color: #FFF;
                font-size: 1.5em;
                padding-right: 30px;
                transition: all .5s ease;
              }
              li:hover .nav-texto{
                left: 80px;
              }
          }
      }
    

Aqui é Body Builder

Que não vai dá rapaiz, não vai dá essa porra. Aqui é bodybuilder porra! Sai de casa comi pra caralho porra. Ele tá olhando pra gente. AHHHHHHHHHHHHHHHHHHHHHH..., porra! Sai filho da puta!

Aqui é bodybuilder porra! Vo derrubar tudo essas árvore do parque ibirapuera. Vamo monstro! Ele tá olhando pra gente. Birl! Negativa Bambam negativa.

Birl! Sai filho da puta! É 37 anos caralho! É esse que a gente quer, é ele que nóis vamo buscar. Ele tá olhando pra gente. Não vai dá não.

Ajuda o maluco que tá doente. É 13 porra! É nóis caraio é trapezera buscando caraio! É verão o ano todo vem cumpadi. É esse que a gente quer, é ele que nóis vamo buscar. Não vai dá não.

Ajuda o maluco que tá doente. É esse que a gente quer, é ele que nóis vamo buscar. É nóis caraio é trapezera buscando caraio! Não vai dá não. Vem porra! Negativa Bambam negativa.

Negativa Bambam negativa. Que não vai dá rapaiz, não vai dá essa porra. Vai subir árvore é o caralho porra! Sabe o que é isso daí? Trapézio descendente é o nome disso aí. Ele tá olhando pra gente. É verão o ano todo vem cumpadi.

Bora caralho, você quer ver essa porra velho. Vai subir árvore é o caralho porra! Aqui nóis constrói fibra, não é água com músculo. Vamo monstro! AHHHHHHHHHHHHHHHHHHHHHH..., porra! É verão o ano todo vem cumpadi.

Vamo monstro! Vo derrubar tudo essas árvore do parque ibirapuera. Sabe o que é isso daí? Trapézio descendente é o nome disso aí. Negativa Bambam negativa. Birl! Eu quero esse 13 daqui a pouquinho aí.

Ajuda o maluco que tá doente. É esse que a gente quer, é ele que nóis vamo buscar. Negativa Bambam negativa. Ó o homem ali porra!, é 13 porra! Bora caralho, você quer ver essa porra velho. Que não vai dá rapaiz, não vai dá essa porra.

Eu quero esse 13 daqui a pouquinho aí. É 13 porra! Tá comigo porra. Eita porra!, tá saindo da jaula o monstro! Vai subir árvore é o caralho porra! Ajuda o maluco que tá doente.

Vo derrubar tudo essas árvore do parque ibirapuera. É 37 anos caralho! Aqui é bodybuilder porra! Boraaa, Hora do Show Porra. É 13 porra! Não vai dá não.

bower install components-css
      <input type="radio" id="see-more-open" name="input-see-more">
      <input type="radio" id="see-more-closed" name="input-see-more">
      <div class="box-see-more">

        <h2>Aqui é Body Builder</h2>

        <p>Que não vai dá rapaiz, não vai dá essa porra. Aqui é bodybuilder porra! Sai de casa comi pra caralho porra.</p>
        <p>Aqui é bodybuilder porra! Vo derrubar tudo essas árvore do parque ibirapuera. Vamo monstro! Ele tá olhando</p>
        <p>Birl! Sai filho da puta! É 37 anos caralho! É esse que a gente quer, é ele que nóis vamo buscar. </p>
        <p>Ajuda o maluco que tá doente. É 13 porra! É nóis caraio é trapezera buscando caraio! É verão o ano</p>
        <p>Ajuda o maluco que tá doente. É esse que a gente quer, é ele que nóis vamo buscar. É nóis caraio é</p>
        <p>Negativa Bambam negativa. Que não vai dá rapaiz, não vai dá essa porra. Vai subir árvore é o caralho</p>
        <p>Bora caralho, você quer ver essa porra velho. Vai subir árvore é o caralho porra! Aqui nóis constrói</p>
        <p>Vamo monstro! Vo derrubar tudo essas árvore do parque ibirapuera. Sabe o que é isso daí? Trapézio</p>
        <p>Ajuda o maluco que tá doente. É esse que a gente quer, é ele que nóis vamo buscar. Negativa Bambam</p>
        <p>Eu quero esse 13 daqui a pouquinho aí. É 13 porra! Tá comigo porra. Eita porra!, tá saindo da</p>
        <p>Vo derrubar tudo essas árvore do parque ibirapuera. É 37 anos caralho! Aqui é bodybuilder</p>

        <div class="btn-see-more">
          <div class="btn-see-more-open"><label for="see-more-open">Veja mais</label></div>
          <div class="btn-see-more-closed"><label for="see-more-closed">Fechar</label></div>
        </div>

      </div>
    
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
      //CSS
      input[name="input-see-more"] {
        display: none;
      }

      .box-see-more {
        width: 100%;
        height: 300px;
        float: left;
        overflow: hidden;
        position: relative;
      }
      .box-see-more h2 {
        width: 100%;
        height: auto;
        float: left;
        margin: 20px 0;
        text-align: center;
        font-family: "Roboto",sans-serif;
        font-weight: 400;
        font-size: 2em;
      }
      .box-see-more p {
        width: 100%;
        height: auto;
        float: left;
        margin: 0 0 10px;
        text-align: justify;
        font-family: "Roboto",sans-serif;
        font-weight: 400;
        font-size: 1em;
      }
      .box-see-more .btn-see-more {
        width: 100%;
        height: 58px;
        float: left;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #FFF;
      }
      .box-see-more .btn-see-more .btn-see-more-open,
      .box-see-more .btn-see-more .btn-see-more-closed {
        width: 200px;
        height: 50px;
        margin: 0 auto;
      }
      .box-see-more .btn-see-more .btn-see-more-open label,
      .box-see-more .btn-see-more .btn-see-more-closed label {
        width: 100%;
        height: 50px;
        float: left;
        background-color: #3CA3F2;
        border-bottom: 8px solid #3388CE;
        text-align: center;
        text-transform: uppercase;
        line-height: 50px;
        font-family: "Roboto",sans-serif;
        font-weight: 400;
        color: #FFFFFF;
        font-size: 1.3em;
        cursor: pointer;
        transition: all .3s ease-in-out;
      }
      .box-see-more .btn-see-more .btn-see-more-open label:hover,
      .box-see-more .btn-see-more .btn-see-more-closed label:hover {
        background-color: #2E2929;
        border-bottom: 8px solid #211E1D;
      }
      .box-see-more .btn-see-more .btn-see-more-closed {
        display: none;
      }

      #see-more-open:checked ~ .box-see-more {
        height: auto;
      }

      #see-more-open:checked ~ .box-see-more .btn-see-more-open {
        display: none;
      }

      #see-more-open:checked ~ .box-see-more .btn-see-more-closed {
        display: block;
      }

      #see-more-closed:checked ~ .box-see-more {
        height: 300px;
      }

      #see-more-closed:checked ~ .box-see-more .btn-see-more-closed {
        display: none;
      }

      #see-more-closed:checked ~ .box-see-more .btn-see-more-open {
        display: block;
      }

    
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
      //SASS
      input[name="input-see-more"]{
        display: none;
      }
      .box-see-more{
        width: 100%;
        height: 300px;
        float: left;
        overflow: hidden;
        position: relative;
          h2{
            width: 100%;
            height: auto;
            float: left;
            margin: 20px 0;
            text-align: center;
            font-family: $font-padrao;
            font-weight: 400;
            font-size: 2em;
          }
          p{
            width: 100%;
            height: auto;
            float: left;
            margin: 0 0 10px;
            text-align: justify;
            font-family: $font-padrao;
            font-weight: 400;
            font-size: 1em;
          }
          .btn-see-more{
            width: 100%;
            height: 58px;
            float: left;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #FFF;
              .btn-see-more-open,
              .btn-see-more-closed{
                width: 200px;
                height: 50px;
                margin: 0 auto;
                  label{
                    width: 100%;
                    height: 50px;
                    float: left;
                    background-color: $azul;
                    border-bottom: 8px solid #3388CE;
                    text-align: center;
                    text-transform: uppercase;
                    line-height: 50px;
                    font-family: $font-padrao;
                    font-weight: 400;
                    color: $branco;
                    font-size: 1.3em;
                    cursor: pointer;
                    transition: all .3s ease-in-out;
                    &:hover{
                      background-color: $preto;
                      border-bottom: 8px solid #211E1D;
                    }
                  }
              }
              .btn-see-more-closed{
                display: none;
              }
          }
      }

      #see-more-open:checked ~ .box-see-more{
        height: auto;
      }
      #see-more-open:checked ~ .box-see-more .btn-see-more-open{
        display: none;
      }
      #see-more-open:checked ~ .box-see-more .btn-see-more-closed{
        display: block;
      }
      #see-more-closed:checked ~ .box-see-more{
        height: 300px;
      }
      #see-more-closed:checked ~ .box-see-more .btn-see-more-closed{
        display: none;
      }
      #see-more-closed:checked ~ .box-see-more .btn-see-more-open{
        display: block;
      }
    

    Pagina 1

  • Vitrine
  • Vitrine
  • Vitrine
  • Pagina 2

  • Vitrine
  • Vitrine
  • Vitrine
  • Pagina 3

  • Vitrine
  • Vitrine
  • Vitrine
  • Pagina 4

  • Vitrine
  • Vitrine
  • Vitrine
bower install components-css
      <div class="box-paginacao">
        <input type="radio" name="input-paginacao" id="paginacao1" checked>
        <input type="radio" name="input-paginacao" id="paginacao2">
        <input type="radio" name="input-paginacao" id="paginacao3">
        <input type="radio" name="input-paginacao" id="paginacao4">
        <div class="box-vitrines">
          <ul>
            <div class="vitrine1">
              <h2>Pagina 1</h2>
              <li>Vitrine</li>
              <li>Vitrine</li>
              <li>Vitrine</li>
            </div>
            <div class="vitrine2">
              <h2>Pagina 2</h2>
              <li>Vitrine</li>
              <li>Vitrine</li>
              <li>Vitrine</li>
            </div>
            <div class="vitrine3">
              <h2>Pagina 3</h2>
              <li>Vitrine</li>
              <li>Vitrine</li>
              <li>Vitrine</li>
            </div>
            <div class="vitrine4">
              <h2>Pagina 4</h2>
              <li>Vitrine</li>
              <li>Vitrine</li>
              <li>Vitrine</li>
            </div>
          </ul>                  
          <div class="btn-paginacao">
            <ul>
              <li><label for="paginacao1">1</label></li>
              <li><label for="paginacao2">2</label></li>
              <li><label for="paginacao3">3</label></li>
              <li><label for="paginacao4">4</label></li>
            </ul>
          </div>
        </div>
      </div>
    
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
      input {
        display: none;
      }

      .box-paginacao {
        width: 100%;
        height: auto;
        float: left;
      }
      .box-paginacao h2 {
        width: 100%;
        height: auto;
        float: left;
        margin: 0 0 50px;
        text-align: center;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 1.3em;
        color: #3CA3F2;
      }
      .box-paginacao .box-vitrines {
        width: 100%;
        height: 371px;
        float: left;
        overflow: hidden;
        position: relative;
      }
      .box-paginacao ul {
        width: 100%;
        height: auto;
        float: left;
      }
      .box-paginacao ul li {
        width: 250px;
        height: 250px;
        float: left;
        margin: 0 0 10px 60px;
        border: 1px solid #c0c8c9;
        border-radius: 10px;
        line-height: 250px;
        text-align: center;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 1.3em;
        color: #2E2929;
      }
      .box-paginacao .vitrine1,
      .box-paginacao .vitrine2,
      .box-paginacao .vitrine3,
      .box-paginacao .vitrine4 {
        width: 100%;
        height: 336px;
        float: left;
        margin-bottom: 33px;
      }

      .btn-paginacao {
        width: 100%;
        height: auto;
        float: left;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 10;
        left: 0;
        bottom: 0;
        background-color: #FFF;
      }
      .btn-paginacao ul {
        width: auto;
        height: auto;
      }
      .btn-paginacao ul li {
        width: 30px;
        height: 30px;
        float: left;
        margin: 0 5px 0 0;
        border: 0;
      }
      .btn-paginacao ul li:last-child {
        margin: 0;
      }
      .btn-paginacao ul li label {
        width: 100%;
        height: 30px;
        float: left;
        text-align: center;
        line-height: 30px;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 1em;
        color: #2E2929;
        cursor: pointer;
        border-radius: 3px;
        transition: background-color .25s ease-in-out;
      }
      .btn-paginacao ul li label:hover {
        background-color: #FF1493;
        color: #FFF;
      }

      #paginacao1:checked ~ .box-vitrines > ul {
        transition: transform .7s ease-in-out;
        transform: translateY(0px);
      }

      #paginacao1:checked ~ .box-vitrines label[for="paginacao1"] {
        background-color: #FF1493;
        color: #FFF;
      }

      #paginacao2:checked ~ .box-vitrines > ul {
        transition: transform .7s ease-in-out;
        transform: translateY(-369px);
      }

      #paginacao2:checked ~ .box-vitrines label[for="paginacao2"] {
        background-color: #FF1493;
        color: #FFF;
      }

      #paginacao3:checked ~ .box-vitrines > ul {
        transition: transform .7s ease-in-out;
        transform: translateY(-738px);
      }

      #paginacao3:checked ~ .box-vitrines label[for="paginacao3"] {
        background-color: #FF1493;
        color: #FFF;
      }

      #paginacao4:checked ~ .box-vitrines > ul {
        transition: transform .7s ease-in-out;
        transform: translateY(-1107px);
      }

      #paginacao4:checked ~ .box-vitrines label[for="paginacao4"] {
        background-color: #FF1493;
        color: #FFF;
      }


    
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
      //SASS
      input{
        display: none;
      }
      .box-paginacao{
        width: 100%;
        height: auto;
        float: left;
          h2{
            width: 100%;
            height: auto;
            float: left;
            margin: 0 0 50px;
            text-align: center;
            font-family: $font-padrao;
            font-weight: 400;
            font-size: 1.3em;
            color: $azul;
          }
          .box-vitrines{
            width: 100%;
            height: 371px;
            float: left;
            overflow: hidden;
            position: relative;
          }
          ul{
            width: 100%;
            height: auto;
            float: left;
              li{
                width: 250px;
                height: 250px;
                float: left;
                margin: 0 0 10px 60px;
                border: 1px solid $cinza;
                border-radius: 10px;
                line-height: 250px;
                text-align: center;
                font-family: $font-padrao;
                font-weight: 400;
                font-size: 1.3em;
                color: $preto;
              }        
          }
          .vitrine1,
          .vitrine2,
          .vitrine3,
          .vitrine4{
            width: 100%;
            height: 336px;
            float: left;
            margin-bottom: 33px;
          }
      }
      .btn-paginacao{
        width: 100%;
        height: auto;
        float: left;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 10;
        left: 0;
        bottom: 0;
        background-color: $branco;
          ul{
            width: auto;
            height: auto;
              li{
                width: 30px;
                height: 30px;
                float: left;
                margin: 0 5px 0 0;
                border: 0;
                &:last-child{
                  margin: 0;
                }
                  label{
                    width: 100%;
                    height: 30px;
                    float: left;
                    text-align: center;
                    line-height: 30px;
                    font-family: $font-padrao;
                    font-weight: 400;
                    font-size: 1em;
                    color: $preto;
                    cursor: pointer;
                    border-radius: 3px;
                    transition: background-color .25s ease-in-out;
                    &:hover{
                      background-color: $rosa;
                      color: $branco;
                    }
                  }
              }
          }
      }
      #paginacao1:checked ~ .box-vitrines > ul{  
        transition: transform .7s ease-in-out;
        transform: translateY(0px);
      }
      #paginacao1:checked ~ .box-vitrines label[for="paginacao1"]{
        background-color: $rosa;
        color: $branco;
      }  
      #paginacao2:checked ~ .box-vitrines > ul{
        transition: transform .7s ease-in-out;
        transform: translateY(-369px);
      }
      #paginacao2:checked ~ .box-vitrines label[for="paginacao2"]{
        background-color: $rosa;
        color: $branco;
      }
      #paginacao3:checked ~ .box-vitrines > ul{
        transition: transform .7s ease-in-out;
        transform: translateY(-738px);
      }
      #paginacao3:checked ~ .box-vitrines label[for="paginacao3"]{
        background-color: $rosa;
        color: $branco;
      }
      #paginacao4:checked ~ .box-vitrines > ul{
        transition: transform .7s ease-in-out;
        transform: translateY(-1107px);
      }
      #paginacao4:checked ~ .box-vitrines label[for="paginacao4"]{
        background-color: $rosa;
        color: $branco;
      }