website on bootstrap and jQuery

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"git.ignoreLimitWarning": true
+}

css/style.css

@@ -0,0 +1,486 @@
+body{
+	font-family: 'Fira Sans', sans-serif;
+	color: #8d8d8d;
+}
+
+button{
+	display: block;
+	background: transparent;
+}
+
+ul, li{
+	display: block;
+	margin: 0;
+	padding: 0;
+}
+
+.vh-dependent{
+	height: 46vh;
+	display: flex;
+	align-items: center;
+}
+
+.be-static{
+	position: static;
+}
+
+h1, h2, h3, h4, h5, h6{
+	font-style: normal;
+	font-weight: 700;
+	color: #151515;
+	margin: 0;
+	padding: 0;
+}
+
+h2{
+	font-size: 38px;
+}
+
+h3{
+	font-size: 22px;
+}
+
+.btn{
+	background: #4737ff;
+	color: #fff;
+	text-transform: uppercase;
+	font-weight: 500;
+	font-size: 14px;
+	padding: 13px 26px;
+	border: none;
+	display: inline;
+	border-radius: 3px;
+	letter-spacing: 0.3em;
+	text-align: center;
+	transition: all 0.3s ease;
+}
+.btn:hover{
+	background: #3516f2;
+	color: #fff;
+}
+
+.header{
+	height: 90vh;
+}
+
+.nav{
+	padding-top: 59px;
+	margin-bottom: 127px;
+}
+
+.logo{
+
+}
+
+.search{
+	
+	border: none;
+}
+
+.menu{
+	
+	border: none;
+}
+
+.offer-cont__title{
+	font-size: 60px;
+	letter-spacing: -0.01em;
+	line-height: 1.2em;
+}
+
+.offer-cont__text{
+	margin: 30px 0 56px;
+}
+
+.offer-cont__btn{
+
+}
+
+.hero{
+	background: url('../img/image-1.jpg') no-repeat right top;
+	background-size: 80% 100%;
+	width: 55%;
+	height: 800px;
+	position: absolute;
+	right: 0;
+	top: 142px;
+}
+
+.video{
+	position: absolute;
+	left: 0;
+	bottom: 25%;
+	width: 40%;
+	height: 36%;
+	display: block;
+	background: url('../img/video.jpg') no-repeat center center;
+	display: flex;
+	justify-content: center;
+	text-align: center;
+}
+
+.video::after{
+	content: '';
+	display: block;
+	background: url('../img/play.svg');
+	width: 65px;
+	height: 65px;
+	border-radius: 4px;
+}
+
+.problems{
+	padding-top: 440px;
+}
+
+.about{
+
+}
+
+.about__title{
+	
+	margin-bottom: 30px;
+}
+
+.about__text{
+
+}
+
+.about__author{
+	background: url('../img/author.jpg') no-repeat left center;
+	padding: 7px 0 7px 96px;
+	margin-top: 61px;
+}
+
+.about__name{
+	font-size: 22px;
+}
+
+.about__dop{
+margin-bottom: 0;
+}
+
+.services{
+	padding-top: 142px;
+}
+
+.section-title{
+
+}
+
+.section-title__label{
+	text-transform: uppercase;
+	font-size: 14px;
+	letter-spacing: 0.25em;
+	color: #8f8f8f;
+	margin-bottom: 40px;
+}
+
+.section-title__heading{
+
+}
+
+.serv-list{
+	color: #8d8d8d;
+	margin-top: 67px;
+}
+
+.serv-list__item{
+	margin-bottom: 20px;
+}
+
+.left{
+	margin-left: 37px;
+}
+
+.works-carousel{
+	margin-top: 99px;
+}
+
+/* @media screen and (min-width: 992px){
+	.works-carousel, .item, .works-carousel .owl-item{
+		width: 825px !important;
+		position: relative;
+	}
+} */
+
+
+.owl-theme .owl-dots, .owl-theme .owl-nav{
+	text-align: left;
+}
+
+.owl-theme .owl-nav [class*=owl-]{
+	margin: 0;
+}
+
+.works-carousel .owl-nav{
+	margin-top: 50px !important;
+}
+
+.works-carousel .owl-prev{
+	margin-right: 25px !important;
+}
+
+.owl-carousel__play{
+	display: block;
+	background: url('../img/play.svg');
+	width: 65px;
+	height: 65px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	margin-left: -32px;
+	margin-top: -32px;
+	cursor: pointer;
+	border-radius: 4px;
+}
+
+.collage{
+	padding-top: 219px;
+	width: 50%;
+	background: url('../img/res-1.jpg') no-repeat left top / 80% 70%;
+	height: 540px;
+	position: absolute;
+	left: 0;
+}
+
+.collage img{
+	display: block;
+	width: 350px;
+	height: 450px;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	box-shadow: 30px 80px 130px rgba(0, 0, 0, 0.25);
+}
+
+.result{
+	padding-top: 219px;
+}
+
+.easy{
+	margin-left: 65px;
+	margin-top: 30px;
+}
+
+.easy__title{
+	margin-bottom: 30px;
+}
+
+.easy__text{
+	margin-bottom: 62px;
+}
+
+.easy__point{
+	text-transform: uppercase;
+	padding-left: 83px;
+	letter-spacing: 0.1em;
+	color: #000;
+	font-weight: 500;
+	font-size: 14px;
+	padding-top: 20px;
+	padding-bottom: 20px;
+	margin-bottom: 25px;
+}
+
+.first{
+	background: url('../img/icon100.svg') no-repeat left center;
+}
+
+.second{
+	background: url('../img/bag.svg') no-repeat left center;
+}
+
+.works{
+	padding-top: 283px;
+}
+
+.work-tabs{
+	margin-left: 60px;
+	font-size: 14px;
+	text-transform: uppercase;
+	letter-spacing: 0.3em;
+	margin-top: 70px;
+}
+
+.work-tabs__item a{
+	text-decoration: none;
+	color: #8d8d8d;
+}
+
+.work-tabs__item.active a{
+	color: #1434e1;
+}
+
+.works-wrap{
+	flex-wrap: wrap;
+	margin-top: 108px;
+}
+
+.works-wrap__item{
+	margin-bottom: 30px;
+	display: block;
+	position: relative;
+}
+
+.works-wrap__item img{
+	transition: all 0.4s ease;
+	display: block;
+
+}
+
+.works-wrap__item:hover img{
+	box-shadow: -30px 80px 200px rgba(0, 0, 0, 0.25);
+	-moz-transform: rotate(3deg) translate(0px, -3px) skew(2deg, 2deg);
+	-webkit-transform: rotate(3deg) translate(0px, -3px) skew(2deg, 2deg);
+	-o-transform: rotate(3deg) translate(0px, -3px) skew(2deg, 2deg);
+	-ms-transform: rotate(3deg) translate(0px, -3px) skew(2deg, 2deg);
+	transform: rotate(3deg) translate(0px, -3px) skew(2deg, 2deg);
+}
+
+.works-wrap__item:hover:after{
+	visibility: visible;	
+}
+
+.works-wrap__item:after{
+	content: '';
+	visibility: hidden;
+	display: block;
+	background: url('../img/play.svg');
+	width: 65px;
+	height: 65px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	margin-left: -32px;
+	margin-top: -32px;
+	transition: all 0.3s ease;
+}
+
+.testimonials{
+	padding-top: 248px;
+}
+
+.contributor{
+	margin-top: 121px;
+}
+
+.contributor__title{
+	margin-bottom: 20px;
+}
+
+.contributor__desc{
+
+}
+
+.cont-photo{
+	display: block;
+}
+
+.contributor-carousel .owl-nav{
+	display: flex;
+	margin-top: -50px;
+	position: relative;
+}
+
+.contributor-carousel .owl-prev{
+	margin-right: 25px;
+}
+
+.clients{
+	padding-top: 278px;
+}
+
+.clients-row{
+	margin-top: 127px;
+}
+
+.footer{
+	height: 240px;
+	background: #515151;
+	margin-top: 136px;
+}
+
+.footer-logo{
+	margin-top: 109px;
+	margin-bottom: 109px;
+}
+
+.section-title__heading_review{
+	font-size: 28px;
+}
+
+@media screen and (max-width: 1200px){
+	.work-tabs{
+		margin-left: 0;
+	}
+	.works-wrap__item{
+		width: 30%; 
+	}
+	.works-wrap__item img{
+		display: block;
+		width: 100%; 
+	}
+	.contributor{
+		margin-top: 50px;
+	}
+}
+
+@media screen and (max-width: 992px){
+	.works-carousel .item, .works-carousel .owl-item{
+		width: auto !important;
+	}
+	
+}
+
+@media screen and (max-width: 720px){
+	.hero{
+		position: relative;
+		width: 100%;
+		height: 200px;
+		top: 0;
+		margin-top: 60px;
+	}
+	.vh-dependent{
+		height: auto;
+		display: flex;
+		align-items: center;
+	}
+	.about{
+		margin-top: 60px;	
+	}
+	.collage{
+		position: relative;
+		width: 100%;
+	}
+	.easy{
+		margin-left: 0;
+		margin-top: 70px;
+	}
+	.contributor-carousel .owl-nav{
+		margin-top: 40px;
+	}
+}
+
+@media screen and (max-width: 576px){
+	.left{
+		margin-left: 0;
+	}
+	.works-wrap__item{
+		width: 100%;
+		margin-bottom: 40px;
+	}
+	.clients-row{
+		flex-direction: column;
+		justify-content: center;
+	}
+	.clients-row__item{
+		margin-bottom: 30px;
+		text-align: center;
+	}
+	.work-tabs{
+		flex-direction: column;
+	}
+	.work-tabs__item{
+		margin-bottom: 40px;
+	}
+}

img/amd.svg

@@ -0,0 +1,6 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.15">
+<path d="M43.8512 45.2437C43.5511 44.4937 42.8196 44.0062 41.9944 44.0062H15.9988V17.9999C15.9988 16.8937 15.0985 15.9937 14.0106 15.9937C13.4855 15.9937 12.9603 16.1999 12.5852 16.5749L0.581432 28.5749C0.206314 28.9499 0 29.4562 0 29.9999V57.9936C0 59.0999 0.900281 59.9999 2.00688 59.9999H30.0094C30.5345 59.9999 31.041 59.7937 31.4348 59.4187L43.4386 47.4187C43.9825 46.8374 44.1513 45.9749 43.8512 45.2437Z" fill="black"/>
+<path d="M58.0119 0H5.98314C4.87654 0 3.97626 0.9 3.97626 1.9875C3.97626 2.5125 4.18257 3.0375 4.55769 3.4125L16.5614 15.4125C16.9366 15.7875 17.443 15.9938 17.9869 15.9938H44.0013V42C44.0013 42.525 44.2076 43.0312 44.5827 43.425L56.5865 55.425C57.3742 56.2125 58.6308 56.2125 59.4186 55.425C59.7937 55.05 60 54.5438 60 54V2.00625C60 0.9 59.1185 0 58.0119 0Z" fill="black"/>
+</g>
+</svg>

