<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>HARUN PEHLİVAN PROFİLO WEBSİTE</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">HP IT GROUP GLOBAL PROFESYONEL IT GROUP</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#portfolio">Portfolio</a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b4bb445e906f.jpg" alt="">
<div class="intro-text">
<span class="name">HARUN PEHLİVAN</span>
<hr class="star-light">
<span class="skills">IT (CODER,DESIGNER,DEVELOPER,ADMİNİSTRATOR) FOUNDER CEO BLOGGER INITIATIVE RESEARCH AND DEVELOPMENT</span>
</div>
</div>
</div>
</div>
</header>
<!-- Portfolio Grid Section -->
<section id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Portfolio</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-2x">Türkiye<br>İçin<br>Hava Durumu</i>
</div>
</div>
<img src="http://onepagerapp.com/uploads/gallery_image/81711/medium_2000_5ba2281756d9a.jpg" class="img-responsive" alt="Otis Leader" height=400 width=400 class="img-responsive" style="margin: 0 auto;">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-2x"> HARUN PEHLİVAN<br>IT <br> GROUP</i>
</div>
</div>
<img src="http://onepagerapp.com/uploads/gallery_image/81379/medium_logohpitgroup.png" alt="dehaviland beaver on floats" height=400 width=400 class="img-responsive" style="margin: 0 auto;">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-2x">HP IT
<br>GROUP 2</i>
</div>
</div>
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" class="img-responsive" alt="peru" height=400 width=400 style="margin: 0 auto;">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-2x">HARUN PEHLİVAN<br>Islamic sciences and IT computer science
</i>
</div>
</div>
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.jimdo.com?w=360" class="img-responsive" alt="wizard island crater lake" height=400 width=400 style="margin: 0 auto;">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-2x">TEBİM <br>TEBİTAGEM</i>
</div>
</div>
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.4adim.com?w=360" class="img-responsive" alt="nikola tesla monument" height=400 width=400 style="margin: 0 auto;">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
<i class="fa fa-2x"> TERCUMAN <br>BİLİŞİM MERKEZİ</i>
</div>
</div>
<img src="http://images.ticiz.com/2983370_w0_h120_b47f4647f782be593863fd591c.png" class="img-responsive" alt="arecibo puerto rico" height=400 width=400 style="margin: 0 auto;">
</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p><p style=" margin: 12px auto 6px auto; font-family: Helvetica,Arial,Sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; display: block;" >22/07/1984 Çorum'da dünyaya bebek bakışlarmla sesimle merhaba dedim bir elimden Annem bir elimden Babam tuttu şefkatleriyle beni bu hale getirdiler Allah cc onlardan ebediyen razı olsun aslen Samsun'un Havza ilçesi halen Amasya'nın Suluova ilçesinde ikamet etmekteyim. ilk orta ve lise eğitim ve öğretim hayatıma başlayıp devam ettirip ikame ettiğim yerde tamamladım</p>
</div>
<div class="col-lg-4">
<p>2008 TERCUMAN INFORMATICS CENTER</p>
<p> 2012 TERCUMAN EDUCATION, SCIENCE,TECHNICAL RESEARCH AND DEVELOPMENT CENTER</p>
<p> 2013 TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</p>
<p> 2018 HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Contact Me</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
<!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
<form name="sentMessage" id="contactForm" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d4937.212323738931!2d35.657568!3d40.829449!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x11196fc28c1118f0!2zVEVSQ1VNQU4gQsSwTMSwxZ7EsE0gTUVSS0VaxLAgVEVSQ1VNQU4gRcSexLBUxLBNIELEsEzEsE0gVEVLTsSwSyBBUkHFnlRJUk1BIEdFTMSwxZ5UxLBSTUUgTUVSS0VaxLA!5e1!3m2!1str!2sus!4v1537360559589" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="footer-col col-md-4">
<h3>around the Web</h3>
<ul class="list-inline">
<li>
<a href="https://facebook.com/100008152065270" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
</li>
<li>
<a href="https://plus.google.com/111320383727376607540" class="btn-social btn-outline"><i class="fa fa-fw fa-google-plus"></i></a>
</li>
<li>
<a href="https://www.twitter.com/HTERCUMANP" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
</li>
<li>
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" class="btn-social btn-outline"><i class="fa fa-fw fa-linkedin"></i></a>
</li>
<li>
<a href="https://tr.pinterest.com/harunpehlivanit/" class="btn-social btn-outline"><i class="fa fa-fw fa-pinterest"></i></a>
</li>
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About this Site:</h3>
<p>Shout out to Bootstrap for this theme! Check them out here: <a href="https://startbootstrap.com">Start Bootstrap</a>.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © <a href="http://www.shortcutz.link/harunpehlivan" rel="noopener noreferrer" target="_blank">HARUN PEHLİVAN</a> 2018 <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"><i class="fa fa-globe"></i></a>
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" target="_blank"><i class="fa fa-linkedin"></i></a>
<a href="https://www.xing.com/profile/HARUN_PEHLIVAN" target="_blank"><i class="fa fa-xing"></i></a>
<a href="https://tr.pinterest.com/harunpehlivanit/" target="_blank"><i class="fa fa-pinterest"></i></a>
<a href="http://harunpehlivan.blogspot.com" target="_blank"><i class="fa fa-rss"></i></a>
<div class="clearfix visible-xs-block"></div>
<a href="http://harunpehlivan-blog.tumblr.com/" target="_blank"><i class="fa fa-tumblr"></i></a>
<a href="https://dribbble.com/harunpehlivan" target="_blank"><i class="fa fa-dribbble"></i></a>
<a href="https://www.behance.net/harunpehlivan" target="_blank"><i class="fa fa-behance"></i></a>
<a href="https://github.com/harunpehlivan" target="_blank"><i class="fa fa-github"></i></a>
<a href="https://gitlab.com/harunpehlivan" target="_blank"><i class="fa fa-gitlab"></i></a>
<a href="https://www.freecodecamp.org/harunpehlivan" target='_blank'>
(<i class="fa fa-fire fa-fw"></i>)
</a>
<a href="https://facebook.com/100008152065270" target="_blank"><i class="fa fa-facebook-official"></i></a>
<a href="https://www.instagram.com/harunpehlivantebimtebitagem" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="https://www.youtube.com/user/harunpehlivan1" target="_blank"><i class="fa fa-youtube-play"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top page-scroll hidden-sm hidden-xs hidden-lg hidden-md">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Türkiye İçin Hava Durumu</h2>
<hr class="star-primary">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Faccuweather.glitch.me?w=360" class="img-responsive img-centered" alt="">
<p>Türkiye İçin Hava Durumu
<a href="https://accuweather.glitch.me/"><br>Weather Forecast For Turkey</a>
</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="https://tr.gravatar.com/tebm">Gravatar</a>
</strong>
</li>
<li>Date:
<strong><a href="https://easycard.me/harunpehlivantebimtebitagem/card153">HPIT 2018</a>
</strong>
</li>
<li>Service:
<strong><a href="https://wiseintro.co/harunpehlivan">PERSONELL PAGES</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</h2>
<hr class="star-primary">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360" class="img-responsive img-centered" alt="matt radar technician">
<p>HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP <br><a href="https://harunpehlivantebimtebitagem.site123.me">HP IT GROUP</a></p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="https://evaunt.me/YF1Ely/HARUNPEHL%C4%B0VAN">DİGİTAL BUSİNES CARD</a>
</strong>
</li>
<li>Date:
<strong><a href="https://wiseintro.co/harunpehlivan">PERSONELL PAGES 2018</a>
</strong>
</li>
<li>Service:
<strong><a href="http://www.doyoubuzz.com/harun-pehlivan">E-CV</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP 2</h2>
<hr class="star-primary">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360" alt="matt radar technician">
<p>HP IT GROUP 2
<a href="http://harunpehlivantebimtebitagem.sitem.xyz/"><br>HP IT GROUP's Blog Site </a><br>WEB BUİLD</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="https://wiseintro.co/harunpehlivan">PERSONELL PAGES</a>
</strong>
</li>
<li>Date:
<strong><a href="https://evaunt.me/YF1Ely/HARUNPEHL%C4%B0VAN">DİGİTAL BUSİNES CARD 2018</a>
</strong>
</li>
<li>Service:
<strong><a href="https://easycard.me/harunpehlivantebimtebitagem/card153">HPIT</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>HARUN PEHLİVAN TEBİM/TEBİTAGEM FOUNDER,CEO Islamic sciences and IT computer science</h2>
<hr class="star-primary">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.jimdo.com?w=360" class="img-responsive img-centered" alt="matt radar technician">
<p>HARUN PEHLİVAN TEBİM/TEBİTAGEM FOUNDER,CEO Islamic sciences and IT computer science
<a href="https://harunpehlivan.jimdo.com/"><br>HARUN PEHLİVAN TEBİM/TEBİTAGEM FOUNDER,CEO Islamic sciences and IT computer science</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="https://wiseintro.co/harunpehlivan">PERSONELL PAGES</a>
</strong>
</li>
<li>Date:
<strong><a href="https://evaunt.me/YF1Ely/HARUNPEHL%C4%B0VAN">DİGİTAL BUSİNES CARD 2018</a>
</strong>
</li>
<li>Service:
<strong><a href="https://easycard.me/harunpehlivantebimtebitagem/card153">HPIT</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>HARUN PEHLİVAN TERCUMAN INFORMATICS CENTER TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER</h2>
<hr class="star-primary">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.4adim.com?w=360" class="img-responsive img-centered" alt="matt radar technician">
<p>TERCUMAN INFORMATICS CENTER TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER
<a href="http://harunpehlivantebimtebitagem.4adim.com/"><br>HARUN PEHLİVAN's Blog Site </a><br>TEBİM TEBİTAGEM</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="https://wiseintro.co/harunpehlivan">PERSONELL PAGES</a>
</strong>
</li>
<li>Date:
<strong><a href="https://evaunt.me/YF1Ely/HARUNPEHL%C4%B0VAN">DİGİTAL BUSİNES CARD 2018</a>
</strong>
</li>
<li>Service:
<strong><a href="https://easycard.me/harunpehlivantebimtebitagem/card153">HPIT</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>2008 TEBİM 2012 TEBİTAGEM</h2>
<hr class="star-primary">
<img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebimtebitagem.ticiz.com?w=360" class="img-responsive img-centered" alt="matt radar technician">
<p>TERCUMAN BİLİŞİM MERKEZİ TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ
<a href="http://tebimtebitagem.ticiz.com/"><br>E-COMMERCE's Blog Site </a><br>TERCUMAN INFORMATICS CENTER TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="https://wiseintro.co/harunpehlivan">PERSONELL PAGES</a>
</strong>
</li>
<li>Date:
<strong><a href="https://evaunt.me/YF1Ely/HARUNPEHL%C4%B0VAN">DİGİTAL BUSİNES CARD 2018</a>
</strong>
</li>
<li>Service:
<strong><a href="https://easycard.me/harunpehlivantebimtebitagem/card153">HPIT</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/freelancer.min.js"></script>
</body>
</html>
/*!
* Start Bootstrap - HP IT GROUP (TEBİM TEBİTAGEM) v3.3.7+1 (https://bootsnipp.com/harunpehlivan)
* Copyright 2013-2016 Start Bootstrap
* Licensed under HP IT GROUP (TEBİM TEBİTAGEM) (https://github.com/harunpehlivan)
*/
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"
body {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
}
p {
font-size: 20px;
}
p.small {
font-size: 16px;
}
a,
a:hover,
a:focus,
a:active,
a.active {
color: #18BC9C;
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
}
hr.star-light,
hr.star-primary {
padding: 0;
border: none;
border-top: solid 5px;
text-align: center;
max-width: 250px;
margin: 25px auto 30px;
}
hr.star-light:after,
hr.star-primary:after {
content: "\f005";
font-family: FontAwesome;
display: inline-block;
position: relative;
top: -0.8em;
font-size: 2em;
padding: 0 0.25em;
}
hr.star-light {
border-color: white;
}
hr.star-light:after {
background-color: #18BC9C;
color: white;
}
hr.star-primary {
border-color: #2C3E50;
}
hr.star-primary:after {
background-color: white;
color: #2C3E50;
}
.img-centered {
margin: 0 auto;
}
header {
text-align: center;
background: #18BC9C;
color: white;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
header img {
display: block;
margin: 0 auto 20px;
}
header .intro-text .name {
display: block;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 2em;
}
header .intro-text .skills {
font-size: 1.25em;
font-weight: 300;
}
@media (min-width: 768px) {
header .container {
padding-top: 200px;
padding-bottom: 100px;
}
header .intro-text .name {
font-size: 4.75em;
}
header .intro-text .skills {
font-size: 1.75em;
}
}
.navbar-custom {
background: #2C3E50;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
border: none;
}
.navbar-custom a:focus {
outline: none;
}
.navbar-custom .navbar-brand {
color: white;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-brand:active,
.navbar-custom .navbar-brand.active {
color: white;
}
.navbar-custom .navbar-nav {
letter-spacing: 1px;
}
.navbar-custom .navbar-nav li a {
color: white;
}
.navbar-custom .navbar-nav li a:hover {
color: #18BC9C;
outline: none;
}
.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
color: white;
}
.navbar-custom .navbar-nav li.active a {
color: white;
background: #18BC9C;
}
.navbar-custom .navbar-nav li.active a:hover,
.navbar-custom .navbar-nav li.active a:focus,
.navbar-custom .navbar-nav li.active a:active {
color: white;
background: #18BC9C;
}
.navbar-custom .navbar-toggle {
color: white;
text-transform: uppercase;
font-size: 10px;
border-color: white;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
background-color: #18BC9C;
color: white;
border-color: #18BC9C;
}
@media (min-width: 768px) {
.navbar-custom {
padding: 25px 0;
-webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s;
transition: padding 0.3s;
}
.navbar-custom .navbar-brand {
font-size: 2em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-custom.affix {
padding: 10px 0;
}
.navbar-custom.affix .navbar-brand {
font-size: 1.5em;
}
}
section {
padding: 100px 0;
}
section h2 {
margin: 0;
font-size: 3em;
}
section.success {
background: #18BC9C;
color: white;
}
@media (max-width: 767px) {
section {
padding: 75px 0;
}
section.first {
padding-top: 75px;
}
}
#portfolio .portfolio-item {
margin: 0 0 15px;
right: 0;
}
#portfolio .portfolio-item .portfolio-link {
display: block;
position: relative;
max-width: 400px;
margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .caption {
background: rgba(24, 188, 156, 0.9);
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
}
#portfolio .portfolio-item .portfolio-link .caption:hover {
opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content {
position: absolute;
width: 100%;
height: 20px;
font-size: 20px;
text-align: center;
top: 50%;
margin-top: -12px;
color: white;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
margin: 0;
}
#portfolio * {
z-index: 2;
}
@media (min-width: 767px) {
#portfolio .portfolio-item {
margin: 0 0 30px;
}
}
.floating-label-form-group {
position: relative;
margin-bottom: 0;
padding-bottom: 0.5em;
border-bottom: 1px solid #eeeeee;
}
.floating-label-form-group input,
.floating-label-form-group textarea {
z-index: 1;
position: relative;
padding-right: 0;
padding-left: 0;
border: none;
border-radius: 0;
font-size: 1.5em;
background: none;
box-shadow: none !important;
resize: none;
}
.floating-label-form-group label {
display: block;
z-index: 0;
position: relative;
top: 2em;
margin: 0;
font-size: 0.85em;
line-height: 1.764705882em;
vertical-align: middle;
vertical-align: baseline;
opacity: 0;
-webkit-transition: top 0.3s ease,opacity 0.3s ease;
-moz-transition: top 0.3s ease,opacity 0.3s ease;
-ms-transition: top 0.3s ease,opacity 0.3s ease;
transition: top 0.3s ease,opacity 0.3s ease;
}
.floating-label-form-group:not(:first-child) {
padding-left: 14px;
border-left: 1px solid #eeeeee;
}
.floating-label-form-group-with-value label {
top: 0;
opacity: 1;
}
.floating-label-form-group-with-focus label {
color: #18BC9C;
}
form .row:first-child .floating-label-form-group {
border-top: 1px solid #eeeeee;
}
footer {
color: white;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2C3E50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
.btn-outline {
color: white;
font-size: 20px;
border: solid 2px white;
background: transparent;
transition: all 0.3s ease-in-out;
margin-top: 15px;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
color: #18BC9C;
background: white;
border: solid 2px white;
}
.btn-primary {
color: white;
background-color: #2C3E50;
border-color: #2C3E50;
font-weight: 700;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
color: white;
background-color: #1a242f;
border-color: #161f29;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
background-color: #2C3E50;
border-color: #2C3E50;
}
.btn-primary .badge {
color: #2C3E50;
background-color: white;
}
.btn-success {
color: white;
background-color: #18BC9C;
border-color: #18BC9C;
font-weight: 700;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
color: white;
background-color: #128f76;
border-color: #11866f;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
background-color: #18BC9C;
border-color: #18BC9C;
}
.btn-success .badge {
color: #18BC9C;
background-color: white;
}
.btn-social {
display: inline-block;
height: 50px;
width: 50px;
border: 2px solid white;
border-radius: 100%;
text-align: center;
font-size: 20px;
line-height: 45px;
}
.btn:focus,
.btn:active,
.btn.active {
outline: none;
}
.scroll-top {
position: fixed;
right: 2%;
bottom: 2%;
width: 50px;
height: 50px;
z-index: 1049;
}
.scroll-top .btn {
font-size: 20px;
width: 50px;
height: 50px;
border-radius: 100%;
line-height: 28px;
}
.scroll-top .btn:focus {
outline: none;
}
.portfolio-modal .modal-content {
border-radius: 0;
background-clip: border-box;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
min-height: 100%;
padding: 100px 0;
text-align: center;
}
.portfolio-modal .modal-content h2 {
margin: 0;
font-size: 3em;
}
.portfolio-modal .modal-content img {
margin-bottom: 30px;
}
.portfolio-modal .modal-content .item-details {
margin: 30px 0;
}
.portfolio-modal .close-modal {
position: absolute;
width: 75px;
height: 75px;
background-color: transparent;
top: 25px;
right: 25px;
cursor: pointer;
}
.portfolio-modal .close-modal:hover {
opacity: 0.3;
}
.portfolio-modal .close-modal .lr {
height: 75px;
width: 1px;
margin-left: 35px;
background-color: #2C3E50;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
z-index: 1051;
}
.portfolio-modal .close-modal .lr .rl {
height: 75px;
width: 1px;
background-color: #2C3E50;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari and Chrome */
z-index: 1052;
}
.portfolio-modal .modal-backdrop {
opacity: 0;
display: none;
}
// HP IT GROUP (TEBİM TEBİTAGEM) Theme JavaScript
(function($) {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 50)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
// Offset for Main Navigation
$('#mainNav').affix({
offset: {
top: 100
}
})
// Floating label headings for the contact form
$(function() {
$("body").on("input propertychange", ".floating-label-form-group", function(e) {
$(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
}).on("focus", ".floating-label-form-group", function() {
$(this).addClass("floating-label-form-group-with-focus");
}).on("blur", ".floating-label-form-group", function() {
$(this).removeClass("floating-label-form-group-with-focus");
});
});
})(jQuery); // End of use strict
