"Personal Portfolio Webpage"
Bootstrap 4.1.1 Snippet by harunpehlivan

<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>PRO­JECT</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&apos;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; }); }); });

Related: See More


Questions / Comments: