File size: 22.47Kb
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nebro Portfolio Template</title>
<meta charset="UTF-8">
<meta name="description" content="Nebro Portfolio Template">
<meta name="keywords" content="onepage, portfolio">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheets -->
<link rel="stylesheet" href="font/stylesheet.css"/>
<link rel="stylesheet" href="css/style.css"/>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Font icons -->
<link rel="stylesheet" href="icon-fonts/fontawesome-5.0.6/css/fontawesome-all.min.css"/>
<link rel="stylesheet" href="icon-fonts/flat-icon/flaticon.css"/>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800&display=swap" rel="stylesheet">
</head>
<body class="dark">
<!-- PRELOADER -->
<div id="preloader">
<div class="loading-area">
<div class="logo"><img src="img/logo.png" alt=""></div>
<span>loading...</span>
</div>
<div class="left-side"></div>
<div class="right-side"></div>
</div>
<!-- HEADER
==================================================-->
<header>
<!-- Logo -->
<div class="logo">
<img src="img/logo.png" alt="">
</div>
<div class="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
<!-- Navigation -->
<nav>
<ul>
<li><a href="#hero"><span data-hover="Home">Home</span></a></li>
<li><a href="#about"><span data-hover="About">About</span></a></li>
<li><a href="#services"><span data-hover="Services">Services</span></a></li>
<li><a href="#testimonials"><span data-hover="Testimonials">Testimonials</span></a></li>
<li><a href="#portfolio"><span data-hover="Portfolio">Portfolio</span></a></li>
<li><a href="#news"><span data-hover="News">News</span></a></li>
<li><a href="#contact"><span data-hover="Contact">Contact</span></a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<!-- SLIDER
==================================================-->
<div class="hero" id="hero">
<!-- Swiper -->
<div class="swiper-container carousel">
<div class="swiper-wrapper">
<!-- a slide -->
<div class="swiper-slide" style="background-image:url(img/slider-4.jpg)">
<div class="slider-content">
<span>More than an agency in</span>
<h1>Digital Age.</h1>
<a href="#about" class="site-btn top_30">SEE MORE</a>
</div>
</div>
<!-- a slide -->
<div class="swiper-slide" style="background-image:url(img/slider-1.jpg)">
<div class="slider-content">
<span>Don't give up</span>
<h1>To Fight.</h1>
<a href="#about" class="site-btn top_30">SEE MORE</a>
</div>
</div>
<!-- a slide -->
<div class="swiper-slide" style="background-image:url(img/slider-3.jpg)">
<div class="slider-content">
<span>Hurry up let's</span>
<h1>Stand Up.</h1>
<a href="#about" class="site-btn top_30">SEE MORE</a>
</div>
</div>
<!-- a slide -->
<div class="swiper-slide" style="background-image:url(img/slider-2.jpg)">
<div class="slider-content">
<span>Don't make</span>
<h1>Them Think.</h1>
<a href="#about" class="site-btn top_30">SEE MORE</a>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div> <!-- Swiper Container end -->
<!-- Social Links -->
<div class="social">
<a href="#"><i class="fab fa-facebook"></i> </a>
<a href="#"><i class="fab fa-twitter" aria-hidden="true"></i> </a>
<a href="#"><i class="fab fa-instagram" aria-hidden="true"></i> </a>
<a href="#"><i class="fab fa-behance" aria-hidden="true"></i> </a>
<a href="#"><i class="fab fa-dribbble" aria-hidden="true"></i> </a>
</div>
</div>
<!-- ABOUT
==================================================-->
<section id="about" class="about">
<div class="container wow fadeInUp">
<div class="row">
<!-- Left Side -->
<div class="col-lg-7 text box-animation">
<div class="section-title bottom_15 top_30">
<h2 class="title">About us.</h2>
<span>who we are</span>
</div>
<p>Advice me cousin an spring of needed. Tell use paid law ever yet new. Meant to learn of vexed if style allow he there. Tiled man stand tears ten joy there terms any widen. Procuring continued suspicion its ten. Pursuit brother are had fifteen distant has. Early had add equal china quiet visit. Appear an manner as no limits either praise in. In in written on charmed justice is amiable farther besides. Law insensible middletons unsatiable for apartments boy delightful unreserved. </p>
<a href="#portfolio" class="site-btn top_30">SEE PORTFOLIO</a>
</div>
<!-- Right Side -->
<div class="col-lg-5 image">
<figure>
<img src="img/about.jpg">
</figure>
</div>
</div> <!-- row end -->
<div class="row top_60 infos">
<div class="col-lg-4 info">
<h3 class="second-title">Who we are</h3>
<p>Supplied directly pleasant we ignorant ecstatic of jointure so if. These spoke house of we. Ask put yet excuse person see change.</p>
</div>
<div class="col-lg-4 info">
<h3 class="second-title">Our philosophy</h3>
<p>Why sir end believe uncivil respect. Always get adieus nature day course for common. My little garret repair to desire he esteem. </p>
</div>
<div class="col-lg-4 info">
<h3 class="second-title">How we work</h3>
<p>Piqued favour stairs it enable exeter as seeing. Remainder met improving but engrossed sincerity age. Better but length gay denied abroad are.</p>
</div>
</div>
</div> <!-- container end -->
</section>
<!-- SERVICES
==================================================-->
<section id="services" class="services graybg">
<div class="container wow fadeInUp">
<div class="section-title bottom_15 top_30">
<h2 class="title">Our services.</h2>
<span>who we are</span>
</div>
<!-- Services -->
<div class="row">
<!-- a service -->
<div class="col-lg-4">
<div class="service">
<i class="flaticon-041-computer"></i>
<h3 class="second-title">Web Design</h3>
<p>We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state.</p>
</div>
</div>
<!-- a service -->
<div class="col-lg-4">
<div class="service">
<i class="flaticon-027-pencil"></i>
<h3 class="second-title">Design & Concept</h3>
<p>We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state.</p>
</div>
</div>
<!-- a service -->
<div class="col-lg-4">
<div class="service">
<i class="flaticon-001-rgb"></i>
<h3 class="second-title">Social Media</h3>
<p>We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state.</p>
</div>
</div>
<!-- a service -->
<div class="col-lg-4">
<div class="service">
<i class="flaticon-007-camera-roll"></i>
<h3 class="second-title">Photography</h3>
<p>We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state.</p>
</div>
</div>
<!-- a service -->
<div class="col-lg-4">
<div class="service">
<i class="flaticon-034-video-camera"></i>
<h3 class="second-title">Video Edit</h3>
<p>We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state.</p>
</div>
</div>
<!-- a service -->
<div class="col-lg-4">
<div class="service">
<i class="flaticon-038-origami"></i>
<h3 class="second-title">Seo Optimization</h3>
<p>We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state.</p>
</div>
</div>
</div>
<!-- Counter -->
<div id="counter" class="top_90 counter">
<div class="row">
<div class="col-lg-4 col-md-4 count">
<div class="counter-value" data-count="820">0</div>
<h4 class="title">SATISFACTION
<br>CLIENTS</h4>
</div>
<div class="col-lg-4 col-md-4 count">
<div class="counter-value" data-count="430">0</div>
<h4 class="title">EMPLOYEES<br>ON
WORLDWIDE</h4>
</div>
<div class="col-lg-4 col-md-4 count">
<div class="counter-value" data-count="940">0</div>
<h4 class="title">PROJECTS COMPLETED
ON<br>60 COUNTRIES
</h4>
</div>
</div> <!-- row end -->
</div> <!-- counter end -->
</div> <!-- container end-->
</section>
<!-- TESTIMONIALS
==================================================-->
<section class="testimonial" id="testimonials">
<div class="container wow fadeInUp">
<div class="section-title bottom_15 top_30">
<h2 class="title">Testimonials.</h2>
<span>what the people saying about us</span>
</div>
<div class="owl-carousel owl-theme testimonials" data-autoplay="true" data-items-desktop="3" data-items-desktop-small="3" data-items-tablet="2" data-items-tablet-small="1" data-margin="30">
<!-- a comment -->
<div class="item">
<div class="outitem">
<figure><img src="img/team-1.jpg"></figure>
<div class="name">
<h3 class="title">Adam S. Benedetto</h3>
<span>Customer</span>
</div>
<p>"Thanks for the great service. It's the perfect solution for our business. Since I invested in tavonline I made over 100,000 dollars profits. You guys rock!"</p>
</div>
</div>
<!-- a comment -->
<div class="item">
<div class="outitem">
<figure><img src="img/team-2.jpg"></figure>
<div class="name">
<h3 class="title">Jean D. Costa</h3>
<span>Customer</span>
</div>
<p>"Thanks for the great service. It's the perfect solution for our business. Since I invested in tavonline I made over 100,000 dollars profits. You guys rock!"</p>
</div>
</div>
<!-- a comment -->
<div class="item">
<div class="outitem">
<figure><img src="img/team-3.jpg"></figure>
<div class="name">
<h3 class="title">Henry S. England</h3>
<span>Customer</span>
</div>
<p>"Thanks for the great service. It's the perfect solution for our business. Since I invested in tavonline I made over 100,000 dollars profits. You guys rock!"</p>
</div>
</div>
<!-- a comment -->
<div class="item">
<div class="outitem">
<figure><img src="img/team-1.jpg"></figure>
<div class="name">
<h3 class="title">Adam S. Benedetto</h3>
<span>Customer</span>
</div>
<p>"Thanks for the great service. It's the perfect solution for our business. Since I invested in tavonline I made over 100,000 dollars profits. You guys rock!"</p>
</div>
</div>
</div>
</div>
</section>
<!-- PORTFOLIO
================================================== -->
<section id="portfolio" class="portfolio graybg">
<div class="container wow fadeInUp">
<div class="col-lg-12">
<div class="section-title bottom_15 top_30">
<h2 class="title">Our portfolio.</h2>
<span>what the people saying about us</span>
</div>
<!-- Filter -->
<div class="portfolio_filter">
<ul>
<li><a class="select-cat" data-filter="*" href="#">All Works</a></li>
<li><a data-filter=".webdesign" href="#">Web Design</a></li>
<li><a data-filter=".branding" href="#">Branding</a></li>
<li><a data-filter=".application" href="#">Application</a></li>
</ul>
</div>
</div>
<!-- Portfolio -->
<div class="row masonry clearfix">
<!-- a work -->
<a href="https://www.youtube.com/watch?v=M-M3rdL_WLQ" class="col-lg-4 col-sm-6 grid-item photography video-icon">
<figure class="portfolio-item">
<img src="img/works/work-1/01.jpg" alt="" />
<figcaption>
<h3 class="title">Loud Website</h3>
<span>Website </span>
</figcaption>
</figure>
</a>
<!-- a work -->
<a href="project-detail.html" class="col-lg-4 col-sm-6 grid-item branding link-icon">
<figure class="portfolio-item">
<img src="img/works/work-2/01.jpg" alt="" />
<figcaption>
<h3 class="title">Champion</h3>
<span> Branding </span>
</figcaption>
</figure>
</a>
<!-- a work -->
<a href="img/works/work-3/01.jpg" class="col-lg-4 col-sm-6 grid-item application lightbox-icon">
<figure class="portfolio-item">
<img src="img/works/work-3/01.jpg" alt="" />
<figcaption>
<h3 class="title">Doddy App</h3>
<span>Application </span>
</figcaption>
</figure>
</a>
<!-- a work -->
<a href="img/works/work-4/01.jpg" class="col-lg-4 col-sm-6 grid-item photography lightbox-icon">
<figure class="portfolio-item">
<img src="img/works/work-4/01.jpg" alt="" />
<figcaption>
<h3 class="title">Sol Republic</h3>
<span> Branding </span>
</figcaption>
</figure>
</a>
<!-- a work -->
<a href="img/works/work-5/01.jpg" class="col-lg-4 col-sm-6 grid-item branding lightbox-icon">
<figure class="portfolio-item">
<img src="img/works/work-5/01.jpg" alt="" />
<figcaption>
<h3 class="title">Logo Design</h3>
<span> Branding </span>
</figcaption>
</figure>
</a>
<!-- a work -->
<a href="img/works/work-6/01.jpg" class="col-lg-4 col-sm-6 grid-item webdesign lightbox-icon">
<figure class="portfolio-item">
<img src="img/works/work-6/01.jpg" alt="" />
<figcaption>
<h3 class="title">New Art Style</h3>
<span> Web Design </span>
</figcaption>
</figure>
</a>
</div> <!-- masonry end -->
<div class="text-center load-more" data-wow-delay="0.2s">
<button class="site-btn" data-tilt=""> LOAD MORE
<i class="icon ion-md-arrow-down"></i>
</button>
<ul id="pagination-selector" class="portfolio-pagination list-inline d-none">
<li class="list-inline-item">1</li>
<li class="list-inline-item"><a href="page-2.html">2</a></li>
</ul>
</div>
</div> <!-- container end -->
</section>
<!-- NEWSLETTER
================================================== -->
<section class="newsletter imagebg text-center">
<div class="container">
<div class="section-title center bottom_15 top_30 bottom_45">
<h2 class="title">Our newsletter.</h2>
<span>what the people saying about us</span>
</div>
<p>We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state.
Pronounce we attention admitting on assurance of suspicion conveying</p>
<div class="col-lg-8 offset-lg-2">
<input class="emailput" placeholder="Your email">
</div>
<button type="submit" placeholder="SEND" href="#" class="site-btn top_30">SUBSCRIBE</button>
</div>
</section>
<!-- OUR NEWS
================================================== -->
<section id="news" class="news">
<div class="container wow fadeInUp">
<div class="section-title bottom_15 top_30 bottom_45">
<h2 class="title">Our news.</h2>
<span>what the people saying about us</span>
</div>
<div class="row">
<!-- anews -->
<div class="col-lg-4">
<a class="anews" href="single-news.html">
<div class="image" style="background-image:url(img/news-1.jpg)"></div>
<div class="date">
<h3 class="big">23</h3>
<span class="little">MARCH, 19</span>
</div>
<div class="category">LIFESTYLE</div>
<h2 class="title">Curiosity continual belonging offending so explained it exquisite...</h2>
</a>
</div>
<!-- anews -->
<div class="col-lg-4">
<a class="anews" href="single-news.html">
<div class="image" style="background-image:url(img/news-2.jpg)"></div>
<div class="date">
<h3 class="big">26</h3>
<span class="little">MARCH, 19</span>
</div>
<div class="category">DESIGN</div>
<h2 class="title">Friendly as stronger speedily by recurred. Son interest wandered...</h2>
</a>
</div>
<!-- anews -->
<div class="col-lg-4">
<a class="anews" href="single-news.html">
<div class="image" style="background-image:url(img/news-3.jpg)"></div>
<div class="date">
<h3 class="big">18</h3>
<span class="little">MARCH, 19</span>
</div>
<div class="category">PHOTOGRAPHY</div>
<h2 class="title">Manners beloved affixed picture men ask. Explain few led parties...</h2>
</a>
</div>
</div>
<div class="col-lg-12 text-center">
<a href="news.html" class="site-btn top_30">LOAD MORE</a>
</div>
</div>
</section>
<!-- CONTACT
================================================== -->
<section id="contact" class="contact graybg">
<div class="container wow fadeInUp">
<div class="section-title bottom_15 top_30 bottom_45">
<h2 class="title">Contact us.</h2>
<span>get in touch</span>
</div>
<!-- Map -->
<div class="contact-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d36479.43458460815!2d-118.3131125302928!3d34.05808678462837!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+Kaliforniya%2C+Birle%C5%9Fik+Devletler!5e0!3m2!1str!2str!4v1551872109031" height="450" style="border:0" allowfullscreen=""></iframe>
</div>
<div class="getintouch row top_120">
<!-- contact info -->
<div class="col-lg-4 contact-info box-animation">
<!-- info -->
<div class="info">
<i class="fas fa-paper-plane"></i>
<a href="#">hello@cenky.com</a>
<p> Email </p>
</div>
<!-- info -->
<div class="info top_30">
<i class="fas fa-map-marker-alt"></i>
<p class="text">1444 S. Alameda Street Los Angeles,<br>California 90021</p>
<p> Address </p>
</div>
<!-- info -->
<div class="info top_30">
<i class="fas fa-phone"></i>
<a href="#">0800 123 456789</a>
<p> Phone </p>
</div>
</div>
<div class="col-lg-8 contact-form box-animation">
<!-- contact form -->
<form class="contact-form">
<div class="row">
<!--Name-->
<div class="col-md-6">
<input class="form-inp" type="text" placeholder="Name">
</div>
<!--Email-->
<div class="col-md-6">
<input class="form-inp" type="text" placeholder="Email">
</div>
<div class="col-md-12">
<!--Message-->
<textarea placeholder="How can I help you?" rows="7"></textarea>
<button id="con_submit" class="site-btn top_45 pull-right" type="submit">SUBMIT</button>
</div>
</div>
</form>
</div>
</div>
</div> <!-- Container end -->
<div class="container wow fadeInUp">
<!-- CLIENTS -->
<ul class="bxslider">
<li><img src="img/clients/client-1d.png" /></li>
<li><img src="img/clients/client-2d.png" /></li>
<li><img src="img/clients/client-3d.png" /></li>
<li><img src="img/clients/client-4d.png" /></li>
<li><img src="img/clients/client-5d.png" /></li>
<li><img src="img/clients/client-6d.png" /></li>
<li><img src="img/clients/client-7d.png" /></li>
</ul>
</div>
</section>
</div>
<!-- FOOTER
================================================== -->
<footer>
<div class="container">
<div class="row">
<!-- Copyright -->
<div class="col-lg-4 copyright">
<a href="index.html"><img src="img/logo.png" alt=""></a>
<p>© 2019 Nebro Creative Agency.</p>
</div>
<!-- Social -->
<div class="col-lg-4 ftr-social">
<div class="social">
<a href="#"><i class="fab fa-facebook"></i> </a>
<a href="#"><i class="fab fa-twitter" aria-hidden="true"></i> </a>
<a href="#"><i class="fab fa-instagram" aria-hidden="true"></i> </a>
<a href="#"><i class="fab fa-behance" aria-hidden="true"></i> </a>
<a href="#"><i class="fab fa-dribbble" aria-hidden="true"></i> </a>
</div>
</div>
<!-- Get In Touch -->
<div class="col-lg-4 getintouch">
<h3 class="title">Get In Touch</h3>
<p>hi@yourdomain.com</p>
</div>
</div>
</div>
</footer>
<!-- Javascripts -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>