first commit
This commit is contained in:
Beyhan Oğur
992
app/components/home/MainContentArea.vue
Normal file
992
app/components/home/MainContentArea.vue
Normal file
@@ -0,0 +1,992 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<div class="main-content-inner">
|
||||
|
||||
<!-- About div Start -->
|
||||
<div class="home-section" id="home">
|
||||
<ClientOnly>
|
||||
<div class="particals"></div>
|
||||
</ClientOnly>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="home-content">
|
||||
<div class="home-image">
|
||||
<img src="/assets/images/about.jpg" alt="" class="wow zoomIn" data-wow-delay="0.2s">
|
||||
</div>
|
||||
<div class="home-main-content">
|
||||
<h4 class="heading wow fadeInUp" data-wow-delay="0.3s">
|
||||
Kristen Stewart
|
||||
</h4>
|
||||
<div class="designation wow zoomIn" data-wow-delay="0.4s">
|
||||
<span>
|
||||
I'm a <ClientOnly><span class="typed"></span></ClientOnly>
|
||||
</span>
|
||||
</div>
|
||||
<div class="social-info wow fadeInUp" data-wow-delay="0.5s">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fab fa-pinterest-p"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about-links wow fadeInUp" data-wow-delay="0.6s">
|
||||
<a href="#" class="mybtn3 mybtn-bg"> <span>Contact Me</span> </a>
|
||||
<a href="https://www.youtube.com/watch?v=6zM4p_A0ISk"
|
||||
class="mybtn3 mybtn-bg video-play mfp-iframe"> <span> <i class="fas fa-play"></i> Intro</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- About div End -->
|
||||
|
||||
<!-- About div Start -->
|
||||
<div class="about-section" id="about">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
About <span class="color">Me</span>
|
||||
<span class="bg-text">About</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="about">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="about-image wow fadeInUp" data-wow-delay="0.3s">
|
||||
<img src="/assets/images/about2.jpg" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-8 align-self-center">
|
||||
<div class="short-description wow fadeInUp">
|
||||
<p>
|
||||
Randon Text Received shutters expenses ye he pleasant. Drift as blind above at up. No up
|
||||
simple county stairs do should praise as. Drawings sir gay together landlord had law smallest.
|
||||
Formerly welcomed attended declared met say unlocked. Jennings outlived no dwelling denoting
|
||||
in peculiar as he believed.
|
||||
</p>
|
||||
<p>
|
||||
Left till here away at to whom past. Feelings laughing at no wondered repeated provided
|
||||
finished. It acceptance thoroughly my advantages everything as.
|
||||
</p>
|
||||
<div class="about-links">
|
||||
<a href="#" class="mybtn3 mybtn-bg"> <span>Download CV</span> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="about-content wow fadeInUp">
|
||||
<div class="personal-info">
|
||||
<ul>
|
||||
<li>
|
||||
<span><label>Birthday:</label> 01.07.1990</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Age:</label> 28</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>City:</label> New York, USA</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Interests:</label> Soccer, UFC</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Study:</label> Chicago University</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Degree:</label> Master</span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Website:</label> <a href="#">www.mywebsite.com</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Mail:</label> <a href="mailto:example@gmail.com">mymail@gmail.com</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Phone:</label> <a href="#">+77 022 177 05 05</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span><label>Twitter:</label> <a href="#">@myusername</a></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- About div End -->
|
||||
|
||||
<!-- Counter Area Start -->
|
||||
<div class="counter-area">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/005-target.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">80</div>
|
||||
<span>k+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
Project Done
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/002-medical-mask.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">19</div>
|
||||
<span>k+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
Happy users
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/053-success-1.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">39</div>
|
||||
<span>k+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
Great Reviews
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="single-counter wow fadeInUp">
|
||||
<img src="/assets/images/icon/045-hacker.png" alt="">
|
||||
<ClientOnly>
|
||||
<div class="counter-wrapper">
|
||||
<div class="counter">50</div>
|
||||
<span>+</span>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
<p class="text">
|
||||
Support Team
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Counter Area End -->
|
||||
|
||||
<!-- My service Start -->
|
||||
<div class="service-wrapper" id="service">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
My <span class="color">Services</span>
|
||||
<span class="bg-text">Services</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/024-server.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
Amazon AWS
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/062-code-1.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
Web Development
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/064-vector.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
Creative design
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/043-analytics.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
App Development
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/033-rocket.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
Fast & Optimized
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="service-details.html" class="single-feature wow fadeInUp">
|
||||
<img src="/assets/images/icon/054-puzzle.png" alt="">
|
||||
<div class="content">
|
||||
<h4 class="title">
|
||||
Pixel Precision
|
||||
</h4>
|
||||
<p>
|
||||
Clarinet accustomed. Would legs of framework officers. We've to morning like a
|
||||
contracting
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- My service End -->
|
||||
|
||||
<!-- Resume Area Start -->
|
||||
<div class="resume-wrapper" id="resume">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
My <span class="color">Resume</span>
|
||||
<span class="bg-text">Resume</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Education
|
||||
</h4>
|
||||
</div>
|
||||
<div class="education-list">
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2006-2008</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato University
|
||||
</h4>
|
||||
<p class="degree">MSC in Computer Engineer </p>
|
||||
</div>
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2003-205</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato University
|
||||
</h4>
|
||||
<p class="degree">BSC in Computer Engineer </p>
|
||||
</div>
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2000-2002</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato University
|
||||
</h4>
|
||||
<p class="degree">HSC in Computer Engineer </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Experience
|
||||
</h4>
|
||||
</div>
|
||||
<div class="education-list">
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2014-2018</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato Company
|
||||
</h4>
|
||||
<p class="degree">Full Stack Web Developer</p>
|
||||
</div>
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2011-2014</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato Company
|
||||
</h4>
|
||||
<p class="degree">Web Developer</p>
|
||||
</div>
|
||||
<div class="single-education wow fadeInUp">
|
||||
<div class="year">
|
||||
<span>2009-2011</span>
|
||||
</div>
|
||||
<h4 class="university-name">
|
||||
Envato Company
|
||||
</h4>
|
||||
<p class="degree"> Web Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Coding Skills
|
||||
</h4>
|
||||
</div>
|
||||
<div class="skill-list">
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
HTML
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
JS
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
PHP
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
JAVA
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Language Skills
|
||||
</h4>
|
||||
</div>
|
||||
<div class="skill-list">
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
English
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
Hindi
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
Spanis
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-skill wow fadeInUp">
|
||||
<div class="heading">
|
||||
<h4 class="name">
|
||||
Arabic
|
||||
</h4>
|
||||
<h5 class="value">
|
||||
75%
|
||||
</h5>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Professional Skills
|
||||
</h4>
|
||||
</div>
|
||||
<div class="skill-list2">
|
||||
<div class="single-skill2 wow fadeInUp">
|
||||
<div class="circle-progress" data-percent="80"></div>
|
||||
<h4 class="name">
|
||||
Web Design
|
||||
</h4>
|
||||
</div>
|
||||
<div class="single-skill2 wow fadeInUp">
|
||||
<div class="circle-progress" data-percent="90"></div>
|
||||
<h4 class="name">
|
||||
Web Devlopment
|
||||
</h4>
|
||||
</div>
|
||||
<div class="single-skill2 wow fadeInUp">
|
||||
<div class="circle-progress" data-percent="70"></div>
|
||||
<h4 class="name">
|
||||
Graphic Design
|
||||
</h4>
|
||||
</div>
|
||||
<div class="single-skill2 wow fadeInUp">
|
||||
<div class="circle-progress" data-percent="85"></div>
|
||||
<h4 class="name">
|
||||
Auto CAD
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="resume-box">
|
||||
<div class="resume-title">
|
||||
<h4 class="title">
|
||||
Knowledge
|
||||
</h4>
|
||||
</div>
|
||||
<div class="knowledge-list wow fadeInUp">
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Search engine marketing
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
iOS and android apps
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Spreadsheets (Excel, Google Spreadsheets, etc.)
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Email Communication
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Presentation software (PowerPoint, Keynote)
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Office suites (Microsoft Office, G Suite)
|
||||
</p>
|
||||
</div>
|
||||
<div class="single-knowledge">
|
||||
<p>
|
||||
Operating systems (Windows and MacOS)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Resume Area End -->
|
||||
|
||||
<!-- My Client Area Area Strat -->
|
||||
|
||||
<!-- My Client Area Area End -->
|
||||
|
||||
|
||||
<!-- Portfolio Area Start -->
|
||||
<div class="project-gallery" id="project-gallery">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
My <span class="color">Portfolio</span>
|
||||
<span class="bg-text">Portfolio</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="project-gallery-filter d-flex justify-content-center">
|
||||
<ul class="project-gallery-menu d-inline-block wow fadeInUp" data-wow-delay="0.3s">
|
||||
<li class="filter active" data-filter="all">All Cetagories</li>
|
||||
<li class="filter" data-filter=".cat-1">Marketing</li>
|
||||
<li class="filter" data-filter=".cat-2">Management</li>
|
||||
<li class="filter" data-filter=".cat-3">Consulting</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="row project-gallery-item">
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-1 cat-3">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/7.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/7.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-3 cat-4">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/1.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/1.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-2 cat-1">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/2.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/2.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-1 cat-3">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/9.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/9.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-3 cat-4">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/5.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/5.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-1 cat-2">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/3.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/3.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-4 cat-2">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/4.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/4.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-3 cat-2">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/6.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/6.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mix col-md-6 col-lg-4 gallery-item cat-3 cat-1">
|
||||
<div class="gallery-item-content wow fadeInUp">
|
||||
<div class="item-thumbnail">
|
||||
<img src="/assets/images/work/8.jpg" alt="">
|
||||
<div class="content-overlay">
|
||||
<div class="content">
|
||||
<div class="links">
|
||||
<a href="portfolio-details.html" class="link"><i class="fas fa-link"></i></a>
|
||||
<a class="img-popup image-preview"
|
||||
href="/assets/images/work/8.jpg">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center">
|
||||
<a href="portfolios.html" class="mybtn3 mybtn-bg wow fadeInUp"><span>View All</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Portfolio Area End -->
|
||||
|
||||
|
||||
<!-- Testimonial Start -->
|
||||
|
||||
<!-- Testimonial End -->
|
||||
|
||||
<!-- Pricing Area Start -->
|
||||
|
||||
<!-- Pricing Area End -->
|
||||
|
||||
<!-- Blog Area Start -->
|
||||
|
||||
<!-- Blog Area End -->
|
||||
|
||||
<!-- Contact Area Start -->
|
||||
<div class="contact" id="contact">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
|
||||
<h2 class="title">
|
||||
Get In <span class="color">Touch</span>
|
||||
<span class="bg-text">Contact</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<!-- Single Info -->
|
||||
<div class="single-info wow fadeInUp">
|
||||
<div class="info-icon">
|
||||
<i class="flaticon-placeholder"></i>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<h5>My Location:</h5>
|
||||
<p>700 Oak Street, Brockton MA 2301</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<!-- Single Info -->
|
||||
<div class="single-info wow fadeInUp">
|
||||
<div class="info-icon">
|
||||
<i class="flaticon-telephone"></i>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<h5>Phone Number:</h5>
|
||||
<p>+0123 123 856</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<!-- Single Info -->
|
||||
<div class="single-info wow fadeInUp">
|
||||
|
||||
<div class="info-icon">
|
||||
<i class="flaticon-email-2"></i>
|
||||
</div>
|
||||
<div class="info-contentr">
|
||||
<h5>Email Address:</h5>
|
||||
<p>demomail@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row cAndm">
|
||||
<div class="col-lg-6">
|
||||
<div class="home-page-form">
|
||||
<div class="contact-form">
|
||||
<form id="contact-form" action="#">
|
||||
<div class="controls">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input id="name" type="text" name="name" class="form-control" placeholder="Name*"
|
||||
required="required" data-error="Name is required.">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input id="email" type="email" name="email" class="form-control" placeholder="Email*"
|
||||
required="required" data-error="Valid email is required.">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<input id="subject" type="text" name="subject" class="form-control" placeholder="Subject*"
|
||||
required="required" data-error="Subject is required.">
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<textarea id="message" name="message" class="form-control" placeholder="Message*" rows="7"
|
||||
required="required" data-error="Please,leave us a message."></textarea>
|
||||
<div class="help-block with-errors"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<button type="submit" class="mybtn3 mybtn-bg"><span>Send Message</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form> <!-- End Contact From -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="google_map_wrapper">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d196281.12937357728!2d-104.99519427659213!3d39.76451867231318!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x876b80aa231f17cf%3A0x118ef4f8278a36d6!2sDenver%2C%20CO%2C%20USA!5e0!3m2!1sen!2sbd!4v1592721407423!5m2!1sen!2sbd"
|
||||
frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/.row-->
|
||||
</div>
|
||||
<!--/.container-->
|
||||
</div>
|
||||
<!-- Contact Area End -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user