QR Code Generator
/* Custom Styles */
body {
font-family: 'Open Sans', sans-serif; /* Use a modern font */
background-color: #f7f7f7; /* Light background color */
text-align: center;
padding-top: 50px; /* Adjust padding to your liking */
}
#qrCodeGeneratorContainer {
max-width: 320px; /* Adjust the width to fit your design */
margin: 0 auto;
padding: 20px;
background-color: #ffffff; /* White background for the QR code area */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
#urlInput {
width: 100%;
padding: 15px;
margin-bottom: 20px;
font-size: 18px; /* Larger font size for the input */
border: 1px solid #ddd; /* Light border for the input */
border-radius: 4px; /* Slightly rounded corners for the input box */
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); /* Inner shadow for the input */
}
#generateButton {
padding: 15px 30px;
font-size: 18px; /* Larger font size for the button */
background-color: #4CAF50; /* Button color */
color: white;
border: none;
border-radius: 4px; /* Rounded corners for the button */
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Shadow for the button */
transition: background-color 0.3s; /* Smooth transition for hover effect */
}
#generateButton:hover {
background-color: #43a047; /* Slightly darker green on hover */
}
#qrcode {
margin-top: 15px;
width: 200px; /* Adjust QR code size */
height: 200px;
display: inline-block;
border: 1px solid #ddd; /* Border for QR code */
border-radius: 4px; /* Rounded corners for QR code */
padding: 10px; /* Padding around QR code */
background-color: #ffffff; /* White background for QR code */
box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Shadow for QR code */
}