├── README.md ├── images ├── abstract-error.png ├── abstract-great-ideas.png ├── abstract.png ├── community.png └── security-2.png ├── index.html ├── index.js ├── media-queries.css ├── normalize.css └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Curso HTML Semántico y Accesible 2 | 3 | ¡Hola! En este repositorio encontrarás el proyecto que desarrollaremos durante el curso HTML semántico y accesible de Código Facilito y también todos los recursos mencionados. 4 | 5 | 6 | 7 | 8 | ## Proyecto: 9 | 10 | En la rama [main](https://github.com/CrisRuedaP/proyecto-accesibilidad-web/tree/main) de este repositorio, encontrarás el proyecto que iremos resolviendo durante el bloque práctico del curso y en la rama [final](https://github.com/CrisRuedaP/proyecto-accesibilidad-web/tree/final), el proyecto terminado. 11 | 12 | 13 | ## Fuente: 14 | 15 | + Diseño inspirado en: [Codepen](https://codepen.io/mirandalwashburn/pen/GRJOZRp) 16 | + Imágenes tomadas de: [Ouch!](https://iconos8.es/illustrations) 17 | 18 | ## Recursos 19 | 20 |
21 |     Documentación Accesibilidad Web 22 | 29 |
30 | 31 |
32 |     Lectores de Pantalla 33 | 38 |
39 | 40 |
41 |     Herramientas de Evaluación Automática 42 | 48 |
49 | 50 |
51 |     Otros Recursos 52 | 55 |
56 | 57 | -------------------------------------------------------------------------------- /images/abstract-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisRuedaP/proyecto-accesibilidad-web/39027e4cbd40e90c9cd7724ede138944acea27e7/images/abstract-error.png -------------------------------------------------------------------------------- /images/abstract-great-ideas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisRuedaP/proyecto-accesibilidad-web/39027e4cbd40e90c9cd7724ede138944acea27e7/images/abstract-great-ideas.png -------------------------------------------------------------------------------- /images/abstract.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisRuedaP/proyecto-accesibilidad-web/39027e4cbd40e90c9cd7724ede138944acea27e7/images/abstract.png -------------------------------------------------------------------------------- /images/community.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisRuedaP/proyecto-accesibilidad-web/39027e4cbd40e90c9cd7724ede138944acea27e7/images/community.png -------------------------------------------------------------------------------- /images/security-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisRuedaP/proyecto-accesibilidad-web/39027e4cbd40e90c9cd7724ede138944acea27e7/images/security-2.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Facilito Blog 13 | 14 | 15 |
16 |
17 |

Facilito Blog

18 |

Noticias del mundo tech

19 |
20 | 23 | 34 |
35 | 36 |
37 |
38 |
39 | 52 | 53 |
54 |
55 |

Agenda

56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
Vacaciones con Cody15/04/202117:00
VeranoFrontend21/07/202120:00
68 |
69 |
70 | 76 |
77 | 80 |
81 |
82 |
83 |
84 | 85 |

Destacados

