emilbreiner.github.io/about.html at master · Brixteren/emilbreiner.github.io · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
		<title>ImgGen - About</title>
	</head>

	<body style="margin: 0px; background: black;">
		<div class="flex-main">
			<div class="dropdown">
				<button onclick="menuFunc()" class="dropbtn">Menu</button>
				<div id="menu" class="dropdown-content">
					<a href="index.html">Home</a>
					<a href="about.html">About</a>
					<a href="contact.html">Contact</a>
				</div>
			</div>
		</div>
		<div class="about">
			<div class="aboutText">
				<p>This is an image generator website, based on photos from <a href="unsplash.com">unsplash.com</a> and <a href="pixabay.com">pixabay.com</a>.</p>
				<p>Images are originally randomly generated, but the user can input queries to find specific images.</p>
				<p>Since Unsplash's API is restricted, only 50 requests are allowed per minute. That is why the Unsplash images only changes every 2 minutes.</p>
				<p>This website was created, with ♥, by <a href="https://github.com/emilbreiner">Emil Breiner</a></p>
			</div>
		</div>
	</body>
	<footer>
		<style>
			p {
				text-align: center;
				color: white;
			}

			a {
				color: white;
			}

			.about {
				margin-top: 10%;
			}

			.flex-main{
                display: flex;
                justify-content:space-between;
                align-content: center;
                flex-wrap: wrap;
				height: 8vh;
			}

			.dropbtn {
				background-color: white;
				color: black;
				padding: 16px;
				font-size: 16px;
				border: none;
				cursor: pointer;
				border-radius: 4px;
				margin: 8px;
			}

			.dropbtn:hover, .dropbtn:focus {
				background-color: #eff0f2;
			}

			.dropdown {
				position: absolute;
				right: 0;
			}

			.dropdown-content {
				display: none;
				position: absolute;
				background-color: #f1f1f1;
				min-width: 160px;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				z-index: 1;
				right: 0;
			}

			.dropdown-content a {
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
			}

			.dropdown-content a:hover {background-color: #ddd}

			.show {display:block;}
		</style>

		<script>
			function menuFunc() {
				if ($('#menu').hasClass('show')) {
					$('#menu').removeClass('show');
				}
				else {
				$('#menu').addClass('show');
				}
			};

			window.onclick = function (event) {
				if (!event.target.matches('.dropbtn')) {
					var dropdown = document.getElementsByClassName('dropdown-content');
					for (var i = 0; i < dropdown.length; i++) {
						var openDropdown = dropdown[i];
						if ($(openDropdown).hasClass('show')) {
							$(openDropdown).removeClass('show');
						}
					}
				}
			};
		</script>
	</footer>
</html>