Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat : added css
Browse files Browse the repository at this point in the history
ANSHIKA-26 committed Jan 2, 2025
1 parent 66525dd commit b0c805b
Showing 2 changed files with 112 additions and 1 deletion.
12 changes: 11 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -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>
101 changes: 101 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit b0c805b

Please sign in to comment.