86 |
87 | 88 | 100 | 101 | 102 | 114 | 115 | 116 | 128 | 129 |
130 |
131 | 132 | 173 | 174 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | function changeState(){ 2 | let navContainer = document.querySelector('#nav-container'); 3 | let navMenu = document.getElementById('nav-menu'); 4 | navMenu.classList.toggle('nav-menu-open'); 5 | let menuOpen = document.getElementById('menu-toggle'); 6 | menuOpen.classList.toggle('menu-open'); 7 | 8 | 9 | if (navMenu.classList.contains('nav-menu-open')) { 10 | menuOpen.setAttribute("aria-expanded", "true"); 11 | navContainer.removeAttribute("hidden"); 12 | } 13 | 14 | if(!menuOpen.classList.contains('menu-open')){ 15 | menuOpen.setAttribute("aria-expanded", "false"); 16 | navContainer.setAttribute("hidden", "true"); 17 | } 18 | }; 19 | 20 | document.addEventListener('DOMContentLoaded', (e) => { 21 | let ratio = window.devicePixelRatio || 1; 22 | let w = screen.width * ratio; 23 | const navContainer = document.querySelector('#nav-container'); 24 | 25 | if(w < 960) { 26 | navContainer.setAttribute("aria-hidden", "true"); 27 | }else{ 28 | navContainer.removeAttribute('aria-hidden') 29 | navContainer.removeAttribute("hidden"); 30 | } 31 | }); 32 | 33 | 34 | -------------------------------------------------------------------------------- /media-queries.css: -------------------------------------------------------------------------------- 1 | @media (max-width: 600px) { 2 | .nav-menu { 3 | height: 100vh; 4 | position: fixed; 5 | top: 0; 6 | right: 0; 7 | background-color: #E4BAD4; 8 | clip-path: circle(0px at top right); 9 | transition: clip-path ease-in-out 700ms; 10 | } 11 | .nav-menu ul { 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | .nav-menu-open { 18 | clip-path: circle(150% at top right); 19 | } 20 | .nav-menu a { 21 | display: block; 22 | text-decoration: underline; 23 | } 24 | .nav-menu a:hover { 25 | color: #424874; 26 | } 27 | .menu-toggle { 28 | background-color: #6155A6; 29 | padding: 1.2rem 0.8rem; 30 | top: 0; 31 | right: 0; 32 | position: fixed; 33 | cursor: pointer; 34 | z-index: 1; 35 | /*visibility: visible;*/ 36 | /*width: auto;*/ 37 | } 38 | .menu-open .menu { 39 | transform: rotate(45deg); 40 | } 41 | .menu-open .menu::before { 42 | opacity: 0; 43 | } 44 | .menu-open .menu::after { 45 | transform: translateY(-3px) rotate(-90deg); 46 | } 47 | .menu, 48 | .menu::before, 49 | .menu::after { 50 | content: ''; 51 | display: block; 52 | background-color: beige; 53 | height: 3px; 54 | width: 1.75rem; 55 | border-radius: 3px; 56 | } 57 | .menu::before{ 58 | transform: translateY(-6px); 59 | } 60 | .menu::after{ 61 | transform: translateY(3px); 62 | } 63 | .layout { 64 | padding-top: 0; 65 | } 66 | .layout-main, .layout-down { 67 | grid-template-columns: none; 68 | } 69 | .layout-main--article { 70 | border-right: 0; 71 | padding: 0; 72 | } 73 | .layout-down--article { 74 | border-bottom: 1px solid #CCC; 75 | } 76 | .layout-down--article:last-child { 77 | border-bottom: none; 78 | } 79 | .layout-footer { 80 | display: unset; 81 | } 82 | .layout-form { 83 | width: 100%; 84 | } 85 | .form-fieldset { 86 | display: unset; 87 | } 88 | legend { 89 | text-align: center; 90 | padding: 0.5rem 0; 91 | } 92 | .form-input { 93 | width: 100%; 94 | } 95 | .form-submit { 96 | width: 100%; 97 | margin: 1rem 0; 98 | } 99 | .layout-social { 100 | width: 100%; 101 | display: flex; 102 | justify-content: center; 103 | align-items: center; 104 | margin-bottom: 2rem; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Fraunces:ital,wght@0,500;0,600;0,700;1,600&display=swap'); 2 | 3 | :root { 4 | --background: #f4f4f4; 5 | --darker: #222326; 6 | --text: #545454; 7 | --text-light: #fafafa; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | html { 17 | font-size: 100%; 18 | } 19 | 20 | body { 21 | background-color: var(--background); 22 | color: var(--text); 23 | margin: 0; 24 | font-family: "DM Sans", sans-serif; 25 | line-height: 1.5; 26 | padding-bottom: 5rem; 27 | } 28 | 29 | /* Header */ 30 | 31 | .title { 32 | padding: 2.5rem 0; 33 | } 34 | 35 | .title-main { 36 | color: var(--darker); 37 | font-size: 3rem; 38 | font-weight: 800; 39 | margin: 0 0 .5rem; 40 | text-align: center; 41 | } 42 | 43 | .title-sub { 44 | text-align: center; 45 | font-size: 1rem; 46 | margin: 0; 47 | } 48 | 49 | /* Navegation Menu */ 50 | 51 | .nav-menu { 52 | width: 100%; 53 | display: flex; 54 | justify-content: center; 55 | align-items: center; 56 | } 57 | 58 | .slide-content { 59 | visibility: hidden; 60 | width: 0; 61 | } 62 | 63 | .active { 64 | visibility: visible; 65 | width: 250px; 66 | } 67 | 68 | .nav-menu li { 69 | display: inline-block; 70 | list-style-type: none; 71 | } 72 | 73 | .nav-menu--item { 74 | font-weight: 500; 75 | font-size: 1.2rem; 76 | text-decoration: none; 77 | color: var(--darker); 78 | text-align: center; 79 | padding: .5rem 2rem; 80 | } 81 | 82 | .nav-menu--item:hover, .nav-menu--item:focus { 83 | border-bottom: 2px solid #E4BAD4; 84 | } 85 | 86 | .menu-toggle { 87 | /*width: 0;*/ 88 | /*visibility: hidden;*/ 89 | } 90 | 91 | /* Main */ 92 | 93 | .layout { 94 | max-width: 960px; 95 | margin: auto; 96 | padding: 2rem 1rem 0 1rem; 97 | } 98 | 99 | .layout-main { 100 | border-bottom: 1px solid #CCC; 101 | margin: 0 0 1.5rem; 102 | padding: 1.25rem 0 1rem; 103 | display: grid; 104 | grid-template-columns: 60% calc(40% - 16px); 105 | grid-gap: 16px; 106 | } 107 | 108 | .section-name { 109 | font-size: 1rem; 110 | color: var(--text); 111 | margin: .25rem 0 1rem; 112 | } 113 | 114 | .layout-main--article { 115 | border-right: 1px solid #CCC; 116 | padding: 0 1.25rem 0 0; 117 | display: flex; 118 | flex-direction: column; 119 | align-items: center; 120 | justify-content: center; 121 | } 122 | 123 | .layout-right { 124 | border-top: 1px solid #CCC; 125 | margin: 2.188rem 0 0 .5rem; 126 | display: grid; 127 | grid-template-columns: calc(65% - 55px) 50%; 128 | padding-top: 1.125rem; 129 | } 130 | 131 | .layout-right:nth-of-type(odd) { 132 | border-bottom: none; 133 | } 134 | 135 | .layout-down { 136 | border-bottom: 1px solid #CCC; 137 | margin: 1.5rem 0; 138 | display: grid; 139 | grid-template-columns: repeat(3, calc(33.33% - 11px)); 140 | grid-gap: 16px; 141 | } 142 | 143 | .layout-down--article { 144 | display: flex; 145 | flex-direction: column; 146 | justify-content: center; 147 | align-items: flex-start; 148 | } 149 | 150 | .article-title { 151 | font-family: "Fraunces", serif; 152 | font-size: 1.125rem; 153 | font-weight: 900; 154 | width: 80%; 155 | color: var(--darker); 156 | margin: 1rem 0; 157 | line-height: 1.4rem; 158 | letter-spacing: 1px; 159 | } 160 | 161 | .article-title a { 162 | color: var(--darker); 163 | text-decoration: underline; 164 | text-decoration-color: #6155A6; 165 | } 166 | 167 | .article-title a:hover { 168 | color: #6155A6; 169 | text-decoration: underline; 170 | } 171 | 172 | .article-category { 173 | color: var(--text); 174 | font-size: 0.688rem; 175 | text-transform: uppercase; 176 | margin: 1rem 0 0; 177 | font-weight:lighter; 178 | } 179 | 180 | .article-img { 181 | width: 100%; 182 | height: 232px; 183 | object-fit: cover; 184 | } 185 | 186 | .article-img--small { 187 | width: 100%; 188 | height: 100px; 189 | margin-top: 1rem; 190 | } 191 | 192 | .article-author { 193 | color: var(--text); 194 | font-size: .75rem; 195 | margin: 0 0 1rem; 196 | font-weight: 500; 197 | } 198 | 199 | .img-container { 200 | display: flex; 201 | justify-content: center; 202 | align-items: center; 203 | margin: 0; 204 | } 205 | 206 | .img-caption { 207 | font-size: .625rem; 208 | } 209 | 210 | /* Right section */ 211 | 212 | .section-calendar { 213 | padding: .375rem 0px 0px .5rem; 214 | margin: 0 0 1.5rem; 215 | } 216 | 217 | table { 218 | border-collapse: collapse; 219 | box-shadow: 0 5px 10px #e1e5ee; 220 | background-color: var(--text-light); 221 | overflow: hidden; 222 | width: 100%; 223 | margin-top: .625rem 0 0 .5rem; 224 | } 225 | 226 | thead { 227 | box-shadow: 0 5px 10px #e1e5ee; 228 | } 229 | 230 | th { 231 | padding: 1rem; 232 | font-size: 1rem; 233 | font-weight: 900; 234 | color: var(--text); 235 | } 236 | 237 | td { 238 | font-size: .75rem; 239 | padding: 1rem; 240 | text-align: center; 241 | } 242 | 243 | /*Footer*/ 244 | 245 | .layout-footer { 246 | width: 100%; 247 | display: flex; 248 | flex-wrap: nowrap; 249 | justify-content: space-between; 250 | } 251 | 252 | /*Footer Social*/ 253 | .layout-social { 254 | width: 30%; 255 | display: flex; 256 | align-items: center; 257 | justify-content: center; 258 | margin: 1rem; 259 | } 260 | 261 | .social-list { 262 | display: flex; 263 | } 264 | 265 | .social-icon { 266 | background-color: var(--text-light); 267 | border-radius:50%; 268 | display: flex; 269 | align-items: center; 270 | align-content: center; 271 | list-style: none; 272 | padding: 0; 273 | width: 40px; 274 | height: 40px; 275 | margin: 0 .5rem; 276 | -webkit-box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.53); 277 | box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.53); 278 | } 279 | 280 | .social-icon a { 281 | display: flex; 282 | margin: 0 auto; 283 | align-items: center; 284 | align-content: center; 285 | } 286 | 287 | .social-icon img { 288 | width: 20px; 289 | height: 20px; 290 | } 291 | 292 | /*Footer Form*/ 293 | 294 | .layout-form { 295 | width: 70%; 296 | } 297 | 298 | .form-title { 299 | font-size: 1rem; 300 | font-weight: 900; 301 | color: #545454; 302 | margin: 1rem 0; 303 | } 304 | 305 | .form-field { 306 | width: 100%; 307 | display: flex; 308 | justify-content: space-between; 309 | align-items: center; 310 | margin-top: 1.25rem; 311 | } 312 | 313 | .form-field.block { 314 | display: block; 315 | } 316 | 317 | .form-input { 318 | border: 1px solid #CCC; 319 | width: calc(80% - 10px); 320 | height: 40px; 321 | padding: .75rem 1rem; 322 | } 323 | 324 | .form-submit { 325 | height: 40px; 326 | text-align: center; 327 | background-color: var(--darker); 328 | color: var(--text-light); 329 | border: none; 330 | padding: .125rem 1rem; 331 | cursor: pointer; 332 | letter-spacing: .063rem; 333 | } 334 | 335 | .form-submit:hover { 336 | opacity: .8; 337 | } 338 | 339 | .form-fieldset { 340 | display: flex; 341 | align-items: center; 342 | padding: .5rem 1rem; 343 | } 344 | 345 | .form-fieldset legend { 346 | background-color: var(--darker); 347 | color: var(--text-light); 348 | padding: .063rem .313rem; 349 | letter-spacing: 1px; 350 | } 351 | 352 | .form-fieldset input[type="checkbox"] { 353 | width: 1rem; 354 | height: 1rem; 355 | } 356 | 357 | .form-fieldset.field label { 358 | margin: 0 .5rem; 359 | } 360 | --------------------------------------------------------------------------------