Skip to content

Instantly share code, notes, and snippets.

@trotzig

trotzig/code-in-the-dark_henric-trotzig-untouched.html

Created September 10, 2018 07:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save trotzig/e1218ae8812c5ceeabd3333f0f29d342 to your computer and use it in GitHub Desktop.
Save trotzig/e1218ae8812c5ceeabd3333f0f29d342 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
code-in-the-dark_henric-trotzig-untouched.html
<html>
<style>
* {
box-sizing: border-box;
}
.nitem {
padding: 15px 30px;
}
.bitem {
flex-grow: 1;
margin: 30px 15px;
padding: 15px;
}
</style>
<body style="
color: white;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 14px;
">
<div style="
display: flex;
align-items: center;
min-height: 100px;
">
<img src="assets/logo.png" style="width: 200px; height: auto" />
</div>
<div style="
display: flex;
align-items: center;
padding: 15px;
background-color: blue;
color: white;
min-height: 40px;
">
<div class="nitem">Swedish voting system</div>
<div class="nitem">English sdflkjm</div>
<div class="nitem">For parties</div>
<div class="nitem">asdslfkj</div>
</div>
<div style="
display: flex;
align-items: center;
color: white;
background-color: #f0f0f0;
margin: 30px;
">
<div style="
background-color: black;
width: 50%;
flex-grow: 1;
min-height: 300px;
">
<h1>Val 2018</h1>
<p style="font-size: 12px;">adsflkjasdflkja lsdkf laskdfj laksdf lkasjd flkjasdflkj asldfkj alsdkjf laskdjf lksadj f fldkjasldkfjl askdfj lasdkfj laskdjf </p>
<div style="
background-color: yellow;
padding: 10px;
display: inline-block;
">
Everything about the mess
</div>
</div>
<img src="assets/date-note.png" style="
transform: rotate(10deg);
flex-grow: 0;
"/>
<div style="flex-grow: 1"></div>
</div>
<div style="
background-color: #f0f0f0;
display: flex;
align-items: center;
padding: 15px;
color: white;
">
<div class="bitem" style="background-color: green">Something something</div>
<div class="bitem" style="background-color: orange">Something something</div>
<div class="bitem" style="background-color: blue">Something something</div>
</div>
</body>
</html>
@trotzig
Copy link
Author

trotzig commented Sep 10, 2018

This is a screenshot of the visual results:

screen shot 2018-09-10 at 09 42 28

Here's the reference design:

page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment