Bootstrap Snippet HARUN PEHLİVAN SOCİAL MEDİA using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br><br><br><br>
<div class="container" style="text-align:center; background:#D7CDCC;margin-top:20px">
  <h1>HARUN PEHLİVAN SOCİAL MEDİA</h1>
   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
  <a href="mailto:trcmnhp@hotmail.com" class="social_button email"><span><i class="fa fa-envelope"></i></span><p>HOTMAİL</p></a>
      <a href="mailto:tercumanbilisimmerkizi@gmail.com" class="social_button email"><span><i class="fa fa-envelope"></i></span><p>GMAİL</p></a>
      <a href="mailto:harun.pehlivan@yandex.com" class="social_button email"><span><i class="fa fa-envelope"></i></span><p>YANDEX</p></a>
       <a href="https://www.behance.net/harunpehlivan" class="social_button behance"><span><i class="fa fa-behance"></i></span><p>BEHANCE</p></a>
      </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
   
   <a href="https://github.com/harunpehlivan" class="social_button github"><span><i class="fa fa-github"></i></span><p>GİTHUB</p></a>
    <a href="https://gitlab.com/harunpehlivan" class="social_button github"><span><i class="fa fa-gitlab"></i></span><p>GİTLAB</p></a>
      
   </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
  <a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" class="social_button linkedin"><span><i class="fa fa-linkedin"></i></span><p>LİNKEDİN</p></a>
<a href="https://www.xing.com/profile/HARUN_PEHLIVAN" class="social_button xing"><span><i class="fa fa-xing"></i></span><p>XİNG</p></a>
   
      </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
  <a href="https://stackoverflow.com/users/2246893/harunpehlivantebimtebitagem" class="social_button stackoverflow"><span><i class="fa fa-stack-overflow"></i></span><p>STACK OVERFLOW</p></a>
<a href="https://open.spotify.com/user/21g6q24dgxix3pudhtdafv2xy" class="social_button spotify"><span><i class="fa fa-spotify"></i></span><p>SPOTİFY</p></a>
   <a href="https://soundcloud.com/harun-pehl-van" class="social_button soundcloud"><span><i class="fa fa-soundcloud"></i></span><p>SOUCLOUD</p></a>
   </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
   
   
  <a href="https://codepen.io/harunpehlivan" class="social_button codepen"><span><i class="fa fa-codepen"></i></span><p>CODEPEN</p></a>
      </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
  <a href="https://facebook.com/100008152065270" class="social_button facebook"><span><i class="fa fa-facebook"></i></span><p>FACEBOOK</p></a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.social_button {
   text-align: center;
   display: inline-block;
   height: 40px;
   line-height: 40px;
   min-width: 250px;
   position: relative;
   background-color: rgb(0, 0, 0);
   color: rgb(255, 255, 255);
   text-transform: none;
   margin-bottom: 14px;
   text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
   text-decoration: none;
   &:link {
      text-decoration: none;
      color: white;
   }
   &:visited {
      text-decoration: none;
      color: white;
   }
   &:active {
      text-decoration: none;
   }
   &:hover {
      text-decoration: none;
      color: #401C69;
   }
   p {
      font-size: 18px;
   }
   span {
      position: absolute;
      left: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"HARUN PEHLİVAN SOCİAL MEDİA"
Bootstrap 4.1.1 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"HARUN PEHLİVAN SOCİAL MEDİA" Bootstrap 4.1.1 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"HARUN PEHLİVAN SOCİAL MEDİA"
Bootstrap 4.1.1 Snippet by harunpehlivan