├── .gitignore ├── README.md ├── bower.json ├── css-components ├── .gitignore ├── _config.yml ├── _includes │ ├── avaliacao.html │ ├── card.html │ ├── carousel.html │ ├── checkbox.html │ ├── collapse.html │ ├── download.html │ ├── dropdown.html │ ├── facebook-reactions.html │ ├── footer.html │ ├── head.html │ ├── header.html │ ├── icon-github.html │ ├── icon-github.svg │ ├── icon-twitter.html │ ├── icon-twitter.svg │ ├── menu-mobile.html │ ├── menu-vertical.html │ ├── menu.html │ ├── modal.html │ ├── paginacao.html │ ├── preloaders.html │ ├── tab 2.html │ ├── tab.html │ ├── text-filter-background.html │ ├── timeline.html │ ├── tooltips.html │ └── veja-mais.html ├── _layouts │ ├── default.html │ ├── page.html │ └── post.html ├── _posts │ ├── 2016-10-13-carousel.md │ └── 2016-10-13-welcome-to-jekyll.markdown ├── _sass │ ├── _animations.scss │ ├── _avaliacao.scss │ ├── _base.scss │ ├── _card.scss │ ├── _carousel.scss │ ├── _checkbox.scss │ ├── _collapse.scss │ ├── _dropdown.scss │ ├── _facebook-reactions.scss │ ├── _footer.scss │ ├── _header.scss │ ├── _layout.scss │ ├── _menu-mobile.scss │ ├── _menu-vertical.scss │ ├── _mobile.scss │ ├── _modal.scss │ ├── _paginacao.scss │ ├── _preloaders.scss │ ├── _syntax-highlighting.scss │ ├── _tab.scss │ ├── _text-filter-background.scss │ ├── _timeline.scss │ ├── _tooltips.scss │ └── _veja-mais.scss ├── about.md ├── assets │ └── images │ │ ├── css-components.jpg │ │ ├── github-2.png │ │ ├── github.jpg │ │ ├── github.png │ │ ├── harckers.jpg │ │ ├── harley-1.jpg │ │ ├── harley-2.jpg │ │ ├── harley-3.jpg │ │ ├── henrique-melanda.jpg │ │ ├── sprite-reactions.png │ │ └── star-wars.jpg ├── css │ └── main.scss ├── feed.xml └── index.html └── exemplos ├── avaliacao ├── index.html └── style.css ├── card ├── harckers.jpg ├── index.html └── style.css ├── carousel ├── harley-1.jpg ├── harley-2.jpg ├── harley-3.jpg ├── index.html └── style.css ├── checkbox ├── index.html └── style.css ├── collapse ├── index.html └── style.css ├── dropdown ├── index.html └── style.css ├── facebook-reactions ├── index.html ├── sprite-reactions.png └── style.css ├── menu-mobile ├── index.html └── style.css ├── menu-vertical ├── index.html └── style.css ├── modal ├── index.html └── style.css ├── paginacao ├── index.html └── style.css ├── preloaders ├── index.html └── style.css ├── tab ├── index.html └── style.css ├── text-filter-background ├── index.html └── style.css ├── timeline ├── index.html └── style.css ├── tooltips ├── index.html └── style.css └── veja-mais ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Para todos os arquivos e sub-pastas localizados na pasta 2 | build/ 3 | node_modules/ 4 | .sass-cache/ 5 | # Para todos os arquivos e sub-pastas localizados na pasta bower_components/ 6 | bower_components/ 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #CSS COMPONENTS 2 | 3 | Acesse [http://henriquemelanda.com.br/css-components/](http://henriquemelanda.com.br/css-components/) e confira como o CSS é lindo!!!! <3 4 | 5 | - Carousel 6 | - Collapse 7 | - Menu Mobile 8 | - Modal 9 | - Tab 10 | - Card 11 | - Dropdown 12 | - Timeline 13 | - Preloaders 14 | - Tooltips 15 | - Text Filter Background 16 | - Checkbox 17 | - Avaliação 18 | - Facebook Reactions 19 | - Menu Vertical 20 | - Veja Mais 21 | - Paginação 22 | 23 | # Como funciona o projeto por baixo dos panos? 24 | - Jekyll 3.1.6 25 | - SASS 26 | 27 | # Como contribuir 28 | 1. Clone o projeto 29 | 2. Para rodar o projeto acesse a pasta via terminal css-components/css-components e digite o comando jekyll s 30 | 3. Coloque o HTML do componente dentro da pasta css-components/_includes 31 | 4. Coloque o CSS do componente dentro da pasta css-components/_sass 32 | 5. Abra uma PR com o novo componente que você criou descrevendo ele. 33 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "components-css", 3 | "version": "0.0.1", 4 | "homepage": "hjdesigner.github.io/css-components", 5 | "authors": [ 6 | "Henrique Rodrigues " 7 | ], 8 | "description": "CSS Components são componentes criado somente usando css com todo seu poder sem nada de javascript ou jquery", 9 | "main": [ 10 | "css-components/_sass/_avaliacao.scss", 11 | "css-components/_sass/_card.scss", 12 | "css-components/_sass/_carousel.scss", 13 | "css-components/_sass/_checkbox.scss", 14 | "css-components/_sass/_collapse.scss", 15 | "css-components/_sass/_dropdown.scss", 16 | "css-components/_sass/_menu-mobile.scss", 17 | "css-components/_sass/_modal.scss", 18 | "css-components/_sass/_preloaders.scss", 19 | "css-components/_sass/_tab.scss", 20 | "css-components/_sass/_texto-filtro.scss", 21 | "css-components/_sass/_timeline.scss", 22 | "css-components/_sass/_tooltips.scss" 23 | ], 24 | "license": "http://henriquerodrigues.mit-license.org/", 25 | "ignore": [ 26 | "**/.*", 27 | "node_modules", 28 | "bower_components", 29 | ".sass-cache", 30 | "build", 31 | "exemplos", 32 | "src/images/", 33 | "src/index.html", 34 | "src/sass/layout/", 35 | "src/sass/style.scss", 36 | "src/css/css-components-min.css.map", 37 | "src/css/style-min.css", 38 | "src/css/style-min.css.map" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /css-components/.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | .jekyll-metadata 4 | -------------------------------------------------------------------------------- /css-components/_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole blog, values 4 | # which you are expected to set up once and rarely need to edit after that. 5 | # For technical reasons, this file is *NOT* reloaded automatically when you use 6 | # 'jekyll serve'. If you change this file, please restart the server process. 7 | 8 | # Site settings 9 | title: CSS Components 10 | email: your-email@domain.com 11 | description: "CSS Components são componentes criado somente usando css com todo seu poder sem nada de javascript ou jquery" 12 | keywords: "components, css, pure css, css components, modal css, card css, carrousel css, menu mobile css" 13 | twitterTitle: "CSS Components" 14 | twitterDescription: "CSS Components são componentes criado somente usando css com todo seu poder sem nada de javascript ou jquery" 15 | twitterUrl: "http://hjdesigner.github.io/css-components/" 16 | twitterImage: "http://hjdesigner.github.io/css-components/images/css-components.jpg" 17 | ogTitle: "CSS Components" 18 | ogDescription: "CSS Components são componentes criado somente usando css com todo seu poder sem nada de javascript ou jquery" 19 | ogImage: "http://hjdesigner.github.io/css-components/images/css-components.jpg" 20 | ogUrl: "http://hjdesigner.github.io/css-components/" 21 | baseurl: "" # the subpath of your site, e.g. /blog 22 | url: "http://henriquemelanda.com.br/css-components/" # the base hostname & protocol for your site 23 | twitter: https://www.twitter.com/coisadedev 24 | github: https://www.github.com/hjdesigner 25 | facebook: https://www.facebook.com/hjFrontEnd 26 | codepen: https://codepen.io/hjdesigner/ 27 | linkedin: https://br.linkedin.com/in/coisadedev 28 | 29 | sass: 30 | style: compressed 31 | 32 | # Build settings 33 | markdown: kramdown 34 | -------------------------------------------------------------------------------- /css-components/_includes/card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | 6 |
7 |
8 | Harckers 9 |
10 |
11 | Card Titulo 12 |
13 | 14 | 15 |
16 | 17 |
18 |
19 |

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.

20 |
21 | 22 |
23 | 24 | {% include download.html %} 25 | 26 | 27 |
28 | 29 | 30 | {% highlight html %} 31 |
32 |
33 | Harckers 34 |
35 |
36 | Card Titulo 37 |
38 | 39 | 40 |
41 | 42 |
43 |
44 |

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.

45 |
46 | 47 |
48 | {% endhighlight %} 49 | 50 | {% highlight css linenos%} 51 | //CSS 52 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 53 | body{ 54 | font-family: 'Roboto', sans-serif;; 55 | font-size: 100%; 56 | } 57 | @-webkit-keyframes alpha { 58 | 0%{ 59 | opacity: 0; 60 | } 61 | 100%{ 62 | opacity: 1px; 63 | } 64 | } 65 | .card-box{ 66 | width: 390px; 67 | height: 280px; 68 | float: left; 69 | box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);; 70 | position: relative; 71 | } 72 | .card-box input[type="checkbox"]{ 73 | display: none; 74 | } 75 | .card-img{ 76 | width: 100%; 77 | height: auto; 78 | float: left; 79 | margin: 0; 80 | } 81 | .card-box .card-titulo{ 82 | width: 350px; 83 | height: 240px; 84 | padding: 10px 20px 0; 85 | font-weight: 300; 86 | color: #FF1493; 87 | font-size: 1.4em; 88 | } 89 | .card-box .click-card{ 90 | width: 26px; 91 | height: 14px; 92 | position: absolute; 93 | right: 10px; 94 | bottom: 10px; 95 | z-index: 1; 96 | } 97 | .card-box .click-card label{ 98 | width: 26px; 99 | height: 14px; 100 | float: left; 101 | cursor: pointer; 102 | } 103 | .card-box .click-card label:before{ 104 | content: ""; 105 | width: 15px; 106 | height: 2px; 107 | position: absolute; 108 | left: 0px; 109 | top: 6px; 110 | background-color: #2E2929; 111 | transform: rotate(-50deg); 112 | } 113 | .card-box .click-card label:after{ 114 | content: ""; 115 | width: 15px; 116 | height: 2px; 117 | position: absolute; 118 | left: 10px; 119 | top: 6px; 120 | background-color: #2E2929; 121 | transform: rotate(50deg); 122 | } 123 | .card-box .card-texto{ 124 | display: none; 125 | width: 350px; 126 | height: 240px; 127 | position: absolute; 128 | top: 0; 129 | left: 0; 130 | z-index: 0; 131 | padding: 20px; 132 | line-height: 30px; 133 | font-family: 'Roboto', sans-serif; 134 | font-weight: 500; 135 | color: #2E2929; 136 | background-color: #FFFFFF; 137 | } 138 | .card-box #click-card:checked ~ .card-texto{ 139 | display: block; 140 | -webkit-animation: alpha .3s linear; 141 | } 142 | .card-box #click-card:checked ~ .click-card label:after{ 143 | content: ""; 144 | width: 15px; 145 | height: 2px; 146 | left: 0px; 147 | top: 6px; 148 | position: absolute; 149 | background-color: #2E2929; 150 | transform: rotate(50deg); 151 | } 152 | 153 | {% endhighlight %} 154 | 155 | {% highlight sass linenos%} 156 | //SASS 157 | .card-box{ 158 | width: 390px; 159 | height: 280px; 160 | margin: 0 auto; 161 | box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 162 | position: relative; 163 | 164 | input[type="checkbox"]{ 165 | display: none; 166 | } 167 | .card-img{ 168 | width: 100%; 169 | height: auto; 170 | float: left; 171 | margin: 0px; 172 | } 173 | 174 | .card-titulo{ 175 | width: 350px; 176 | height: 240px; 177 | padding: 10px 20px 0; 178 | font-weight: 300; 179 | color: $rosa; 180 | font-size: 1.4em; 181 | } 182 | .click-card{ 183 | width: 26px; 184 | height: 14px; 185 | position: absolute; 186 | right: 10px; 187 | bottom: 10px; 188 | z-index: 1; 189 | label{ 190 | width: 26px; 191 | height: 14px; 192 | float: left; 193 | cursor: pointer; 194 | &:before{ 195 | content: ""; 196 | width: 15px; 197 | height: 2px; 198 | position: absolute; 199 | left: 0px; 200 | top: 6px; 201 | background-color: #2E2929; 202 | transform: rotate(-50deg); 203 | } 204 | &:after{ 205 | content: ""; 206 | width: 15px; 207 | height: 2px; 208 | left: 10px; 209 | top: 6px; 210 | position: absolute; 211 | background-color: #2E2929; 212 | transform: rotate(50deg); 213 | } 214 | } 215 | } 216 | .card-texto{ 217 | display: none; 218 | width: 350px; 219 | height: 240px; 220 | position: absolute; 221 | top: 0; 222 | left: 0; 223 | z-index: 0; 224 | padding: 20px; 225 | line-height: 30px; 226 | font-family: $font-padrao; 227 | font-weight: 500; 228 | color: $preto; 229 | background-color: $branco; 230 | } 231 | #click-card:checked ~ .card-texto{ 232 | display: block; 233 | -webkit-animation: alpha .3s linear; 234 | } 235 | #click-card:checked ~ .click-card{ 236 | label{ 237 | &:after{ 238 | content: ""; 239 | width: 15px; 240 | height: 2px; 241 | left: 0px; 242 | top: 6px; 243 | position: absolute; 244 | background-color: #2E2929; 245 | transform: rotate(50deg); 246 | } 247 | } 248 | 249 | } 250 | } 251 | 252 | {% endhighlight %} 253 |
254 | -------------------------------------------------------------------------------- /css-components/_includes/download.html: -------------------------------------------------------------------------------- 1 |
2 | Download CSS-Components Criado por: Henrique Rodrigues 3 |
4 |
5 | bower install components-css 6 |
-------------------------------------------------------------------------------- /css-components/_includes/dropdown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | 6 |
7 | 8 | 9 |
    10 |
  • Item 1
    • 11 |
  • Item 2
    • 12 |
  • Item 3
    • 13 |
  • Item 4
    • 14 |
  • Item 5
    • 15 |
  • Item 6
    • 16 |
17 |
18 | 19 | 20 | {% include download.html %} 21 | 22 |
23 | 24 | {% highlight html %} 25 |
26 | 27 | 28 |
    29 |
  • Item 1
    • 30 |
  • Item 2
    • 31 |
  • Item 3
    • 32 |
  • Item 4
    • 33 |
  • Item 5
    • 34 |
  • Item 6
    • 35 |
