Start  More Info | Documentation | Example

Content Bang

Website Builder

We've got a FREE CSS/JS web library
that's fully-responsive with mobile friendliness
for Google and the 21st century web.

Bang out some Content...
it's super duper easy!!

     

Content Bang


responsive design
easy to learn
mobile-friendly
simple markup
quick deployment


     
 

FREE CSS/JS Web Library · Mobile-Responsive · Cloud Hosted


Content Bang is an HTML5/CSS3 fully-responsive web library that is hosted at our CDN for FREE to the outside world. You may wish to contact us directly to build you a custom website, or follow the instructions below to get started. There's a lot more that Content Bang can do, but this will scratch the surface, and get you up and running in a hurry!



 

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</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-1.8.2.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" />
    <script type="text/javascript" src="https://static.contentbang.com/cb.js"></script>
    <link href="https://static.contentbang.com/cb.css" media="all" rel="stylesheet">

</head>
<body>

    <div class="tab-strip desktop">
        <a class="menu" href="http://start.using.contentbang.com/" target="_blank">Start</a>&nbsp;|&nbsp;<a class="menu" href="#main-content">More Info</a><br />
    </div>

    <div class="picture-background desktop">
        <img src="https://static.contentbang.com/img/rhino.jpg" border="0"/>
    </div>

    <div class="hero">

        <div class="fixed-logo"><img src="https://static.contentbang.com/img/contentbang.png" class="rounded-corners" width="150" height="94" /></div>

        <div class="hero-content">

            <div class="desktop" style="padding-top:60px;width:100%;">

                <h1 style="color:#ffffff;" class="stroke-black">Website Design</h1>

            <div style="text-align:left;padding-top:35px;padding-left:8%;">
                <h3 class="white stroke-black">Powered by Content Bang</h3>
                <h5 class="white stroke-black">Go ahead and change your browser<br />window size, and see it get responsive...</h5><br />
            </div>

            </div>

            <div class="mobile">
                <h2>Content Bang</h2>
                <br />
                <h3>Mobile Version</h3>
                <h4>stick to the facts<br />keep it simple!<br />catch the users attention<br />get them to scroll down<br />expand on this message below</h4><br />
            </div>

        </div>

        <div class="scroll-down animated bounce"><a class="scroll-down-icon" href="#main-content">&nbsp;</a></div>

    </div>

    <div align="center" style="padding-bottom:5px;">

<div class="grey-container">
    <a id="main-content">&nbsp;</a>

    <div class="desktop"><h1>Desktop Version Only Title</h1></div>

    <h3>This subtitle is available on both desktop &amp; mobile</h3>

    <div class="desktop">place a bunch of fancy hi-res images &amp; hi-def videos inside the "desktop" class<br /></div><br />

    there's a lot more you can do, menus, background photo, buttons, rounded corners,<br />
    but in a general sense, we've attempted to make it just this easy!<br />

    <br /><br />
</div>

<div class="black-container">

    <h3>Detailed Explanation</h3>
    some more content to market &amp; 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 />
</div>

    <div id="powered">
        <span>Powered by <a id="tiny-logo" href="http://start.using.contentbang.com" target="_blank">&nbsp;</a>&nbsp;<a href="http://start.using.contentbang.com" target="_blank">Content Bang</a></span>
    </div>

    </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.



Powered by  Content Bang