20 css

como_css/src/routes/+page.svelte

@@ -0,0 +1,61 @@
+<script>
+  let nombre = "Manuel";
+  let apellido = "Riquelme";
+</script>
+
+<div class="body w-25 p-6 flex mx-auto">
+  <form>
+    <div class="form-group mb-3">
+      <label
+        for="nombre"
+        class="text-danger"
+        on:mouseover={() => document.getElementById("nombre").focus()}
+        on:focus={() => document.getElementById("nombre").focus()}>Nombre</label
+      >
+      <input
+        type="text"
+        class="form-control"
+        id="nombre"
+        placeholder="Introduzca su nombre"
+        bind:value={nombre}
+      />
+    </div>
+    <div class="form-group mb-3">
+      <label
+        for="apellido"
+        class="text-danger"
+        on:mouseover={() => document.getElementById("apellido").focus()}
+        on:focus={() => document.getElementById("apellido").focus()}
+        >Apellido</label
+      >
+      <input
+        type="apellido"
+        class="form-control"
+        placeholder="Introduzca su apellido"
+        bind:value={apellido}
+        id="apellido"
+      />
+    </div>
+
+    <button type="submit" class="btn btn-primary mb-3">Submit</button>
+    <p class="soy label"><strong>Tu eres: </strong>{nombre} {apellido}</p>
+  </form>
+</div>
+<div class="flex mx-auto">Cojón</div>
+
+<style scoped>
+  .body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+  }
+  input:hover {
+    border: 1px solid red;
+  }
+  .soy:hover {
+    color: green;
+    text-decoration: underline;
+  }
+</style>