Skip to content

Instantly share code, notes, and snippets.

@jeffangelion

jeffangelion/technical-issues.htm

Created November 19, 2019 11:30
Show Gist options
  • Save jeffangelion/c4f95fc4fd645e6677c2c79d02180418 to your computer and use it in GitHub Desktop.
Save jeffangelion/c4f95fc4fd645e6677c2c79d02180418 to your computer and use it in GitHub Desktop.
Download ZIP
Technical issues webpage
Raw
technical-issues.htm
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--bg-color: #261A60;
--font-color: #9C93C6;
--base-color: #613A2F; /* Chocolate: #613A2F */
--left-color: #8A5448; /* Light Chocolate: #8A5448 */
--right-color: #482E28; /* Dark Chocolate: #482E28 */
--deg: 30deg;
}
body {
background-color:var(--bg-color);
}
h1 {
font-family: 'Cantarell', sans-serif;
color:#9C93C6;
position: absolute;
text-align: center;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
.bar {
display:flex;
flex-direction:column;
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotate(var(--deg));
margin: 10px 10px 10px;
}
.bar-row {
display: flex;
flex-direction: row;
}
#layer-0-left {
position: absolute;
top: -5px;
left: -5px;
border-left: 0px solid transparent;
border-right: 113px solid transparent;
border-top: 220px solid var(--left-color);
}
#layer-0-right {
position: absolute;
top: -5px;
left: -5px;
border-left: 113px solid transparent;
border-right: 0px solid transparent;
border-bottom: 220px solid var(--right-color);
}
#layer-1 {
border-top: 104px solid var(--base-color);
border-bottom: 104px solid var(--base-color);
border-left: 52px solid var(--base-color);
border-right: 52px solid var(--base-color);
position: absolute;
}
.layer-2 {
position: relative;
width: 40px;
border: 6px solid transparent;
}
#layer-2-left {
position: absolute;
top: 0;
left 0;
border-left: 0px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid var(--left-color);
}
#layer-2-right {
border-left: 40px solid transparent;
border-right: 0px solid transparent;
border-bottom: 40px solid var(--right-color);
}
#layer-2-center {
position: absolute;
border: 16px solid var(--base-color);
margin: 4px 4px 4px;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Cantarell:700&display=swap" rel="stylesheet">
</head>
<body>
<div class="bar center">
<div id="layer-0-left"></div>
<div id="layer-0-right"></div>
<div id="layer-1"></div>
<div class="bar-row">
<div class="layer-2">
<div id="layer-2-left"></div>
<div id="layer-2-center"></div>
<div id="layer-2-right"></div>
</div>
<div class="layer-2">
<div id="layer-2-left"></div>
<div id="layer-2-center"></div>
<div id="layer-2-right"></div>
</div>
</div>
<div class="bar-row">
<div class="layer-2">
<div id="layer-2-left"></div>
<div id="layer-2-center"></div>
<div id="layer-2-right"></div>
</div>
<div class="layer-2">
<div id="layer-2-left"></div>
<div id="layer-2-center"></div>
<div id="layer-2-right"></div>
</div>
</div>
<div class="bar-row">
<div class="layer-2">
<div id="layer-2-left"></div>
<div id="layer-2-center"></div>
<div id="layer-2-right"></div>
</div>
<div class="layer-2">
<div id="layer-2-left"></div>
<div id="layer-2-center"></div>
<div id="layer-2-right"></div>
</div>
</div>
<div class="bar-row">
<div class="layer-2">
<div id="layer-2-left"></div>
<div id="layer-2-center"></div>
<div id="layer-2-right"></div>
</div>
<div class="layer-2">
<div id="layer-2-left"></div>
<div id="layer-2-center"></div>
<div id="layer-2-right"></div>
</div>
</div>
</div>
<h1>Chocnical issues!</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment