├── .gitignore ├── images ├── juliana.jpeg ├── linkedin.png ├── project1.png ├── project2.png ├── project3.png ├── project4.png ├── project5.png ├── twitter.png ├── github-logo.png ├── play-button-left.png └── play-button-right.png ├── README.md ├── index.js ├── index.html ├── final.html ├── final.js ├── styles.css └── final.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | images/.DS_Store -------------------------------------------------------------------------------- /images/juliana.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gmzjuliana/curso-acessibilidad-web/HEAD/images/juliana.jpeg -------------------------------------------------------------------------------- /images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gmzjuliana/curso-acessibilidad-web/HEAD/images/linkedin.png -------------------------------------------------------------------------------- /images/project1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gmzjuliana/curso-acessibilidad-web/HEAD/images/project1.png -------------------------------------------------------------------------------- /images/project2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gmzjuliana/curso-acessibilidad-web/HEAD/images/project2.png -------------------------------------------------------------------------------- /images/project3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gmzjuliana/curso-acessibilidad-web/HEAD/images/project3.png -------------------------------------------------------------------------------- /images/project4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gmzjuliana/curso-acessibilidad-web/HEAD/images/project4.png -------------------------------------------------------------------------------- /images/project5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gmzjuliana/curso-acessibilidad-web/HEAD/images/project5.png -------------------------------------------------------------------------------- /images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gmzjuliana/curso-acessibilidad-web/HEAD/images/twitter.png -------------------------------------------------------------------------------- /images/github-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gmzjuliana/curso-acessibilidad-web/HEAD/images/github-logo.png -------------------------------------------------------------------------------- /images/play-button-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gmzjuliana/curso-acessibilidad-web/HEAD/images/play-button-left.png -------------------------------------------------------------------------------- /images/play-button-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gmzjuliana/curso-acessibilidad-web/HEAD/images/play-button-right.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Curso de Accesibilidad Web 2 | 3 | En este curso, mejoraremos la accesibilidad un portafolio personal. Espero que aprendas mucho y que uses lo que aprendas aqui para implementar 4 | prácticas accesibles en tu propio portafolio! 5 | 6 | Usa esta URL para probar la accesibilidad con Lighthouse al principio del curso: 7 | https://gmzjuliana.github.io/curso-acessibilidad-web/index.html 8 | 9 | Usa esta URL para probar la accesibilidad al final: 10 | https://gmzjuliana.github.io/curso-acessibilidad-web/final.html 11 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | document.querySelector(".arrow-right").addEventListener("click", clickRight); 3 | document.querySelector(".arrow-left").addEventListener("click", clickLeft); 4 | document 5 | .querySelector(".send-button") 6 | .addEventListener("click", showNotification); 7 | document.querySelectorAll(".project").forEach(element => { 8 | element.addEventListener("click", e => openModal(e)); 9 | }); 10 | document.body.addEventListener("click", e => closeModal(e)); 11 | }; 12 | 13 | /** Esta funcion se llama cuando la persona hace click en la fecha derecha del carousel para navegar a la derecha */ 14 | function clickRight() { 15 | const currentLeft = parseInt( 16 | getComputedStyle(document.querySelector(".project-container")).left, 17 | 10 18 | ); 19 | if (currentLeft < -270) { //si el valor de izquierda es menor a -270, para de mover el contenido 20 | return; 21 | } 22 | let newValue = currentLeft - 270; //270 toma en cuenta el tamaño de la imagen mas sus margines 23 | document.querySelector(".project-container").style.left = `${newValue}px`; 24 | } 25 | 26 | /** Esta funcion se llama cuando la persona hace click en la fecha izquierda del carousel para navegar a la izquierda */ 27 | function clickLeft() { 28 | const currentLeft = parseInt( 29 | getComputedStyle(document.querySelector(".project-container")).left, 30 | 10 31 | ); 32 | if (currentLeft === 0) { //si el valor de izquiera es 0, retornar para no seguir movierno el contenido 33 | return; 34 | } 35 | let newValue = currentLeft + 270; 36 | document.querySelector(".project-container").style.left = `${newValue}px`; 37 | } 38 | 39 | /** Esta funcion se llama cuando la persona hace click en el boton de enviar del formulario de contacto */ 40 | function showNotification() { 41 | document.querySelector(".notification").style.display = "flex"; 42 | setTimeout(function() { 43 | document.querySelector(".notification").style.display = "none"; 44 | }, 3000); 45 | } 46 | 47 | /** Esta funcion se llama cuando la persona hace click en cualquier porjecto del carousel */ 48 | function openModal(e) { 49 | document.querySelector(".modal-container").style.display = "flex"; 50 | } 51 | 52 | /** Esta funcion se llama para cerrar el modal */ 53 | function closeModal(e) { 54 | // si el click occurio dentro del las imagenes del carousel o dentro del modal, no se cierra el modal 55 | if ( 56 | e.target.className.includes("project") || 57 | e.target.className === "modal" 58 | ) { 59 | return; 60 | } else { 61 | document.querySelector(".modal-container").style.display = "none"; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mi Portafolio 7 | 8 | 12 | 13 | 14 | 15 |
16 |
Juliana Gomez
17 |
Front End Developer
18 |
19 |
Acerca de
20 |
Mis Proyectos
21 |
Contacto
22 |
23 | 24 |
25 | Hola! Soy Juliana 👋 Soy Colombo-Canadiense, amo los gatos y tambien crear 26 | cosas lindas para la web 😍 Después de estudiar comunicación social y 27 | ciencia política en la universidad, trabajé varios años en mercadeo 28 | digital hasta que aprendí a programar. Llevo un poco más de tres años 29 | enfocándome en front end, específicamente en JavaScript y accesibilidad. 30 | Sueño con una web donde todo el mundo pueda participar. Aquí puedes ver 31 | algunos de mis proyectos recientes y también puedes contactarme por si 32 | quieres hablar de tecnología, accesibilidad o gatos! 33 |
34 |
35 | 38 |
39 |
40 | 43 |
44 |
45 | 48 |
49 |
50 |
51 | 52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | 66 |
67 |
Contacto
68 |
69 | Nombre
70 | Correo
71 |
Mensaje
72 |
Enviar
73 |
74 |
75 |
El formulario fue enviado sin errores
76 |
77 |
78 | Ejemplo de un proyecto mio 79 |
80 |
81 |
82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /final.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mi Portafolio 7 | 8 | 12 | 13 | 14 | 15 | 16 |
17 | Juliana Gomez 18 |

