1. Tired of not being able to see links? Want to chat with other members? Need help?

  2. Community Awards!
    Have you voted yet? Take part in DevBest's yearly community awards! Click here to find out more.

[CSS] Your An D****

Discussion in 'Free Programs/Scripts' started by GarettM, Dec 7, 2017.

  1. GarettM

    GarettM Programmer

    I am not sure who made this but it made me chuckle.

    HTML:
    HTML:
    <div class="you-are-a-dick">
      <h1>You Are</h1>
      <h6>A</h6><br/>
      <h5>Dick</h5><br/><i class="ion-star"></i>
    </div>
    CSS:
    Code:
    @import url("https://fonts.googleapis.com/css?family=Teko:400,700|Raleway");
    @import url("https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css");
    
    body {
      background-color: #212121;
    }
    
    .you-are-a-dick {
      font-family: 'Raleway', Arial, sans-serif;
      position: relative;
      display: inline-block;
      color: #bdbdbd;
      margin: 60px 20px;
      max-width: 285px;
      width: 100%;
      text-align: center;
      font-size: 16px;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;
    }
    
    .you-are-a-dick h1,
    .you-are-a-dick h5 {
      margin: 0;
      text-transform: uppercase;
    }
    
    .you-are-a-dick h1 {
      font-family: 'Teko', Arial, sans-serif;
      font-weight: 700;
      font-size: 54px;
      padding: 0;
      text-align: center;
      margin: 0;
      line-height: 27px;
    }
    
    .you-are-a-dick h5 {
      background-color: #bdbdbd;
      color: #212121;
      display: inline-block;
      font-size: 0.6em;
      font-weight: 700;
      line-height: 18px;
      padding: 0 20px;
      position: relative;
    }
    
    .you-are-a-dick h5:before,
    .you-are-a-dick h5:after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      top: 2px;
      border-width: 9px 5px;
      border-style: solid;
      opacity: 0.8;
    }
    
    .you-are-a-dick h5:before {
      right: 100%;
      border-color: #bdbdbd #bdbdbd #bdbdbd transparent;
    }
    
    .you-are-a-dick h5:after {
      left: 100%;
      border-color: #bdbdbd transparent #bdbdbd #bdbdbd;
    }
    
    .you-are-a-dick h6 {
      margin: 0;
      display: inline-block;
      position: relative;
      text-transform: uppercase;
    }
    
    .you-are-a-dick h6:before,
    .you-are-a-dick h6:after {
      position: absolute;
      height: 2px;
      content: '';
      width: 30px;
      top: 50%;
      border-top: 2px solid #bdbdbd;
      border-bottom: 2px solid #bdbdbd;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    
    .you-are-a-dick h6:before {
      left: -35px;
    }
    
    .you-are-a-dick h6:after {
      right: -35px;
    }
    
    .you-are-a-dick i {
      font-size: 22px;
      line-height: 36px;
    }
    
    Preview: [ Want to see this link? Register ! ]
     
    nakkeost likes this.
  2. nakkeost

    nakkeost github.com/marcus-sa

  3. Ecko

    Ecko 23:37 [autobots] -!- eckostylez [[email protected]]

    Didn't realize the letter d was a vowel
     
    LUL, Wickd and GarettM like this.
  4. Lethargic

    Lethargic Donator

    This is useful for me
     

Share This Page

Loading...