-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout_page.html
150 lines (131 loc) · 5 KB
/
about_page.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
background-image: url('images/catbg2.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
}
h1 {
text-align: center;
padding: 20px;
background-color: rgba(255, 255, 255, 0.9); /* Transparent white */
margin: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.heading-container {
background-color: rgba(106, 102, 116, 0.8);
padding: 40px 20px;
text-align: center;
}
h3 {
color: #fff;
margin: 0;
font-size: 2em;
}
.paragraph-container {
width: 85%;
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: rgba(48, 45, 45, 0.7);
color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
p {
margin-bottom: 20px;
line-height: 1.6;
font-size: 1.2em;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.slider {
width: 100%;
height: 50vh;
position: relative;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-top: 10px;
}
.slides {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.slide {
flex: 1;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
}
.slide img {
max-width: 100%;
height: auto;
}
.bottom-container {
background-color: rgba(106, 102, 116, 0.8);
padding: 10px 5px;
font-size: 0.9em;
font-weight: 300;
color: #fff;
text-align: center;
}
.bottom-container h3 {
font-size: 1.5em;
}
.inspiration-container {
background-color: rgba(106, 102, 116, 0.8);
padding: 20px;
font-size: 0.9em;
font-weight: 300;
color: #fff;
text-align: center;
margin: 20px auto;
width: 80%;
max-width: 800px;
border-radius: 8px;
}
.inspiration-container h3 {
font-size: 1.5em;
font-weight: 300;
margin: 0;
}
</style>
</head>
<body>
<div class="heading-container">
<h3>Kahu: Discover Your Cat's Breed!</h3>
</div>
<div class="paragraph-container">
<p>The idea for Kahu, our cat breed detection website, was born out of a personal experience that profoundly changed my life. In October of last year, I adopted a charming cat named Joey. Curious about Joey's breed, I realized there was a need for a simple yet reliable tool to help pet owners like myself identify their feline friends' breeds. This sparked the creation of Kahu, my first self-made project.</p>
<p>Joey has been a source of immense joy and togetherness for my family. Her playful antics and affectionate nature have strengthened our bond and filled our home with happiness. Through Kahu, I aim to share this joy by providing a tool that helps other pet owners understand and connect with their pets on a deeper level.</p>
<p>Kahu is designed to be user-friendly and highly effective. By simply uploading a photo of your cat, you can quickly discover its breed and learn more about its unique characteristics. This knowledge not only satisfies curiosity but also helps in providing better care tailored to your cat's specific needs.</p>
<p>Discover your cat's breed with Kahu and celebrate the unique traits that make your feline friend special. Whether you are a new pet owner or a seasoned cat lover, Kahu is here to assist you in uncovering the fascinating world of cat breeds, just as Joey has helped me uncover the joys of pet companionship.</p>
</div>
<div class="inspiration-container">
<h3>Here's Who Inspired This Website</h3>
</div>
<div class="slider">
<div class="slides">
<div class="slide"><img src="images/joe1.jpg" alt="Joey 1"></div>
<div class="slide"><img src="images/joe2.jpg" alt="Joey 2"></div>
<div class="slide"><img src="images/joe3.jpg" alt="Joey 3"></div>
</div>
</div>
<div class="bottom-container">
<h3>Thank you for visiting Kahu!</h3>
</div>
</body>
</html>