Juliana Gomez

19 |

Front End Developer

20 | 27 |
28 | 29 |
30 |
31 |

Acerca de

32 |

33 | Hola! Soy Juliana 👋 Soy Colombo-Canadiense, amo los gatos y tambien crear 34 | cosas lindas para la web 😍 Después de estudiar comunicación social y 35 | ciencia política en la universidad, trabajé varios años en mercadeo 36 | digital hasta que aprendí a programar. Llevo un poco más de tres años 37 | enfocándome en front end, específicamente en JavaScript y accesibilidad. 38 | Sueño con una web donde todo el mundo pueda participar. Aquí puedes ver 39 | algunos de mis proyectos recientes y también puedes contactarme por si 40 | quieres hablar de tecnología, accesibilidad o gatos!

41 | 62 |
63 | 64 |
65 |

Mis Proyectos

66 |
67 | 68 |
69 |
    70 |
    • 71 |
    • 72 |
    • 73 | 74 | 75 |
76 |
77 | 78 |
79 |
80 |
81 | 82 | 94 | 95 |
96 |
97 |
98 | 99 | un pantallazo de mi project 100 | 101 |
102 |
103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /final.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | document.querySelector(".arrow-right").addEventListener("click", clickRight); 3 | document.querySelector(".arrow-left").addEventListener("click", clickLeft); 4 | document 5 | .querySelector(".send-button") 6 | .addEventListener("click", e => validateForm(e)); 7 | document.querySelectorAll(".project").forEach(element => { 8 | element.addEventListener("click", e => openModal(e)); 9 | }); 10 | document.body.addEventListener("click", e => closeModal(e)); 11 | document.body.addEventListener("keyup", e => listenForEsc(e)); 12 | }; 13 | 14 | /** Esta funcion se llama cuando la persona hace click en la fecha derecha del carousel para navegar a la derecha */ 15 | function clickRight() { 16 | const currentLeft = parseInt( 17 | getComputedStyle(document.querySelector(".project-container")).left, 18 | 10 19 | ); 20 | if (currentLeft < -270) { //si el valor de izquierda es menor a -270, para de mover el contenido 21 | return; 22 | } 23 | let newValue = currentLeft - 270; //270 toma en cuenta el tamaño de la imagen mas sus margines 24 | document.querySelector(".project-container").style.left = `${newValue}px`; 25 | switch (newValue) { 26 | case -270: 27 | document.querySelector('.project1').setAttribute("tabindex", "-1"); 28 | document.querySelector('.project1-container').setAttribute("aria-hidden", true); 29 | document.querySelector('.project4').removeAttribute("tabindex"); 30 | document.querySelector('.project4-container').removeAttribute("aria-hidden") 31 | break; 32 | case -540: 33 | document.querySelector('.project2').setAttribute("tabindex", "-1"); 34 | document.querySelector('.project2-container').setAttribute("aria-hidden", "true"); 35 | document.querySelector('.project5').removeAttribute("tabindex"); 36 | document.querySelector('.project5-container').removeAttribute("aria-hidden"); 37 | break; 38 | default: 39 | break; 40 | } 41 | } 42 | 43 | /** Esta funcion se llama cuando la persona hace click en la fecha izquierda del carousel para navegar a la izquierda */ 44 | function clickLeft() { 45 | const currentLeft = parseInt( 46 | getComputedStyle(document.querySelector(".project-container")).left, 47 | 10 48 | ); 49 | if (currentLeft === 0) { //si el valor de izquiera es 0, retornar para no seguir movierno el contenido 50 | return; 51 | } 52 | let newValue = currentLeft + 270; 53 | document.querySelector(".project-container").style.left = `${newValue}px`; 54 | switch (newValue) { 55 | case -270: 56 | document.querySelector('.project5').setAttribute("tabindex", "-1"); 57 | document.querySelector('.project5-container').setAttribute("aria-hidden", "true"); 58 | document.querySelector('.project2').removeAttribute("tabindex"); 59 | document.querySelector('.project2-container').removeAttribute("aria-hidden"); 60 | break; 61 | case 0: 62 | document.querySelector('.project4').setAttribute("tabindex", "-1"); 63 | document.querySelector('.project4-container').setAttribute("aria-hidden", "true"); 64 | document.querySelector('.project1').removeAttribute("tabindex"); 65 | document.querySelector('.project1-container').removeAttribute("aria-hidden"); 66 | break; 67 | default: 68 | break; 69 | } 70 | } 71 | 72 | /** Validar el formulario antes de mostrar la notificacion */ 73 | function validateForm(e) { 74 | e.preventDefault(); 75 | const nameField = document.getElementById("name"); 76 | if (nameField.value === ""){ 77 | document.getElementById("name-error").innerHTML = "! Para enviar el formulario, se necesita un nombre"; 78 | } else { 79 | showNotification(); 80 | } 81 | } 82 | 83 | /** Esta funcion se llama cuando la persona hace click en el boton de enviar del formulario de contacto */ 84 | function showNotification() { 85 | document.getElementById("name-error").innerHTML = ""; 86 | document.querySelector('.form-container').reset(); 87 | document.querySelector(".notification").style.display = "flex"; 88 | document.querySelector(".notification").innerHTML = "El formulario fue enviado sin errores"; 89 | setTimeout(function() { 90 | document.querySelector(".notification").style.display = "none"; 91 | }, 3000); 92 | } 93 | 94 | /**Escucha por la clave esc para cerrar el modal */ 95 | function listenForEsc(e) { 96 | if (e.keyCode === 27){ 97 | closeModal(e) 98 | } 99 | } 100 | 101 | /** Esta funcion se llama cuando la persona hace click en cualquier porjecto del carousel */ 102 | function openModal(e) { 103 | document.querySelector(".modal-container").style.display = "flex"; 104 | document.getElementById('modal-header').focus(); 105 | } 106 | 107 | /** Esta funcion se llama para cerrar el modal */ 108 | function closeModal(e) { 109 | // si el click occurio dentro del las imagenes del carousel o dentro del modal, no se cierra el modal 110 | if ( 111 | e.target.className.includes("project") || 112 | e.target.className === "modal" 113 | ) { 114 | return; 115 | } else { 116 | document.querySelector(".modal-container").style.display = "none"; 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* css reset */ 2 | html { 3 | box-sizing: border-box; 4 | font-size: 16px; 5 | } 6 | 7 | *, 8 | *:before, 9 | *:after { 10 | box-sizing: inherit; 11 | } 12 | 13 | body, 14 | h1, 15 | h2, 16 | h3, 17 | h4, 18 | h5, 19 | h6, 20 | p, 21 | ol, 22 | ul { 23 | margin: 0; 24 | padding: 0; 25 | font-weight: normal; 26 | } 27 | 28 | ol, 29 | ul { 30 | list-style: none; 31 | } 32 | 33 | img { 34 | max-width: 100%; 35 | height: auto; 36 | } 37 | 38 | /*--- end of reset ----*/ 39 | 40 | :root { 41 | --blanco: white; 42 | --gris-medio: #333333; 43 | --gris-oscuro: #1e1e1e; 44 | --main-font: "Oswald", sans-serif; 45 | --secondary-font: "Open Sans", sans-serif; 46 | --shadow: rgba(0, 0, 0, 0.75); 47 | --verde: #7ac943; 48 | } 49 | 50 | body { 51 | align-items: center; 52 | background-color: var(--gris-medio); 53 | display: flex; 54 | flex-direction: column; 55 | } 56 | 57 | .header { 58 | color: var(--blanco); 59 | font-family: var(--main-font); 60 | font-size: 55px; 61 | margin-top: 16px; 62 | } 63 | 64 | .subtitle { 65 | color: var(--verde); 66 | font-family: var(--secondary-font); 67 | font-size: 24px; 68 | } 69 | 70 | .header-img { 71 | background: center / contain no-repeat url(./images/juliana.jpeg); 72 | border-radius: 50%; 73 | border: 1px solid var(--gris-oscuro); 74 | box-shadow: 8px 16px 32px 0px var(--shadow); 75 | height: 300px; 76 | margin-top: 80px; 77 | width: 300px; 78 | } 79 | 80 | .navigation { 81 | color: var(--blanco); 82 | cursor: pointer; 83 | display: flex; 84 | justify-content: space-around; 85 | margin: 24px 0; 86 | width: 50%; 87 | } 88 | 89 | .nav-item { 90 | align-items: center; 91 | border-radius: 5px; 92 | display: flex; 93 | font-family: var(--secondary-font); 94 | height: 30px; 95 | justify-content: center; 96 | width: 33%; 97 | } 98 | 99 | .nav-item:hover { 100 | background-color: var(--verde); 101 | } 102 | 103 | .intro { 104 | margin: 0 196px; 105 | font-family: var(--secondary-font); 106 | } 107 | 108 | .social-media { 109 | align-items: center; 110 | display: flex; 111 | justify-content: space-around; 112 | margin: 32px auto 0; 113 | width: 20%; 114 | } 115 | 116 | .carousel { 117 | align-items: center; 118 | display: flex; 119 | margin: 48px 0 64px; 120 | } 121 | 122 | .window { 123 | overflow: hidden; 124 | width: 805px; 125 | } 126 | 127 | .project-container { 128 | left: 0; 129 | position: relative; 130 | width: 1500px; 131 | } 132 | 133 | .project { 134 | border-radius: 5px; 135 | border: 2px solid #000; 136 | display: inline-block; 137 | height: 400px; 138 | margin: 0 8px; 139 | transition: all 0.2s ease-in-out; 140 | width: 250px; 141 | } 142 | 143 | .project:hover { 144 | cursor: pointer; 145 | transform: scale(1.1); 146 | } 147 | 148 | .project1 { 149 | background: center / cover no-repeat url(./images/project1.png); 150 | } 151 | 152 | .project2 { 153 | background: center / cover no-repeat url(./images/project2.png); 154 | } 155 | 156 | .project3 { 157 | background: center / cover no-repeat url(./images/project3.png); 158 | } 159 | 160 | .project4 { 161 | background: center / cover no-repeat url(./images/project4.png); 162 | } 163 | 164 | .project5 { 165 | background: center / cover no-repeat url(./images/project5.png); 166 | } 167 | 168 | .arrow { 169 | height: 75px; 170 | transition: all 0.2s ease-in-out; 171 | width: 75px; 172 | } 173 | 174 | .arrow:hover { 175 | transform: scale(1.1); 176 | } 177 | 178 | .arrow-left { 179 | background: center / contain no-repeat url(./images/play-button-left.png); 180 | background-color: var(--verde); 181 | border-radius: 50%; 182 | } 183 | 184 | .arrow-right { 185 | background: center / contain no-repeat url(./images/play-button-right.png); 186 | background-color: var(--verde); 187 | border-radius: 50%; 188 | } 189 | 190 | .contact-section { 191 | align-items: center; 192 | background-color: var(--gris-oscuro); 193 | display: flex; 194 | flex-direction: column; 195 | width: 100%; 196 | } 197 | 198 | .form-container { 199 | display: flex; 200 | flex-direction: column; 201 | width: 30%; 202 | } 203 | 204 | .message-input input { 205 | height: 150px; 206 | margin-bottom: 16px; 207 | } 208 | 209 | input { 210 | outline: none; 211 | width: 100%; 212 | } 213 | 214 | .send-button { 215 | align-items: center; 216 | background-color: var(--verde); 217 | border-radius: 5px; 218 | color: white; 219 | font-family: var(--secondary-font); 220 | display: flex; 221 | height: 50px; 222 | justify-content: center; 223 | margin-bottom: 48px; 224 | width: 150px; 225 | margin-left: auto; 226 | } 227 | 228 | .notification { 229 | align-items: center; 230 | background-color: var(--verde); 231 | border-radius: 5px; 232 | box-shadow: 8px 16px 32px 0px var(--shadow); 233 | color: var(--blanco); 234 | display: none; 235 | font-family: var(--secondary-font); 236 | height: 50px; 237 | justify-content: center; 238 | position: fixed; 239 | right: 24px; 240 | top: 24px; 241 | width: 300px; 242 | } 243 | 244 | .modal-container { 245 | align-items: center; 246 | background-color: rgba(000, 000, 000, 0.2); 247 | display: none; 248 | height: 100vh; 249 | justify-content: center; 250 | position: fixed; 251 | width: 100vw; 252 | } 253 | 254 | .modal { 255 | align-items: center; 256 | background-color: var(--gris-oscuro); 257 | border-radius: 5px; 258 | border: 2px solid #000; 259 | display: flex; 260 | flex-direction: column; 261 | height: 700px; 262 | justify-content: center; 263 | position: fixed; 264 | top: 15%; 265 | width: 700px; 266 | } 267 | 268 | .modal-project-image { 269 | background: center / cover no-repeat url(./images/project1.png); 270 | border-radius: 5px; 271 | border: 2px solid #000; 272 | height: 400px; 273 | margin: 16px; 274 | width: 550px; 275 | } -------------------------------------------------------------------------------- /final.css: -------------------------------------------------------------------------------- 1 | /* css reset */ 2 | html { 3 | box-sizing: border-box; 4 | font-size: 16px; 5 | } 6 | 7 | *, 8 | *:before, 9 | *:after { 10 | box-sizing: inherit; 11 | } 12 | 13 | body, 14 | h1, 15 | h2, 16 | h3, 17 | h4, 18 | h5, 19 | h6, 20 | p, 21 | ol, 22 | ul { 23 | margin: 0; 24 | padding: 0; 25 | font-weight: normal; 26 | } 27 | 28 | ol, 29 | ul { 30 | list-style: none; 31 | } 32 | 33 | img { 34 | max-width: 100%; 35 | height: auto; 36 | } 37 | 38 | /*--- end of reset ----*/ 39 | 40 | :root { 41 | --blanco: white; 42 | --gris-medio: #333333; 43 | --gris-oscuro: #1e1e1e; 44 | --main-font: "Oswald", sans-serif; 45 | --secondary-font: "Open Sans", sans-serif; 46 | --shadow: rgba(0, 0, 0, 0.75); 47 | --verde: #7ac943; 48 | } 49 | 50 | body, header, section { 51 | align-items: center; 52 | background-color: var(--gris-medio); 53 | display: flex; 54 | flex-direction: column; 55 | width: 100%; 56 | } 57 | 58 | .skip-link { 59 | height: 0; 60 | } 61 | 62 | .skip-link:focus, 63 | .skip-link:active { 64 | background: var(--verde); 65 | border-radius: 5px; 66 | color: var(--gris-oscuro); 67 | font-family: var(--secondary-font); 68 | height: auto; 69 | margin: 16px 0 8px; 70 | padding: 8px; 71 | text-decoration: none; 72 | border: 5px solid var(--gris-oscuro); 73 | outline: 3px solid var(--verde); 74 | } 75 | 76 | .header { 77 | color: var(--blanco); 78 | font-family: var(--main-font); 79 | font-size: 55px; 80 | margin-top: 16px; 81 | } 82 | 83 | .subtitle { 84 | color: var(--verde); 85 | font-family: var(--secondary-font); 86 | font-size: 24px; 87 | } 88 | 89 | .header-img { 90 | border-radius: 50%; 91 | border: 1px solid var(--gris-oscuro); 92 | box-shadow: 8px 16px 32px 0px var(--shadow); 93 | height: 300px; 94 | margin-top: 80px; 95 | width: 300px; 96 | } 97 | 98 | nav { 99 | width: 100%; 100 | } 101 | 102 | .navigation { 103 | color: var(--blanco); 104 | cursor: pointer; 105 | display: flex; 106 | justify-content: space-around; 107 | margin: 24px auto; 108 | width: 50%; 109 | } 110 | 111 | .nav-item a { 112 | text-decoration: none; 113 | color: var(--blanco); 114 | } 115 | 116 | .nav-item { 117 | align-items: center; 118 | border-radius: 5px; 119 | display: flex; 120 | font-family: var(--secondary-font); 121 | height: 30px; 122 | justify-content: center; 123 | width: 33%; 124 | } 125 | 126 | .nav-item:hover, 127 | .nav-item:hover a { 128 | background-color: var(--verde); 129 | color: var(--gris-oscuro); 130 | cursor: pointer; 131 | } 132 | 133 | .nav-item:focus-within { 134 | background-color: var(--verde); 135 | } 136 | 137 | .nav-item a:focus { 138 | outline: none; 139 | color: var(--gris-oscuro); 140 | } 141 | 142 | .intro { 143 | margin: 24px 196px 0; 144 | font-family: var(--secondary-font); 145 | color: var(--blanco); 146 | } 147 | 148 | .social-media { 149 | align-items: center; 150 | display: flex; 151 | justify-content: space-around; 152 | margin: 32px auto 0; 153 | } 154 | 155 | .social-media li a { 156 | align-items: center; 157 | display: flex; 158 | color: var(--blanco); 159 | font-family: var(--secondary-font); 160 | text-decoration: none; 161 | } 162 | 163 | .social-media li a:focus{ 164 | outline: none; 165 | } 166 | 167 | .social-media li:focus-within { 168 | outline: 3px solid var(--verde); 169 | padding: 8px; 170 | } 171 | 172 | .social-link-text { 173 | padding-right: 8px; 174 | padding-left: 8px; 175 | } 176 | 177 | .carousel { 178 | align-items: center; 179 | display: flex; 180 | margin: 48px 0 64px; 181 | } 182 | 183 | .window { 184 | overflow: hidden; 185 | width: 815px; 186 | padding: 8px; 187 | } 188 | 189 | .project-container { 190 | left: 0; 191 | position: relative; 192 | width: 1500px; 193 | } 194 | 195 | .project-container li { 196 | display: inline-block; 197 | } 198 | 199 | .project-container button { 200 | background: none; 201 | border: none; 202 | padding: 0; 203 | } 204 | 205 | .project-container button:focus-within { 206 | outline: 3px solid var(--verde); 207 | } 208 | 209 | .project-img { 210 | border-radius: 5px; 211 | border: 2px solid #000; 212 | display: inline-block; 213 | height: 400px; 214 | margin: 0 8px; 215 | transition: all 0.2s ease-in-out; 216 | width: 250px; 217 | object-fit: cover; 218 | } 219 | 220 | .project:hover { 221 | cursor: pointer; 222 | transform: scale(1.1); 223 | } 224 | 225 | .arrow { 226 | height: 75px; 227 | transition: all 0.2s ease-in-out; 228 | width: 75px; 229 | } 230 | 231 | .arrow:hover { 232 | transform: scale(1.1); 233 | } 234 | 235 | .arrow-left { 236 | background: center / contain no-repeat url(./images/play-button-left.png); 237 | background-color: var(--verde); 238 | border-radius: 50%; 239 | } 240 | 241 | .arrow-right { 242 | background: center / contain no-repeat url(./images/play-button-right.png); 243 | background-color: var(--verde); 244 | border-radius: 50%; 245 | } 246 | 247 | .arrow:focus { 248 | outline: 3px solid var(--verde); 249 | } 250 | 251 | .contact-section { 252 | align-items: center; 253 | background-color: var(--gris-oscuro); 254 | display: flex; 255 | flex-direction: column; 256 | width: 100%; 257 | } 258 | 259 | .form-container { 260 | display: flex; 261 | flex-direction: column; 262 | width: 30%; 263 | } 264 | 265 | .form-label, 266 | .message-input { 267 | color: var(--verde); 268 | font-family: var(--secondary-font); 269 | } 270 | 271 | .message-input input { 272 | height: 150px; 273 | margin-bottom: 16px; 274 | } 275 | 276 | input { 277 | width: 100%; 278 | } 279 | 280 | input:focus { 281 | outline: 3px solid var(--verde); 282 | padding: 8px; 283 | } 284 | 285 | .send-button, 286 | .modal-button { 287 | align-items: center; 288 | background-color: var(--verde); 289 | border-radius: 5px; 290 | color: var(--gris-oscuro); 291 | font-family: var(--secondary-font); 292 | display: flex; 293 | height: 50px; 294 | justify-content: center; 295 | margin-bottom: 48px; 296 | width: 150px; 297 | margin-left: auto; 298 | font-size: 16px; 299 | cursor: pointer; 300 | } 301 | 302 | .send-button:focus, 303 | .modal-button:focus { 304 | border: 5px solid var(--gris-oscuro); 305 | outline: 3px solid var(--verde); 306 | } 307 | 308 | #name-error { 309 | color: var(--blanco); 310 | font-family: var(--secondary-font); 311 | } 312 | 313 | .notification { 314 | align-items: center; 315 | background-color: var(--verde); 316 | border-radius: 5px; 317 | box-shadow: 8px 16px 32px 0px var(--shadow); 318 | color: var(--gris-oscuro); 319 | display: none; 320 | font-family: var(--secondary-font); 321 | height: 50px; 322 | justify-content: center; 323 | position: fixed; 324 | right: 24px; 325 | top: 24px; 326 | width: 300px; 327 | } 328 | 329 | .modal-container { 330 | align-items: center; 331 | background-color: rgba(000, 000, 000, 0.2); 332 | display: none; 333 | height: 100vh; 334 | justify-content: center; 335 | position: fixed; 336 | width: 100vw; 337 | } 338 | 339 | #modal-header { 340 | outline: 3px solid var(--verde); 341 | } 342 | 343 | .modal { 344 | align-items: center; 345 | background-color: var(--gris-oscuro); 346 | border-radius: 5px; 347 | border: 2px solid #000; 348 | display: flex; 349 | flex-direction: column; 350 | height: 600px; 351 | justify-content: center; 352 | position: fixed; 353 | top: 5%; 354 | width: 700px; 355 | padding: 56px; 356 | } 357 | 358 | .modal-project-image { 359 | background: center / cover no-repeat url(./images/project1.png); 360 | border-radius: 5px; 361 | border: 2px solid #000; 362 | height: 400px; 363 | margin: 16px; 364 | width: 550px; 365 | } --------------------------------------------------------------------------------