thsOne/Creative-Agency/about-us.html

195 lines
7.9 KiB
HTML

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Main CSS -->
<link href="assets/css/main.css" rel="stylesheet" >
<link href="assets/css/overflow.css" rel="stylesheet" >
<title>Creative Agency</title>
<!-- WebFont JS -->
<script src="assets/js/webfont/webfont.js"></script>
<script>document.documentElement.className = "js";
var supportsCssVars = function supportsCssVars() {
var e,
t = document.createElement("style");
return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
};
supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
</script>
</head>
<body class="demo-1 loading">
<main>
<div class="frame frame--header">
<!-- NAVIGATION STARTS
========================================================================= -->
<nav id="navigation" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" class="img-fluid" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Work</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="about-us.html" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-us.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVIGATION ENDS
========================================================================= -->
</div>
<!-- ABOUT US STARTS
========================================================================= -->
<section class="home-intro" id="about" >
<div class="container-fluid">
<div class="row pb-4 align-items-center">
<div class="col-12 col-lg-6 ">
<div class="herotext">
<h6 class="pb-2">/Who we are</h6>
<h2>Creative Design Agency</h2>
<h5 class="pt-4">We strive to create incredible experiences for people by creating new opportunities for brands, technology and culture.
<br><br>Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, , like these sweet mornings of spring taken possession of my entire soul.
</h5>
</div>
</div>
<div class="col-12 col-lg-5 offset-lg-1">
<div class="picture">
<img src="assets/img/about/pic1.jpg" class="img-fluid" style="max-width: 100%;" alt="">
<div class="about-circle">
<img src="assets/img/play-reel.svg" class="img-fluid cir" alt="">
<div class="icon"><a class="popup-vimeo" href="https://vimeo.com/45830194"><img src="assets/img/play-icon.svg" class="img-fluid" alt=""></a></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /. ABOUT US ENDS
========================================================================= -->
<!-- TEAM STARTS
========================================================================= -->
<section class="team dark-grey-bg mt-3" id="team">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="herotext text-center">
<h6>/Meet Our Team</h6>
<h2>Team of Experts</h2>
<h5 class="pt-2">Alone we can do so little; together we can do so much.</h5>
</div>
</div>
</div>
<div class="team-carousel pt-5">
<div class="block">
<div class="pic pb-4"><img src="assets/img/team/1.jpg" class="img-fluid" alt=""></div>
<div class="details">
<h2>Maria</h2>
<h6>Crossfit Coach</h6>
<ul class="socialmedia pt-2">
<li><a href=""><i class="lab la-twitter"></i></a></li>
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
<li><a href=""><i class="lab la-dribbble"></i></a></li>
<li><a href=""><i class="lab la-behance"></i></a></li>
</ul>
</div>
</div>
<div class="block">
<div class="pic pb-4"><img src="assets/img/team/2.jpg" class="img-fluid" alt=""></div>
<div class="details">
<h2>Abigail</h2>
<h6>Bodybuilding Coach</h6>
<ul class="socialmedia pt-2">
<li><a href=""><i class="lab la-linkedin-in"></i></a></li>
<li><a href=""><i class="lab la-twitter"></i></a></li>
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
<li><a href=""><i class="lab la-dribbble"></i></a></li>
</ul>
</div>
</div>
<div class="block">
<div class="pic pb-4"><img src="assets/img/team/3.jpg" class="img-fluid" alt=""></div>
<div class="details">
<h2>Donna</h2>
<h6>Yoga Instructor</h6>
<ul class="socialmedia pt-2">
<li><a href=""><i class="lab la-twitter"></i></a></li>
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
<li><a href=""><i class="lab la-dribbble"></i></a></li>
</ul>
</div>
</div>
<div class="block">
<div class="pic pb-4"><img src="assets/img/team/4.jpg" class="img-fluid" alt=""></div>
<div class="details">
<h2>Anderson</h2>
<h6>Weight Lifting Coach</h6>
<ul class="socialmedia pt-2">
<li><a href=""><i class="lab la-twitter"></i></a></li>
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
<li><a href=""><i class="lab la-dribbble"></i></a></li>
</ul>
</div>
</div>
<div class="block">
<div class="pic pb-4"><img src="assets/img/team/5.jpg" class="img-fluid" alt=""></div>
<div class="details">
<h2>Bailey</h2>
<h6>Nutrationest</h6>
<ul class="socialmedia pt-2">
<li><a href=""><i class="lab la-twitter"></i></a></li>
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
<li><a href=""><i class="lab la-dribbble"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- /.. TEAM ENDS
========================================================================= -->
<!-- FOOTER STARTS
========================================================================= -->
<footer class="container-fluid">
<div class="row">
<div class="col-6">
<ul class="socialmedia">
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
<div class="col-6 text-end">
<p class="">ThisOne © 2021</p>
</div>
</div>
</footer>
<!-- /.. FOOTER ENDS
========================================================================= -->
</main>
<svg class="cursor" width="30" height="30" viewBox="0 0 30 30">
<circle class="cursor__inner" cx="15" cy="15" r="7.5"></circle>
</svg>
<!--JQUERY MIN JS-->
<script src="assets/lib/jquery-1.12.4/jquery.min.js"></script>
<!--BOOTSTRAP JS-->
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
<!-- OWL CAROUSEL -->
<script src="assets/lib/owl-carousel/owl.carousel.js"></script>
<!-- MAGNIFIC POPUP -->
<script src="assets/lib/magnific-popup/jquery.magnific-popup.js"></script>
<!-- PORTFOLIO -->
<script src="assets/js/work.js"></script>
<!-- CUSTOM JS -->
<script src="assets/js/script.js"></script>
</body>
</html>