6+ CSS Pinterest Clone Examples

This post contains a total of 6+ Hand-Picked CSS Pinterest Clone Examples with Source Code. All these Pinterest Clones are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Pinterest Clone Examples

1. By Josh

Made by Josh. Simple Pinterest Clone with minimalistic hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
#header {
    width: 100%;
    background-color: white;
    color: #a1a1a1;
    margin-bottom: -20px;
    border-bottom: 1px solid #f4f4f4;
    height: 55px;
}

#header ul li {
    list-style-type: none;
    font-family: Arial;
    font-size: .8em;
    font-weight: bold;
    display: inline-block;
}

#logo {
  float: left;
}

#logo img {
  width: 35px;
  float: left;
}

#search {
  width: 50%;
  float: left;
  margin-left: 240px;
  padding-top: 10px;
}

#search-box {
  width: 150%;
  height: 25px;
  border-radius: 8px;
  padding: 10px;
  background-color: #e9e9e9;
  margin: -190px;
  border: 0px;
}

#nav-buttons {
  float: right;
  margin-top: 2px;
  margin-right: 20px;
}

#nav-buttons a {
  color: #bababa;
  text-decoration: none;
  font-size: 1.9em;
  margin-left: 30px;
}

#nav-buttons a:hover {
  color: #5f5f5f;
}

#wrapper {
  width: 100%;
  margin: 50px auto;
}

#columns {
  column-count: 5;
  column-gap: 10px;
  column-fill: auto;
  -moz-column-count: 5;
  -moz-column-gap: 10px;
  -moz-column-fill: auto;
  -webkit-column-count: 5;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
}

