​<div class="container-fluid" id="background-gradient">
  <header class="jumbotron text-center">
    <h1>HARUN PEHLİVAN</h1>
    <h3><em> CODER,DESIGNER,PUBLİSHER,DIGITAL CONTENT PRODUCER FOUNDER CEO ENTREPRENEUR RESEARCH AND DEVELOPMENT      <a href="https://hpitgroup.glitch.me/" data-toggle="tooltip" title="GLOBAL PROFESYONEL IT GROUP">HP IT GROUP (TEBİM TEBİTAGEM)
      </a>  
</em></h3>
    <h1>
      <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"><i class="fa fa-globe"></i></a>
      <a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" target="_blank"><i class="fa fa-linkedin"></i></a>
      <a href="https://www.xing.com/profile/HARUN_PEHLIVAN" target="_blank"><i class="fa fa-xing"></i></a>
      <a href="https://tr.pinterest.com/harunpehlivanit/" target="_blank"><i class="fa fa-pinterest"></i></a>
      <a href="http://harunpehlivan.blogspot.com" target="_blank"><i class="fa fa-rss"></i></a>
      <div class="clearfix visible-xs-block"></div>
      <a href="http://harunpehlivan-blog.tumblr.com/" target="_blank"><i class="fa fa-tumblr"></i></a>
      <a href="https://dribbble.com/harunpehlivan" target="_blank"><i class="fa fa-dribbble"></i></a>
            <a href="https://www.behance.net/harunpehlivan" target="_blank"><i class="fa fa-behance"></i></a>
                  <a href="https://github.com/harunpehlivan" target="_blank"><i class="fa fa-github"></i></a>
                  <a href="https://gitlab.com/harunpehlivan" target="_blank"><i class="fa fa-gitlab"></i></a>
<a href="https://www.freecodecamp.org/harunpehlivan" target='_blank'>
      (<i class="fa fa-fire fa-fw"></i>)
      </a>
      <a href="https://facebook.com/100008152065270" target="_blank"><i class="fa fa-facebook-official"></i></a>
      <a href="https://www.instagram.com/harunpehlivantebimtebitagem" target="_blank"><i class="fa fa-instagram"></i></a>
      <a href="https://www.youtube.com/user/harunpehlivan1" target="_blank"><i class="fa fa-youtube-play"></i></a>
      <a href="https://www.twitch.tv/tebimtebitagem" target="_blank"><i class="fa fa-twitch"></i></a>
    </h1>
  </header>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1544627754" alt="Joey Diaz headshot."/>
        <img class="img-margin" src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b53aeec70dad.jpg" alt="HARUN PEHLİVAN."/>
      </div>
      <div class="well col-sm-6 text-well">
        <h3 class="text-center page-header"><i class="fa fa-user-circle-o"></i> HARUN PEHLİVAN</h3>
        <p><a href="http://www.shortcutz.link/harunpehlivan" rel="noopener noreferrer" target="_blank">INFORMATION TECHNOLOGY FOUNDER,CEO BLOGGER</a></p>
        
        <blockquote class="blockquote-reverse">
          <p>Gündem belirlemek güncel global olmak için yeni fikirlerle yetenek uzmanlıkla eğitimle bilimle teknikle AR-GE proje ile adımızla markamızla kimliğimizle profilimizle kalitemizle standardımızla konseptimizle ilkemizle etiklerimizle ama özümüzden taviz vermeden</p>
          <footer>7+24 ÇALIŞIYORUZ<cite>GÜNÜMÜZÜN İMKANLARINI KULLANARAK TÜKETMEYE DEĞİL ÜRETMEK İÇİN

MİSYONUMUZLA VİZYONUMUZLA DEĞİŞTİRMEYE GELİŞTİRMEYE VARIZ</cite></footer>
                             <a onclick="window.open('https://codepen.io/harunpehlivan/full/xmoexx','POPUP','width=503,height=260,scrollbars=0,resizable=0');return false;" href="#">Profile Widget
</a>   </blockquote>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-sm-6">
        <img src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b53ad0bd1e1c.jpg" alt="HARUN PEHLİVAN"/>
        <img class="img-margin" src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b2230e1ab99e.jpg" alt="HARUN PEHLİVAN"/>
      </div>
      <div class="well col-sm-6 text-well">
        <h3 class="page-header text-center"><i class="fa fa-th-list"></i> HP IT GROUP GLOBAL PROFESYONEL IT GROUP</h3>
        <dl class="dl-horizontal">
          <dt>2008</dt>
          <dd><a href="http://tebimtebitagem.ticiz.com" rel="noopener noreferrer" target="_blank">TERCUMAN INFORMATICS CENTER</a></dd>
          <dt>2012</dt>
          <dd><a href="https://harunpehlivantebimtebitagem.business.site" rel="noopener noreferrer" target="_blank">TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER</a></dd>
          
        </dl>
        <blockquote class="blockquote-reverse">
          <p><a href="https://arapcaosmanlicaklavye.glitch.me" rel="noopener noreferrer" target="_blank"> Islamic sciences</a>and <a href="https://machinelearning.glitch.me" rel="noopener noreferrer" target="_blank">IT computer science</a></p>
          <footer>HARUN PEHLİVAN</footer>
        </blockquote>
      </div>
    </div>
    <hr>
    <h3 class="credits"><i class="fa fa-film"></i> Film</h3>
    <div class="row">
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <img class="media-poster1" src="https://i.ytimg.com/vi/2GBzYu59YLQ/hqdefault.jpg?sqp=-oaymwEjCPYBEIoBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLAtz9if5pMzU1kO_XjiixQa7ZwuIw" alt="TANITIM">
          <h4 class="media-title"><a href="https://youtu.be/2GBzYu59YLQ" rel="noopener noreferrer" target="_blank">TANITIM</a></h4>
          <h5 class="media-owner">HARUN PEHLİVAN</h5>
        </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <img class="media-poster1" src="https://i.ytimg.com/vi/nbDP7y8amMY/hqdefault.jpg?sqp=-oaymwEjCPYBEIoBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLA1R56kYKSM0H3dtEixPpBBnF24vg" alt="HARUN PEHLİVAN'IN DOĞUM GÜNÜ MARŞI">
          <h4 class="media-title"><a href="https://youtu.be/nbDP7y8amMY" rel="noopener noreferrer" target="_blank">22/07/1984</a></h4>
          <h5 class="media-owner">HARUN PEHLİVAN'IN DOĞUM GÜNÜ MARŞI</h5>
        </div>
      <div class="clearfix visible-xs-block"></div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
          <img class="media-poster1" src="https://i.ytimg.com/vi/GTT5cH-mEZA/hqdefault.jpg?sqp=-oaymwEjCPYBEIoBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLBt7nj2id_ViudTiAtZ8Z5YaQ__Zg" alt="FİLMİM"/>
          <h4 class="media-title"><a href="https://youtu.be/GTT5cH-mEZA" rel="noopener noreferrer" target="_blank">FİLMİM</a></h4>
          <h5 class="media-owner">HARUN PEHLİVAN</h5>
        </div>
    </div>
    <hr>
    <h3 class="credits"><i class="fa fa-television"></i> Television</h3>
    <div class="row">
     
      
      
      </div>
    </div>
    <hr>
    <h3 class="credits"><i class="fa fa-play-circle"></i> Comedy Albums</h3>
    <div class="row">
      
      
    </div>
 
    <hr>
    <h3 class="credits"><i class="fa fa-podcast"></i> Podcasts</h3>
    <div class="row">
      
    </div>
    <h4 class="credits">Has also made appearances on:</h4>
    <div class="row">
     
      
      <div class="clearfix visible-xs-block"></div>
      <div class="clearfix visible-md-block"></div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <img class="media-poster2" src="https://cdn-cms.f-static.com/uploads/1017556/2000_5b93b300be30c.jpg" alt="TEBİMTEBİTAGEM GRT"/>
        <h4 class="media-title"><a href="https://harunpehlivanband.glitch.me/" rel="noopener noreferrer" target="_blank">WEB BAND</a></h4>
      </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <img class="media-poster2" src="https://cdn-cms.f-static.com/uploads/1017556/2000_5ba2281756d9a.jpg" alt="WTF with Marc Maron poster."/>
        <h4 class="media-title"><a href="https://accuweather.glitch.me" rel="noopener noreferrer" target="_blank">Türkiye İçin Hava Durumu</a></h4>
      </div>
    </div>
    <hr>
    <div class="text-center">
      <h3 class="credits"><i class="fa fa-info-circle"></i> To learn more:</h3>
      <div class="row">
        <h1>
          <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"><i class="fa fa-globe link-icon"></i></a>
          <a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" target="_blank"><i class="fa fa-linkedin link-icon"></i></a>
                <a href="https://www.xing.com/profile/HARUN_PEHLIVAN" target="_blank"><i class="fa fa-xing"></i></a>
          <a href="https://tr.pinterest.com/harunpehlivanit/" target="_blank"><i class="fa fa-pinterest link-icon"></i></a>
          <div class="clearfix visible-xs-block"></div>
          <a href="https://harunpehlivan.blogspot.com/" target="_blank"><i class="fa fa-rss link-icon"></i></a>
          <a href="http://harunpehlivan-blog.tumblr.com/" target="_blank"><i class="fa fa-tumblr link-icon"></i></a>
      <a href="https://dribbble.com/harunpehlivan" target="_blank"><i class="fa fa-dribbble"></i></a>
            <a href="https://www.behance.net/harunpehlivan" target="_blank"><i class="fa fa-behance"></i></a>
                  <a href="https://github.com/harunpehlivan" target="_blank"><i class="fa fa-github"></i></a>
                  <a href="https://gitlab.com/harunpehlivan" target="_blank"><i class="fa fa-gitlab"></i></a>
<a href="https://www.freecodecamp.org/harunpehlivan" target='_blank'>
      (<i class="fa fa-fire fa-fw"></i>)
      </a>
          <a href="https://facebook.com/100008152065270" target="_blank"><i class="fa fa-facebook-official link-icon"></i></a>
          <div class="clearfix visible-xs-block"></div>
          <a href="https://www.instagram.com/harunpehlivantebimtebitagem" target="_blank"><i class="fa fa-instagram link-icon"></i></a>
          <a href="https://www.youtube.com/user/harunpehlivan1" target="_blank"><i class="fa fa-youtube-play link-icon"></i></a>                        <a href="https://www.twitch.tv/tebimtebitagem" target="_blank"><i class="fa fa-twitch"></i></a>
                                                                                                  
        </h1>
      </div>
  <footer class="text-center">Written and coded by <a id="author" href="https://tr.gravatar.com/tebm" target="_blank">HARUN PEHLİVAN</a></footer>
</div>
@import url('https://fonts.googleapis.com/css?family=Ubuntu');

body {
  font-family: 'Ubuntu', sans-serif;
  color: silver;
  text-shadow: 2px 2px 5px rgba(14, 14, 14, 1);
}

#background-gradient {
 
  background: rgb(216,224,222); 
  background: -moz-linear-gradient(top,  rgba(216,224,222,1) 0%, rgba(174,191,188,1) 22%, rgba(153,175,171,1) 33%, rgba(142,166,162,1) 50%, rgba(130,157,152,1) 67%, rgba(78,92,90,1) 82%, rgba(14,14,14,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(216,224,222,1) 0%,rgba(174,191,188,1) 22%,rgba(153,175,171,1) 33%,rgba(142,166,162,1) 50%,rgba(130,157,152,1) 67%,rgba(78,92,90,1) 82%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(216,224,222,1) 0%,rgba(174,191,188,1) 22%,rgba(153,175,171,1) 33%,rgba(142,166,162,1) 50%,rgba(130,157,152,1) 67%,rgba(78,92,90,1) 82%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8e0de', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}

.jumbotron {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
  background: rgb(181,189,200); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(181,189,200,1) 0%, rgba(130,140,149,1) 36%, rgba(40,52,59,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
  box-shadow: 0 4px 8px 0 rgba(14, 14, 14, 0.7), 0 6px 20px 0 rgba(14, 14, 14, 0.69);
}

img {
  border-radius: 6px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 8px 0 rgba(14, 14, 14, 0.7), 0 6px 20px 0 rgba(14, 14, 14, 0.69);
}

.img-margin {
  margin-top: 20px;
}

.well {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+100;Gren+3D */
  background: rgb(238,238,238); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
  box-shadow: 0 4px 8px 0 rgba(14, 14, 14, 0.7), 0 6px 20px 0 rgba(14, 14, 14, 0.69);
}

.text-well {
  color: black;
  text-shadow: none;
  height: 500px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  overflow: auto;
}

.page-header {
  border-color: black;
}

.credits {
  margin-top: 30px;
}

.media-poster1 {
  height: 170px;
  margin-top: 20px;
}

.media-poster2 {
  margin-top: 20px;
  width: 125px;
  height: 125px;
}

.media-title {
  text-align: center;
}

.media-owner {
  text-align: center;
}

a:link {
  color: silver;
}

a:visited {
  color: silver;
}

a:hover {
  color: white;
}

.link-icon {
  margin-right: 15px;
  margin-bottom: 30px;
  margin-left: 15px;
}

a#author:link {
  color: #3366BB;
}

a#author:visited {
  color: #3366BB;
}

a#author:hover {
  color: white;
  text-decoration: none;
}

/* For width 768px and larger: */
@media only screen and (min-width: 768px) {
  img {
    height: 250px;
  }
  
  .img-margin {
    width: 90%;
  }
  
  .text-well {
    margin: auto;
    height: 520px;
  }
  
  .media-poster1 {
    height: 230px;
  }
  
  .media-poster2 {
    width: 200px;
    height: 200px;
  }
}

/* For width 992px and larger: */
@media only screen and (min-width: 992px) {
  img {
    height: 350px;
  }
  
  .img-margin {
    width: 100%;
  }
  
  .text-well {
    margin: auto;
    height: 720px;
  }
}

/* For width 1200px and larger: */
@media only screen and (min-width: 1200px) {
  img {
    height: 400px;
  }
  
  .img-margin {
    width: 90%;
  }
  
  .text-well {
    margin: auto;
    height: 820px;
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://use.fontawesome.com/b776365334.js