index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<title>Landing</title>

	<!-- Favicons -->
	<link rel="shortcut icon" href="img/favicon.png">
	<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

	<!-- Google fonts -->
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Dosis:300,400" rel="stylesheet">

	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet">

	<!-- Font awesome -->
	<link rel="stylesheet" href="css/font-awesome.css">
	<link rel="stylesheet" href="css/et-line.css">

	<link rel="stylesheet" href="css/style.css">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>
<!-- HEADER START -->
<div class="header">
	<div class="container-fluid">
		<div class="logo">
			<a href="">
				<img src="img/logo.png" alt="">
			</a>
		</div>
		<ul class="header-nav">
			<li><a href="">home</a></li>
			<li><a href="">about</a></li>
			<li><a href="">services</a></li>
			<li><a href="">works</a></li>
			<li><a href="">contact</a></li>
		</ul>
	</div>
</div>
<!-- HEADER END -->

<!-- MAIN START -->
<div class="main">

	<!-- INNER START -->
	<div class="inner">
		<div class="inner-content">
			<h6>thomas rhythm</h6>
			<span>Extraordinary art director & creative minimalism lover</span>
		</div>
	</div>
	<!-- INNER END -->

	<!-- ABOUT STUDIO START -->
	<div class="default-section about-studio">
		<div class="container">
			<div class="title">
				<span>About studio</span>
			</div>
			<div class="text-section">
				<div class="row">
					<div class="col-lg-4">
						<blockquote>
							<p>Design is not making beauty, beauty emerges from selection, affinities, integration, love.
							</p>
							<span>— Louis Kahn</span>
						</blockquote>
					</div>
					<div class="col-lg-4">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas  volutpat, diam enim sagittis quam, id porta quam. Sed id dolor consectetur fermentum nibh volutpat, accumsan purus. </p>
					</div>
					<div class="col-lg-4">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ducimus minus nobis obcaecati odio porro reprehenderit sed sint! Aliquam dignissimos dolores eveniet excepturi in iste laboriosam quaerat repellendus suscipit?</p>
					</div>
				</div>
			</div>
			<div class="our-team">
				<div class="row">
					<div class="col-lg-4">
						<div class="team-item">
							<div class="team-item-img">
								<img src="img/team/base-team-img.jpg" alt="">
								<div class="team-item-skills">
									<h6>skills</h6>
								</div>
							</div>
							<div class="team-item-info text-center">
								<span class="team-item-name">Thomas Rhythm</span>
								<span class="team-item-role">Art Director</span>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="team-item">
							<div class="team-item-img">
								<img src="img/team/base-team-img.jpg" alt="">
								<div class="team-item-skills">
									<h6>skills</h6>
								</div>
							</div>
							<div class="team-item-info text-center">
								<span class="team-item-name">Marta Laning</span>
								<span class="team-item-role">Web Engineer</span>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="team-item">
							<div class="team-item-img">
								<img src="img/team/base-team-img.jpg" alt="">
								<div class="team-item-skills">
									<h6>skills</h6>
								</div>
							</div>
							<div class="team-item-info text-center">
								<span class="team-item-name">Steve Anders</span>
								<span class="team-item-role">Developer</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- ABOUT STUDIO END -->

	<!-- SERVICES START -->
	<div class="default-section services border-top">
		<div class="container">
			<div class="title text-center">
				<span>services</span>
			</div>
			<div class="services-tabs">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
					<li role="presentation" class="active">
						<a href="#branding" aria-controls="home" role="tab" data-toggle="tab">
							<span class="icon icon-strategy"></span>
							<span class="tablist-title">Branding</span>
						</a>
					</li>
					<li role="presentation">
						<a href="#webdesign" aria-controls="home" role="tab" data-toggle="tab">
							<span class="icon icon-desktop"></span>
							<span class="tablist-title">Web Design</span>
						</a>
					</li>
					<li role="presentation">
						<a href="#graphicdesign" aria-controls="home" role="tab" data-toggle="tab">
							<span class="icon icon-tools"></span>
							<span class="tablist-title">Graphic Design</span>
						</a>
					</li>
					<li role="presentation">
						<a href="#development" aria-controls="home" role="tab" data-toggle="tab">
							<span class="icon icon-gears"></span>
							<span class="tablist-title">Development</span>
						</a>
					</li>
					<li role="presentation">
						<a href="#photography" aria-controls="home" role="tab" data-toggle="tab">
							<span class="icon icon-camera"></span>
							<span class="tablist-title">Photography</span>
						</a>
					</li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane fade in active" id="branding">
						<div class="text-section">
							<div class="row">
								<div class="col-lg-4">
									<blockquote>
										<p>Design is not making beauty, beauty emerges from selection, affinities, integration, love.
										</p>
										<span>— Louis Kahn</span>
									</blockquote>
								</div>
								<div class="col-lg-4">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas  volutpat, diam enim sagittis quam, id porta quam. Sed id dolor consectetur fermentum nibh volutpat, accumsan purus. </p>
								</div>
								<div class="col-lg-4">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ducimus minus nobis obcaecati odio porro reprehenderit sed sint! Aliquam dignissimos dolores eveniet excepturi in iste laboriosam quaerat repellendus suscipit?</p>
								</div>
							</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="webdesign">
						<div class="text-section">
							<div class="row">
								<div class="col-lg-4">
									<blockquote>
										<p>Design is not making beauty, beauty emerges from selection, affinities, integration, love.
										</p>
										<span>— Louis Kahn</span>
									</blockquote>
								</div>
								<div class="col-lg-4">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas  volutpat, diam enim sagittis quam, id porta quam. Sed id dolor consectetur fermentum nibh volutpat, accumsan purus. </p>
								</div>
								<div class="col-lg-4">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ducimus minus nobis obcaecati odio porro reprehenderit sed sint! Aliquam dignissimos dolores eveniet excepturi in iste laboriosam quaerat repellendus suscipit?</p>
								</div>
							</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="graphicdesign">
						<div class="text-section">
							<div class="row">
								<div class="col-lg-4">
									<blockquote>
										<p>Design is not making beauty, beauty emerges from selection, affinities, integration, love.
										</p>
										<span>— Louis Kahn</span>
									</blockquote>
								</div>
								<div class="col-lg-4">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas  volutpat, diam enim sagittis quam, id porta quam. Sed id dolor consectetur fermentum nibh volutpat, accumsan purus. </p>
								</div>
								<div class="col-lg-4">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ducimus minus nobis obcaecati odio porro reprehenderit sed sint! Aliquam dignissimos dolores eveniet excepturi in iste laboriosam quaerat repellendus suscipit?</p>
								</div>
							</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="development">
						<div class="text-section">
							<div class="row">
								<div class="col-lg-4">
									<blockquote>
										<p>Design is not making beauty, beauty emerges from selection, affinities, integration, love.
										</p>
										<span>— Louis Kahn</span>
									</blockquote>
								</div>
								<div class="col-lg-4">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas  volutpat, diam enim sagittis quam, id porta quam. Sed id dolor consectetur fermentum nibh volutpat, accumsan purus. </p>
								</div>
								<div class="col-lg-4">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ducimus minus nobis obcaecati odio porro reprehenderit sed sint! Aliquam dignissimos dolores eveniet excepturi in iste laboriosam quaerat repellendus suscipit?</p>
								</div>
							</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="photography">
						<div class="text-section">
							<div class="row">
								<div class="col-lg-4">
									<blockquote>
										<p>Design is not making beauty, beauty emerges from selection, affinities, integration, love.
										</p>
										<span>— Louis Kahn</span>
									</blockquote>
								</div>
								<div class="col-lg-4">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas  volutpat, diam enim sagittis quam, id porta quam. Sed id dolor consectetur fermentum nibh volutpat, accumsan purus. </p>
								</div>
								<div class="col-lg-4">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ducimus minus nobis obcaecati odio porro reprehenderit sed sint! Aliquam dignissimos dolores eveniet excepturi in iste laboriosam quaerat repellendus suscipit?</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- SERVICES END -->

	<!-- LETS TALK START -->
	<div class="lets-talk">
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<div class="lets-talk-content">
						<div class="title color-white text-light">
							<span>Looking for exclusive digital services?</span>
						</div>
						<p>Proin fringilla augue at maximus vestibulum. Nam pulvinar vitae neque et porttitor
							Integer non dapibus diam, ac eleifend lectus.</p>
						<a href="" class="btn btn-default">lets talk</a>
					</div>
				</div>
				<div class="col-lg-6">
					<img src="img/lets-talk-img.png" class="lets-talk-img" alt="">
				</div>
			</div>
		</div>
	</div>
	<!-- LETS TALK END -->

	<!-- PORTFOLIO START -->
	<div class="default-section portfolio">
		<div class="container">
			<div class="portfolio-title text-center">
				<div class="title">
					<span>portfolio</span>
				</div>
				<div class="text-section">
					<div class="row">
						<div class="col-lg-8 col-lg-offset-2">
							<p>In auctor ex id urna faucibus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus ligula semper metus pellentesque mattis. Maecenas  volutpat, diam enim sagittis quam, id porta quam. Sed id dolor consectetur fermentum nibh volutpat, accumsan purus. </p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="portfolio-tabs">
			<!-- Nav tabs -->
			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active">
					<a href="#portfolio-allworks" aria-controls="home" role="tab" data-toggle="tab">
						<span class="tablist-title">all works</span>
					</a>
				</li>
				<li role="presentation">
					<a href="#portfolio-branding" aria-controls="profile" role="tab" data-toggle="tab">
						<span class="tablist-title">branding</span>
					</a>
				</li>
				<li role="presentation">
					<a href="#portfolio-design" aria-controls="messages" role="tab" data-toggle="tab">
						<span class="tablist-title">design</span>
					</a>
				</li>
				<li role="presentation">
					<a href="#portfolio-photography" aria-controls="settings" role="tab" data-toggle="tab">
						<span class="tablist-title">photography</span>
					</a>
				</li>
			</ul>

			<!-- Tab panes -->
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane fade in active" id="portfolio-allworks">
					<div class="element-section">
						<div class="element-row">
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane fade" id="portfolio-branding">
					<div class="element-section">
						<div class="element-row">
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane fade" id="portfolio-design">
					<div class="element-section">
						<div class="element-row">
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane fade" id="portfolio-photography">
					<div class="element-section">
						<div class="element-row">
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
							<div class="element-col">
								<div class="element">
									<a href="">
										<img src="img/portfolio-tab-el.jpg" alt="">
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- PORTFOLIO END -->

	<!-- START PROJECT START -->
	<div class="start-project">
		<div class="container text-center">
			<div class="title text-light color-white">
				<span>like our creative works?</span>
			</div>
			<a href="" class="btn btn-default">start project</a>
		</div>
	</div>
	<!-- START PROJECT END -->

	<!-- WHY CHOOSE US START -->
	<div class="default-section why-choose-us">
		<div class="container">
			<div class="title text-light text-center">
				<span>why choose us?</span>
			</div>
			<div class="text-section">
				<div class="row">
					<div class="col-lg-4">
						<div class="why-choose-us-icon">
							<span class="icon-flag"></span>
						</div>
						<div class="why-choose-us-info">
							<h6> we're creative</h6>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
								In maximus ligula semper metus pellentesque mattis. Maecenas  volutpat, diam enim.</p>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="why-choose-us-icon">
							<span class=" icon-clock"></span>
						</div>
						<div class="why-choose-us-info">
							<h6> We’re Punctual</h6>
							<p>Proin fringilla augue at maximus vestibulum. Nam pulvinar vitae neque et porttitor. Praesent sed nisi eleifend, lorem fermentum orci sit amet, iaculis libero.</p>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="why-choose-us-icon">
							<span class=" icon-hotairballoon"></span>
						</div>
						<div class="why-choose-us-info">
							<h6> We have magic</h6>
							<p>Curabitur iaculis accumsan augue, nec finibus mauris pretium eu. Duis placerat ex gravida nibh tristique porta. Nulla facilisi. Suspendisse ultricies eros blandit.</p>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-4">
						<div class="why-choose-us-icon">
							<span class="icon-heart"></span>
						</div>
						<div class="why-choose-us-info">
							<h6> We love minimalism</h6>
							<p>Cras luctus interdum sodales. Quisque quis odio dui. Sedes sit amet neque malesuada, lobortis  commodo magna ntesque pharetra metus vivera sagittis.</p>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="why-choose-us-icon">
							<span class=" icon-linegraph"></span>
						</div>
						<div class="why-choose-us-info">
							<h6> We’re responsible</h6>
							<p>Fusce aliquet quam eget neque ultrices elementum. Nulla posuere felis id arcu blandit sagittis. Eleifend vestibulum purus, sit amet vulputate risus tristique non.</p>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="why-choose-us-icon">
							<span class="icon-chat"></span>
						</div>
						<div class="why-choose-us-info">
							<h6>We're Friendly</h6>
							<p>Pulvinar vitae neque et porttitor. Integer non dapibus diam, ac eleifend lectus. Praesent sed nisi eleifend, fermentum orci sit amet, iaculis libero interdum.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- WHY CHOOSE US END -->

	<!-- WHAT PEOPLE SAY START -->
	<div class="default-section reviews">
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<div class="carousel-caption">
						<div class="icon-wrap">
							<span class="icon-quote"></span>
						</div>
						<div class="title">
							<span>What people say?</span>
						</div>
						<p>Phasellus luctus commodo ullamcorper a posuere rhoncus commodo elit. Aenean congue,
						risus utaliquam dapibus. Thanks!</p>
						<span>— John Doe, doodle inc.</span>
					</div>
				</div>
				<div class="item">
					<div class="carousel-caption">
						<div class="icon-wrap">
							<span class="icon-quote"></span>
						</div>
						<div class="title">
							<span>What people say?</span>
						</div>
						<p>Phasellus luctus commodo ullamcorper a posuere rhoncus commodo elit. Aenean congue,
						risus utaliquam dapibus. Thanks!</p>
						<span>— John Doe, doodle inc.</span>
					</div>
				</div>
				<div class="item">
					<div class="carousel-caption">
						<div class="icon-wrap">
							<span class="icon-quote"></span>
						</div>
						<div class="title">
							<span>What people say?</span>
						</div>
						<p>Phasellus luctus commodo ullamcorper a posuere rhoncus commodo elit. Aenean congue,
						risus utaliquam dapibus. Thanks!</p>
						<span>— John Doe, doodle inc.</span>
					</div>
				</div>
			</div>

			<!-- Controls -->
			<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<i class="fa fa-angle-left"></i>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<i class="fa fa-angle-right"></i>
			</a>
		</div>
	</div>
	<!-- WHAT PEOPLE SAY END -->

</div>
<!-- MAIN END -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>