.pin {
  display: inline-block;
  background-color: #fefefe;
  border: 2px solid #fafafa;
  box-shadow: 0 1px 2px rgb(34, 25, 25, 0.4);
  margin: 0px 2px 15px 0px;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  padding: 15px 15px 5px 15px;
  background: -webkit-linear-gradient(45deg, #ffffff, #f9f9f9);
  opacity: 1;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.pin img {
  width: 100%;
  border-bottom: 1px solid #ccc;
  padding-bottom: 15px;
  margin-bottom: 5px;
}

.pin p {
  font: 12px/18px Arial, sans-serif;
  color: #333;
  margin: 0;
}

.pin:hover {
  border-radius: 20px;
  cursor: pointer;
}
</style>
</head>
<body>
  <head>
  <title>Pinterest Clone</title>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
  <div id="header">
    <ul>
      <div id="logo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsqD_RSAPqxXyVtxzQc9RuPBTO_WxFThcUn_Nq5rt21OXkallt:https://upload.wikimedia.org/wikipedia/commons/0/08/Pinterest-logo.png" alt="logo" /></div>
      <div id="search">
        <input id="search-box" type="text" placeholder="Search" />
      </div>
      <div id="nav-buttons">
        <a href="#"><i class="fa fa-bars" aria-hidden="true"></i></a>
  <a href="#"><i class="fa fa-user" aria-hidden="true"></i></a>
  <a href="#"><i class="fa fa-commenting" aria-hidden="true"></i></a>
      </div>
    </ul>
  </div>
  <div id="wrapper">
    <div id="columns">
      <div class="pin">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRA6Fd6EovVlSzGv52ZvsjeLDhEAVC7LLkfDg2RbcicKuu6FoNi:https://cdn.pixabay.com/photo/2017/01/03/19/41/forest-1950402_960_720.jpg" />
        <p>Sed ut perspiciatis unde omniirqeb[h oqierg qwer hqethwehtus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>
      </div>

      <div class="pin">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgS3zpBrtEycko0SOFjtXoic8g6kQ3HDJwlcxrOjR-7Bayjmbujw:https://c1.staticflickr.com/9/8652/16431315088_87eb423597_b.jpg" />
        <p>Sed ut perspiciatis unde omnis iste natus error sitsethsrtjhsrtjsrtjsr voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>
      </div>

      <div class="pin">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZRYV82T-am5B3nW9EkgQEWZ3gzB5jIJgwhRMR8u-aVtjLPy1vYg:https://upload.wikimedia.org/wikipedia/commons/f/f9/Druid-drive-knox-house-tn1.jpg" />
        <p>Sed ut perspiciatis unde omnis iste natus errsrtjswtjrkwrtjkwrtjkwrtkjwrtkjwrkor sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>
      </div>

      <div class="pin">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRA6Fd6EovVlSzGv52ZvsjeLDhEAVC7LLkfDg2RbcicKuu6FoNi:https://cdn.pixabay.com/photo/2017/01/03/19/41/forest-1950402_960_720.jpg" />
        <p>Sed ut perspiciatis unde omnis wrkytwryktwrtkwryktiste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>
      </div>

      <div class="pin">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgS3zpBrtEycko0SOFjtXoic8g6kQ3HDJwlcxrOjR-7Bayjmbujw:https://c1.staticflickr.com/9/8652/16431315088_87eb423597_b.jpg" />
        <p>Sedpih[jmnewptiohjm]sw[teoiphjmhp accusantium doloremque laudantium, totam rem aperiam, eaque</p>
      </div>

      <div class="pin">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRA6Fd6EovVlSzGv52ZvsjeLDhEAVC7LLkfDg2RbcicKuu6FoNi:https://cdn.pixabay.com/photo/2017/01/03/19/41/forest-1950402_960_720.jpg" />
        <p>Sed ut perspiciatis unde omnis ptatem accurtjwretjwertjetjwssantium doloremque laudantium, totam rem aperiam, eaque</p>
      </div>

      <div class="pin">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZRYV82T-am5B3nW9EkgQEWZ3gzB5jIJgwhRMR8u-aVtjLPy1vYg:https://upload.wikimedia.org/wikipedia/commons/f/f9/Druid-drive-knox-house-tn1.jpg" />
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque</p>
      </div>

      <div class="pin">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgS3zpBrtEycko0SOFjtXoic8g6kQ3HDJwlcxrOjR-7Bayjmbujw:https://c1.staticflickr.com/9/8652/16431315088_87eb423597_b.jpg" />
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusaerwjretjsrtjkjrntium doloremque laudantium, totam rem aperiam, eaque</p>
      </div>

      <div class="pin">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRA6Fd6EovVlSzGv52ZvsjeLDhEAVC7LLkfDg2RbcicKuu6FoNi:https://cdn.pixabay.com/photo/2017/01/03/19/41/forest-1950402_960_720.jpg" />
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatewrtywrt;lm'pthmrj[pesojih[tmposetjihm[osiptjhm[spitojh[m accusantium doloremque laudantium, totam rem aperiam, eaque</p>
      </div>

      <div class="pin">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZRYV82T-am5B3nW9EkgQEWZ3gzB5jIJgwhRMR8u-aVtjLPy1vYg:https://upload.wikimedia.org/wikipedia/commons/f/f9/Druid-drive-knox-house-tn1.jpg" />
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accuswsjrtswtjrswjrtantium doloremque  laudantium, totam rem aperiam, eaque</p>
      </div>
    </div>
  </div>
</body>
</html>

2. By Gerald Haxhillari

Made by Gerald Haxhillari. Pinterest Posts Clone using CSS & little bit of JavaScript. Source


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

  <link rel='stylesheet' href='https://codepen.io/desandro/pen/owWLYz.css'>
  
<style>
body {
  font-family: sans-serif;
  line-height: 1.4;
  font-size: 18px;
  padding: 20px;
  max-width: 640px;
  margin: 0 auto;
}

.grid {
  max-width: 1200px;
}

/* reveal grid after images loaded */
.grid.are-images-unloaded {
  opacity: 0;
}

.grid__item,
.grid__col-sizer {
  width: 32%;
}

.grid__gutter-sizer {
  width: 2%;
}

/* hide by default */
.grid.are-images-unloaded .image-grid__item {
  opacity: 0;
}

.grid__item {
  margin-bottom: 20px;
  float: left;
}

.grid__item--height1 {
  height: 140px;
  background: #ea0;
}
.grid__item--height2 {
  height: 220px;
  background: #c25;
}
.grid__item--height3 {
  height: 300px;
  background: #19f;
}

.grid__item--width2 {
  width: 66%;
}

.grid__item img {
  display: block;
  max-width: 100%;
}

.page-load-status {
  display: none; /* hidden by default */
  padding-top: 20px;
  border-top: 1px solid #ddd;
  text-align: center;
  color: #777;
}

/* loader ellips in separate pen CSS */
</style>
</head>
<body>
  <h1>Pin Interest</h1>

<div class="grid are-images-unloaded">
  <div class="grid__col-sizer"></div>
  <div class="grid__gutter-sizer"></div>
  <div class="grid__item grid__item--height2"></div>
  <div class="grid__item grid__item--width2">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree" />
  </div>
  <div class="grid__item grid__item--height3"></div>
  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--height2"></div>
  <div class="grid__item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" alt="look out" />
  </div>

  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--height3"></div>
  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--height3"></div>
  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--width2">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/raspberries.jpg" alt="rasberries" />
  </div>
  <div class="grid__item grid__item--height2"></div>
  <div class="grid__item grid__item--height2"></div>
  <div class="grid__item grid__item--height3"></div>
  <div class="grid__item grid__item--height1"></div>
  <div class="grid__item grid__item--height2"></div>
</div>

<div class="page-load-status">
  <div class="loader-ellips infinite-scroll-request">
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
  </div>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>
  <script src='https://unpkg.com/[email protected]/dist/infinite-scroll.pkgd.js'></script>
<script src='https://unpkg.com/[email protected]/dist/masonry.pkgd.js'></script>
      <script>
var grid = document.querySelector(".grid");

var msnry = new Masonry(grid, {
  itemSelector: "none", // select none at first
  columnWidth: ".grid__col-sizer",
  gutter: ".grid__gutter-sizer",
  percentPosition: true,
  stagger: 30,
  // nicer reveal transition
  visibleStyle: { transform: "translateY(0)", opacity: 1 },
  hiddenStyle: { transform: "translateY(100px)", opacity: 0 } });


// initial items reveal
imagesLoaded(grid, function () {
  grid.classList.remove("are-images-unloaded");
  msnry.options.itemSelector = ".grid__item";
  var items = grid.querySelectorAll(".grid__item");
  msnry.appended(items);
});

//-------------------------------------//
// hack CodePen to load pens as pages

var nextPenSlugs = [
"202252c2f5f192688dada252913ccf13",
"a308f05af22690139e9a2bc655bfe3ee",
"6c9ff23039157ee37b3ab982245eef28"];


function getPenPath() {
  var slug = nextPenSlugs[this.loadCount];
  return "https://s.codepen.io/desandro/debug/" + slug;
}

//-------------------------------------//
// init Infinte Scroll

var infScroll = new InfiniteScroll(grid, {
  path: getPenPath,
  append: ".grid__item",
  outlayer: msnry,
  status: ".page-load-status" });
    </script>
</body>
</html>

3. By Devrim Demir

Made by Devrim Demir. Fully functional Pinterest Clone made using CSS. Source

<!DOCTYPE html>
<html lang='en' class=''>
<head>
  <meta charset='UTF-8'>
  <title></title>
  <style class="INLINE_PEN_STYLESHEET_ID">
    /*ROOT*/
*{
  outline:none;
}
body{
  margin:0px;
  padding:0px;
  font-family: arial;
}
img{
  user-select:none;
}

/*MENU*/
.menu{
  max-width:100%;
  display:flex;
  align-items:center;
  padding:10px;
  font-weight:bold;
}
.menu .logo{
  width:25px;
  padding:10px;
  cursor:pointer;
  border-radius:50%;
}
.menu .logo:hover{
  background:#eeeeee;
}
.menu .home{
  color:#fff;
  background:#000000;
  padding:12px 25px;
  cursor:pointer;
  user-select:none;
  border-radius:40px;
  margin:0px 5px;
}
.menu .search-bar{
  width:100%;
  margin:0px 5px;
  padding:12px 35px;
  border-radius:40px;
  outline:none;
  position:relative;
  background-color:#efefef;
  font-size:15px;
  background-image:url("https://cdn4.iconfinder.com/data/icons/music-ui-solid-24px/24/search-3-256.png");
  background-size:21px;
  background-repeat:no-repeat;
  background-position:center left;
  background-position:10px;
  color:gray;
  border:4px solid transparent;
}
.menu .search-bar:hover{
  background-color:#3333;
}
.menu .search-bar:focus{
  border:4px solid #7bb5f0;
  padding:12px 20px;
  background-image:none;
}
.menu .search-bar::placeholder{
  user-select:none;
}
.icon-container{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}
.icon-container .icon{
  width:25px;
  border-radius:50%;
  cursor:pointer;
  padding:10px;
}
.icon-container .icon:hover{
  background-color:#eeeeee;
}
.icon-container .btn{
  width:14px;
  padding:5px;
}
.focus-bar{
  width:250px;
  height:350px;
  border-radius:15px;
  background:#fff;
  border:2px solid #3333;
  position:absolute;
  top:40px;/*50px*/
  left:-90px;
  visibility:hidden;
  opacity:0;
  transition:all 0.3s;
  display:flex;
  justify-content:center;
  align-items:center;
  align-content:center;
  user-select:none;
  z-index:99;
}
.bell:focus + .message + .pp + .btn + .bell-bar, .bell-bar:focus{
  visibility:visible;
  opacity:1;
  top:50px;
}
.message:focus + .pp + .btn + .bell-bar + .message-bar, .message-bar:focus{
  visibility:visible;
  opacity:1;
  top:50px;
}
.pp:focus + .btn + .bell-bar + .message-bar + .pp-bar, .pp-bar:focus{
  visibility:visible;
  opacity:1;
  top:50px;
}
.btn:focus + .bell-bar + .message-bar + .pp-bar + .btn-bar, .btn-bar:focus{
  visibility:visible;
  opacity:1;
  top:50px;
}
.pp-bar a{
  text-decoration:none;
  padding:5px 15px;
  border:2px solid #161b22;
  color:#161b22;
  border-radius:5px;
}
.pp-bar{
  flex-direction:column;
}
.pp-bar img{
  width:150px;
  border-radius:50%;
  margin-bottom:20px;
}
.pp-bar a:hover{
  background:#161b22;
  color:white;
}

/*MINI SEARCH BAR*/
#two{
  display:none;
  padding:15px;
}
.responsive-search-bar{
  max-width:100%;
  padding:40px 10px;
  text-align:center;
  border-radius:15px;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  top:-300px;
  transition:all 0.3s;
  overflow:hidden;
  display:none;
  background:#fff;
  box-shadow: 0px 0px 2px 0px #333;
  margin:0px 5px;
  z-index:99;
}
.responsive-search-bar input{
  width:100%;
  height:35px;
  outline:none;
  border-radius:40px;
  border:4px solid transparent;
  background-image:url("https://cdn4.iconfinder.com/data/icons/music-ui-solid-24px/24/search-3-256.png");
  background-size:21px;
  background-repeat:no-repeat;
  background-position:center left;
  background-position:10px;
  padding:0px 15px 0px 35px;
  background-color:#efefef;
}
.responsive-search-bar input:focus{
  border:4px solid #7bb5f0;
}
.responsive-search-bar p{
  font-size:11px;
  padding:11px;
  margin-left:5px;
  border-radius:50%;
  cursor:pointer;
  user-select:none;
  position:absolute;
  top:-12px;
  right:-1px;
  transition:all 0.3s;
}
.responsive-search-bar p:hover{
  background:#eeeeee;
  transform:rotate(-180deg);
}

/*POSTS*/
.container{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:100px 0px;
  flex-wrap:wrap;
}
.window{
  border-radius:20px;
  margin:10px;
  width:250px;
  height:320px;
  overflow:hidden;
  position:relative;
  z-index:97;
}
.window .foto{
  width:100%;
  border-radius:20px;
  cursor:zoom-in;
}
.window .content{
  margin-left:10px;
  margin-top:-2px;
  font-size:13px;
  font-weight:bold;
}
.window .user{
  width:40px;
  border-radius:50%;
  margin-top:-10px;
  margin-left:10px;
  cursor:pointer;
}
.window .username{
  margin-top:-40px;
  display:block;
  margin-left:55px;
  font-size:14px;
  cursor:pointer;
}
.window .username:hover{
  text-decoration:underline;
}

/*HOVER ZONE*/
.hover-zone{
  position:absolute;
  top:0px;
  width:100%;
  height:250px;
  border-radius:20px;
  cursor:zoom-in ;
  display:flex;
  align-content:space-between;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  background-color: rgba(000, 000, 0, 0.40);
  user-select:none;
}
.hover-zone .top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:5px 10px;
  width:100%;
  border-radius:20px;
}
.hover-zone .top-bar p{
  color:white;
  font-size:20px;
  font-weight:bolder;
  cursor:pointer;
  display:inline-block;
}
.hover-zone .top-bar a{
  color:white;
  padding:15px 25px;
  font-weight:bolder;
  font-size:18px;
  border-radius:40px;
  cursor:pointer;
  background:red;
}
.hover-zone .top-bar a:hover{
  background:#b80202;
}
.hover-zone .bottom-bar{
  padding:10px 10px;
  width:100%;
  border-radius:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.hover-zone .bottom-bar a{
  padding:5px 10px;
  background:#efefef;
  border-radius:40px;
  cursor:pointer;
  font-weight:bolder;
}
.hover-zone .bottom-bar a:hover{
  background:white;
}
.hover-zone .bottom-bar img{
  width:20px;
  border-radius:50%;
  background:#efefef;
  padding:6px;
  cursor:pointer;
  margin:0px 2px;
}
.hover-zone .bottom-bar img:hover{
  background:white;
}
.hover-zone{
  opacity:0;
}
.window:hover .hover-zone{
  opacity:1;
}

/*RESPONSIVE*/
@media screen and (max-width:550px){
  .menu{
    justify-content:center;
  }
  .menu .search-bar{
    padding:0px;
    background-position:center center;
    cursor:pointer;
    border-radius:50%;
    width:30px;
    height:30px;
    float:left;
  }
  .menu .search-bar:focus{
    padding:0px;
    border:4px solid transparent;
    background-image:url("https://cdn4.iconfinder.com/data/icons/music-ui-solid-24px/24/search-3-256.png");
    background-size:21px;
    background-repeat:no-repeat;
    background-position:center center;
  }
  .menu .search-bar::placeholder{
    opacity:0;
  }
  .home{
    display:none;
  }
  .focus-bar{
    max-width:100%;
    margin:0px 15px;
    left:-40px;
  }
  .pp-bar img{
    width:80%;
  }
  #one{
    display:none;
  }
  #two{
    display:inline;
    background-color:transparent;
  }
  #two:hover{
    background-color:#eeeeee;
  }
  .responsive-search-bar{
    display:flex;
  }
  .icon-container .icon{
    width:20px;
    border-radius:50%;
    cursor:pointer;
    padding:10px;
  }
  .icon-container .btn{
    width:12px;
    padding:7px;
  }
  .container{
    margin:-120px 0px 40px 0px;
  }
}
  </style>
