├── index.html └── css └── framework.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Framework de CSS 8 | 9 | 10 | 11 |

12 | 20 |

21 | 22 |

23 |

Encabezado H1

24 |

Encabezado H2

25 |

Encabezado H3

26 |

Encabezado H4

27 |

Encabezado H5

28 |

Encabezado H6

29 | 30 |

Display 1

31 |

Display 2

32 |

Display 3

33 |

34 | 35 |

36 |

37 |

Card 1

38 |

Card 2

39 |

Card 3

40 |

Card 4

41 |

Card 5

42 |

Card 6

43 |

44 |

45 | 46 |

47 |

Lorem ipsum dolor sit amet.

48 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit itaque, placeat quis beatae, eligendi fuga expedita modi ducimus magni quasi eos dolorem numquam quae porro cupiditate doloribus blanditiis impedit distinctio.

49 | 50 | 51 |

52 | 53 |

54 |

55 |

56 |

57 |

Lorem ipsum dolor sit amet.

58 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure veniam officiis, labore cumque explicabo soluta repellendus eos velit earum. Dicta itaque quas, officiis porro quae repudiandae aperiam aliquid animi maxime!

59 |

60 |

61 |

Lorem ipsum dolor sit amet.

62 |

63 |

64 |

65 |

66 |

Registrate

67 | 73 |

74 |

75 |

