Created
December 4, 2023 15:32
-
-
Save Lucifer1590/4040fbf94db49d6655714982a7032fd3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap'); | |
body { | |
font-family: 'Roboto', sans-serif; | |
background-color: #f8f9fa; | |
margin: 0; | |
color: #333; | |
} | |
.container { | |
text-align: center; | |
background-color: #ffffff; | |
padding: 40px; | |
border-radius: 10px; | |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
margin: 40px auto; | |
max-width: 500px; | |
} | |
h1 { | |
color: #0056b3; | |
margin-bottom: 30px; | |
} | |
button { | |
padding: 15px 30px; | |
margin-top: 20px; | |
cursor: pointer; | |
background-color: #007bff; | |
color: #fff; | |
border: none; | |
border-radius: 5px; | |
transition: background-color 0.3s ease; | |
font-weight: 700; | |
} | |
button:hover, button:active { | |
background-color: #0056b3; | |
} | |
input, button { | |
padding: 12px; | |
margin-top: 10px; | |
border: 1px solid #ced4da; | |
border-radius: 5px; | |
width: calc(100% - 24px); | |
} | |
.input-group { | |
margin-bottom: 20px; | |
} | |
.input-group label { | |
display: block; | |
margin-bottom: 8px; | |
font-weight: 700; | |
} | |
#result { | |
background-color: #e9ecef; | |
padding: 20px; | |
border-radius: 10px; | |
margin-top: 30px; | |
} | |
#result p { | |
margin: 10px 0; | |
} | |
@media (max-width: 768px) { | |
.container { | |
width: 95%; | |
} | |
} | |
img { | |
max-width: 100%; | |
height: auto; | |
display: block; | |
margin: 0 auto; | |
} | |
#logo { | |
max-width: 200px; /* Maximum size to ensure it's not too large */ | |
width: 50%; /* Percentage base to stay responsive */ | |
height: auto; /* Keep the aspect ratio of the logo */ | |
display: block; | |
margin: 20px auto; /* Center the logo */ | |
} | |
#donationButton { | |
padding: 15px 30px; | |
margin-top: 20px; | |
cursor: pointer; | |
background-color: #007bff; | |
color: #fff; | |
border: none; | |
border-radius: 5px; | |
font-weight: 700; | |
transition: background-color 0.3s ease; | |
} | |
#donationButton:hover, #donationButton:active { | |
background-color: #0056b3; | |
} | |
#donationInfo { | |
background-color: #e9ecef; | |
padding: 15px; | |
border-radius: 8px; | |
margin-top: 20px; | |
display: none; /* hidden by default */ | |
} | |
.hidden { | |
display: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment