Dia 23

Practicas/Practicas HTML/Repaso 2/css/style.css

@@ -55,7 +55,8 @@ body {
 }
 
 #inicio,
-#equipo {
+#equipo,
+#contacto {
   scroll-margin-top: 150px;
 }
 
@@ -68,6 +69,7 @@ main {
   margin-top: 3em;
   box-sizing: border-box;
   text-align: center;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 h1 {
@@ -104,14 +106,14 @@ section p {
 }
 
 .card {
-  max-width: 320px;
+  width: 320px;
   padding: 0.5em;
-  border: 3px solid rgb(21, 92, 190);
-  color: rgb(21, 92, 190);
+  border: 4px solid #2795de;
+  color: #2795de;
 }
 .card > img {
   margin-top: 1em;
-  width: 80%;
+  max-height: 320px;
 }
 
 .card-details {
@@ -129,7 +131,7 @@ section p {
 }
 
 .card-details span {
-  color: rgb(21, 92, 190);
+  color: #2795de;
   font-weight: bold;
 }
 
@@ -163,23 +165,55 @@ footer p {
   height: 48px;
 }
 
-.form_container {
-  padding: 0.5em;
-  box-sizing: border-box;
-  display: flex;
-  gap: 0.4em;
-  flex-direction: column;
+.form_main {
   width: 100%;
-  border: 3px solid blue;
+  border: 4px solid #2795de;
+  color: #2795de;
+  box-sizing: border-box;
+  padding: 0.3em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
 }
 
-.form_container .subform {
+.form_main > fieldset {
+  text-align: start;
+  border: 4px solid #2795de;
+  box-sizing: border-box;
   padding: 0.5em;
-  border: 3px solid blue;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6em;
 }
 
+label {
+  display: inline-block;
+  font-weight: bold;
+  width: 6em;
+}
 
+.flex_responsive {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5em;
+  align-items: center;
+}
 
+input,
+select,
+textarea {
+  background-color: rgb(0, 0, 0, 0.6);
+  color: white;
+  height: 2em;
+  padding: 0 0.2em;
+  vertical-align: middle;
+}
+
+textarea {
+  width: 98%;
+  height: 200px;
+  border: 2px solid white;
+}
 
 /* Definiciones para el boton de subir pagina*/
 #subircaja {
@@ -208,10 +242,18 @@ footer p {
   main {
     width: 90%;
   }
+
   .card {
     width: 230px;
   }
+
   footer {
     width: 90%;
   }
+
+  .flex_responsive {
+    display: flex;
+    align-items: normal;
+    flex-direction: column;
+  }
 }