├── .gitignore ├── 04 ├── assets │ ├── styles │ │ ├── main.scss │ │ ├── shared.scss │ │ ├── cycle.scss │ │ ├── index.scss │ │ ├── main.css.map │ │ └── main.css │ ├── images │ │ ├── graph.png │ │ ├── background-gradient.png │ │ └── background-gradient-pb.png │ └── icons │ │ ├── menu.svg │ │ ├── arrow-down.svg │ │ ├── arrow-up.svg │ │ ├── cycle.svg │ │ ├── cycle-white.svg │ │ ├── qr-code.svg │ │ └── wallet.svg ├── README.md ├── cycle.html └── index.html ├── 01 ├── images │ ├── helping-women.gif │ └── reprograma-roxo.png ├── index.html └── main.css ├── 02 ├── scss │ ├── images │ │ └── placeholder.png │ ├── .sass-cache │ │ └── c9ab38697a63bd20c1d3ff1641c5e1b8bfe5638b │ │ │ └── main.scssc │ ├── main.css.map │ ├── main.css │ ├── main.scss │ ├── index.html │ └── styles │ │ ├── normalize.css │ │ └── skeleton.css ├── css │ ├── seletores │ │ ├── images │ │ │ └── placeholder.png │ │ ├── index.html │ │ └── styles │ │ │ ├── normalize.css │ │ │ └── skeleton.css │ └── border-box.html └── utilidades │ ├── install-sass.md │ └── cheatsheet.md ├── 03 ├── assets │ ├── images │ │ └── background-gradient.png │ ├── icons │ │ ├── menu.svg │ │ ├── arrow-down.svg │ │ ├── arrow-up.svg │ │ ├── cycle.svg │ │ └── qr-code.svg │ └── styles │ │ ├── main.css │ │ ├── main.css.map │ │ └── main.scss ├── README.md └── index.html └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /.sass_cache 3 | -------------------------------------------------------------------------------- /04/assets/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import 'shared'; 2 | @import 'index'; 3 | @import 'cycle'; -------------------------------------------------------------------------------- /01/images/helping-women.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brizental/reprograma-preprocessadores/HEAD/01/images/helping-women.gif -------------------------------------------------------------------------------- /04/assets/images/graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brizental/reprograma-preprocessadores/HEAD/04/assets/images/graph.png -------------------------------------------------------------------------------- /01/images/reprograma-roxo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brizental/reprograma-preprocessadores/HEAD/01/images/reprograma-roxo.png -------------------------------------------------------------------------------- /02/scss/images/placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brizental/reprograma-preprocessadores/HEAD/02/scss/images/placeholder.png -------------------------------------------------------------------------------- /02/css/seletores/images/placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brizental/reprograma-preprocessadores/HEAD/02/css/seletores/images/placeholder.png -------------------------------------------------------------------------------- /03/assets/images/background-gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brizental/reprograma-preprocessadores/HEAD/03/assets/images/background-gradient.png -------------------------------------------------------------------------------- /04/assets/images/background-gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brizental/reprograma-preprocessadores/HEAD/04/assets/images/background-gradient.png -------------------------------------------------------------------------------- /04/assets/images/background-gradient-pb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brizental/reprograma-preprocessadores/HEAD/04/assets/images/background-gradient-pb.png -------------------------------------------------------------------------------- /03/README.md: -------------------------------------------------------------------------------- 1 | # Exercício - Aula 03 2 | 3 | > Inspiração para o design: https://dribbble.com/shots/3998130-crypto-wallet/attachments/915008 4 | 5 | Tópicos: nesting, variaveis, imports. -------------------------------------------------------------------------------- /04/README.md: -------------------------------------------------------------------------------- 1 | # Exercício - Aula 03 2 | 3 | > Inspiração para o design: https://dribbble.com/shots/3998130-crypto-wallet/attachments/915008 4 | 5 | Tópicos: nesting, variaveis, imports. -------------------------------------------------------------------------------- /02/scss/.sass-cache/c9ab38697a63bd20c1d3ff1641c5e1b8bfe5638b/main.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brizental/reprograma-preprocessadores/HEAD/02/scss/.sass-cache/c9ab38697a63bd20c1d3ff1641c5e1b8bfe5638b/main.scssc -------------------------------------------------------------------------------- /02/scss/main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,IAAK;EACH,MAAM,EAAE,MAAM;EAEd,QAAI;IACF,SAAS,EAAE,IAAI;;AAKjB,QAAG;EACD,WAAW,EAAE,IAAI;EAEjB,wBAAkB;IAChB,gBAAgB,EAAE,OAAO;;AAUzB,wCAAiB;EACf,gBAAgB,EAAE,GAAG;AAIzB,uBAAe;EACb,gBAAgB,EAAE,MAAM;AAG1B,wBAAgB;EACd,gBAAgB,EAAE,IAAI", 4 | "sources": ["main.scss"], 5 | "names": [], 6 | "file": "main.css" 7 | } -------------------------------------------------------------------------------- /02/scss/main.css: -------------------------------------------------------------------------------- 1 | .row { 2 | margin: 50px 0; } 3 | .row img { 4 | max-width: 100%; } 5 | 6 | tbody tr { 7 | font-weight: bold; } 8 | tbody tr:nth-child(even) { 9 | background-color: #e0e0e0; } 10 | 11 | form input[type="submit"].button-primary { 12 | background-color: red; } 13 | form input[type="text"] { 14 | background-color: yellow; } 15 | form input[type="email"] { 16 | background-color: blue; } 17 | 18 | /*# sourceMappingURL=main.css.map */ 19 | -------------------------------------------------------------------------------- /02/scss/main.scss: -------------------------------------------------------------------------------- 1 | .row { 2 | margin: 50px 0; 3 | 4 | img { 5 | max-width: 100%; 6 | } 7 | } 8 | 9 | tbody { 10 | tr { 11 | font-weight: bold; 12 | 13 | &:nth-child(even) { 14 | background-color: #e0e0e0; 15 | } 16 | } 17 | } 18 | 19 | form { 20 | input { 21 | 22 | &[type="submit"] { 23 | 24 | &.button-primary { 25 | background-color: red; 26 | } 27 | } 28 | 29 | &[type="text"] { 30 | background-color: yellow; 31 | } 32 | 33 | &[type="email"] { 34 | background-color: blue; 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /03/assets/icons/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /04/assets/icons/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /02/css/border-box.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Border Box 6 | 32 | 33 | 34 |
35 |
36 |
37 | 38 | -------------------------------------------------------------------------------- /03/assets/icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | Created by Arthur Shlain 10 | from the Noun Project 11 | 12 | -------------------------------------------------------------------------------- /03/assets/icons/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | Created by Arthur Shlain 10 | from the Noun Project 11 | 12 | -------------------------------------------------------------------------------- /04/assets/icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | Created by Arthur Shlain 10 | from the Noun Project 11 | 12 | -------------------------------------------------------------------------------- /04/assets/icons/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 9 | Created by Arthur Shlain 10 | from the Noun Project 11 | 12 | -------------------------------------------------------------------------------- /03/assets/icons/cycle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 10 | 12 | 14 | 16 | 17 | Created by Jonathan Li 18 | from the Noun Project 19 | 20 | -------------------------------------------------------------------------------- /04/assets/icons/cycle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 10 | 12 | 14 | 16 | 17 | Created by Jonathan Li 18 | from the Noun Project 19 | 20 | -------------------------------------------------------------------------------- /04/assets/icons/cycle-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 10 | 12 | 14 | 16 | 17 | Created by Jonathan Li 18 | from the Noun Project 19 | 20 | -------------------------------------------------------------------------------- /02/utilidades/install-sass.md: -------------------------------------------------------------------------------- 1 | # Como instalar o SCSS/Sass no Windows 2 | 3 | > Esse passo a passo explica como instalar o Sass e tornar ele um comando na linha de comando. Existem que GUIs permitem que você compile o Sass sem ter que tocar em código e elas estão listadas aqui: http://sass-lang.com/install 4 | 5 | 1. Faça o download do dart-sass pelo link: https://github.com/sass/dart-sass/releases/tag/1.2.0 . Para Windows existem duas versões, dependendo se seu Windows é 32 ou 64bit. Escolha a versão correta para o seu sistema. 6 | 2. Extraia o conteúdo da pasta que você acabou de fazer o download. 7 | 3. Entre dentro da pasta até encontrar o arquivo `sass`. Copie o caminho para pasta encontrada. 8 | 4. Dentro do explorador de arquivos, na barra da esquerda, encontre o link `Meu Computador`, clique com o botão direito nele e selecione o último link da lista. 9 | 5. Na barra esquerda da nova janela que foi aberta, clique no link `Configurações avançadas do sistema`. 10 | 6. Na parte inferior da nova janela que foi aberta, clique em `Variáveis de ambiente`. 11 | 7. Clique no item `Path` na lista de variáveis do sistema. 12 | 8. Adicione o caminho da pasta que contém o arquivo `sass` ao `Path`. 13 | 9. Salve tudo e reinicie a linha de comando, caso ela esteja aberta. 14 | 10. Digite `sass` na linha de comando e certifique-se de que ele reconhece o comando. 15 | 16 | --- 17 | 18 | # Extensão do VSCode para compilar SCSS/Sass 19 | 20 | > https://github.com/ritwickdey/vscode-live-sass-compiler 21 | 22 | --- 23 | 24 | # Extensão do Sublime Text para compilar SCSS/Sass 25 | 26 | > https://packagecontrol.io/packages/SassBuilder -------------------------------------------------------------------------------- /03/assets/icons/qr-code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 16 | 17 | 18 | 20 | 21 | -------------------------------------------------------------------------------- /04/assets/icons/qr-code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 16 | 17 | 18 | 20 | 21 | -------------------------------------------------------------------------------- /04/cycle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Wallet - Cycle 7 | 8 | 9 | 10 | 11 | 18 |
19 | wallet 20 |
21 |

