diff --git a/Practicas/Practicas HTML/Repaso 2/css/style.css b/Practicas/Practicas HTML/Repaso 2/css/style.css index 65f924a..fab21d7 100644 --- a/Practicas/Practicas HTML/Repaso 2/css/style.css +++ b/Practicas/Practicas HTML/Repaso 2/css/style.css @@ -16,6 +16,7 @@ body { background-size: cover; } +/* Estilos para la cabecera con menu */ #main_header { width: 100%; height: 120px; @@ -34,13 +35,11 @@ body { #main_header > img { height: 100px; } - .menu { list-style-type: none; margin: 0; padding: 0; } - .menu li { float: left; margin: 0 5px; @@ -54,13 +53,17 @@ body { text-shadow: 1px 1px 1px black; } + +/* Ajustes para el posicionamento en las anclas del menu*/ #inicio, #equipo, #contacto { scroll-margin-top: 150px; } -main { + +/* Ajustes generales para contenedor general de la web*/ +.main_container { background-color: rgba(0, 0, 0, 0.2); width: 70%; margin: auto; @@ -71,21 +74,20 @@ main { text-align: center; font-family: Arial, Helvetica, sans-serif; } - -h1 { +.main_container h1 { font-size: 4em; font-style: italic; font-weight: lighter; text-shadow: 1px 1px 2px black; } - -h2 { +.main_container h2 { font-size: 2em; font-style: italic; font-weight: lighter; text-shadow: 1px 1px 2px black; } +/* Ajustes generales para todas las secciones de la web */ section { margin-top: 2em; display: flex; @@ -98,6 +100,7 @@ section p { text-align: left; } +/* Ajuste especifico para la seccion equipo */ .equipo-content { display: flex; flex-wrap: wrap; @@ -105,17 +108,16 @@ section p { gap: 2em; } +/* Estilos para las tarjetas de la seccion equipo*/ .card { - width: 320px; padding: 0.5em; border: 4px solid #2795de; color: #2795de; } .card > img { margin-top: 1em; - max-height: 320px; + max-height: 300px; } - .card-details { display: flex; align-items: center; @@ -129,12 +131,14 @@ section p { color: white; font-size: 0.9em; } - .card-details span { color: #2795de; font-weight: bold; } + + +/* Estilos del footer */ footer { width: 70%; margin: auto; @@ -146,7 +150,6 @@ footer { padding: 1em; box-sizing: border-box; } - footer img { width: 80%; max-width: 200px; @@ -165,32 +168,48 @@ footer p { height: 48px; } + + + +/*Estilos para el Formulario*/ .form_main { width: 100%; border: 4px solid #2795de; color: #2795de; box-sizing: border-box; - padding: 0.3em; + padding: 1em; display: flex; flex-direction: column; gap: 0.5em; } - -.form_main > fieldset { +.form_main fieldset { text-align: start; border: 4px solid #2795de; + background-color: rgb(0, 0, 0, 0.3); box-sizing: border-box; padding: 0.5em; display: flex; flex-direction: column; - gap: 0.6em; + gap: 1em; } - -label { +.form_main fieldset label { display: inline-block; font-weight: bold; width: 6em; } +.form_btn { + color: #fff; + cursor: pointer; + border: 2px solid #2795de; + border-radius: 0.4em; + font-size: 16px; + padding: 0.4em; + height: 100%; +} +.form_btn:hover { + background-color: #1769aa; +} + .flex_responsive { display: flex; @@ -208,6 +227,10 @@ textarea { padding: 0 0.2em; vertical-align: middle; } +input[type="radio"] + label { + color: white; +} + textarea { width: 98%; @@ -220,10 +243,23 @@ textarea { position: fixed; right: 10px; bottom: 10px; + opacity: 0.7; + transition: opacity 0.3s ease-in-out; +} +#subircaja:hover { + opacity: 1; } #subirimg { width: 64px; height: 64px; + border-radius: 50%; + border: 2px solid #fff; + background-color: #2795de; + cursor: pointer; + transition: background-color 0.3s ease-in-out; +} +#subirimg:hover { + background-color: #1769aa; } /*********************************************/ @@ -239,18 +275,12 @@ textarea { font-size: 1em; } - main { + .main_container { width: 90%; } - - .card { - width: 230px; - } - footer { width: 90%; } - .flex_responsive { display: flex; align-items: normal; diff --git a/Practicas/Practicas HTML/Repaso 2/index.html b/Practicas/Practicas HTML/Repaso 2/index.html index 076695d..7b845c1 100644 --- a/Practicas/Practicas HTML/Repaso 2/index.html +++ b/Practicas/Practicas HTML/Repaso 2/index.html @@ -23,7 +23,7 @@ -
+

AlexCG Design

Agencia de desarrollo web

@@ -92,25 +92,25 @@
- - + +
- - + +
- +
- +
@@ -129,16 +129,15 @@
- - + +
- +