</head>
  <body>
  <div class="menu">
    <img draggable="false" class="logo" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/pinterest-512.png">
    <a class="home" >Home</a>
    <input id="one" type="text" class="search-bar" placeholder="Search">
    <button id="two" class="search-bar"></button>
    <div class="icon-container">
      <img tabindex="1" draggable="false" class="icon bell" src="https://i.hizliresim.com/rcvolcu.png">
      <img tabindex="1" draggable="false" class="icon message" src="https://i.hizliresim.com/newumah.png">
      <img tabindex="1" draggable="false" class="icon pp" src="https://i.pinimg.com/564x/bd/94/ce/bd94ce28cf8aefb521bac31d547f6409.jpg">
      <img tabindex="1" draggable="false" class="icon btn" src="https://i.hizliresim.com/g15mqud.png">
      
      <!----FOCUS----->
      <div tabindex="1" class="focus-bar bell-bar">nothing</div>
      <!-------------------->
      <div tabindex="1" class="focus-bar message-bar">you are alone</div>
      <!-------------------->
      <div tabindex="1" class="focus-bar pp-bar"><img src="https://i.pinimg.com/564x/bd/94/ce/bd94ce28cf8aefb521bac31d547f6409.jpg"><a href="https://github.com/devrimos" target="_blank">devrimos</a></div>
      <!-------------------->
      <div tabindex="1" class="focus-bar btn-bar">ยฏ\_( อกยฐ อœส– อกยฐ)_/ยฏ</div>
      
    </div>
  </div>
  <!--------------------------->
  <div class="responsive-search-bar">
      <input type="text">
      <p class="close">โŒ</p>
    </div>
  <!--------------------------->
  <div class="container">
    <div class="window">
      <img class="foto" src="https://i.pinimg.com/736x/47/5e/ba/475eba57454015bfe214e8722e2422a1.jpg">
      <p class="content">Follow me</p>
      <img class="user" src="https://i.pinimg.com/236x/58/9c/8f/589c8ffa48aa58004b6221b60a15f05e.jpg">
      <a class="username">bruhmomento</a>
      
      <div class="hover-zone">
        <div class="top-bar">
          <p>Profile โŒต</p>
          <a>Save</a>
        </div>
        <!-------------------->
        <div class="bottom-bar">
          <a>โ†— website.com</a>
          <div class="radius-ico">
            <img src="https://cdn3.iconfinder.com/data/icons/iconset-1-1/24/icon_set_outlinder-10-256.png">
            <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-more-256.png">
          </div>
        </div>
      </div>
    </div>
    <!-------------------->
    <div class="window">
      <img class="foto" src="https://i.pinimg.com/236x/34/0c/43/340c4350e10d6fac215d2a1a28410f6a.jpg">
        <p class="content">Like my pen</p>
      <img class="user" src="https://i.pinimg.com/236x/95/9c/d3/959cd32eba7a0b6cecacfe086a6c1a47.jpg">
      <a class="username">devrimos</a>
      
      <div class="hover-zone">
        <div class="top-bar">
          <p>Profile โŒต</p>
          <a>Save</a>
        </div>
        <!-------------------->
        <div class="bottom-bar">
          <a>โ†— website.com</a>
          <div class="radius-ico">
            <img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconset-1-1/24/icon_set_outlinder-10-256.png">
            <img draggable="false" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-more-256.png">
          </div>
        </div>
      </div>
    </div>
    <!-------------------->
    <div class="window">
      <img class="foto" src="https://i.pinimg.com/564x/cc/3a/4c/cc3a4c281e75b599b967e1bc8e6e3863.jpg">
        <p class="content">Hover</p>
      <img class="user" src="https://i.pinimg.com/236x/8b/2b/aa/8b2baa42f72980861f541a315446ec5f.jpg">
      <a class="username">usamaladin</a>
      
      <div class="hover-zone">
        <div class="top-bar">
          <p>Profile โŒต</p>
          <a>Save</a>
        </div>
        <!-------------------->
        <div class="bottom-bar">
          <a>โ†— website.com</a>
          <div class="radius-ico">
            <img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconset-1-1/24/icon_set_outlinder-10-256.png">
            <img draggable="false" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-more-256.png">
          </div>
        </div>
      </div>
    </div>
    <!-------------------->
    <div class="window">
      <img class="foto" src="https://i.pinimg.com/236x/69/1b/17/691b1705fc94d871d2fc6207bf8c4fe8.jpg">
        <p class="content">Yeeesss</p>
      <img class="user" src="https://i.pinimg.com/236x/46/1d/f7/461df750a734b8c580246e6618c6919a.jpg">
      <a class="username">anon</a>
      
      <div class="hover-zone">
        <div class="top-bar">
          <p>Profile โŒต</p>
          <a>Save</a>
        </div>
        <!-------------------->
        <div class="bottom-bar">
          <a>โ†— website.com</a>
          <div class="radius-ico">
            <img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconset-1-1/24/icon_set_outlinder-10-256.png">
            <img draggable="false" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-more-256.png">
          </div>
        </div>
      </div>
    </div>
    
  </div>
