├── .gitignore ├── flags-brazil-website.jpg ├── .vercelignore ├── .editorconfig ├── src ├── flags │ ├── espirito-santo.styl │ ├── minas-gerais.styl │ ├── acre.styl │ ├── para.styl │ ├── paraiba.styl │ ├── mato-grosso-sul.styl │ ├── brasil.styl │ ├── bahia.styl │ ├── parana.styl │ ├── piaui.styl │ ├── roraima.styl │ ├── maranhao.styl │ ├── rondonia.styl │ ├── mato-grosso.styl │ └── distrito-federal.styl ├── flagsbrasil.styl └── main.styl ├── LICENSE ├── package.json ├── .all-contributorsrc ├── dist ├── main.css └── flagsbrasil.css ├── CONTRIBUTING.md ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | npm-debug.log 4 | package-lock.json 5 | -------------------------------------------------------------------------------- /flags-brazil-website.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/welksonramos/flags-brazil/HEAD/flags-brazil-website.jpg -------------------------------------------------------------------------------- /.vercelignore: -------------------------------------------------------------------------------- 1 | src 2 | CONTRIBUTING.md 3 | LICENSE 4 | README.md 5 | flags-brazil-website.jpg 6 | .editorconfig 7 | .gitignore 8 | .all-contributorsrc 9 | package-lock.json 10 | package.json 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /src/flags/espirito-santo.styl: -------------------------------------------------------------------------------- 1 | /*! ESPÍRITO SANTO - ES */ 2 | 3 | //Color 4 | 5 | $azul = #00ADEF 6 | $rosa = #F7ADAE 7 | $branco = #FFF 8 | 9 | .flag-es 10 | background: linear-gradient( 11 | $azul 33.3% , 12 | $branco 33.3%, 13 | $branco 66.6%, 14 | $rosa 66.6%) 15 | -------------------------------------------------------------------------------- /src/flags/minas-gerais.styl: -------------------------------------------------------------------------------- 1 | /*! MINAS GERAIS - MG */ 2 | 3 | // cores 4 | $branco = white 5 | $vermelho = red 6 | 7 | .flag-mg 8 | background $branco 9 | display flex 10 | align-items center 11 | justify-content center 12 | 13 | &:before 14 | border-left: 60px solid transparent 15 | border-right: 60px solid transparent 16 | border-bottom: 90px solid $vermelho 17 | 18 | -------------------------------------------------------------------------------- /src/flagsbrasil.styl: -------------------------------------------------------------------------------- 1 | /*! 2 | * 3 | * Flags Brazil 4 | * 5 | */ 6 | 7 | .flag 8 | width 300px 9 | height 200px 10 | box-shadow 8px 8px 0 rgba(0,0,0,0.2) 11 | margin: auto 12 | font normal normal 16px/1.5 Arial,sans-serif 13 | position: relative 14 | 15 | &:before, 16 | &:after 17 | content '' 18 | display block 19 | position absolute 20 | 21 | @import 'flags/*' 22 | -------------------------------------------------------------------------------- /src/flags/acre.styl: -------------------------------------------------------------------------------- 1 | /*! ACRE - AC */ 2 | 3 | // Colors 4 | $verde = #019f6f 5 | $amarelo = #fee63c 6 | $vermelho = #c0392b 7 | 8 | .flag-ac 9 | background-image linear-gradient( 10 | -213.5deg, 11 | $amarelo 50%, 12 | $verde 50% 13 | ) 14 | 15 | &:before 16 | content '\2605' 17 | color $vermelho 18 | font-size $size = 50px 19 | line-height: $size 20 | margin 15px 0 0 15px 21 | -------------------------------------------------------------------------------- /src/flags/para.styl: -------------------------------------------------------------------------------- 1 | /*! PARÁ - PA */ 2 | 3 | // Colors 4 | $branco = rgba(255, 255, 255, 1) 5 | $vermelho = rgba(231, 76, 60,1) 6 | $azul = rgba(41, 128, 185,1) 7 | 8 | .flag-pa 9 | background-image linear-gradient( 10 | 34deg, 11 | $vermelho 41%, 12 | $branco 41%, 13 | $branco 58%, 14 | $vermelho 58% 15 | ) 16 | 17 | &:before 18 | content '\2605' 19 | color $azul 20 | font-size 40px 21 | width 100% 22 | height 100% 23 | display: flex 24 | align-items center 25 | justify-content center 26 | -------------------------------------------------------------------------------- /src/flags/paraiba.styl: -------------------------------------------------------------------------------- 1 | /*! PARAÍBA - PB */ 2 | 3 | // Colors 4 | $branco = rgba(255, 255, 255, 1) 5 | $vermelho = rgba(231, 76, 60, 1) 6 | $preto = rgba(0, 0, 0, 1) 7 | 8 | .flag-pb 9 | background-image linear-gradient( 10 | to right, 11 | $preto, 12 | $preto 30%, 13 | $vermelho 30% 14 | ) 15 | 16 | &:before 17 | content 'NEGO' 18 | color $branco 19 | font-size 30px 20 | display flex 21 | height 100% 22 | align-items center 23 | justify-content center 24 | width 210px 25 | margin-left 90px 26 | -------------------------------------------------------------------------------- /src/flags/mato-grosso-sul.styl: -------------------------------------------------------------------------------- 1 | /*! MATO GROSSO DO SUL - MS */ 2 | 3 | // Colors 4 | $branco = rgba(255,255,255,1) 5 | $verde = rgba(1,159,111,1) 6 | $azul = rgba(41, 128, 185,1) 7 | $amarelo = rgba(254,230,60,1) 8 | 9 | .flag-ms 10 | background $branco 11 | background-image: linear-gradient(-224.5deg, $verde 31%, transparent 30%), 12 | linear-gradient(-44deg, $azul 58%, transparent 30%) 13 | position: relative 14 | 15 | &:before 16 | position: absolute 17 | content '\2605' 18 | color $amarelo 19 | font-size $size = 60px 20 | line-height $size 21 | bottom: 25px 22 | right: 25px 23 | -------------------------------------------------------------------------------- /src/flags/brasil.styl: -------------------------------------------------------------------------------- 1 | /*! BRASIL - BR */ 2 | 3 | .flag-br 4 | background: #fee63c 5 | background-image: linear-gradient(30deg, #019f6f 30%, transparent 30%), 6 | linear-gradient(-30deg, #019f6f 30%, transparent 30%), 7 | linear-gradient(210deg, #019f6f 30%, transparent 30%), 8 | linear-gradient(-210deg, #019f6f 30%, transparent 30%) 9 | 10 | &:before 11 | width 100px 12 | height 100px 13 | margin 50px 0 0 100px 14 | background #2765ae radial-gradient( 15 | circle at 0 175px, 16 | transparent 71%, white 72%, 17 | #fff 78%, 18 | transparent 79% 19 | ) 20 | border-radius 50% 21 | -------------------------------------------------------------------------------- /src/flags/bahia.styl: -------------------------------------------------------------------------------- 1 | /*! BAHIA - BA */ 2 | 3 | // Colors 4 | $branco = rgba(255, 255, 255, 1) 5 | $vermelho = rgba(231, 76, 60,1) 6 | $azul = rgba(41, 128, 185,1) 7 | 8 | .flag-ba 9 | background-image repeating-linear-gradient( 10 | to bottom, 11 | $branco, 12 | $branco 25%, 13 | $vermelho 25%, 14 | $vermelho 50% 15 | ) 16 | 17 | &:before 18 | background $azul 19 | width 100px 20 | height 100px 21 | 22 | &:after 23 | font-size 2.7rem 24 | margin 18px 0 0 12px 25 | border-bottom: 65px solid $branco 26 | border-left: 40px solid transparent 27 | border-right: 40px solid transparent 28 | -------------------------------------------------------------------------------- /src/flags/parana.styl: -------------------------------------------------------------------------------- 1 | /*! PARANÁ - PR */ 2 | 3 | // Colors 4 | $azul = #3F51B5 5 | $branco = #fff 6 | $verde = #008c43 7 | 8 | .flag-pr 9 | background-image linear-gradient( 10 | 34deg, 11 | $verde 30%, 12 | $branco 0, 13 | $branco 75%, 14 | $verde 50% 15 | ) 16 | 17 | &:before 18 | background $azul radial-gradient( 19 | circle at 0 175px, 20 | transparent 71%, $branco 72%, 21 | $branco 78%, 22 | transparent 79% 23 | ) 24 | border-radius 50% 25 | color $azul 26 | content '' 27 | height 100px 28 | margin 40px 0 0 100px 29 | position absolute 30 | width 100px 31 | -------------------------------------------------------------------------------- /src/flags/piaui.styl: -------------------------------------------------------------------------------- 1 | /*! PIAUÍ - PI */ 2 | 3 | // Colors 4 | $azul-escuro = rgba(31, 58, 147,1) 5 | $branco = rgba(255,255,255,1) 6 | $amarelo = rgba(254,230,60,1) 7 | $verde = rgba(1,159,111,1) 8 | $width = 90px 9 | $height = 78px 10 | 11 | .flag-pi 12 | background-image repeating-linear-gradient( 13 | to bottom, 14 | $verde, 15 | $verde 16px, 16 | $amarelo 0, 17 | $amarelo 31px 18 | ) 19 | 20 | &:before 21 | width $width 22 | height $height 23 | background $azul-escuro 24 | 25 | &:after 26 | content '\2605' 27 | color $branco 28 | font-size 52px 29 | display: flex 30 | width: $width 31 | height: $height 32 | align-items center 33 | justify-content center 34 | -------------------------------------------------------------------------------- /src/flags/roraima.styl: -------------------------------------------------------------------------------- 1 | /*! RORAIMA - RR */ 2 | 3 | // Colors 4 | $branco = rgba(255, 255, 255, 1) 5 | $verde = rgba(1,159,111,1) 6 | $vermelho = rgba(231, 76, 60,1) 7 | $azul = rgba(41, 128, 185,1) 8 | $amarelo = rgba(254,230,60,1) 9 | 10 | .flag-rr 11 | background-image linear-gradient( 12 | -32deg, 13 | $verde 36%, 14 | $branco 36%, 15 | $branco 65%, 16 | $azul 65% 17 | ) 18 | 19 | &:before 20 | content '\2605' 21 | color $amarelo 22 | font-size 176px 23 | display flex 24 | width 100% 25 | height 100% 26 | align-items center 27 | justify-content center 28 | margin-top -8px 29 | 30 | &:after 31 | width 300px 32 | height 10px 33 | margin-top 174px 34 | background $vermelho 35 | -------------------------------------------------------------------------------- /src/flags/maranhao.styl: -------------------------------------------------------------------------------- 1 | /*! MARANHAO - MA */ 2 | 3 | // Colors 4 | $vermelho = rgba(231, 76, 60,1) 5 | $branco = rgba(255,255,255,1) 6 | $preto = rgba(0, 0, 0,1) 7 | $azul = rgba(41, 128, 185,1) 8 | $size = 89px 9 | 10 | .flag-ma 11 | background-image repeating-linear-gradient( 12 | to bottom, 13 | $vermelho, 14 | $vermelho 11.1%, 15 | $branco 11.1%, 16 | $branco 22.2%, 17 | $preto 22.2%, 18 | $preto 33.3%, 19 | $branco 33.3%, 20 | $branco 44.4% 21 | ) 22 | 23 | &:before 24 | margin 0 25 | width $size 26 | height $size 27 | background $azul 28 | 29 | &:after 30 | content '\2605' 31 | color $branco 32 | font-size 70px 33 | width $size 34 | height $size 35 | display: flex 36 | align-items center 37 | justify-content center 38 | -------------------------------------------------------------------------------- /src/flags/rondonia.styl: -------------------------------------------------------------------------------- 1 | /*! RONDÔNIA - RO */ 2 | 3 | // Colors 4 | $azul-escuro = rgba(31, 58, 147,1) 5 | $branco = rgba(255,255,255,1) 6 | $amarelo = rgba(254,230,60,1) 7 | $verde = rgba(1,159,111,1) 8 | 9 | .flag-ro 10 | background-image linear-gradient( 11 | 0deg, 12 | $amarelo, 13 | $amarelo 50%, 14 | $azul-escuro 50%, 15 | $azul-escuro 100% 16 | ) 17 | 18 | &:before 19 | border-left 150px solid transparent 20 | border-right 150px solid transparent 21 | border-bottom 100px solid $verde 22 | margin-top 100px 23 | z-index: 2 24 | 25 | &:after 26 | content '\2605' 27 | color $branco 28 | font-size 70px 29 | width 100% 30 | height 100% 31 | display: flex 32 | align-items center 33 | justify-content center 34 | margin-top: -14px 35 | z-index: 1 36 | -------------------------------------------------------------------------------- /src/flags/mato-grosso.styl: -------------------------------------------------------------------------------- 1 | /*! MATO GROSSO - MT */ 2 | 3 | // Cores 4 | $azul-escuro = rgba(31, 58, 147,1) 5 | $branco = rgba(255,255,255,1) 6 | $amarelo = rgba(254,230,60,1) 7 | $verde = rgba(1,159,111,1) 8 | 9 | .flag-mt 10 | margin 0 auto 11 | background $branco 12 | background-image linear-gradient(30deg, $azul-escuro 30%, transparent 30%), 13 | linear-gradient(-30deg, $azul-escuro 30%, transparent 30%), 14 | linear-gradient(210deg, $azul-escuro 30%, transparent 30%), 15 | linear-gradient(-210deg, $azul-escuro 30%, transparent 30%) 16 | 17 | &:before 18 | width 100px 19 | height 100px 20 | margin 50px 0 0 100px 21 | background $verde 22 | border-radius 50% 23 | 24 | &:after 25 | content '\2605' 26 | color $amarelo 27 | font-size 93px 28 | width 300px 29 | height: 200px 30 | display flex 31 | margin-top -3px 32 | justify-content: center 33 | align-items: center 34 | -------------------------------------------------------------------------------- /src/flags/distrito-federal.styl: -------------------------------------------------------------------------------- 1 | /*! DISTRITO FEDERAL - DF */ 2 | 3 | .flag-df 4 | display flex 5 | align-items center 6 | justify-content center 7 | 8 | &:before 9 | width 120px 10 | height 120px 11 | background-size cover 12 | background-color: #00933D 13 | background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cpath fill='%23f8c300' d='M213.439 213.439H109.684L83.992 239.13H36.561v-25.691L0 250l36.561 36.561V260.87h47.431l25.692 25.691h103.755L176.877 250z'/%3E%3Cpath fill='%23f8c300' d='M286.561 213.439V109.684L260.87 83.992V36.561h25.691L250 0l-36.561 36.561h25.691v47.431l-25.691 25.692v103.755L250 176.877z'/%3E%3Cpath fill='%23f8c300' d='M213.439 286.561v103.755l25.691 25.692v47.431h-25.691L250 500l36.561-36.561H260.87v-47.431l25.691-25.692V286.561L250 323.123z'/%3E%3Cpath fill='%23f8c300' d='M500 250l-36.561-36.561v25.691h-47.431l-25.692-25.691H286.561L323.123 250l-36.562 36.561h103.755l25.692-25.691h47.431v25.691z'/%3E%3C/svg%3E") 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Welkson Ramos 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flags-brazil", 3 | "version": "0.1.3", 4 | "description": "Coleção de bandeiras dos Estados Federativos do Brasil feitas somente com CSS", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "build:css": "stylus src/ --out dist/", 8 | "server": "browser-sync start --files \"*.html, dist/**/*.css\" --server", 9 | "watch:css": "onchange \"src/**/*.styl\" -- npm run build:css", 10 | "dev": "parallelshell \"npm run watch:css\" \"npm run server\"", 11 | "contrib:add": "all-contributors add", 12 | "contrib:generate": "all-contributors generate" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/welksonramos/flags-brazil.git" 17 | }, 18 | "keywords": [ 19 | "flags", 20 | "brasil", 21 | "brazil", 22 | "bandeiras" 23 | ], 24 | "author": "Welkson Ramos ", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/welksonramos/flags-brazil/issues" 28 | }, 29 | "homepage": "https://github.com/welksonramos/flags-brazil#readme", 30 | "devDependencies": { 31 | "all-contributors-cli": "^5.10.2", 32 | "browser-sync": "^2.11.1", 33 | "onchange": "^2.1.2", 34 | "parallelshell": "^3.0.2", 35 | "stylus": "^0.54.2" 36 | } 37 | } -------------------------------------------------------------------------------- /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "flags-brazil", 3 | "projectOwner": "welksonramos", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": true, 11 | "badgeTemplate": "[![All Contributors](https://img.shields.io/badge/all_contributors-<%= contributors.length %>-orange.svg?style=flat-square)](#contributors)", 12 | "contributors": [ 13 | { 14 | "login": "gustavogf", 15 | "name": "Gustavo Guimarães", 16 | "avatar_url": "https://avatars0.githubusercontent.com/u/10941616?v=4", 17 | "profile": "https://github.com/gustavogf", 18 | "contributions": [ 19 | "bug" 20 | ] 21 | }, 22 | { 23 | "login": "tiagoporto", 24 | "name": "Tiago Porto", 25 | "avatar_url": "https://avatars3.githubusercontent.com/u/3688905?v=4", 26 | "profile": "http://tiagoporto.com", 27 | "contributions": [ 28 | "bug", 29 | "code" 30 | ] 31 | }, 32 | { 33 | "login": "laisfrigerio", 34 | "name": "Lais Frigério ", 35 | "avatar_url": "https://avatars0.githubusercontent.com/u/20709086?v=4", 36 | "profile": "https://laisfrigerio.github.io", 37 | "contributions": [ 38 | "code" 39 | ] 40 | } 41 | ], 42 | "contributorsPerLine": 7 43 | } 44 | -------------------------------------------------------------------------------- /src/main.styl: -------------------------------------------------------------------------------- 1 | * 2 | box-sizing border-box 3 | 4 | html, 5 | body 6 | margin 0 7 | padding 0 8 | background rgba(255,255,255,1) 9 | font 300 normal 1.5em/1.5 'Open Sans', sans-serif 10 | 11 | .header 12 | color rgba(255,255,255,1) 13 | display block 14 | width 100% 15 | padding 20px 10px 16 | background linear-gradient(to right, rgba(1, 159, 111,1), rgba(241, 196, 15,1.0)) 17 | text-align center 18 | margin-bottom: 50px 19 | 20 | & h1 21 | color #fff 22 | margin 0 23 | padding-top 20px 24 | text-shadow 5px 5px 0 rgba(0,0,0,.2) 25 | 26 | & p 27 | font-size .6em 28 | max-width 500px 29 | text-align center 30 | margin 12px auto 31 | text-shadow 2px 2px 0 rgba(0,0,0,.2) 32 | 33 | .contribute-btn 34 | color rgba(255,255,255,1) 35 | font-size .45em 36 | border 2px solid rgba(255,255,255,1) 37 | transition .5s 38 | padding 10px 20px 39 | text-decoration none 40 | text-transform uppercase 41 | 42 | &:hover 43 | color rgba(255,255,255,0.5) 44 | border 2px solid rgba(255,255,255,0.5) 45 | 46 | .container 47 | display flex 48 | flex-flow row wrap 49 | justify-content space-between 50 | max-width 1200px 51 | margin 0 auto 52 | padding 10px 53 | 54 | > div 55 | flex 1 1 56 | margin-bottom 50px 57 | 58 | h2 59 | color rgba(0,0,0,.6) 60 | font-size .5em 61 | text-align: center 62 | 63 | .footer 64 | font-size .5em 65 | width 100% 66 | padding 5px 0 67 | background linear-gradient(to right, rgba(1, 159, 111,1), rgba(241, 196, 15,1.0)) 68 | text-align center 69 | 70 | & .heart 71 | color rgba(255,255,255,1) 72 | display inline-block 73 | width 14px 74 | height 14px 75 | margin 0 5px 76 | 77 | & > p, 78 | & a 79 | color rgba(255,255,255,1) 80 | 81 | & a 82 | text-decoration none 83 | 84 | -------------------------------------------------------------------------------- /dist/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | html, 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | background: #fff; 9 | font: 300 normal 1.5em/1.5 'Open Sans', sans-serif; 10 | } 11 | .header { 12 | color: #fff; 13 | display: block; 14 | width: 100%; 15 | padding: 20px 10px; 16 | background: linear-gradient(to right, #019f6f, #f1c40f); 17 | text-align: center; 18 | margin-bottom: 50px; 19 | } 20 | .header h1 { 21 | color: #fff; 22 | margin: 0; 23 | padding-top: 20px; 24 | text-shadow: 5px 5px 0 rgba(0,0,0,0.2); 25 | } 26 | .header p { 27 | font-size: 0.6em; 28 | max-width: 500px; 29 | text-align: center; 30 | margin: 12px auto; 31 | text-shadow: 2px 2px 0 rgba(0,0,0,0.2); 32 | } 33 | .contribute-btn { 34 | color: #fff; 35 | font-size: 0.45em; 36 | border: 2px solid #fff; 37 | transition: 0.5s; 38 | padding: 10px 20px; 39 | text-decoration: none; 40 | text-transform: uppercase; 41 | } 42 | .contribute-btn:hover { 43 | color: rgba(255,255,255,0.5); 44 | border: 2px solid rgba(255,255,255,0.5); 45 | } 46 | .container { 47 | display: flex; 48 | flex-flow: row wrap; 49 | justify-content: space-between; 50 | max-width: 1200px; 51 | margin: 0 auto; 52 | padding: 10px; 53 | } 54 | .container > div { 55 | flex: 1 1; 56 | margin-bottom: 50px; 57 | } 58 | .container h2 { 59 | color: rgba(0,0,0,0.6); 60 | font-size: 0.5em; 61 | text-align: center; 62 | } 63 | .footer { 64 | font-size: 0.5em; 65 | width: 100%; 66 | padding: 5px 0; 67 | background: linear-gradient(to right, #019f6f, #f1c40f); 68 | text-align: center; 69 | } 70 | .footer .heart { 71 | color: #fff; 72 | display: inline-block; 73 | width: 14px; 74 | height: 14px; 75 | margin: 0 5px; 76 | } 77 | .footer > p, 78 | .footer a { 79 | color: #fff; 80 | } 81 | .footer a { 82 | text-decoration: none; 83 | } 84 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contribua 2 | 3 | flags-brazil é construído usando stylus. Siga as seguintes etapas para contribuir corrigindo ou adicionando novas _`features`_. 4 | 5 | 1. Clone o repo: 6 | ``` 7 | $ git clone https://github.com/welksonramos/flags-brazil.git 8 | ``` 9 | 10 | 2. Instale as dependências: 11 | ``` 12 | $ npm install 13 | ``` 14 | 15 | 3. Crie uma nova branch para sua feature: 16 | ``` 17 | $ git checkout -b my-new-feature 18 | ``` 19 | 20 | 4. Edite o arquivo **_index.html_** adicionando a classe `flag-*` referente ao estado que você irá desenvolver. 21 | Ex: 22 | ```html 23 | 24 |
25 |
26 |

Acre

27 |

28 | ``` 29 | Aqui estão a lista de classes que você deve usar: 30 | ``` 31 | flag-ac - Acre 32 | flag-al - Alagoas 33 | flag-ap - Amapá 34 | flag-am - Amazonas 35 | flag-ba - Bahia 36 | flag-cd - Ceará 37 | flag-df - Distrito Federal 38 | flag-es - Espírito Santo 39 | flag-go - Goiás 40 | flag-ma - Maranhão 41 | flag-mt - Mato Grosso 42 | flag-ms - Mato Grosso do Sul 43 | flag-mg - Minas Gerais 44 | flag-pa - Pará 45 | flag-pb - Paraíba 46 | flag-pr - Paraná 47 | flag-pe - Pernambuco 48 | flag-pi - Piauí 49 | flag-rj - Rio de Janeiro 50 | flag-rn - Rio Grande do Norte 51 | flag-rs - Rio Grande do Sul 52 | flag-ro - Rondônia 53 | flag-rr - Roraima 54 | flag-sc - Santa Catarina 55 | flag-sp - São Paulo 56 | flag-se - Sergipe 57 | flag-to - Tocantins 58 | ``` 59 | 60 | 5. Adicione/Edite os arquivos **_stylus_** que estão em _`src/flags`_: 61 | ``` 62 | +- src 63 | +- flags 64 | |- ac.styl 65 | |- ... 66 | |-- flagsbrasil.styl 67 | ``` 68 | 69 | 6. Commit suas alterações: 70 | 71 | ``` 72 | $ git commit -m "Add flag ac" 73 | ``` 74 | 75 | 7. Envie para o branch: 76 | 77 | ``` 78 | $ git push origin my-new-feature 79 | ``` 80 | 8. Envie seu Pull Request 81 | 82 | ## Rode o projeto localmente 83 | 84 | 1. Inicie o servidor para compilar e observar as alterações :smile: 85 | ``` 86 | $ npm run dev 87 | ``` 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Flags Brazil](https://flags-brazil.now.sh/) 2 | [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors) 3 | > Bandeiras dos Estados Federativos do Brasil feitas somente com CSS 4 | 5 | ![Flags Brazil Website](flags-brazil-website.jpg) 6 | 7 | ## Features 8 | * Nada de Grunt/Gulp, somente npm scripts 9 | * :after, :before, border, linear-gradient - CSS :+1: 10 | * ~Somente 2 tags html (divs)~ 11 | * [Stylus](http://stylus-lang.com/) 12 | * [Flat UI Colors](https://flatuicolors.com/) 13 | 14 | ## Tasks 15 | ``` 16 | $ npm run build:css - Compila os arquivos .styl 17 | $ npm run server - Inicia o servidor estático e assiste os arquivos 18 | $ npm run watch:css - Assiste as mudanças nos arquivos e prepara para compilar 19 | $ npm run dev - Compila os arquivos e inicia o servidor estático 20 | $ npm run contrib:add - Add contribuidor ao arquivo .contributorsrc 21 | $ npm run contrib:generate - Atualiza lista de constribuidores no arquivo README.md 22 | ``` 23 | ## Contribua 24 | Gostaria de contribuir com o projeto? [Siga estas recomendações](CONTRIBUTING.md) :smile: 25 | 26 | ## License 27 | [MIT License](LICENSE) © 2016 Welkson Ramos 28 | 29 | ## Contributors 30 | 31 | Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)): 32 | 33 | 34 | 35 | | [Gustavo Guimarães
Gustavo Guimarães](https://github.com/gustavogf)
[🐛](https://github.com/welksonramos/flags-brazil/issues?q=author%3Agustavogf "Bug reports") | [Tiago Porto
Tiago Porto](http://tiagoporto.com)
[🐛](https://github.com/welksonramos/flags-brazil/issues?q=author%3Atiagoporto "Bug reports") [💻](https://github.com/welksonramos/flags-brazil/commits?author=tiagoporto "Code") | [Lais Frigério
Lais Frigério](https://laisfrigerio.github.io)
[💻](https://github.com/welksonramos/flags-brazil/commits?author=laisfrigerio "Code") | 36 | | :---: | :---: | :---: | 37 | 38 | 39 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 40 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Flags Brazil 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |

Flags Brazil

38 |

Coleção de Bandeiras dos Estados Federativos do Brasil desenvolvidas usando somente CSS

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

Brasil

47 |
48 | 49 | 50 |
51 |
52 |

Acre

53 |
54 | 55 | 56 |
57 |
58 |

Bahia

59 |
60 | 61 | 62 |
63 |
64 |

Distrito Federal

65 |
66 | 67 | 68 |
69 |
70 |

Espírito Santo

71 |
72 | 73 | 74 |
75 |
76 |

Maranhão

77 |
78 | 79 | 80 |
81 |
82 |

Minas Gerais

83 |
84 | 85 | 86 |
87 |
88 |

Mato Grosso

89 |
90 | 91 | 92 |
93 |
94 |

Mato Grosso do Sul

95 |
96 | 97 | 98 | 99 |
100 |
101 |

Pará

102 |
103 | 104 | 105 |
106 |
107 |

Paraíba

108 |
109 | 110 | 111 |
112 |
113 |

Paraná

114 |
115 | 116 | 117 |
118 |
119 |

Piauí

120 |
121 | 122 | 123 |
124 |
125 |

Rondônia

126 |
127 | 128 | 129 |
130 |
131 |

Roraima

132 |
133 |
134 | 135 | 138 | 139 | 140 | 141 | 142 | 143 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /dist/flagsbrasil.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * Flags Brazil 4 | * 5 | */ 6 | .flag { 7 | width: 300px; 8 | height: 200px; 9 | box-shadow: 8px 8px 0 rgba(0,0,0,0.2); 10 | margin: auto; 11 | font: normal normal 16px/1.5 Arial, sans-serif; 12 | position: relative; 13 | } 14 | .flag:before, 15 | .flag:after { 16 | content: ''; 17 | display: block; 18 | position: absolute; 19 | } 20 | /* ACRE - AC */ 21 | .flag-ac { 22 | background-image: linear-gradient(-213.5deg, #fee63c 50%, #019f6f 50%); 23 | } 24 | .flag-ac:before { 25 | content: '\2605'; 26 | color: #c0392b; 27 | font-size: 50px; 28 | line-height: 50px; 29 | margin: 15px 0 0 15px; 30 | } 31 | /* BAHIA - BA */ 32 | .flag-ba { 33 | background-image: repeating-linear-gradient(to bottom, #fff, #fff 25%, #e74c3c 25%, #e74c3c 50%); 34 | } 35 | .flag-ba:before { 36 | background: #2980b9; 37 | width: 100px; 38 | height: 100px; 39 | } 40 | .flag-ba:after { 41 | font-size: 2.7rem; 42 | margin: 18px 0 0 12px; 43 | border-bottom: 65px solid #fff; 44 | border-left: 40px solid transparent; 45 | border-right: 40px solid transparent; 46 | } 47 | /* BRASIL - BR */ 48 | .flag-br { 49 | background: #fee63c; 50 | background-image: linear-gradient(30deg, #019f6f 30%, transparent 30%), linear-gradient(-30deg, #019f6f 30%, transparent 30%), linear-gradient(210deg, #019f6f 30%, transparent 30%), linear-gradient(-210deg, #019f6f 30%, transparent 30%); 51 | } 52 | .flag-br:before { 53 | width: 100px; 54 | height: 100px; 55 | margin: 50px 0 0 100px; 56 | background: #2765ae radial-gradient(circle at 0 175px, transparent 71%, #fff 72%, #fff 78%, transparent 79%); 57 | border-radius: 50%; 58 | } 59 | /* DISTRITO FEDERAL - DF */ 60 | .flag-df { 61 | display: flex; 62 | align-items: center; 63 | justify-content: center; 64 | } 65 | .flag-df:before { 66 | width: 120px; 67 | height: 120px; 68 | background-size: cover; 69 | background-color: #00933d; 70 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cpath fill='%23f8c300' d='M213.439 213.439H109.684L83.992 239.13H36.561v-25.691L0 250l36.561 36.561V260.87h47.431l25.692 25.691h103.755L176.877 250z'/%3E%3Cpath fill='%23f8c300' d='M286.561 213.439V109.684L260.87 83.992V36.561h25.691L250 0l-36.561 36.561h25.691v47.431l-25.691 25.692v103.755L250 176.877z'/%3E%3Cpath fill='%23f8c300' d='M213.439 286.561v103.755l25.691 25.692v47.431h-25.691L250 500l36.561-36.561H260.87v-47.431l25.691-25.692V286.561L250 323.123z'/%3E%3Cpath fill='%23f8c300' d='M500 250l-36.561-36.561v25.691h-47.431l-25.692-25.691H286.561L323.123 250l-36.562 36.561h103.755l25.692-25.691h47.431v25.691z'/%3E%3C/svg%3E"); 71 | } 72 | /* ESPÍRITO SANTO - ES */ 73 | .flag-es { 74 | background: linear-gradient(#00adef 33.3%, #fff 33.3%, #fff 66.6%, #f7adae 66.6%); 75 | } 76 | /* MARANHAO - MA */ 77 | .flag-ma { 78 | background-image: repeating-linear-gradient(to bottom, #e74c3c, #e74c3c 11.1%, #fff 11.1%, #fff 22.2%, #000 22.2%, #000 33.3%, #fff 33.3%, #fff 44.4%); 79 | } 80 | .flag-ma:before { 81 | margin: 0; 82 | width: 89px; 83 | height: 89px; 84 | background: #2980b9; 85 | } 86 | .flag-ma:after { 87 | content: '\2605'; 88 | color: #fff; 89 | font-size: 70px; 90 | width: 89px; 91 | height: 89px; 92 | display: flex; 93 | align-items: center; 94 | justify-content: center; 95 | } 96 | /* MATO GROSSO DO SUL - MS */ 97 | .flag-ms { 98 | background: #fff; 99 | background-image: linear-gradient(-224.5deg, #019f6f 31%, transparent 30%), linear-gradient(-44deg, #2980b9 58%, transparent 30%); 100 | position: relative; 101 | } 102 | .flag-ms:before { 103 | position: absolute; 104 | content: '\2605'; 105 | color: #fee63c; 106 | font-size: 60px; 107 | line-height: 60px; 108 | bottom: 25px; 109 | right: 25px; 110 | } 111 | /* MATO GROSSO - MT */ 112 | .flag-mt { 113 | margin: 0 auto; 114 | background: #fff; 115 | background-image: linear-gradient(30deg, #1f3a93 30%, transparent 30%), linear-gradient(-30deg, #1f3a93 30%, transparent 30%), linear-gradient(210deg, #1f3a93 30%, transparent 30%), linear-gradient(-210deg, #1f3a93 30%, transparent 30%); 116 | } 117 | .flag-mt:before { 118 | width: 100px; 119 | height: 100px; 120 | margin: 50px 0 0 100px; 121 | background: #019f6f; 122 | border-radius: 50%; 123 | } 124 | .flag-mt:after { 125 | content: '\2605'; 126 | color: #fee63c; 127 | font-size: 93px; 128 | width: 300px; 129 | height: 200px; 130 | display: flex; 131 | margin-top: -3px; 132 | justify-content: center; 133 | align-items: center; 134 | } 135 | /* MINAS GERAIS - MG */ 136 | .flag-mg { 137 | background: #fff; 138 | display: flex; 139 | align-items: center; 140 | justify-content: center; 141 | } 142 | .flag-mg:before { 143 | border-left: 60px solid transparent; 144 | border-right: 60px solid transparent; 145 | border-bottom: 90px solid #f00; 146 | } 147 | /* PARÁ - PA */ 148 | .flag-pa { 149 | background-image: linear-gradient(34deg, #e74c3c 41%, #fff 41%, #fff 58%, #e74c3c 58%); 150 | } 151 | .flag-pa:before { 152 | content: '\2605'; 153 | color: #2980b9; 154 | font-size: 40px; 155 | width: 100%; 156 | height: 100%; 157 | display: flex; 158 | align-items: center; 159 | justify-content: center; 160 | } 161 | /* PARAÍBA - PB */ 162 | .flag-pb { 163 | background-image: linear-gradient(to right, #000, #000 30%, #e74c3c 30%); 164 | } 165 | .flag-pb:before { 166 | content: 'NEGO'; 167 | color: #fff; 168 | font-size: 30px; 169 | display: flex; 170 | height: 100%; 171 | align-items: center; 172 | justify-content: center; 173 | width: 210px; 174 | margin-left: 90px; 175 | } 176 | /* PARANÁ - PR */ 177 | .flag-pr { 178 | background-image: linear-gradient(34deg, #008c43 30%, #fff 0, #fff 75%, #008c43 50%); 179 | } 180 | .flag-pr:before { 181 | background: #3f51b5 radial-gradient(circle at 0 175px, transparent 71%, #fff 72%, #fff 78%, transparent 79%); 182 | border-radius: 50%; 183 | color: #3f51b5; 184 | content: ''; 185 | height: 100px; 186 | margin: 40px 0 0 100px; 187 | position: absolute; 188 | width: 100px; 189 | } 190 | /* PIAUÍ - PI */ 191 | .flag-pi { 192 | background-image: repeating-linear-gradient(to bottom, #019f6f, #019f6f 16px, #fee63c 0, #fee63c 31px); 193 | } 194 | .flag-pi:before { 195 | width: 90px; 196 | height: 78px; 197 | background: #1f3a93; 198 | } 199 | .flag-pi:after { 200 | content: '\2605'; 201 | color: #fff; 202 | font-size: 52px; 203 | display: flex; 204 | width: 90px; 205 | height: 78px; 206 | align-items: center; 207 | justify-content: center; 208 | } 209 | /* RONDÔNIA - RO */ 210 | .flag-ro { 211 | background-image: linear-gradient(0deg, #fee63c, #fee63c 50%, #1f3a93 50%, #1f3a93 100%); 212 | } 213 | .flag-ro:before { 214 | border-left: 150px solid transparent; 215 | border-right: 150px solid transparent; 216 | border-bottom: 100px solid #019f6f; 217 | margin-top: 100px; 218 | z-index: 2; 219 | } 220 | .flag-ro:after { 221 | content: '\2605'; 222 | color: #fff; 223 | font-size: 70px; 224 | width: 100%; 225 | height: 100%; 226 | display: flex; 227 | align-items: center; 228 | justify-content: center; 229 | margin-top: -14px; 230 | z-index: 1; 231 | } 232 | /* RORAIMA - RR */ 233 | .flag-rr { 234 | background-image: linear-gradient(-32deg, #019f6f 36%, #fff 36%, #fff 65%, #2980b9 65%); 235 | } 236 | .flag-rr:before { 237 | content: '\2605'; 238 | color: #fee63c; 239 | font-size: 176px; 240 | display: flex; 241 | width: 100%; 242 | height: 100%; 243 | align-items: center; 244 | justify-content: center; 245 | margin-top: -8px; 246 | } 247 | .flag-rr:after { 248 | width: 300px; 249 | height: 10px; 250 | margin-top: 174px; 251 | background: #e74c3c; 252 | } 253 | --------------------------------------------------------------------------------