67 lines
2.5 KiB
HTML
67 lines
2.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CodePen - Draggable Blend Generator</title>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- partial:index.partial.html -->
|
||
|
|
<div class="container">
|
||
|
|
<div class="bannerContainer">
|
||
|
|
<div class="banner banner1">
|
||
|
|
<div class="dragMe">^</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="input colorInput">
|
||
|
|
<div><input class="colorUpdateInput" placeholder="enter custom background color" /></div>
|
||
|
|
<div><button class="colorUpdate">go</button></div>
|
||
|
|
</div>
|
||
|
|
<h1 class="backgroundTitle">background-blend-mode</h1>
|
||
|
|
<div class="buttonContainer backgroundButtons">
|
||
|
|
<button class="background multiply">multiply</button>
|
||
|
|
<button class="background screen">screen</button>
|
||
|
|
<button class="background overlay">overlay</button>
|
||
|
|
<button class="background darken">darken</button>
|
||
|
|
<button class="background lighten">lighten</button>
|
||
|
|
<button class="background color-dodge">color-dodge</button>
|
||
|
|
<button class="background color-burn">color-burn</button>
|
||
|
|
<button class="background hard-light active">hard-light</button>
|
||
|
|
<button class="background soft-light">soft-light</button>
|
||
|
|
<button class="background difference">difference</button>
|
||
|
|
<button class="background exclusion">exclusion</button>
|
||
|
|
<button class="background hue">hue</button>
|
||
|
|
<button class="background color">color</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="input backgroundInput">
|
||
|
|
<div><input class="backgroundUpdateInput" placeholder="enter custom background url" /></div>
|
||
|
|
<div><button class="urlUpdate">go</button></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1 class="mixTitle">mix-blend-mode</h1>
|
||
|
|
<div class="buttonContainer mixButtons">
|
||
|
|
<button class="mix multiply">multiply</button>
|
||
|
|
<button class="mix screen">screen</button>
|
||
|
|
<button class="mix overlay">overlay</button>
|
||
|
|
<button class="mix darken">darken</button>
|
||
|
|
<button class="mix lighten">lighten</button>
|
||
|
|
<button class="mix color-dodge">color-dodge</button>
|
||
|
|
<button class="mix color-burn">color-burn</button>
|
||
|
|
<button class="mix hard-light">hard-light</button>
|
||
|
|
<button class="mix soft-light">soft-light</button>
|
||
|
|
<button class="mix difference">difference</button>
|
||
|
|
<button class="mix exclusion">exclusion</button>
|
||
|
|
<button class="mix hue active">hue</button>
|
||
|
|
<button class="mix color">color</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- partial -->
|
||
|
|
<script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|