partial-index.html

<div class="index">
	<style>
		.index {
			margin-top: 20px;
		}
		.campaign {
			text-align: center;
			position: relative;
		}
		.campaign .desc {
			color: #888888;
			font-size: 140%;
		}
		.message .try {
			margin: 15px;
		}
		.message .title {
			font-size: 300%;
		}
		.message .btn-large {
			font-size: 125%;
			padding: 10px 30px;
		}
		.demo-video {
			margin-top: 40px;
			position: relative;
		}
		.demo-video .play-video {
			max-width: 900px;
			width: 100%;
			border: 2px dashed #ccc;
		}
		.demo-video .fa-play {
			display: none;
			border-radius: 50px !important;
			border: 1px solid #03A9F4;
			background: #E1F5FE;
			color: #03A9F4;
			font-size: 300%;
			height: 100px;
			left: calc(50% - 50px);
			padding: 25px 35px;
			position: absolute;
			width: 100px;
			top: calc(50% - 50px);
			z-index: 1;
		}
		.video .desc {
			padding-top: 10px;
			text-transform: uppercase;
			font-size: 100%;
		}
		.signup-wall {
			background-color: #ffffff;
			box-shadow: none;
		}
		.page-content {
			margin: auto;
		}
		.about {
			margin-bottom: 25px
		}
		.section {
			padding-top: 20px;
		}
		.section .title {
			margin-bottom: 15px;
			text-transform: uppercase;
		}
		.section .title .message {
			margin-top: 10px;
			padding-left: 10px;
		}
		.section .feature {
			margin-bottom: 15px;
		}
		.section .feature-title {
			display: block;
    		color: #ff286d;
		}
		.emailid {
			color: #66595c;
			padding-left: 5px;
		}
		.emailid:hover, .emailid:visited {
			color: #999999;
			text-decoration: none;
		}

		@media screen and (max-width: 550px) {
			.message .title {
				font-size: 200%;
			}
			.campaign .desc {
				font-size: 110%;
			}
			.demo-video .fa-play {
				font-size: 150%;
				height: 50px;
				left: calc(50% - 25px);
				padding: 12px 17px;
				position: absolute;
				width: 50px;
				top: calc(50% - 25px);
				z-index: 1;
			}
			.signup-wall {
				margin-top: 0px;
				padding: 0px;
			}
			.signup-wall .page-content {
				padding: 12px;
				width: 100%;
			}
		}
	</style>
	<div class="dialog" ng-show="isVisible.loading">
		<div class="content">
			<div class="loading">
				<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
				<span class="sr-only">Loading...</span>
			</div>
		</div>
	</div>
	<div class="campaign">
		<div class="message">
			<div class="title ib-pink-txt">The Timeline Of Your Life</div>
			<div class="desc">Capture all that matters to you and take actions based on that.</div>
			<div class="try">
				<a class="btn btn-large button-submit" ng-show="!isAuthenticated" href="/#/demo">Try now</a>
				<a class="btn btn-large button-submit" ng-show="isAuthenticated" href="/#/home">Visit Home</a>
			</div>
		</div>
		<div class="video">
			<div class="demo-video">
				<img class="play-video" src="../../img/start-video.png" alt="watch inputbox demo">
				<i class="fa fa-play" aria-hidden="true"></i>
			</div>
			<!-- <figcaption class="desc">Watch demo video</figcaption> -->
			<figcaption class="desc">Inputbox Screenshot</figcaption>
		</div>
	</div>
	<div class="signup-wall col-md-10 col-md-offset-1">
		<div class="page-content">
			<div class="about">
				<div class="section motto">
					<div class="title ib-blue-bg-only">
						<h3 class="message">
							Embracing Individuality
						</h3>
					</div>
					<p>
						We believe every aspect of your life is important. And keeping track of them helps to get more out of your time and resources.
					</p>
					<p>
						<ul>
							<li class="feature"><span class="feature-title">NOTES</span>Write your notes, journal, pen down thoughts and ideas.</li>
							<li class="feature"><span class="feature-title">LISTS</span>Make your list of books, movies, places, etc.</li>
							<li class="feature"><span class="feature-title">TRACK</span>Track your mood, food, money, workout, and get insights about them.</li>
							<li class="feature"><span class="feature-title">ACTIVITY</span>Add activities to pen them down on your timeline.</li>
							<li class="feature"><span class="feature-title">HABIT</span>Make habits, mark them and see your weekly trail.</li>
							<li class="feature"><span class="feature-title">TASKS</span>Create calendar items for reminders, meetings, etc.</li>
							<li class="feature"><span class="feature-title">CHECKINS</span>You can add checkins as well, which will be used to build your timeline.</li>
						</ul>
					</p>
				</div>

				<div class="section motto">
					<div class="title ib-blue-bg-only">
						<h3 class="message">
							Personal Dashboard
						</h3>
					</div>

					<div>
						<p>
							InputBox serves as a personal dashboard. It allows you to add data related to your life within the app. It also fetches data from different apps that you use.

							It consist of three sections:
						</p>
						<ul>
							<li class="feature"><span class="feature-title">WIDGETS</span>All the stats collected from various sources are presented into the widgets.</li>
							<li class="feature"><span class="feature-title">TIMELINE</span>All the updates posted within are shown in the timeline. The timeline view may also contain location timeline, depending on the availability of such information.</li>
							<li class="feature"><span class="feature-title">SIDEBAR</span>Any item requiring action from your end would be added to sidebar. It may include your todo task, meetings, followups, and more importantly your habits with a weekly trail. These items are categorised based on what time of day these are to be done. Eg. Morning, Afternoon, etc.</li>
						</ul>
					</div>
				</div>

				<div class="section contact">
					<div class="title ib-blue-bg-only">
						<h3 class="message">
							Contact Us
						</h3>
					</div>
					<div class="content">
						<div class="email">
							<i class="fa fa-envelope-o" aria-hidden="true"></i>
							<a class="emailid" href="mailto:hello@inputbox.co">hello@inputbox.co</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>