Tutorials

How to Design Responsive Pinterest Landing & Posts Pages UI Clone in HTML5 CSS3 & JavaScript

Default Featured Image

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /*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>
<body>
    <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>
</body>
<script>
    document.getElementById("two").>

Pinterest Clone Screenshot

Pinterest Clone Screenshot

Related posts:

  1. How to Design Old Yahoo Messenger Login/Register UI Clone in HTML5 CSS3 JavaScript
  2. JavaScript HTML2PDF.js Add Header/Footer to All PDF Pages
  3. Angular 13 jsPDF Html2Canvas Project: Export Multiple HTML Div Content in Different PDF Pages Using TypeScript
  4. Wordle Clone JavaScript – Full Source Code
  5. Build English Dictionary App Using JavaScript HTML5 CSS3
Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.

Leave a Comment
Share
Published by
Furqan
September 21, 2022 8:28 pm

Recent Posts

ChatGPT Atlas vs Google Chrome: Which Browser Should You Choose in 2025?

Google Chrome has dominated web browsing for over a decade with 71.77% global market share.…

October 25, 2025

Is Perplexity Comet Browser Worth It? The Honest 2025 Review

Perplexity just made its AI-powered browser, Comet, completely free for everyone on October 2, 2025.…

October 25, 2025

Is ChatGPT Atlas Worth It? A Real Look at OpenAI’s New Browser

You've probably heard about ChatGPT Atlas, OpenAI's new AI-powered browser that launched on October 21,…

October 25, 2025

Perplexity Comet Browser Alternatives: 7 Best AI Browsers in 2025

Perplexity Comet became free for everyone on October 2, 2025, bringing research-focused AI browsing to…

October 25, 2025

ChatGPT Atlas Alternatives: 7 Best AI Browsers in 2025

ChatGPT Atlas launched on October 21, 2025, but it's only available on macOS. If you're…

October 25, 2025

ChatGPT Atlas vs Comet Browser: Best AI Browser in 2025?

Two AI browsers just entered the ring in October 2025, and they're both fighting for…

October 25, 2025