</body>
</html>

4. By Dudley Storey

Made by Dudley Storey. Pure CSS Pinterest Posts Columnar Layout. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@font-face{font-family:'Calluna';
 src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/callunasansregular-webfont.woff') format('woff');
}
body {
	background: url(//subtlepatterns.com/patterns/scribble_light.png);
  font-family: Calluna, Arial, sans-serif;
  min-height: 1000px;
}
#columns {
	column-width: 320px;
	column-gap: 15px;
  width: 90%;
	max-width: 1100px;
	margin: 50px auto;
}

div#columns figure {
	background: #fefefe;
	border: 2px solid #fcfcfc;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	padding: 15px;
	padding-bottom: 10px;
	transition: opacity .4s ease-in-out;
  display: inline-block;
  column-break-inside: avoid;
}

div#columns figure img {
	width: 100%; height: auto;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

div#columns figure figcaption {
  font-size: .9rem;
	color: #444;
  line-height: 1.5;
}

div#columns small { 
  font-size: 1rem;
  float: right; 
  text-transform: uppercase;
  color: #aaa;
} 

div#columns small a { 
  color: #666; 
  text-decoration: none; 
  transition: .4s color;
}

div#columns:hover figure:not(:hover) {
	opacity: 0.4;
}

@media screen and (max-width: 750px) { 
  #columns { column-gap: 0px; }
  #columns figure { width: 100%; }
}
</style>
</head>
<body>
  <div id="columns">
  <figure>
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
	<figcaption>Cinderella wearing European fashion of the mid-1860โ€™s</figcaption>
	</figure>
	
	<figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
	<figcaption>Rapunzel, clothed in 1820โ€™s period fashion</figcaption>
	</figure>
	
  <figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
	<figcaption>Belle, based on 1770โ€™s French court fashion</figcaption>
	</figure>
  
	<figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
	<figcaption>Mulan, based on the Ming Dynasty period</figcaption>
	</figure>
	
   <figure>
	 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
	<figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
	</figure>
	
   <figure>
	 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
	<figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
	</figure>
  
	<figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
	<figcaption>Snow White, based on 16th century German fashion</figcaption>
	</figure>	
  
   <figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
	<figcaption>Ariel wearing an evening gown of the 1890โ€™s</figcaption>
	</figure>
  
    <figure>
	<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tiana.jpg">
    <figcaption>Tiana wearing the <i>robe de style</i> of the 1920โ€™s</figcaption>
	</figure>	
  <small>Art &copy; <a href="//clairehummel.com">Claire Hummel</a></small>
	</div>
