Skip to content

Commit 9c3aff9

Browse files
2222k30602222k3060
authored
Create cat.html
Here's the project "Which Cat Breed I Should Choose" in a single HTML file with embedded CSS, ready to be used as a starting point:
1 parent ec021c9 commit 9c3aff9

File tree

1 file changed

+143
-0
lines changed

1 file changed

+143
-0
lines changed

‎cat.html‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Which Cat Breed Should I Choose?</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
background-color: #f4f4f4;
13+
color: #333;
14+
}
15+
header {
16+
background-color: #333;
17+
color: white;
18+
text-align: center;
19+
padding: 20px;
20+
}
21+
.intro-section {
22+
text-align: center;
23+
padding: 50px;
24+
background-color: #ffcccb;
25+
}
26+
.intro-section h2 {
27+
font-size: 28px;
28+
margin-bottom: 20px;
29+
}
30+
.intro-section p {
31+
font-size: 18px;
32+
}
33+
.form-section {
34+
margin: 50px auto;
35+
width: 50%;
36+
background-color: white;
37+
padding: 30px;
38+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
39+
border-radius: 10px;
40+
}
41+
.form-section label {
42+
font-size: 18px;
43+
display: block;
44+
margin-bottom: 10px;
45+
}
46+
.form-section select, .form-section input {
47+
width: 100%;
48+
padding: 10px;
49+
margin-bottom: 20px;
50+
border-radius: 5px;
51+
border: 1px solid #ccc;
52+
}
53+
.form-section button {
54+
background-color: #333;
55+
color: white;
56+
padding: 15px;
57+
width: 100%;
58+
border: none;
59+
border-radius: 5px;
60+
cursor: pointer;
61+
}
62+
.form-section button:hover {
63+
background-color: #555;
64+
}
65+
.results-section {
66+
text-align: center;
67+
margin: 50px auto;
68+
width: 50%;
69+
}
70+
.results-section h3 {
71+
font-size: 24px;
72+
margin-bottom: 20px;
73+
}
74+
footer {
75+
text-align: center;
76+
padding: 20px;
77+
background-color: #333;
78+
color: white;
79+
}
80+
</style>
81+
</head>
82+
<body>
83+
84+
<header>
85+
<h1>Which Cat Breed Should I Choose?</h1>
86+
</header>
87+
88+
<section class="intro-section">
89+
<h2>Find the Perfect Cat Breed for You</h2>
90+
<p>Answer a few questions, and we'll help you find the best cat breed based on your personality and location!</p>
91+
</section>
92+
93+
<section class="form-section">
94+
<form>
95+
<label for="personality">What's your personality like?</label>
96+
<select id="personality">
97+
<option value="calm">Calm</option>
98+
<option value="active">Active</option>
99+
<option value="social">Social</option>
100+
</select>
101+
102+
<label for="location">Where do you live?</label>
103+
<select id="location">
104+
<option value="city">City</option>
105+
<option value="suburbs">Suburbs</option>
106+
<option value="countryside">Countryside</option>
107+
</select>
108+
109+
<button type="button" onclick="showBreed()">Find My Cat Breed</button>
110+
</form>
111+
</section>
112+
113+
<section class="results-section" id="results-section">
114+
<h3>Your Recommended Cat Breed Will Appear Here</h3>
115+
<p id="result"></p>
116+
</section>
117+
118+
<footer>
119+
<p>&copy; 2024 Which Cat Breed Should I Choose?</p>
120+
</footer>
121+
122+
<script>
123+
function showBreed() {
124+
const personality = document.getElementById('personality').value;
125+
const location = document.getElementById('location').value;
126+
let breed = '';
127+
128+
if (personality === 'calm' && location === 'city') {
129+
breed = 'Persian';
130+
} else if (personality === 'active' && location === 'suburbs') {
131+
breed = 'Siamese';
132+
} else if (personality === 'social' && location === 'countryside') {
133+
breed = 'Maine Coon';
134+
} else {
135+
breed = 'Domestic Shorthair';
136+
}
137+
138+
document.getElementById('result').innerText = 'We recommend the ' + breed + ' breed for you!';
139+
}
140+
</script>
141+
142+
</body>
143+
</html>

0 commit comments

Comments
 (0)