/
custom-button.html
130 lines (117 loc) · 4.65 KB
/
custom-button.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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>