A Pen by Doğukan Akgün

Thumbnail
This awesome code was written by NemoryTR, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright NemoryTR ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Doğukan Akgün</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="main">
  <div class="header">
    <div class="header_logo">
     <i class="fa fa-heart"></i> Stalkcı
    </div>
  </div>
  <div class="login">
    <div class="logo">
      <b>Stalkci</b> Giriş Yap
    </div>
    <p>
      Instagram hesabınızı analiz etmenin en iyi yolu.
Seni geri takip etmeyenleri ve daha fazlasını öğren.
Hızlı, kullanımı kolay ve ücretsiz.
    </p>
    <span class="button">
      <i class="fa fa-instagram"></i> &nbsp; İNSTAGRAM İLE GİRİŞ YAP
    </span>
  </div>
  <div class="son_giris">
    <div class="logo">
      <b>SON GİRİŞ</b> YAPANLAR
    </div>
    <div style="text-align:center">
      <div class="box">
        <div class="img">
          <img src="https://scontent-frt3-1.cdninstagram.com/vp/736b41e04eaf0bb1ef474e9bf191e4db/5B90B266/t51.2885-19/s150x150/20633451_802256316601064_5753474014320263168_a.jpg" alt="">
        </div>
        <div class="fullname">
          Doğukan Akgün
        </div>
        <div class="username">
          @nemorytrcom
        </div>
      </div>
      <div class="box">
        <div class="img">
          <img src="https://scontent-frt3-1.cdninstagram.com/vp/736b41e04eaf0bb1ef474e9bf191e4db/5B90B266/t51.2885-19/s150x150/20633451_802256316601064_5753474014320263168_a.jpg" alt="">
        </div>
        <div class="fullname">
          Doğukan Akgün
        </div>
        <div class="username">
          @nemorytrcom
        </div>
      </div>
      <div class="box">
        <div class="img">
          <img src="https://scontent-frt3-1.cdninstagram.com/vp/736b41e04eaf0bb1ef474e9bf191e4db/5B90B266/t51.2885-19/s150x150/20633451_802256316601064_5753474014320263168_a.jpg" alt="">
        </div>
        <div class="fullname">
          Doğukan Akgün
        </div>
        <div class="username">
          @nemorytrcom
        </div>
      </div>
      <div class="box">
        <div class="img">
          <img src="https://scontent-frt3-1.cdninstagram.com/vp/736b41e04eaf0bb1ef474e9bf191e4db/5B90B266/t51.2885-19/s150x150/20633451_802256316601064_5753474014320263168_a.jpg" alt="">
        </div>
        <div class="fullname">
          Doğukan Akgün
        </div>
        <div class="username">
          @nemorytrcom
        </div>
      </div>
      <div class="box">
        <div class="img">
          <img src="https://scontent-frt3-1.cdninstagram.com/vp/736b41e04eaf0bb1ef474e9bf191e4db/5B90B266/t51.2885-19/s150x150/20633451_802256316601064_5753474014320263168_a.jpg" alt="">
        </div>
        <div class="fullname">
          Doğukan Akgün
        </div>
        <div class="username">
          @nemorytrcom
        </div>
      </div>
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/NemoryTR/a-pen-by-doandx11fukan-akgandxfcn-gzmryb */
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900');

* {
  box-sizing: border-box;
}

body {
  background:#f2f4f8;
  padding:0;
  font-family: 'Rubik', sans-serif;
  margin:0;
}

.login {
  padding:20px;
  text-align:center;
  background:#fff;
  max-width:1000px;
  margin:auto;
  -webkit-box-shadow: 0px 2px 4px rgba(126,142,177,0.12);
  box-shadow: 0px 2px 4px rgba(126,142,177,0.12);
  border-radius: 6px;
  margin-top:20px;
}

.son_giris {
  padding:20px;
  background:#fff;
  max-width:900px;
  margin:auto;
  -webkit-box-shadow: 0px 2px 4px rgba(126,142,177,0.12);
  box-shadow: 0px 2px 4px rgba(126,142,177,0.12);
  border-radius: 6px;
  margin-top:20px;
}

.son_giris .logo {
  font-size:18px!important;
}

.logo {
  color: #ff246e;
  font-size:2rem;
  margin-bottom:20px;
}

.box {
  display:inline-block;
  margin-top:10px;
  margin-right:26px;
  margin:auto;
  background-image: linear-gradient(-154deg, #ff246e 8%, #ff614e 90%);
  -webkit-box-shadow: 0px 5px 10px rgba(19,19,19,0.17);
  color:#fff;
  -webkit-box-shadow: 0px 2px 4px rgba(126,142,177,0.12);
  box-shadow: 0px 2px 4px rgba(126,142,177,0.12);
  padding: 20px;
  cursor:pointer;
  border-radius: 5px;
  text-align:center
}

.box .img img {
  border-radius:100%;
  width:64px;
  height:64px;
}

.fullname {
  font-weight:bold;
  margin-bottom:5px
}

.username {
  font-size:12px;
}

.button {
  background-image: linear-gradient(-154deg, #ff246e 8%, #ff614e 90%);
  -webkit-box-shadow: 0px 5px 10px rgba(19,19,19,0.17);
  box-shadow: 0px 5px 10px rgba(19,19,19,0.17);
  border-radius: 75px;
  color: #fff;
  padding: 12px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: inline-block;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  vertical-align: middle;
  font-size: 1.08rem;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.button:hover {
  transform: scale(1.1);
}

.header {
  background-image: linear-gradient(-154deg, #ff246e 8%, #ff614e 90%);
  -webkit-box-shadow: 0px 5px 10px rgba(19,19,19,0.17);
  box-shadow: 0px 5px 10px rgba(19,19,19,0.17);
  padding:20px;
}

.header_logo {
  color:#f1f1f1;
  font-weight:bold;
  cursor:pointer;
  font-size:1.2rem;
  letter-spacing:2px;
  text-transform:uppercase
}

Comments