├── css └── framework.css └── index.html /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;} -------------------------------------------------------------------------------- /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 |

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!

63 |
64 |
65 |
66 |

Registrate

67 |
68 | 69 | 70 | 71 | 72 |
73 |
74 |
75 |
76 | 77 | --------------------------------------------------------------------------------