kurashov1307
/
website-on-bootstrap


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Gravity</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="./css/bootstrap.min.css">
	<link rel="stylesheet" href="./css/owl.carousel.min.css">
	<link rel="stylesheet" href="./css/owl.theme.default.min.css">
	<link rel="stylesheet" href="./css/style.css">
	
</head>
<body>
	<header class="header">
		<div class="nav">
			<div class="container">
				<div class="row">
					<div class="col-4 col-md-4">
						<img src="./img/logo.svg" alt="Gravity" class="logo">
					</div>
					<div class="col-4 offset-md-2 col-md-3">
						<button class="search">
							<img src="./img/search-icon.svg" alt="Search">
						</button>
					</div>
					<div class="col-4 col-md-3 ">
						<button class="menu ml-auto">
							<img src="./img/menu-icon.svg" alt="Menu Gravity">
						</button>
					</div>
				</div>
			</div>
		</div>
		<div class="offer">
			<div class="container">
				<div class="row">
					<div class="col-md-6 vh-dependent">
						<div class="offer-cont">
							<h1 class="offer-cont__title">
								Work around you and your team
							</h1>
							<p class="offer-cont__text">
								From ads that dance or sing to MTV-like commercials, online advertisers
								 are now using a new type of technology “rich media” to attract consumers.
							</p>
							<button class="offer-cont__btn btn">
								get started
							</button>
						</div>
					</div>
					<div class="col-md-6 be-static vh-dependent">
						<div class="hero">
							<a href="#" class="video">

							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</header>
	<section class="problems">
		<div class="container">
			<div class="row">
				<div class="col-md-5">
					<img src="./img/poster.jpg" alt="Poster" class="poster img img-fluid">
				</div>
				<div class="col-md-6 ml-auto d-flex align-items-center">
					<div class="about">
						<h2 class="about__title">We solve digital problems with an outstanding creative flare</h2>
						<p class="about__text">The best time to view the moon, obviously, is at night when
							 there are few clouds and the weather is accommodating for a long and lasting study.
						</p>
						<p class="about__text">For most of us, the idea of astronomy is something we directly 
							connect to “stargazing”, telescopes and seeing magnificent displays in the heavens.
					   </p>
					   <div class="about__author">
						   <h4 class="about__name">
								Denis Shepovalov
						   </h4>
						   <p class="about__dop">Co-Founder & CEO</p>
					   </div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="services">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<div class="section-title">
						<p class="section-title__label">
							— Services
						</p>
						<h2 class="section-title__heading">
							We love work hard and explore new things that’s why we cover lot of things.
							Check our service list and view details
						</h2>
					</div>
				</div>
				<div class="col-md-5 ml-auto d-flex justify-content-between">
					<ul class="serv-list left">
						<li class="serv-list__item">Multimedia</li>
						<li class="serv-list__item">Interactive design</li>
						<li class="serv-list__item">Packaging</li>
						<li class="serv-list__item">Branding</li>
					</ul>
					<ul class="serv-list right">
						<li class="serv-list__item">Creative Strategy</li>
						<li class="serv-list__item">UI/UX </li>
						<li class="serv-list__item">Coding</li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="owl-carousel owl-theme works-carousel">
						<div class="item">
							<img src="img/slider-1.jpg" alt="slider-1">
							<span class="owl-carousel__play"></span>
						</div>
						<div class="item">
							<img src="img/slider-2.jpg" alt="slider-2">
							<span class="owl-carousel__play"></span>
					   </div>
					   <div class="item">
							<img src="img/slider-3.jpg" alt="slider-1">
							<span class="owl-carousel__play"></span>
						</div>
						<div class="item">
							<img src="img/slider-4.jpg" alt="slider-2">
							<span class="owl-carousel__play"></span>
				  		</div>
						<div class="item">
							<img src="img/slider-5.jpg" alt="slider-2">
							<span class="owl-carousel__play"></span>
				  		</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="result">
		<div class="container">
			<div class="row">
				<div class="col-md-6 be-static">
					<div class="collage">
						<img src="./img/res-3.jpg" alt="">
					</div>
				</div>
				<div class="col-md-6">
					<div class="easy">
						<h2 class="easy__title">Well thought with super easy to use</h2>
						<p class="easy__text">As we approached the palace I could see through the great windows
							 of the first floor the brilliantly illuminated audience chamber of Than Kosis. 
							 The immense hall was crowded with nobles and their women.
						</p>
						<div class="easy__point first">
							Ultimate Result
						</div>
						<div class="easy__point second">
							Minimal Design
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="works tabs">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<div class="section-title">
						<p class="section-title__label">
							— our works
						</p>
						<h2 class="section-title__heading">
							Discover our Work
						</h2>
					</div>
				</div>
				<div class="col-12 col-xl-6">
					<ul class="work-tabs d-flex justify-content-between tabs__caption">
						<li class="work-tabs__item active">
							<a href="#">All</a>
						</li>
						<li class="work-tabs__item">
							<a href="#">Branding</a>
						</li>
						<li class="work-tabs__item">
							<a href="#">Web</a>
						</li>
						<li class="work-tabs__item">
							<a href="#">Development</a>
						</li>
						<li class="work-tabs__item">
							<a href="#">Films</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<div class="works-wrap d-flex justify-content-between tabs__content active">
						<a href="#" class="works-wrap__item">
							<img src="./img/img-9.jpg" alt="Work">
						</a>
						<a href="#" class="works-wrap__item">
							<img src="./img/img-8.jpg" alt="Work">
						</a>
						<a href="#" class="works-wrap__item">
							<img src="./img/img-9.jpg" alt="Work">
						</a>
						<a href="#" class="works-wrap__item">
							<img src="./img/img-10.jpg" alt="Work">
						</a>
						<a href="#" class="works-wrap__item">
							<img src="./img/img-11.jpg" alt="Work">
						</a>
						<a href="#" class="works-wrap__item">
							<img src="./img/img-12.jpg" alt="Work">
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="testimonials">
		<div class="container">
			<div class="owl-carousel contributor-carousel">
				<!-- First slide -->
				<div class="row">					
					<div class="col-md-6">
						<div class="section-title">
							<p class="section-title__label">— Testimonials</p>
							<h2 class="section-title__heading_review">"Professionals in their craft! All products
								 were super great with strong attention to details, and overall vibe"
							</h2>
							<div class="contributor">
								<h3 class="contributor__title">Polina Kuzina</h3>
								<p class="contributor__desc">Manager at Craftwork</p>
							</div>
						</div>
					</div>
					<div class="col-md-5 ml-auto">
						<img src="./img/photo.jpg" alt="Photo" class="cont-photo img-fluid">
					</div>
				</div>
				<!-- Second slide -->
				<div class="row">					
					<div class="col-md-6">
						<div class="section-title">
							<p class="section-title__label">— Testimonials</p>
							<h2 class="section-title__heading_review">"He is good at Maths and always helps me with it,
								 because I can hardly understand all these sums and problems"
							</h2>
							<div class="contributor">
								<h3 class="contributor__title">Olga Karenina</h3>
								<p class="contributor__desc">Front-End Developer</p>
							</div>
						</div>
					</div>
					<div class="col-md-5 ml-auto">
						<img src="./img/photo-1.jpg" alt="Photo" class="cont-photo img-fluid">
					</div>
				</div>
			</div>		
		</div>
	</section>
	<section class="clients">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<div class="section-title">
						<h2 class="section-title__heading">
							Our Clients
						</h2>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col">
					<div class="clients-row d-flex justify-content-between">
						<a href="#" class="clients-row__item">
							<img src="./img/xiaomi.svg" alt="xiaomi">
						</a>
						<a href="#" class="clients-row__item">
							<img src="./img/tinder.svg" alt="tinder">
						</a>
						<a href="#" class="clients-row__item">
							<img src="./img/apple.svg" alt="apple">
						</a>
						<a href="#" class="clients-row__item">
							<img src="./img/nike.svg" alt="nike">
						</a>
						<a href="#" class="clients-row__item">
							<img src="./img/amd.svg" alt="amd">
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<footer class="footer">
		<div class="container">
			<div class="row">
				<div class="col d-flex justify-content-center">
					<img class="footer-logo" src="./img/logo-footer.svg" alt="Gravity">
				</div>
			</div>
		</div>
	</footer>

	<script src="./js/jquery-3.6.0.min.js"></script>
	<script src="./js/owl.carousel.min.js"></script>
	<script src="./js/main.js"></script>
</body>
</html>