36 |
37 | {% endhighlight %} 38 | 39 | {% highlight css linenos%} 40 | //CSS 41 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 42 | body{ 43 | font-family: 'Roboto', sans-serif;; 44 | font-size: 100%; 45 | } 46 | @-webkit-keyframes animationDropdown { 47 | 0%{ 48 | height: 0px; 49 | } 50 | 100%{ 51 | height: 360px; 52 | } 53 | } 54 | @-webkit-keyframes alpha { 55 | 0%{ 56 | opacity: 0; 57 | } 58 | 100%{ 59 | opacity: 1px; 60 | } 61 | } 62 | .drop-box{ 63 | width: 350px; 64 | height: auto; 65 | float: left; 66 | position: relative; 67 | } 68 | .drop-box input[type="checkbox"]{ 69 | display: none; 70 | } 71 | .drop-box .title{ 72 | width: 340px; 73 | height: 50px; 74 | float: left; 75 | position: relative; 76 | padding-left: 10px; 77 | background-color: #2E2929; 78 | line-height: 50px; 79 | font-weight: 500; 80 | color: #FFFFFF; 81 | cursor: pointer; 82 | transition: all .3s ease; 83 | } 84 | .drop-box .title:after{ 85 | content: "\25BC"; 86 | width: 50px; 87 | height: 50px; 88 | position: absolute; 89 | top: 0; 90 | right: 0; 91 | background-color: #FF00B7; 92 | text-align: center; 93 | line-height: 55px; 94 | font-size: 1.2em; 95 | } 96 | .drop-box .title:hover:after{ 97 | content: "\25BC"; 98 | width: 50px; 99 | height: 50px; 100 | position: absolute; 101 | top: 0; 102 | right: 0; 103 | background-color: #FF1493; 104 | text-align: center; 105 | line-height: 55px; 106 | font-size: 1.2em; 107 | } 108 | .drop-box ul{ 109 | display: none; 110 | width: 100%; 111 | height: auto; 112 | float: left; 113 | position: absolute; 114 | top: 57px; 115 | background-color: #2E2929; 116 | -webkit-animation: animationDropdown .3s ease; 117 | padding: 0px; 118 | margin: 0px; 119 | list-style: none; 120 | text-decoration: none; 121 | } 122 | .drop-box li{ 123 | width: 330px; 124 | height: 40px; 125 | float: left; 126 | padding: 10px; 127 | line-height: 50px; 128 | font-weight: 300; 129 | font-size: 1em; 130 | color: #FFFFFF; 131 | -webkit-animation: alpha .5s ease; 132 | } 133 | .drop-box li:hover{ 134 | background-color: #FF1493; 135 | } 136 | .drop-box #open-drop:checked ~ ul{ 137 | display: block; 138 | } 139 | 140 | {% endhighlight %} 141 | 142 | {% highlight sass linenos%} 143 | //SASS 144 | .drop-box{ 145 | width: 350px; 146 | height: auto; 147 | margin: 0 auto; 148 | position: relative; 149 | input[type="checkbox"]{ 150 | display: none; 151 | } 152 | .title{ 153 | width: 340px; 154 | height: 50px; 155 | float: left; 156 | padding-left: 10px; 157 | background-color: $preto; 158 | line-height: 50px; 159 | font-weight: 500; 160 | color: $branco; 161 | cursor: pointer; 162 | transition: all .3s ease; 163 | &:after{ 164 | content: "\25BC"; 165 | width: 50px; 166 | height: 50px; 167 | position: absolute; 168 | top: 0; 169 | right: 0; 170 | background-color: $rosa2; 171 | text-align: center; 172 | line-height: 55px; 173 | font-size: 1.2em; 174 | } 175 | &:hover{ 176 | &:after{ 177 | content: "\25BC"; 178 | width: 50px; 179 | height: 50px; 180 | position: absolute; 181 | top: 0; 182 | right: 0; 183 | background-color: $rosa; 184 | text-align: center; 185 | line-height: 55px; 186 | font-size: 1.2em; 187 | } 188 | } 189 | } 190 | ul{ 191 | display: none; 192 | width: 100%; 193 | height: auto; 194 | float: left; 195 | position: absolute; 196 | top: 57px; 197 | background-color: $preto; 198 | -webkit-animation: animationDropdown .3s ease; 199 | -moz-animation: animationDropdown .3s ease; 200 | -o-animation: animationDropdown .3s ease; 201 | -ms-animation: animationDropdown .3s ease; 202 | animation: animationDropdown .3s ease; 203 | li{ 204 | width: 330px; 205 | height: 40px; 206 | float: left; 207 | padding: 10px; 208 | line-height: 50px; 209 | font-weight: 300; 210 | font-size: 1em; 211 | color: $branco; 212 | -webkit-animation: alpha .5s ease; 213 | -moz-animation: alpha .5s ease; 214 | -o-animation: alpha .5s ease; 215 | -ms-animation: alpha .5s ease; 216 | animation: alpha .5s ease; 217 | &:hover{ 218 | background-color: $rosa; 219 | } 220 | } 221 | } 222 | #open-drop:checked ~ ul{ 223 | display: block; 224 | } 225 | } 226 | 227 | {% endhighlight %} 228 |
229 | -------------------------------------------------------------------------------- /css-components/_includes/footer.html: -------------------------------------------------------------------------------- 1 | 55 | -------------------------------------------------------------------------------- /css-components/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 30 | 31 | -------------------------------------------------------------------------------- /css-components/_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 | 25 |
26 | -------------------------------------------------------------------------------- /css-components/_includes/icon-github.html: -------------------------------------------------------------------------------- 1 | {% include icon-github.svg %}{{ include.username }} 2 | -------------------------------------------------------------------------------- /css-components/_includes/icon-github.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /css-components/_includes/icon-twitter.html: -------------------------------------------------------------------------------- 1 | {{ include.username }} 2 | -------------------------------------------------------------------------------- /css-components/_includes/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /css-components/_includes/menu-mobile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | 6 | 7 | 8 | 9 | 25 | 26 | 27 | {% include download.html %} 28 | 29 |
30 | 31 | {% highlight html %} 32 | 33 | 34 | 35 | 51 | {% endhighlight %} 52 | 53 | {% highlight css linenos%} 54 | //CSS 55 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 56 | body{ 57 | font-family: 'Roboto', sans-serif;; 58 | font-size: 100%; 59 | } 60 | .check-open{ 61 | display: none; 62 | } 63 | .menu-open{ 64 | width: 40px; 65 | height: 32px; 66 | display: flex; 67 | float: left; 68 | background: #000000; 69 | cursor: pointer; 70 | position: relative; 71 | transition: all .25s linear; 72 | } 73 | .menu-open:before{ 74 | content: ""; 75 | display: block; 76 | margin: 7px auto; 77 | width: 70%; 78 | height: 0.25em; 79 | background: #FFFFFF; 80 | box-shadow: 0 .45em 0 0 #FFF, 0 .9em 0 0 #FFF; 81 | } 82 | .menu-open:hover, .menu-open:focus{ 83 | background: #FA58F4; 84 | } 85 | .menu-box{ 86 | width: 300px; 87 | height: 100%; 88 | padding: 50px 10px; 89 | position: fixed; 90 | top: 0px; 91 | left: 0px; 92 | z-index: 1000; 93 | background: #333333; 94 | transform: translateX(-320px);; 95 | transition: all .25s linear;; 96 | } 97 | .menu-box .menu-fechar{ 98 | font-weight: 500; 99 | color: #FFFFFF; 100 | cursor: pointer; 101 | position: absolute; 102 | top: 10px; 103 | right: 20px; 104 | } 105 | .menu-box .menu-fechar:hover{ 106 | color: #CC0000; 107 | } 108 | .menu-box ul{ 109 | width: 100%; 110 | height: auto; 111 | float: left; 112 | margin: 0; 113 | padding: 0; 114 | list-style: none; 115 | } 116 | .menu-box li{ 117 | width: 100%; 118 | height: 40px; 119 | float: left; 120 | border-bottom: 2px solid #666666; 121 | } 122 | .menu-box a{ 123 | width: 98%; 124 | height: 40px; 125 | float: left; 126 | padding-left: 2%; 127 | text-decoration: none; 128 | line-height: 40px; 129 | font-weight: 500; 130 | font-size: 1em; 131 | color: #FFFFFF; 132 | } 133 | .menu-box a:hover{ 134 | background: #666666; 135 | } 136 | #menu:checked ~ .menu-box{ 137 | left: 0px; 138 | transform: translateX(0); 139 | transition: all .25s linear; 140 | } 141 | {% endhighlight %} 142 | 143 | {% highlight sass linenos%} 144 | //SASS 145 | .check-open{ 146 | display: none; 147 | } 148 | 149 | .menu-open{ 150 | width: 40px; 151 | height: 32px; 152 | display: flex; 153 | margin: 0 auto; 154 | background: #000; 155 | cursor: pointer; 156 | position: relative; 157 | transition: all .25s linear; 158 | 159 | 160 | &:before{ 161 | content: ""; 162 | display: block; 163 | margin: 7px auto; 164 | width: 70%; 165 | height: 0.25em; 166 | background: #FFF; 167 | box-shadow: 0 .45em 0 0 #FFF, 0 .9em 0 0 #FFF; 168 | } 169 | &:hover, 170 | &:focus{ 171 | background: #FA58F4; 172 | } 173 | } 174 | .menu-box{ 175 | width:300px; 176 | height: 100%; 177 | padding: 50px 10px; 178 | position: fixed; 179 | top:0px; 180 | left:0px; 181 | z-index: 1000; 182 | background: #333333; 183 | transform: translateX(-320px); 184 | transition: all .25s linear; 185 | 186 | .menu-fechar{ 187 | font-weight: 500; 188 | color: #FFF; 189 | cursor: pointer; 190 | position: absolute; 191 | top:10px; 192 | right:20px; 193 | 194 | &:hover{ 195 | color: #CC0000; 196 | } 197 | } 198 | ul{ 199 | width: 100%; 200 | height: auto; 201 | float: left; 202 | margin: 0; 203 | padding: 0; 204 | list-style: none; 205 | } 206 | li{ 207 | width: 100%; 208 | height: 40px; 209 | float: left; 210 | border-bottom:2px solid #666666; 211 | } 212 | a{ 213 | width: 98%; 214 | height: 40px; 215 | float: left; 216 | padding-left:2%; 217 | text-decoration:none; 218 | line-height: 40px; 219 | font-weight: 500; 220 | font-size: 1em; 221 | color: $branco; 222 | 223 | &:hover{ 224 | background: #666666; 225 | } 226 | } 227 | } 228 | #menu:checked ~ .menu-box{ 229 | left: 0px; 230 | transform: translateX(0); 231 | transition: all .25s linear; 232 | } 233 | 234 | {% endhighlight %} 235 |
236 | -------------------------------------------------------------------------------- /css-components/_includes/menu-vertical.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | 6 | 16 | 17 |
18 |
19 | 20 | {% include download.html %} 21 | 22 |
23 | 24 | {% highlight html %} 25 |
26 | 27 | 37 | 38 |
39 | {% endhighlight %} 40 | 41 | {% highlight css linenos%} 42 | //CSS 43 | @import url(http://weloveiconfonts.com/api/?family=entypo|typicons); 44 | /* typicons */ 45 | [class*="typicons-"]:before { 46 | font-family: 'Typicons', sans-serif; 47 | } 48 | 49 | .root-menu { 50 | width: 100%; 51 | height: 600px; 52 | float: left; 53 | background-color: deepPink; 54 | position: relative; 55 | } 56 | .root-menu nav { 57 | width: 80px; 58 | height: 100%; 59 | position: absolute; 60 | top: 0px; 61 | left: 0px; 62 | background-color: #0e0f12; 63 | } 64 | .root-menu nav li, .root-menu nav i { 65 | width: 80px; 66 | height: 50px; 67 | float: left; 68 | cursor: pointer; 69 | transition: all .10s ease; 70 | } 71 | .root-menu nav li { 72 | position: relative; 73 | margin-top: 30px; 74 | } 75 | .root-menu nav li:hover { 76 | background-color: #b40e68; 77 | } 78 | .root-menu nav li:hover i { 79 | color: #FFF; 80 | } 81 | .root-menu nav i { 82 | line-height: 60px; 83 | text-align: center; 84 | color: #878789; 85 | font-size: 50px; 86 | font-style: normal; 87 | } 88 | .root-menu nav .nav-texto { 89 | width: 100px; 90 | height: 50px; 91 | position: absolute; 92 | left: -190px; 93 | top: 0px; 94 | background-color: #b40e68; 95 | line-height: 50px; 96 | text-align: right; 97 | font-family: 'Roboto', sans-serif; 98 | color: #FFF; 99 | font-size: 1.5em; 100 | padding-right: 30px; 101 | transition: all .5s ease; 102 | } 103 | .root-menu nav li:hover .nav-texto { 104 | left: 80px; 105 | } 106 | {% endhighlight %} 107 | 108 | {% highlight sass linenos%} 109 | //SASS 110 | @import url(http://weloveiconfonts.com/api/?family=entypo|typicons); 111 | /* typicons */ 112 | [class*="typicons-"]:before { 113 | font-family: 'Typicons', sans-serif; 114 | } 115 | .root-menu{ 116 | width: 100%; 117 | height: 600px; 118 | float: left; 119 | background-color: deepPink; 120 | position: relative; 121 | 122 | nav{ 123 | width: 80px; 124 | height: 100%; 125 | position: absolute; 126 | top: 0px; 127 | left: 0px; 128 | background-color: #0e0f12; 129 | 130 | li, i{ 131 | width: 80px; 132 | height: 50px; 133 | float: left; 134 | cursor: pointer; 135 | transition: all .10s ease; 136 | } 137 | li{ 138 | position: relative; 139 | margin-top: 30px; 140 | } 141 | li:hover{ 142 | background-color: #b40e68; 143 | } 144 | li:hover i{ 145 | color: #FFF; 146 | } 147 | i{ 148 | line-height: 60px; 149 | text-align: center; 150 | color: #878789; 151 | font-size: 50px; 152 | font-style: normal; 153 | } 154 | .nav-texto{ 155 | width: 100px; 156 | height: 50px; 157 | position: absolute; 158 | left: -190px; 159 | top: 0px; 160 | background-color: #b40e68; 161 | line-height: 50px; 162 | text-align: right; 163 | font-family: 'Roboto', sans-serif; 164 | color: #FFF; 165 | font-size: 1.5em; 166 | padding-right: 30px; 167 | transition: all .5s ease; 168 | } 169 | li:hover .nav-texto{ 170 | left: 80px; 171 | } 172 | } 173 | } 174 | {% endhighlight %} 175 |
176 | -------------------------------------------------------------------------------- /css-components/_includes/menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |
6 | 7 | 8 | 9 | 25 | 26 |
27 | 28 | {% include download.html %} 29 | 30 | 31 | 32 | {% highlight html %} 33 | 34 | 35 | 36 | 52 | {% endhighlight %} 53 | 54 | {% highlight css linenos%} 55 | //CSS 56 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 57 | body{ 58 | font-family: 'Roboto', sans-serif;; 59 | font-size: 100%; 60 | } 61 | .check-open{ 62 | display: none; 63 | } 64 | .menu-open{ 65 | width: 40px; 66 | height: 32px; 67 | display: flex; 68 | float: left; 69 | background: #000000; 70 | cursor: pointer; 71 | position: relative; 72 | transition: all .25s linear; 73 | } 74 | .menu-open:before{ 75 | content: ""; 76 | display: block; 77 | margin: 7px auto; 78 | width: 70%; 79 | height: 0.25em; 80 | background: #FFFFFF; 81 | box-shadow: 0 .45em 0 0 #FFF, 0 .9em 0 0 #FFF; 82 | } 83 | .menu-open:hover, .menu-open:focus{ 84 | background: #FA58F4; 85 | } 86 | .menu-box{ 87 | width: 300px; 88 | height: 100%; 89 | padding: 50px 10px; 90 | position: fixed; 91 | top: 0px; 92 | left: 0px; 93 | z-index: 1000; 94 | background: #333333; 95 | transform: translateX(-320px);; 96 | transition: all .25s linear;; 97 | } 98 | .menu-box .menu-fechar{ 99 | font-weight: 500; 100 | color: #FFFFFF; 101 | cursor: pointer; 102 | position: absolute; 103 | top: 10px; 104 | right: 20px; 105 | } 106 | .menu-box .menu-fechar:hover{ 107 | color: #CC0000; 108 | } 109 | .menu-box ul{ 110 | width: 100%; 111 | height: auto; 112 | float: left; 113 | margin: 0; 114 | padding: 0; 115 | list-style: none; 116 | } 117 | .menu-box li{ 118 | width: 100%; 119 | height: 40px; 120 | float: left; 121 | border-bottom: 2px solid #666666; 122 | } 123 | .menu-box a{ 124 | width: 98%; 125 | height: 40px; 126 | float: left; 127 | padding-left: 2%; 128 | text-decoration: none; 129 | line-height: 40px; 130 | font-weight: 500; 131 | font-size: 1em; 132 | color: #FFFFFF; 133 | } 134 | .menu-box a:hover{ 135 | background: #666666; 136 | } 137 | #menu:checked ~ .menu-box{ 138 | left: 0px; 139 | transform: translateX(0); 140 | transition: all .25s linear; 141 | } 142 | {% endhighlight %} 143 | 144 | {% highlight css linenos%} 145 | //SASS 146 | .check-open{ 147 | display: none; 148 | } 149 | 150 | .menu-open{ 151 | width: 40px; 152 | height: 32px; 153 | display: flex; 154 | margin: 0 auto; 155 | background: #000; 156 | cursor: pointer; 157 | position: relative; 158 | transition: all .25s linear; 159 | 160 | 161 | &:before{ 162 | content: ""; 163 | display: block; 164 | margin: 7px auto; 165 | width: 70%; 166 | height: 0.25em; 167 | background: #FFF; 168 | box-shadow: 0 .45em 0 0 #FFF, 0 .9em 0 0 #FFF; 169 | } 170 | &:hover, 171 | &:focus{ 172 | background: #FA58F4; 173 | } 174 | } 175 | .menu-box{ 176 | width:300px; 177 | height: 100%; 178 | padding: 50px 10px; 179 | position: fixed; 180 | top:0px; 181 | left:0px; 182 | z-index: 1000; 183 | background: #333333; 184 | transform: translateX(-320px); 185 | transition: all .25s linear; 186 | 187 | .menu-fechar{ 188 | font-weight: 500; 189 | color: #FFF; 190 | cursor: pointer; 191 | position: absolute; 192 | top:10px; 193 | right:20px; 194 | 195 | &:hover{ 196 | color: #CC0000; 197 | } 198 | } 199 | ul{ 200 | width: 100%; 201 | height: auto; 202 | float: left; 203 | margin: 0; 204 | padding: 0; 205 | list-style: none; 206 | } 207 | li{ 208 | width: 100%; 209 | height: 40px; 210 | float: left; 211 | border-bottom:2px solid #666666; 212 | } 213 | a{ 214 | width: 98%; 215 | height: 40px; 216 | float: left; 217 | padding-left:2%; 218 | text-decoration:none; 219 | line-height: 40px; 220 | font-weight: 500; 221 | font-size: 1em; 222 | color: $branco; 223 | 224 | &:hover{ 225 | background: #666666; 226 | } 227 | } 228 | } 229 | #menu:checked ~ .menu-box{ 230 | left: 0px; 231 | transform: translateX(0); 232 | transition: all .25s linear; 233 | } 234 | 235 | 236 | 237 | {% endhighlight %} 238 | 239 |
-------------------------------------------------------------------------------- /css-components/_includes/modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |
6 |
7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | 17 |

Titulo modal

18 | 19 |

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!

20 | 21 |
22 | 23 |
24 | 25 | 26 |
27 | 28 | {% include download.html %} 29 | 30 |
31 | 32 | {% highlight html %} 33 |
34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 | 42 | 43 | 44 |

Titulo modal

45 | 46 |

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

49 | 50 |
51 | 52 |
53 | 54 | 55 |
56 | {% endhighlight %} 57 | 58 | {% highlight css linenos%} 59 | //CSS 60 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 61 | body{ 62 | font-family: 'Roboto', sans-serif;; 63 | font-size: 100%; 64 | } 65 | @-webkit-keyframes alpha { 66 | 0%{ 67 | opacity: 0; 68 | } 69 | 100%{ 70 | opacity: 1px; 71 | } 72 | } 73 | .box-modal{ 74 | width: 100%; 75 | } 76 | .box-modal input[type="checkbox"]{ 77 | display: none; 78 | } 79 | .box-modal .btn{ 80 | width: 100%; 81 | height: 40px; 82 | display: inline-block; 83 | background: #73b1d4; 84 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 85 | line-height: 40px; 86 | text-align: center; 87 | font-weight: 500; 88 | font-size: 1.2em; 89 | color: #FFFFFF; 90 | cursor: pointer; 91 | } 92 | .box-modal .btn:hover{ 93 | background: #679ebe; 94 | } 95 | .box-modal .modal-content{ 96 | width: 100%; 97 | height: 100%; 98 | position: fixed; 99 | z-index: 1000; 100 | background: rgba(0, 0, 0, 0.6);; 101 | top: 0; 102 | left: 0; 103 | display: none; 104 | } 105 | .modal-in{ 106 | widht: 500px; 107 | height: 300px; 108 | background: #FFFFFF; 109 | border: 1px solid #999; 110 | position: absolute; 111 | z-index: 1000; 112 | top: 50%; 113 | left: 50%; 114 | margin: -150px 0 0 -250px; 115 | padding: 20px; 116 | } 117 | .modal-in .modal-fechar{ 118 | position: absolute; 119 | z-index: 1002; 120 | top: -11px; 121 | right: -13px; 122 | padding: 5px 10px; 123 | cursor: pointer; 124 | background: red; 125 | border-radius: 50%; 126 | font-weight: 500; 127 | font-size: .8em; 128 | color: #FFFFFF; 129 | } 130 | #modal:checked ~ .modal-content{ 131 | display: block; 132 | -webkit-animation: alpha 1s ease-in; 133 | } 134 | 135 | 136 | {% endhighlight %} 137 | 138 | {% highlight css linenos%} 139 | //SASS 140 | .box-modal{ 141 | width: 100%; 142 | 143 | input[type="checkbox"]{ 144 | display: none; 145 | } 146 | .btn{ 147 | width: 100%; 148 | height: 40px; 149 | display: inline-block; 150 | background: #73b1d4; 151 | box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 152 | line-height: 40px; 153 | text-align: center; 154 | font-weight: 500; 155 | font-size: 1.2em; 156 | color: $branco; 157 | cursor: pointer; 158 | 159 | &:hover{ 160 | background: #679ebe; 161 | } 162 | } 163 | 164 | .modal-content{ 165 | width:100%; 166 | height:100%; 167 | z-index:1000; 168 | background: rgba(0,0,0,0.6); 169 | position: fixed; 170 | top: 0; 171 | left: 0; 172 | display: none; 173 | } 174 | 175 | } 176 | .modal-in{ 177 | width: 500px; 178 | height: 300px; 179 | background: #FFF; 180 | border: 1px solid #999; 181 | position: absolute; 182 | z-index: 1001; 183 | top:50%; 184 | left:50%; 185 | margin: -150px 0 0 -250px; 186 | padding:20px; 187 | 188 | .modal-fechar{ 189 | position: absolute; 190 | z-index: 1002; 191 | top: -11px; 192 | right: -13px; 193 | padding: 5px 10px; 194 | cursor: pointer; 195 | background: red; 196 | border-radius: 50%; 197 | font-weight: 500; 198 | font-size: .8em; 199 | color: $branco; 200 | } 201 | } 202 | #modal:checked ~ .modal-content{ 203 | display:block; 204 | -webkit-animation: alpha 1s ease-in; 205 | } 206 | 207 | 208 | {% endhighlight %} 209 | 210 |
-------------------------------------------------------------------------------- /css-components/_includes/tab 2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | 6 |
7 | 8 |
9 | 10 | 11 | 12 | 13 |
14 | 15 |

PAINEL 1

16 | 17 |

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.

18 | 19 |
20 |
21 | 22 |
23 | 24 | 25 | 26 | 27 |
28 | 29 |

PAINEL 2

30 | 31 |

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.

32 | 33 |
34 |
35 | 36 |
37 | 38 | 39 | 40 |
41 | 42 |

PAINEL 3

43 | 44 |

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.

45 | 46 |
47 |
48 | 49 |
50 | 51 | 52 | {% include download.html %} 53 |
54 | 55 | {% highlight html %} 56 |
57 | 58 |
59 | 60 | 61 | 62 | 63 |
64 | 65 |

PAINEL 1

66 | 67 |

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

71 | 72 |
73 |
74 | 75 |
76 | 77 | 78 | 79 | 80 |
81 | 82 |

PAINEL 2

83 | 84 |

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

88 | 89 |
90 |
91 | 92 |
93 | 94 | 95 | 96 |
97 | 98 |

PAINEL 3

99 | 100 |

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

104 | 105 |
106 |
107 | 108 |
109 | {% endhighlight %} 110 | 111 | {% highlight css linenos%} 112 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 113 | body{ 114 | font-family: 'Roboto', sans-serif;; 115 | font-size: 100%; 116 | } 117 | @-webkit-keyframes alpha { 118 | 0%{ 119 | opacity: 0; 120 | } 121 | 100%{ 122 | opacity: 1px; 123 | } 124 | } 125 | .tab-box{ 126 | width: 100%; 127 | } 128 | .tab-box .tab-open{ 129 | display: none; 130 | } 131 | .tab-box .tab-painel{ 132 | min-width: 100px; 133 | display: inline-block; 134 | } 135 | .tab-box .tab-painel .tab-nav{ 136 | width: 100%; 137 | display: inline-block; 138 | cursor: pointer; 139 | border: 1px solid #666; 140 | line-height: 30px; 141 | text-align: center; 142 | font-weight: 500; 143 | font-size: .9em; 144 | color: #2E2929; 145 | } 146 | .tab-box .tab-painel .tab-nav:hover{ 147 | background-color: #F2F2F2; 148 | } 149 | .tab-box .tab-inner{ 150 | width: 98%; 151 | height: auto; 152 | padding: 1%; 153 | margin-top: 5px; 154 | display: inline-block; 155 | background-color: #F2F2F2; 156 | position: absolute; 157 | left: 0; 158 | opacity: 0; 159 | visibility: hidden; 160 | } 161 | .tab-box .tab-open:checked ~ .tab-inner{ 162 | opacity: 1; 163 | visibility: visible; 164 | -webkit-animation: alpha 2s ease; 165 | } 166 | .tab-box .tab-open:checked ~ label{ 167 | background-color: #F2F2F2; 168 | } 169 | 170 | {% endhighlight %} 171 | 172 | {% highlight css linenos%} 173 | //SASS 174 | .tab-box{ 175 | width: 100%; 176 | margin-bottom: 50px; 177 | 178 | .tab-open{ 179 | display: none; 180 | } 181 | .tab-painel{ 182 | min-width: 100px; 183 | display: inline-block; 184 | 185 | .tab-nav{ 186 | width: 100%; 187 | display: inline-block; 188 | cursor: pointer; 189 | border: 1px solid #666; 190 | line-height: 30px; 191 | text-align: center; 192 | font-weight: 500; 193 | font-size: .9em; 194 | color: $preto; 195 | 196 | &:hover{ 197 | background-color:#F2F2F2; 198 | } 199 | 200 | 201 | } 202 | } 203 | .tab-inner{ 204 | width: 98%; 205 | height: auto; 206 | padding: 1%; 207 | margin-top: 5px; 208 | display: inline-block; 209 | background-color: #F2F2F2; 210 | position: absolute; 211 | left: 0; 212 | opacity: 0; 213 | visibility: hidden; 214 | } 215 | 216 | .tab-open:checked ~ .tab-inner{ 217 | opacity: 1; 218 | visibility: visible; 219 | -webkit-animation: alpha 2s ease-in; 220 | } 221 | .tab-open:checked ~ label{ 222 | background-color:#F2F2F2; 223 | } 224 | 225 | 226 | } 227 | 228 | 229 | {% endhighlight %} 230 | 231 |
-------------------------------------------------------------------------------- /css-components/_includes/text-filter-background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | 6 |
7 | STAR WARS CELEBRATION 8 |
9 | 10 | 11 | {% include download.html %} 12 | 13 |
14 | 15 | {% highlight html %} 16 |
17 | STAR WARS CELEBRATION 18 |
19 | {% endhighlight %} 20 | 21 | {% highlight css linenos%} 22 | //CSS 23 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 24 | body{ 25 | font-family: 'Roboto', sans-serif;; 26 | font-size: 100%; 27 | } 28 | .texto-filtro{ 29 | widht: 100%; 30 | height: auto; 31 | float: left; 32 | text-align: center; 33 | font-size: 9em; 34 | font-weight: 900; 35 | background: url('http://wallpapercave.com/wp/4W0KpiW.jpg'); 36 | background-size: cover; 37 | -webkit-background-clip: text; 38 | -webkit-text-fill-color: transparent; 39 | } 40 | 41 | {% endhighlight %} 42 | 43 | {% highlight sass linenos%} 44 | //SASS 45 | .texto-filtro{ 46 | width: 100%; 47 | height: auto; 48 | float: left; 49 | text-align: center; 50 | font-size: 9em; 51 | font-weight: 900; 52 | background: url('http://hjdesigner.github.io/css-components/images/star-wars.jpg'); 53 | background-size: cover; 54 | -webkit-background-clip: text; 55 | -webkit-text-fill-color: transparent; 56 | } 57 | {% endhighlight %} 58 |
59 | -------------------------------------------------------------------------------- /css-components/_includes/tooltips.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | 6 |
7 | Passe o mouse e veja a magica. 8 |
9 | 10 | 11 | {% include download.html %} 12 | 13 |
14 | 15 | {% highlight html %} 16 |
17 | Passe o mouse e veja a magica. 18 |
19 | {% endhighlight %} 20 | 21 | {% highlight css linenos%} 22 | //CSS 23 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 24 | body{ 25 | font-family: 'Roboto', sans-serif;; 26 | font-size: 100%; 27 | } 28 | @-webkit-keyframes alpha { 29 | 0%{ 30 | opacity: 0; 31 | } 32 | 100%{ 33 | opacity: 1; 34 | } 35 | } 36 | .box-tooltips{ 37 | width: 350px; 38 | height: 50px; 39 | float: left; 40 | margin: 50px 0; 41 | position: relative; 42 | background-color: #2E2929; 43 | text-align: center; 44 | line-height: 50px; 45 | color: #FFFFFF; 46 | font-weight: 300; 47 | font-size: 1.2em; 48 | } 49 | .box-tooltips:after{ 50 | display: none; 51 | } 52 | .box-tooltips:hover:after{ 53 | display: block; 54 | content: attr(data-title); 55 | position: absolute; 56 | top: 60px; 57 | left: 72px; 58 | font-weight: 300; 59 | color: #2E2929; 60 | font-size: 1.2em; 61 | -webkit-animation: alpha 2s ease-out; 62 | } 63 | 64 | {% endhighlight %} 65 | 66 | {% highlight sass linenos%} 67 | //SASS 68 | .box-tooltips{ 69 | width: 350px; 70 | height: 50px; 71 | margin: 50px auto; 72 | position: relative; 73 | background-color: $preto; 74 | text-align: center; 75 | line-height: 50px; 76 | font-weight: 300; 77 | color: $branco; 78 | font-size: 1.2em; 79 | &:after{ 80 | display: none; 81 | } 82 | &:hover{ 83 | &:after{ 84 | display: block; 85 | -webkit-animation: alpha 2s ease-out; 86 | content: attr(data-title); 87 | position: absolute; 88 | top: 60px; 89 | left: 72px; 90 | font-weight: 300; 91 | color: $preto; 92 | font-size: 1.2em; 93 | } 94 | } 95 | } 96 | {% endhighlight %} 97 |
98 | -------------------------------------------------------------------------------- /css-components/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 8 | {% include header.html %} 9 | 10 | 11 | {{ content }} 12 | 13 | {% include footer.html %} 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /css-components/_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 | 6 |
7 |

{{ page.title }}

8 |
9 | 10 |
11 | {{ content }} 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /css-components/_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 | 6 |
7 |

{{ page.title }}

8 |

{% if page.author %} • {% endif %}

9 |
10 | 11 |
12 | {{ content }} 13 |
14 | 15 |
16 | -------------------------------------------------------------------------------- /css-components/_posts/2016-10-13-carousel.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Componente Carousel" 4 | date: 2016-10-13 19:51:16 -0300 5 | categories: jekyll update 6 | --- 7 | You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. 8 | 9 | To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. 10 | 11 | Jekyll also offers powerful support for code snippets: 12 | 13 | {% highlight ruby %} 14 | def print_hi(name) 15 | puts "Hi, #{name}" 16 | end 17 | print_hi('Tom') 18 | #=> prints 'Hi, Tom' to STDOUT. 19 | {% endhighlight %} 20 | 21 | Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk]. 22 | 23 | [jekyll-docs]: http://jekyllrb.com/docs/home 24 | [jekyll-gh]: https://github.com/jekyll/jekyll 25 | [jekyll-talk]: https://talk.jekyllrb.com/ 26 | -------------------------------------------------------------------------------- /css-components/_posts/2016-10-13-welcome-to-jekyll.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Welcome to Jekyll!" 4 | date: 2016-10-13 19:51:16 -0300 5 | categories: jekyll update 6 | --- 7 | You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. 8 | 9 | To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. 10 | 11 | Jekyll also offers powerful support for code snippets: 12 | 13 | {% highlight ruby %} 14 | def print_hi(name) 15 | puts "Hi, #{name}" 16 | end 17 | print_hi('Tom') 18 | #=> prints 'Hi, Tom' to STDOUT. 19 | {% endhighlight %} 20 | 21 | Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk]. 22 | 23 | [jekyll-docs]: http://jekyllrb.com/docs/home 24 | [jekyll-gh]: https://github.com/jekyll/jekyll 25 | [jekyll-talk]: https://talk.jekyllrb.com/ 26 | -------------------------------------------------------------------------------- /css-components/_sass/_avaliacao.scss: -------------------------------------------------------------------------------- 1 | .input-estrela{ 2 | display: none; 3 | } 4 | .box-estrela{ 5 | width: 76px; 6 | height: 111px; 7 | float: left; 8 | margin-right: 10px; 9 | position: relative; 10 | cursor: pointer; 11 | } 12 | .estrela-diagrama, 13 | .estrela-diagrama:before, 14 | .estrela-diagrama:after{ 15 | width: 0px; 16 | height: 0px; 17 | position: absolute; 18 | border-right: 38px solid transparent; 19 | border-left: 38px solid transparent; 20 | border-bottom: 22px solid $cinza; 21 | } 22 | .estrela-diagrama{ 23 | z-index: 5; 24 | transform: rotate(-180deg); 25 | left: 0px; 26 | top: 47px; 27 | &:before { 28 | content: ""; 29 | z-index: 6; 30 | transform: rotate(-72deg); 31 | left: -36px; 32 | top: 1px; 33 | } 34 | &:after { 35 | content: ""; 36 | z-index: 6; 37 | transform: rotate(71deg); 38 | left: -40px; 39 | top: 1px; 40 | } 41 | } 42 | #estrela-1:checked ~ label[for="estrela-1"]{ 43 | .estrela-diagrama, 44 | .estrela-diagrama:before, 45 | .estrela-diagrama:after{ 46 | -webkit-animation: alpha .2s ease; 47 | -moz-animation: alpha .2s ease; 48 | -o-animation: alpha .2s ease; 49 | -ms-animation: alpha .2s ease; 50 | animation: alpha .2s ease; 51 | width: 0px; 52 | height: 0px; 53 | position: absolute; 54 | border-right: 38px solid transparent; 55 | border-left: 38px solid transparent; 56 | border-bottom: 22px solid $gold; 57 | } 58 | } 59 | #estrela-2:checked ~ label[for="estrela-1"], 60 | #estrela-2:checked ~ label[for="estrela-2"]{ 61 | .estrela-diagrama, 62 | .estrela-diagrama:before, 63 | .estrela-diagrama:after{ 64 | -webkit-animation: alpha .2s ease; 65 | -moz-animation: alpha .2s ease; 66 | -ms-animation: alpha .2s ease; 67 | -o-animation: alpha .2s ease; 68 | animation: alpha .2s ease; 69 | width: 0px; 70 | height: 0px; 71 | position: absolute; 72 | border-right: 38px solid transparent; 73 | border-left: 38px solid transparent; 74 | border-bottom: 22px solid $gold; 75 | } 76 | } 77 | #estrela-3:checked ~ label[for="estrela-1"], 78 | #estrela-3:checked ~ label[for="estrela-2"], 79 | #estrela-3:checked ~ label[for="estrela-3"]{ 80 | .estrela-diagrama, 81 | .estrela-diagrama:before, 82 | .estrela-diagrama:after{ 83 | -webkit-animation: alpha .2s ease; 84 | -moz-animation: alpha .2s ease; 85 | -o-animation: alpha .2s ease; 86 | -ms-animation: alpha .2s ease; 87 | animation: alpha .2s ease; 88 | width: 0px; 89 | height: 0px; 90 | position: absolute; 91 | border-right: 38px solid transparent; 92 | border-left: 38px solid transparent; 93 | border-bottom: 22px solid $gold; 94 | } 95 | } 96 | #estrela-4:checked ~ label[for="estrela-1"], 97 | #estrela-4:checked ~ label[for="estrela-2"], 98 | #estrela-4:checked ~ label[for="estrela-3"], 99 | #estrela-4:checked ~ label[for="estrela-4"]{ 100 | .estrela-diagrama, 101 | .estrela-diagrama:before, 102 | .estrela-diagrama:after{ 103 | -webkit-animation: alpha .2s ease; 104 | -moz-animation: alpha .2s ease; 105 | -ms-animation: alpha .2s ease; 106 | -o-animation: alpha .2s ease; 107 | animation: alpha .2s ease; 108 | width: 0px; 109 | height: 0px; 110 | position: absolute; 111 | border-right: 38px solid transparent; 112 | border-left: 38px solid transparent; 113 | border-bottom: 22px solid $gold; 114 | } 115 | } 116 | #estrela-5:checked ~ label[for="estrela-1"], 117 | #estrela-5:checked ~ label[for="estrela-2"], 118 | #estrela-5:checked ~ label[for="estrela-3"], 119 | #estrela-5:checked ~ label[for="estrela-4"], 120 | #estrela-5:checked ~ label[for="estrela-5"]{ 121 | .estrela-diagrama, 122 | .estrela-diagrama:before, 123 | .estrela-diagrama:after{ 124 | -webkit-animation: alpha .2s ease; 125 | -moz-animation: alpha .2s ease; 126 | -ms-animation: alpha .2s ease; 127 | -o-animation: alpha .2s ease; 128 | animation: alpha .2s ease; 129 | width: 0px; 130 | height: 0px; 131 | position: absolute; 132 | border-right: 38px solid transparent; 133 | border-left: 38px solid transparent; 134 | border-bottom: 22px solid $gold; 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /css-components/_sass/_base.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Reset some basic elements 3 | */ 4 | *{ 5 | padding: 0; 6 | margin: 0; 7 | } 8 | html, body{ height: 100%;} 9 | html{ overflow-y: scroll;} 10 | body{ 11 | font-family: $font-padrao; 12 | font-size: 100%; 13 | } 14 | ul{ 15 | padding:0px; 16 | margin:0px; 17 | list-style: none; 18 | text-decoration:none; 19 | } 20 | a{ 21 | text-decoration: none; 22 | } 23 | 24 | 25 | /** 26 | * Code formatting 27 | */ 28 | pre, 29 | code { 30 | } 31 | 32 | code { 33 | padding: 1px 5px; 34 | } 35 | 36 | pre { 37 | padding: 8px 12px; 38 | overflow-x: auto; 39 | 40 | > code { 41 | border: 0; 42 | padding-right: 0; 43 | padding-left: 0; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /css-components/_sass/_card.scss: -------------------------------------------------------------------------------- 1 | .card-box{ 2 | width: 390px; 3 | height: 280px; 4 | margin: 0 auto; 5 | box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 6 | position: relative; 7 | 8 | input[type="checkbox"]{ 9 | display: none; 10 | } 11 | .card-img{ 12 | width: 100%; 13 | height: auto; 14 | float: left; 15 | margin: 0px; 16 | } 17 | 18 | .card-titulo{ 19 | width: 350px; 20 | height: 240px; 21 | padding: 10px 20px 0; 22 | font-weight: 300; 23 | color: $rosa; 24 | font-size: 1.4em; 25 | } 26 | .click-card{ 27 | width: 26px; 28 | height: 14px; 29 | position: absolute; 30 | right: 10px; 31 | bottom: 10px; 32 | z-index: 1; 33 | label{ 34 | width: 26px; 35 | height: 14px; 36 | float: left; 37 | cursor: pointer; 38 | &:before{ 39 | content: ""; 40 | width: 15px; 41 | height: 2px; 42 | position: absolute; 43 | left: 0px; 44 | top: 6px; 45 | background-color: #2E2929; 46 | transform: rotate(-50deg); 47 | } 48 | &:after{ 49 | content: ""; 50 | width: 15px; 51 | height: 2px; 52 | left: 10px; 53 | top: 6px; 54 | position: absolute; 55 | background-color: #2E2929; 56 | transform: rotate(50deg); 57 | } 58 | } 59 | } 60 | .card-texto{ 61 | display: none; 62 | width: 350px; 63 | height: 240px; 64 | position: absolute; 65 | top: 0; 66 | left: 0; 67 | z-index: 0; 68 | padding: 20px; 69 | line-height: 30px; 70 | font-family: $font-padrao; 71 | font-weight: 500; 72 | color: $preto; 73 | background-color: $branco; 74 | } 75 | #click-card:checked ~ .card-texto{ 76 | display: block; 77 | -webkit-animation: alpha .3s linear; 78 | -moz-animation: alpha .3s linear; 79 | -ms-animation: alpha .3s linear; 80 | -o-animation: alpha .3s linear; 81 | animation: alpha .3s linear; 82 | } 83 | #click-card:checked ~ .click-card{ 84 | label{ 85 | &:after{ 86 | content: ""; 87 | width: 15px; 88 | height: 2px; 89 | left: 0px; 90 | top: 6px; 91 | position: absolute; 92 | background-color: #2E2929; 93 | transform: rotate(50deg); 94 | } 95 | } 96 | 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /css-components/_sass/_carousel.scss: -------------------------------------------------------------------------------- 1 | .carousel-box{ 2 | width: 100%; 3 | height: 440px; 4 | display: inline-block; 5 | position: relative; 6 | .carousel-open{ 7 | display:none; 8 | } 9 | .carousel-item{ 10 | display:none; 11 | width: 100%; 12 | height: 440px; 13 | position: absolute; 14 | z-index: 100; 15 | 16 | img{ 17 | width: 100%; 18 | } 19 | } 20 | .carousel-control{ 21 | display:none; 22 | width: 50px; 23 | height: 83px; 24 | position: absolute; 25 | z-index: 1001; 26 | top: 179px; 27 | padding: 3px 15px; 28 | cursor: pointer; 29 | font-size: 0px; 30 | } 31 | .prev{ 32 | left: 10px; 33 | &:hover{ 34 | &:before, 35 | &:after{ 36 | background-color: $vermelho; 37 | } 38 | } 39 | &:before, 40 | &:after{ 41 | content: ""; 42 | width: 50px; 43 | height: 5px; 44 | position: absolute; 45 | background-color: $branco; 46 | transition: all .3s ease; 47 | } 48 | &:before{ 49 | transform: rotate(-55deg); 50 | top: 21px; 51 | } 52 | &:after{ 53 | transform: rotate(55deg); 54 | left: 14px; 55 | top: 60px; 56 | } 57 | } 58 | .next{ 59 | right: 10px; 60 | &:hover{ 61 | &:before, 62 | &:after{ 63 | background-color: $vermelho; 64 | } 65 | } 66 | &:before, 67 | &:after{ 68 | content: ""; 69 | width: 50px; 70 | height: 5px; 71 | position: absolute; 72 | background-color: $branco; 73 | } 74 | &:before{ 75 | transform: rotate(-125deg); 76 | top: 21px; 77 | } 78 | &:after{ 79 | transform: rotate(125deg); 80 | left: 14px; 81 | top: 60px; 82 | } 83 | } 84 | .carousel-indicators{ 85 | list-style: none; 86 | width: 100%; 87 | position: absolute; 88 | z-index: 1002; 89 | bottom:0px; 90 | margin:0; 91 | padding:0; 92 | text-align: center; 93 | 94 | li { 95 | display: inline-block; 96 | margin: 0 5px; 97 | 98 | .carousel-bullet { 99 | color: #fff; 100 | cursor: pointer; 101 | display: block; 102 | font-size: 35px; 103 | } 104 | } 105 | 106 | } 107 | } 108 | .carousel-open:checked + .carousel-item{ 109 | display:block; 110 | -webkit-animation: alpha 4s ease-out; 111 | -moz-animation: alpha 4s ease-out; 112 | -ms-animation: alpha 4s ease-out; 113 | -o-animation: alpha 4s ease-out; 114 | animation: alpha 4s ease-out; 115 | } 116 | #carousel-1:checked ~ .control-1, 117 | #carousel-2:checked ~ .control-2, 118 | #carousel-3:checked ~ .control-3{ 119 | display: block; 120 | } 121 | #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet, 122 | #carousel-2:checked ~ .control-1 ~ .carousel-indicators li:nth-child(2) .carousel-bullet, 123 | #carousel-3:checked ~ .control-1 ~ .carousel-indicators li:nth-child(3) .carousel-bullet { 124 | color: $vermelho; 125 | } 126 | -------------------------------------------------------------------------------- /css-components/_sass/_checkbox.scss: -------------------------------------------------------------------------------- 1 | .input-checkbox{ 2 | display: none; 3 | } 4 | .row-checkbox{ 5 | width: auto; 6 | height: 50px; 7 | float: left; 8 | margin: 50px 50px 0 0; 9 | } 10 | .checkbox-1{ 11 | width: 30px; 12 | height: 30px; 13 | float: left; 14 | position: relative; 15 | border-radius: 50%; 16 | background-color: $preto; 17 | cursor: pointer; 18 | &:before{ 19 | display: none; 20 | content: ""; 21 | position: absolute; 22 | width: 20px; 23 | height: 20px; 24 | background-color: $azul; 25 | border-radius: 50%; 26 | top: 5px; 27 | left: 5px; 28 | } 29 | } 30 | #checkbox-1:checked ~ .checkbox-1{ 31 | &:before{ 32 | display: block; 33 | } 34 | } 35 | 36 | .checkbox-2{ 37 | width: 30px; 38 | height: 30px; 39 | float: left; 40 | position: relative; 41 | background-color: $preto; 42 | cursor: pointer; 43 | &:before{ 44 | display: none; 45 | content: ""; 46 | position: absolute; 47 | width: 20px; 48 | height: 20px; 49 | background-color: $azul; 50 | top: 5px; 51 | left: 5px; 52 | } 53 | } 54 | #checkbox-2:checked ~ .checkbox-2{ 55 | &:before{ 56 | display: block; 57 | } 58 | } 59 | .checkbox-3{ 60 | width: 30px; 61 | height: 30px; 62 | float: left; 63 | position: relative; 64 | background-color: $preto; 65 | cursor: pointer; 66 | &:before{ 67 | display: none; 68 | content: ""; 69 | position: absolute; 70 | width: 20px; 71 | height: 2px; 72 | background-color: $azul; 73 | top: 14px; 74 | left: 5px; 75 | transform: rotate(-42deg); 76 | } 77 | &:after{ 78 | display: none; 79 | content: ""; 80 | position: absolute; 81 | width: 20px; 82 | height: 2px; 83 | background-color: $azul; 84 | top: 14px; 85 | left: 5px; 86 | transform: rotate(42deg); 87 | } 88 | } 89 | #checkbox-3:checked ~ .checkbox-3{ 90 | &:before, 91 | &:after{ 92 | display: block; 93 | } 94 | } 95 | .checkbox-4{ 96 | width: 30px; 97 | height: 30px; 98 | float: left; 99 | position: relative; 100 | background-color: $preto; 101 | cursor: pointer; 102 | &:before{ 103 | display: none; 104 | content: ""; 105 | position: absolute; 106 | width: 15px; 107 | height: 2px; 108 | background-color: $azul; 109 | top: 13px; 110 | left: 12px; 111 | transform: rotate(-59deg); 112 | } 113 | &:after{ 114 | display: none; 115 | content: ""; 116 | position: absolute; 117 | width: 9px; 118 | height: 2px; 119 | background-color: $azul; 120 | top: 16px; 121 | left: 8px; 122 | transform: rotate(42deg); 123 | } 124 | } 125 | #checkbox-4:checked ~ .checkbox-4{ 126 | &:before, 127 | &:after{ 128 | display: block; 129 | } 130 | } 131 | .checkbox-5{ 132 | width: 70px; 133 | height: 30px; 134 | float: left; 135 | position: relative; 136 | border-radius: 44px; 137 | background-color: $cinza; 138 | cursor: pointer; 139 | &:before{ 140 | content: ""; 141 | width: 24px; 142 | height: 24px; 143 | position: absolute; 144 | left: 4px; 145 | top: 3px; 146 | background-color: $branco; 147 | border-radius: 50%; 148 | transition: .25s; 149 | } 150 | } 151 | #checkbox-5:checked ~ .checkbox-5{ 152 | background-color: $verde; 153 | &:before{ 154 | transform: translateX(38px); 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /css-components/_sass/_collapse.scss: -------------------------------------------------------------------------------- 1 | .collapse-box{ 2 | width: 100%; 3 | 4 | .check-open{ 5 | display:none; 6 | } 7 | 8 | .collapse-painel{ 9 | width: 100%; 10 | display: inline-block; 11 | 12 | .collapse-nav{ 13 | width: 98%; 14 | display: inline-block; 15 | cursor: pointer; 16 | background-color:#F2F2F2; 17 | padding: 1%; 18 | margin-bottom: 5px; 19 | font-size: .9em; 20 | color: #000; 21 | font-weight: 600; 22 | transition: all .25s linear; 23 | 24 | &:hover{ 25 | background-color:#E6E6E6; 26 | } 27 | 28 | .icon{ 29 | width: 12px; 30 | height: 10px; 31 | float: right; 32 | margin: 5px 6px; 33 | 34 | &:after{ 35 | content: ""; 36 | width: 0; 37 | height: 0; 38 | border-top: 10px solid #000; 39 | border-left: 5px solid transparent; 40 | position: absolute; 41 | border-right: 5px solid transparent; 42 | } 43 | &:before{ 44 | content: ""; 45 | width: 0; 46 | height: 0; 47 | border-bottom: 10px solid #000; 48 | border-left: 5px solid transparent; 49 | position: absolute; 50 | border-right: 5px solid transparent; 51 | opacity: 0; 52 | } 53 | } 54 | } 55 | 56 | .collapse-container{ 57 | width: 100%; 58 | height: auto; 59 | display: none; 60 | } 61 | .check-open:checked ~ .collapse-container{ 62 | display: block; 63 | -webkit-animation: alpha 2s ease-out; 64 | -moz-animation: alpha 2s ease-out; 65 | -ms-animation: alpha 2s ease-out; 66 | -o-animation: alpha 2s ease-out; 67 | animation: alpha 2s ease-out; 68 | 69 | } 70 | .check-open:checked ~ .collapse-nav .icon:after{ 71 | opacity: 0; 72 | } 73 | .check-open:checked ~ .collapse-nav .icon:before{ 74 | opacity: 1; 75 | } 76 | 77 | 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /css-components/_sass/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .drop-box{ 2 | width: 350px; 3 | height: auto; 4 | margin: 0 auto; 5 | position: relative; 6 | input[type="checkbox"]{ 7 | display: none; 8 | } 9 | .title{ 10 | width: 340px; 11 | height: 50px; 12 | float: left; 13 | padding-left: 10px; 14 | background-color: $preto; 15 | line-height: 50px; 16 | font-weight: 500; 17 | color: $branco; 18 | cursor: pointer; 19 | transition: all .3s ease; 20 | &:after{ 21 | content: "\25BC"; 22 | width: 50px; 23 | height: 50px; 24 | position: absolute; 25 | top: 0; 26 | right: 0; 27 | background-color: $rosa2; 28 | text-align: center; 29 | line-height: 55px; 30 | font-size: 1.2em; 31 | } 32 | &:hover{ 33 | &:after{ 34 | content: "\25BC"; 35 | width: 50px; 36 | height: 50px; 37 | position: absolute; 38 | top: 0; 39 | right: 0; 40 | background-color: $rosa; 41 | text-align: center; 42 | line-height: 55px; 43 | font-size: 1.2em; 44 | } 45 | } 46 | } 47 | ul{ 48 | display: none; 49 | width: 100%; 50 | height: auto; 51 | float: left; 52 | position: absolute; 53 | top: 57px; 54 | background-color: $preto; 55 | -webkit-animation: animationDropdown .3s ease; 56 | -moz-animation: animationDropdown .3s ease; 57 | -o-animation: animationDropdown .3s ease; 58 | -ms-animation: animationDropdown .3s ease; 59 | animation: animationDropdown .3s ease; 60 | li{ 61 | width: 330px; 62 | height: 40px; 63 | float: left; 64 | padding: 10px; 65 | line-height: 50px; 66 | font-weight: 300; 67 | font-size: 1em; 68 | color: $branco; 69 | -webkit-animation: alpha .5s ease; 70 | -moz-animation: alpha .5s ease; 71 | -o-animation: alpha .5s ease; 72 | -ms-animation: alpha .5s ease; 73 | animation: alpha .5s ease; 74 | &:hover{ 75 | background-color: $rosa; 76 | } 77 | } 78 | } 79 | #open-drop:checked ~ ul{ 80 | display: block; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /css-components/_sass/_footer.scss: -------------------------------------------------------------------------------- 1 | footer{ 2 | width: 100%; 3 | height: 60px; 4 | float: left; 5 | background-color: $azul; 6 | .social{ 7 | width: 251px; 8 | height: 60px; 9 | margin: 0 auto; 10 | @media screen and (max-width: $media-mobile) { 11 | width: 100%; 12 | height: auto; 13 | margin-bottom: 5px; 14 | } 15 | ul{ 16 | width: 100%; 17 | height: auto; 18 | list-style: none; 19 | float: left; 20 | margin-top: 17px; 21 | @media screen and (max-width: $media-mobile) { 22 | width: 150px; 23 | margin: 10px auto; 24 | } 25 | @media screen and (max-width: $media-tablet) { 26 | margin-top: 20px; 27 | } 28 | } 29 | li{ 30 | width: auto; 31 | height: auto; 32 | float: left; 33 | margin-left: 20px; 34 | &:hover{ 35 | -webkit-animation: social 1s linear; 36 | -moz-animation: social 1s linear; 37 | -ms-animation: social 1s linear; 38 | -o-animation: social 1s linear; 39 | animation: social 1s linear; 40 | } 41 | @media screen and (max-width: $media-tablet) { 42 | margin-left: 9px; 43 | } 44 | } 45 | svg{ 46 | width: 30px; 47 | height: 30px; 48 | fill: $branco; 49 | @media screen and (max-width: $media-mobile) { 50 | width: 20px; 51 | height: 20px; 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /css-components/_sass/_header.scss: -------------------------------------------------------------------------------- 1 | header{ 2 | width: 100%; 3 | height: auto; 4 | float: left; 5 | input[type="checkbox"]{ 6 | display: none; 7 | } 8 | .selecione{ 9 | width: 100%; 10 | height: auto; 11 | float: left; 12 | transition: all .3s ease; 13 | } 14 | .texto-selecione{ 15 | width: 100%; 16 | height: 50px; 17 | float: left; 18 | position: relative; 19 | background-color: $azul; 20 | line-height: 50px; 21 | text-align: center; 22 | font-size: 1.3em; 23 | font-weight: 300; 24 | color: $branco; 25 | cursor: pointer; 26 | &:after{ 27 | content: ""; 28 | width: 0; 29 | height: 0; 30 | position: absolute; 31 | right: 2%; 32 | top: 18px; 33 | border-left: 10px solid transparent; 34 | border-right: 10px solid transparent; 35 | border-top: 15px solid $branco; 36 | } 37 | } 38 | input[type="checkbox"]:checked ~ ul{ 39 | display: block; 40 | } 41 | input[type="checkbox"]:checked ~ .texto-selecione{ 42 | &:after{ 43 | display: none; 44 | } 45 | &:before{ 46 | content: ""; 47 | width: 0; 48 | height: 0; 49 | position: absolute; 50 | right: 2%; 51 | top: 18px; 52 | border-left: 10px solid transparent; 53 | border-right: 10px solid transparent; 54 | border-bottom: 15px solid $branco; 55 | } 56 | } 57 | ul{ 58 | display: none; 59 | width: 100%; 60 | height: auto; 61 | position: absolute; 62 | z-index: 1029; 63 | top: 45px; 64 | background: $preto; 65 | margin: 0; 66 | list-style: none; 67 | 68 | li{ 69 | width: 25%; 70 | height: 40px; 71 | float: left; 72 | border-bottom: 1px solid $cinza; 73 | } 74 | label{ 75 | width: 100%; 76 | height: 40px; 77 | float: left; 78 | cursor: pointer; 79 | line-height: 40px; 80 | text-align: center; 81 | font-size: 1.2em; 82 | font-size: 400; 83 | color: $branco; 84 | &:hover{ 85 | background: $azul2; 86 | } 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /css-components/_sass/_layout.scss: -------------------------------------------------------------------------------- 1 | .componente-lista{ 2 | width: 100%; 3 | height: auto; 4 | float: left; 5 | margin: 0; 6 | padding: 0; 7 | list-style: none; 8 | li{ 9 | width: auto; 10 | height: auto; 11 | float: left; 12 | margin-right: 1%; 13 | h2{ 14 | margin: 0; 15 | padding: 0; 16 | a{ 17 | padding: 20px; 18 | font-family: $font-padrao; 19 | color: $branco; 20 | background-color: $azul; 21 | &:hover{ 22 | text-decoration: none; 23 | background-color: $preto; 24 | } 25 | } 26 | } 27 | } 28 | } 29 | 30 | .container{ 31 | width: 100%; 32 | height: auto; 33 | float: left; 34 | margin-bottom: 5%; 35 | display: none; 36 | } 37 | .row{ 38 | width: 1000px; 39 | height: auto; 40 | margin: 0 auto; 41 | position: relative; 42 | } 43 | h1{ 44 | width: 100%; 45 | height: auto; 46 | float: left; 47 | margin: 2% 0; 48 | text-align: center; 49 | font-weight: 100; 50 | color: $rosa2; 51 | font-size: 4em; 52 | &:before{ 53 | content: ""; 57 | } 58 | } 59 | .code{ 60 | width: 100%; 61 | height: auto; 62 | float: left; 63 | margin-bottom: 10px; 64 | h2{ 65 | width: auto; 66 | height: auto; 67 | float: left; 68 | border-bottom: 2px solid $preto; 69 | padding: 0 5px; 70 | font-size: 1.4em; 71 | font-weight: 400; 72 | color: $preto; 73 | } 74 | a{ 75 | width: auto; 76 | float: right; 77 | font-weight: 300; 78 | font-size: 1.3em; 79 | color: $preto; 80 | &:before{ 81 | content: ""; 82 | width: 30px; 83 | height: 30px; 84 | float: left; 85 | margin-top: -3px; 86 | background-image: url("/images/github.png"); 87 | background-size: 100%; 88 | background-repeat: no-repeat; 89 | } 90 | } 91 | } 92 | .open-components{ 93 | display: none; 94 | } 95 | .github{ 96 | width: 52px; 97 | height: 52px; 98 | position: fixed; 99 | right: 10px; 100 | bottom: 10px; 101 | &:hover{ 102 | -webkit-animation: github 1s cubic-bezier(.49,0,.46,1) infinite; 103 | -moz-animation: github 1s cubic-bezier(.49,0,.46,1) infinite; 104 | -ms-animation: github 1s cubic-bezier(.49,0,.46,1) infinite; 105 | -o-animation: github 1s cubic-bezier(.49,0,.46,1) infinite; 106 | animation: github 1s cubic-bezier(.49,0,.46,1) infinite; 107 | } 108 | } 109 | .line{ 110 | width: 100%; 111 | height: auto; 112 | float: left; 113 | margin-bottom: 20px; 114 | } 115 | .by-download{ 116 | width: 100%; 117 | height: auto; 118 | float: left; 119 | margin-top: 50px; 120 | text-align: center; 121 | font-weight: 300; 122 | font-size: .9em; 123 | color: $preto; 124 | a{ 125 | color: $azul2; 126 | font-weight: 500; 127 | margin-right: 20px; 128 | &:first-child{ 129 | font-size: 1.2em; 130 | } 131 | &:last-child{ 132 | font-size: .9em; 133 | } 134 | &:hover{ 135 | color: $rosa; 136 | } 137 | } 138 | } 139 | .bower{ 140 | width: 100%; 141 | height: auto; 142 | float: left; 143 | margin-top: 20px; 144 | text-align: center; 145 | font-weight: 500; 146 | font-size: 1.3em; 147 | color: $rosa; 148 | text-decoration: underline; 149 | } 150 | #carousel:checked + .container, 151 | #collapse:checked + .container, 152 | #modal-open:checked + .container, 153 | #tab:checked + .container, 154 | #card-open:checked + .container, 155 | #menu-mobile:checked + .container, 156 | #dropdown-open:checked + .container, 157 | #timeline-open:checked + .container, 158 | #preloaders-open:checked + .container, 159 | #tooltips-open:checked + .container, 160 | #checkbox-open:checked + .container, 161 | #text-open:checked + .container, 162 | #avaliacao-open:checked + .container, 163 | #facebook-open:checked + .container, 164 | #menu-vertical-open:checked + .container, 165 | #veja-mais-open:checked + .container, 166 | #paginacao-open:checked + .container 167 | { 168 | display: block; 169 | } 170 | -------------------------------------------------------------------------------- /css-components/_sass/_menu-mobile.scss: -------------------------------------------------------------------------------- 1 | .check-open{ 2 | display: none; 3 | } 4 | 5 | .menu-open{ 6 | width: 40px; 7 | height: 32px; 8 | display: flex; 9 | margin: 0 auto; 10 | background: #000; 11 | cursor: pointer; 12 | position: relative; 13 | transition: all .25s linear; 14 | 15 | 16 | &:before{ 17 | content: ""; 18 | display: block; 19 | margin: 7px auto; 20 | width: 70%; 21 | height: 0.25em; 22 | background: #FFF; 23 | box-shadow: 0 .45em 0 0 #FFF, 0 .9em 0 0 #FFF; 24 | } 25 | &:hover, 26 | &:focus{ 27 | background: #FA58F4; 28 | } 29 | } 30 | .menu-box{ 31 | width:300px; 32 | height: 100%; 33 | padding: 50px 10px; 34 | position: fixed; 35 | top:0px; 36 | left:0px; 37 | z-index: 1000; 38 | background: #333333; 39 | transform: translateX(-320px); 40 | transition: all .25s linear; 41 | 42 | .menu-fechar{ 43 | font-weight: 500; 44 | color: #FFF; 45 | cursor: pointer; 46 | position: absolute; 47 | top:10px; 48 | right:20px; 49 | 50 | &:hover{ 51 | color: #CC0000; 52 | } 53 | } 54 | ul{ 55 | width: 100%; 56 | height: auto; 57 | float: left; 58 | margin: 0; 59 | padding: 0; 60 | list-style: none; 61 | } 62 | li{ 63 | width: 100%; 64 | height: 40px; 65 | float: left; 66 | border-bottom:2px solid #666666; 67 | } 68 | a{ 69 | width: 98%; 70 | height: 40px; 71 | float: left; 72 | padding-left:2%; 73 | text-decoration:none; 74 | line-height: 40px; 75 | font-weight: 500; 76 | font-size: 1em; 77 | color: $branco; 78 | 79 | &:hover{ 80 | background: #666666; 81 | } 82 | } 83 | } 84 | #menu:checked ~ .menu-box{ 85 | left: 0px; 86 | transform: translateX(0); 87 | transition: all .25s linear; 88 | } 89 | -------------------------------------------------------------------------------- /css-components/_sass/_menu-vertical.scss: -------------------------------------------------------------------------------- 1 | @import url(http://weloveiconfonts.com/api/?family=entypo|typicons); 2 | /* typicons */ 3 | [class*="typicons-"]:before { 4 | font-family: 'Typicons', sans-serif; 5 | } 6 | .root-menu{ 7 | width: 100%; 8 | height: 600px; 9 | float: left; 10 | background-color: deepPink; 11 | position: relative; 12 | 13 | nav{ 14 | width: 80px; 15 | height: 100%; 16 | position: absolute; 17 | top: 0px; 18 | left: 0px; 19 | background-color: #0e0f12; 20 | 21 | li, i{ 22 | width: 80px; 23 | height: 50px; 24 | float: left; 25 | cursor: pointer; 26 | transition: all .10s ease; 27 | } 28 | li{ 29 | position: relative; 30 | margin-top: 30px; 31 | } 32 | li:hover{ 33 | background-color: #b40e68; 34 | } 35 | li:hover i{ 36 | color: #FFF; 37 | } 38 | i{ 39 | line-height: 60px; 40 | text-align: center; 41 | color: #878789; 42 | font-size: 50px; 43 | font-style: normal; 44 | } 45 | .nav-texto{ 46 | width: 100px; 47 | height: 50px; 48 | position: absolute; 49 | left: -190px; 50 | top: 0px; 51 | background-color: #b40e68; 52 | line-height: 50px; 53 | text-align: right; 54 | font-family: 'Roboto', sans-serif; 55 | color: #FFF; 56 | font-size: 1.5em; 57 | padding-right: 30px; 58 | transition: all .5s ease; 59 | } 60 | li:hover .nav-texto{ 61 | left: 80px; 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /css-components/_sass/_modal.scss: -------------------------------------------------------------------------------- 1 | .box-modal{ 2 | width: 100%; 3 | 4 | input[type="checkbox"]{ 5 | display: none; 6 | } 7 | .btn{ 8 | width: 100%; 9 | height: 40px; 10 | display: inline-block; 11 | background: #73b1d4; 12 | box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 13 | line-height: 40px; 14 | text-align: center; 15 | font-weight: 500; 16 | font-size: 1.2em; 17 | color: $branco; 18 | cursor: pointer; 19 | 20 | &:hover{ 21 | background: #679ebe; 22 | } 23 | } 24 | 25 | .modal-content{ 26 | width:100%; 27 | height:100%; 28 | z-index:1000; 29 | background: rgba(0,0,0,0.6); 30 | position: fixed; 31 | top: 0; 32 | left: 0; 33 | display: none; 34 | } 35 | 36 | } 37 | .modal-in{ 38 | width: 500px; 39 | height: 300px; 40 | background: #FFF; 41 | border: 1px solid #999; 42 | position: absolute; 43 | z-index: 1001; 44 | top:50%; 45 | left:50%; 46 | margin: -150px 0 0 -250px; 47 | padding:20px; 48 | 49 | .modal-fechar{ 50 | position: absolute; 51 | z-index: 1002; 52 | top: -11px; 53 | right: -13px; 54 | padding: 5px 10px; 55 | cursor: pointer; 56 | background: red; 57 | border-radius: 50%; 58 | font-weight: 500; 59 | font-size: .8em; 60 | color: $branco; 61 | } 62 | } 63 | #modal:checked ~ .modal-content{ 64 | display:block; 65 | -webkit-animation: alpha 1s ease-in; 66 | -moz-animation: alpha 1s ease-in; 67 | -ms-animation: alpha 1s ease-in; 68 | -o-animation: alpha 1s ease-in; 69 | animation: alpha 1s ease-in; 70 | } 71 | -------------------------------------------------------------------------------- /css-components/_sass/_paginacao.scss: -------------------------------------------------------------------------------- 1 | input{ 2 | display: none; 3 | } 4 | .box-paginacao{ 5 | width: 100%; 6 | height: auto; 7 | float: left; 8 | h2{ 9 | width: 100%; 10 | height: auto; 11 | float: left; 12 | margin: 0 0 50px; 13 | text-align: center; 14 | font-family: $font-padrao; 15 | font-weight: 400; 16 | font-size: 1.3em; 17 | color: $azul; 18 | } 19 | .box-vitrines{ 20 | width: 100%; 21 | height: 371px; 22 | float: left; 23 | overflow: hidden; 24 | position: relative; 25 | } 26 | ul{ 27 | width: 100%; 28 | height: auto; 29 | float: left; 30 | li{ 31 | width: 250px; 32 | height: 250px; 33 | float: left; 34 | margin: 0 0 10px 60px; 35 | border: 1px solid $cinza; 36 | border-radius: 10px; 37 | line-height: 250px; 38 | text-align: center; 39 | font-family: $font-padrao; 40 | font-weight: 400; 41 | font-size: 1.3em; 42 | color: $preto; 43 | } 44 | } 45 | .vitrine1, 46 | .vitrine2, 47 | .vitrine3, 48 | .vitrine4{ 49 | width: 100%; 50 | height: 336px; 51 | float: left; 52 | margin-bottom: 33px; 53 | } 54 | } 55 | .btn-paginacao{ 56 | width: 100%; 57 | height: auto; 58 | float: left; 59 | margin-top: 10px; 60 | display: flex; 61 | align-items: center; 62 | justify-content: center; 63 | position: absolute; 64 | z-index: 10; 65 | left: 0; 66 | bottom: 0; 67 | background-color: $branco; 68 | ul{ 69 | width: auto; 70 | height: auto; 71 | li{ 72 | width: 30px; 73 | height: 30px; 74 | float: left; 75 | margin: 0 5px 0 0; 76 | border: 0; 77 | &:last-child{ 78 | margin: 0; 79 | } 80 | label{ 81 | width: 100%; 82 | height: 30px; 83 | float: left; 84 | text-align: center; 85 | line-height: 30px; 86 | font-family: $font-padrao; 87 | font-weight: 400; 88 | font-size: 1em; 89 | color: $preto; 90 | cursor: pointer; 91 | border-radius: 3px; 92 | transition: background-color .25s ease-in-out; 93 | &:hover{ 94 | background-color: $rosa; 95 | color: $branco; 96 | } 97 | } 98 | } 99 | } 100 | } 101 | #paginacao1:checked ~ .box-vitrines > ul{ 102 | transition: transform .7s ease-in-out; 103 | transform: translateY(0px); 104 | } 105 | #paginacao1:checked ~ .box-vitrines label[for="paginacao1"]{ 106 | background-color: $rosa; 107 | color: $branco; 108 | } 109 | #paginacao2:checked ~ .box-vitrines > ul{ 110 | transition: transform .7s ease-in-out; 111 | transform: translateY(-369px); 112 | } 113 | #paginacao2:checked ~ .box-vitrines label[for="paginacao2"]{ 114 | background-color: $rosa; 115 | color: $branco; 116 | } 117 | #paginacao3:checked ~ .box-vitrines > ul{ 118 | transition: transform .7s ease-in-out; 119 | transform: translateY(-738px); 120 | } 121 | #paginacao3:checked ~ .box-vitrines label[for="paginacao3"]{ 122 | background-color: $rosa; 123 | color: $branco; 124 | } 125 | #paginacao4:checked ~ .box-vitrines > ul{ 126 | transition: transform .7s ease-in-out; 127 | transform: translateY(-1107px); 128 | } 129 | #paginacao4:checked ~ .box-vitrines label[for="paginacao4"]{ 130 | background-color: $rosa; 131 | color: $branco; 132 | } -------------------------------------------------------------------------------- /css-components/_sass/_preloaders.scss: -------------------------------------------------------------------------------- 1 | .box-preloaders{ 2 | width: 100%; 3 | height: auto; 4 | float: left; 5 | .preloaders-1{ 6 | width: 200px; 7 | height: 200px; 8 | float: left; 9 | margin-right: 150px; 10 | position: relative; 11 | border: 10px solid $preto; 12 | border-radius: 50%; 13 | &:after{ 14 | content: ""; 15 | width: 200px; 16 | height: 200px; 17 | position: absolute; 18 | top: -10px; 19 | left: -11px; 20 | border: 10px solid transparent; 21 | border-right: 12px solid $rosa; 22 | border-radius: 50%; 23 | -webkit-animation: preloader1 1s linear infinite; 24 | -moz-animation: preloader1 1s linear infinite; 25 | -ms-animation: preloader1 1s linear infinite; 26 | -o-animation: preloader1 1s linear infinite; 27 | animation: preloader1 1s linear infinite; 28 | } 29 | } 30 | .preloaders-2{ 31 | width: 200px; 32 | height: 200px; 33 | float: left; 34 | margin-right: 150px; 35 | position: relative; 36 | border: 10px solid $preto; 37 | border-radius: 50%; 38 | &:after{ 39 | content: ""; 40 | width: 200px; 41 | height: 200px; 42 | position: absolute; 43 | top: -10px; 44 | left: -11px; 45 | border: 10px solid transparent; 46 | border-right: 12px solid $rosa; 47 | border-radius: 50%; 48 | -webkit-animation: preloader2after 1s cubic-bezier(.49,0,.46,1) infinite; 49 | -ms-animation: preloader2after 1s cubic-bezier(.49,0,.46,1) infinite; 50 | -moz-animation: preloader2after 1s cubic-bezier(.49,0,.46,1) infinite; 51 | -o-animation: preloader2after 1s cubic-bezier(.49,0,.46,1) infinite; 52 | animation: preloader2after 1s cubic-bezier(.49,0,.46,1) infinite; 53 | } 54 | &:before{ 55 | content: ""; 56 | width: 200px; 57 | height: 200px; 58 | position: absolute; 59 | top: -10px; 60 | left: -11px; 61 | border: 10px solid transparent; 62 | border-left: 12px solid $rosa; 63 | border-radius: 50%; 64 | -webkit-animation: preloader2before 1s cubic-bezier(.49,0,.46,1) infinite; 65 | -moz-animation: preloader2before 1s cubic-bezier(.49,0,.46,1) infinite; 66 | -ms-animation: preloader2before 1s cubic-bezier(.49,0,.46,1) infinite; 67 | -o-animation: preloader2before 1s cubic-bezier(.49,0,.46,1) infinite; 68 | animation: preloader2before 1s cubic-bezier(.49,0,.46,1) infinite; 69 | } 70 | } 71 | .preloaders-3{ 72 | width: 230px; 73 | height: 50px; 74 | float: left; 75 | margin-top: 80px; 76 | span{ 77 | width: 50px; 78 | height: 50px; 79 | float: left; 80 | margin-right: 30px; 81 | background-color: $preto; 82 | border-radius: 50px; 83 | &:last-child{ 84 | margin-right: 0; 85 | } 86 | &:nth-child(1){ 87 | -webkit-animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite; 88 | -moz-animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite; 89 | -ms-animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite; 90 | -o-animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite; 91 | animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite; 92 | } 93 | &:nth-child(2){ 94 | -webkit-animation: preloader3b 1s cubic-bezier(.49,0,.46,1) infinite; 95 | -moz-animation: preloader3b 1s cubic-bezier(.49,0,.46,1) infinite; 96 | -ms-animation: preloader3b 1s cubic-bezier(.49,0,.46,1) infinite; 97 | -o-animation: preloader3b 1s cubic-bezier(.49,0,.46,1) infinite; 98 | animation: preloader3b 1s cubic-bezier(.49,0,.46,1) infinite; 99 | } 100 | &:nth-child(3){ 101 | -webkit-animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite; 102 | -moz-animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite; 103 | -o-animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite; 104 | -ms-animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite; 105 | animation: preloader3 1s cubic-bezier(.49,0,.46,1) infinite; 106 | } 107 | } 108 | } 109 | .preloaders-4{ 110 | width: 200px; 111 | height: 200px; 112 | float: left; 113 | position: relative; 114 | border-radius: 50%; 115 | border-right: 20px solid $rosa; 116 | border-left: 20px solid transparent; 117 | border-top: 20px solid transparent; 118 | border-bottom: 20px solid transparent; 119 | -webkit-animation: preloader4 1s linear infinite; 120 | -moz-animation: preloader4 1s linear infinite; 121 | -ms-animation: preloader4 1s linear infinite; 122 | -o-animation: preloader4 1s linear infinite; 123 | animation: preloader4 1s linear infinite; 124 | &:before{ 125 | content: ""; 126 | width: 100px; 127 | height: 100px; 128 | position: absolute; 129 | left: 50px; 130 | top: 50px; 131 | background-color: $preto; 132 | border-radius: 50%; 133 | } 134 | } 135 | .preloaders-5{ 136 | width: 200px; 137 | height: 20px; 138 | float: left; 139 | position: relative; 140 | margin: 100px 0 0 150px; 141 | background-color: $preto; 142 | &:after{ 143 | content: ""; 144 | width: 50px; 145 | height: 20px; 146 | position: absolute; 147 | top: 0; 148 | left: 0; 149 | background-color: $rosa; 150 | animation: preloaders-5 1s linear infinite; 151 | } 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /css-components/_sass/_syntax-highlighting.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Syntax highlighting styles 3 | */ 4 | .highlight { 5 | background: $preto; 6 | width: 100%; 7 | height: auto; 8 | float: left; 9 | margin: 30px 0; 10 | padding: 30px 0; 11 | color: #FFF; 12 | font-size: 1.1em; 13 | 14 | .highlighter-rouge & { 15 | background: $preto; 16 | } 17 | .lineno{ 18 | display: none; 19 | } 20 | pre{ 21 | background: $preto; 22 | } 23 | .c { color: #998; font-style: italic } // Comment 24 | .err { color: #a61717; background-color: #e3d2d2 } // Error 25 | .k { font-weight: bold } // Keyword 26 | .o { font-weight: bold } // Operator 27 | .cm { color: #998; font-style: italic } // Comment.Multiline 28 | .cp { color: #999; font-weight: bold } // Comment.Preproc 29 | .c1 { color: #998; font-style: italic } // Comment.Single 30 | .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special 31 | .gd { color: #000; background-color: #fdd } // Generic.Deleted 32 | .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific 33 | .ge { font-style: italic } // Generic.Emph 34 | .gr { color: #a00 } // Generic.Error 35 | .gh { color: #999 } // Generic.Heading 36 | .gi { color: #000; background-color: #dfd } // Generic.Inserted 37 | .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific 38 | .go { color: #888 } // Generic.Output 39 | .gp { color: #555 } // Generic.Prompt 40 | .gs { font-weight: bold } // Generic.Strong 41 | .gu { color: #aaa } // Generic.Subheading 42 | .gt { color: #a00 } // Generic.Traceback 43 | .kc { font-weight: bold } // Keyword.Constant 44 | .kd { font-weight: bold } // Keyword.Declaration 45 | .kp { font-weight: bold } // Keyword.Pseudo 46 | .kr { font-weight: bold } // Keyword.Reserved 47 | .kt { color: #458; font-weight: bold } // Keyword.Type 48 | .m { color: #099 } // Literal.Number 49 | .s { color: #d14 } // Literal.String 50 | .na { color: #008080 } // Name.Attribute 51 | .nb { color: #0086B3 } // Name.Builtin 52 | .nc { color: #88b0d3; font-weight: bold } // Name.Class 53 | .no { color: #008080 } // Name.Constant 54 | .ni { color: #800080 } // Name.Entity 55 | .ne { color: #900; font-weight: bold } // Name.Exception 56 | .nf { color: #900; font-weight: bold } // Name.Function 57 | .nn { color: #555 } // Name.Namespace 58 | .kn, 59 | .ow, 60 | .nt { color: #f92672 } // Name.Tag 61 | .nv { color: #008080 } // Name.Variable 62 | .ow { font-weight: bold } // Operator.Word 63 | .w { color: #bbb } // Text.Whitespace 64 | .mf { color: #099 } // Literal.Number.Float 65 | .mh { color: #099 } // Literal.Number.Hex 66 | .mi { color: #099 } // Literal.Number.Integer 67 | .mo { color: #099 } // Literal.Number.Oct 68 | .sb { color: #d14 } // Literal.String.Backtick 69 | .sc { color: #d14 } // Literal.String.Char 70 | .sd { color: #d14 } // Literal.String.Doc 71 | .s2 { color: #d14 } // Literal.String.Double 72 | .se { color: #d14 } // Literal.String.Escape 73 | .sh { color: #d14 } // Literal.String.Heredoc 74 | .si { color: #d14 } // Literal.String.Interpol 75 | .sx { color: #d14 } // Literal.String.Other 76 | .sr { color: #009926 } // Literal.String.Regex 77 | .s1 { color: #d14 } // Literal.String.Single 78 | .ss { color: #990073 } // Literal.String.Symbol 79 | .bp { color: #999 } // Name.Builtin.Pseudo 80 | .vc { color: #008080 } // Name.Variable.Class 81 | .vg { color: #008080 } // Name.Variable.Global 82 | .vi { color: #008080 } // Name.Variable.Instance 83 | .il { color: #099 } // Literal.Number.Integer.Long 84 | .o, 85 | .p { color: #f7f7f2 } 86 | .m, 87 | .n, 88 | .nb, 89 | .ni, 90 | .nl, 91 | .nn, 92 | .py, 93 | .nv, 94 | .w, 95 | .bp, 96 | .vc, 97 | .vg, 98 | .vi { color: #a4d043; } 99 | .na, 100 | .nc, 101 | .nd, 102 | .ne, 103 | .nf, 104 | .nx { color: #a6e22e; } 105 | .ld, 106 | .s, 107 | .sb, 108 | .sc, 109 | .sd, 110 | .s2, 111 | .sh, 112 | .si, 113 | .sx, 114 | .sr, 115 | .s1, 116 | .ss { color: #e6db74; } 117 | } 118 | .language-css, 119 | .language-sass{ 120 | .nc, 121 | .nd, 122 | .ne, 123 | .nf, 124 | .nx { color: #88b0d3; } 125 | .nl, 126 | .nn, 127 | .py, 128 | .nv, 129 | .w, 130 | .bp, 131 | .vc, 132 | .vg, 133 | .vi { color: #88b0d3; } 134 | .err { 135 | color: #88b0d3; 136 | background-color: transparent ; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /css-components/_sass/_tab.scss: -------------------------------------------------------------------------------- 1 | .tab-box{ 2 | width: 100%; 3 | margin-bottom: 50px; 4 | 5 | .tab-open{ 6 | display: none; 7 | } 8 | .tab-painel{ 9 | min-width: 100px; 10 | display: inline-block; 11 | 12 | .tab-nav{ 13 | width: 100%; 14 | display: inline-block; 15 | cursor: pointer; 16 | border: 1px solid #666; 17 | line-height: 30px; 18 | text-align: center; 19 | font-weight: 500; 20 | font-size: .9em; 21 | color: $preto; 22 | 23 | &:hover{ 24 | background-color:#F2F2F2; 25 | } 26 | 27 | 28 | } 29 | } 30 | .tab-inner{ 31 | width: 98%; 32 | height: auto; 33 | padding: 1%; 34 | margin-top: 5px; 35 | display: inline-block; 36 | background-color: #F2F2F2; 37 | position: absolute; 38 | left: 0; 39 | opacity: 0; 40 | visibility: hidden; 41 | } 42 | 43 | .tab-open:checked ~ .tab-inner{ 44 | opacity: 1; 45 | visibility: visible; 46 | -webkit-animation: alpha 2s ease-in; 47 | -moz-animation: alpha 2s ease-in; 48 | -ms-animation: alpha 2s ease-in; 49 | -o-animation: alpha 2s ease-in; 50 | animation: alpha 2s ease-in; 51 | } 52 | .tab-open:checked ~ label{ 53 | background-color:#F2F2F2; 54 | } 55 | 56 | 57 | } 58 | -------------------------------------------------------------------------------- /css-components/_sass/_text-filter-background.scss: -------------------------------------------------------------------------------- 1 | .texto-filtro{ 2 | width: 100%; 3 | height: auto; 4 | float: left; 5 | text-align: center; 6 | font-size: 9em; 7 | font-weight: 900; 8 | background: url('http://hjdesigner.github.io/css-components/assets/images/star-wars.jpg'); 9 | background-size: cover; 10 | -webkit-background-clip: text; 11 | -webkit-text-fill-color: transparent; 12 | } 13 | -------------------------------------------------------------------------------- /css-components/_sass/_timeline.scss: -------------------------------------------------------------------------------- 1 | .timeline{ 2 | width: 100%; 3 | height: auto; 4 | float: left; 5 | padding: 50px 0; 6 | position: relative; 7 | background-color: $cinza; 8 | &:before{ 9 | content: ""; 10 | width: 10px; 11 | height: 100%; 12 | position: absolute; 13 | top: 0px; 14 | left: 50%; 15 | background-color: $cinza2; 16 | } 17 | 18 | .timeline-item{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin-bottom: 40px; 23 | &:last-child{ 24 | margin-bottom: 0px; 25 | } 26 | .timeline-texto{ 27 | width: 350px; 28 | height: auto; 29 | padding: 20px; 30 | background-color: $rosa; 31 | position: relative; 32 | &.timeline-left{ 33 | float: left; 34 | margin-left: 60px; 35 | &:before{ 36 | content: ""; 37 | width: 50px; 38 | height: 50px; 39 | position: absolute; 40 | right: -80px; 41 | bottom: 13px; 42 | background-color: $vermelho2; 43 | border-radius: 50%; 44 | } 45 | &:after{ 46 | content: ""; 47 | width: 35px; 48 | height: 35px; 49 | position: absolute; 50 | right: -73px; 51 | bottom: 20px; 52 | background-color: $vermelho3; 53 | border-radius: 50%; 54 | } 55 | } 56 | &.timeline-right{ 57 | float: right; 58 | margin-right: 60px; 59 | &:before{ 60 | content: ""; 61 | width: 50px; 62 | height: 50px; 63 | position: absolute; 64 | left: -72px; 65 | bottom: 13px; 66 | background-color: $vermelho2; 67 | border-radius: 50%; 68 | } 69 | &:after{ 70 | content: ""; 71 | width: 35px; 72 | height: 35px; 73 | position: absolute; 74 | left: -64px; 75 | bottom: 20px; 76 | background-color: $vermelho3; 77 | border-radius: 50%; 78 | } 79 | } 80 | h2{ 81 | width: 100%; 82 | height: auto; 83 | float: left; 84 | margin-bottom: 20px; 85 | font-size: 1.2em; 86 | color: $branco; 87 | font-weight: 500; 88 | } 89 | p{ 90 | width: 100%; 91 | height: auto; 92 | float: left; 93 | margin-bottom: 10px; 94 | font-size: 1em; 95 | color: $branco; 96 | font-weight: 300; 97 | &:last-child{ 98 | margin-bottom: 0px; 99 | } 100 | } 101 | } 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /css-components/_sass/_tooltips.scss: -------------------------------------------------------------------------------- 1 | .box-tooltips{ 2 | width: 350px; 3 | height: 50px; 4 | margin: 50px auto; 5 | position: relative; 6 | background-color: $preto; 7 | text-align: center; 8 | line-height: 50px; 9 | font-weight: 300; 10 | color: $branco; 11 | font-size: 1.2em; 12 | &:after{ 13 | display: none; 14 | } 15 | &:hover{ 16 | &:after{ 17 | display: block; 18 | -webkit-animation: alpha 2s ease-out; 19 | -moz-animation: alpha 2s ease-out; 20 | -ms-animation: alpha 2s ease-out; 21 | -o-animation: alpha 2s ease-out; 22 | animation: alpha 2s ease-out; 23 | content: attr(data-title); 24 | position: absolute; 25 | top: 60px; 26 | left: 72px; 27 | font-weight: 300; 28 | color: $preto; 29 | font-size: 1.2em; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /css-components/_sass/_veja-mais.scss: -------------------------------------------------------------------------------- 1 | input[name="input-see-more"]{ 2 | display: none; 3 | } 4 | .box-see-more{ 5 | width: 100%; 6 | height: 300px; 7 | float: left; 8 | overflow: hidden; 9 | position: relative; 10 | h2{ 11 | width: 100%; 12 | height: auto; 13 | float: left; 14 | margin: 20px 0; 15 | text-align: center; 16 | font-family: $font-padrao; 17 | font-weight: 400; 18 | font-size: 2em; 19 | } 20 | p{ 21 | width: 100%; 22 | height: auto; 23 | float: left; 24 | margin: 0 0 10px; 25 | text-align: justify; 26 | font-family: $font-padrao; 27 | font-weight: 400; 28 | font-size: 1em; 29 | } 30 | .btn-see-more{ 31 | width: 100%; 32 | height: 58px; 33 | float: left; 34 | position: absolute; 35 | bottom: 0; 36 | left: 0; 37 | background-color: #FFF; 38 | .btn-see-more-open, 39 | .btn-see-more-closed{ 40 | width: 200px; 41 | height: 50px; 42 | margin: 0 auto; 43 | label{ 44 | width: 100%; 45 | height: 50px; 46 | float: left; 47 | background-color: $azul; 48 | border-bottom: 8px solid #3388CE; 49 | text-align: center; 50 | text-transform: uppercase; 51 | line-height: 50px; 52 | font-family: $font-padrao; 53 | font-weight: 400; 54 | color: $branco; 55 | font-size: 1.3em; 56 | cursor: pointer; 57 | transition: all .3s ease-in-out; 58 | &:hover{ 59 | background-color: $preto; 60 | border-bottom: 8px solid #211E1D; 61 | } 62 | } 63 | } 64 | .btn-see-more-closed{ 65 | display: none; 66 | } 67 | } 68 | } 69 | 70 | #see-more-open:checked ~ .box-see-more{ 71 | height: auto; 72 | } 73 | #see-more-open:checked ~ .box-see-more .btn-see-more-open{ 74 | display: none; 75 | } 76 | #see-more-open:checked ~ .box-see-more .btn-see-more-closed{ 77 | display: block; 78 | } 79 | #see-more-closed:checked ~ .box-see-more{ 80 | height: 300px; 81 | } 82 | #see-more-closed:checked ~ .box-see-more .btn-see-more-closed{ 83 | display: none; 84 | } 85 | #see-more-closed:checked ~ .box-see-more .btn-see-more-open{ 86 | display: block; 87 | } 88 | -------------------------------------------------------------------------------- /css-components/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | permalink: /about/ 5 | --- 6 | 7 | This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/) 8 | 9 | You can find the source code for the Jekyll new theme at: 10 | {% include icon-github.html username="jglovier" %} / 11 | [jekyll-new](https://github.com/jglovier/jekyll-new) 12 | 13 | You can find the source code for Jekyll at 14 | {% include icon-github.html username="jekyll" %} / 15 | [jekyll](https://github.com/jekyll/jekyll) 16 | -------------------------------------------------------------------------------- /css-components/assets/images/css-components.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/css-components/assets/images/css-components.jpg -------------------------------------------------------------------------------- /css-components/assets/images/github-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/css-components/assets/images/github-2.png -------------------------------------------------------------------------------- /css-components/assets/images/github.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/css-components/assets/images/github.jpg -------------------------------------------------------------------------------- /css-components/assets/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/css-components/assets/images/github.png -------------------------------------------------------------------------------- /css-components/assets/images/harckers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/css-components/assets/images/harckers.jpg -------------------------------------------------------------------------------- /css-components/assets/images/harley-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/css-components/assets/images/harley-1.jpg -------------------------------------------------------------------------------- /css-components/assets/images/harley-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/css-components/assets/images/harley-2.jpg -------------------------------------------------------------------------------- /css-components/assets/images/harley-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/css-components/assets/images/harley-3.jpg -------------------------------------------------------------------------------- /css-components/assets/images/henrique-melanda.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/css-components/assets/images/henrique-melanda.jpg -------------------------------------------------------------------------------- /css-components/assets/images/sprite-reactions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/css-components/assets/images/sprite-reactions.png -------------------------------------------------------------------------------- /css-components/assets/images/star-wars.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/css-components/assets/images/star-wars.jpg -------------------------------------------------------------------------------- /css-components/css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | @charset "utf-8"; 5 | 6 | 7 | 8 | 9 | //FONTES 10 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100,900); 11 | 12 | //ICONS 13 | 14 | 15 | $font-padrao: 'Roboto', sans-serif; 16 | // Width of the content area 17 | $content-width: 800px; 18 | $content-desktop: 1200px; 19 | $content-mobile: 100%; 20 | $content-tablet: 100%; 21 | $media-mobile: 767px; 22 | $media-tablet: 1220px; 23 | 24 | 25 | //CORES 26 | $cinza: #c0c8c9; 27 | $cinza2: #9ca3a4; 28 | $branco: #FFFFFF; 29 | $preto: #2E2929; 30 | $rosa: #FF1493; 31 | $rosa2: #FF00B7; 32 | $vermelho: #E80A0A; 33 | $vermelho2: #980b0b; 34 | $vermelho3: #cd1717; 35 | $azul: #3CA3F2; 36 | $azul2: #299BF2; 37 | $verde: #4bd865; 38 | $gold: #FFD700; 39 | 40 | // Import partials from `sass_dir` (defaults to `_sass`) 41 | @import 42 | "base", 43 | "animations", 44 | "header", 45 | "footer", 46 | "layout", 47 | "carousel", 48 | "collapse", 49 | "tab", 50 | "modal", 51 | "menu-mobile", 52 | "card", 53 | "dropdown", 54 | "timeline", 55 | "preloaders", 56 | "tooltips", 57 | "text-filter-background", 58 | "checkbox", 59 | "avaliacao", 60 | "facebook-reactions", 61 | "menu-vertical", 62 | "veja-mais", 63 | "paginacao", 64 | "mobile", 65 | "syntax-highlighting" 66 | ; 67 | -------------------------------------------------------------------------------- /css-components/feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | --- 4 | 5 | 6 | 7 | {{ site.title | xml_escape }} 8 | {{ site.description | xml_escape }} 9 | {{ site.url }}{{ site.baseurl }}/ 10 | 11 | {{ site.time | date_to_rfc822 }} 12 | {{ site.time | date_to_rfc822 }} 13 | Jekyll v{{ jekyll.version }} 14 | {% for post in site.posts limit:10 %} 15 | 16 | {{ post.title | xml_escape }} 17 | {{ post.content | xml_escape }} 18 | {{ post.date | date_to_rfc822 }} 19 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 20 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 21 | {% for tag in post.tags %} 22 | {{ tag | xml_escape }} 23 | {% endfor %} 24 | {% for cat in post.categories %} 25 | {{ cat | xml_escape }} 26 | {% endfor %} 27 | 28 | {% endfor %} 29 | 30 | 31 | -------------------------------------------------------------------------------- /css-components/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | 7 |

CSS COMPONENTS

8 | 9 | {% include carousel.html %} 10 | {% include collapse.html %} 11 | {% include tab.html %} 12 | {% include modal.html %} 13 | {% include menu-mobile.html %} 14 | {% include card.html %} 15 | {% include dropdown.html %} 16 | {% include timeline.html %} 17 | {% include preloaders.html %} 18 | {% include tooltips.html %} 19 | {% include text-filter-background.html %} 20 | {% include checkbox.html %} 21 | {% include avaliacao.html %} 22 | {% include facebook-reactions.html %} 23 | {% include menu-vertical.html %} 24 | {% include veja-mais.html %} 25 | {% include paginacao.html %} 26 | 27 |
28 | -------------------------------------------------------------------------------- /exemplos/avaliacao/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Avaliação Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Avaliação Pure CSS

15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 27 | 30 | 33 | 36 | 37 | 38 | 39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /exemplos/avaliacao/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | @-webkit-keyframes alpha { 35 | 0%{ 36 | opacity: 0; 37 | } 38 | 100%{ 39 | opacity: 1; 40 | } 41 | } 42 | input{ 43 | display: none; 44 | } 45 | .box-estrela{ 46 | width: 76px;; 47 | height: 111px; 48 | float: left; 49 | margin-right: 10px; 50 | position: relative; 51 | cursor: pointer; 52 | } 53 | .estrela-diagrama, 54 | .estrela-diagrama:before, 55 | .estrela-diagrama:after{ 56 | width: 0px; 57 | height: 0px; 58 | position: absolute; 59 | border-right: 38px solid transparent; 60 | border-left: 38px solid transparent; 61 | border-bottom: 22px solid #c0c8c9; 62 | } 63 | .estrela-diagrama{ 64 | z-index: 5; 65 | transform: rotate(-180deg); 66 | left: 0px; 67 | top: 47px; 68 | } 69 | .estrela-diagrama:before{ 70 | content: ""; 71 | z-index: 6; 72 | transform: rotate(-72deg); 73 | left: -36px; 74 | top: 1px; 75 | } 76 | .estrela-diagrama:after{ 77 | content: ""; 78 | z-index: 6; 79 | transform: rotate(71deg); 80 | left: -40px; 81 | top: 1px; 82 | } 83 | #estrela-1:checked ~ label[for="estrela-1"] .estrela-diagrama, 84 | #estrela-1:checked ~ label[for="estrela-1"] .estrela-diagrama:before, 85 | #estrela-1:checked ~ label[for="estrela-1"] .estrela-diagrama:after{ 86 | -webkit-animation: alpha .2s ease; 87 | width: 0; 88 | height: 0; 89 | position: absolute; 90 | border-right: 38px solid transparent; 91 | border-left: 38px solid transparent; 92 | border-bottom: 22px solid gold; 93 | } 94 | #estrela-2:checked ~ label[for="estrela-1"] .estrela-diagrama, 95 | #estrela-2:checked ~ label[for="estrela-1"] .estrela-diagrama:before, 96 | #estrela-2:checked ~ label[for="estrela-1"] .estrela-diagrama:after, 97 | #estrela-2:checked ~ label[for="estrela-2"] .estrela-diagrama, 98 | #estrela-2:checked ~ label[for="estrela-2"] .estrela-diagrama:before, 99 | #estrela-2:checked ~ label[for="estrela-2"] .estrela-diagrama:after{ 100 | -webkit-animation: alpha .2s ease; 101 | width: 0; 102 | height: 0; 103 | position: absolute; 104 | border-right: 38px solid transparent; 105 | border-left: 38px solid transparent; 106 | border-bottom: 22px solid gold; 107 | } 108 | #estrela-3:checked ~ label[for="estrela-1"] .estrela-diagrama, 109 | #estrela-3:checked ~ label[for="estrela-1"] .estrela-diagrama:before, 110 | #estrela-3:checked ~ label[for="estrela-1"] .estrela-diagrama:after, 111 | #estrela-3:checked ~ label[for="estrela-2"] .estrela-diagrama, 112 | #estrela-3:checked ~ label[for="estrela-2"] .estrela-diagrama:before, 113 | #estrela-3:checked ~ label[for="estrela-2"] .estrela-diagrama:after, 114 | #estrela-3:checked ~ label[for="estrela-3"] .estrela-diagrama, 115 | #estrela-3:checked ~ label[for="estrela-3"] .estrela-diagrama:before, 116 | #estrela-3:checked ~ label[for="estrela-3"] .estrela-diagrama:after{ 117 | -webkit-animation: alpha .2s ease; 118 | width: 0; 119 | height: 0; 120 | position: absolute; 121 | border-right: 38px solid transparent; 122 | border-left: 38px solid transparent; 123 | border-bottom: 22px solid gold; 124 | } 125 | #estrela-4:checked ~ label[for="estrela-1"] .estrela-diagrama, 126 | #estrela-4:checked ~ label[for="estrela-1"] .estrela-diagrama:before, 127 | #estrela-4:checked ~ label[for="estrela-1"] .estrela-diagrama:after, 128 | #estrela-4:checked ~ label[for="estrela-2"] .estrela-diagrama, 129 | #estrela-4:checked ~ label[for="estrela-2"] .estrela-diagrama:before, 130 | #estrela-4:checked ~ label[for="estrela-2"] .estrela-diagrama:after, 131 | #estrela-4:checked ~ label[for="estrela-3"] .estrela-diagrama, 132 | #estrela-4:checked ~ label[for="estrela-3"] .estrela-diagrama:before, 133 | #estrela-4:checked ~ label[for="estrela-3"] .estrela-diagrama:after, 134 | #estrela-4:checked ~ label[for="estrela-4"] .estrela-diagrama, 135 | #estrela-4:checked ~ label[for="estrela-4"] .estrela-diagrama:before, 136 | #estrela-4:checked ~ label[for="estrela-4"] .estrela-diagrama:after{ 137 | -webkit-animation: alpha .2s ease; 138 | width: 0; 139 | height: 0; 140 | position: absolute; 141 | border-right: 38px solid transparent; 142 | border-left: 38px solid transparent; 143 | border-bottom: 22px solid gold; 144 | } 145 | #estrela-5:checked ~ label[for="estrela-1"] .estrela-diagrama, 146 | #estrela-5:checked ~ label[for="estrela-1"] .estrela-diagrama:before, 147 | #estrela-5:checked ~ label[for="estrela-1"] .estrela-diagrama:after, 148 | #estrela-5:checked ~ label[for="estrela-2"] .estrela-diagrama, 149 | #estrela-5:checked ~ label[for="estrela-2"] .estrela-diagrama:before, 150 | #estrela-5:checked ~ label[for="estrela-2"] .estrela-diagrama:after, 151 | #estrela-5:checked ~ label[for="estrela-3"] .estrela-diagrama, 152 | #estrela-5:checked ~ label[for="estrela-3"] .estrela-diagrama:before, 153 | #estrela-5:checked ~ label[for="estrela-3"] .estrela-diagrama:after, 154 | #estrela-5:checked ~ label[for="estrela-4"] .estrela-diagrama, 155 | #estrela-5:checked ~ label[for="estrela-4"] .estrela-diagrama:before, 156 | #estrela-5:checked ~ label[for="estrela-4"] .estrela-diagrama:after, 157 | #estrela-5:checked ~ label[for="estrela-5"] .estrela-diagrama, 158 | #estrela-5:checked ~ label[for="estrela-5"] .estrela-diagrama:before, 159 | #estrela-5:checked ~ label[for="estrela-5"] .estrela-diagrama:after{ 160 | -webkit-animation: alpha .2s ease; 161 | width: 0; 162 | height: 0; 163 | position: absolute; 164 | border-right: 38px solid transparent; 165 | border-left: 38px solid transparent; 166 | border-bottom: 22px solid gold; 167 | } 168 | -------------------------------------------------------------------------------- /exemplos/card/harckers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/exemplos/card/harckers.jpg -------------------------------------------------------------------------------- /exemplos/card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Card Pure CSS

15 | 16 |
17 |
18 | Harckers 19 |
20 |
Card Titulo
21 | 22 |
23 | 24 |
25 |
26 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 27 |
28 |
29 | 30 | 31 | 32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /exemplos/card/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | @-webkit-keyframes alpha { 35 | 0%{ 36 | opacity: 0; 37 | } 38 | 100%{ 39 | opacity: 1px; 40 | } 41 | } 42 | .card-box{ 43 | width: 390px; 44 | height: 280px; 45 | float: left; 46 | box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);; 47 | position: relative; 48 | } 49 | .card-box input[type="checkbox"]{ 50 | display: none; 51 | } 52 | .card-img{ 53 | width: 100%; 54 | height: auto; 55 | float: left; 56 | margin: 0; 57 | } 58 | .card-box .card-titulo{ 59 | width: 350px; 60 | height: 240px; 61 | padding: 10px 20px 0; 62 | font-weight: 300; 63 | color: #FF1493; 64 | font-size: 1.4em; 65 | } 66 | .card-box .click-card{ 67 | width: 26px; 68 | height: 14px; 69 | position: absolute; 70 | right: 10px; 71 | bottom: 10px; 72 | z-index: 1; 73 | } 74 | .card-box .click-card label{ 75 | width: 26px; 76 | height: 14px; 77 | float: left; 78 | cursor: pointer; 79 | } 80 | .card-box .click-card label:before{ 81 | content: ""; 82 | width: 15px; 83 | height: 2px; 84 | position: absolute; 85 | left: 0px; 86 | top: 6px; 87 | background-color: #2E2929; 88 | transform: rotate(-50deg); 89 | } 90 | .card-box .click-card label:after{ 91 | content: ""; 92 | width: 15px; 93 | height: 2px; 94 | position: absolute; 95 | left: 10px; 96 | top: 6px; 97 | background-color: #2E2929; 98 | transform: rotate(50deg); 99 | } 100 | .card-box .card-texto{ 101 | display: none; 102 | width: 350px; 103 | height: 240px; 104 | position: absolute; 105 | top: 0; 106 | left: 0; 107 | z-index: 0; 108 | padding: 20px; 109 | line-height: 30px; 110 | font-family: 'Roboto', sans-serif; 111 | font-weight: 500; 112 | color: #2E2929; 113 | background-color: #FFFFFF; 114 | } 115 | .card-box #click-card:checked ~ .card-texto{ 116 | display: block; 117 | -webkit-animation: alpha .3s linear; 118 | } 119 | .card-box #click-card:checked ~ .click-card label:after{ 120 | content: ""; 121 | width: 15px; 122 | height: 2px; 123 | left: 0px; 124 | top: 6px; 125 | position: absolute; 126 | background-color: #2E2929; 127 | transform: rotate(50deg); 128 | } 129 | -------------------------------------------------------------------------------- /exemplos/carousel/harley-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/exemplos/carousel/harley-1.jpg -------------------------------------------------------------------------------- /exemplos/carousel/harley-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/exemplos/carousel/harley-2.jpg -------------------------------------------------------------------------------- /exemplos/carousel/harley-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/exemplos/carousel/harley-3.jpg -------------------------------------------------------------------------------- /exemplos/carousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Carousel Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Carousel Pure CSS

15 | 16 |
17 | 18 |
19 | 20 |
21 | 22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 |
    36 |
    2. 37 |
    3. 38 |
    4. 39 |
40 |
41 | 42 | 43 | 44 |
45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /exemplos/carousel/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | @-webkit-keyframes alpha { 35 | 0%{ 36 | opacity: 0; 37 | } 38 | 100%{ 39 | opacity: 1px; 40 | } 41 | } 42 | .carousel-box{ 43 | width: 100%; 44 | height: 440px; 45 | display: inline-block; 46 | position: relative; 47 | } 48 | .carousel-box .carousel-open{ 49 | display: none; 50 | } 51 | .carousel-box .carousel-item{ 52 | display: none; 53 | width: 100%; 54 | height: 440px; 55 | position: absolute; 56 | z-index: 100; 57 | } 58 | .carousel-box .carousel-item img{ 59 | width: 100%; 60 | } 61 | .carousel-box .carousel-control{ 62 | display: none; 63 | widht: 50px; 64 | height: 83px; 65 | position: absolute; 66 | z-index: 1001; 67 | top: 179px; 68 | padding: 3px 15px; 69 | cursor: pointer; 70 | font-size: 0; 71 | } 72 | .carousel-box .prev{ 73 | left: 10px; 74 | } 75 | .carousel-box .prev:hover:before, .carousel-box .prev:hover:after{ 76 | background-color: #E80A0A; 77 | } 78 | .carousel-box .prev:before, .carousel-box .prev:after{ 79 | content: ""; 80 | width: 50px; 81 | height: 5px; 82 | position: absolute; 83 | background-color: #FFFFFF; 84 | transition: all .3s ease; 85 | } 86 | .carousel-box .prev:before{ 87 | transform: rotate(-55deg); 88 | top: 21px; 89 | } 90 | .carousel-box .prev:after{ 91 | transform: rotate(55deg); 92 | left: 14px; 93 | top: 60px; 94 | } 95 | .carousel-box .next{ 96 | right: 58px; 97 | } 98 | .carousel-box .next:hover:before, .carousel-box .next:hover:after{ 99 | background-color: #E80A0A; 100 | } 101 | .carousel-box .next:before, .carousel-box .next:after{ 102 | content: ""; 103 | width: 50px; 104 | height: 5px; 105 | position: absolute; 106 | background-color: #FFFFFF; 107 | } 108 | .carousel-box .next:before{ 109 | transform: rotate(-125deg); 110 | top: 21px; 111 | } 112 | .carousel-box .next:after{ 113 | transform: rotate(125deg); 114 | left: 14px; 115 | top: 60px; 116 | } 117 | .carousel-box .carousel-indicators{ 118 | list-style: none; 119 | width: 100%;; 120 | position: absolute; 121 | z-index: 1002; 122 | bottom: 0px; 123 | margin: 0; 124 | padding: 0; 125 | text-align: center; 126 | } 127 | .carousel-box .carousel-indicators li{ 128 | display: inline-block; 129 | margin: 0 5px; 130 | } 131 | .carousel-box .carousel-indicators li .carousel-bullet{ 132 | color: #FFFFFF; 133 | cursor: pointer; 134 | display: block; 135 | font-size: 35px; 136 | } 137 | .carousel-open:checked + .carousel-item{ 138 | display: block; 139 | -webkit-animation: alpha 4s ease-out; 140 | } 141 | #carousel-1:checked ~ .control-1, 142 | #carousel-2:checked ~ .control-2, 143 | #carousel-3:checked ~ .control-3{ 144 | display: block; 145 | } 146 | #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet, 147 | #carousel-2:checked ~ .control-1 ~ .carousel-indicators li:nth-child(2) .carousel-bullet, 148 | #carousel-3:checked ~ .control-1 ~ .carousel-indicators li:nth-child(3) .carousel-bullet{ 149 | color: #E80A0A; 150 | } 151 | -------------------------------------------------------------------------------- /exemplos/checkbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Checkbox Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Checkbox Pure CSS

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 | -------------------------------------------------------------------------------- /exemplos/checkbox/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | .input-checkbox{ 35 | display: none; 36 | } 37 | .row-checkbox{ 38 | width: auto; 39 | height: 50px; 40 | float: left; 41 | margin: 50px 50px 0 0; 42 | } 43 | .checkbox-1{ 44 | width: 30px; 45 | height: 30px; 46 | float: left; 47 | position: relative; 48 | border-radius: 50%; 49 | background-color: #2E2929; 50 | cursor: pointer; 51 | } 52 | .checkbox-1:before{ 53 | display: none; 54 | content: ""; 55 | position: absolute; 56 | width: 20px; 57 | height: 20px; 58 | background-color: #3CA3F2; 59 | border-radius: 50%; 60 | top: 5px; 61 | left: 5px; 62 | } 63 | #checkbox-1:checked ~ .checkbox-1:before{ 64 | display: block; 65 | } 66 | .checkbox-2{ 67 | width: 30px; 68 | height: 30px; 69 | float: left; 70 | position: relative; 71 | background-color: #2E2929; 72 | cursor: pointer; 73 | } 74 | .checkbox-2:before{ 75 | display: none; 76 | content: ""; 77 | position: absolute; 78 | width: 20px; 79 | height: 20px; 80 | background-color: #3CA3F2; 81 | top: 5px; 82 | left: 5px; 83 | } 84 | #checkbox-2:checked ~ .checkbox-2:before{ 85 | display: block; 86 | } 87 | .checkbox-3{ 88 | width: 30px; 89 | height: 30px; 90 | float: left; 91 | position: relative; 92 | background-color: #2E2929; 93 | cursor: pointer; 94 | } 95 | .checkbox-3:before{ 96 | display: none; 97 | content: ""; 98 | position: absolute; 99 | width: 20px; 100 | height: 2px; 101 | background-color: #3CA3F2; 102 | top: 14px; 103 | left: 5px; 104 | transform: rotate(-42deg); 105 | } 106 | .checkbox-3:after{ 107 | display: none; 108 | content: ""; 109 | position: absolute; 110 | width: 20px; 111 | height: 2px; 112 | background-color: #3CA3F2; 113 | top: 14px; 114 | left: 5px; 115 | transform: rotate(42deg); 116 | } 117 | #checkbox-3:checked ~ .checkbox-3:before, #checkbox-3:checked ~ .checkbox-3:after{ 118 | display: block; 119 | } 120 | .checkbox-4{ 121 | width: 30px; 122 | height: 30px; 123 | float: left; 124 | position: relative; 125 | background-color: #2E2929; 126 | cursor: pointer; 127 | } 128 | .checkbox-4:before{ 129 | display: none; 130 | content: ""; 131 | position: absolute; 132 | width: 15px; 133 | height: 2px; 134 | background-color: #3CA3F2; 135 | top: 13px; 136 | left: 12px; 137 | transform: rotate(-59deg); 138 | } 139 | .checkbox-4:after{ 140 | display: none; 141 | content: ""; 142 | position: absolute; 143 | width: 9px; 144 | height: 2px; 145 | background-color: #3CA3F2; 146 | top: 16px; 147 | left: 8px; 148 | transform: rotate(42deg); 149 | } 150 | #checkbox-4:checked ~ .checkbox-4:before, #checkbox-4:checked ~ .checkbox-4:after{ 151 | display: block; 152 | } 153 | .checkbox-5{ 154 | width: 70px; 155 | height: 30px; 156 | float: left; 157 | position: relative; 158 | border-radius: 44px; 159 | background-color: #c0c8c9; 160 | cursor: pointer; 161 | } 162 | .checkbox-5:before{ 163 | content: ""; 164 | width: 24px; 165 | height: 24px; 166 | position: absolute; 167 | left: 4px; 168 | top: 3px; 169 | background-color: #FFFFFF; 170 | border-radius: 50%; 171 | transition: .25s; 172 | } 173 | #checkbox-5:checked ~ .checkbox-5{ 174 | background-color: #4bd865; 175 | } 176 | #checkbox-5:checked ~ .checkbox-5:before{ 177 | transform: translateX(38px); 178 | } 179 | -------------------------------------------------------------------------------- /exemplos/collapse/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Collapse Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Collapse Pure CSS

15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 |

Container do collapse 1

23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque quae eo

24 |
25 |
26 |
27 | 28 | 29 |
30 |

Container do collapse 2

31 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque quae eo

32 |
33 |
34 |
35 | 36 | 37 |
38 |

Container do collapse 3

39 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque quae eo

40 |
41 |
42 |
43 | 44 | 45 |
46 |

Container do collapse 4

47 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum itaque quae eo

48 |
49 |
50 |
51 | 52 | 53 |
54 |
55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /exemplos/collapse/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | @-webkit-keyframes alpha { 35 | 0%{ 36 | opacity: 0; 37 | } 38 | 100%{ 39 | opacity: 1px; 40 | } 41 | } 42 | .collapse-box{ 43 | width: 100%; 44 | } 45 | .collapse-box .check-open{ 46 | display: none; 47 | } 48 | .collapse-box .collapse-painel{ 49 | width: 100%; 50 | display: inline-block; 51 | } 52 | .collapse-box .collapse-painel .collapse-nav{ 53 | width: 98%; 54 | display: inline-block; 55 | cursor: pointer; 56 | background-color: #F2F2F2; 57 | padding: 1%; 58 | margin-bottom: 5px; 59 | font-size: .9em; 60 | color: #000000; 61 | font-weight: 600; 62 | transition: all .25s linear; 63 | } 64 | .collapse-box .collapse-painel .collapse-nav:hover{ 65 | background-color: #E6E6E6; 66 | } 67 | .collapse-box .collapse-painel .collapse-nav .icon{ 68 | width: 12px; 69 | height: 10px; 70 | float: right; 71 | margin: 5px 6px; 72 | } 73 | .collapse-box .collapse-painel .collapse-nav .icon:after{ 74 | content: ""; 75 | width: 0; 76 | height: 0; 77 | border-top: 10px solid #000; 78 | border-left: 5px solid transparent; 79 | position: absolute; 80 | border-right: 5px solid transparent; 81 | } 82 | .collapse-box .collapse-painel .collapse-nav .icon:before{ 83 | content: ""; 84 | width: 0; 85 | height: 0; 86 | border-bottom: 10px solid #000; 87 | border-left: 5px solid transparent; 88 | border-right: 5px solid transparent; 89 | position: absolute; 90 | opacity: 0; 91 | } 92 | .collapse-box .collapse-painel .collapse-container{ 93 | width: 100%; 94 | height: auto; 95 | display: none; 96 | } 97 | .collapse-box .collapse-painel .check-open:checked ~ .collapse-container{ 98 | display: block; 99 | -webkit-animation: alpha 2s ease-out; 100 | } 101 | .collapse-box .collapse-painel .check-open:checked ~ .collapse-nav .icon:after{ 102 | opacity: 0; 103 | } 104 | .collapse-box .collapse-painel .check-open:checked ~ .collapse-nav .icon:before{ 105 | opacity: 1; 106 | } 107 | -------------------------------------------------------------------------------- /exemplos/dropdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dropdown Pure CSS 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |

Dropdown Pure CSS

16 | 17 |
18 | 19 | 20 |
    21 |
  • Item 1
    • 22 |
  • Item 2
    • 23 |
  • Item 3
    • 24 |
  • Item 4
    • 25 |
  • Item 5
    • 26 |
  • Item 6
    • 27 |
28 |
29 | 30 |
31 |
32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /exemplos/dropdown/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | @-webkit-keyframes animationDropdown { 35 | 0%{ 36 | height: 0px; 37 | } 38 | 100%{ 39 | height: 360px; 40 | } 41 | } 42 | @-webkit-keyframes alpha { 43 | 0%{ 44 | opacity: 0; 45 | } 46 | 100%{ 47 | opacity: 1px; 48 | } 49 | } 50 | .drop-box{ 51 | width: 350px; 52 | height: auto; 53 | float: left; 54 | position: relative; 55 | } 56 | .drop-box input[type="checkbox"]{ 57 | display: none; 58 | } 59 | .drop-box .title{ 60 | width: 340px; 61 | height: 50px; 62 | float: left; 63 | position: relative; 64 | padding-left: 10px; 65 | background-color: #2E2929; 66 | line-height: 50px; 67 | font-weight: 500; 68 | color: #FFFFFF; 69 | cursor: pointer; 70 | transition: all .3s ease; 71 | } 72 | .drop-box .title:after{ 73 | content: "\25BC"; 74 | width: 50px; 75 | height: 50px; 76 | position: absolute; 77 | top: 0; 78 | right: 0; 79 | background-color: #FF00B7; 80 | text-align: center; 81 | line-height: 55px; 82 | font-size: 1.2em; 83 | } 84 | .drop-box .title:hover:after{ 85 | content: "\25BC"; 86 | width: 50px; 87 | height: 50px; 88 | position: absolute; 89 | top: 0; 90 | right: 0; 91 | background-color: #FF1493; 92 | text-align: center; 93 | line-height: 55px; 94 | font-size: 1.2em; 95 | } 96 | .drop-box ul{ 97 | display: none; 98 | width: 100%; 99 | height: auto; 100 | float: left; 101 | position: absolute; 102 | top: 57px; 103 | background-color: #2E2929; 104 | -webkit-animation: animationDropdown .3s ease; 105 | padding: 0px; 106 | margin: 0px; 107 | list-style: none; 108 | text-decoration: none; 109 | } 110 | .drop-box li{ 111 | width: 330px; 112 | height: 40px; 113 | float: left; 114 | padding: 10px; 115 | line-height: 50px; 116 | font-weight: 300; 117 | font-size: 1em; 118 | color: #FFFFFF; 119 | -webkit-animation: alpha .5s ease; 120 | } 121 | .drop-box li:hover{ 122 | background-color: #FF1493; 123 | } 124 | .drop-box #open-drop:checked ~ ul{ 125 | display: block; 126 | } 127 | -------------------------------------------------------------------------------- /exemplos/facebook-reactions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Facebook Reactions Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Facebook Reactions Pure CSS

15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 38 | 39 | 40 | 41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /exemplos/facebook-reactions/sprite-reactions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hjdesigner/css-components/3ebefb18018fd4e479939859126911eb4cba5244/exemplos/facebook-reactions/sprite-reactions.png -------------------------------------------------------------------------------- /exemplos/menu-mobile/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu Mobile Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Menu Mobile Pure CSS

15 | 16 | 17 | 18 | 28 | 29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /exemplos/menu-mobile/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | .check-open{ 35 | display: none; 36 | } 37 | .menu-open{ 38 | width: 40px; 39 | height: 32px; 40 | display: flex; 41 | float: left; 42 | background: #000000; 43 | cursor: pointer; 44 | position: relative; 45 | transition: all .25s linear; 46 | } 47 | .menu-open:before{ 48 | content: ""; 49 | display: block; 50 | margin: 7px auto; 51 | width: 70%; 52 | height: 0.25em; 53 | background: #FFFFFF; 54 | box-shadow: 0 .45em 0 0 #FFF, 0 .9em 0 0 #FFF; 55 | } 56 | .menu-open:hover, .menu-open:focus{ 57 | background: #FA58F4; 58 | } 59 | .menu-box{ 60 | width: 300px; 61 | height: 100%; 62 | padding: 50px 10px; 63 | position: fixed; 64 | top: 0px; 65 | left: 0px; 66 | z-index: 1000; 67 | background: #333333; 68 | transform: translateX(-320px);; 69 | transition: all .25s linear;; 70 | } 71 | .menu-box .menu-fechar{ 72 | font-weight: 500; 73 | color: #FFFFFF; 74 | cursor: pointer; 75 | position: absolute; 76 | top: 10px; 77 | right: 20px; 78 | } 79 | .menu-box .menu-fechar:hover{ 80 | color: #CC0000; 81 | } 82 | .menu-box ul{ 83 | width: 100%; 84 | height: auto; 85 | float: left; 86 | margin: 0; 87 | padding: 0; 88 | list-style: none; 89 | } 90 | .menu-box li{ 91 | width: 100%; 92 | height: 40px; 93 | float: left; 94 | border-bottom: 2px solid #666666; 95 | } 96 | .menu-box a{ 97 | width: 98%; 98 | height: 40px; 99 | float: left; 100 | padding-left: 2%; 101 | text-decoration: none; 102 | line-height: 40px; 103 | font-weight: 500; 104 | font-size: 1em; 105 | color: #FFFFFF; 106 | } 107 | .menu-box a:hover{ 108 | background: #666666; 109 | } 110 | #menu:checked ~ .menu-box{ 111 | left: 0px; 112 | transform: translateX(0); 113 | transition: all .25s linear; 114 | } 115 | -------------------------------------------------------------------------------- /exemplos/menu-vertical/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Menu Vertical Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Menu Vertical Pure CSS

15 | 16 | 17 |
18 | 19 |
20 | 21 | 31 | 32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /exemplos/menu-vertical/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | @import url(http://weloveiconfonts.com/api/?family=entypo|typicons); 3 | /* typicons */ 4 | [class*="typicons-"]:before { 5 | font-family: 'Typicons', sans-serif; 6 | } 7 | *, ul{ 8 | margin: 0; 9 | padding: 0; 10 | list-style: none; 11 | } 12 | html{ 13 | width: 100%; 14 | height: 100%; 15 | } 16 | body{ 17 | font-family: 'Roboto', sans-serif;; 18 | font-size: 100%; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | .container{ 23 | width: 100%; 24 | height: auto; 25 | float: left; 26 | margin-bottom: 5%; 27 | } 28 | .row{ 29 | width: 1000px; 30 | height: auto; 31 | margin: 0 auto; 32 | position: relative; 33 | } 34 | h1{ 35 | width: 100%; 36 | height: auto; 37 | float: left; 38 | margin: 2% 0; 39 | text-align: center; 40 | font-weight: 100; 41 | color: #FF1493; 42 | font-size: 4em; 43 | } 44 | h1:before{ 45 | content: ""; 49 | } 50 | .root-menu { 51 | width: 100%; 52 | height: 600px; 53 | float: left; 54 | background-color: deepPink; 55 | position: relative; 56 | } 57 | .root-menu nav { 58 | width: 80px; 59 | height: 100%; 60 | position: absolute; 61 | top: 0px; 62 | left: 0px; 63 | background-color: #0e0f12; 64 | } 65 | .root-menu nav li, .root-menu nav i { 66 | width: 80px; 67 | height: 50px; 68 | float: left; 69 | cursor: pointer; 70 | transition: all .10s ease; 71 | } 72 | .root-menu nav li { 73 | position: relative; 74 | margin-top: 30px; 75 | } 76 | .root-menu nav li:hover { 77 | background-color: #b40e68; 78 | } 79 | .root-menu nav li:hover i { 80 | color: #FFF; 81 | } 82 | .root-menu nav i { 83 | line-height: 60px; 84 | text-align: center; 85 | color: #878789; 86 | font-size: 50px; 87 | font-style: normal; 88 | } 89 | .root-menu nav .nav-texto { 90 | width: 100px; 91 | height: 50px; 92 | position: absolute; 93 | left: -190px; 94 | top: 0px; 95 | background-color: #b40e68; 96 | line-height: 50px; 97 | text-align: right; 98 | font-family: 'Roboto', sans-serif; 99 | color: #FFF; 100 | font-size: 1.5em; 101 | padding-right: 30px; 102 | transition: all .5s ease; 103 | } 104 | .root-menu nav li:hover .nav-texto { 105 | left: 80px; 106 | } -------------------------------------------------------------------------------- /exemplos/modal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modal Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Modal Pure CSS

15 | 16 |
17 | 18 | 19 |
20 |
21 | 22 |

Titulo modal

23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia fugiat earum

24 |
25 |
26 |
27 | 28 |
29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exemplos/modal/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | @-webkit-keyframes alpha { 35 | 0%{ 36 | opacity: 0; 37 | } 38 | 100%{ 39 | opacity: 1px; 40 | } 41 | } 42 | .box-modal{ 43 | width: 100%; 44 | } 45 | .box-modal input[type="checkbox"]{ 46 | display: none; 47 | } 48 | .box-modal .btn{ 49 | width: 100%; 50 | height: 40px; 51 | display: inline-block; 52 | background: #73b1d4; 53 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 54 | line-height: 40px; 55 | text-align: center; 56 | font-weight: 500; 57 | font-size: 1.2em; 58 | color: #FFFFFF; 59 | cursor: pointer; 60 | } 61 | .box-modal .btn:hover{ 62 | background: #679ebe; 63 | } 64 | .box-modal .modal-content{ 65 | width: 100%; 66 | height: 100%; 67 | position: fixed; 68 | z-index: 1000; 69 | background: rgba(0, 0, 0, 0.6);; 70 | top: 0; 71 | left: 0; 72 | display: none; 73 | } 74 | .modal-in{ 75 | widht: 500px; 76 | height: 300px; 77 | background: #FFFFFF; 78 | border: 1px solid #999; 79 | position: absolute; 80 | z-index: 1000; 81 | top: 50%; 82 | left: 50%; 83 | margin: -150px 0 0 -250px; 84 | padding: 20px; 85 | } 86 | .modal-in .modal-fechar{ 87 | position: absolute; 88 | z-index: 1002; 89 | top: -11px; 90 | right: -13px; 91 | padding: 5px 10px; 92 | cursor: pointer; 93 | background: red; 94 | border-radius: 50%; 95 | font-weight: 500; 96 | font-size: .8em; 97 | color: #FFFFFF; 98 | } 99 | #modal:checked ~ .modal-content{ 100 | display: block; 101 | -webkit-animation: alpha 1s ease-in; 102 | } 103 | -------------------------------------------------------------------------------- /exemplos/paginacao/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pagination Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Pagination Pure CSS

15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 | 23 | 24 |
25 |
    26 |
    27 |

    Pagina 1

    28 |
  • Vitrine
    • 29 |
  • Vitrine
    • 30 |
  • Vitrine
    • 31 |
    32 |
    33 |

    Pagina 2

    34 |
  • Vitrine
    • 35 |
  • Vitrine
    • 36 |
  • Vitrine
    • 37 |
    38 |
    39 |

    Pagina 3

    40 |
  • Vitrine
    • 41 |
  • Vitrine
    • 42 |
  • Vitrine
    • 43 |
    44 |
    45 |

    Pagina 4

    46 |
  • Vitrine
    • 47 |
  • Vitrine
    • 48 |
  • Vitrine
    • 49 |
    50 |
51 |
52 |
    53 |
    • 54 |
    • 55 |
    • 56 |
    • 57 |
58 |
59 |
60 |
61 | 62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /exemplos/paginacao/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | *, ul{ 3 | margin: 0; 4 | padding: 0; 5 | list-style: none; 6 | } 7 | html{ 8 | width: 100%; 9 | height: 100%; 10 | } 11 | body{ 12 | font-family: 'Roboto', sans-serif;; 13 | font-size: 100%; 14 | margin: 0; 15 | padding: 0; 16 | } 17 | .container{ 18 | width: 80%; 19 | height: auto; 20 | margin: 0 auto; 21 | } 22 | .row{ 23 | width: 1000px; 24 | height: auto; 25 | margin: 0 auto; 26 | position: relative; 27 | } 28 | h1{ 29 | width: 100%; 30 | height: auto; 31 | float: left; 32 | margin: 2% 0; 33 | text-align: center; 34 | font-weight: 100; 35 | color: #FF1493; 36 | font-size: 4em; 37 | } 38 | h1:before{ 39 | content: ""; 43 | } 44 | input { 45 | display: none; 46 | } 47 | 48 | .box-paginacao { 49 | width: 100%; 50 | height: auto; 51 | float: left; 52 | } 53 | .box-paginacao h2 { 54 | width: 100%; 55 | height: auto; 56 | float: left; 57 | margin: 0 0 50px; 58 | text-align: center; 59 | font-family: 'Roboto', sans-serif; 60 | font-weight: 400; 61 | font-size: 1.3em; 62 | color: #3CA3F2; 63 | } 64 | .box-paginacao .box-vitrines { 65 | width: 100%; 66 | height: 371px; 67 | float: left; 68 | overflow: hidden; 69 | position: relative; 70 | } 71 | .box-paginacao ul { 72 | width: 100%; 73 | height: auto; 74 | float: left; 75 | } 76 | .box-paginacao ul li { 77 | width: 250px; 78 | height: 250px; 79 | float: left; 80 | margin: 0 0 10px 60px; 81 | border: 1px solid #c0c8c9; 82 | border-radius: 10px; 83 | line-height: 250px; 84 | text-align: center; 85 | font-family: 'Roboto', sans-serif; 86 | font-weight: 400; 87 | font-size: 1.3em; 88 | color: #2E2929; 89 | } 90 | .box-paginacao .vitrine1, 91 | .box-paginacao .vitrine2, 92 | .box-paginacao .vitrine3, 93 | .box-paginacao .vitrine4 { 94 | width: 100%; 95 | height: 336px; 96 | float: left; 97 | margin-bottom: 33px; 98 | } 99 | 100 | .btn-paginacao { 101 | width: 100%; 102 | height: auto; 103 | float: left; 104 | margin-top: 10px; 105 | display: flex; 106 | align-items: center; 107 | justify-content: center; 108 | position: absolute; 109 | z-index: 10; 110 | left: 0; 111 | bottom: 0; 112 | background-color: #FFF; 113 | } 114 | .btn-paginacao ul { 115 | width: auto; 116 | height: auto; 117 | } 118 | .btn-paginacao ul li { 119 | width: 30px; 120 | height: 30px; 121 | float: left; 122 | margin: 0 5px 0 0; 123 | border: 0; 124 | } 125 | .btn-paginacao ul li:last-child { 126 | margin: 0; 127 | } 128 | .btn-paginacao ul li label { 129 | width: 100%; 130 | height: 30px; 131 | float: left; 132 | text-align: center; 133 | line-height: 30px; 134 | font-family: 'Roboto', sans-serif; 135 | font-weight: 400; 136 | font-size: 1em; 137 | color: #2E2929; 138 | cursor: pointer; 139 | border-radius: 3px; 140 | transition: background-color .25s ease-in-out; 141 | } 142 | .btn-paginacao ul li label:hover { 143 | background-color: #FF1493; 144 | color: #FFF; 145 | } 146 | 147 | #paginacao1:checked ~ .box-vitrines > ul { 148 | transition: transform .7s ease-in-out; 149 | transform: translateY(0px); 150 | } 151 | 152 | #paginacao1:checked ~ .box-vitrines label[for="paginacao1"] { 153 | background-color: #FF1493; 154 | color: #FFF; 155 | } 156 | 157 | #paginacao2:checked ~ .box-vitrines > ul { 158 | transition: transform .7s ease-in-out; 159 | transform: translateY(-369px); 160 | } 161 | 162 | #paginacao2:checked ~ .box-vitrines label[for="paginacao2"] { 163 | background-color: #FF1493; 164 | color: #FFF; 165 | } 166 | 167 | #paginacao3:checked ~ .box-vitrines > ul { 168 | transition: transform .7s ease-in-out; 169 | transform: translateY(-738px); 170 | } 171 | 172 | #paginacao3:checked ~ .box-vitrines label[for="paginacao3"] { 173 | background-color: #FF1493; 174 | color: #FFF; 175 | } 176 | 177 | #paginacao4:checked ~ .box-vitrines > ul { 178 | transition: transform .7s ease-in-out; 179 | transform: translateY(-1107px); 180 | } 181 | 182 | #paginacao4:checked ~ .box-vitrines label[for="paginacao4"] { 183 | background-color: #FF1493; 184 | color: #FFF; 185 | } -------------------------------------------------------------------------------- /exemplos/preloaders/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Preloaders Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Preloaders Pure CSS

15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /exemplos/preloaders/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | .line{ 35 | width: 100%; 36 | height: auto; 37 | float: left; 38 | margin-bottom: 20px; 39 | } 40 | @-webkit-keyframes preloader1 { 41 | 0%{ 42 | transform: rotate(0deg); 43 | } 44 | 100%{ 45 | transform: rotate(360deg); 46 | } 47 | } 48 | @-webkit-keyframes preloader2after { 49 | 0%{ 50 | transform: rotate(0deg); 51 | } 52 | 50%{ 53 | transform: rotate(190deg); 54 | } 55 | 100%{ 56 | transform: rotate(0deg); 57 | } 58 | } 59 | @-webkit-keyframes preloader2before { 60 | 0%{ 61 | transform: rotate(0deg); 62 | } 63 | 50%{ 64 | transform: rotate(190deg); 65 | } 66 | 100%{ 67 | transform: rotate(0deg); 68 | } 69 | } 70 | @-webkit-keyframes preloader3 { 71 | 0%{ 72 | transform: scale(.2); 73 | } 74 | 50%{ 75 | transform: scale(1); 76 | } 77 | 100%{ 78 | transform: scale(.2); 79 | } 80 | } 81 | @-webkit-keyframes preloader3b { 82 | 0%{ 83 | transform: scale(1); 84 | } 85 | 50%{ 86 | transform: scale(.2); 87 | } 88 | 100%{ 89 | transform: scale(1); 90 | } 91 | } 92 | @-webkit-keyframes preloader4 { 93 | 0%{ 94 | transform: rotate(0deg); 95 | } 96 | 100%{ 97 | transform: rotate(360deg); 98 | } 99 | } 100 | /* PRELOADER 1 */ 101 | .box-preloaders{ 102 | width: 100%; 103 | height: auto; 104 | float: left; 105 | } 106 | .box-preloaders .preloaders-1{ 107 | width: 200px; 108 | height: 200px; 109 | float: left; 110 | margin-right: 150px; 111 | position: relative; 112 | border: 10px solid #2E2929; 113 | border-radius: 50%; 114 | } 115 | .box-preloaders .preloaders-1:after{ 116 | content: ""; 117 | width: 200px; 118 | height: 200px; 119 | position: absolute; 120 | top: -10px; 121 | left: -11px; 122 | border: 10px solid transparent; 123 | border-right: 12px solid #FF1493; 124 | border-radius: 50%; 125 | -webkit-animation: preloader1 1s linear infinite; 126 | } 127 | /* PRELOADER 2 */ 128 | .box-preloaders .preloaders-2{ 129 | width: 200px; 130 | height: 200px; 131 | float: left; 132 | margin-right: 150px; 133 | position: relative; 134 | border: 10px solid #2E2929; 135 | border-radius: 50%; 136 | } 137 | .box-preloaders .preloaders-2:after{ 138 | content: ""; 139 | width: 200px; 140 | height: 200px; 141 | position: absolute; 142 | top: -10px; 143 | left: -11px; 144 | border: 10px solid transparent; 145 | border-right: 12px solid #FF1493; 146 | border-radius: 50%; 147 | -webkit-animation: preloader2after 1s cubic-bezier(0.49, 0, 0.46, 1) infinite; 148 | } 149 | .box-preloaders .preloaders-2:before{ 150 | content: ""; 151 | width: 200px; 152 | height: 200px; 153 | position: absolute; 154 | top: -10px; 155 | left: -11px; 156 | border: 10px solid transparent; 157 | border-left: 12px solid #FF1493; 158 | border-radius: 50%; 159 | -webkit-animation: preloader2before 1s cubic-bezier(0.49, 0, 0.46, 1) infinite; 160 | } 161 | /* PRELOADER 3 */ 162 | .box-preloaders .preloaders-3{ 163 | width: 230px; 164 | height: 50px; 165 | float: left; 166 | margin-top: 80px; 167 | } 168 | .box-preloaders .preloaders-3 span{ 169 | width: 50px; 170 | height: 50px; 171 | float: left; 172 | margin-right: 30px; 173 | background-color: #2E2929; 174 | border-radius: 50px; 175 | } 176 | .box-preloaders .preloaders-3 span:last-child{ 177 | margin-right: 0; 178 | } 179 | .box-preloaders .preloaders-3 span:nth-child(1){ 180 | -webkit-animation: preloader3 1s cubic-bezier(0.49, 0, 0.46, 1) infinite; 181 | } 182 | .box-preloaders .preloaders-3 span:nth-child(2){ 183 | -webkit-animation: preloader3b 1s cubic-bezier(0.49, 0, 0.46, 1) infinite; 184 | } 185 | .box-preloaders .preloaders-3 span:nth-child(3){ 186 | -webkit-animation: preloader3 1s cubic-bezier(0.49, 0, 0.46, 1) infinite; 187 | } 188 | /* PRELOADER 4 */ 189 | .box-preloaders .preloaders-4{ 190 | width: 200px; 191 | height: 200px; 192 | float: left; 193 | position: relative; 194 | border-radius: 50%; 195 | border-right: 20px solid #FF1493; 196 | border-left: 20px solid transparent; 197 | border-top: 20px solid transparent; 198 | border-bottom: 20px solid transparent; 199 | -webkit-animation: preloader4 1s linear infinite; 200 | } 201 | .box-preloaders .preloaders-4:before{ 202 | content: ""; 203 | width: 100px; 204 | height: 100px; 205 | position: absolute; 206 | left: 50px; 207 | top: 50px; 208 | background-color: #2E2929; 209 | border-radius: 50%; 210 | } 211 | -------------------------------------------------------------------------------- /exemplos/tab/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tab Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Tab Pure CSS

15 | 16 |
17 |
18 | 19 | 20 |
21 |

Painel 1

22 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia fugiat earum

23 |
24 |
25 |
26 | 27 | 28 |
29 |

Painel 2

30 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia fugiat earum

31 |
32 |
33 |
34 | 35 | 36 |
37 |

Painel 3

38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia fugiat earum

39 |
40 |
41 |
42 | 43 | 44 |
45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /exemplos/tab/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | @-webkit-keyframes alpha { 35 | 0%{ 36 | opacity: 0; 37 | } 38 | 100%{ 39 | opacity: 1px; 40 | } 41 | } 42 | .tab-box{ 43 | width: 100%; 44 | } 45 | .tab-box .tab-open{ 46 | display: none; 47 | } 48 | .tab-box .tab-painel{ 49 | min-width: 100px; 50 | display: inline-block; 51 | } 52 | .tab-box .tab-painel .tab-nav{ 53 | width: 100%; 54 | display: inline-block; 55 | cursor: pointer; 56 | border: 1px solid #666; 57 | line-height: 30px; 58 | text-align: center; 59 | font-weight: 500; 60 | font-size: .9em; 61 | color: #2E2929; 62 | } 63 | .tab-box .tab-painel .tab-nav:hover{ 64 | background-color: #F2F2F2; 65 | } 66 | .tab-box .tab-inner{ 67 | width: 98%; 68 | height: auto; 69 | padding: 1%; 70 | margin-top: 5px; 71 | display: inline-block; 72 | background-color: #F2F2F2; 73 | position: absolute; 74 | left: 0; 75 | opacity: 0; 76 | visibility: hidden; 77 | } 78 | .tab-box .tab-open:checked ~ .tab-inner{ 79 | opacity: 1; 80 | visibility: visible; 81 | -webkit-animation: alpha 2s ease; 82 | } 83 | .tab-box .tab-open:checked ~ label{ 84 | background-color: #F2F2F2; 85 | } 86 | -------------------------------------------------------------------------------- /exemplos/text-filter-background/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Text Filter Background Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Text Filter Background Pure CSS

15 | 16 | 17 |
18 | STAR WARS CELEBRATION 19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /exemplos/text-filter-background/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | .texto-filtro{ 35 | widht: 100%; 36 | height: auto; 37 | float: left; 38 | text-align: center; 39 | font-size: 9em; 40 | font-weight: 900; 41 | background: url('http://wallpapercave.com/wp/4W0KpiW.jpg'); 42 | background-size: cover; 43 | -webkit-background-clip: text; 44 | -webkit-text-fill-color: transparent; 45 | } 46 | -------------------------------------------------------------------------------- /exemplos/timeline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Timeline Pure CSS 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |

Timeline Pure CSS

16 | 17 |
18 | 19 |
20 |
21 |

Titulo

22 |

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.

23 |
24 |
25 | 26 |
27 |
28 |

Titulo

29 |

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.

30 |
31 |
32 | 33 |
34 |
35 |

Titulo

36 |

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.

37 |

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.

38 |
39 |
40 | 41 |
42 |
43 |

Titulo

44 |

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.

45 |
46 |
47 | 48 |
49 |
50 |
51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /exemplos/timeline/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | .timeline{ 35 | width: 100%; 36 | height: auto; 37 | float: left; 38 | padding: 50px 0; 39 | position: relative; 40 | background-color: #c0c8c9; 41 | } 42 | .timeline:before{ 43 | content: ""; 44 | width: 10px; 45 | height: 100%; 46 | position: absolute; 47 | top: 0px; 48 | left: 50%; 49 | background-color: #9ca3a4; 50 | } 51 | .timeline .timeline-item{ 52 | width: 100%; 53 | height: auto; 54 | float: left; 55 | margin-bottom: 40px; 56 | } 57 | .timeline .timeline-item:last-child{ 58 | margin-bottom: 0px; 59 | } 60 | .timeline .timeline-item .timeline-texto{ 61 | width: 350px; 62 | height: auto; 63 | padding: 20px; 64 | background-color: #FF1493; 65 | position: relative; 66 | } 67 | .timeline .timeline-item .timeline-texto.timeline-left{ 68 | float: left; 69 | margin-left: 60px; 70 | } 71 | .timeline .timeline-item .timeline-texto.timeline-left:before{ 72 | content: ""; 73 | width: 50px; 74 | height: 50px; 75 | position: absolute; 76 | right: -80px; 77 | bottom: 13px; 78 | background-color: #980b0b; 79 | border-radius: 50%; 80 | } 81 | .timeline .timeline-item .timeline-texto.timeline-left:after{ 82 | content: ""; 83 | width: 35px; 84 | height: 35px; 85 | position: absolute; 86 | right: -73px; 87 | bottom: 20px; 88 | background-color: #cd1717; 89 | border-radius: 50%; 90 | } 91 | .timeline .timeline-item .timeline-texto.timeline-right{ 92 | float: right; 93 | margin-right: 60px; 94 | } 95 | .timeline .timeline-item .timeline-texto.timeline-right:before{ 96 | content: ""; 97 | width: 50px; 98 | height: 50px; 99 | position: absolute; 100 | left: -72px; 101 | bottom: 13px; 102 | background-color: #980b0b; 103 | border-radius: 50%; 104 | } 105 | .timeline .timeline-item .timeline-texto.timeline-right:after{ 106 | content: ""; 107 | width: 35px; 108 | height: 35px; 109 | position: absolute; 110 | left: -64px; 111 | bottom: 20px; 112 | background-color: #cd1717; 113 | border-radius: 50%; 114 | } 115 | .timeline .timeline-item .timeline-texto h2{ 116 | width: 100%; 117 | height: auto; 118 | float: left; 119 | margin-bottom: 20px; 120 | font-size: 1.2em; 121 | color: #FFFFFF; 122 | font-weight: 500; 123 | } 124 | .timeline .timeline-item .timeline-texto p{ 125 | width: 100%; 126 | height: auto; 127 | float: left; 128 | margin-bottom: 10px; 129 | font-size: 1em; 130 | color: #FFFFFF; 131 | font-weight: 300; 132 | } 133 | .timeline .timeline-item .timeline-texto p:last-child{ 134 | margin-bottom: 0px; 135 | } 136 | -------------------------------------------------------------------------------- /exemplos/tooltips/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltips Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Tooltips Pure CSS

15 | 16 |
17 | Passe o mouse e veja a magica. 18 |
19 | 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /exemplos/tooltips/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | body{ 3 | font-family: 'Roboto', sans-serif;; 4 | font-size: 100%; 5 | } 6 | .container{ 7 | width: 100%; 8 | height: auto; 9 | float: left; 10 | margin-bottom: 5%; 11 | } 12 | .row{ 13 | width: 1000px; 14 | height: auto; 15 | margin: 0 auto; 16 | position: relative; 17 | } 18 | h1{ 19 | width: 100%; 20 | height: auto; 21 | float: left; 22 | margin: 2% 0; 23 | text-align: center; 24 | font-weight: 100; 25 | color: #FF1493; 26 | font-size: 4em; 27 | } 28 | h1:before{ 29 | content: ""; 33 | } 34 | @-webkit-keyframes alpha { 35 | 0%{ 36 | opacity: 0; 37 | } 38 | 100%{ 39 | opacity: 1; 40 | } 41 | } 42 | .box-tooltips{ 43 | width: 350px; 44 | height: 50px; 45 | float: left; 46 | margin: 50px 0; 47 | position: relative; 48 | background-color: #2E2929; 49 | text-align: center; 50 | line-height: 50px; 51 | color: #FFFFFF; 52 | font-weight: 300; 53 | font-size: 1.2em; 54 | } 55 | .box-tooltips:after{ 56 | display: none; 57 | } 58 | .box-tooltips:hover:after{ 59 | display: block; 60 | content: attr(data-title); 61 | position: absolute; 62 | top: 60px; 63 | left: 72px; 64 | font-weight: 300; 65 | color: #2E2929; 66 | font-size: 1.2em; 67 | -webkit-animation: alpha 2s ease-out; 68 | } 69 | -------------------------------------------------------------------------------- /exemplos/veja-mais/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Veja Mais Pure CSS 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Veja Mais Pure CSS

15 | 16 | 17 |
18 | 19 | 20 | 21 |
22 | 23 |

Aqui é Body Builder

24 | 25 |

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!

26 | 27 |

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

28 | 29 |

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.

30 | 31 |

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.

32 | 33 |

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.

34 | 35 |

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.

36 | 37 |

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.

38 | 39 |

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í.

40 | 41 |

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.

42 | 43 |

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.

44 | 45 |

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.

46 | 47 |
48 |
49 |
50 |
51 | 52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /exemplos/veja-mais/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100); 2 | *, ul{ 3 | margin: 0; 4 | padding: 0; 5 | list-style: none; 6 | } 7 | html{ 8 | width: 100%; 9 | height: 100%; 10 | } 11 | body{ 12 | font-family: 'Roboto', sans-serif;; 13 | font-size: 100%; 14 | margin: 0; 15 | padding: 0; 16 | } 17 | .container{ 18 | width: 80%; 19 | height: auto; 20 | margin: 0 auto; 21 | } 22 | .row{ 23 | width: 1000px; 24 | height: auto; 25 | margin: 0 auto; 26 | position: relative; 27 | } 28 | h1{ 29 | width: 100%; 30 | height: auto; 31 | float: left; 32 | margin: 2% 0; 33 | text-align: center; 34 | font-weight: 100; 35 | color: #FF1493; 36 | font-size: 4em; 37 | } 38 | h1:before{ 39 | content: ""; 43 | } 44 | input[name="input-see-more"] { 45 | display: none; 46 | } 47 | 48 | .box-see-more { 49 | width: 100%; 50 | height: 300px; 51 | float: left; 52 | overflow: hidden; 53 | position: relative; 54 | } 55 | .box-see-more h2 { 56 | width: 100%; 57 | height: auto; 58 | float: left; 59 | margin: 20px 0; 60 | text-align: center; 61 | font-family: "Roboto",sans-serif; 62 | font-weight: 400; 63 | font-size: 2em; 64 | } 65 | .box-see-more p { 66 | width: 100%; 67 | height: auto; 68 | float: left; 69 | margin: 0 0 10px; 70 | text-align: justify; 71 | font-family: "Roboto",sans-serif; 72 | font-weight: 400; 73 | font-size: 1em; 74 | } 75 | .box-see-more .btn-see-more { 76 | width: 100%; 77 | height: 58px; 78 | float: left; 79 | position: absolute; 80 | bottom: 0; 81 | left: 0; 82 | background-color: #FFF; 83 | } 84 | .box-see-more .btn-see-more .btn-see-more-open, 85 | .box-see-more .btn-see-more .btn-see-more-closed { 86 | width: 200px; 87 | height: 50px; 88 | margin: 0 auto; 89 | } 90 | .box-see-more .btn-see-more .btn-see-more-open label, 91 | .box-see-more .btn-see-more .btn-see-more-closed label { 92 | width: 100%; 93 | height: 50px; 94 | float: left; 95 | background-color: #3CA3F2; 96 | border-bottom: 8px solid #3388CE; 97 | text-align: center; 98 | text-transform: uppercase; 99 | line-height: 50px; 100 | font-family: "Roboto",sans-serif; 101 | font-weight: 400; 102 | color: #FFFFFF; 103 | font-size: 1.3em; 104 | cursor: pointer; 105 | transition: all .3s ease-in-out; 106 | } 107 | .box-see-more .btn-see-more .btn-see-more-open label:hover, 108 | .box-see-more .btn-see-more .btn-see-more-closed label:hover { 109 | background-color: #2E2929; 110 | border-bottom: 8px solid #211E1D; 111 | } 112 | .box-see-more .btn-see-more .btn-see-more-closed { 113 | display: none; 114 | } 115 | 116 | #see-more-open:checked ~ .box-see-more { 117 | height: auto; 118 | } 119 | 120 | #see-more-open:checked ~ .box-see-more .btn-see-more-open { 121 | display: none; 122 | } 123 | 124 | #see-more-open:checked ~ .box-see-more .btn-see-more-closed { 125 | display: block; 126 | } 127 | 128 | #see-more-closed:checked ~ .box-see-more { 129 | height: 300px; 130 | } 131 | 132 | #see-more-closed:checked ~ .box-see-more .btn-see-more-closed { 133 | display: none; 134 | } 135 | 136 | #see-more-closed:checked ~ .box-see-more .btn-see-more-open { 137 | display: block; 138 | } 139 | --------------------------------------------------------------------------------