fix style on input/file upload and form css

CharlyBGood · Dec 6, 2024 · 23ebc86 · 23ebc86
1 parent 74ecfd9
commit 23ebc86
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
     <title>QR Maker - Genera códigos QR personalizados</title>
     <meta
       name="description"
@@ -26,21 +32,25 @@ <h4>Crea el QR que desees</h4>
         </button>
       </nav>
       <form method="get" action="" id="form" class="form">
-        <label for="url">Agrega el texto o enlace para tu QR</label>
+        <label for="url">Escribe el texto o enlace para tu QR</label>
         <input
           type="text"
           name="url"
           id="url"
-          placeholder="Agrega el texto o enlace para tu QR"
-        />
-        <label for="upload">Agrega un logo a tu QR</label>
-        <input
-          type="file"
-          accept="image/*"
-          onchange="loadFile(event)"
-          name="imagen"
-          id="upload"
+          placeholder="Escribe el texto o enlace para tu QR"
         />
+        <label for="upload" class="file-label"
+          >Agrega un logo a tu QR 
+          <i class="fa-solid fa-arrow-up-from-bracket"></i>
+          <input
+            type="file"
+            accept="image/*"
+            onchange="loadFile(event)"
+            name="imagen"
+            id="upload"
+          />
+        </label>
+
         <button id="btn" class="btn">Genera el QR</button>
       </form>
 

diff --git a/main.css b/main.css
@@ -11,11 +11,12 @@
 
 body,
 html {
+  font-family: "Kanit", sans-serif;
+  letter-spacing: 0.1em;
   background: var(--bckGrnd);
   color: var(--lettersC);
   width: 100%;
   height: auto;
-  font-weight: bold;
 }
 
 body.light-mode {
@@ -89,10 +90,37 @@ body.light-mode {
 
 .form input,
 .form button {
+  font-family: "Kanit", sans-serif;
   margin-bottom: 0;
 }
 
-.container input {
+.form button {
+  letter-spacing: 0.1em;
+  font-size: 1em;
+  padding: 0.7em;
+  cursor: pointer;
+}
+
+input[type="file"] {
+  display: none;
+}
+
+.file-label {
+  margin-top: 1em;
+  cursor: pointer;
+}
+
+label.file-label {
+  color: var(--lettersC);
+  font-size: 0.8em;
+}
+
+.fa-arrow-up-from-bracket {
+  margin-left: 1em;
+}
+
+.container input,
+.file-label {
   border: 1px solid var(--lettersC);
   border-radius: 0.3em;
   outline: none;
@@ -107,7 +135,6 @@ body.light-mode {
   border: 1px solid var(--lettersC);
   width: 100%;
   margin: 1em auto;
-  cursor: pointer;
   padding: 1em;
   border-radius: 0.3em;
 }
@@ -118,7 +145,8 @@ body.light-mode {
   transition: 0.5s;
 }
 
-.btn:hover {
+.btn:hover,
+.file-label:hover {
   background-color: var(--lettersC);
   color: var(--bckGrnd);
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
@@ -144,7 +172,6 @@ footer a:hover {
 }
 
 @media screen and (max-width: 850px) {
-
   .form {
     width: 75%;
   }