img/bag.svg

@@ -0,0 +1,6 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="54" height="54" rx="27" fill="#E5E5E5"/>
+<path d="M34 22H20C19.4477 22 19 22.4477 19 23V37C19 37.5523 19.4477 38 20 38H34C34.5523 38 35 37.5523 35 37V23C35 22.4477 34.5523 22 34 22Z" stroke="#1434E1" stroke-width="2"/>
+<path d="M35 33H19V35H35V33Z" fill="#1434E1"/>
+<path d="M31 25V20C31 17.7909 29.2091 16 27 16C24.7909 16 23 17.7909 23 20V25" stroke="#1434E1" stroke-width="2" stroke-linecap="round"/>
+</svg>

img/icon100.svg

@@ -0,0 +1,8 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="54" height="54" rx="27" fill="#E5E5E5"/>
+<path d="M18 22L23 18C23 18 18 28.5 18 32" stroke="#1434E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.4359 18C25.9359 18.5 24.9359 21 24.4359 23C23.9359 25 23.3441 28 25.9359 28C29.5276 28 29.0277 20 29.0277 20" stroke="#1434E1" stroke-width="2" stroke-linecap="round"/>
+<path d="M34.4359 18C32.9359 18.5 31.9359 21 31.4359 23C30.9359 25 30.3441 28 32.9359 28C36.5276 28 36.0277 20 36.0277 20" stroke="#1434E1" stroke-width="2" stroke-linecap="round"/>
+<path d="M22 32C22 32 27 30 33 31" stroke="#1434E1" stroke-width="2" stroke-linecap="round"/>
+<path d="M34 34C25.5 33.102 19 36 19 36" stroke="#1434E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