</body>
</html>

5. By Gerrit

Made by Gerrit. Pinterest Header Clone. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 
<style>
* {
  box-sizing: border-box;
  transition: 0.125s all ease;
}

body {
  background-color: #efefef;
}

header {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 8px -8px;
}
header .logo {
  fill: #d00;
}
header a {
  display: inline-block;
  padding: 0.75rem;
  border-radius: 9999px;
  text-decoration: none;
  color: #222;
  font-weight: 500;
}
header a:hover {
  background-color: #efefef;
}
header a + a {
  margin-left: 0.25rem;
}
header input {
  flex: 1;
  margin: 0 0.25rem;
  border: 0;
  background-color: #efefef;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  height: 3rem;
}
header input:focus {
  outline: 0;
  background-color: #fff;
  box-shadow: inset 0 0 0 2px #eee;
}
header svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  fill: #222;
}
header img {
  border-radius: 9999px;
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}
</style>
</head>
<body>
  <header>
	<a href="#"><svg class="logo" height="24" width="24" viewBox="0 0 24 24" aria-hidden="true" aria-label="" role="img"><path d="M0 12c0 5.123 3.211 9.497 7.73 11.218-.11-.937-.227-2.482.025-3.566.217-.932 1.401-5.938 1.401-5.938s-.357-.715-.357-1.774c0-1.66.962-2.9 2.161-2.9 1.02 0 1.512.765 1.512 1.682 0 1.025-.653 2.557-.99 3.978-.281 1.189.597 2.159 1.769 2.159 2.123 0 3.756-2.239 3.756-5.471 0-2.861-2.056-4.86-4.991-4.86-3.398 0-5.393 2.549-5.393 5.184 0 1.027.395 2.127.889 2.726a.36.36 0 0 1 .083.343c-.091.378-.293 1.189-.332 1.355-.053.218-.173.265-.4.159-1.492-.694-2.424-2.875-2.424-4.627 0-3.769 2.737-7.229 7.892-7.229 4.144 0 7.365 2.953 7.365 6.899 0 4.117-2.595 7.431-6.199 7.431-1.211 0-2.348-.63-2.738-1.373 0 0-.599 2.282-.744 2.84-.282 1.084-1.064 2.456-1.549 3.235C9.584 23.815 10.77 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12"></path></svg></a>
	<a href="#">Lorem</a>
	<a href="#">Ipsum</a>
	<a href="#">Lorem</a>
	<input type="text" placeholder="Lorem" />
	<a href="#"><svg class="gUZ B9u U9O kVc" height="24" width="24" viewBox="0 0 24 24" aria-hidden="true" aria-label="" role="img"><path d="M12 24c-1.66 0-3-1.34-3-3h6c0 1.66-1.34 3-3 3zm7-10.83c1.58 1.52 2.67 3.55 3 5.83H2c.33-2.28 1.42-4.31 3-5.83V7c0-3.87 3.13-7 7-7s7 3.13 7 7v6.17z"></path></svg></a>
	<a href="#"><svg class="Hn_ gUZ B9u U9O kVc" height="24" width="24" viewBox="0 0 24 24" aria-hidden="true" aria-label="" role="img"><path d="M18 12.5a1.5 1.5 0 1 1 .001-3.001A1.5 1.5 0 0 1 18 12.5m-6 0a1.5 1.5 0 1 1 .001-3.001A1.5 1.5 0 0 1 12 12.5m-6 0a1.5 1.5 0 1 1 .001-3.001A1.5 1.5 0 0 1 6 12.5M12 0C5.925 0 1 4.925 1 11c0 2.653.94 5.086 2.504 6.986L2 24l5.336-3.049A10.93 10.93 0 0 0 12 22c6.075 0 11-4.925 11-11S18.075 0 12 0"></path></svg></a>
	<a href="#"><img src="https://i.pinimg.com/75x75_RS/b7/17/2d/b7172de8f1c97ec219d96795b8e913cf.jpg" alt=""></a>
</header>
</body>
</html>
 

6. By ET

Made by ET. Basic Pinterest Clone. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  <title></title>
  <style>
    #header {
      width: 100%;
      background-color: white;
      color: #a1a1a1;
      margin-bottom: -20px;
      border-bottom: 1px solid #f4f4f4;
      height: 55px;
    }

    #header ul li {
      list-style-type: none;
      font-family: arial;
      font-size: .8em;
      font-weight: bold;
      display: inline-block;
    }

    #logo {
      float: left;
    }

    #logo img {
      width: 35px;
      float: left;
    }

    #search {
      width: 50%;
      float: left;
      margin-left: 240px;
      padding-top: 10px;
    }

    #search-box {
      width: 150%;
      height: 25px;
      border-radius: 8px;
      padding: 10px;
      background-color: #e9e9e9;
      margin: -190px;
      border: 0px;
    }

    #nav-buttons {
      float: right;
      margin-top: 2px;
      margin-right: 20px;
      margin-left: 20px;
    }

    #nav-buttons a {
      color: #bababa;
      text-decoration: none;
      font-size: 1.9em;
      margin-left: 30px;
    }

    #nav-buttons a:hover {
      color: #5f5f5f;
    }

    #wrapper {
      width: 90%;
      max-width: 1100px;
      min-width: 800px;
      margin: 50px auto;
    }

    #columns {
      -webkit-column-count: 3;
      -webkit-column-gap: 10px;
      -webkit-column-fill: auto;
      -moz-column-count: 3;
      -moz-column-gap: 10px;
      -moz-column-fill: auto;
      column-count: 3;
      column-gap: 10px;
      column-fill: auto;
    }

    .pin {
      display: inline-block;
      background: #FEFEFE;
      border: 2px solid #FAFAFA;
      box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
      margin: 0px 2px 15px 0px;
      -webkit-column-break-inside: avoid;
      -moz-column-break-inside: avoid;
      column-break-inside: avoid;
      padding: 15px 15px 5px 15px;
      background: -webkit-linear-gradient(45deg #FFF, #F9F9F9);
      opacity: 1;
      -webkit-transition: all .2s ease;
      -moz-transition: all .2s ease;
      -o-transition: all .2s ease;
      transition: all .2s ease;
    }
    .pin img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}
  </style>
</head>

<body>
  <div id="header">
    <ul>
      <div id="logo"><img src="https://github.com/jordanhudgens/pinterest-html-css-clone/blob/master/img/logo.png?raw=true" alt="logo" /></div>

      <div id="search">
        <input id="search-box" type="text" placeholder="Search" />
      </div>

      <div id="nav-buttons">
        <a href="#"><i class="fa fa-bars" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-user" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-commenting" aria-hidden="true"></i></a>
      </div>
    </ul>
  </div>

  <div id="wrapper">
    <div id="columns">
      <div class="pin">
        <img src="https://i.redditmedia.com/h9RoiUkLGehev_fIBLwc9-uigzO00v6MmZDWyERkaYo.jpg?fit=crop&crop=faces%2Centropy&arh=2&w=640&s=0d36ce703a5a522d5ba32442d9bcb95c" />
        <p>Cotton picker at night looks like a huge concert crowd</p>
      </div>

      <div class="pin">
        <img src="https://i.redditmedia.com/S660vfHmOt8IUmCtnWJgerMMjhICfGR5P3-8xsLwPFM.jpg?fit=crop&crop=faces%2Centropy&arh=2&w=640&s=0046d092ac5d747137a9eca7cb87d594" />
        <p>I work in a kitchen. You have no idea how many people say 'You look like the guy from ratatouille'. Every damn minute.</p>
      </div>

      <div class="pin">
        <img src="https://i.redd.it/lun0fx0ryt001.jpg" />
        <p>The Progression of Alzheimer's Through My Mom's Crocheting</p>
      </div>

      <div class="pin">
        <img src="https://i.redditmedia.com/QdFIh4XXEpFymb1-wbsYQfBZF3MD7erFbozX0qyYu3s.jpg?fit=crop&crop=faces%2Centropy&arh=2&w=640&s=df7a40519367e4d7afa19891de12326b" />
        <p>This gorilla looks like he decided to have his undergraduate philosophy lecture outside since it's a nice day</p>
      </div>

      <div class="pin">
        <img src="https://i.redd.it/yg7shngj1ioz.jpg" />
        <p>Skinny Kim Jong Un would make the situation with North Korea more intimidating</p>
      </div>

      <div class="pin">
        <img src="https://i.redditmedia.com/jWhpLjYLpZ-HR_Lj-MhI1QaBFsNYAeyN9Q4k_N3KaVk.jpg?fit=crop&crop=faces%2Centropy&arh=2&w=640&s=839a5ff9d706427fb21a3cb79f4840a1" />
        <p>At this point, sure</p>
      </div>

      <div class="pin">
        <img src="https://i.redditmedia.com/cmyGyA7tghvwyaIe31EUBvP4uD2I1_jyBME01v5IPYo.png?fit=crop&crop=faces%2Centropy&arh=2&w=640&s=be3022bb38fe1d732b87217c7e6e28dc" />
        <p>Before they're ripe it's easier to understand why they're called eggplants.</p>
      </div>

      <div class="pin">
        <img src="https://i.redditmedia.com/3ji-XmLjzDv_3QCr_HGjkSpGJWkOWv_j6cKsIvW0x7A.jpg?fit=crop&crop=faces%2Centropy&arh=2&w=640&s=62a99a9774d1e6dc877954112a490724" />
        <p>Now we're asking the real questions</p>
      </div>

      <div class="pin">
        <img src="https://i.redditmedia.com/iEQrEZCdEIbX5MoaP_zZUDGd5fau7bw2nWcuJJlkUjQ.jpg?fit=crop&crop=faces%2Centropy&arh=2&w=640&s=96315499a11fa5dda9d55eaeb4f35a4e" />
        <p>Tesla spends $0 per year on advertising. Today Tesla has the greatest car commercial of all time
        </p>
      </div>

      <div class="pin">
        <img src="https://i.redditmedia.com/VeoKEpynG_xeuml3Bl68TMQUtwuQNqEOEdzzxXFce1Q.jpg?fit=crop&crop=faces%2Centropy&arh=2&w=640&s=84711558adb8300783b1a421ad9e5db3" />
        <p>This is me sleeping behind the news desk while my mom (anchorwoman) works. 1995, maybe?</p>
      </div>

      <div class="pin">
        <img src="https://i.redditmedia.com/NfOKEg4lr34s7y2CGL-OCcpDBhWg59Yj07vo3JeiNxk.jpg?fit=crop&crop=faces%2Centropy&arh=2&w=640&s=3705a8305d15f2bd3c8da2eb533ae60c" />
        <p>The Difference Between a Small vs Medium Orange Juice at McDonalds</p>
      </div>

      <div class="pin">
        <img src="https://i.redd.it/794ayvylk7uz.jpg" />
        <p>Looks like Donald Trump wrote to New York Magazine in 1992.</p>
      </div>

      <div class="pin">
        <img src="https://i.redditmedia.com/vx9adLLhpTISWvd-3QnHwDif7OJJ8n-0Sw4i1fLO4Ks.jpg?fit=crop&crop=faces%2Centropy&arh=2&w=640&s=f57eaf705ef7a7d4a880ba81630a66b8" />
        <p>Day 14 of wife being on a work trip</p>
      </div>

      <div class="pin">
        <img src="https://i.redditmedia.com/1YeeIH7xl2MgCzmLM0fvVvqluqqaV7uEaguH5Gm2q-4.png?fit=crop&crop=faces%2Centropy&arh=2&w=640&s=e18543822f23ee11087ffcd01bf7a2c6" />
        <p>When Dominos paves the potholes because the city can't be bothered to do it</p>
      </div>

      <div class="pin">
        <img src="https://i.redditmedia.com/lzcL5WbUuBr7pI9zIM9ZbUSrETZR1UNb-g6C5DehYss.jpg?fit=crop&crop=faces%2Centropy&arh=2&w=960&s=cb3aac42f6213162626bc73bb80c3053" />
        <p>Selfie with the crew</p>
      </div>
    </div>
  </div>
