From b0c805b111e12129231fb7458532144a8d2699ed Mon Sep 17 00:00:00 2001
From: ANSHIKA-26 <arora.anshika.26@gmail.com>
Date: Thu, 2 Jan 2025 17:41:04 +0530
Subject: [PATCH] feat : added css

---
 index.html |  12 ++++++-
 style.css  | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 style.css
diff --git a/index.html b/index.html
index d39cc6a..27a2e8c 100644
--- a/index.html
+++ b/index.html
@@ -6,16 +6,22 @@
     <meta charset="UTF-8">
     <title>Create QR</title>
     <script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
+    <link rel="stylesheet" href="style.css"> 
 </head>
 
 <body>
+    <header>
+        <h1>Welcome to Share-Bit-Wirelessly</h1>
+        <p>Generate QR codes to transfer small files securely and easily.</p>
+    </header>
+
     <div>
         <p>
             Use this tool to generate a QR code to transfer a small file (< 2kb). The file is encoded into the QR code
                 itself and <b>is not uploaded to any server</b>.
                 <br><br>The file's data never leaves your computer. (Though this site's server can technically see the
                 file's name)
-                <br><br>for testing purpose you can download any small file from here <a href="https://drive.google.com/drive/folders/1EBLsp5UrM1KFNgGKQUEALKo6uOVpUlaU?usp=sharing">here</a>
+                <br><br>for testing purpose you can download any small file from <a href="https://drive.google.com/drive/folders/1EBLsp5UrM1KFNgGKQUEALKo6uOVpUlaU?usp=sharing">here</a>
                 <br><br>To generate one of these QR codes without needing to load this page from the internet, you can
                 either:
                 <ul>
@@ -59,6 +65,10 @@
         });
     </script>
 
+<footer>
+    <p>&copy; 2024 Aman Umrao. All rights reserved.</p>
+</footer>
+
 </body>
 
 </html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..214c2d3
--- /dev/null
+++ b/style.css
@@ -0,0 +1,101 @@
+html, body {
+    font-family: 'Comic Sans MS', cursive, sans-serif;
+    background-color: #f0f8ff;
+    color: #333;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    height: 100%;
+}
+
+
+header {
+    position: sticky;
+    top: 0px; 
+    padding: 20px;
+    background-color: #ffb6c1;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 999; /* Ensure it stays on top of other content */
+}
+
+header h1 {
+    margin: 0;
+    font-size: 2em;
+    color: #333;
+}
+
+header p {
+    margin: 10px 0 0;
+    font-size: 1.2em;
+    color: #666;
+}
+
+div {
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 20px auto;
+    max-width: 600px;
+}
+
+p {
+    font-size: 1.2em;
+    line-height: 1.6;
+}
+
+a {
+    color: #ff69b4;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+input[type="file"] {
+    display: block;
+    margin: 20px auto;
+    padding: 10px;
+    border: 2px dashed #ff69b4;
+    border-radius: 10px;
+    background-color: #fff;
+    cursor: pointer;
+}
+
+button {
+    background-color: #ff69b4;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+button:hover {
+    background-color: #ff1493;
+}
+
+#qrcode {
+    margin-top: 20px;
+}
+
+footer {
+    background-color: #ff69b4;
+    color: #fff;
+    text-align: center;
+    padding: 10px 0;
+    position: relative;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1000; /* Ensure it stays on top */
+}
+
+footer p {
+    margin: 0;
+    font-size: 1em;
+}
\ No newline at end of file
