35 lines
1.3 KiB
HTML
35 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Video + Blend modes = Cool modal</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div class='container'>
|
|
<div class='wrap'>
|
|
<div id='bg'>
|
|
<img class='a' src='https://wallpapertag.com/wallpaper/full/a/d/c/49949-steampunk-background-5000x2801-mobile.jpg'>
|
|
</div>
|
|
<video data-depth='50' height='540' id='myVideo' width='620'>
|
|
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ink4.mp4" type="video/mp4">
|
|
</video>
|
|
<img class='b' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/clockwork.png'>
|
|
<div class='wrap_inner'>
|
|
<div class='container_inner'>
|
|
<h1>The inkblot modal</h1>
|
|
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/trill.png'>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ulla</p>
|
|
<a>confirm</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='button'>Open the modal</div>
|
|
<!-- partial -->
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html> |