Today

22 |

$9238.31

23 |

+ $ 170.25 (22.1%) 24 | arrow up 25 |

26 |
27 | 30 |
31 |
32 |

Market

33 | graph 34 |
35 |
36 |
37 | 44 |
45 |
46 |
47 |

+ 42.5 %

48 |

Wallet

49 |
50 |
51 |

+ 18.0 %

52 |

Market

53 |
54 |
55 |
56 | 57 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Plano de Aulas 2 | 3 | > Plano de aulas para a semana do dia 16/04/2017 - 20/04/2017, sobre pré-processadores de CSS. 4 | 5 | --- 6 | 7 | ### Aula 01 8 | 9 | Para enteder pre-processadores, é muito importante que entender os conceitos básicos de CSS. Nesta primeira aula, a ideia é passar um exercício não tão básico de CSS puro, sem nem ao menos citar pré-processadores. Este exercício irá evidenciar alguns problemas que o CSS tem que os pré-processadores tentam resolver, assim as meninas vão perceber esses problemas antes de conhecerem as soluções. 10 | 11 | --- 12 | 13 | ### Aula 02 14 | 15 | Nesta aula eu vou introduzir o que sao os pre processadores, explicar um pouco de historia, mostrar algumas das opcoes que existem no mercado. Entao, vou mostrar especificamente o SCSS (com instalar, como usar, etc), que sera o preprocessador estudado durante a semana. Finalmente, comecarei a mostrar os primeiros conceitos do SCSS. Para esta primeira aula, os conceitos que vou mostrar serao: variaveis e nesting. Passarei alguns exercicios simples sobre o assunto. 16 | 17 | --- 18 | 19 | ### Aula 03 20 | 21 | Esta aula comecara com um rapido recap da aula anterior, e entao mais alguns conceitos de SCSS: partials, imports, mixins e extends. Nesta aula tambem passarei alguns exercicios simples. 22 | 23 | --- 24 | 25 | ### Aula 04 26 | 27 | Esta sera a aula final de conceitos de SCSS, os conceitos que faltam e serao apresentados: loops, condicionais e operacoes. Alem disso, mostrarei algumas boas praticas e design patterns de SCSS em especifico. Novamente, passarei alguns exercicios simples. 28 | 29 | --- 30 | 31 | ### Aula 05 32 | 33 | Nesta aula farei um recap de tudo que foi visto nas aulas da semana e entao passarei um exercicio unico, que sera o mesmo exercicio da primeira aula. A ideia e que as meninas entendam porque usar o SCSS, como ele facilita e torna o desenvolvimento mais agil. Por fim, farei um comparativo com o exercicio da primeira aula e um fechamento e balanço final da semana. -------------------------------------------------------------------------------- /04/assets/styles/shared.scss: -------------------------------------------------------------------------------- 1 | /* Base Styles 2 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 3 | 4 | * { 5 | font-family: 'Roboto', sans-serif; 6 | font-weight: 300; 7 | color: white; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | background-color: #364061; 13 | } 14 | 15 | ul, 16 | p { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /* Common Styles 22 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 23 | 24 | .inline-icon { 25 | height: 18px; 26 | display: inline-block; 27 | margin-left: 5px; 28 | } 29 | 30 | .floating-button { 31 | border: none; 32 | border-radius: 100%; 33 | position: absolute; 34 | padding: 0; 35 | width: 40px; 36 | height: 40px; 37 | right: 20px; 38 | bottom: -20px; 39 | z-index: 4; 40 | 41 | img { 42 | margin-top: 3px; 43 | width: 18px; 44 | height: 18px; 45 | } 46 | } 47 | 48 | .active { 49 | border-bottom-width: 2px; 50 | border-bottom-style: solid; 51 | border-bottom-color: rgba(249,122,179,1); 52 | } 53 | 54 | #header { 55 | margin: 0 20px; 56 | padding: 0 0 10px; 57 | position: absolute; 58 | top: 20px; 59 | width: calc(100vw - 40px); 60 | z-index: 999; 61 | 62 | ul { 63 | display: flex; 64 | justify-content: space-between; 65 | align-items: center; 66 | list-style-type: none; 67 | width: 100%; 68 | 69 | li { 70 | text-align: center; 71 | 72 | h4 { 73 | text-transform: uppercase; 74 | letter-spacing: 8px; 75 | font-size: 10px; 76 | } 77 | 78 | .icon { 79 | width: 20px; 80 | } 81 | } 82 | } 83 | } 84 | 85 | /* Extends 86 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 87 | 88 | %flexbox { 89 | display: flex; 90 | justify-content: space-between; 91 | align-items: center; 92 | } 93 | 94 | /* Variables 95 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 96 | 97 | $border-radius: 10px; 98 | $opacity: .5; 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Reprograma 6 | 7 | 8 | 9 | 10 |
11 |
12 | reprograma 13 |
14 |

Vamos reprogramar o mundo!

15 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id ultrices felis, et imperdiet libero. Nulla hendrerit turpis a mi fringilla ultrices. Curabitur massa tortor, faucibus efficitur libero vitae, finibus fringilla dui. Duis odio massa, volutpat non egestas eget, consequat ut justo. Cras a purus maximus, pulvinar turpis varius, suscipit tellus. Mauris consectetur augue sit amet lobortis hendrerit.

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

Entre em contato

24 |
    25 |
  • emailcontato@reprograma.co
    • 26 |
  • slackreprograma.slack.com
    • 27 |
  • telefone+55 11 727 394 718
    • 28 |
