A Pen by Stephy

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Stephy</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <div class="container">
 <div class="row">
  <div class="col-md-3 col-sm-6 thumbnail dttsp">
   <a href="http://deathtothestockphoto.com/photo_pack/ride/">
    <span>Death to the Stock Photo</span>
   </a>
  </div>
  <div class="col-md-3 col-sm-6 thumbnail flickr">
   <a href="https://www.flickr.com/photos/brook/35492794806/">
    <span>Flickr</span>
   </a>
  </div>
  <div class="col-md-3 col-sm-6 thumbnail ff">
   <a href="https://foodiesfeed.com/free-food-photo/raw-beef-steaks-3/">
    <span>Foodies Feed</span>
   </a>
  </div>
  <div class="col-md-3 col-sm-6 thumbnail gratis">
   <a href="http://www.gratisography.com/">
    <span>Gratisography</span>
   </a>
  </div>
 </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/blindingstars/a-pen-by-stephy-awVPdx */
.container {
  margin-top: 3rem;
}

.thumbnail a {
  display: block;
  height: 200px;
  padding: 10px;
  background-size: cover;
  color: #fff;
}

.thumbnail span {
  background: rgba(0, 0, 0, 0.75);
  padding: 5px 10px;
}

.dttsp a {
  background-image: url(http://dgreeley.mccdgm.net/creativecommons/img/dtsp.jpeg);
}

.flickr a {
  background-image: url(http://dgreeley.mccdgm.net/creativecommons/img/flickr.jpg);
}

.ff a {
  background-image: url(http://dgreeley.mccdgm.net/creativecommons/img/foodiesfood.jpg);
}

.gratis a {
  background-image: url(http://dgreeley.mccdgm.net/creativecommons/img/gratisopgraphy.jpg);
}

Comments