76 | 77 | -------------------------------------------------------------------------------- /css/framework.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap'); 2 | 3 | /* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 4 | html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} 5 | 6 | /* ==================== 7 | * CONFIGURACION * 8 | ==================== */ 9 | *, 10 | *::after, 11 | *::before { 12 | box-sizing: border-box; 13 | } 14 | 15 | /* ==================== 16 | * VARIABLES * 17 | ==================== */ 18 | :root { 19 | --fuente: 'Open Sans', sans-serif; 20 | --fondo: #f2f2f2; 21 | --ancho-contenedor: 1200px; 22 | } 23 | 24 | /* ==================== 25 | * ESTILOS GENERALES * 26 | ==================== */ 27 | body { 28 | background: var(--fondo); 29 | font-family: var(--fuente); 30 | font-size: 18px; 31 | } 32 | 33 | p { 34 | line-height: 27px; 35 | } 36 | 37 | img { 38 | vertical-align: top; 39 | width: 100%; 40 | } 41 | 42 | /* ==================== 43 | * CONTENEDORES * 44 | ==================== */ 45 | .contenedor { 46 | max-width: 90%; 47 | width: var(--ancho-contenedor); 48 | margin: 20px auto; 49 | overflow: hidden; 50 | } 51 | 52 | .contenedor-ancho { 53 | width: 100%; 54 | padding: 0 40px; 55 | margin: 20px auto; 56 | } 57 | 58 | /* ==================== 59 | * GRID * 60 | ==================== */ 61 | .grid { 62 | display: grid; 63 | gap: 20px; 64 | margin-bottom: 20px; 65 | } 66 | 67 | /* Tamaño Grande - Computadoras y TV */ 68 | .col-1 { grid-template-columns: repeat(1, 1fr); } 69 | .col-2 { grid-template-columns: repeat(2, 1fr); } 70 | .col-3 { grid-template-columns: repeat(3, 1fr); } 71 | .col-4 { grid-template-columns: repeat(4, 1fr); } 72 | .col-5 { grid-template-columns: repeat(5, 1fr); } 73 | .col-6 { grid-template-columns: repeat(6, 1fr); } 74 | .col-7 { grid-template-columns: repeat(7, 1fr); } 75 | .col-8 { grid-template-columns: repeat(8, 1fr); } 76 | .col-9 { grid-template-columns: repeat(9, 1fr); } 77 | .col-10 { grid-template-columns: repeat(10, 1fr); } 78 | .col-11 { grid-template-columns: repeat(11, 1fr); } 79 | .col-12 { grid-template-columns: repeat(12, 1fr); } 80 | 81 | .span-1 { grid-column: span 1; } 82 | .span-2 { grid-column: span 2; } 83 | .span-3 { grid-column: span 3; } 84 | .span-4 { grid-column: span 4; } 85 | .span-5 { grid-column: span 5; } 86 | .span-6 { grid-column: span 6; } 87 | .span-7 { grid-column: span 7; } 88 | .span-8 { grid-column: span 8; } 89 | .span-9 { grid-column: span 9; } 90 | .span-10 { grid-column: span 10; } 91 | .span-11 { grid-column: span 11; } 92 | .span-12 { grid-column: span 12; } 93 | 94 | /* Tamaño Mediano - Tablets */ 95 | @media screen and (max-width: 992px) { 96 | .med-col-1 { grid-template-columns: repeat(1, 1fr); } 97 | .med-col-2 { grid-template-columns: repeat(2, 1fr); } 98 | .med-col-3 { grid-template-columns: repeat(3, 1fr); } 99 | .med-col-4 { grid-template-columns: repeat(4, 1fr); } 100 | .med-col-5 { grid-template-columns: repeat(5, 1fr); } 101 | .med-col-6 { grid-template-columns: repeat(6, 1fr); } 102 | .med-col-7 { grid-template-columns: repeat(7, 1fr); } 103 | .med-col-8 { grid-template-columns: repeat(8, 1fr); } 104 | .med-col-9 { grid-template-columns: repeat(9, 1fr); } 105 | .med-col-10 { grid-template-columns: repeat(10, 1fr); } 106 | .med-col-11 { grid-template-columns: repeat(11, 1fr); } 107 | .med-col-12 { grid-template-columns: repeat(12, 1fr); } 108 | 109 | .med-span-1 { grid-column: span 1; } 110 | .med-span-2 { grid-column: span 2; } 111 | .med-span-3 { grid-column: span 3; } 112 | .med-span-4 { grid-column: span 4; } 113 | .med-span-5 { grid-column: span 5; } 114 | .med-span-6 { grid-column: span 6; } 115 | .med-span-7 { grid-column: span 7; } 116 | .med-span-8 { grid-column: span 8; } 117 | .med-span-9 { grid-column: span 9; } 118 | .med-span-10 { grid-column: span 10; } 119 | .med-span-11 { grid-column: span 11; } 120 | .med-span-12 { grid-column: span 12; } 121 | } 122 | 123 | /* Tamaño Pequeño - Celulares */ 124 | @media screen and (max-width: 576px) { 125 | .peq-col-1 { grid-template-columns: repeat(1, 1fr); } 126 | .peq-col-2 { grid-template-columns: repeat(2, 1fr); } 127 | .peq-col-3 { grid-template-columns: repeat(3, 1fr); } 128 | .peq-col-4 { grid-template-columns: repeat(4, 1fr); } 129 | .peq-col-5 { grid-template-columns: repeat(5, 1fr); } 130 | .peq-col-6 { grid-template-columns: repeat(6, 1fr); } 131 | .peq-col-7 { grid-template-columns: repeat(7, 1fr); } 132 | .peq-col-8 { grid-template-columns: repeat(8, 1fr); } 133 | .peq-col-9 { grid-template-columns: repeat(9, 1fr); } 134 | .peq-col-10 { grid-template-columns: repeat(10, 1fr); } 135 | .peq-col-11 { grid-template-columns: repeat(11, 1fr); } 136 | .peq-col-12 { grid-template-columns: repeat(12, 1fr); } 137 | } 138 | 139 | 140 | /* ==================== 141 | * COMPONENTES * 142 | ==================== */ 143 | .card { 144 | padding: 40px; 145 | background: #fff; 146 | border-radius: 3px; 147 | box-shadow: 0px 0px 30px rgba(221,221,211,0.3); 148 | } 149 | 150 | .nav { 151 | background: rgba(67, 16 ,195); 152 | display: flex; 153 | flex-wrap: wrap; 154 | } 155 | 156 | .nav .contenedor { 157 | display: flex; 158 | flex-wrap: wrap; 159 | margin: 0px auto; 160 | } 161 | 162 | .nav a { 163 | color: #fff; 164 | text-decoration: none; 165 | display: flex; 166 | align-items: center; 167 | text-align: center; 168 | padding: 15px 25px; 169 | transition: .3s ease all; 170 | font-size: 18px; 171 | } 172 | 173 | .nav a.activo, 174 | .nav a:hover { 175 | background: rgba(89,59,221); 176 | } 177 | 178 | /* ==================== 179 | * FUENTES * 180 | ==================== */ 181 | h1, h2, h3, h4, h5, h6 { 182 | margin-top: 0; 183 | } 184 | 185 | .display-1 { 186 | font-weight: 700; 187 | font-size: 64px; 188 | } 189 | 190 | .display-2 { 191 | font-weight: 700; 192 | font-size: 54px; 193 | } 194 | 195 | .display-3 { 196 | font-weight: 700; 197 | font-size: 44px; 198 | } 199 | 200 | /* ==================== 201 | * FORMULARIOS * 202 | ==================== */ 203 | form * { 204 | font-family: var(--fuente); 205 | } 206 | 207 | form .input { 208 | padding: 10px 15px; 209 | border-radius: 3px; 210 | border: 1px solid #d6d6d6; 211 | transition: .3s ease all; 212 | width: 100%; 213 | margin-bottom: 20px; 214 | } 215 | 216 | form .input:focus { 217 | border: 1px solid #641ee7; 218 | outline: none; 219 | } 220 | 221 | .boton { 222 | background: #641ee7; 223 | border: none; 224 | cursor: pointer; 225 | color: #fff; 226 | display: inline-block; 227 | padding: 10px 15px; 228 | border-radius: 3px; 229 | text-align: center; 230 | line-height: 22px; 231 | transition: .3s ease all; 232 | } 233 | 234 | .boton:hover { 235 | background: #5114c2; 236 | } 237 | 238 | .boton.verde { 239 | background: #00a04a; 240 | } 241 | 242 | .boton.verde:hover { 243 | background: #00833d; 244 | } 245 | 246 | /* ==================== 247 | * HELPERS * 248 | ==================== */ 249 | .no-margen { margin: 0 } 250 | .no-margen-superior { margin-top: 0 } 251 | .no-margen-inferior { margin-bottom: 0 } 252 | .no-margen-izquierdo { margin-left: 0 } 253 | .no-margen-derecho { margin-right: 0 } 254 | 255 | .margen-inferior {margin-bottom: 20px;} 256 | .margen-superior {margin-top: 20px;} 257 | 258 | .texto-centrado {text-align: center;} 259 | .texto-izquierda {text-align: left;} 260 | .texto-derecha {text-align: right;} --------------------------------------------------------------------------------