-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (75 loc) · 4.59 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Crying Cats Cyber Gallery</title>
</head>
<body style="background-color: lightblue;">
<div class="container">
<div class=".jumbotron" style="background-color: blueviolet; text-align: center">
<h1>Welcome to the Crying Cats Cyber Gallery!</h1>
</div>
<div class="row justify-content-center">
<div class="col-lg-6 col-md-12 col-sm-12">
<img src="https://github.com/fatih-alperen/crying-cat-cyber-gallery/blob/master/bitten_kitten.jpeg?raw=true" class="img-fluid">
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<h3>About this picture:</h3>
<p>
I found this picture on an anonymous imageboard. I have no idea who made it but god bless their souls.
I really love how shocked the cat in the background is. Expressing disbelief so clearly with its little
cute mouth. Crying cat on the other hand, looks accepting of its fate and cries desperately,
knowing there is absolutely nothing it can do in this situation.
Also the dog is biting the cat with such unexpressive face. This creates a beautiful contrast with
the faces of both cats, which have so much emotion. This picture might be my favourite crying cat picture.
</p>
</div>
<div class="col-lg-8 col-md-6 col-sm-12">
<form style="background-color: violet; text-align: center">
<h3>Show your appreciation for this picture:</h3>
<div class="appreciation-form">
<label for="name">Your name</label>
<input type="text">
</div>
<div class="appreciation-form">
<label for="appreciation-level">Select your appreciation level:</label>
<select>
<option> <100</option>
<option>100 - 265</option>
<option>265 - 357</option>
<option>357 - 449</option>
<option>449 - 9000</option>
<option>>9000</option>
</select>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
<div class="row">
<footer style="background-color: blueviolet;" class="col-12">
<div style="margin-left: 20px; margin-top: 10px; text-align: center">
<h6>What is this project?</h6>
<p>Since the dawn of humanity, man had one purpose: to share cat pictures. We can see it on the ancient cave drawings,
we can see it on the Egyptian hieroglyphs, we can see it on the Renaissance paintings, we can see it on the first
hit cartoon, Felix the Cat and finally we are seeing it on the greatest communication infrastructure ever built in history,
the internet itself. The internet was built for one purpose, that is sharing cat pictures.</p>
<p>I am a hobbyist who likes to
collect cat pictures that are photoshopped to look like the cats are crying. This project aims to share those pictures
I have collected so far.</p>
</div>
</footer>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>