james/miles-city-council
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

donate page

Browse Source
This commit is contained in:
scoliono 2021-05-11 20:47:12 -07:00
parent 107f599f27
commit cf3df70285
2 changed files with 56 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
css/main.css
View File

@ -77,11 +77,13 @@ nav a:hover {
.banner { .banner {
display: flex; display: flex;
background-color: var(--banner-bg); background-color: var(--banner-bg);
color: var(--button-text);
margin: 0 auto; margin: 0 auto;
justify-content: center; justify-content: center;
padding: 2rem 0; padding: 2rem 0;
width: 60%; width: 60%;
min-width: 400px; min-width: 400px;
flex-direction: column;
} }
.banner form { .banner form {
@ -161,6 +163,7 @@ nav a:hover {
} }
.container { .container {
display: block;
flex: 1 0 0; flex: 1 0 0;
font-size: 24px; font-size: 24px;
padding: 4rem; padding: 4rem;
@ -206,19 +209,41 @@ nav a:hover {
#joinus { #joinus {
background-image: url(../assets/bote.jpg); background-image: url(../assets/bote.jpg);
flex-direction: column;
text-align: center; text-align: center;
} }
#joinus .container { #contact .banner {
display: block; text-align: center;
} }
#joinus h1 { .header h1 {
background-color: var(--button-bg); background-color: var(--button-bg);
color: var(--button-text); color: var(--button-text);
font-size: 56px; font-size: 56px;
padding: 0 2rem; padding: 0 2rem;
margin: 0 auto 2rem auto; margin: 0 auto 2rem auto;
max-width: 200px; text-align: center;
max-width: 300px;
}
#donate .banner {
flex-direction: row;
align-items: center;
}
#donate .banner > div {
padding: 1rem;
}
.donate-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.donate-buttons button {
margin: 0.5rem;
width: 10rem;
text-align: center;
padding: 1rem 0;
} }

26
index.html
View File

@ -66,8 +66,34 @@
</div> </div>
</div> </div>
<div id="donate" class="fullpage"> <div id="donate" class="fullpage">
<div class="container">
<div class="header">
<h1>Donate</h1>
</div>
<div class="banner">
<div>
<h2>What is your contribution?</h2>
</div>
<div class="donate-buttons">
<button>$10</button>
<button>$20</button>
<button>$50</button>
<button>$100</button>
<button>Other</button>
</div>
</div>
</div>
</div> </div>
<div id="contact" class="fullpage"> <div id="contact" class="fullpage">
<div class="container">
<div class="header">
<h1>Contact</h1>
</div>
<div class="banner">
<h2>For any further inquiries please email</h2>
<h2>contact@mileslinden.com</h2>
</div>
</div>
</div> </div>
</body> </body>
</html> </html>