Skip to content

Instantly share code, notes, and snippets.

@roelandp

roelandp/colordabrand.html

Last active April 14, 2020 10:14
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 roelandp/dc9fe3d451a4d1f9615ea2bcc13b7ad6 to your computer and use it in GitHub Desktop.
Save roelandp/dc9fe3d451a4d1f9615ea2bcc13b7ad6 to your computer and use it in GitHub Desktop.
Download ZIP
Color Da Brand as was hosted on Hive.io prior to launch for coloring
Raw
colordabrand.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Color Hive Hextacular Yourself</title>
<meta name="description" content="SoonTM"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"></meta>
<meta name="author" content="bzzz"></meta>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></link>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#favcolor1').on('change', function(e){
$('#favcolor1res').text(this.value);
$('#logohextacular').css({ fill: this.value });
});
$('#favcolor2').on('change', function(e){
$('#favcolor2res').text(this.value);
$('#logotitle').css({ fill: this.value });
});
});
</script>
<style type="text/css">
html, body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
margin: 0;
padding: 0;
height: 100%;
}
#container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#innercontainer {
display: block;
align-items: none;
}
</style>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="innercontainer" class="container">
<div class="row">
<div class="col text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="40%" viewBox="0 0 519 479">
<g fill="none">
<path id="logotitle" fill="#4A525C" d="M73.6,367 L104,367 L104,479 L73.6,479 L73.6,435.32 L30.4,435.32 L30.4,479 L0,479 L0,367 L30.4,367 L30.4,407.48 L73.6,407.48 L73.6,367 Z M168,367 L198,367 L198,479 L168,479 L168,367 Z M296.01455,479 L252,368.44 L252,367 L284.970899,367 L312.5,443 L340.029101,367 L373,367 L373,368.44 L328.98545,479 L296.01455,479 Z M456.465517,451.48 L519,451.48 L519,479 L426,479 L426,367 L517.877586,367 L517.877586,394.52 L456.465517,394.52 L456.465517,410.04 L495.42931,410.04 L495.42931,435.64 L456.465517,435.64 L456.465517,451.48 Z"/>
<g id="logohextacular" fill="#E31337" transform="translate(99)">
<path d="M181.986755 155.99892C182.344183 155.380727 183.004096 155 183.718182 155L233.718182 155C235.258337 155 236.220518 156.667747 235.449609 158.00108L163.176882 283.00108C162.819453 283.619273 162.15954 284 161.445455 284L111.445455 284C109.9053 284 108.943119 282.332253 109.714028 280.99892L181.986755 155.99892zM183.718182 129C183.004096 129 182.344183 128.619273 181.986755 128.00108L109.714028 3.00107963C108.943119 1.66774669 109.9053 0 111.445455 0L161.445455 0C162.15954 0 162.819453.380726698 163.176882.99892037L235.449609 125.99892C236.220518 127.332253 235.258337 129 233.718182 129L183.718182 129z"/>
<path d="M189.714028,3.00107963 C188.943119,1.66774669 189.9053,0 191.445455,0 L241.445455,0 C242.15954,0 242.819453,0.380726698 243.176882,0.99892037 L324.122336,140.99892 C324.480433,141.618271 324.480433,142.381729 324.122336,143.00108 L243.176882,283.00108 C242.819453,283.619273 242.15954,284 241.445455,284 L191.445455,284 C189.9053,284 188.943119,282.332253 189.714028,280.99892 L270.080676,142 L189.714028,3.00107963 Z"/>
<path d="M80.3816059,58.8824448 C81.0021818,58.51969 81.7696946,58.5178648 82.3919887,58.877664 L222.391989,139.823119 C223.720226,140.591081 223.724782,142.50692 222.400212,143.281192 L82.4002123,225.117555 C81.7796364,225.48031 81.0121236,225.482135 80.3898295,225.122336 L-59.6101705,144.176882 C-60.9384082,143.408919 -60.9429642,141.49308 -59.6183941,140.718808 L80.3816059,58.8824448 Z" transform="rotate(90 81.39 142)"/>
</g>
</g>
</svg>
</div>
</div>
<div class="row pt-5">
<div class="col-md-4"></div>
<div class="col-md-4 card">
<h3 class="text-center pt-2">DIY Colorbook</h3>
<div class="row pt-1">
<div class="col-6 text-center">
<label for="favcolor1">Hextacular:</label>
<input type="color" id="favcolor1" name="favcolor1" value="#E31337"><br>
<span id="favcolor1res">#E31337</span>
</div>
<div class="col-6 text-center">
<label for="favcolor2">Title:</label>
<input type="color" id="favcolor2" name="favcolor2" value="#4A525C"><br>
<span id="favcolor2res">#4A525C</span>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment