Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add cancel, completed, and custom button pages
  • Loading branch information
prophen committed Nov 7, 2022
1 parent 426e6a9 commit 9fb12f4
Show file tree
Hide file tree
Showing 6 changed files with 314 additions and 22 deletions.
90 changes: 90 additions & 0 deletions cancel.html
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PayPal Donations Example - Kitty's House Cat Rescue</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Montserrat"
/>
<link rel="stylesheet" href="styles/w3.css" />
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<!-- Sidebar with image -->
<figure
class="w3-sidebar w3-hide-medium w3-hide-small"
aria-hidden="true"
style="width: 40%"
>
<div class="bgimg"></div>
</figure>

<!-- Page Content -->
<div class="w3-main w3-padding-large" style="margin-left: 40%">
<!-- Header -->
<header
class="w3-container w3-center"
style="padding: 128px 16px"
id="home"
>
<h1 class="w3-jumbo">Kitty's House</h1>
<h2>Cat rescue and foster home.</h2>
<img
loading="lazy"
src="images/cat3.jpg"
class="w3-image w3-hide-large w3-hide-small w3-round"
style="display: block; width: 60%; margin: auto"
alt="tabby cat standing upright and looking up in greyscale"
/>
<img
loading="lazy"
src="images/cat3.jpg"
class="w3-image w3-hide-large w3-hide-medium w3-round"
width="1000"
height="1333"
alt="tabby cat standing upright and looking up in greyscale"
/>
</header>

<main class="w3-padding-32 w3-content">
<h3 class="w3-text-grey">Still want to donate?</h3>

<hr class="w3-opacity" />
<p>
Help us continue our mission and
<a
href="https://www.sandbox.paypal.com/donate/?hosted_button_id=FXUZZUASN3ETG"
>donate to Kitty's House today.</a
>
</p>
<!-- Donate button -->

<!-- Donate button -->
<a
href="https://www.sandbox.paypal.com/donate/?hosted_button_id=FXUZZUASN3ETG"
>
<button
class="w3-button w3-white w3-border w3-border-green w3-large w3-padding-large w3-hover-teal w3-round w3-margin-top"
>
<span>
<i class="icon" aria-hidden="true"></i>
<span style="font-weight: bold">Donate to Kitty's House</span>
</span>
</button>
</a>

<!-- end donate button -->
<h3 class="w3-text-grey">Changed your mind?</h3>

<hr class="w3-opacity" />
<p>
<a href="./">Return to the home page</a>
</p>
</main>

<!-- END PAGE CONTENT -->
</div>
</body>
</html>
63 changes: 63 additions & 0 deletions completed.html
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PayPal Donations Example - Kitty's House Cat Rescue</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Montserrat"
/>
<link rel="stylesheet" href="styles/w3.css" />
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<!-- Sidebar with image -->
<figure
class="w3-sidebar w3-hide-medium w3-hide-small"
aria-hidden="true"
style="width: 40%"
>
<div class="bgimg"></div>
</figure>

<!-- Page Content -->
<div class="w3-main w3-padding-large" style="margin-left: 40%">
<!-- Header -->
<header
class="w3-container w3-center"
style="padding: 128px 16px"
id="home"
>
<h1 class="w3-jumbo">Kitty's House</h1>
<h2>Thanks You For Your Generous Donation</h2>
<img
loading="lazy"
src="images/cat3.jpg"
class="w3-image w3-hide-large w3-hide-small w3-round"
style="display: block; width: 60%; margin: auto"
alt="tabby cat standing upright and looking up in greyscale"
/>
<img
loading="lazy"
src="images/cat3.jpg"
class="w3-image w3-hide-large w3-hide-medium w3-round"
width="1000"
height="1333"
alt="tabby cat standing upright and looking up in greyscale"
/>
</header>

<main class="w3-padding-32 w3-content">
<h3 class="w3-text-grey">You are awesome!</h3>

<hr class="w3-opacity" />
<p>
<a href="./">Return to the home page</a>
</p>
</main>

<!-- END PAGE CONTENT -->
</div>
</body>
</html>
130 changes: 130 additions & 0 deletions custom-button.html
@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>PayPal Donations Example - Kitty's House Cat Rescue</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles/w3.css" />
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Montserrat"
/>
</head>
<body>
<!-- Sidebar with image -->
<figure
class="w3-sidebar w3-hide-medium w3-hide-small"
aria-hidden="true"
style="width: 40%"
>
<div class="bgimg"></div>
</figure>

<!-- Page Content -->
<div class="w3-main w3-padding-large" style="margin-left: 40%">
<!-- Header -->
<header
class="w3-container w3-center"
style="padding: 128px 16px"
id="home"
>
<h1 class="w3-jumbo">Kitty's House</h1>
<h2>Cat rescue and foster home.</h2>
<img loading="lazy"
src="images/cat3.jpg"
class="w3-image w3-hide-large w3-hide-small w3-round"
style="display: block; width: 60%; margin: auto"
alt="tabby cat standing upright and looking up in greyscale"
/>
<img loading="lazy"
src="images/cat3.jpg"
class="w3-image w3-hide-large w3-hide-medium w3-round"
width="1000"
height="1333"
alt="tabby cat standing upright and looking up in greyscale"
/>


</header>

<main class="w3-padding-32 w3-content">
<h3 class="w3-text-grey">Donate to Kitty's House Today</h3>