29 |
30 |
31 |
32 |
33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |
41 | 42 | 43 |
44 |
45 | 46 |
47 |
48 |
49 |
50 |
51 | 52 | -------------------------------------------------------------------------------- /03/assets/styles/main.css: -------------------------------------------------------------------------------- 1 | *{font-family:'Roboto', sans-serif;font-weight:300;color:white}body{margin:0;background-color:#364061}ul,p{margin:0;padding:0}.inline-icon{height:18px;display:inline-block;margin-left:5px}.floating-button{border:none;border-radius:100%;position:absolute;padding:0;width:40px;height:40px;right:20px;bottom:-20px;z-index:4}.floating-button img{margin-top:3px;width:18px;height:18px}#header-shadow-1,#header-shadow-2{background-image:url("../images/background-gradient.png");background-size:cover;position:absolute;height:153.6px;border-radius:10px}#header-shadow-1{top:20px;width:80vw;left:10vw;z-index:1;opacity:.2}#header-shadow-2{top:10px;width:90vw;left:5vw;z-index:2;opacity:.5}#resume{background-image:url("../images/background-gradient.png");background-size:cover;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-bottom:25px;position:relative;z-index:3}#resume .header{margin:0 20px;padding:20px 0 10px}#resume .header ul{display:flex;justify-content:space-between;align-items:center;list-style-type:none;width:100%}#resume .header ul li{text-align:center}#resume .header ul li h4{text-transform:uppercase;letter-spacing:8px;font-size:10px}#resume .header ul li .icon{width:20px}#resume .balance{text-align:center}#resume .balance h2{margin:0;font-size:16px}#resume .balance h2 span{font-size:22px}#resume .balance p{margin:5px 0}#my-wallet{padding:30px 30px 20px;display:flex;justify-content:space-between;align-items:center}#my-wallet .info h1{font-size:24px;margin-bottom:5px}#my-wallet .info p{font-size:12px}#my-wallet .info p span{opacity:.5}#my-wallet .info p img{height:12px}#my-wallet a{text-transform:uppercase;text-decoration:none;letter-spacing:2px;font-size:10px;color:#4fc1f9}#coin-list li{display:flex;justify-content:space-between;border-radius:10px;margin:10px 20px 15px;background:linear-gradient(to right, #535f80 0%, #333f60 100%);box-shadow:10px 10px 53px -4px rgba(0,0,0,0.24);text-transform:uppercase;letter-spacing:1px;font-size:10px;padding:20px}#coin-list li div{width:33.3333%}#coin-list li .coin h4,#coin-list li .price h4{margin:0 0 7px 0}#coin-list li .coin p,#coin-list li .price p{margin:0;opacity:.5}#coin-list li .chart{padding:10px 0;text-align:center}#coin-list li .chart p{font-weight:normal}#coin-list li .chart p img{height:10px} 2 | /*# sourceMappingURL=main.css.map */ 3 | -------------------------------------------------------------------------------- /03/assets/styles/main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["main.scss"], 5 | "names": [], 6 | "file": "main.css" 7 | } -------------------------------------------------------------------------------- /04/assets/styles/cycle.scss: -------------------------------------------------------------------------------- 1 | /* Overwrites 2 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 3 | 4 | #overview { 5 | padding-bottom: 20px; 6 | 7 | #header { 8 | opacity: .3; 9 | } 10 | } 11 | 12 | /* Card Styles 13 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 14 | 15 | #card { 16 | background-image: url('../images/background-gradient-pb.png'); 17 | background-size: cover; 18 | border-radius: $border-radius; 19 | margin: 80px 20px 20px; 20 | padding: 20px 20px 30px; 21 | position: relative; 22 | @extend %flexbox; 23 | 24 | .floating-button { 25 | right: calc(50% - 20px); 26 | background: linear-gradient(to right, rgba(151,133,236,1) 0%,rgba(251,122,178,1) 100%); 27 | } 28 | 29 | .wallet { 30 | width: 40px; 31 | opacity: $opacity; 32 | margin-left: 35px; 33 | } 34 | 35 | .balance { 36 | h1 { 37 | font-size: 20px; 38 | margin: 5px 0; 39 | 40 | span { 41 | font-size: 24px; 42 | } 43 | } 44 | 45 | p { 46 | opacity: $opacity; 47 | font-size: 12px; 48 | 49 | .inline-icon { 50 | height: 12px; 51 | } 52 | } 53 | } 54 | } 55 | 56 | /* Graph Styles 57 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 58 | 59 | #graph { 60 | margin: 40px 0 20px; 61 | 62 | img { 63 | width: 100vw; 64 | } 65 | 66 | h4 { 67 | display: inline-block; 68 | margin: 0 20px; 69 | padding-bottom: 5px; 70 | letter-spacing: 2px; 71 | font-size: 14px; 72 | } 73 | } 74 | 75 | /* Percentages Styles 76 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 77 | 78 | #percentages { 79 | padding: 0 20px; 80 | 81 | .tabs { 82 | ul { 83 | @extend %flexbox; 84 | list-style-type: none; 85 | 86 | li { 87 | padding-bottom: 5px; 88 | letter-spacing: 2px; 89 | font-size: 14px; 90 | } 91 | } 92 | } 93 | 94 | .numbers { 95 | @extend %flexbox; 96 | 97 | div { 98 | width: 50%; 99 | margin: 20px 0 0; 100 | padding-bottom: 20px; 101 | 102 | 103 | &:first-child { 104 | border-right: 1px solid rgba(255, 255, 255, .1); 105 | } 106 | 107 | p { 108 | opacity: $opacity; 109 | letter-spacing: 2px; 110 | font-size: 14px; 111 | margin-left: 45px; 112 | } 113 | 114 | h2 { 115 | margin-bottom: 10px; 116 | text-align: center; 117 | 118 | span { 119 | opacity: $opacity; 120 | font-size: 18px; 121 | } 122 | } 123 | } 124 | } 125 | } 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Wallet 7 | 8 | 9 | 10 | 11 | 18 |
19 |
20 |
21 |
22 |

$9238.31

23 |

+ $ 170.25 (22.1%) 24 | arrow up 25 |

26 |
27 | 30 |
31 |
32 |
33 |

My Wallet

34 |

$4,962.44 (+22.1%) 35 | arrow up 36 |

37 |
38 | add coin 39 |
40 |
41 | 88 |
89 | 90 | -------------------------------------------------------------------------------- /03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | App 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 20 |
21 |
22 |

$9238.31

23 |

+ $ 170.25 (22.1%) 24 | arrow up 25 |

26 |
27 | 30 |
31 |
32 |
33 |

My Wallet

34 |

$4,962.44 (+22.1%) 35 | arrow up 36 |

37 |
38 | add coin 39 |
40 |
41 | 88 |
89 | 90 | -------------------------------------------------------------------------------- /04/assets/styles/index.scss: -------------------------------------------------------------------------------- 1 | /* Resume Styles 2 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 3 | 4 | #resume-shadow-1, 5 | #resume-shadow-2 { 6 | background-image: url('../images/background-gradient.png'); 7 | background-size: cover; 8 | position: absolute; 9 | height: 153.6px; 10 | border-radius: $border-radius; 11 | } 12 | 13 | #resume-shadow-1 { 14 | top: 20px; 15 | width: 80vw; 16 | left: 10vw; 17 | opacity: .2; 18 | } 19 | 20 | #resume-shadow-2 { 21 | top: 10px; 22 | width: 90vw; 23 | left: 5vw; 24 | opacity: $opacity; 25 | } 26 | 27 | #resume { 28 | background-image: url('../images/background-gradient.png'); 29 | background-size: cover; 30 | border-bottom-left-radius: 10px; 31 | border-bottom-right-radius: 10px; 32 | padding-top: 70px; 33 | padding-bottom: 25px; 34 | position: relative; 35 | 36 | .balance { 37 | text-align: center; 38 | 39 | h2 { 40 | margin: 0; 41 | font-size: 16px; 42 | 43 | span { 44 | font-size: 22px; 45 | } 46 | } 47 | 48 | p { 49 | margin: 5px 0; 50 | } 51 | } 52 | } 53 | 54 | /* My Wallet Styles 55 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 56 | 57 | #my-wallet { 58 | padding: 30px 30px 20px; 59 | @extend %flexbox; 60 | 61 | .info { 62 | h1 { 63 | font-size: 24px; 64 | margin-bottom: 5px; 65 | } 66 | 67 | p { 68 | font-size: 12px; 69 | 70 | span { 71 | opacity: $opacity; 72 | } 73 | 74 | img { 75 | height: 12px; 76 | } 77 | } 78 | } 79 | 80 | a { 81 | text-transform: uppercase; 82 | text-decoration: none; 83 | letter-spacing: 2px; 84 | font-size: 10px; 85 | color: #4fc1f9; 86 | } 87 | } 88 | 89 | /* Coin List 90 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 91 | 92 | #coin-list { 93 | li { 94 | display: flex; 95 | justify-content: space-between; 96 | border-radius: $border-radius; 97 | margin: 10px 20px 15px; 98 | background: linear-gradient(to right, rgba(83,95,128,1) 0%,rgba(51,63,96,1) 100%); 99 | box-shadow: 10px 10px 53px -4px rgba(0,0,0,0.24); 100 | text-transform: uppercase; 101 | letter-spacing: 1px; 102 | font-size: 10px; 103 | padding: 20px; 104 | 105 | div { 106 | width: 33.3333%; 107 | } 108 | 109 | .coin, 110 | .price { 111 | h4 { 112 | margin: 0 0 7px 0; 113 | } 114 | 115 | p { 116 | margin: 0; 117 | opacity: $opacity; 118 | } 119 | } 120 | 121 | .chart { 122 | padding: 10px 0; 123 | text-align: center; 124 | 125 | p { 126 | font-weight: normal; 127 | 128 | img { 129 | height: 10px; 130 | } 131 | } 132 | } 133 | } 134 | } -------------------------------------------------------------------------------- /04/assets/styles/main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["shared.scss","index.scss","cycle.scss"], 5 | "names": [], 6 | "file": "main.css" 7 | } -------------------------------------------------------------------------------- /04/assets/styles/main.css: -------------------------------------------------------------------------------- 1 | *{font-family:'Roboto', sans-serif;font-weight:300;color:white}body{margin:0;background-color:#364061}ul,p{margin:0;padding:0}.inline-icon{height:18px;display:inline-block;margin-left:5px}.floating-button{border:none;border-radius:100%;position:absolute;padding:0;width:40px;height:40px;right:20px;bottom:-20px;z-index:4}.floating-button img{margin-top:3px;width:18px;height:18px}.active{border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#f97ab3}#header{margin:0 20px;padding:0 0 10px;position:absolute;top:20px;width:calc(100vw - 40px);z-index:999}#header ul{display:flex;justify-content:space-between;align-items:center;list-style-type:none;width:100%}#header ul li{text-align:center}#header ul li h4{text-transform:uppercase;letter-spacing:8px;font-size:10px}#header ul li .icon{width:20px}#resume-shadow-1,#resume-shadow-2{background-image:url("../images/background-gradient.png");background-size:cover;position:absolute;height:153.6px;border-radius:10px}#resume-shadow-1{top:20px;width:80vw;left:10vw;opacity:.2}#resume-shadow-2{top:10px;width:90vw;left:5vw;opacity:.5}#resume{background-image:url("../images/background-gradient.png");background-size:cover;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-top:70px;padding-bottom:25px;position:relative}#resume .balance{text-align:center}#resume .balance h2{margin:0;font-size:16px}#resume .balance h2 span{font-size:22px}#resume .balance p{margin:5px 0}#my-wallet{padding:30px 30px 20px;display:flex;justify-content:space-between;align-items:center}#my-wallet .info h1{font-size:24px;margin-bottom:5px}#my-wallet .info p{font-size:12px}#my-wallet .info p span{opacity:.5}#my-wallet .info p img{height:12px}#my-wallet a{text-transform:uppercase;text-decoration:none;letter-spacing:2px;font-size:10px;color:#4fc1f9}#coin-list li{display:flex;justify-content:space-between;border-radius:10px;margin:10px 20px 15px;background:linear-gradient(to right, #535f80 0%, #333f60 100%);box-shadow:10px 10px 53px -4px rgba(0,0,0,0.24);text-transform:uppercase;letter-spacing:1px;font-size:10px;padding:20px}#coin-list li div{width:33.3333%}#coin-list li .coin h4,#coin-list li .price h4{margin:0 0 7px 0}#coin-list li .coin p,#coin-list li .price p{margin:0;opacity:.5}#coin-list li .chart{padding:10px 0;text-align:center}#coin-list li .chart p{font-weight:normal}#coin-list li .chart p img{height:10px}#overview{padding-bottom:20px}#overview #header{opacity:.3}#card{background-image:url("../images/background-gradient-pb.png");background-size:cover;border-radius:10px;margin:80px 15px 15px;padding:5px 20px 15px;display:flex;justify-content:space-between;align-items:center;position:relative}#card .wallet{width:70px;margin:30px 20px 20px;opacity:.5}#card .balance p{opacity:.5;font-size:12px}#card .balance p .inline-icon{height:12px}#card .balance h1{font-size:20px;margin:10px 0}#card .balance h1 span{font-size:24px}#card .floating-button{right:calc(50% - 20px);background:linear-gradient(to right, #9785eb 0%, #f97ab3 100%)}#graph{margin:40px 0 20px}#graph img{width:100vw}#graph h4{margin:0 20px;padding-bottom:7px;display:inline-block;font-size:14px;letter-spacing:2px}#percentages{padding:0 20px}#percentages .tabs ul{display:flex;justify-content:space-between;align-items:center;list-style-type:none;font-size:14px;letter-spacing:2px}#percentages .tabs ul li{padding-bottom:10px;opacity:.5}#percentages .tabs ul li.active{opacity:1}#percentages .numbers{display:flex;justify-content:space-between;align-items:center}#percentages .numbers div{width:50%;margin:20px 0}#percentages .numbers div:nth-child(odd){border-right:1px solid rgba(255,255,255,0.2)}#percentages .numbers div:nth-child(even){padding-left:20px}#percentages .numbers div h2{font-size:18px;margin-bottom:10px}#percentages .numbers div h2 span{font-size:30px}#percentages .numbers div p{opacity:.5;font-size:14px;letter-spacing:2px} 2 | /*# sourceMappingURL=main.css.map */ 3 | -------------------------------------------------------------------------------- /03/assets/styles/main.scss: -------------------------------------------------------------------------------- 1 | /* Base Styles 2 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 3 | 4 | * { 5 | font-family: 'Roboto', sans-serif; 6 | font-weight: 300; 7 | color: white; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | background-color: #364061; 13 | } 14 | 15 | ul, 16 | p { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /* Common Styles 22 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 23 | 24 | .inline-icon { 25 | height: 18px; 26 | display: inline-block; 27 | margin-left: 5px; 28 | } 29 | 30 | .floating-button { 31 | border: none; 32 | border-radius: 100%; 33 | position: absolute; 34 | padding: 0; 35 | width: 40px; 36 | height: 40px; 37 | right: 20px; 38 | bottom: -20px; 39 | z-index: 4; 40 | 41 | img { 42 | margin-top: 3px; 43 | width: 18px; 44 | height: 18px; 45 | } 46 | } 47 | 48 | /* Resume Styles 49 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 50 | 51 | #header-shadow-1, 52 | #header-shadow-2 { 53 | background-image: url('../images/background-gradient.png'); 54 | background-size: cover; 55 | position: absolute; 56 | height: 153.6px; 57 | border-radius: 10px; 58 | } 59 | 60 | #header-shadow-1 { 61 | top: 20px; 62 | width: 80vw; 63 | left: 10vw; 64 | z-index: 1; 65 | opacity: .2; 66 | } 67 | 68 | #header-shadow-2 { 69 | top: 10px; 70 | width: 90vw; 71 | left: 5vw; 72 | z-index: 2; 73 | opacity: .5; 74 | } 75 | 76 | #resume { 77 | background-image: url('../images/background-gradient.png'); 78 | background-size: cover; 79 | border-bottom-left-radius: 10px; 80 | border-bottom-right-radius: 10px; 81 | padding-bottom: 25px; 82 | position: relative; 83 | z-index: 3; 84 | 85 | .header { 86 | margin: 0 20px; 87 | padding: 20px 0 10px; 88 | 89 | ul { 90 | display: flex; 91 | justify-content: space-between; 92 | align-items: center; 93 | list-style-type: none; 94 | width: 100%; 95 | 96 | li { 97 | text-align: center; 98 | 99 | h4 { 100 | text-transform: uppercase; 101 | letter-spacing: 8px; 102 | font-size: 10px; 103 | } 104 | 105 | .icon { 106 | width: 20px; 107 | } 108 | } 109 | } 110 | } 111 | 112 | .balance { 113 | text-align: center; 114 | 115 | h2 { 116 | margin: 0; 117 | font-size: 16px; 118 | 119 | span { 120 | font-size: 22px; 121 | } 122 | } 123 | 124 | p { 125 | margin: 5px 0; 126 | } 127 | } 128 | } 129 | 130 | /* My Wallet Styles 131 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 132 | 133 | #my-wallet { 134 | padding: 30px 30px 20px; 135 | display: flex; 136 | justify-content: space-between; 137 | align-items: center; 138 | 139 | .info { 140 | h1 { 141 | font-size: 24px; 142 | margin-bottom: 5px; 143 | } 144 | 145 | p { 146 | font-size: 12px; 147 | 148 | span { 149 | opacity: .5; 150 | } 151 | 152 | img { 153 | height: 12px; 154 | } 155 | } 156 | } 157 | 158 | a { 159 | text-transform: uppercase; 160 | text-decoration: none; 161 | letter-spacing: 2px; 162 | font-size: 10px; 163 | color: #4fc1f9; 164 | } 165 | } 166 | 167 | /* Coin List 168 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 169 | 170 | #coin-list { 171 | 172 | li { 173 | display: flex; 174 | justify-content: space-between; 175 | align-items: center; 176 | font-size: 10px; 177 | margin: 10px 20px; 178 | padding: 10px; 179 | background: linear-gradient(to right, rgba(82,94,127,1) 0%,rgba(51,63,96,1) 100%); 180 | border-radius: 10px; 181 | box-shadow: 0px 0px 37px 6px rgba(0,0,0,0.34); 182 | 183 | .coin, 184 | .price { 185 | h4 { 186 | margin-bottom: 2px; 187 | margin-top: 0; 188 | } 189 | 190 | p { 191 | opacity: .5; 192 | } 193 | } 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /01/main.css: -------------------------------------------------------------------------------- 1 | /* Grid 2 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 3 | 4 | .container { 5 | position: relative; 6 | width: 100%; 7 | max-width: 960px; 8 | margin: 0 auto; 9 | padding: 0 20px; 10 | box-sizing: border-box; } 11 | 12 | .column, 13 | .columns { 14 | width: 100%; 15 | float: left; 16 | box-sizing: border-box; } 17 | 18 | @media (min-width: 400px) { 19 | .container { 20 | width: 85%; 21 | padding: 0; } 22 | } 23 | 24 | @media (min-width: 550px) { 25 | .container { 26 | width: 80%; } 27 | .column, 28 | .columns { 29 | margin-left: 4%; } 30 | .column:first-child, 31 | .columns:first-child { 32 | margin-left: 0; } 33 | 34 | .one.column, 35 | .one.columns { width: 4.66666666667%; } 36 | .two.columns { width: 13.3333333333%; } 37 | .three.columns { width: 22%; } 38 | .four.columns { width: 30.6666666667%; } 39 | .five.columns { width: 39.3333333333%; } 40 | .six.columns { width: 48%; } 41 | .seven.columns { width: 56.6666666667%; } 42 | .eight.columns { width: 65.3333333333%; } 43 | .nine.columns { width: 74.0%; } 44 | .ten.columns { width: 82.6666666667%; } 45 | .eleven.columns { width: 91.3333333333%; } 46 | .twelve.columns { width: 100%; margin-left: 0; } 47 | } 48 | 49 | /* Estilos base 50 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 51 | 52 | body, 53 | input, 54 | textarea { 55 | font-family: 'Open Sans', sans-serif; 56 | font-size: 1rem; 57 | } 58 | 59 | h1 { 60 | font-family: 'Black Han Sans', sans-serif; 61 | } 62 | 63 | 64 | /* Estilos da seção de apresentação 65 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 66 | 67 | #presentation { 68 | height: 100vh; 69 | } 70 | 71 | #presentation img:first-child { 72 | display: block; 73 | margin: 30px auto 0; 74 | width: 150px; 75 | } 76 | 77 | #presentation h1 { 78 | margin-top: 25vh; 79 | } 80 | 81 | #presentation p { 82 | line-height: 2; 83 | } 84 | 85 | #presentation .columns img { 86 | display: block; 87 | margin-top: 20vh; 88 | width: 100%; 89 | } 90 | 91 | /* Estilos da seção de contato 92 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 93 | 94 | #contact-form { 95 | margin: 60px 0; 96 | } 97 | 98 | #contact-form form { 99 | margin-top: 25px; 100 | } 101 | 102 | #contact-form ul { 103 | list-style: none; 104 | margin-top: 30px; 105 | padding: 0; 106 | } 107 | 108 | #contact-form ul li { 109 | margin-bottom: 20px; 110 | } 111 | 112 | #contact-form ul li strong { 113 | display: inline-block; 114 | margin-right: 10px; 115 | } 116 | 117 | /* Estilos do formulário de contato 118 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 119 | 120 | .input-group { 121 | margin-bottom: 20px; 122 | } 123 | 124 | input[type="email"], 125 | input[type="number"], 126 | input[type="search"], 127 | input[type="text"], 128 | input[type="tel"], 129 | input[type="url"], 130 | input[type="password"], 131 | textarea, 132 | select { 133 | width: 100%; 134 | padding: 15px 10px; 135 | background-color: #fff; 136 | border: 1px solid #D1D1D1; 137 | border-radius: 7px; 138 | box-shadow: none; 139 | box-sizing: border-box; } 140 | input[type="email"], 141 | input[type="number"], 142 | input[type="search"], 143 | input[type="text"], 144 | input[type="tel"], 145 | input[type="url"], 146 | input[type="password"], 147 | textarea { 148 | -webkit-appearance: none; 149 | -moz-appearance: none; 150 | appearance: none; } 151 | textarea { 152 | min-height: 65px; 153 | height: 200px; 154 | margin-top: 20px; 155 | padding-top: 6px; 156 | padding-bottom: 6px; } 157 | input[type="email"]:focus, 158 | input[type="number"]:focus, 159 | input[type="search"]:focus, 160 | input[type="text"]:focus, 161 | input[type="tel"]:focus, 162 | input[type="url"]:focus, 163 | input[type="password"]:focus, 164 | textarea:focus, 165 | select:focus { 166 | border: 1px solid #7e459a; 167 | outline: 0; } 168 | label, 169 | legend { 170 | display: block; 171 | margin-bottom: .5rem; } 172 | fieldset { 173 | padding: 0; 174 | border-width: 0; } 175 | input[type="checkbox"], 176 | input[type="radio"] { 177 | display: inline; } 178 | label > .label-body { 179 | display: inline-block; 180 | margin-left: .5rem; 181 | font-weight: normal; } 182 | 183 | /* Clearing 184 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 185 | 186 | .container:after, 187 | .row:after, 188 | .u-cf { 189 | content: ""; 190 | display: table; 191 | clear: both; } -------------------------------------------------------------------------------- /02/scss/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Seletores 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

Seletores de CSS

16 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet culpa voluptates soluta libero id similique excepturi totam voluptatibus nobis, laboriosam fugit deserunt perferendis optio mollitia repudiandae autem. Officiis consectetur, vel.

17 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet culpa voluptates soluta libero id similique excepturi totam voluptatibus nobis, laboriosam fugit deserunt perferendis optio mollitia repudiandae autem. Officiis consectetur, vel.

18 |
19 |
20 | placeholder 21 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, consequuntur.

22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
NomeIdadeLocalizacao
Renan Florez26Sao Paulo
Beatriz Rizental22Curitiba
Renan Florez26Sao Paulo
Beatriz Rizental22Curitiba
Renan Florez26Sao Paulo
Beatriz Rizental22Curitiba
Renan Florez26Sao Paulo
Beatriz Rizental22Curitiba
77 |
78 |
79 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, cum temporibus omnis sit reprehenderit adipisci aliquid voluptatibus eveniet obcaecati voluptate dolorem, libero deleniti quidem, quasi aliquam, aspernatur illo eligendi? Officia.

80 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ad tenetur tempora eius sapiente rerum, nulla pariatur necessitatibus tempore, incidunt eos ut, laborum fugit. Quibusdam modi adipisci libero maxime facere?

81 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime error minima vel, pariatur nam non ullam voluptates sunt minus reprehenderit. Illum corrupti aspernatur nam ex expedita eveniet a doloribus suscipit?

82 |
83 |
84 |
85 |
86 |
87 | 88 | 89 | 90 | 91 |
92 |
93 | 94 | 99 |
100 | 101 | 102 | 106 | 107 |
108 | 109 |
110 | 111 | -------------------------------------------------------------------------------- /04/assets/icons/wallet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /02/css/seletores/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Seletores 6 | 7 | 8 | 9 | 78 | 79 | 80 |
81 |
82 |
83 |

Seletores de CSS

84 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet culpa voluptates soluta libero id similique excepturi totam voluptatibus nobis, laboriosam fugit deserunt perferendis optio mollitia repudiandae autem. Officiis consectetur, vel.

85 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet culpa voluptates soluta libero id similique excepturi totam voluptatibus nobis, laboriosam fugit deserunt perferendis optio mollitia repudiandae autem. Officiis consectetur, vel.

86 |
87 |
88 | placeholder 89 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, consequuntur.

90 |
91 |
92 |
93 |
94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 |
NomeIdadeLocalizacao
Renan Florez26Sao Paulo
Beatriz Rizental22Curitiba
Renan Florez26Sao Paulo
Beatriz Rizental22Curitiba
Renan Florez26Sao Paulo
Beatriz Rizental22Curitiba
Renan Florez26Sao Paulo
Beatriz Rizental22Curitiba
145 |
146 |
147 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, cum temporibus omnis sit reprehenderit adipisci aliquid voluptatibus eveniet obcaecati voluptate dolorem, libero deleniti quidem, quasi aliquam, aspernatur illo eligendi? Officia.

148 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ad tenetur tempora eius sapiente rerum, nulla pariatur necessitatibus tempore, incidunt eos ut, laborum fugit. Quibusdam modi adipisci libero maxime facere?

149 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime error minima vel, pariatur nam non ullam voluptates sunt minus reprehenderit. Illum corrupti aspernatur nam ex expedita eveniet a doloribus suscipit?

150 |
151 |
152 |
153 |
154 |
155 | 156 | 157 | 158 | 159 |
160 |
161 | 162 | 167 |
168 | 169 | 170 | 174 | 175 |
176 | 177 |
178 | 179 | -------------------------------------------------------------------------------- /02/utilidades/cheatsheet.md: -------------------------------------------------------------------------------- 1 | # Seletores de CSS 2 | 3 | > Tradução de https://gist.github.com/smutnyleszek/809a69dd05e1d5f12d01 4 | 5 | ## Seletores de Elementos 6 | 7 | **Elementos** -- seleciona todos os elementos `h2` na página 8 | 9 | ``` CSS 10 | h2 { 11 | foo: bar; 12 | } 13 | ``` 14 | 15 | **Groupos** -- seleciona todos os elementos `h1`, `h2` e `h3` na página 16 | 17 | ``` CSS 18 | h1, h2, h3 { 19 | foo: bar; 20 | } 21 | ``` 22 | 23 | 24 | ## Classes e IDs 25 | 26 | **Classes** -- seleciona todos os elementos com o atributo classe contendo `foo` ou somente elementos `p` com esta classe 27 | 28 | ``` CSS 29 | .foo { 30 | bar: fum; 31 | } 32 | p.foo { 33 | bar: fum; 34 | } 35 | ``` 36 | 37 | **ID** -- seleciona elementos com o id `baz` 38 | 39 | ``` CSS 40 | #foo { 41 | bar: fum; 42 | } 43 | ``` 44 | 45 | 46 | ## Seletores contextuais 47 | 48 | **Descendentes** -- seleciona todos os elementos `p` filhos de `#foo`, ou filhos de filhos de `#foo` e assim por diante infinitamente 49 | 50 | ``` CSS 51 | #foo p { 52 | bar: fum; 53 | } 54 | ``` 55 | 56 | **Irmãos** -- seleciona o elemento irmão `p` que vier imediatamente depois de um elemento `h2` 57 | 58 | ``` CSS 59 | h2 + p { 60 | foo: bar; 61 | } 62 | ``` 63 | 64 | **Filhos** -- seleciona todos os elementos `p` que forem filhos diretos de `#foo` 65 | 66 | ``` CSS 67 | #foo > p { 68 | bar: fum; 69 | } 70 | ``` 71 | 72 | **Irmãos no geral** -- seleciona todos os elementos `p` que sejam irmãos de elementos `h2` 73 | 74 | ``` CSS 75 | h2 ~ p { 76 | foo: bar; 77 | } 78 | ``` 79 | 80 | 81 | ## Pseudo seletores 82 | 83 | 84 | ### Pseudo seletores para links e inputs 85 | 86 | **Link não visitado** -- se aplica a elementos `a` que não foram visitados pelo usuário ainda 87 | 88 | ``` CSS 89 | a:link { 90 | foo: bar; 91 | } 92 | ``` 93 | 94 | **Links visitados** -- se aplica a elamentos `a` que já foram visitados pelo usuário 95 | 96 | ``` CSS 97 | a:visited { 98 | foo: bar; 99 | } 100 | ``` 101 | 102 | **Elementos focados** -- se aplica a todos os elementos com a classe `.foo` the estão prontos para interação 103 | 104 | ``` CSS 105 | .foo:focus { 106 | bar: fum; 107 | } 108 | ``` 109 | 110 | **Elementos com hover** -- se aplica quando o mouse está sobre o elemento `.foo` 111 | 112 | ``` CSS 113 | .foo:hover { 114 | bar: fum; 115 | } 116 | ``` 117 | 118 | **Elementos ativos** -- se aplica quando elementos com a classe `.foo` estão no meio de um click 119 | 120 | ``` CSS 121 | .foo:active { 122 | bar: fum; 123 | } 124 | ``` 125 | 126 | 127 | ### Pseudo seletores que se referem a irmãos 128 | 129 | **Primeiro filho** -- seleciona elementos com a classe `.foo` quando eles são o primeiro filho de seus pais 130 | 131 | ``` CSS 132 | .foo:first-child { 133 | bar: fum; 134 | } 135 | ``` 136 | 137 | **Último filho** -- seleciona elementos com a classe `.foo` quando eles são os últimos filhos de seus pais 138 | 139 | ``` CSS 140 | .foo:last-child { 141 | bar: fum; 142 | } 143 | ``` 144 | 145 | **Único filho** -- seleciona elementos com a classe `.foo` quando eles são os únicos filhos de seus pais 146 | 147 | ``` CSS 148 | .foo:only-child { 149 | bar: fum; 150 | } 151 | ``` 152 | 153 | **Primeiro do tipo** -- seleciona elementos `h2` quando eles são o primeiro de seu tipo dentro de seus pais 154 | 155 | ``` CSS 156 | h2:first-of-type { 157 | foo: bar; 158 | } 159 | ``` 160 | 161 | **Último do tipo** -- seleciona elementos `h2` quando eles são o último de seu tipo dentro de seus pais 162 | 163 | ``` CSS 164 | h2:last-of-type { 165 | foo: bar; 166 | } 167 | ``` 168 | 169 | **Único do tipo** -- seleciona elementos `h2` quando eles são o único de seu tipo dentro de seus pais 170 | 171 | ``` CSS 172 | h2:only-of-type { 173 | foo: bar; 174 | } 175 | ``` 176 | 177 | **Nth child** -- seleciona o `n`ésimo elemento `.foo` dentro de seus pais 178 | 179 | ``` CSS 180 | .foo:nth-child(n) { 181 | bar: fum; 182 | } 183 | ``` 184 | 185 | **Nth last child** -- seleciona o `n`ésimo elemento `.foo` dentro de seus pais, contando de trás pra frente 186 | 187 | ``` CSS 188 | .foo:nth-last-child(n) { 189 | bar: fum; 190 | } 191 | ``` 192 | 193 | **Nth of type** -- seleciona o `n`ésimo elemento do tipo `h2` dentro de seus pais 194 | 195 | ``` CSS 196 | h2:nth-of-type(n) { 197 | foo: bar; 198 | } 199 | ``` 200 | 201 | **Nth last of type** -- seleciona o `n`ésimo elemento do tipo `h2` dentro de seus pais, contando de trás pra frente 202 | 203 | ``` CSS 204 | h2:nth-last-of-type(n) { 205 | foo: bar; 206 | } 207 | ``` 208 | 209 | Valores úteis para `n`: 210 | 211 | - `odd` ou `2n+1` -- todo filho ímpar 212 | - `even` ou `2n` -- todo filho par 213 | - `n` -- todo `n`ésimo filho 214 | - `3n` -- todo filho múltiplo de três (3, 6, 9, ...) 215 | - `3n+1` -- (todo filho múltiplo de três) + 1 (1, 4, 7, ...) 216 | - `n+6` -- todos menos os primeiro cinco filhos (6, 7, 8, ...) 217 | - `-n+5` -- somente os primeiro cinco filhos (1, 2, ..., 5) 218 | 219 | 220 | ### Seletores de pseudo elementos 221 | 222 | **Primeira letra** -- seleciona a primeira letra do elemento `.foo` , comumente usado em conjunto com `:first-child` para selecionar o primeiro parágrafo de um texto 223 | 224 | ``` CSS 225 | .foo::first-letter { 226 | bar: fum; 227 | } 228 | ``` 229 | 230 | **Primeira linha** -- seleciona a primeira linha do elemento `.foo` , comumente usado em conjunto com `:first-child` para selecionar o primeiro parágrafo de um texto 231 | 232 | ``` CSS 233 | .foo::first-line { 234 | bar: fum; 235 | } 236 | ``` 237 | 238 | **Antes** -- adiciona conteúdo customizado antes do elemento `.foo` quando usado com a propriedade `content` 239 | 240 | ``` CSS 241 | .foo::before { 242 | bar: fum; 243 | content: 'baz'; 244 | } 245 | ``` 246 | 247 | **Depois** -- adiciona conteúdo customizado antes do elemento `.foo` quando usado com a propriedade `content` 248 | 249 | ``` CSS 250 | .foo::after { 251 | bar: fum; 252 | content: 'baz'; 253 | } 254 | ``` 255 | 256 | 257 | ## Seletores de atributos 258 | 259 | **Presente** -- seleciona elementos foo `.foo` com o atributo `bar` presente, independente de seu valor 260 | 261 | ``` CSS 262 | .foo[bar] { 263 | fum: baz; 264 | } 265 | ``` 266 | 267 | **Exato** -- seleciona elementos `.foo` onde o atributo `bar` tem o valor exato `fum` 268 | 269 | ``` CSS 270 | .foo[bar="fum"] { 271 | baz: qux; 272 | } 273 | ``` 274 | 275 | **Separados por espaços vazios** -- seleciona elementos `.foo` onde o atributo `bar` contém o valor parcial `fum` separado por espaços em branco 276 | 277 | ``` CSS 278 | .foo[bar~="fum"] { 279 | baz: qux; 280 | } 281 | ``` 282 | 283 | **Separados por hífens** -- seleciona elementos `.foo` onde o atributo `bar` contêm o valor parcial `fum` imediatamente seguido de um hífen (`-`) 284 | 285 | ``` CSS 286 | .foo[bar|="fum"] { 287 | baz: qux; 288 | } 289 | ``` 290 | 291 | **Começa com** -- seleciona elementos `.foo` onde o atributo `bar` começa com `fum` 292 | 293 | ``` CSS 294 | .foo[bar^="fum"] { 295 | baz: qux; 296 | } 297 | ``` 298 | 299 | **Termina com** -- seleciona elementos `.foo` onde o atributo `bar` termina com `fum` 300 | 301 | ``` CSS 302 | .foo[bar$="fum"] { 303 | baz: qux; 304 | } 305 | ``` 306 | 307 | **Contém** -- seleciona elementos `.foo` onde o atributo `bar` contém a string `fum` seguida e precidida por qualquer caractere 308 | 309 | ``` CSS 310 | .foo[bar*="fum"] { 311 | baz: qux; 312 | } 313 | ``` 314 | 315 | 316 | ## Misc 317 | 318 | **Not** -- seleciona elementos `.foo` que NÃO são elementos `.bar` 319 | 320 | ``` CSS 321 | .foo:not(.bar) { 322 | fum: baz; 323 | } 324 | ``` 325 | 326 | **Root** -- seleciona o pai de nível mais alto no DOM 327 | 328 | ``` CSS 329 | :root { 330 | foo: bar; 331 | } 332 | ``` 333 | 334 | **Empty** -- seleciona elementos `.foo` que não tem filhos nem espaços em branco dentro 335 | 336 | ``` CSS 337 | .foo:empty { 338 | bar: fum; 339 | } 340 | ``` 341 | -------------------------------------------------------------------------------- /02/scss/styles/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } -------------------------------------------------------------------------------- /02/css/seletores/styles/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } -------------------------------------------------------------------------------- /02/scss/styles/skeleton.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeleton V2.0.4 3 | * Copyright 2014, Dave Gamache 4 | * www.getskeleton.com 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 12/29/2014 8 | */ 9 | 10 | 11 | /* Table of contents 12 | –––––––––––––––––––––––––––––––––––––––––––––––––– 13 | - Grid 14 | - Base Styles 15 | - Typography 16 | - Links 17 | - Buttons 18 | - Forms 19 | - Lists 20 | - Code 21 | - Tables 22 | - Spacing 23 | - Utilities 24 | - Clearing 25 | - Media Queries 26 | */ 27 | 28 | 29 | /* Grid 30 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 31 | .container { 32 | position: relative; 33 | width: 100%; 34 | max-width: 960px; 35 | margin: 0 auto; 36 | padding: 0 20px; 37 | box-sizing: border-box; } 38 | .column, 39 | .columns { 40 | width: 100%; 41 | float: left; 42 | box-sizing: border-box; } 43 | 44 | /* For devices larger than 400px */ 45 | @media (min-width: 400px) { 46 | .container { 47 | width: 85%; 48 | padding: 0; } 49 | } 50 | 51 | /* For devices larger than 550px */ 52 | @media (min-width: 550px) { 53 | .container { 54 | width: 80%; } 55 | .column, 56 | .columns { 57 | margin-left: 4%; } 58 | .column:first-child, 59 | .columns:first-child { 60 | margin-left: 0; } 61 | 62 | .one.column, 63 | .one.columns { width: 4.66666666667%; } 64 | .two.columns { width: 13.3333333333%; } 65 | .three.columns { width: 22%; } 66 | .four.columns { width: 30.6666666667%; } 67 | .five.columns { width: 39.3333333333%; } 68 | .six.columns { width: 48%; } 69 | .seven.columns { width: 56.6666666667%; } 70 | .eight.columns { width: 65.3333333333%; } 71 | .nine.columns { width: 74.0%; } 72 | .ten.columns { width: 82.6666666667%; } 73 | .eleven.columns { width: 91.3333333333%; } 74 | .twelve.columns { width: 100%; margin-left: 0; } 75 | 76 | .one-third.column { width: 30.6666666667%; } 77 | .two-thirds.column { width: 65.3333333333%; } 78 | 79 | .one-half.column { width: 48%; } 80 | 81 | /* Offsets */ 82 | .offset-by-one.column, 83 | .offset-by-one.columns { margin-left: 8.66666666667%; } 84 | .offset-by-two.column, 85 | .offset-by-two.columns { margin-left: 17.3333333333%; } 86 | .offset-by-three.column, 87 | .offset-by-three.columns { margin-left: 26%; } 88 | .offset-by-four.column, 89 | .offset-by-four.columns { margin-left: 34.6666666667%; } 90 | .offset-by-five.column, 91 | .offset-by-five.columns { margin-left: 43.3333333333%; } 92 | .offset-by-six.column, 93 | .offset-by-six.columns { margin-left: 52%; } 94 | .offset-by-seven.column, 95 | .offset-by-seven.columns { margin-left: 60.6666666667%; } 96 | .offset-by-eight.column, 97 | .offset-by-eight.columns { margin-left: 69.3333333333%; } 98 | .offset-by-nine.column, 99 | .offset-by-nine.columns { margin-left: 78.0%; } 100 | .offset-by-ten.column, 101 | .offset-by-ten.columns { margin-left: 86.6666666667%; } 102 | .offset-by-eleven.column, 103 | .offset-by-eleven.columns { margin-left: 95.3333333333%; } 104 | 105 | .offset-by-one-third.column, 106 | .offset-by-one-third.columns { margin-left: 34.6666666667%; } 107 | .offset-by-two-thirds.column, 108 | .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } 109 | 110 | .offset-by-one-half.column, 111 | .offset-by-one-half.columns { margin-left: 52%; } 112 | 113 | } 114 | 115 | 116 | /* Base Styles 117 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 118 | /* NOTE 119 | html is set to 62.5% so that all the REM measurements throughout Skeleton 120 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 121 | html { 122 | font-size: 62.5%; } 123 | body { 124 | font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ 125 | line-height: 1.6; 126 | font-weight: 400; 127 | font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 128 | color: #222; } 129 | 130 | 131 | /* Typography 132 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 133 | h1, h2, h3, h4, h5, h6 { 134 | margin-top: 0; 135 | margin-bottom: 2rem; 136 | font-weight: 300; } 137 | h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} 138 | h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } 139 | h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } 140 | h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } 141 | h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } 142 | h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } 143 | 144 | /* Larger than phablet */ 145 | @media (min-width: 550px) { 146 | h1 { font-size: 5.0rem; } 147 | h2 { font-size: 4.2rem; } 148 | h3 { font-size: 3.6rem; } 149 | h4 { font-size: 3.0rem; } 150 | h5 { font-size: 2.4rem; } 151 | h6 { font-size: 1.5rem; } 152 | } 153 | 154 | p { 155 | margin-top: 0; } 156 | 157 | 158 | /* Links 159 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 160 | a { 161 | color: #1EAEDB; } 162 | a:hover { 163 | color: #0FA0CE; } 164 | 165 | 166 | /* Buttons 167 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 168 | .button, 169 | button, 170 | input[type="submit"], 171 | input[type="reset"], 172 | input[type="button"] { 173 | display: inline-block; 174 | height: 38px; 175 | padding: 0 30px; 176 | color: #555; 177 | text-align: center; 178 | font-size: 11px; 179 | font-weight: 600; 180 | line-height: 38px; 181 | letter-spacing: .1rem; 182 | text-transform: uppercase; 183 | text-decoration: none; 184 | white-space: nowrap; 185 | background-color: transparent; 186 | border-radius: 4px; 187 | border: 1px solid #bbb; 188 | cursor: pointer; 189 | box-sizing: border-box; } 190 | .button:hover, 191 | button:hover, 192 | input[type="submit"]:hover, 193 | input[type="reset"]:hover, 194 | input[type="button"]:hover, 195 | .button:focus, 196 | button:focus, 197 | input[type="submit"]:focus, 198 | input[type="reset"]:focus, 199 | input[type="button"]:focus { 200 | color: #333; 201 | border-color: #888; 202 | outline: 0; } 203 | .button.button-primary, 204 | button.button-primary, 205 | input[type="submit"].button-primary, 206 | input[type="reset"].button-primary, 207 | input[type="button"].button-primary { 208 | color: #FFF; 209 | background-color: #33C3F0; 210 | border-color: #33C3F0; } 211 | .button.button-primary:hover, 212 | button.button-primary:hover, 213 | input[type="submit"].button-primary:hover, 214 | input[type="reset"].button-primary:hover, 215 | input[type="button"].button-primary:hover, 216 | .button.button-primary:focus, 217 | button.button-primary:focus, 218 | input[type="submit"].button-primary:focus, 219 | input[type="reset"].button-primary:focus, 220 | input[type="button"].button-primary:focus { 221 | color: #FFF; 222 | background-color: #1EAEDB; 223 | border-color: #1EAEDB; } 224 | 225 | 226 | /* Forms 227 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 228 | input[type="email"], 229 | input[type="number"], 230 | input[type="search"], 231 | input[type="text"], 232 | input[type="tel"], 233 | input[type="url"], 234 | input[type="password"], 235 | textarea, 236 | select { 237 | height: 38px; 238 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 239 | background-color: #fff; 240 | border: 1px solid #D1D1D1; 241 | border-radius: 4px; 242 | box-shadow: none; 243 | box-sizing: border-box; } 244 | /* Removes awkward default styles on some inputs for iOS */ 245 | input[type="email"], 246 | input[type="number"], 247 | input[type="search"], 248 | input[type="text"], 249 | input[type="tel"], 250 | input[type="url"], 251 | input[type="password"], 252 | textarea { 253 | -webkit-appearance: none; 254 | -moz-appearance: none; 255 | appearance: none; } 256 | textarea { 257 | min-height: 65px; 258 | padding-top: 6px; 259 | padding-bottom: 6px; } 260 | input[type="email"]:focus, 261 | input[type="number"]:focus, 262 | input[type="search"]:focus, 263 | input[type="text"]:focus, 264 | input[type="tel"]:focus, 265 | input[type="url"]:focus, 266 | input[type="password"]:focus, 267 | textarea:focus, 268 | select:focus { 269 | border: 1px solid #33C3F0; 270 | outline: 0; } 271 | label, 272 | legend { 273 | display: block; 274 | margin-bottom: .5rem; 275 | font-weight: 600; } 276 | fieldset { 277 | padding: 0; 278 | border-width: 0; } 279 | input[type="checkbox"], 280 | input[type="radio"] { 281 | display: inline; } 282 | label > .label-body { 283 | display: inline-block; 284 | margin-left: .5rem; 285 | font-weight: normal; } 286 | 287 | 288 | /* Lists 289 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 290 | ul { 291 | list-style: circle inside; } 292 | ol { 293 | list-style: decimal inside; } 294 | ol, ul { 295 | padding-left: 0; 296 | margin-top: 0; } 297 | ul ul, 298 | ul ol, 299 | ol ol, 300 | ol ul { 301 | margin: 1.5rem 0 1.5rem 3rem; 302 | font-size: 90%; } 303 | li { 304 | margin-bottom: 1rem; } 305 | 306 | 307 | /* Code 308 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 309 | code { 310 | padding: .2rem .5rem; 311 | margin: 0 .2rem; 312 | font-size: 90%; 313 | white-space: nowrap; 314 | background: #F1F1F1; 315 | border: 1px solid #E1E1E1; 316 | border-radius: 4px; } 317 | pre > code { 318 | display: block; 319 | padding: 1rem 1.5rem; 320 | white-space: pre; } 321 | 322 | 323 | /* Tables 324 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 325 | th, 326 | td { 327 | padding: 12px 15px; 328 | text-align: left; 329 | border-bottom: 1px solid #E1E1E1; } 330 | th:first-child, 331 | td:first-child { 332 | padding-left: 0; } 333 | th:last-child, 334 | td:last-child { 335 | padding-right: 0; } 336 | 337 | 338 | /* Spacing 339 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 340 | button, 341 | .button { 342 | margin-bottom: 1rem; } 343 | input, 344 | textarea, 345 | select, 346 | fieldset { 347 | margin-bottom: 1.5rem; } 348 | pre, 349 | blockquote, 350 | dl, 351 | figure, 352 | table, 353 | p, 354 | ul, 355 | ol, 356 | form { 357 | margin-bottom: 2.5rem; } 358 | 359 | 360 | /* Utilities 361 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 362 | .u-full-width { 363 | width: 100%; 364 | box-sizing: border-box; } 365 | .u-max-full-width { 366 | max-width: 100%; 367 | box-sizing: border-box; } 368 | .u-pull-right { 369 | float: right; } 370 | .u-pull-left { 371 | float: left; } 372 | 373 | 374 | /* Misc 375 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 376 | hr { 377 | margin-top: 3rem; 378 | margin-bottom: 3.5rem; 379 | border-width: 0; 380 | border-top: 1px solid #E1E1E1; } 381 | 382 | 383 | /* Clearing 384 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 385 | 386 | /* Self Clearing Goodness */ 387 | .container:after, 388 | .row:after, 389 | .u-cf { 390 | content: ""; 391 | display: table; 392 | clear: both; } 393 | 394 | 395 | /* Media Queries 396 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 397 | /* 398 | Note: The best way to structure the use of media queries is to create the queries 399 | near the relevant code. For example, if you wanted to change the styles for buttons 400 | on small devices, paste the mobile query code up in the buttons section and style it 401 | there. 402 | */ 403 | 404 | 405 | /* Larger than mobile */ 406 | @media (min-width: 400px) {} 407 | 408 | /* Larger than phablet (also point when grid becomes active) */ 409 | @media (min-width: 550px) {} 410 | 411 | /* Larger than tablet */ 412 | @media (min-width: 750px) {} 413 | 414 | /* Larger than desktop */ 415 | @media (min-width: 1000px) {} 416 | 417 | /* Larger than Desktop HD */ 418 | @media (min-width: 1200px) {} 419 | -------------------------------------------------------------------------------- /02/css/seletores/styles/skeleton.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeleton V2.0.4 3 | * Copyright 2014, Dave Gamache 4 | * www.getskeleton.com 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 12/29/2014 8 | */ 9 | 10 | 11 | /* Table of contents 12 | –––––––––––––––––––––––––––––––––––––––––––––––––– 13 | - Grid 14 | - Base Styles 15 | - Typography 16 | - Links 17 | - Buttons 18 | - Forms 19 | - Lists 20 | - Code 21 | - Tables 22 | - Spacing 23 | - Utilities 24 | - Clearing 25 | - Media Queries 26 | */ 27 | 28 | 29 | /* Grid 30 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 31 | .container { 32 | position: relative; 33 | width: 100%; 34 | max-width: 960px; 35 | margin: 0 auto; 36 | padding: 0 20px; 37 | box-sizing: border-box; } 38 | .column, 39 | .columns { 40 | width: 100%; 41 | float: left; 42 | box-sizing: border-box; } 43 | 44 | /* For devices larger than 400px */ 45 | @media (min-width: 400px) { 46 | .container { 47 | width: 85%; 48 | padding: 0; } 49 | } 50 | 51 | /* For devices larger than 550px */ 52 | @media (min-width: 550px) { 53 | .container { 54 | width: 80%; } 55 | .column, 56 | .columns { 57 | margin-left: 4%; } 58 | .column:first-child, 59 | .columns:first-child { 60 | margin-left: 0; } 61 | 62 | .one.column, 63 | .one.columns { width: 4.66666666667%; } 64 | .two.columns { width: 13.3333333333%; } 65 | .three.columns { width: 22%; } 66 | .four.columns { width: 30.6666666667%; } 67 | .five.columns { width: 39.3333333333%; } 68 | .six.columns { width: 48%; } 69 | .seven.columns { width: 56.6666666667%; } 70 | .eight.columns { width: 65.3333333333%; } 71 | .nine.columns { width: 74.0%; } 72 | .ten.columns { width: 82.6666666667%; } 73 | .eleven.columns { width: 91.3333333333%; } 74 | .twelve.columns { width: 100%; margin-left: 0; } 75 | 76 | .one-third.column { width: 30.6666666667%; } 77 | .two-thirds.column { width: 65.3333333333%; } 78 | 79 | .one-half.column { width: 48%; } 80 | 81 | /* Offsets */ 82 | .offset-by-one.column, 83 | .offset-by-one.columns { margin-left: 8.66666666667%; } 84 | .offset-by-two.column, 85 | .offset-by-two.columns { margin-left: 17.3333333333%; } 86 | .offset-by-three.column, 87 | .offset-by-three.columns { margin-left: 26%; } 88 | .offset-by-four.column, 89 | .offset-by-four.columns { margin-left: 34.6666666667%; } 90 | .offset-by-five.column, 91 | .offset-by-five.columns { margin-left: 43.3333333333%; } 92 | .offset-by-six.column, 93 | .offset-by-six.columns { margin-left: 52%; } 94 | .offset-by-seven.column, 95 | .offset-by-seven.columns { margin-left: 60.6666666667%; } 96 | .offset-by-eight.column, 97 | .offset-by-eight.columns { margin-left: 69.3333333333%; } 98 | .offset-by-nine.column, 99 | .offset-by-nine.columns { margin-left: 78.0%; } 100 | .offset-by-ten.column, 101 | .offset-by-ten.columns { margin-left: 86.6666666667%; } 102 | .offset-by-eleven.column, 103 | .offset-by-eleven.columns { margin-left: 95.3333333333%; } 104 | 105 | .offset-by-one-third.column, 106 | .offset-by-one-third.columns { margin-left: 34.6666666667%; } 107 | .offset-by-two-thirds.column, 108 | .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } 109 | 110 | .offset-by-one-half.column, 111 | .offset-by-one-half.columns { margin-left: 52%; } 112 | 113 | } 114 | 115 | 116 | /* Base Styles 117 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 118 | /* NOTE 119 | html is set to 62.5% so that all the REM measurements throughout Skeleton 120 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 121 | html { 122 | font-size: 62.5%; } 123 | body { 124 | font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ 125 | line-height: 1.6; 126 | font-weight: 400; 127 | font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 128 | color: #222; } 129 | 130 | 131 | /* Typography 132 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 133 | h1, h2, h3, h4, h5, h6 { 134 | margin-top: 0; 135 | margin-bottom: 2rem; 136 | font-weight: 300; } 137 | h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} 138 | h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } 139 | h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } 140 | h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } 141 | h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } 142 | h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } 143 | 144 | /* Larger than phablet */ 145 | @media (min-width: 550px) { 146 | h1 { font-size: 5.0rem; } 147 | h2 { font-size: 4.2rem; } 148 | h3 { font-size: 3.6rem; } 149 | h4 { font-size: 3.0rem; } 150 | h5 { font-size: 2.4rem; } 151 | h6 { font-size: 1.5rem; } 152 | } 153 | 154 | p { 155 | margin-top: 0; } 156 | 157 | 158 | /* Links 159 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 160 | a { 161 | color: #1EAEDB; } 162 | a:hover { 163 | color: #0FA0CE; } 164 | 165 | 166 | /* Buttons 167 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 168 | .button, 169 | button, 170 | input[type="submit"], 171 | input[type="reset"], 172 | input[type="button"] { 173 | display: inline-block; 174 | height: 38px; 175 | padding: 0 30px; 176 | color: #555; 177 | text-align: center; 178 | font-size: 11px; 179 | font-weight: 600; 180 | line-height: 38px; 181 | letter-spacing: .1rem; 182 | text-transform: uppercase; 183 | text-decoration: none; 184 | white-space: nowrap; 185 | background-color: transparent; 186 | border-radius: 4px; 187 | border: 1px solid #bbb; 188 | cursor: pointer; 189 | box-sizing: border-box; } 190 | .button:hover, 191 | button:hover, 192 | input[type="submit"]:hover, 193 | input[type="reset"]:hover, 194 | input[type="button"]:hover, 195 | .button:focus, 196 | button:focus, 197 | input[type="submit"]:focus, 198 | input[type="reset"]:focus, 199 | input[type="button"]:focus { 200 | color: #333; 201 | border-color: #888; 202 | outline: 0; } 203 | .button.button-primary, 204 | button.button-primary, 205 | input[type="submit"].button-primary, 206 | input[type="reset"].button-primary, 207 | input[type="button"].button-primary { 208 | color: #FFF; 209 | background-color: #33C3F0; 210 | border-color: #33C3F0; } 211 | .button.button-primary:hover, 212 | button.button-primary:hover, 213 | input[type="submit"].button-primary:hover, 214 | input[type="reset"].button-primary:hover, 215 | input[type="button"].button-primary:hover, 216 | .button.button-primary:focus, 217 | button.button-primary:focus, 218 | input[type="submit"].button-primary:focus, 219 | input[type="reset"].button-primary:focus, 220 | input[type="button"].button-primary:focus { 221 | color: #FFF; 222 | background-color: #1EAEDB; 223 | border-color: #1EAEDB; } 224 | 225 | 226 | /* Forms 227 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 228 | input[type="email"], 229 | input[type="number"], 230 | input[type="search"], 231 | input[type="text"], 232 | input[type="tel"], 233 | input[type="url"], 234 | input[type="password"], 235 | textarea, 236 | select { 237 | height: 38px; 238 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 239 | background-color: #fff; 240 | border: 1px solid #D1D1D1; 241 | border-radius: 4px; 242 | box-shadow: none; 243 | box-sizing: border-box; } 244 | /* Removes awkward default styles on some inputs for iOS */ 245 | input[type="email"], 246 | input[type="number"], 247 | input[type="search"], 248 | input[type="text"], 249 | input[type="tel"], 250 | input[type="url"], 251 | input[type="password"], 252 | textarea { 253 | -webkit-appearance: none; 254 | -moz-appearance: none; 255 | appearance: none; } 256 | textarea { 257 | min-height: 65px; 258 | padding-top: 6px; 259 | padding-bottom: 6px; } 260 | input[type="email"]:focus, 261 | input[type="number"]:focus, 262 | input[type="search"]:focus, 263 | input[type="text"]:focus, 264 | input[type="tel"]:focus, 265 | input[type="url"]:focus, 266 | input[type="password"]:focus, 267 | textarea:focus, 268 | select:focus { 269 | border: 1px solid #33C3F0; 270 | outline: 0; } 271 | label, 272 | legend { 273 | display: block; 274 | margin-bottom: .5rem; 275 | font-weight: 600; } 276 | fieldset { 277 | padding: 0; 278 | border-width: 0; } 279 | input[type="checkbox"], 280 | input[type="radio"] { 281 | display: inline; } 282 | label > .label-body { 283 | display: inline-block; 284 | margin-left: .5rem; 285 | font-weight: normal; } 286 | 287 | 288 | /* Lists 289 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 290 | ul { 291 | list-style: circle inside; } 292 | ol { 293 | list-style: decimal inside; } 294 | ol, ul { 295 | padding-left: 0; 296 | margin-top: 0; } 297 | ul ul, 298 | ul ol, 299 | ol ol, 300 | ol ul { 301 | margin: 1.5rem 0 1.5rem 3rem; 302 | font-size: 90%; } 303 | li { 304 | margin-bottom: 1rem; } 305 | 306 | 307 | /* Code 308 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 309 | code { 310 | padding: .2rem .5rem; 311 | margin: 0 .2rem; 312 | font-size: 90%; 313 | white-space: nowrap; 314 | background: #F1F1F1; 315 | border: 1px solid #E1E1E1; 316 | border-radius: 4px; } 317 | pre > code { 318 | display: block; 319 | padding: 1rem 1.5rem; 320 | white-space: pre; } 321 | 322 | 323 | /* Tables 324 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 325 | th, 326 | td { 327 | padding: 12px 15px; 328 | text-align: left; 329 | border-bottom: 1px solid #E1E1E1; } 330 | th:first-child, 331 | td:first-child { 332 | padding-left: 0; } 333 | th:last-child, 334 | td:last-child { 335 | padding-right: 0; } 336 | 337 | 338 | /* Spacing 339 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 340 | button, 341 | .button { 342 | margin-bottom: 1rem; } 343 | input, 344 | textarea, 345 | select, 346 | fieldset { 347 | margin-bottom: 1.5rem; } 348 | pre, 349 | blockquote, 350 | dl, 351 | figure, 352 | table, 353 | p, 354 | ul, 355 | ol, 356 | form { 357 | margin-bottom: 2.5rem; } 358 | 359 | 360 | /* Utilities 361 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 362 | .u-full-width { 363 | width: 100%; 364 | box-sizing: border-box; } 365 | .u-max-full-width { 366 | max-width: 100%; 367 | box-sizing: border-box; } 368 | .u-pull-right { 369 | float: right; } 370 | .u-pull-left { 371 | float: left; } 372 | 373 | 374 | /* Misc 375 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 376 | hr { 377 | margin-top: 3rem; 378 | margin-bottom: 3.5rem; 379 | border-width: 0; 380 | border-top: 1px solid #E1E1E1; } 381 | 382 | 383 | /* Clearing 384 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 385 | 386 | /* Self Clearing Goodness */ 387 | .container:after, 388 | .row:after, 389 | .u-cf { 390 | content: ""; 391 | display: table; 392 | clear: both; } 393 | 394 | 395 | /* Media Queries 396 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 397 | /* 398 | Note: The best way to structure the use of media queries is to create the queries 399 | near the relevant code. For example, if you wanted to change the styles for buttons 400 | on small devices, paste the mobile query code up in the buttons section and style it 401 | there. 402 | */ 403 | 404 | 405 | /* Larger than mobile */ 406 | @media (min-width: 400px) {} 407 | 408 | /* Larger than phablet (also point when grid becomes active) */ 409 | @media (min-width: 550px) {} 410 | 411 | /* Larger than tablet */ 412 | @media (min-width: 750px) {} 413 | 414 | /* Larger than desktop */ 415 | @media (min-width: 1000px) {} 416 | 417 | /* Larger than Desktop HD */ 418 | @media (min-width: 1200px) {} 419 | --------------------------------------------------------------------------------