Dia 22

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

@@ -0,0 +1,217 @@
+@charset "UTF-8";
+* {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-decoration: none;
+  border: none;
+  outline: none;
+}
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background-image: url("../imagenes/fondo-vert.jpg");
+  background-size: cover;
+}
+
+#main_header {
+  width: 100%;
+  height: 120px;
+  background-image: url("../imagenes/teclado.jpg");
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  position: sticky;
+  top: 0;
+  background-color: gray;
+  padding: 10px;
+  margin-bottom: 0.5em;
+  box-sizing: border-box;
+  box-shadow: 2px 2px 3px;
+}
+#main_header > img {
+  height: 100px;
+}
+
+.menu {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menu li {
+  float: left;
+  margin: 0 5px;
+  color: white;
+  cursor: pointer;
+}
+.menu li a {
+  color: white;
+  text-decoration: underline;
+  font-weight: bold;
+  text-shadow: 1px 1px 1px black;
+}
+
+#inicio,
+#equipo {
+  scroll-margin-top: 150px;
+}
+
+main {
+  background-color: rgba(0, 0, 0, 0.2);
+  width: 70%;
+  margin: auto;
+  padding: 2em;
+  color: white;
+  margin-top: 3em;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+h1 {
+  font-size: 4em;
+  font-style: italic;
+  font-weight: lighter;
+  text-shadow: 1px 1px 2px black;
+}
+
+h2 {
+  font-size: 2em;
+  font-style: italic;
+  font-weight: lighter;
+  text-shadow: 1px 1px 2px black;
+}
+
+section {
+  margin-top: 2em;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  align-items: center;
+  text-shadow: 1px 1px 1px black;
+}
+section p {
+  text-align: left;
+}
+
+.equipo-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2em;
+}
+
+.card {
+  max-width: 320px;
+  padding: 0.5em;
+  border: 3px solid rgb(21, 92, 190);
+  color: rgb(21, 92, 190);
+}
+.card > img {
+  margin-top: 1em;
+  width: 80%;
+}
+
+.card-details {
+  display: flex;
+  align-items: center;
+  gap: 0.2em;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.card-details img {
+  width: 38px;
+}
+.card-details p {
+  color: white;
+  font-size: 0.9em;
+}
+
+.card-details span {
+  color: rgb(21, 92, 190);
+  font-weight: bold;
+}
+
+footer {
+  width: 70%;
+  margin: auto;
+  background-image: url("../imagenes/teclado.jpg");
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+  padding: 1em;
+  box-sizing: border-box;
+}
+
+footer img {
+  width: 80%;
+  max-width: 200px;
+}
+footer p {
+  color: rgb(177, 152, 28);
+  margin-top: 1em;
+}
+.redes {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+}
+.redes img {
+  width: 48px;
+  height: 48px;
+}
+
+.form_container {
+  padding: 0.5em;
+  box-sizing: border-box;
+  display: flex;
+  gap: 0.4em;
+  flex-direction: column;
+  width: 100%;
+  border: 3px solid blue;
+}
+
+.form_container .subform {
+  padding: 0.5em;
+  border: 3px solid blue;
+}
+
+
+
+
+/* Definiciones para el boton de subir pagina*/
+#subircaja {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+}
+#subirimg {
+  width: 64px;
+  height: 64px;
+}
+/*********************************************/
+
+@media (max-width: 650px) {
+  .menu {
+    text-align: left;
+  }
+  .menu li {
+    list-style-type: square;
+    clear: left;
+  }
+  .menu a {
+    font-size: 1em;
+  }
+
+  main {
+    width: 90%;
+  }
+  .card {
+    width: 230px;
+  }
+  footer {
+    width: 90%;
+  }
+}