105 lines
2.8 KiB
PHP
105 lines
2.8 KiB
PHP
<?php include "../html-head.php"; ?>
|
|
|
|
<link rel="stylesheet" href="https://static.eliasfink.de/fonts/montserrat/montserrat.css">
|
|
|
|
<style>
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
|
}
|
|
|
|
#content {
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.color-palette {
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.single-color {
|
|
width: 20%;
|
|
float: left;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
|
|
.single-color div {
|
|
padding-top: 50%;
|
|
margin-top: 50px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<title>Colors – eliasfink.de</title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="content">
|
|
|
|
<div id="blue" class="color-palette">
|
|
<div class="single-color">
|
|
<div style="background-color: var(--blue-1);"></div>
|
|
<span>#001A33</span>
|
|
</div>
|
|
<div class="single-color">
|
|
<div style="background-color: var(--blue-2);"></div>
|
|
<span>#004D99</span>
|
|
</div>
|
|
<div class="single-color">
|
|
<div style="background-color: var(--blue-3);"></div>
|
|
<span>#0080FF</span>
|
|
</div>
|
|
<div class="single-color">
|
|
<div style="background-color: var(--blue-4);"></div>
|
|
<span>#66B3FF</span>
|
|
</div>
|
|
<div class="single-color">
|
|
<div style="background-color: var(--blue-5);"></div>
|
|
<span>#CCE6FF</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="grey" class="color-palette">
|
|
<div class="single-color">
|
|
<div style="background-color: var(--grey-1);"></div>
|
|
<span>#161A1D</span>
|
|
</div>
|
|
<div class="single-color">
|
|
<div style="background-color: var(--grey-2);"></div>
|
|
<span>#434D56</span>
|
|
</div>
|
|
<div class="single-color">
|
|
<div style="background-color: var(--grey-3);"></div>
|
|
<span>#708090</span>
|
|
</div>
|
|
<div class="single-color">
|
|
<div style="background-color: var(--grey-4);"></div>
|
|
<span>#A9B3BC</span>
|
|
</div>
|
|
<div class="single-color">
|
|
<div style="background-color: var(--grey-5);"></div>
|
|
<span>#E2E6E9</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|