index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- CHANGE THIS TITLE TAG -->
<title>FlexApp - A Free Responsive Mobile App Website Template</title>

<!-- media-queries.js -->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- html5.js -->
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


<link href="font/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/media-queries.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<meta name="viewport" content="width=device-width" />

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<link href='http://fonts.googleapis.com/css?family=Exo:400,800' rel='stylesheet' type='text/css'>

</head>

<body data-spy="scroll">

<!-- TOP MENU NAVIGATION -->
<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container">

			<a class="brand pull-left" href="#">
			FlexApp
			</a>

			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</a>

			<div class="nav-collapse collapse">
				<ul id="nav-list" class="nav pull-right">
					<li><a href="#home">Home</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#updates">Updates</a></li>
					<li><a href="#screenshots">Screenshots</a></li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</div>

		</div>
	</div>
</div>


<!-- MAIN CONTENT -->
<div class="container content container-fluid" id="home">



	<!-- HOME -->
	<div class="row-fluid">

		<!-- PHONES IMAGE FOR DESKTOP MEDIA QUERY -->
		<div class="span5 visible-desktop">
			<img src="img/phones.png">
		</div>

		<!-- APP DETAILS -->
		<div class="span7">

			<!-- ICON -->
			<div class="visible-desktop" id="icon">
				<img src="img/app_icon.png" />
			</div>

			<!-- APP NAME -->
			<div id="app-name">
				<h1>FlexApp</h1>
			</div>

			<!-- VERSION -->
			<div id="version">
				<span class="version-top label label-inverse">Version 1.0</span>
			</div>

			<!-- TAGLINE -->
			<div id="tagline">
				A Free Responsive Website Template for Your Mobile App
			</div>

			<!-- PHONES IMAGE FOR TABLET MEDIA QUERY -->
			<div class="hidden-desktop" id="phones">
				<img src="img/phones.png">
			</div>

			<!-- DESCRIPTION -->
			<div id="description">
				FlexApp is a free, fully responsive website template for marketing your mobile application. The design uses CSS3 to scale the content proportionally to whatever device is being used. Give it a try by resizing your browser!
			</div>

			<!-- FEATURES -->
			<ul id="features">
				<li>Fully Responsive HTML/CSS3 Template</li>
				<li>Built on Bootstrap by Twitter</li>
				<li>Images and Photoshop Files Included</li>
				<li>Completely Free!</li>
			</ul>

			<!-- DOWNLOAD & REQUIREMENT BOX -->
			<div class="download-box">
				<a href="#"><img src="img/available-on-the-app-store.png"></a>
			</div>
			<div class="download-box">
				<a href="#"><img src="img/android_app_on_play_logo_large.png"></a>
			</div>
			<div class="download-box">
				<strong>Requirements:</strong><br>
				Compatible with iPhone and iPod touch. Requires iPhone OS 2.2 or later. WiFi, Edge, or 3G network connection sometimes required.
			</div>
			<div class="download-box">
				<strong>Requirements:</strong><br>
				Requires Android 2.3 and higher. WiFi, Edge, or 3G network connection sometimes required.
			</div>

		</div>
	</div>



	<!-- ABOUT & UPDATES -->
	<div class="row-fluid" id="about">

		<div class="span6">
			<h2 class="page-title" id="scroll_up">
				About
				<a href="#home" class="arrow-top">
				<img src="img/arrow-top.png">
				</a>
			</h2>

			<p>FlexApp is a fully responsive HTML/CSS template perfect for marketing your mobile application. The template utilizes responsive CSS3 & jQuery technology to provide a consistent and enjoyable viewing experience across multiple devices.</p>
			<p>FlexApp is 100% free to use. You may change, edit or modify the template however you wish, for free or commercial projects.</p>
			<p><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">FlexApp</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.differential.com" property="cc:attributionName" rel="cc:attributionURL">Differntial</a> is licensed under <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.<br />Built on <a xmlns:dct="http://purl.org/dc/terms/" href="http://twitter.github.com/bootstrap/" rel="dct:source">Bootstrap</a>.</p>

		</div>

		<div class="span6 updates" id="updates">
			<h2 class="page-title" id="scroll_up">
				Updates
				<a href="#home" class="arrow-top">
				<img src="img/arrow-top.png">
				</a>
			</h2>

			<!-- UPDATES & RELEASE NOTES -->

			<h3 class="version">Version 1.2</h3>
			<span class="release-date">Released on April 28th, 2012</span>
			<ul>
				<li><span class="label new">NEW</span>Challenge a Friend</li>
				<li><span class="label fix">FIX</span>Fixed 'Resume Game' Bug</li>
			</ul>
			<hr>

			<h3 class="version">Version 1.1</h3>
			<span class="release-date">Released on January 28th, 2012</span>
			<ul>
				<li><span class="label new">NEW</span>Facebook & Twitter Integration</li>
				<li><span class="label fix">FIX</span>Various Bug Fixes</li>
				<li><span class="label new">NEW</span>Graphics for Retina Display</li>
			</ul>
			<hr>

			<h3 class="version">Version 1.0</h3>
			<span class="release-date">Released on January 10th, 2012</span>
			<ul>
				<li><span class="label label-info">NEW</span>Initial Release</li>
			</ul>

		</div>

	</div>



	<!-- SCREENSHOTS -->
	<div class="row-fluid" id="screenshots">

		<h2 class="page-title" id="scroll_up">
				Screenshots
				<a href="#home" class="arrow-top">
				<img src="img/arrow-top.png">
				</a>
			</h2>

		<!-- SCREENSHOT IMAGES ROW 1-->
		<ul class="thumbnails">
			<li class="span3">
				<a href="img/screenshot.jpg" rel="gallery" class="thumbnail">
				<img src="img/screenshot.jpg" alt="">
				</a>
			</li>

			<li class="span3">
				<a href="img/screenshot.jpg" rel="gallery" class="thumbnail">
				<img src="img/screenshot.jpg" alt="">
				</a>
			</li>

			<li class="span3">
				<a href="img/screenshot.jpg" rel="gallery" class="thumbnail">
				<img src="img/screenshot.jpg" alt="">
				</a>
			</li>

			<li class="span3">
				<a href="img/screenshot.jpg" rel="gallery" class="thumbnail">
				<img src="img/screenshot.jpg" alt="">
				</a>
			</li>
		</ul>

		<!-- SCREENSHOT IMAGES ROW 2-->
		<ul class="thumbnails">
			<li class="span3">
				<a href="img/screenshot.jpg" rel="gallery" class="thumbnail">
				<img src="img/screenshot.jpg" alt="">
				</a>
			</li>

			<li class="span3">
				<a href="img/screenshot.jpg" rel="gallery" class="thumbnail">
				<img src="img/screenshot.jpg" alt="">
				</a>
			</li>

			<li class="span3">
				<a href="img/screenshot.jpg" rel="gallery" class="thumbnail">
				<img src="img/screenshot.jpg" alt="">
				</a>
			</li>

			<li class="span3">
				<a href="img/screenshot.jpg" rel="gallery" class="thumbnail">
				<img src="img/screenshot.jpg" alt="">
				</a>
			</li>
		</ul>
	</div>



	<!-- CONTACT -->
	<div class="row-fluid" id="contact">

		<h2 class="page-title" id="scroll_up">
				Contact
				<a href="#home" class="arrow-top">
				<img src="img/arrow-top.png">
				</a>
			</h2>

		<!-- CONTACT INFO -->
		<div class="span4" id="contact-info">
			<h3>Contact Us</h3>
			<p>FlexApp is free and thus unfortunately we cannot provide basic support for it. We simply don't have the time to answer everyone's questions.</p>
			<p>However, you may contact us about general business inquiries or to report bugs in the template!<p>
			<p><a href="mailto:support@yourapp.com">support@yourapp.com</a></p>
		</div>

		<!-- CONTACT FORM -->
		<div class="span7" id="contact-form">
			<form class="form-horizontal">
				<fieldset>
					<div class="control-group">
						<label class="control-label" for="name">Name</label>
						<div class="controls">
							<input class="input-xlarge" type="text" id="name" placeholder="John Doe">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="email">Email</label>
						<div class="controls">
							<input class="input-xlarge" type="text" id="email" placeholder="john@gmail.com">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="subject">Subject</label>
						<div class="controls">
							<input class="input-xlarge" type="text" id="subject" placeholder="General Inquiry">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="message">Message</label>
						<div class="controls">
							<textarea class="input-xlarge" rows="3" id="message" placeholder="Your message..."></textarea>
						</div>
					</div>
					<div class="form-actions">
						<button type="submit" class="btn btn-primary">SEND</button>
					</div>
				</fieldset>
			</form>
		</div>

	</div>

</div>


<!-- FOOTER -->
<div class="footer container container-fluid">

	<!-- COPYRIGHT - EDIT HOWEVER YOU WANT! -->
	<div id="copyright">
		Copyright &copy; 2014 Differential.com<br>
		Licensed under <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. Built on <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>.
	</div>

	<!-- CREDIT - PLEASE LEAVE THIS LINK! -->
	<div id="credits">
		<a href="http://differential.github.io/flexapp">Theme</a> by <a href="http://differential.com">Differential</a>.
	</div>

</div>

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="js/init.js"></script>

</body>
</html>