img/left.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="50" height="50" fill="#C4C4C4"/>
+<path d="M27.5 17.5L20 25.3125L27.5 33.125" stroke="white" stroke-width="2"/>
+</svg>

img/menu-icon.svg

@@ -0,0 +1,4 @@
+<svg width="34" height="14" viewBox="0 0 34 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="34" height="3" fill="#222222"/>
+<rect x="16" y="11" width="18" height="3" fill="#222222"/>
+</svg>

img/nike.svg

@@ -0,0 +1,5 @@
+<svg width="146" height="50" viewBox="0 0 146 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.15">
+<path d="M81.7447 16.4173L72.7088 18.7899L47.6374 25.3532C38.7834 27.544 31.0383 30.462 23.5751 27.9076C13.4302 23.526 13.612 12.1266 21.1752 0C7.80322 11.0358 -16.2591 46.3248 16.2846 49.8882C20.4298 50.4337 27.8112 48.9792 35.829 45.6066L72.7088 30.4711L145.45 0.727233L81.7447 16.4173Z" fill="black"/>
+</g>
+</svg>

img/play.svg

@@ -0,0 +1,4 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="65" height="65" fill="white"/>
+<path d="M42.697 32.8485L27.9242 41.3775L27.9242 24.3194L42.697 32.8485Z" fill="#F96241"/>
+</svg>

img/right.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="50" height="50" fill="#C4C4C4"/>
+<path d="M22.5 33.75L30 25.9375L22.5 18.125" stroke="white" stroke-width="2"/>
+</svg>

img/xiaomi.svg

@@ -0,0 +1,7 @@
+<svg width="80" height="63" viewBox="0 0 80 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.15">
+<path d="M37.1429 0H0V62.8571H11.4286V11.4286H37.1429C41.8686 11.4286 45.7143 15.2743 45.7143 20V62.8571H57.1429V20C57.1429 8.97143 48.1714 0 37.1429 0Z" fill="black"/>
+<path d="M34.2857 22.8569H22.8571V62.8569H34.2857V22.8569Z" fill="black"/>
+<path d="M80 0H68.5714V62.8571H80V0Z" fill="black"/>
+</g>
+</svg>

index.html

@@ -0,0 +1,322 @@
+<!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>

js/main.js

@@ -0,0 +1,42 @@
+$(function(){
+	$('.works-carousel').owlCarousel({
+		loop:true,
+		margin:30,
+		nav:true,
+		dots: false,
+		navText: ['<img src="img/left.svg">', '<img src="img/right.svg">'],
+		startPosition: 1,
+		responsive:{
+			0:{
+				items:1
+			},
+			600:{
+				items:1
+			},
+			1000:{
+				items:1
+			}
+		}
+	});
+
+	$('.contributor-carousel').owlCarousel({
+		loop:true,
+		margin:0,
+		nav:true,
+		dots: false,
+		navText: ['<img src="img/left.svg">', '<img src="img/right.svg">'],
+		// startPosition: 1,
+		responsive:{
+			0:{
+				items:1
+			},
+			600:{
+				items:1
+			},
+			1000:{
+				items:1
+			}
+		}
+	});
+	
+});