How To Use: Content Bang
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Content Bang Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="dns-prefetch" href="https://static.contentbang.com/">
<script src="https://static.contentbang.com/jquery/jquery-3.4.1.min.js"></script>
<link href="https://static.contentbang.com/fonts/myriadpro.css" media="screen" rel="stylesheet" />
<link href="https://static.contentbang.com/fonts/opensans.css" media="screen" rel="stylesheet" />
<link href="https://static.contentbang.com/animate.min.css" media="screen" rel="stylesheet" />
<link href="https://static.contentbang.com/cb.css" media="all" rel="stylesheet">
</head>
<body>
<div class="picture-background desktop">
<img src="https://static.contentbang.com/img/rhino.jpg" border="0"/>
</div>
<div class="hero">
<div class="hero-logo"><img class="rounded-corners" src="https://static.contentbang.com/img/contentbang.png" width="164" height="102" /></div>
<h1 class="hero-title white stroke-black">Content Bang</h1>
<div class="hero-card">
<div class="hero-info">
<h3 class="black">FREE Website Builder</h3>
<p class="caption black"><b>Powered by Content Bang (an AWS/CloudFront CDN)</b><br />Go ahead and change your browser window size (resize it), and see it get responsive... mouse-over this hero-title box, watch the opacity go full.<br /><br />
<a href="#main-content"><i>Read More Info</i></a> in the top nav menu links, essentially "clicks" the bottom scroll down arrow to jump to #main-content, as multiple forms of the same navigation function are good UI/UX design. The animate.css library makes the scroll down arrow bouncey on form load. Override any cb.css behavior with your own theme.css file.
See <a href="http://www.boshed.com/" target="_blank">boshed.com</a> or <a href="http://www.researchupon.com/" target="_blank">RU</a> for example.</p><br />
<div style="display:none;"><a class="download-ios-icon" href="https://itunes.apple.com/ca/genre/ios/id36?mt=8" target="_blank"> </a>
<a class="download-android-icon" href="https://play.google.com/store?hl=en" target="_blank"> </a></div>
</div>
</div>
</div>
<div class="menu">
<span class="menu-links">
<span class="menu-item"><a href="/">Home</a></span><span class="desktop"> | </span><span class="menu-item"><a href="#main-content">Read More Info</a></span><span class="desktop"> | </span>
<span class="menu-item">Ready to try? <a class="clear" href="example.html" download="">Download</a></span><span class="desktop"> </span>
</span>
</div>
<a class="scroll-down" href="#main-content"><div class="scroll-down-icon desktop animated bounce"> </div></a>
<div class="mobile"><br /><br /><br /></div>
</div>
<div class="container black transparent">
<a class="stop" id="main-content"> </a>
<br />
<div class="content">
<div class="desktop"><h1>Desktop Version Only Title</h1></div>
<h3>This subtitle is available on both desktop & mobile</h3>
<div class="desktop">place a bunch of fancy hi-res images & hi-def videos inside the "desktop" class<br /></div><br />
<div class="mobile" style="color:yellow;">
<h4 style="color:aqua;">Mobile Version Only Content</h4>
if you wish to show something to only mobile users wrap in this mobile class tag, including line breaks.<br /><br />
</div>
there's a lot more you can do, menus, background photo, buttons, rounded corners, etc.<br />
<br /><br /><br /><br />
</div>
</div>
<div class="container white">
<div class="content">
<h3>Detailed Explanation</h3>
some more content to market & sell your goods or services on the mobile version of the site, goes down here.. no need for fancy photos or videos, conserve the users bandwidth and get your point across quickly!<br /><br /><br />
You'll notice this section has left/right padding. Use the "content" class for this to add padding, otherwise see below. ↓
</div>
By default "container" class is full width, which helps to enclose sections vertically on the page. This is the margin size without using "content" div, and you can use additonal classes such as "black", "white", "transparent" on containers for various opacity and to see the photo background.
<br/><br/>
</div>
<div id="powered">
<span>2019 © <a href="http://www.sempleventures.com/" target="_blank">Semple Ventures</a>. Powered by <a id="tiny-logo" href="http://start.using.contentbang.com" target="_blank"> </a> <a href="http://start.using.contentbang.com" target="_blank">Content Bang</a></span>
</div>
</body>
</html>
Click to see this
example page in action, or
download the file, there should be no dependencies on a local version of any file, it will use our very own Content Bang Content Delivery Network (CBCDN) which is powered by hundreds of AWS CloudFront edge servers on the backend to display it correctly.
