<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 ---------->
<!-- HEADER -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ">
<div class="container justify-content-lg-between justify-content-center align-content-center">
<!-- remove onclick attribute to activate -->
<a class="navbar-brand mr-0 mb-1 mb-lg-0" href="#" onclick="return false;">
HARUN PEHLİVAN
</a>
<div class="navbar-expand mb-1" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about">CV</a>
</li>
<li class="nav-item ml-2 ml-sm-4">
<a class="nav-link" href="#portfolio">PROJECT</a>
</li>
<li class="nav-item ml-2 ml-md-4">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
<div class="shadow"></div>
</nav>
<!-- 3D CUBE EFFECT -->
<div class="cube"><div class="black-outline"></div></div>
<!-- MAIN SECTION WITH CARDS -->
<main class="content">
<!-- ABOUT -->
<div id="about" class="card">
<div class="card-body">
<h5 class="card-title"><span>
HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP
</span></h5>
<img class="photo mb-5" src="https://cdn-cms.f-static.com/uploads/1017556/400_5c46c25028340.png" alt="
HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP
">
<p class="card-text"> <iframe class="scribd_iframe_embed" title="IT CV" src="https://www.scribd.com/embeds/400019245/content?start_page=1&view_mode=scroll&show_recommendations=false&access_key=key-1JClzDpo3RZxKizHYwMD" width="100%" height="600" frameborder="0" scrolling="no" data-auto-height="true" data-aspect-ratio="null"></iframe> </p>
</div>
</div>
<!-- PORTFOLIO -->
<div id="portfolio" class="portfolio card" >
<div class="card-body">
<h5 class="card-title align-self-center"><span>PROJECT</span></h5>
<h6 class="card-subtitle mb-5">"Gündem belirlemek güncel global olmak için yeni fikirlerle yetenek ve beceriyle uzmanlıkla eğitimle bilimle teknikle AR-GE proje ile adımızla markamızla kimliğimizle profilimizle kalitemizle standardımızla konseptimizle ilkemizle etiğimizle ama özümüzden taviz vermeden"</h6>
<iframe height="1015" style="width: 100%;" scrolling="no" title="newtvfm" src="//codepen.io/harunpehlivan/embed/ZVVEeO/?height=1015&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/harunpehlivan/pen/ZVVEeO/'>newtvfm</a> by HARUN PEHLİVAN
(<a href='https://codepen.io/harunpehlivan'>@harunpehlivan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
<iframe height="714" style="width: 100%;" scrolling="no" title="Penfolio - Portfolio based on your Codepen profile" src="//codepen.io/harunpehlivan/embed/aYLNWa/?height=714&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/harunpehlivan/pen/aYLNWa/'>Penfolio - Portfolio based on your Codepen profile</a> by HARUN PEHLİVAN
(<a href='https://codepen.io/harunpehlivan'>@harunpehlivan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe><iframe height="1088" style="width: 100%;" scrolling="no" title="Free Code Camp: Build a Tribute Page" src="//codepen.io/harunpehlivan/embed/BvodLr/?height=1088&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/harunpehlivan/pen/BvodLr/'>Free Code Camp: Build a Tribute Page</a> by HARUN PEHLİVAN
(<a href='https://codepen.io/harunpehlivan'>@harunpehlivan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
<div class="codepen" data-height="627" data-theme-id="light" data-default-tab="result" data-user="harunpehlivan" data-slug-hash="vbQQVK" data-prefill='{"title":" İNTERNET YAYINLARIMIZ","tags":[],"stylesheets":["https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"],"scripts":["https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"]}'>
<pre data-lang="html"><body class="bg-light py-5">
<div class="container">
<div class="row">
<h4 class="text-muted">
Computer version
</h4>
</div>
</div>
<div class="desktop-wrapper pb-5">
<div class="container">
<div class="row">
<div class="options">
<div class="option active">
<div>
<div class="info-wrapper">
<h2 class="title">TTGRT</h2>
<p class="subtitle">TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</p>
<div class="description">
<p>7/24 LİVE ONLİNE</p>
<a class="ext-link" href="http://harunpehlivan.fm.tc/" target="_blank" title="GÖNLÜNÜ BU RADYOYA KAPTIRACAKSIN">GÖNLÜNÜ BU RADYOYA KAPTIRACAKSIN</a>
</div>
</div>
<div class="icon-wrapper sb">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN
IT FOUNDER CEO BLOGGER INITIATIVE AR-GE </div>
</div>
</div>
</div>
<div class="option">
<div>
<div class="info-wrapper">
<h2 class="title">TEBİTAGEM</h2>
<p class="subtitle">TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ</p>
<div class="description">
<p></p>
<a class="ext-link" href="https://harunpehlivantebimtebitagem.business.site/" target="_blank" title="TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER">TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ</a>
</div>
</div>
<div class="icon-wrapper ce">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN
IT FOUNDER CEO BLOGGER INITIATIVE AR-GE </div>
</div>
</div>
</div>
<div class="option">
<div>
<div class="info-wrapper">
<h2 class="title">HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</h2>
<p class="subtitle">GLOBAL PROFESYONEL IT GROUP</p>
<div class="description">
<p> </p>
<a class="ext-link" href="https://harunpehlivantebimtebitagem.site123.me/" target="_blank" title="HP IT GROUP">HP IT GROUP</a>
</div>
</div>
<div class="icon-wrapper sb">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN
IT FOUNDER CEO BLOGGER INITIATIVE AR-GE </div>
</div>
</div>
</div>
<div class="option">
<div>
<div class="info-wrapper">
<h2 class="title">HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</h2>
<p class="subtitle">GLOBAL PROFESYONEL IT GROUP</p>
<div class="description">
<p></p>
<a class="ext-link" href="https://harunpehlivantebimtebitagem.sitem.xyz/" target="_blank" title="HP IT GROUP">HP IT GROUP</a>
</div>
</div>
<div class="icon-wrapper ce">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN
IT FOUNDER CEO BLOGGER INITIATIVE AR-GE </div>
</div>
</div>
</div>
<div class="option">
<div>
<div class="info-wrapper">
<h2 class="title">FONDER CEO BLOGGER E-CV</h2>
<p class="subtitle">E-CV</p>
<div class="description">
<p></p>
<a class="ext-link" href="https://harunpehlivantebimtebitagem.carrd.co/" target="_blank" title="E-CV">E-CV</a>
</div>
</div>
<div class="icon-wrapper sb">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN
IT FOUNDER CEO BLOGGER INITIATIVE AR-GE</div>
</div>
</div>
</div>
<div class="option">
<div>
<div class="info-wrapper">
<h2 class="title">HARUN PEHLİVAN TEBİM/TEBİTAGEM FOUNDER,CEO </h2>
<p Islamic sciences and IT computer science</p>
<div class="description">
<p></p>
<a class="ext-link" href="https://harunpehlivan.jimdo.com/" target="_blank" title="Islamic sciences and IT computer science">Islamic sciences and IT computer science</a>
</div>
</div>
<div class="icon-wrapper ce">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN
IT FOUNDER CEO BLOGGER INITIATIVE AR-GE </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h4 class="text-muted">Mobile version</h4>
</div>
</div>
<div class="mobile-wrapper pb-5">
<div class="container">
<div class="row">
<div class="options">
<div class="option active">
<div>
<div class="info-wrapper">
<h2 class="title">TTGRT</h2>
<p class="subtitle">TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</p>
<div class="description">
<p>7/24 LİVE ONLİNE</p>
<a class="ext-link" href="http://harunpehlivan.fm.tc/" target="_blank" title=" GÖNLÜNÜ BU RADYOYA KAPTIRACAKSIN "> GÖNLÜNÜ BU RADYOYA KAPTIRACAKSIN </a>
</div>
</div>
<div class="icon-wrapper sb">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN
IT FOUNDER CEO BLOGGER INITIATIVE AR-GE
</div>
</div>
</div>
</div>
<div class="option">
<div>
<div class="info-wrapper">
<h2 class="title">TEBİTAGEM</h2>
<p class="subtitle">TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ</p>
<div class="description">
<p></p>
<a class="ext-link" href="https://harunpehlivantebimtebitagem.business.site/" target="_blank" title="TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER">TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ</a>
</div>
</div>
<div class="icon-wrapper ce">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN
IT FOUNDER CEO BLOGGER INITIATIVE AR-GE </div>
</div>
</div>
</div>
<div class="option">
<div>
<div class="info-wrapper">
<h2 class="title">HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</h2>
<p class="subtitle">GLOBAL PROFESYONEL IT GROUP</p>
<div class="description">
<p></p>
<a class="ext-link" href="https://harunpehlivantebimtebitagem.site123.me/" target="_blank" title=" HP IT GROUP "> HP IT GROUP </a>
</div>
</div>
<div class="icon-wrapper sb">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN IT FOUNDER CEO BLOGGER INITIATIVE AR-GE </div>
</div>
</div>
</div>
<div class="option">
<div>
<div class="info-wrapper">
<h2 class="title">HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</h2>
<p class="subtitle">GLOBAL PROFESYONEL IT GROUP</p>
<div class="description">
<p></p>
<a class="ext-link" href="https://harunpehlivantebimtebitagem.sitem.xyz/" target="_blank" title=" HP IT GROUP "> HP IT GROUP </a>
</div>
</div>
<div class="icon-wrapper ce">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN IT FOUNDER CEO BLOGGER INITIATIVE AR-GE </div>
</div>
</div>
</div>
<div class="option">
<div>
<div class="info-wrapper">
<h2 class="title">FONDER CEO BLOGGER E-CV</h2>
<p class="subtitle">E-CV</p>
<div class="description">
<p></p>
<a class="ext-link" href="https://harunpehlivantebimtebitagem.carrd.co/" target="_blank" title=" E-CV "> E-CV </a>
</div>
</div>
<div class="icon-wrapper sb">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN IT FOUNDER CEO BLOGGER INITIATIVE AR-GE </div>
</div>
</div>
</div>
<div class="option">
<div>
<div class="info-wrapper">
<h2 class="title">HARUN PEHLİVAN TEBİM/TEBİTAGEM FOUNDER,CEO </h2>
<p class="subtitle"> Islamic sciences and IT computer science </p>
<div class="description">
<p></p>
<a class="ext-link" href="https://harunpehlivan.jimdo.com/" target="_blank" title=" Islamic sciences and IT computer science "> Islamic sciences and IT computer science </a>
</div>
</div>
<div class="icon-wrapper ce">
<div class="category-icon"></div>
<div class="category-text">
HARUN PEHLİVAN IT FOUNDER CEO BLOGGER INITIATIVE AR-GE </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body></pre>
<pre data-lang="scss" >@import "bourbon";
$font-size-base: 1rem;
$font-size-h2: 1.953rem;
$font-size-h3: 1.5rem;
$font-size-h4: 1.25rem;
//colors
$blue: #0DAFE0;
$orange: invert($blue);
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
h1, h2, h3, h4, h5, h6 {
margin-bottom: .5rem;
font-family: inherit;
font-weight: 500;
}
body {
.desktop-wrapper {
display:flex;
justify-content:center;
overflow:hidden;
.options {
display:flex;
flex-direction:row;
align-items:stretch;
overflow:hidden;
min-width:600px;
width: 100%;
height:400px;
.option {
position: relative;
overflow: hidden;
min-width: 80px;
background-size: 750px auto;
background-repeat: no-repeat;
cursor: pointer;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
color: $white;
&.active {
flex-grow: 10000;
@include transition-property(all);
@include transition-duration(.4s);
@include transition-timing-function(ease-out);
> div {
z-index: 1;
.info-wrapper {
z-index: 999;
.title {
font-size: $font-size-h2;
text-transform: uppercase;
line-height: 1;
opacity: 1;
position: relative;
margin: 0 0 .5rem;
@include transition-property(opacity);
@include transition-duration(.2s);
@include transition-timing-function(ease-out);
@include transition-delay(.2s);
}
.subtitle {
color: white;
font-size: .9rem;
letter-spacing: .035rem;
line-height: 1.125;
margin: 0;
@include transition-property(opacity);
@include transition-duration(.3s);
@include transition-timing-function(ease-out);
@include transition-delay(.5s);
}
.description {
left:0px;
opacity: 1;
margin-top: 1.5rem;
@include transition-property(opacity);
@include transition-duration(.3s);
@include transition-timing-function(ease-out);
@include transition-delay(.6s);
p {
line-height: 1.5;
margin-bottom: 1.5rem;
}
}
.ext-link {
text-decoration: none;
width: 6rem;
color: $gray-200;
text-shadow: 1px 2px 4px rgba($gray-900, .5);
box-shadow: 2px 2px 4px rgba($gray-900, .3);
background: rgba($white, 0.1);
padding: .35rem .75rem;
position: relative;
overflow: hidden;
transition: all 0.2s linear 0s;
&:after {
position: absolute;
transition: .3s;
content: '';
width: 0;
left: 0;
bottom: 0;
height: .15rem;
background: rgba($white, 0.2);
}
&:hover {
text-shadow: none;
box-shadow: 3px 3px 8px rgba($gray-900, .6);
background: rgba($white, 0.15);
color: $white;
&:after {
left: 0;
width: 100%;
}
}
}
}
&:before {
content: "";
position: absolute;
height: 100%;
width: 101%;
top: 0;
left: 0;
z-index: 1;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 30%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 30%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 30%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
@include transition-property(all);
@include transition-duration(.2s);
}
.icon-wrapper {
display:flex;
align-items: flex-start;
align-content: baseline;
.category-text {
opacity: 1;
display: initial;
@include transition-property(all);
@include transition-duration(.2s);
}
.category-icon {
&:before {
opacity: 1;
}
}
}
}
}
&:not(.active) {
flex-grow:1;
filter: grayscale(70%);
&:hover {
filter: grayscale(0%);
> div:before {
background: rgba(darken($blue, 40%), 0.5);
}
}
> div {
.title, .subtitle, .description {
opacity: 0;
}
.icon-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
flex-direction: column;
align-items: center;
padding-bottom: 1rem;
.category-icon {
&:before {
opacity: .5;
}
}
}
&:before {
background: rgba($gray-800, 0.6);
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
@include transition-property(all);
@include transition-duration(.2s);
}
}
}
> div {
height: 100%;
width: 100%;
display:flex;
flex-direction: column;
justify-content: space-between;
padding: 1rem;
position: absolute;
top: 0;
left: 0;
transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
.icon-wrapper {
.category-text {
line-height: 40px;
padding-left: .75rem;
opacity: 0;
display: none;
}
.category-icon {
display: flex;
align-items: flex-start;
width: 40px;
height: 40px;
border-radius: 100%;
position: relative;
box-shadow: 0 2px 9px rgba($gray-900, .4);
&:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-repeat: no-repeat;
-webkit-mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
background-color: $white;
height: 20px;
width: 21px;
}
}
&.sb {
.category-icon {
background-color: $blue;
}
}
&.ce {
.category-icon {
background-color: $orange;
}
}
}
}
}
}
}
}
// Add background images
.options {
> :nth-child(1) {
background-color: darken(desaturate(adjust-hue($blue, 44), 72.11), 8.24);
background-image: url("https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.fm.tc?w=360");
background-position: center center;
background-size: cover;
}
> :nth-child(2) {
background-color: darken(desaturate(adjust-hue($blue, -180), 51.45), 15.69);
background-image: url("https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.business.site?w=360");
background-position: center center;
background-size: cover;
}
> :nth-child(3) {
background-color: darken(desaturate(adjust-hue($blue, -136), 55.70), 31.76);
background-image: url("https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360");
background-position: center center;
background-size: cover;
}
> :nth-child(4) {
background-color: lighten(desaturate(adjust-hue($blue, 17), 37.63), 11.57);
background-image: url("https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.sitem.xyz?w=360");
background-position: center center;
background-size: cover;
}
> :nth-child(5) {
background: $gray-200;
background-image: url("https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.carrd.co?w=360");
background-position: center center;
background-size: cover;
}
> :nth-child(6) {
background-color: darken(desaturate(adjust-hue($blue, 10), 33.77), 31.57);
background-image: url("https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.jimdo.com?w=360");
background-position: center center;
background-size: cover;
}
}
.mobile-wrapper {
height: initial;
max-width: 320px;
margin: 0 auto;
.options {
position: relative;
height: auto;
max-width: none !important;
flex-basis: 100% !important;
.option {
position: relative;
overflow: hidden;
background-size:auto 120%;
background-position:center;
transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
color: $white;
> div {
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%;
padding: 2rem 1rem 1rem;
top: 0;
left: 0;
transition:.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
.info-wrapper {
z-index: 999;
.title {
font-size: $font-size-h3;
text-shadow: 1px 2px 4px rgba($gray-900, .5);
text-transform: uppercase;
line-height: 1;
opacity: 1;
position: relative;
margin: 0 0 .5rem;
@include transition-property(opacity);
@include transition-duration(.2s);
@include transition-timing-function(ease-out);
@include transition-delay(.2s);
}
.subtitle {
color: white;
font-size: .8rem;
letter-spacing: .06rem;
line-height: 1.125;
margin: 0;
@include transition-property(opacity);
@include transition-duration(.3s);
@include transition-timing-function(ease-out);
@include transition-delay(.5s);
}
.description {
left:0px;
opacity: 1;
margin-top: 1.5rem;
@include transition-property(opacity);
@include transition-duration(.3s);
@include transition-timing-function(ease-out);
@include transition-delay(.6s);
p {
line-height: 1.5;
margin-bottom: 1.5rem;
}
}
.ext-link {
text-decoration: none;
width: 6rem;
color: $gray-200;
text-shadow: 1px 2px 4px rgba($gray-900, .5);
box-shadow: 2px 2px 4px rgba($gray-900, .3);
background: rgba($white, 0.1);
padding: .35rem .75rem;
position: relative;
overflow: hidden;
transition: all 0.2s linear 0s;
&:after {
position: absolute;
transition: .3s;
content: '';
width: 0;
left: 0;
bottom: 0;
height: .15rem;
background: rgba($white, 0.2);
}
&:hover {
text-shadow: none;
box-shadow: 3px 3px 8px rgba($gray-900, .6);
background: rgba($white, 0.15);
color: $white;
&:after {
left: 0;
width: 100%;
}
}
}
}
.icon-wrapper {
width: 100%;
display: flex;
align-items: center;
padding: 2rem 0 0;
z-index: 999;
opacity: 0.8;
.category-text {
line-height: 40px;
padding-left: .75rem;
}
.category-icon {
display: flex;
align-items: flex-start;
width: 32px;
height: 32px;
border-radius: 100%;
position: relative;
box-shadow: 0 2px 9px rgba($gray-900, .4);
&:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-repeat: no-repeat;
-webkit-mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
background-color: $white;
height: 16px;
width: 16px;
}
}
&.sb {
.category-icon {
background-color: $blue;
}
}
&.ce {
.category-icon {
background-color: $orange;
}
}
}
&:before {
content: "";
position: absolute;
height: 100%;
width: 101%;
top: 0;
left: 0;
z-index: 1;
background: rgba($gray-800, 0.7);
@include transition-property(all);
@include transition-duration(.2s);
}
}
}
}
}
// Center screen version titles
.container .row h4:first-of-type {
text-align: center;
margin: 0 auto;
padding-bottom: 1rem;
}</pre>
<pre data-lang="js">$(".desktop-wrapper .option").click(function(){
$(".option").removeClass("active");
$(this).addClass("active");
});</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<div class="codepen" data-height="740" data-theme-id="light" data-default-tab="result" data-user="harunpehlivan" data-slug-hash="yZmRKv" data-prefill='{"title":"Browser Embedded in Mobile Phone","description":"Display any web page inside the phone. ","tags":["phone","browser embed","nexus","reddit"],"stylesheets":[],"scripts":[]}'>
<pre data-lang="html"><div id="wrapper">
<div id="PhoneHolder">
<div id="info">
<div id="appIcon"></div>
<h1>HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP</h1>
<p class="appdesc">GLOBAL PROFESYONEL IT GROUP</p>
<div id="download" onClick="window.open('https://harunpehlivantebimtebitagem.carrd.co')">E-CV</div>
<div id="desktop" onClick="window.open('https://harunpehlivantebimtebitagem.site123.me')">HP IT GROUP</div>
</div>
<div id="phone">
<div id="PhoneContent">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d4874.317899232702!2d35.657568!3d40.829449!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x11196fc28c1118f0!2zVEVSQ1VNQU4gQsSwTMSwxZ7EsE0gTUVSS0VaxLAgVEVSQ1VNQU4gRcSexLBUxLBNIELEsEzEsE0gVEVLTsSwSyBBUkHFnlRJUk1BIEdFTMSwxZ5UxLBSTUUgTUVSS0VaxLA!5e1!3m2!1str!2sus!4v1545775048339" width="270" height="240" frameborder="0" style="border:0" allowfullscreen></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!4v1545775392916!6m8!1m7!1s_35aUW3xmI21YrK9ORdzbA!2m2!1d40.82947259615927!2d35.65739945801781!3f57.57!4f-0.39000000000000057!5f1.3946584482860697" width="270" height="230" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div><!--End Phone-->
<div id="tryout"></div>
</div><!--End PhoneHolder-->
</div><!--End Wrapper--></pre>
<pre data-lang="css" >@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');
* {
margin: 0;
box-sizing: border-box;
}
html, body {
height:100%;
font-family: 'Roboto',sans-serif;
overflow:hidden;
background: #EEE;
}
.appdesc{
color: #888;
font-size:.7em;
margin-top: -4px;
}
#wrapper{
height: 240px;
width: 100%;
background-image: url('https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivantebimtebitagem.site123.me?w=360');
background-size: 640px 360px;
background-position: center;
}
#PhoneHolder{
height: 700px;
width: 800px;
margin: -10px auto;
}
#phone{
width: 100%;
height: 100%;
background-image: url('http://michaeltruong.ca/images/phone.png');
background-repeat: repeat-y;
background-position: -14px -30px;
}
#PhoneContent{
position: relative;
top: 106px;
left: 72px;
width: 272px;
height: 472px;
background: black;
}
.frame{
background: black;
width: 356px;
height: 611px;
border: 0;
-ms-transform: scale(0.769);
-moz-transform: scale(0.769);
-o-transform: scale(0.769);
-webkit-transform: scale(0.769);
transform: scale(0.769);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
#info{
width: 400px;
height: 100px;
float: right;
margin-right: 20px;
margin-top: 50px;
padding: 15px;
border-radius: 4px;
cursor: pointer;
}
#download, #desktop{
margin-top: 24px;
margin-left: -85px;
margin-right: 93px;
border: 2px solid #FFF;
color: #FFF;
float: left;
border-radius: 2px;
padding: 8px 10px;
font-size: .8em;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
-webkit-transition: .2s;
-moz-transition: .2s;
-ms-transition: .2s;
-o-transition: .2s;
transition: .2s;
}
#desktop{
margin-right: 0px;
background: #FFF;
color: #3F516B;
font-weight: 500;
}
#download:hover{
font-weight: 500;
background: #FFF;
color: #3F516B;
}
#desktop:hover{
background: transparent;
color: #FFF;
}
#info h1{
font-size: 1em;
margin-bottom: 5px;
color: #FFF;
letter-spacing: 0.03em;
font-weight: 500;
}
#info p{
color: #EEE;
letter-spacing: 0.03em;
line-height: 1.3em;
font-weight: 400;
}
#appIcon{
width: 70px;
height: 70px;
float: left;
display: inline;
background-image: url('https://cdn-cms.f-static.com/uploads/1017556/400_5c46c25028340.png');
background-size: 75px 75px;
background-position: right -0px bottom -0px;
border-radius: 2px;
margin-right: 15px;
margin-bottom: 150px;
}
#tryout{
width: 200px;
height: 130px;
position: relative;
float: right;
top: -390px;
left: -180px;
background-image: url('http://michaeltruong.ca/images/tryout.png');
background-size: 100%;
}
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<div class="codepen" data-height="786" data-theme-id="light" data-default-tab="result" data-user="harunpehlivan" data-slug-hash="OdGazG" data-prefill='{"title":"Profile Page","tags":[],"stylesheets":[],"scripts":["//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"]}'>
<pre data-lang="html"><div id="mainwrap">
<header>
<h1><a href="https://www.doyoubuzz.com/harun-pehlivan">HARUN PEHLİVAN</a></h1>
<h2>INFORMATION TECHNOLOGY FOUNDER CEO BLOGGER INITIATIVE RESEARCH AND DEVELOPMENT</h2>
<ul id="menu">
<li><a class="profile" href="#profile" title="Profile">Profile</a><span>Some information about me</span></li>
<li><a class="resume" href="#resume" title="Resume">Resume</a><span>Professional information</span></li>
<li><a class="contact" href="#contact" title="Contact">Contact</a><span>Get in touch</span></li>
</ul>
</header>
<div style="clear:both"></div>
<div id="content">
<div id="profile" class="section">
<div class="column col3">
<table id="bioinfo">
<tbody>
<tr>
<td class="odd">Name</td>
<td class="even">HARUN PEHLİVAN</td>
</tr>
<tr>
<td class="odd">Date of birth</td>
<td class="even">22.07.1984</td>
</tr>
<tr>
<td class="odd">Address</td>
<td class="even">SULUOVA AMASYA</td>
</tr>
<tr>
<td class="odd">Languages</td>
<td class="even">English, Arabic</td>
</tr>
<tr>
<td class="odd">Website</td>
<td class="even">harunpehlivan.fm.tc</td>
</tr>
<tr>
<td class="odd">Email</td>
<td class="even">trcmnhp@hotmail.com</td>
</tr>
</tbody>
</table>
<ul class="social">
<li><a href="https://plus.google.com/111320383727376607540" class="111320383727376607540"><img src="http://andreasviklund.com/files/demo/cv-template-tpy/img/icons/gplus.png" alt="Google Plus" /></a></li>
<li><a href="https://facebook.com/100008152065270" class="100008152065270"><img src="http://andreasviklund.com/files/demo/cv-template-tpy/img/icons/facebook.png" alt="Facebook" /></a></li>
<li><a href="https://www.twitter.com/HTERCUMANP" class="HTERCUMANP"><img src="http://andreasviklund.com/files/demo/cv-template-tpy/img/icons/twitter.png" alt="Twitter" /></a></li>
<li><a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" class="harun-pehlivan-0aa34252"><img src="http://andreasviklund.com/files/demo/cv-template-tpy/img/icons/linkedin.png" alt="Linkedin" /></a></li>
<li><a href="https://flickr.com/harunpehlivan" class="harunpehlivan"><img src="http://andreasviklund.com/files/demo/cv-template-tpy/img/icons/flickr.png" alt="flickr" /></a></li>
</ul>
</div>
<div class="column col5 pl-50">
<img src="https://avatars2.githubusercontent.com/u/4306341?s=460&v=4" alt="HARUN PEHLİVAN" />
<p></p>
</div>
</div>
<div id="resume" class="section">
<table id="cv">
<tbody>
<tr>
<td class="col2"><div class="date"> </div></td>
<td class="col6 pl-30">
<p class="company">FCC-WebPortfolio</p>
<p class="title"></p>
<p class="description"><a href="https://fcc-webportfolio.glitch.me" rel="nofollow" class="url">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Ffcc-webportfolio.glitch.me?w=360" alt="Screenshot" width="180">
</p>
</td>
</tr>
<tr>
<td class="col2"><div class="date"></span></td>
<td class="col6 pl-30">
<p class="company"></p>
<p class="title"></p>
<p class="description"></p>
</td>
</tr>
<tr>
<td class="col2"><div class="date"></span></td>
<td class="col6 pl-30">
<p class="company"></p>
<p class="title"></p>
<p class="description"></p>
</td>
</tr>
</tbody>
</table>
</div>
<div id="contact" class="section">
<div class="column col3">
<h3>HARUN PEHLİVAN</h3>
<p>SULUOVA AMASYA</p>
<p>Web:harunpehlivan.fm.tc<br />
E-mail: trcmnhp@hotmail.com</p>
</div>
<div class="column col5 pl-50">
<h3>Send a message</h3>
<form id="contactform">
<p class="column col4"><label for="name">Name:</label><input type="text" name="name" id="name" /></p>
<p class="column col4"><label for="email">E-mail:</label><input type="text" name="email" id="email" /></p>
<p class="column col8"><label for="message">Message:</label><textarea rows="5" name="message" id="message"></textarea></p>
<p class="column col8"><input class="button" type="button" value="Submit" /></p>
</form>
</div>
</div>
</div>
<div id="footer">
© 2023 HARUN PEHLİVAN
</div>
</div>
</body></pre>
<pre data-lang="css" >*{
border:0;
font:inherit;
font-size:100%;
vertical-align:baseline;
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font:16px 'PT Sans Narrow', Helvetica, Arial, sans-serif;
font-weight:400;
background-color:#ffffff;
color:#ffffff;
}
ol,ul {
list-style:none;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img {
border:none;
max-width:100%;
}
a img {
border:none;
}
a {
color:#ffffff;
text-decoration:underline;
outline:none;
}
a:hover,a:focus {
color:#333333;
text-decoration:underline;
}
p {
margin:0 0 10px;
}
header h1 {
margin:30px 0 0;
}
header h1 a {
font-size:30px;
text-transform:uppercase;
color:#333333;
text-decoration:none;
}
header h1 a:hover {
color:#00aba9;
text-decoration:none;
}
header h2 {
color:#333;
font-size:22px;
margin:10px 0 0;
}
h3 {
font-size:26px;
font-weight:400;
margin:0 0 20px;
}
/* 8 Column Grid
-----------------------------------------------------------------------------
Span 1: 9.875%
Span 2: 22.75%
Span 3: 35.625%
Span 4: 48.5%
Span 5: 61.375%
Span 6: 74.25%
Span 7: 87.125%
Span 8: 100%
----------------------------------------------------------------------------- */
.column {
margin-left:3%;
padding:0 0%;
float:left;
}
.column:first-child {
margin-left:0;
}
.col1 {
width:9.875%;
}
.col2 {
width:22.75%;
}
.col3 {
width:35.625%;
}
.col4 {
width:48.5%;
}
.col5 {
width:61.375%;
}
.col6 {
width:74.25%;
}
.col7 {
width:87.125%;
}
.col8 {
margin-left:0;
width:100%;
}
.pl-50 {
padding-left:50px;
}
.pl-30 {
padding-left:30px;
}
#mainwrap {
overflow:hidden;
position:relative;
width:840px;
margin:0 auto;
}
#content {
height:400px;
overflow:hidden;
position:relative;
}
#pagecontainer {
position:relative;
width:9999px;
}
.section {
float:left;
height:400px;
margin-right:50px;
position:relative;
width:100%;
padding:30px;
overflow:hidden;
}
#profile {
background-color: #00aba9;
overflow-y:scroll;
}
#resume {
background-color: #76608a;
overflow-y:scroll;
}
#contact {
background-color: #f0a30a;
}
#menu {
margin-top:30px;
overflow:hidden;
}
#menu li {
display:block;
float:left;
width:32.666%;
margin-left:1%;
position:relative;
}
#menu li:first-child {
margin-left:0;
}
#menu li a {
display:block;
height:42px;
line-height:42px;
color:#333;
font-size:18px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
margin-top:20px;
background-color:#e6e6e6;
}
#menu li span {
display:none;
}
#menu li.active span {
display:block;
position:absolute;
bottom:2px;
width:100%;
text-align:center;
line-height:14px;
}
#menu li.active a {
line-height:43px;
height:62px;
margin-top:0;
color:#ffffff;
}
#menu li.active a.profile {
background-color:#00aba9;
}
#menu li.active a.resume {
background-color:#76608a;
}
#menu li.active a.contact {
background-color:#f0a30a;
}
#menu li a:hover {
text-decoration:none;
background-image:none;
}
#menu li.active a {
text-decoration:none;
}
#bioinfo {
width:100%;
border-collapse: collapse;
}
#bioinfo tr td {
padding:5px 10px;
}
#bioinfo .odd {
background: rgba(0,0,0,0.5);
border-right:1px solid #00aba9;
border-bottom:1px solid #00aba9;
}
#bioinfo .even {
background: rgba(0,0,0,0.3);
border-bottom:1px solid #00aba9;
}
.social {
overflow:hidden;
padding:0;
margin:20px 0 0;
}
.social li {
display:block;
float:left;
height:36px;
width:36px;
margin:0 10px 10px 0;
opacity: 0.5
}
#cv {
margin:0;
padding:0;
border-collapse: collapse;
}
#cv .date {
position: relative;
padding: 10px;
color: #ffffff;
background: rgba(0,0,0,0.5);
}
/* creates triangle */
#cv .date:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
right: -10px;
top: 50%;
width: 0;
border-width: 10px 0 10px 10px;
border-style: solid;
border-color: transparent rgba(0,0,0,0.5);
margin-top:-10px;
}
#cv .company {
font-size:28px;
margin:0;
padding:0;
}
#cv .title {
font-size:22px;
margin:0;
padding:0;
}
#cv .description {
font-size:15px;
margin:10px 0 30px;
padding:0;
}
#contactform label {
width:100%;
display:block;
}
#contactform input,
#contactform textarea {
width:100%;
background-color:rgba(0,0,0,0.5);
color:white;
border:none;
padding:5px;
}
#contactform input.button {
background-color:#fa6800;
padding:10px;
width:auto;
float:right;
cursor:pointer;
}
#footer {
color:#999;
text-align:center;
width:100%;
padding-top:20px;
margin-top:-2px;
}
#footer a {
color:#999;
}
@media screen and (max-width:850px) {
#mainwrap {
width:95%;
}
#content,
.section {
height:auto;
}
}
@media screen and (max-width:479px) {
.section {
padding:15px;
}
.column {
margin-left:0 0%;
padding:0 0%;
float:none;
}
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8 {
margin-left:0;
width:100%;
}
#cv .col2 {
width: 22.75% !important;
max-width:100px !important;
}
#cv .col6 {
width: auto !important;
}
#menu li.active span {
display:none;
}
}</pre>
<pre data-lang="js">$(document).ready(function() {
$(".section").not(":first").hide();
$("ul#menu li:first").addClass("active").show();
$("ul#menu li").click(function() {
$("ul#menu li.active").removeClass("active");
$(this).addClass("active");
$(".section").slideUp();
$($('a',this).attr("href")).slideDown('slow');
return false;
});
});</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<div class="codepen" data-height="929" data-theme-id="light" data-default-tab="result" data-user="harunpehlivan" data-slug-hash="JxVBqZ" data-prefill='{"title":"CV","description":"Curriculum Vitae","tags":[],"stylesheets":["https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css","https://cask.scotch.io/bootstrap-4.0.css","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"],"scripts":["https://code.jquery.com/jquery-2.2.4.min.js","https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js","https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js","https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js","https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"]}'>
<pre data-lang="html"><link href='https://fonts.googleapis.com/css?family=Pacifico|Bungee+Inline|Lobster' rel='stylesheet' type='text/css'>
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b2230e1ab99e.jpg" style="position:fixed; z-index:-1;top:0;width:100%;height:100%;filter:none;"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand" href="#">
<div class="navbar-brand-pic">HPIT</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#" onclick="scrollToTop()">Profile</a></li>
<li><a href="#work">Founder Ceo</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="main-content">
<section class="section-profile">
<div class="profile-container">
<div class="profile-img col-sm-12 col-md-12 col-lg-4">
<img src="https://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_big.jpg?t=1550650061;base64,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" class="img-circle" />
</div>
<div class="profile-desc col-sm-12 col-md-12 col-lg-8 col-lg-4-offset">
<div class="my-name">
<br/>
<h4 id="profile">Hi, I'm</h4>
<div class="cursive">
<h1 class="noselect">HARUN PEHLİVAN</h1>
<hr class="hr-style-heading"/>
<div class="contact-icons-container-profile">
<div class="contact-icon">
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252/" target="_blank"><img src="http://aiconica.net/previews/e126135738945ba73276eac37342addaf4e692b95f661ae9b4c877721be512f4_100x100.png" /></a>
</div>
</div>
</div>
</div>
<h5>a creator from SULUOVA AMASYA<span class="glyphicon glyphicon-map-marker" style="color:#2196F3;"></span> IT FOUNDER CEO BLOGGER INITIATIVE AR-GE <span class="glyphicon glyphicon-globe" style="color:#9C27B0;"></span> , loves to drink coffee <span class="fa fa-coffee" style="color:#F44336;"></span> and loves to listen to music <span class="glyphicon glyphicon-headphones" style="color:#FF9800;"></span> .</h5>
<br/>
<h3>IT FOUNDER CEO BLOGGER INITIATIVE AR-GE</h3>
<h2 class="hidden">Profile</h2>
</div>
</div>
</section>
<section class="section-work">
<svg id="svg1" style="margin-top:-45px;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M30 100 L70 100 L50 0 Z" stroke="#2962FF" fill="#2962FF"/>
</svg>
<h2 id="work" class="section-title"> FOUNDER CEO </h2>
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card">
<div class="card-block">
<h4 class="card-title"><a href="http://harunpehlivan.fm.tc" target="_blank">TTGRT</a></h4>
<p class="card-text">TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</p>
<p class="card-text"><small class="text-muted">2016</small></p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title"><a href="https://harunpehlivantebimtebitagem.site123.me" target="_blank">HP IT GROUP</a></h4>
<p class="card-text">GLOBAL PROFESYONEL IT GROUP</p>
<p class="card-text"><small class="text-muted">2018</small></p>
</div>
</div>
</div>
<div class="card-deck">
<div class="card">
<div class="card-block">
<h4 class="card-title"><a href="http://tebimtebitagem.ticiz.com" target="_blank">TEBİM</a></h4>
<p class="card-text">TERCUMAN INFORMATICS CENTER</p>
<p class="card-text"><small class="text-muted">2008</small></p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title"><a href="https://harunpehlivantebimtebitagem.business.site" target="_blank">TEBİTAGEM</a></h4>
<p class="card-text">TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER</p>
<p class="card-text"><small class="text-muted">2012</small></p>
</div>
</div>
</div>
<div class="card-deck">
<div class="card">
<div class="card-block">
<h4 class="card-title"><a href="" target="_blank"></a></h4>
<p class="card-text"></p>
<p class="card-text"><small class="text-muted"></small></p>
</div>
</div>
<div class="card">
<div class="card-block">
<h4 class="card-title"><a href="" target="_blank"></a></h4>
<p class="card-text"></p>
<p class="card-text"><small class="text-muted"></small></p>
</div>
</div>
</div>
</div>
</section>
<section class="section-education">
<svg id="svg2" style="width:100%;margin-top:-100px;margin-bottom:17px;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="100" viewBox="0 0 300 100" preserveAspectRatio="none">
<path d="M 0 103 q 150 -200 300 0" stroke="#3498db" stroke-width="5" fill="#3498db" />
</svg>
<h2 id="education" class="section-title">Education</h2>
<section class="timeline">
<ul>
<li>
<div>
<time>2012</time><span class="edu-desc"> UNIVERSITY OF AMASYA MERZIFON VOCATIONAL SCHOOL
COMPUTER PROGRAMMING </span>
</div>
</li>
<li>
<div>
<time>2010</time><span class="edu-desc"> Suluova Adnan Menderes vocational and Technical High School INFORMATION TECHNOLOGY 2016
OPENING AN OFFICE</span>
</div>
</li>
<li>
<div>
<time>2011</time><span class="edu-desc"> HİBE PROJELERİ/SODES ENGELSİZ YARINLAR Ön Muhasebeci eğitimi</span>
<time>2015</time><span class="edu-desc"> APPLIED ENTREPRENEURSHIP TRAINING
KOSGEB IŞKUR CO-OPERATION TOOK PLACE</span>
</div>
</li>
</ul>
</section>
</section>
<section class="section-skills">
<svg id="svg3" style="margin-top:-100px;width:100%;margin-bottom:16px;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="100" viewBox="0 0 300 100" style="border:1px solid black;" preserveAspectRatio="none">
<path d="M 100 99 L300 1 l299 149" stroke="#34a8eb" stroke-width="2" fill="#34a8eb" />
<path d="M 0 100 L0 1 l300 100" stroke="#2962FF" stroke-width="2" fill="#2962FF" />
</svg>
<h2 id="skills" class="section-title">Skills</h2>
<canvas id="myChart" width="400" height="230"></canvas>
<br/><br/>
</section>
<section class="section-contact">
<svg id="svg4" style="margin-top:0px;width:100%;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="50" viewBox="0 0 80 50" >
<circle cx="40" cy="0" r="40" stroke="#2962FF" stroke-width="3" fill="#2962FF" />
</svg>
<h2 id="contact" class="section-title">Contact</h2>
<div class="contact-icons-container">
<div class="contact-icon">
<a href="https://codepen.io/harunpehlivan" target="_blank"><img src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-White-Large.png" width="55px" height="55px" style="background-color:black; border:1px solid white inset; border-radius:17px;"/></a>
</div>
<div class="contact-icon">
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252/" target="_blank"><img src="http://aiconica.net/previews/e126135738945ba73276eac37342addaf4e692b95f661ae9b4c877721be512f4_100x100.png" /></a>
</div>
<div class="contact-icon">
<a href="https://github.com/harunpehlivan" target="_blank"><img src="http://aiconica.net/previews/fcd9db0f939ec08addf9d378afc68eca1b63befc2cbc3588fbe374ec2ca97f52_100x100.png" /></a>
</div>
</div>
<br/>
<p>Copyright © 2023. HARUN PEHLİVAN. All Rights Reserved.</p>
<br/>
</section>
</div></pre>
<pre data-lang="css" >@import url('https://fonts.googleapis.com/css?family=Black+Ops+One|Monoton');
/*color: #2962FF*/
*::selection{
color: white;
background: #FF8F00;
}
body{
font-family: sans-serif;
overflow:scrollY;
min-width:470px;
}
img{
filter:grayscale(1.2);
transition: filter 0.7s;
cursor: pointer;
}
img:hover{
filter:none;
}
.section-profile{
/* z-index:-1; */
margin: auto;
margin-top: 100px;
overflow: hidden;
width: 70%;
min-width:390px;
max-width: 810px;
border: 3px solid #2962FF;
border-radius:5px;
}
.section-work, .section-education, .section-skills, .section-contact{
z-index: 2;
background: #2962FF;
padding-bottom:130px;
}
.section-work{
background: #2962FF;
margin-top:45px;
padding-left:20px;
padding-right:20px;
}
.section-work a{
color:white;
}
.section-education{
background: #3498db;
}
.section-skills{
padding-bottom:0px;
}
.section-contact{
background: #3498db;
padding-bottom:0px;
}
.profile-img{
background: #2962FF;
height: 370px;
}
.profile-desc{
background: white;
height: 370px;
}
.img-circle{
height: 220px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.contact-icons-container-profile{
display:inline-block;
}
.contact-icons-container-profile .contact-icon{
padding:3px;
margin:2px;
margin-bottom:10px;
border-color: #2962FF;
}
.nav li a, .section-title{
font-variant:small-caps;
}
.section-title{
color: white;
font-family: 'Black Ops One', cursive;
font-size: 3.5em;
}
.navbar-default{
padding-top:0px;
padding-bottom:0px;
}
.cursive{
font-family: 'Pacifico', cursive;
}
.cursive h1{
overflow: hidden;
border-right: .05em solid #2962FF;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 0px;
animation:
typing 3.5s steps(25, end),
blink-caret .75s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #2962FF; }
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Currently not supported by any browser */
}
.main-content{
text-align:center;
margin-bottom:0px;
}
hr.hr-style-heading {
padding: 0;
border: none;
border-top: 2px solid #2962FF;
text-align: center;
width:20%;
}
hr.hr-style-sm-heading {
padding: 0;
border: none;
border-top: 2px solid #eee;
text-align: center;
width:20%;
}
.navbar-brand-pic{
border:2px solid gray;
margin-top:9px;
}
.card-deck-wrapper{
margin-left: 10%;
max-width: 80%;
}
.card-deck{
margin-top:20px;
}
.card-img-top{
width:20%;
}
.card{
background: white;
color: black;
border: 1px solid #2196F3;
transition: all 0.7s;
}
.card a{
text-decoration: underline;
}
.card:hover{
background:rgba(21,96,243,0.4);
color:white;
}
.text-muted{
color:white;
}
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline{
color:black;
overflow:hidden;
}
.timeline ul {
background: inherit;
padding: 50px 0;
}
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: rgba(1,1,1,0.4);
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
}
.timeline ul li div {
font-family: sans-serif;
position: relative;
bottom: 0;
width: 300px;
padding: 15px;
background: white;
}
.timeline ul li div::before {
content: '';
position: absolute;
bottom: 7px;
width: 0;
height: 0;
border-style: solid;
}
.timeline ul li:nth-child(odd) div {
left: 45px;
}
.timeline ul li:nth-child(odd) div::before {
left: -19px;
border-width: 8px 16px 8px 0;
border-color: transparent rgba(1,1,1,0.4) transparent transparent;
}
.timeline ul li:nth-child(even) div {
left: -339px;
}
.timeline ul li:nth-child(even) div::before {
right: -19px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent rgba(1,1,1,0.4);
}
time {
font-family: 'Bungee Inline', cursive;
display: block;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 8px;
color:black;
}
.edu-desc{
background:white;
}
.timeline ul li::after {
transition: background .5s ease-in-out;
}
.timeline ul li.in-view::after {
background: rgba(1,1,1,0.4);
}
.timeline ul li div {
visibility: hidden;
opacity: 0;
transition: all .5s ease-in-out;
}
.timeline ul li:nth-child(odd) div {
transform: translate3d(200px, 0, 0);
}
.timeline ul li:nth-child(even) div {
transform: translate3d(-200px, 0, 0);
}
.timeline ul li.in-view div {
transform: none;
visibility: visible;
opacity: 1;
}
@media screen and (max-width: 900px) {
.timeline ul li div {
width: 200px;
}
.timeline ul li:nth-child(even) div {
left: -239px;
}
}
@media screen and (max-width: 600px) {
.timeline ul li {
margin-left: 20px;
}
.timeline ul li div {
width: calc(80vw - 101px);
}
.timeline ul li:nth-child(even) div {
left: 45px;
}
.timeline ul li:nth-child(even) div::before {
left: -19px;
border-width: 8px 16px 8px 0;
border-color: transparent rgba(1,1,1,0.4) transparent transparent;
}
}
/*----------------------------------------*/
.skills-table{
width:80%;
text-align:right;
max-width:800px;
margin-left: 10%;
}
.skills-table tr{
min-height:40px;
line-height:40px;
}
.skills-table td{
font-size:1.2em;
padding-right: 20px;
padding-bottom: 10px;
}
.skills-table .progress{
display:inline-flex;
height:20px;
margin-top:15px;
}
.progress{
border-radius: 0px;
box-shadow: -3px 5px 2px rgba(0,0,0,0.5);
}
.progress-bar{
transition: all 0.3s;
border: 1px solid transparent;
border-radius: 0px;
box-shadow: -3px 5px rgba(0,0,0,0.5);
}
.skills-table td{
width:30%;
}
.skills-table tr td::nth-child(odd){
margin-right:20px;
width:20%;
}
.skills-table .skillprogbar{
width: 50%;
height: 10px;
background: #34a8eb;
color: white;
font-size: 0.6em;
}
.contact-icon{
background:none;
height:55px;
width:55px;
border-radius:30px;
float:left;
margin:16px;
border:2px solid #2962FF;
padding-right:1px;
padding-top:3px;
border-color:white;
transition: animation 1s;
}
.contact-icon img{
width:32px;
height:32px;
display: block;
margin:0 auto;
margin-top:7px;
transition: all 0.2s ease-out;
}
.contact-icons-container{
display: table;
margin: 0 auto;
padding: 0 auto;
}
.contact-icons-container .contact-icon{
background: white;
border:2px solid white;
box-shadow: -4px 5px 2px 0px rgba(1,1,1,0.5);
}
.contact-icons-container .contact-icon:hover{
border-color:white;
animation: none;
}
@keyframes rotateBorder{
25%{border-color:transparent #2962FF transparent transparent;
border-style:dashed;
}
50%{border-color:transparent transparent #2962FF transparent;
border-style:ridge;
}
75%{border-color:transparent transparent transparent #2962FF;
border-style:double;
}
}</pre>
<pre data-lang="js">$(document).ready(function(){
setTimeout(function(){
$('.img-circle, .contact-icons-container-profile img').css('filter', 'none');
},1500);
createChart();
});
function createChart(){
var skillLabels = ["Javascript", "CSS", "HTML5", "Bootstrap", "JQuery", "C Lang","Python", "C++", "Java", "C# .NET"];
var skillProfs = [85, 80, 70, 65, 75, 70, 75, 70, 75, 70];
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: skillLabels,
datasets: [{
label: 'Skill Proficiency %',
data: skillProfs,
backgroundColor: '#34a8eb'
}]
},
options: {legend: {labels:{fontColor:"white", fontSize: 16}},
scales: {
xAxes: [{
ticks: {
fontColor: "black",
fontSize: 12
},
gridLines: {
display: false ,
color: "rgb(41, 98, 255)"
}
}],
yAxes: [{
ticks: {
fontColor: "white",
fontSize: 16
},
gridLines: {
display: false ,
color: "rgb(41, 98, 255)"
}
}]
}
}
});
}
function scrollToTop(){
$('html, body').animate({ scrollTop: 0 }, 1200);
}
//Smooth scrolling animation function
$(function() {
$('a[href*="#"]:not([href="#"])').click(
function(){
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
var offset2 = target.offset().top - 50;
$('html, body').animate({
scrollTop: offset2
}, 1200);
if(document.body.clientWidth < 768){$('.navbar-toggle').click();}
return false;
}
}
});
});
//Making items visible on scroll
$(function() {
'use strict';
// define variables
var items = document.querySelectorAll(".timeline li");
var hrs = $('section');
var items1 = $('.navbar-nav li');
// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function callbackFunc() {
for (var i = 0; i < items.length; i++) {
if (isElementInViewport(items[i])) {
items[i].classList.add("in-view");
}
}
}
// listen for events
window.addEventListener("load", callbackFunc);
window.addEventListener("resize", callbackFunc);
window.addEventListener("scroll", callbackFunc);
})();
/*------------END--------------*/
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<div class="codepen" data-height="518" data-theme-id="light" data-default-tab="result" data-user="harunpehlivan" data-slug-hash="GzmdNb" data-prefill='{"title":"Photography page concept","tags":["portfolio","navigation","menu","overlay","button"],"stylesheets":["https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"],"scripts":["https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"]}'>
<pre data-lang="html"> <div class="hero-section">
<div class="about-text hover-target">about</div>
<div class="contact-text hover-target">contact</div>
<div class="section-center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 text-center">
<h1>HARUN PEHLİVAN</h1>
</div>
<div class="col-12 text-center mb-2">
<div class="dancing">IT FOUNDER CEO BLOGGER INITIATIVE AR-GE</div>
</div>
<div class="col-12 text-center mt-4 mt-lg-5">
<p>
<span class="travel hover-target">INTERACTIVE</span>
<span class="wildlife hover-target">BUSINESS OFFICE CARD LOGO</span>
<span class="nature hover-target">GALLERY</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="about-section">
<div class="about-close hover-target"></div>
<div class="section-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<img src="https://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_big.jpg?t=1549105914" alt="">
</div>
<div class="col-lg-8 text-center mt-4">
<p><a href="http://www.shortcutz.link/harunpehlivan" rel="noopener noreferrer" target="_blank">INFORMATION TECHNOLOGY FOUNDER CEO BLOGGER INITIATIVE RESEARCH AND DEVELOPMENT</a></p>
</div>
<div class="col-12 text-center">
<p><span>HARUN PEHLİVAN </span></p>
</div>
</div>
</div>
</div>
</div>
<div class="contact-section">
<div class="contact-close hover-target"></div>
<div class="section-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<a href="mailto:trcmnhp@hotmail.com" class="hover-target">CODER DESIGNER MAİL</a>
</div>
<div class="col-12 text-center social mt-4">
<a href="https://www.instagram.com/harunpehlivantebimtebitagem" class="hover-target">instagram</a>
<a href="https://flickr.com/harunpehlivan" class="hover-target">flickr</a>
<a href="https://facebook.com/100008152065270" class="hover-target">facebook</a>
</div>
</div>
</div>
</div>
</div>
<div class="travel-section">
<div class="travel-close hover-target"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<h3>INTERACTIVE</h3>
</div>
<div class="col-12 mt-3 text-center">
<p><span>ETKİLEŞİMLİ YAZILIMLAR</span></p>
</div>
<div class="col-12 text-center">
</div>
<div class="col-md-6 col-lg-4">
<iframe height="510" style="width: 100%;" scrolling="no" title="Profile Widget" src="//codepen.io/harunpehlivan/embed/xmoexx/?height=510&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/harunpehlivan/pen/xmoexx/'>Profile Widget</a> by HARUN PEHLİVAN
(<a href='https://codepen.io/harunpehlivan'>@harunpehlivan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
</div>
<div class="col-md-6 col-lg-4">
</div>
<div class="col-md-6 col-lg-4">
</div>
<div class="col-md-6 col-lg-4">
</div>
<div class="col-md-6 col-lg-4">
</div>
<div class="col-md-6 col-lg-4">
</div>
<div class="col-md-6 col-lg-4">
</div>
<div class="col-md-6 col-lg-4">
</div>
<div class="col-md-6 col-lg-4">
<iframe height='402' scrolling='no' title='React - Github Player Card' src='//codepen.io/harunpehlivan/embed/gZWpNr/?height=402&theme-id=light&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/harunpehlivan/pen/gZWpNr/'>React - Github Player Card</a> by HARUN PEHLİVAN (<a href='https://codepen.io/harunpehlivan'>@harunpehlivan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
</div>
<div class="col-md-6 col-lg-4">
<iframe height='735' scrolling='no' title='Github user cards' src='//codepen.io/harunpehlivan/embed/JwjqKe/?height=735&theme-id=light&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/harunpehlivan/pen/JwjqKe/'>Github user cards</a> by HARUN PEHLİVAN (<a href='https://codepen.io/harunpehlivan'>@harunpehlivan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
</div>
<div class="col-md-6 col-lg-4">
<iframe height='345' scrolling='no' title='Profile Card2' src='//codepen.io/harunpehlivan/embed/ZXGwYW/?height=345&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/harunpehlivan/pen/ZXGwYW/'>Profile Card2</a> by HARUN PEHLİVAN (<a href='https://codepen.io/harunpehlivan'>@harunpehlivan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
</div>
<div class="col-md-6 col-lg-4">
<script id="asp-embed-script" data-zindex="1000000" type="text/javascript" charset="utf-8" src="https://spark.adobe.com/page-embed.js"></script><a class="asp-embed-link" href="https://spark.adobe.com/page/r2P7QcZjaIWIN/" target="_blank"><img src="https://spark.adobe.com/page/r2P7QcZjaIWIN/embed.jpg?buster=1528119506718" alt="HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP" style="width:100%" border="0" /></a>
</div>
</div>
</div>
</div>
<div class="wildlife-section">
<div class="wildlife-close hover-target"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<h3>HP IT GROUP GLOBAL PROFESYONEL IT GROUP</h3>
</div>
<div class="col-12 mt-3 text-center">
<p><span>BUSINESS OFFICE CARD LOGO</span></p>
</div>
<div class="col-12 text-center">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/800_5ac2115f911f3.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
</div>
<div class="col-md-6 col-lg-4">
</div>
<div class="col-md-6 col-lg-4">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5c478dff719f6.png" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5c478dec361ae.png" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5c467d8c0d8b1.png" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5c4a45931246d.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5c4f6b8aa4d1d.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5c4a2438188f1.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5bc409fc313f5.png" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5bc40a057a784.png" alt="">
</div>
</div>
</div>
</div>
<div class="nature-section">
<div class="nature-close hover-target"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<h3>GALLERY</h3>
</div>
<div class="col-12 mt-3 text-center">
<p><span>H PEHLİVAN FOTO</span></p>
</div>
<div class="col-12 text-center">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b53ad0bd1e1c.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b2230e1ab99e.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222df1876eb.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222df15352d.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d5a787fd.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222da0a9b52.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d7e7857d.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d282e1c3.png" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222ce750054.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222c6c8f804.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222c535ef5b.jpg" alt="">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b222c3847ad9.jpg" alt="">
</div>
</div>
</div>
</div>
<div class='cursor' id="cursor"></div>
<div class='cursor2' id="cursor2"></div>
<div class='cursor3' id="cursor3"></div>
<!-- Link to page
================================================== -->
<a href="https://themeforest.net/user/harunpehlivan" class="link-to-portfolio hover-target" target=”_blank”></a></pre>
<pre data-lang="css" >
/* Please ❤ this if you like it! */
/* ======================================== *
BEST VIEWED FULLSCREEN
https://codepen.io/harunpehlivan/pen/GzmdNb
* ======================================== */
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700');
body{
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.6;
color: #fff;
background-color: #1f2029;
overflow: hidden;
height: 100vh;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
perspective: 800px;
}
a {
cursor: pointer;
}
a:hover {
text-decoration: none;
}
::selection {
color: #c4c3ca;
background-color: #000;
}
::-moz-selection {
color: #c4c3ca;
background-color: #000;
}
/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
position: fixed;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
left: -100px;
top: 50%;
mix-blend-mode: difference;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.cursor{
background-color: #fff;
height: 0;
width: 0;
z-index: 99999;
}
.cursor2,.cursor3{
height: 36px;
width: 36px;
z-index:99998;
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
transform:scale(2) translateX(-25%) translateY(-25%);
border:none
}
.cursor2{
border: 2px solid #fff;
}
.cursor2.hover{
background: rgba(255,255,255,1);
border-color: transparent;
}
@media screen and (max-width: 1200px){
.cursor,.cursor2,.cursor3{
display: none
}
}
/* #Primary style
================================================== */
.hero-section {
position: relative;
width: 100%;
display: block;
overflow: hidden;
height: 100vh;
background-image: url('https://cdn-cms.f-static.com/uploads/1017556/2000_5b53aeec70dad.jpg');
background-size: cover;
background-position: center;
transform: scale(1) rotateX(0);
box-shadow: 0 0 40px rgba(0,0,0,0.2);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
transform-origin: center top;
}
.hero-section h1{
color: #fff;
font-size: 5vw;
line-height: 1;
font-weight: 900;
}
.hero-section .dancing{
font-family: 'Dancing Script', cursive;
letter-spacing: 1px;
color: #866BAF;
font-size: 26px;
line-height: 1;
font-weight: 700;
}
@media screen and (max-width: 580px){
.hero-section .dancing{
font-size: 18px;
}
}
.hero-section p{
font-size: 15px;
line-height: 20px;
font-weight: 500;
color: #fff;
letter-spacing: 1px;
}
.hero-section p span{
margin-left: 15px;
margin-right: 15px;
position: relative;
display: inline-block;
cursor: pointer;
padding-bottom: 35px;
}
.hero-section p span:before {
position: absolute;
content: '';
bottom: 10px;
left: 50%;
height: 30px;
width: 30px;
margin-left: -15px;
z-index: -1;
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
background-image: url('http://www.ivang-design.com/svg-load/portfolio/down.svg');
opacity: 0.2;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.hero-section p span:hover:before {
opacity: 1;
bottom: 5px;
}
body.about-on .hero-section {
transform: scale(0.75);
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
}
body.contact-on .hero-section {
transform: scale(0.75);
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
}
body.travel-on .hero-section {
transform: rotateX(-10deg);
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
}
body.wildlife-on .hero-section {
transform: rotateX(-10deg);
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
}
body.nature-on .hero-section {
transform: rotateX(-10deg);
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
}
.about-text {
position: absolute;
font-size: 17px;
line-height: 20px;
font-weight: 700;
color: #fff;
letter-spacing: 2px;
top: 50%;
left: 40px;
cursor: pointer;
z-index: 2;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr;
transform: translateY(-50%);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.about-text:before {
position: absolute;
content: '';
top: 50%;
left: -25px;
height: 30px;
width: 30px;
margin-top: -15px;
z-index: -1;
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
background-image: url('http://www.ivang-design.com/svg-load/portfolio/left.svg');
opacity: 0.2;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.about-text:hover:before {
opacity: 1;
left: -30px;
}
.about-section {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: block;
overflow: hidden;
height: 100vh;
background-color: rgba(31,32,41,1);
transform: translateX(-100%);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
z-index: 10;
}
body.about-on .about-section {
transform: translateX(0);
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
.about-close {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
display: block;
overflow: hidden;
height: 30px;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
background-repeat: no-repeat;
background-position: center;
background-size: 36px 36px;
background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
cursor: pointer;
z-index: 11;
}
.about-close:hover {
transform: rotate(90deg);
}
.section-center {
position: absolute;
width: 100%;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.about-section img {
width: 100px;
height: 100px;
border-radius: 4px;
display: block;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0,0,0,0.15);
}
.about-section p span {
font-family: 'Dancing Script', cursive;
letter-spacing: 1px;
color: #866BAF;
font-size: 25px;
font-weight: 400;
}
.contact-text {
position: absolute;
font-size: 17px;
line-height: 20px;
font-weight: 700;
color: #fff;
letter-spacing: 2px;
top: 50%;
right: 40px;
cursor: pointer;
z-index: 2;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr;
transform: translateY(-50%) rotate(180deg);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.contact-text:before {
position: absolute;
content: '';
top: 50%;
left: -25px;
height: 30px;
width: 30px;
margin-top: -15px;
z-index: -1;
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
background-image: url('http://www.ivang-design.com/svg-load/portfolio/left.svg');
opacity: 0.2;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.contact-text:hover:before {
opacity: 1;
left: -30px;
}
.contact-section {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: block;
overflow: hidden;
height: 100vh;
background-color: rgba(31,32,41,1);
transform: translateX(100%);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
z-index: 10;
}
body.contact-on .contact-section {
transform: translateX(0);
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
.contact-close {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
display: block;
overflow: hidden;
height: 30px;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
background-repeat: no-repeat;
background-position: center;
background-size: 36px 36px;
background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
cursor: pointer;
z-index: 11;
}
.contact-close:hover {
transform: rotate(90deg);
}
.contact-section a{
margin: 0 auto;
font-size: 32px;
font-weight: 900;
letter-spacing: 1px;
color: #fff;
display: inline-block;
}
.contact-section .social a{
margin-left: 8px;
margin-right: 8px;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
color: #866BAF;
}
@media screen and (max-width: 580px){
.contact-section a{
font-size: 17px;
}
.contact-section .social a{
margin-left: 3px;
margin-right: 3px;
font-size: 13px;
letter-spacing: 0;
}
}
.travel-section,
.wildlife-section,
.nature-section {
position: fixed;
top: 100%;
left: 0;
padding: 100px 0;
width: 100%;
height: 100vh;
display: block;
overflow-x: hidden;
overflow-y: auto;
background-color: rgba(31,32,41,1);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
z-index: 10;
}
.travel-close,
.wildlife-close,
.nature-close {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
display: block;
overflow: hidden;
height: 30px;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
background-repeat: no-repeat;
background-position: center;
background-size: 36px 36px;
background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
cursor: pointer;
z-index: 11;
}
.travel-close:hover,
.wildlife-close:hover,
.nature-close:hover {
transform: rotate(90deg);
}
body.travel-on .travel-section {
top: 0;
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
body.wildlife-on .wildlife-section {
top: 0;
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
body.nature-on .nature-section {
top: 0;
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
.travel-section img,
.wildlife-section img,
.nature-section img {
margin-top: 30px;
width: 100%;
height: auto;
display: block;
border-radius: 4px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.travel-section h3,
.wildlife-section h3,
.nature-section h3 {
font-size: 44px;
line-height: 1.3;
font-weight: 700;
letter-spacing: 1px;
color: #fff;
}
.travel-section p,
.wildlife-section p,
.nature-section p {
font-size: 14px;
line-height: 1.7;
letter-spacing: 1px;
}
.travel-section p span,
.wildlife-section p span,
.nature-section p span {
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: #866BAF;
}
/* #Link to page
================================================== */
.link-to-portfolio {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 200000;
cursor: pointer;
width: 40px;
height: 40px;
text-align: center;
border-radius: 3px;
background-position: center center;
background-size: cover;
background-image: url('https://ivang-design.com/ig-logo.jpg');
box-shadow: 0 0 0 2px rgba(255,255,255,.1);
transition: opacity .2s, border-radius .2s, box-shadow .2s;
transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
opacity: 0.8;
border-radius: 50%;
box-shadow: 0 0 0 20px rgba(255,255,255,.1);
}</pre>
<pre data-lang="js">
/* Please ❤ this if you like it! */
(function($) { "use strict";
//Page cursors
document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
t.style.left = n.clientX + "px",
t.style.top = n.clientY + "px",
e.style.left = n.clientX + "px",
e.style.top = n.clientY + "px",
i.style.left = n.clientX + "px",
i.style.top = n.clientY + "px"
});
var t = document.getElementById("cursor"),
e = document.getElementById("cursor2"),
i = document.getElementById("cursor3");
function n(t) {
e.classList.add("hover"), i.classList.add("hover")
}
function s(t) {
e.classList.remove("hover"), i.classList.remove("hover")
}
s();
for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
o(r[a])
}
function o(t) {
t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
}
//About page
$(".about-text").on('click', function () {
$("body").addClass("about-on");
});
$(".about-close").on('click', function () {
$("body").removeClass("about-on");
});
//Contact page
$(".contact-text").on('click', function () {
$("body").addClass("contact-on");
});
$(".contact-close").on('click', function () {
$("body").removeClass("contact-on");
});
//Travel portfolio page
$(".travel").on('click', function () {
$("body").addClass("travel-on");
});
$(".travel-close").on('click', function () {
$("body").removeClass("travel-on");
});
//Wildlife portfolio page
$(".wildlife").on('click', function () {
$("body").addClass("wildlife-on");
});
$(".wildlife-close").on('click', function () {
$("body").removeClass("wildlife-on");
});
//Nature portfolio page
$(".nature").on('click', function () {
$("body").addClass("nature-on");
});
$(".nature-close").on('click', function () {
$("body").removeClass("nature-on");
});
})(jQuery); </pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<div class="codepen" data-height="333" data-theme-id="light" data-default-tab="result" data-user="harunpehlivan" data-slug-hash="ZwxGeE" data-prefill='{"title":"Spotify Wrapped Animation using GSAP","description":"The lovely original Spotify site https://spotifywrapped.com is built in WebGL but I wanted to have a stab at it using DOM elements and of course Greensock's GSAP using the SplitText plugin.","tags":["gsap","tweenmax","typography","animation","3d"],"html_classes":"https://greensock.com/forums/profile/69584-harunpehlivanit/","head":"<link href=\"https://fonts.googleapis.com/css?family=Montserrat:700\" rel=\"stylesheet\">","stylesheets":[],"scripts":["https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js","https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js","https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js"]}'>
<pre data-lang="html"><div class="container">
<div class="tube">
<h1 class="clone">TTGRT</h1>
</div>
<div class="final__wrap"></div>
<!-- Required Structure -->
<div class="tube">
<h1 class="line line1">7/24</h1>
<h1 class="line line2">ONLİNE</h1>
<h1 class="line line3">LİVE</h1>
</div>
<div class="final__wrap">
<h1 class="final"></h1>
</div> -->
</div>
<div class="me">
<a class="me__link portfolio" href="http://harunpehlivan.fm.tc" target='_blank'>TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU<span></span></a>
</div>
<a class="twitter" href="https://twitter.com/HTERCUMANP" target='_blank'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<path fill="#fff" d="M39.19 15.39a10.63 10.63 0 0 1-3.38 1.29 5.31 5.31 0 0 0-9.19 3.63 5.43 5.43 0 0 0 .14 1.22A15.11 15.11 0 0 1 15.8 16a5.39 5.39 0 0 0-.72 2.68 5.32 5.32 0 0 0 2.37 4.42 5.33 5.33 0 0 1-2.45-.7v.07a5.31 5.31 0 0 0 4.27 5.21 5.45 5.45 0 0 1-1.41.19 4.78 4.78 0 0 1-1-.1 5.32 5.32 0 0 0 5 3.69 10.64 10.64 0 0 1-6.6 2.28c-.43 0-.85 0-1.27-.07a15.13 15.13 0 0 0 23.28-12.74v-.69a10.87 10.87 0 0 0 2.66-2.75 10.84 10.84 0 0 1-3.06.84 5.35 5.35 0 0 0 2.34-2.94"></path>
<!-- <path fill="#fff" d="M26 5A21 21 0 1 1 5 26 21 21 0 0 1 26 5m0-4a25 25 0 1 0 25 25A25 25 0 0 0 26 1z"></path> -->
</svg>
</a>
<a href="https://open.spotify.com/user/21g6q24dgxix3pudhtdafv2xy" target="_blank" class="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 558.43 167.49">
<title>Spotify Logo</title>
<g>
<path d="M88,1.28A83.74,83.74,0,1,0,171.74,85,83.75,83.75,0,0,0,88,1.28Zm38.4,120.78a5.22,5.22,0,0,1-7.18,1.74c-19.66-12-44.41-14.73-73.56-8.07a5.22,5.22,0,0,1-2.33-10.18c31.9-7.29,59.27-4.15,81.34,9.34A5.21,5.21,0,0,1,126.4,122.06Zm10.25-22.8a6.53,6.53,0,0,1-9,2.15c-22.51-13.83-56.82-17.84-83.45-9.76a6.53,6.53,0,1,1-3.79-12.49c30.41-9.23,68.22-4.76,94.07,11.12A6.53,6.53,0,0,1,136.65,99.26Zm.88-23.74c-27-16-71.52-17.51-97.29-9.69a7.83,7.83,0,0,1-4.54-15c29.58-9,78.75-7.24,109.83,11.21a7.83,7.83,0,0,1-8,13.47Z" transform="translate(-4.25 -1.28)" fill="#1ed760"/>
<g>
<g>
<path d="M232.09,78.59c-14.46-3.45-17-5.87-17-11,0-4.8,4.52-8,11.24-8,6.52,0,13,2.45,19.77,7.51a1,1,0,0,0,1.34-.22l7.06-10a1,1,0,0,0-.18-1.29A42.74,42.74,0,0,0,226.52,46C210.91,46,200,55.4,200,68.81c0,14.37,9.41,19.46,25.66,23.39,13.84,3.19,16.18,5.86,16.18,10.63,0,5.29-4.73,8.58-12.32,8.58-8.44,0-15.33-2.84-23-9.51a1,1,0,0,0-.69-.23.91.91,0,0,0-.65.34l-7.92,9.42a.94.94,0,0,0,.09,1.31A47.19,47.19,0,0,0,229.2,125c16.82,0,27.69-9.19,27.69-23.42C256.89,89.52,249.71,82.87,232.09,78.59Z" transform="translate(-4.25 -1.28)" fill="#1ed760"/>
<path d="M295,64.33c-7.29,0-13.27,2.87-18.21,8.75V66.46a1,1,0,0,0-.94-.95H262.85a1,1,0,0,0-.94.95v73.6a1,1,0,0,0,.94.95H275.8a1,1,0,0,0,.94-.95V116.83A23.29,23.29,0,0,0,295,125.07c13.55,0,27.27-10.43,27.27-30.37S308.5,64.33,295,64.33ZM307.16,94.7c0,10.15-6.25,17.24-15.21,17.24s-15.53-7.41-15.53-17.24S283.1,77.46,292,77.46,307.16,84.71,307.16,94.7Z" transform="translate(-4.25 -1.28)" fill="#1ed760"/>
<path d="M357.37,64.33c-17.45,0-31.12,13.43-31.12,30.59,0,17,13.58,30.26,30.91,30.26,17.51,0,31.22-13.39,31.22-30.48S374.76,64.33,357.37,64.33Zm0,47.72c-9.28,0-16.28-7.46-16.28-17.35s6.76-17.13,16.07-17.13S373.54,85,373.54,94.92,366.74,112.05,357.37,112.05Z" transform="translate(-4.25 -1.28)" fill="#1ed760"/>
<path d="M425.64,65.51H411.4V50.94a1,1,0,0,0-.95-.94H397.51a.94.94,0,0,0-.95.94V65.51h-6.23a1,1,0,0,0-.94.95V77.59a.94.94,0,0,0,.94.94h6.23v28.8c0,11.63,5.79,17.53,17.21,17.53a23.62,23.62,0,0,0,12.13-3,1,1,0,0,0,.48-.82V110.43a1,1,0,0,0-.45-.81.94.94,0,0,0-.93,0,16.35,16.35,0,0,1-7.6,1.83c-4.15,0-6-1.89-6-6.11V78.53h14.24a.94.94,0,0,0,.95-.94V66.46A1,1,0,0,0,425.64,65.51Z" transform="translate(-4.25 -1.28)" fill="#1ed760"/>
<path d="M475.28,65.57V63.78c0-5.27,2-7.61,6.55-7.61a21.86,21.86,0,0,1,7.29,1.34.92.92,0,0,0,.85-.13.94.94,0,0,0,.4-.77V45.7a1,1,0,0,0-.67-.91,35.73,35.73,0,0,0-10.77-1.54c-11.95,0-18.27,6.73-18.27,19.46v2.74h-6.22a1,1,0,0,0-.95,1V77.59a.94.94,0,0,0,.95.94h6.22v44.41a.94.94,0,0,0,.94,1h12.95a1,1,0,0,0,.95-1V78.53h12.08l18.52,44.4c-2.1,4.67-4.17,5.6-7,5.6a15,15,0,0,1-7.14-2,.93.93,0,0,0-1.31.44l-4.39,9.63a.93.93,0,0,0,.41,1.22,27.25,27.25,0,0,0,13.82,3.54c9.56,0,14.85-4.45,19.5-16.43l22.47-58a1,1,0,0,0-.1-.88,1,1,0,0,0-.78-.41H528.11a1,1,0,0,0-.9.63l-13.8,39.44L498.28,66.18a.94.94,0,0,0-.88-.61Z" transform="translate(-4.25 -1.28)" fill="#1ed760"/>
<rect x="428.36" y="64.23" width="14.84" height="58.38" rx="0.95" ry="0.95" fill="#1ed760"/>
<path d="M440.1,39.79a9.29,9.29,0,1,0,9.28,9.28A9.28,9.28,0,0,0,440.1,39.79Z" transform="translate(-4.25 -1.28)" fill="#1ed760"/>
</g>
<path d="M553.52,83.67a9.14,9.14,0,1,1,9.16-9.16A9.16,9.16,0,0,1,553.52,83.67Zm.05-17.36a8.23,8.23,0,1,0,8.15,8.2A8.15,8.15,0,0,0,553.57,66.31Zm2,9.13,2.57,3.61H556l-2.32-3.31h-2v3.31h-1.82V69.49h4.26c2.22,0,3.69,1.14,3.69,3.05A2.85,2.85,0,0,1,555.59,75.44Zm-1.54-4.31h-2.37v3h2.37c1.18,0,1.89-.58,1.89-1.51S555.23,71.13,554.05,71.13Z" transform="translate(-4.25 -1.28)" fill="#1ed760"/>
</g>
</g>
</svg>
</a></pre>
<pre data-lang="scss" data-option-autoprefixer>html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: #191414;
font-family: 'Montserrat', sans-serif;
color: #F59B23;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
visibility: hidden;
}
.tube {
position: relative;
width: 100%;
height: 24vw;
// height: 16vw;
// overflow: hidden;
}
.line {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 1;
margin: 0;
letter-spacing: -0.6vw;
font-size: 18vw;
white-space: nowrap;
text-align: center;
div {
backface-visibility: hidden;
}
}
.final__wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.final {
line-height: 1;
margin: 0;
font-size: 13vw;
letter-spacing: -0.5vw;
white-space: nowrap;
div {
backface-visibility: hidden;
}
}
.logo {
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: auto;
}
.me {
position: fixed;
z-index: 1000;
top: 24px;
left: 24px;
display: flex;
flex-direction: column;
}
.me__link {
position: relative;
margin-bottom: 16px;
color: white;
font-family: Helvetica, sans-serif;
text-decoration: none;
font-size: 16px;
span {
display: block;
position: absolute;
bottom: -3px;
left: 0;
height: 1px;
width: 5%;
background-color: white;
content: "";
transition: width 0.3s;
}
&:hover span{
width: 100%;
}
}
.twitter {
position: fixed;
top: 24px;
right: 24px;
display: block;
width: 40px;
height: 40px;
}</pre>
<pre data-lang="js">console.clear();
// Get the core elements
var container = document.getElementsByClassName("container");
var tube = document.getElementsByClassName("tube");
var clone = document.getElementsByClassName("clone");
var finalWrap = document.getElementsByClassName("final__wrap");
// Create the cloned nodes, append and add classes for required HTML structure - WARNING: Ugly code below
body {
font-family: "Courier New";
}
.navbar-dark.bg-dark {
background-color: #009 !important;
z-index: 2000;
height: 62px;
}
.navbar.fixed-top {
padding: 0;
}
.navbar-brand {
font-size: 1.5em;
font-weight: 600;
}
.nav-item.active .nav-link {
border: 2px solid #fff;
}
.nav-link {
font-size: 1.1em;
border: 2px solid #009;
}
.cube {
position: fixed;
width: 100%;
background-color: transparent;
border: 14px solid #000;
border-left: 60px solid #888;
border-right: 100px solid #888;
top: 62px;
}
.black-outline {
height: 100%;
width: 100%;
border: 1px solid #000;
border-bottom: none;
}
.content {
position: relative;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 86px 0;
}
.card {
width: 76vw;
border-radius: 0;
padding: 15px;
margin: 0 auto;
margin-top: 6em;
border: 2px solid #000;
box-shadow: 0 10px 30px -2px rgba(0,0,0,.9);
}
.card:first-child {
margin-top: 0;
}
.card-title {
font-size: 3rem;
text-align: center;
margin-bottom: 1em;
text-transform: underline;
}
.card-title > span {
text-decoration: wavy underline #fd6;
letter-spacing: 6px;
text-underline-position: under;
}
img.photo {
width: 15em;
display: block;
margin: 0 auto;
border: 1px solid #000;
padding: .3em;
border-radius: 50%;
}
.portfolio-item {
text-align: center;
width: 344px;
}
.footer {
height: 40px;
width: 100%;
background-color: #009;
font-size: .8em;
border-top: 1px solid #000;
padding: 0;
}
.footer .badge {
font-size: 1.9em;
margin-left: 1em;
color: #aaa;
padding: 0;
}
.footer .badge:hover {
color: #ccc;
}
.navbar.fixed-top > .container,
.footer > .container {
position: absolute;
z-index: 1;
min-width: 100%;
height: 100%;
padding: 0 14%;
background-color: #009;
}
.shadow {
position: absolute;
left: 50%;
transform: translate(-50%);
width: 80vw;
height: 100%;
z-index: -1;
margin: 0 auto;
}
.navbar.fixed-top > .shadow {
box-shadow: 0 12px 15px rgba(0,0,0,1);
}
.footer > .shadow {
box-shadow: 0 -9px 15px rgba(0,0,0,.9);
}
@media (max-width: 991px){
.navbar-dark.bg-dark {
height: 113px;
}
.shadow-box {
top: 113px;
}
.cube {
border-top: 14px solid #000;
border-left: 40px solid #ccc;
border-right: 60px solid #ccc;
}
.content {
padding: 137px 0;
}
}
@media (max-width: 505px){
.navbar-brand {
font-size: 1em;
}
.nav-item.active .nav-link {
border: 1px solid #fff;
}
.nav-link {
font-size: .8em;
border: 1px solid #009;
}
.cube {
border-top: 14px solid #000;
border-left: 20px solid #ccc;
border-right: 30px solid #ccc;
}
.card {
width: 82vw;
}
.shadow {
width: 85vw;
}
.card-body {
padding: 0;
}
img.photo {
width: 80%;
}
.portfolio [class^="col"],
.contact [class^="col"] {
padding-right: 0;
padding-left: 0;
}
}
$(document).ready(function(){
var navbar = $("#navbar"),
navItems = navbar.find(".nav-item"),
navLinks = navItems.find(".nav-link"),
srCurrent = $('<span class="sr-only">(current)</span>'),
cube = $(".cube"),
cards = $(".content").find(".card"),
footer = $("#footer"),
scrollContext = $("html, body"),
navHt, footerHt, cubeHt, vh;
function fitElements(){
navHt = navbar.outerHeight();
footerHt = footer.outerHeight();
vh = "innerHeight" in window
? window.innerHeight
: document.documentElement.offsetHeight;
cubeHt = vh - ( navHt + footerHt );
cube.css({
"height": cubeHt,
"top": navHt
});
};
function setActiveNav(){
cards.each(function(i,el){
if( window.scrollY >= $(el).offset().top - (navHt + cubeHt*0.45) ){
navItems
.removeClass("active")
.eq(i).addClass("active")
.append(srCurrent);
navLinks
.remove(srCurrent)
.eq(i).append(srCurrent);
}
});
};
function getCardScroll(id){
return $(id).offset().top - (navHt + 30);
};
fitElements();
setActiveNav();
$(window).on("resize", fitElements);
$(window).on("scroll", setActiveNav);
navItems.on("click", "a", function(e){
e.preventDefault();
scrollContext.stop().animate({
scrollTop: getCardScroll(this.hash)
}, 1000, function(){ window.location.hash = this.hash; });
});
});
