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
  6. Create Digital Alarm Clock With Ringtone & Custom Icons in JavaScript HTML5 CSS3
  7. Build File Downloader From URL Using JavaScript HTML5 CSS3
  8. Build Random Song Lyrics Generator Using JavaScript HTML5 CSS3
  9. Build Random Pokemon Generator Using JavaScript, HTML5 & CSS3
  10. Build Bitly URL Shortener Clone Using Node.js Express EJS MySQL
  11. Date Range Picker in Angular 10 (Material Design Example)
  12. 16 Best Responsive WordPress Education Themes 2025
  13. jsPDF Html2Canvas Tutorial: Convert Div With Attribute Hidden to PDF and Print it in Browser Using HTML5 and JavaScript
  14. Build Vorici Chromatic Calculator Using HTML5 and JavaScript
  15. Build a New Year Countdown Timer Clock in JavaScript & HTML5
  16. Create PDF Using Dynamic HTML5 Template in Python 3 Flask pdfkit
  17. JavaScript Keylogger Tutorial | How to Make a Simple Keylogger in JavaScript
  18. Find All Words Which are Greater Than Given Length X in String Using JavaScript
  19. PHP to JavaScript Converter Online Full Source Code
  20. Convert HTML to PDF Using JavaScript HTML2PDF.js Library
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

MiniMax-M1 vs GPT-4o vs Claude 3 Opus vs LLaMA 3 Benchmarks

MiniMax-M1 is a new open-weight large language model (456 B parameters, ~46 B active) built with hybrid…

June 22, 2025

How to Use Husky with npm to Manage Git Hooks

Managing Git hooks manually can quickly become tedious and error-prone—especially in fast-moving JavaScript or Node.js…

June 22, 2025

How to Use Lefthook with npm to Manage Git Hooks

Git hooks help teams enforce code quality by automating checks at key stages like commits…

June 22, 2025

Lefthook vs Husky: Which Git Hooks Tool is Better? [2025]

Choosing the right Git hooks manager directly impacts code quality, developer experience, and CI/CD performance.…

June 22, 2025

Llama 3.1 vs GPT-4 Benchmarks

We evaluated the performance of Llama 3.1 vs GPT-4 models on over 150 benchmark datasets…

July 24, 2024

Transforming Manufacturing with Industrial IoT Solutions and Machine Learning

The manufacturing industry is undergoing a significant transformation with the advent of Industrial IoT Solutions.…

July 6, 2024