<hr class="w3-opacity" />
<p>
Kitty's House is a non-profit cat rescue and retreat. We foster
kittens until they reach adoption age and also have senior cats who
are eligible to be adopted into their forever home. They still have a
lot of love to give! Help us continue our mission and
<a
href="https://www.sandbox.paypal.com/donate/?hosted_button_id=FXUZZUASN3ETG"
>donate to Kitty's House today.</a
> <!-- The PayPal hosted donate button -->
<div id="donate-button-container">
<div id="donate-button"></div>
<script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
<script>
PayPal.Donation.Button({
env:'sandbox',
hosted_button_id:'ZVD8FNYW4LS5C',
image: {
src:'https://pics-v2.sandbox.paypal.com/00/s/MDhiNDY1MzMtMjJjYS00MmVhLTlkY2MtMGRjNTQ3NTBmZjVj/file.PNG',
alt:'Donate with PayPal button',
title:'PayPal - The safer, easier way to pay online!',
}
}).render('#donate-button');
</script>
</div>

<!-- end PayPal button -->
</p>
<h3 class="w3-text-grey">Our Residents</h3>
<hr class="w3-opacity" />

<p>
Sniff catnip and act crazy eat a plant, kill a hand jump on counter
removed by human jump on counter again removed by human meow before
jumping on counter this time to let the human know am coming back yet
eat and than sleep on your face fall asleep on the washing machine but
run off table persian cat jump eat fish but who's the baby. Trip owner
up in kitchen i want food roll over and sun my belly. Knock over
christmas tree sun bathe.
</p>

<!-- Grid for photos -->
<div class="w3-row-padding" style="margin: 0 -16px">
<div class="w3-half">
<img loading="lazy"
src="images/cat4.jpg"
alt="a light colored fluffy cat sitting on their hind legs with the front paws raised in greyscale"
/>
<img loading="lazy" src="images/cat9.jpg" alt="add text" />

<img loading="lazy" src="images/cat10.jpg" alt="add text" />
</div>

<div class="w3-half">
<img loading="lazy"
src="images/cat2.jpg"
alt="the upper body of a tabby cat. Their face is in focus and the back part of the body is blurred in greyscale"
/>
<img loading="lazy"
src="images/cat8.jpg"
alt="straight on face of a tabby cat with their mouth open in greyscale"
/>
<img loading="lazy"
src="images/cat7.jpg"
alt="A small tabby cat, possibly a kitten with their mouth streched wide and eyes squinted while yawning"
/>
</div>
<!-- End photo grid -->
</div>
</main>



<!-- END PAGE CONTENT -->
</div>
</body>
</html>
19 changes: 14 additions & 5 deletions index.html
Expand Up @@ -32,12 +32,14 @@
<h1 class="w3-jumbo">Kitty's House</h1>
<h2>Cat rescue and foster home.</h2>
<img
loading="lazy"
src="images/cat3.jpg"
class="w3-image w3-hide-large w3-hide-small w3-round"
style="display: block; width: 60%; margin: auto"
alt="tabby cat standing upright and looking up in greyscale"
/>
<img
loading="lazy"
src="images/cat3.jpg"
class="w3-image w3-hide-large w3-hide-medium w3-round"
width="1000"
Expand All @@ -56,13 +58,15 @@ <h3 class="w3-text-grey">Donate to Kitty's House Today</h3>
are eligible to be adopted into their forever home. They still have a
lot of love to give! Help us continue our mission and
<a
href="https://www.sandbox.paypal.com/donate/?hosted_button_id=STUGBM7FB2D88"
href="https://www.sandbox.paypal.com/donate/?hosted_button_id=FXUZZUASN3ETG"
>donate to Kitty's House today.</a
>
</p>
<!-- Donate button -->

<!-- Donate button -->
<a
href="https://www.sandbox.paypal.com/donate/?hosted_button_id=STUGBM7FB2D88"
title="Donate to Kitty's House"
href="https://www.sandbox.paypal.com/donate/?hosted_button_id=FXUZZUASN3ETG"
>
<button
class="w3-button w3-white w3-border w3-border-green w3-large w3-padding-large w3-hover-teal w3-round w3-margin-top"
Expand All @@ -74,6 +78,7 @@ <h3 class="w3-text-grey">Donate to Kitty's House Today</h3>
</button>
</a>

<!-- end donate button -->
<h3 class="w3-text-grey">Our Residents</h3>
<hr class="w3-opacity" />

Expand All @@ -91,24 +96,28 @@ <h3 class="w3-text-grey">Our Residents</h3>
<div class="w3-row-padding" style="margin: 0 -16px">
<div class="w3-half">
<img
loading="lazy"
src="images/cat4.jpg"
alt="a light colored fluffy cat sitting on their hind legs with the front paws raised in greyscale"
/>
<img src="images/cat9.jpg" alt="add text" />
<img loading="lazy" src="images/cat9.jpg" alt="add text" />

<img src="images/cat10.jpg" alt="add text" />
<img loading="lazy" src="images/cat10.jpg" alt="add text" />
</div>

<div class="w3-half">
<img
loading="lazy"
src="images/cat2.jpg"
alt="the upper body of a tabby cat. Their face is in focus and the back part of the body is blurred in greyscale"
/>
<img
loading="lazy"
src="images/cat8.jpg"
alt="straight on face of a tabby cat with their mouth open in greyscale"
/>
<img
loading="lazy"
src="images/cat7.jpg"
alt="A small tabby cat, possibly a kitten with their mouth streched wide and eyes squinted while yawning"
/>
Expand Down
5 changes: 5 additions & 0 deletions styles/styles.css
Expand Up @@ -56,3 +56,8 @@ form {
display: block;
margin: 5px 10px 5px 5px;
}
#donate-button-container {
display: grid;
justify-content: center;
text-decoration: none;
}

0 comments on commit 9fb12f4

Please sign in to comment.