</body>
</html>

7. By Nick

Made by Nick. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
#header {
    width:100%;
        background-color: white;
    color:grey;
    margin-bottom: -20px;
    border-bottom: 1px solid white;
    height: 55x;
}

#header ul li{
    list-style-type: none;
        font-family: arial;
    font-size:8em;
    font-weight:bold;
    display:inline-block;
    

}

#logo{
    float:left;
}

#logo img {
    float:left;
    width: 35px;
    float:left;
}

#search {
    width: 50%;
    float: left;
    margin-left: 240px;
    padding-top: 10px;
}

#search-box {
 
    width: 150%;
    height:25px;
    border-radius:8px;
    padding:10px;
    background-color:grey;
    margin:-190px;
    border:0px;
   
   }
#nav-buttons {
    float:right;
    margin-top:2px;
    margin-right:20px;
}

#nav-buttons a{
    color:grey;
    text-decoration:none;
    font-size:1.9em;
    margin-left:30px;
}
#nav-buttons a:hover {
    color:black;
}

#wrapper {
    width:90%;
    max-width:1100px;
    min-width:800px;
    margin:50px auto;
    padding-top: 20px;
  
}

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 10px;
    column-fill: auto;
}

.pins {
     display: inline-block;
    background: white;
    border: 2px solid grey;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0px 2px 15px 0px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px 15px 5px 15px;
    background: -webkit-linear-gradient(45deg grey);
    opacity: 1;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.pins img{
    width:100%;
        border-bottom:1px solid black;
    padding-bottom:15px;
    margin-bottom:5px;
    
}
.pins p{
    font:12px;
    color:grey;
    margin:0;
}
.pins:hover{
    border:white;
}
</style>
</head>
<body>
    <div id="header">
        <ul>
            <div id="logo"><img src="https://i.pinimg.com/736x/a3/b0/b0/a3b0b06fbd994f10e397e9f7dae494a6--male-hair-loss-hair-loss-solution.jpg" alt:"logo"/></div>
                <div id="search">
                    <input id="search-box" type="text" placeholder="search" />
                </div>
                <div id="nav-buttons">
                    <a href><i class="fa fa-bars" aria-hidden="true"></i>  </a> 
                    <a href><i class="fa fa-user" aria-hidden="true"></i></a>
                    <a href><i class="fa fa-commenting" aria-hidden="true"></i></a>
            </div>
        </ul>
        </div>

        <div id="wrapper">
            <div id="columns">
                <div class="pins">
                    <img src="https://www.pandotrip.com/wp-content/uploads/2015/07/Top-10-Kayaking-Norway2-980x653.jpg">
                    <p>
                        Ipsom
                    </p>
                </div>
                <div class="pins">
                    <img src="https://static1.businessinsider.com/image/54b3fc71eab8ea735fc9b879-1200-600/bcs-championship-field.jpg">
                    <p>
                        Ipsom</p>
                </div>
                <div class="pins">
                    <img src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
                    <p>
                       lorem
                    </p>
                </div>
                <div class="pins">
                    <img src="https://cdn-s3.si.com/s3fs-public/styles/marquee_large_2x/public/2018/01/05/trae-young-oklahoma-nba.jpg?itok=GcD6yBxK">
                    <p>
                        Lorem
                    </p>
                </div>
                <div class="pins">
                    <img src="https://www.sundanceresort.com/wp-content/uploads/2016/08/nature-walk-1600x1400-c-center.jpg">
                    <p>
                        Ipsom
                    </p>
                </div>
                <div class="pins">
                    <img src="https://www.pandotrip.com/wp-content/uploads/2015/07/Top-10-Kayaking-Norway2-980x653.jpg">
                    <p>
                        Ipsom</p>
                </div>
                <div class="pins">
                    <img src="https://static1.businessinsider.com/image/54b3fc71eab8ea735fc9b879-1200-600/bcs-championship-field.jpg">
                    <p>
                        Ipsom</p>
                </div>
                <div class="pins">
                    <img src="http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg">
                    <p>
                        Lorem
                    </p>
                </div>
                <div class="pins">
                    <img src="https://cdn-s3.si.com/s3fs-public/styles/marquee_large_2x/public/2018/01/05/trae-young-oklahoma-nba.jpg?itok=GcD6yBxK">
                    <p>
                       Lorem
                    </p>
                </div>
                <div class="pins">
                    <img src="https://www.sundanceresort.com/wp-content/uploads/2016/08/nature-walk-1600x1400-c-center.jpg">
                    <p>
                        Ipsom
                    </p>

                </div>
            </div>
        </div>
</body>
</html>