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 2023
  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

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

How can IT Professionals use ChatGPT?

If you're reading this, you must have heard the buzz about ChatGPT and its incredible…

September 2, 2023

ChatGPT in Cybersecurity: The Ultimate Guide

How to Use ChatGPT in Cybersecurity If you're a cybersecurity geek, you've probably heard about…

September 1, 2023

Add Cryptocurrency Price Widget in WordPress Website

Introduction In the dynamic world of cryptocurrencies, staying informed about the latest market trends is…

August 30, 2023

Best Addons for The Events Calendar Elementor Integration

The Events Calendar Widgets for Elementor has become easiest solution for managing events on WordPress…

August 30, 2023