translucent
Version:
Translucent plastic card theme.
50 lines (48 loc) • 2.71 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>translucent</title>
<link rel="stylesheet" href="tc_style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanskr.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="/tc_res/jquery.ui.touch-punch.min.js"></script>
<script src="/dist/translucent.js"></script>
<script src="/tc_res/tc_script.js"></script>
</head>
<body>
<header class = "blog-title">
<h1 class="site-title">[ translucent ]</h1>
<p class = "blog-description"> jQuery plugin - Translucent card design </p>
</header>
<div class = "contents">
<div class="wide-button align-right">+</div>
<div id="bgEl" class="tl-contents">
<div id="cw" class="card-wrapper">
<div class="color-button-container">
<div id="cb1" class="color-button card-color-white"></div>
<div id="cb2" class="color-button card-color-grey"></div>
<div id="cb3" class="color-button card-color-black"></div>
<div id="cb4" class="color-button card-color-clear"></div>
</div>
<h1>Hello Chicago!</h1>
<div class="content-image"></div>
<p class="text-contents">
Chicago, officially the City of Chicago, is the third-most populous city in the United States, and the fifth-most populous city in North America. With over 2.7 million residents, it is the most populous city in the state of Illinois and the Midwestern United States, and the county seat of Cook County.
</p>
<p class="auto-graph">
<a href="https://github.com/byeolbit">https://github.com/byeolbit</a>
</p>
</div>
</div>
<div class="control-panel">
<div class="button btn btn-info" id="bBlur"><input id="bNum" type="number" value="10" min="1" max="50"><span>Apply blur</span></div>
<div class="button btn btn-info" id="bBg">Change background</div>
<div class="button btn btn-info" id="bFix">Background fix on</div>
</div>
</div>
</body>
</html>