HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP

HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP

PRO­JECT
"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"
<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>
@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;
}
$(".desktop-wrapper .option").click(function(){
   $(".option").removeClass("active");
   $(this).addClass("active");
});
<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-->
@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%;
}
<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>
*{
  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;
  }
}
$(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;
			    });
			 
			});
<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>
@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;
  }
}
$(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--------------*/ 
	<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>

/* 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);
}

/* 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); 
<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>
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;
}
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 💩
var finalClone = clone[0].cloneNode(true); // clone the clean node and append to final__wrap
finalWrap[0].appendChild(finalClone).classList.add("final");

for (var i = 0; i < 2; i++) {
	var newClone = clone[0].cloneNode(true); // clone the header
	var lineClass = "line"+(i+2); // create class name to append
	tube[0].appendChild(newClone); // append the clone
	clone[i].classList.add("line"); // add cline lass
	clone[i+1].classList.add(lineClass); // add incremented line class
}
clone[0].classList.add("line1"); // add line1 class to the first node

// Yuk! Now for the fun stuff…

// Show it to me!
TweenMax.set('.container', {
	visibility: 'visible'
});

// Get cloned elements
var lines = document.getElementsByClassName("line");
var line1 = document.getElementsByClassName("line1");
var line2 = document.getElementsByClassName("line2");
var line3 = document.getElementsByClassName("line3");
var final = document.getElementsByClassName("final");

// split the text characters
var splitLine1 = new SplitText(line1, { type:" chars", charsClass:"char" });
var splitLine2 = new SplitText(line2, { type:" chars", charsClass:"char" });
var splitLine3 = new SplitText(line3, { type:" chars", charsClass:"char" });
var splitFinal = new SplitText(final, { type:" chars", charsClass:"char" });

// Set up vars
var animTime = 0.9; // baseline animation time for each stagger
var width = document.documentElement.clientWidth; // viewport width
var height = document.documentElement.clientHeight; // viewport height
var depth = -width/8; // rotation depth based on viewport width
var tOrigin = "50% 50% "+depth; // transform origin as a factor of viewport width to allow for different device widths


// Init 3D perspective
TweenMax.set([lines, final], { perspective:700, transformStyle:"preserve-3d"});

// Animate Timeline
var linesTL = new TimelineMax();
linesTL.staggerFromTo(splitLine1.chars, animTime, { rotationX: -90  }, { rotationX: 90, ease:Linear.easeNone, transformOrigin: tOrigin }, 0.08)
	.staggerFromTo(splitLine2.chars, animTime, { rotationX: -90 }, { rotationX: 90, ease:Linear.easeNone, transformOrigin: tOrigin }, 0.08, 0.45)
	.staggerFromTo(splitLine3.chars, animTime, { rotationX: -90 }, { rotationX: 90, ease:Linear.easeNone, transformOrigin: tOrigin }, 0.08, 0.9)
	.staggerFromTo(splitFinal.chars, animTime*1.8, { rotationX: -90, alpha: 0 }, { rotationX: 0, alpha: 1, ease:Expo.easeOut, transformOrigin: tOrigin }, 0.06, 1.6)
	.fromTo(final, animTime*5, { y:height/6 }, { y:-height/6 , ease:Power4.easeOut }, 2.0 )

// Rotate final text on mouse move
window.addEventListener("mousemove", onMouseMove);

function onMouseMove(e) {
	var sxPos = (e.pageX / width*100 - 50)*2 ;
	var syPos = (e.pageY / height*100 - 50)*2;
	TweenMax.to(finalWrap, 3, {
		rotationY: 0.04 * sxPos,
		rotationX: -0.04 * syPos,
		transformOrigin: "center center -800",
		ease: Expo.easeOut
	});
}

// linesTL.pause();
// var progressTL = new TimelineMax();
// progressTL.fromTo(linesTL, animTime*8, { progress: 0 }, { progress: 1, ease: Sine.easeOut })
	

/*  ==========================================================================
    Greensock Dev Tools
    ========================================================================== */  

	//instantiate GSDevTools with default settings
	GSDevTools.create( );

/*  ==========================================================================
    FPS GUI stats.js
    ========================================================================== */  

// (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()
CONTACT
Hit me up