{"id":3473,"date":"2022-09-21T20:28:01","date_gmt":"2022-09-21T15:28:01","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3473"},"modified":"2022-09-21T20:28:03","modified_gmt":"2022-09-21T15:28:03","slug":"how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/","title":{"rendered":"How to Design Responsive Pinterest Landing &#038; Posts Pages UI Clone in HTML5 CSS3 &#038; JavaScript"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">index.html<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;style&gt;\n    \/*ROOT*\/\n*{\n  outline:none;\n}\nbody{\n  margin:0px;\n  padding:0px;\n  font-family: arial;\n}\nimg{\n  user-select:none;\n}\n\n\/*MENU*\/\n.menu{\n  max-width:100%;\n  display:flex;\n  align-items:center;\n  padding:10px;\n  font-weight:bold;\n}\n.menu .logo{\n  width:25px;\n  padding:10px;\n  cursor:pointer;\n  border-radius:50%;\n}\n.menu .logo:hover{\n  background:#eeeeee;\n}\n.menu .home{\n  color:#fff;\n  background:#000000;\n  padding:12px 25px;\n  cursor:pointer;\n  user-select:none;\n  border-radius:40px;\n  margin:0px 5px;\n}\n.menu .search-bar{\n  width:100%;\n  margin:0px 5px;\n  padding:12px 35px;\n  border-radius:40px;\n  outline:none;\n  position:relative;\n  background-color:#efefef;\n  font-size:15px;\n  background-image:url(&quot;https:\/\/cdn4.iconfinder.com\/data\/icons\/music-ui-solid-24px\/24\/search-3-256.png&quot;);\n  background-size:21px;\n  background-repeat:no-repeat;\n  background-position:center left;\n  background-position:10px;\n  color:gray;\n  border:4px solid transparent;\n}\n.menu .search-bar:hover{\n  background-color:#3333;\n}\n.menu .search-bar:focus{\n  border:4px solid #7bb5f0;\n  padding:12px 20px;\n  background-image:none;\n}\n.menu .search-bar::placeholder{\n  user-select:none;\n}\n.icon-container{\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  position:relative;\n}\n.icon-container .icon{\n  width:25px;\n  border-radius:50%;\n  cursor:pointer;\n  padding:10px;\n}\n.icon-container .icon:hover{\n  background-color:#eeeeee;\n}\n.icon-container .btn{\n  width:14px;\n  padding:5px;\n}\n.focus-bar{\n  width:250px;\n  height:350px;\n  border-radius:15px;\n  background:#fff;\n  border:2px solid #3333;\n  position:absolute;\n  top:40px;\/*50px*\/\n  left:-90px;\n  visibility:hidden;\n  opacity:0;\n  transition:all 0.3s;\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  align-content:center;\n  user-select:none;\n  z-index:99;\n}\n.bell:focus + .message + .pp + .btn + .bell-bar, .bell-bar:focus{\n  visibility:visible;\n  opacity:1;\n  top:50px;\n}\n.message:focus + .pp + .btn + .bell-bar + .message-bar, .message-bar:focus{\n  visibility:visible;\n  opacity:1;\n  top:50px;\n}\n.pp:focus + .btn + .bell-bar + .message-bar + .pp-bar, .pp-bar:focus{\n  visibility:visible;\n  opacity:1;\n  top:50px;\n}\n.btn:focus + .bell-bar + .message-bar + .pp-bar + .btn-bar, .btn-bar:focus{\n  visibility:visible;\n  opacity:1;\n  top:50px;\n}\n.pp-bar a{\n  text-decoration:none;\n  padding:5px 15px;\n  border:2px solid #161b22;\n  color:#161b22;\n  border-radius:5px;\n}\n.pp-bar{\n  flex-direction:column;\n}\n.pp-bar img{\n  width:150px;\n  border-radius:50%;\n  margin-bottom:20px;\n}\n.pp-bar a:hover{\n  background:#161b22;\n  color:white;\n}\n\n\/*MINI SEARCH BAR*\/\n#two{\n  display:none;\n  padding:15px;\n}\n.responsive-search-bar{\n  max-width:100%;\n  padding:40px 10px;\n  text-align:center;\n  border-radius:15px;\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  position:relative;\n  top:-300px;\n  transition:all 0.3s;\n  overflow:hidden;\n  display:none;\n  background:#fff;\n  box-shadow: 0px 0px 2px 0px #333;\n  margin:0px 5px;\n  z-index:99;\n}\n.responsive-search-bar input{\n  width:100%;\n  height:35px;\n  outline:none;\n  border-radius:40px;\n  border:4px solid transparent;\n  background-image:url(&quot;https:\/\/cdn4.iconfinder.com\/data\/icons\/music-ui-solid-24px\/24\/search-3-256.png&quot;);\n  background-size:21px;\n  background-repeat:no-repeat;\n  background-position:center left;\n  background-position:10px;\n  padding:0px 15px 0px 35px;\n  background-color:#efefef;\n}\n.responsive-search-bar input:focus{\n  border:4px solid #7bb5f0;\n}\n.responsive-search-bar p{\n  font-size:11px;\n  padding:11px;\n  margin-left:5px;\n  border-radius:50%;\n  cursor:pointer;\n  user-select:none;\n  position:absolute;\n  top:-12px;\n  right:-1px;\n  transition:all 0.3s;\n}\n.responsive-search-bar p:hover{\n  background:#eeeeee;\n  transform:rotate(-180deg);\n}\n\n\/*POSTS*\/\n.container{\n  display:flex;\n  justify-content:center;\n  align-items:center;\n  margin:100px 0px;\n  flex-wrap:wrap;\n}\n.window{\n  border-radius:20px;\n  margin:10px;\n  width:250px;\n  height:320px;\n  overflow:hidden;\n  position:relative;\n  z-index:97;\n}\n.window .foto{\n  width:100%;\n  border-radius:20px;\n  cursor:zoom-in;\n}\n.window .content{\n  margin-left:10px;\n  margin-top:-2px;\n  font-size:13px;\n  font-weight:bold;\n}\n.window .user{\n  width:40px;\n  border-radius:50%;\n  margin-top:-10px;\n  margin-left:10px;\n  cursor:pointer;\n}\n.window .username{\n  margin-top:-40px;\n  display:block;\n  margin-left:55px;\n  font-size:14px;\n  cursor:pointer;\n}\n.window .username:hover{\n  text-decoration:underline;\n}\n\n\/*HOVER ZONE*\/\n.hover-zone{\n  position:absolute;\n  top:0px;\n  width:100%;\n  height:250px;\n  border-radius:20px;\n  cursor:zoom-in ;\n  display:flex;\n  align-content:space-between;\n  align-items:baseline;\n  justify-content:center;\n  flex-wrap:wrap;\n  background-color: rgba(000, 000, 0, 0.40);\n  user-select:none;\n}\n.hover-zone .top-bar{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  padding:5px 10px;\n  width:100%;\n  border-radius:20px;\n}\n.hover-zone .top-bar p{\n  color:white;\n  font-size:20px;\n  font-weight:bolder;\n  cursor:pointer;\n  display:inline-block;\n}\n.hover-zone .top-bar a{\n  color:white;\n  padding:15px 25px;\n  font-weight:bolder;\n  font-size:18px;\n  border-radius:40px;\n  cursor:pointer;\n  background:red;\n}\n.hover-zone .top-bar a:hover{\n  background:#b80202;\n}\n.hover-zone .bottom-bar{\n  padding:10px 10px;\n  width:100%;\n  border-radius:20px;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n}\n.hover-zone .bottom-bar a{\n  padding:5px 10px;\n  background:#efefef;\n  border-radius:40px;\n  cursor:pointer;\n  font-weight:bolder;\n}\n.hover-zone .bottom-bar a:hover{\n  background:white;\n}\n.hover-zone .bottom-bar img{\n  width:20px;\n  border-radius:50%;\n  background:#efefef;\n  padding:6px;\n  cursor:pointer;\n  margin:0px 2px;\n}\n.hover-zone .bottom-bar img:hover{\n  background:white;\n}\n.hover-zone{\n  opacity:0;\n}\n.window:hover .hover-zone{\n  opacity:1;\n}\n\n\/*RESPONSIVE*\/\n@media screen and (max-width:550px){\n  .menu{\n    justify-content:center;\n  }\n  .menu .search-bar{\n    padding:0px;\n    background-position:center center;\n    cursor:pointer;\n    border-radius:50%;\n    width:30px;\n    height:30px;\n    float:left;\n  }\n  .menu .search-bar:focus{\n    padding:0px;\n    border:4px solid transparent;\n    background-image:url(&quot;https:\/\/cdn4.iconfinder.com\/data\/icons\/music-ui-solid-24px\/24\/search-3-256.png&quot;);\n    background-size:21px;\n    background-repeat:no-repeat;\n    background-position:center center;\n  }\n  .menu .search-bar::placeholder{\n    opacity:0;\n  }\n  .home{\n    display:none;\n  }\n  .focus-bar{\n    max-width:100%;\n    margin:0px 15px;\n    left:-40px;\n  }\n  .pp-bar img{\n    width:80%;\n  }\n  #one{\n    display:none;\n  }\n  #two{\n    display:inline;\n    background-color:transparent;\n  }\n  #two:hover{\n    background-color:#eeeeee;\n  }\n  .responsive-search-bar{\n    display:flex;\n  }\n  .icon-container .icon{\n    width:20px;\n    border-radius:50%;\n    cursor:pointer;\n    padding:10px;\n  }\n  .icon-container .btn{\n    width:12px;\n    padding:7px;\n  }\n  .container{\n    margin:-120px 0px 40px 0px;\n  }\n}\n&lt;\/style&gt;\n&lt;body&gt;\n    &lt;body&gt;\n        &lt;div class=&quot;menu&quot;&gt;\n          &lt;img draggable=&quot;false&quot; class=&quot;logo&quot; src=&quot;https:\/\/cdn1.iconfinder.com\/data\/icons\/logotypes\/32\/pinterest-512.png&quot;&gt;\n          &lt;a class=&quot;home&quot; &gt;Home&lt;\/a&gt;\n          &lt;input id=&quot;one&quot; type=&quot;text&quot; class=&quot;search-bar&quot; placeholder=&quot;Search&quot;&gt;\n          &lt;button id=&quot;two&quot; class=&quot;search-bar&quot;&gt;&lt;\/button&gt;\n          &lt;div class=&quot;icon-container&quot;&gt;\n            &lt;img tabindex=&quot;1&quot; draggable=&quot;false&quot; class=&quot;icon bell&quot; src=&quot;https:\/\/i.hizliresim.com\/rcvolcu.png&quot;&gt;\n            &lt;img tabindex=&quot;1&quot; draggable=&quot;false&quot; class=&quot;icon message&quot; src=&quot;https:\/\/i.hizliresim.com\/newumah.png&quot;&gt;\n            &lt;img tabindex=&quot;1&quot; draggable=&quot;false&quot; class=&quot;icon pp&quot; src=&quot;https:\/\/i.pinimg.com\/564x\/bd\/94\/ce\/bd94ce28cf8aefb521bac31d547f6409.jpg&quot;&gt;\n            &lt;img tabindex=&quot;1&quot; draggable=&quot;false&quot; class=&quot;icon btn&quot; src=&quot;https:\/\/i.hizliresim.com\/g15mqud.png&quot;&gt;\n            \n            &lt;!----FOCUS-----&gt;\n            &lt;div tabindex=&quot;1&quot; class=&quot;focus-bar bell-bar&quot;&gt;nothing&lt;\/div&gt;\n            &lt;!--------------------&gt;\n            &lt;div tabindex=&quot;1&quot; class=&quot;focus-bar message-bar&quot;&gt;you are alone&lt;\/div&gt;\n            &lt;!--------------------&gt;\n            &lt;div tabindex=&quot;1&quot; class=&quot;focus-bar pp-bar&quot;&gt;&lt;img src=&quot;https:\/\/i.pinimg.com\/564x\/bd\/94\/ce\/bd94ce28cf8aefb521bac31d547f6409.jpg&quot;&gt;&lt;a href=&quot;https:\/\/github.com\/devrimos&quot; target=&quot;_blank&quot;&gt;devrimos&lt;\/a&gt;&lt;\/div&gt;\n            &lt;!--------------------&gt;\n            &lt;div tabindex=&quot;1&quot; class=&quot;focus-bar btn-bar&quot;&gt;\u00af\\_( \u0361\u00b0 \u035c\u0296 \u0361\u00b0)_\/\u00af&lt;\/div&gt;\n            \n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;!---------------------------&gt;\n        &lt;div class=&quot;responsive-search-bar&quot;&gt;\n            &lt;input type=&quot;text&quot;&gt;\n            &lt;p class=&quot;close&quot;&gt;\u274c&lt;\/p&gt;\n          &lt;\/div&gt;\n        &lt;!---------------------------&gt;\n        &lt;div class=&quot;container&quot;&gt;\n          &lt;div class=&quot;window&quot;&gt;\n            &lt;img class=&quot;foto&quot; src=&quot;https:\/\/i.pinimg.com\/736x\/47\/5e\/ba\/475eba57454015bfe214e8722e2422a1.jpg&quot;&gt;\n            &lt;p class=&quot;content&quot;&gt;Follow me&lt;\/p&gt;\n            &lt;img class=&quot;user&quot; src=&quot;https:\/\/i.pinimg.com\/236x\/58\/9c\/8f\/589c8ffa48aa58004b6221b60a15f05e.jpg&quot;&gt;\n            &lt;a class=&quot;username&quot;&gt;bruhmomento&lt;\/a&gt;\n            \n            &lt;div class=&quot;hover-zone&quot;&gt;\n              &lt;div class=&quot;top-bar&quot;&gt;\n                &lt;p&gt;Profile \u2335&lt;\/p&gt;\n                &lt;a&gt;Save&lt;\/a&gt;\n              &lt;\/div&gt;\n              &lt;!--------------------&gt;\n              &lt;div class=&quot;bottom-bar&quot;&gt;\n                &lt;a&gt;\u2197 website.com&lt;\/a&gt;\n                &lt;div class=&quot;radius-ico&quot;&gt;\n                  &lt;img src=&quot;https:\/\/cdn3.iconfinder.com\/data\/icons\/iconset-1-1\/24\/icon_set_outlinder-10-256.png&quot;&gt;\n                  &lt;img src=&quot;https:\/\/cdn4.iconfinder.com\/data\/icons\/ionicons\/512\/icon-more-256.png&quot;&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;!--------------------&gt;\n          &lt;div class=&quot;window&quot;&gt;\n            &lt;img class=&quot;foto&quot; src=&quot;https:\/\/i.pinimg.com\/236x\/34\/0c\/43\/340c4350e10d6fac215d2a1a28410f6a.jpg&quot;&gt;\n              &lt;p class=&quot;content&quot;&gt;Like my pen&lt;\/p&gt;\n            &lt;img class=&quot;user&quot; src=&quot;https:\/\/i.pinimg.com\/236x\/95\/9c\/d3\/959cd32eba7a0b6cecacfe086a6c1a47.jpg&quot;&gt;\n            &lt;a class=&quot;username&quot;&gt;devrimos&lt;\/a&gt;\n            \n            &lt;div class=&quot;hover-zone&quot;&gt;\n              &lt;div class=&quot;top-bar&quot;&gt;\n                &lt;p&gt;Profile \u2335&lt;\/p&gt;\n                &lt;a&gt;Save&lt;\/a&gt;\n              &lt;\/div&gt;\n              &lt;!--------------------&gt;\n              &lt;div class=&quot;bottom-bar&quot;&gt;\n                &lt;a&gt;\u2197 website.com&lt;\/a&gt;\n                &lt;div class=&quot;radius-ico&quot;&gt;\n                  &lt;img draggable=&quot;false&quot; src=&quot;https:\/\/cdn3.iconfinder.com\/data\/icons\/iconset-1-1\/24\/icon_set_outlinder-10-256.png&quot;&gt;\n                  &lt;img draggable=&quot;false&quot; src=&quot;https:\/\/cdn4.iconfinder.com\/data\/icons\/ionicons\/512\/icon-more-256.png&quot;&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;!--------------------&gt;\n          &lt;div class=&quot;window&quot;&gt;\n            &lt;img class=&quot;foto&quot; src=&quot;https:\/\/i.pinimg.com\/564x\/cc\/3a\/4c\/cc3a4c281e75b599b967e1bc8e6e3863.jpg&quot;&gt;\n              &lt;p class=&quot;content&quot;&gt;Hover&lt;\/p&gt;\n            &lt;img class=&quot;user&quot; src=&quot;https:\/\/i.pinimg.com\/236x\/8b\/2b\/aa\/8b2baa42f72980861f541a315446ec5f.jpg&quot;&gt;\n            &lt;a class=&quot;username&quot;&gt;usamaladin&lt;\/a&gt;\n            \n            &lt;div class=&quot;hover-zone&quot;&gt;\n              &lt;div class=&quot;top-bar&quot;&gt;\n                &lt;p&gt;Profile \u2335&lt;\/p&gt;\n                &lt;a&gt;Save&lt;\/a&gt;\n              &lt;\/div&gt;\n              &lt;!--------------------&gt;\n              &lt;div class=&quot;bottom-bar&quot;&gt;\n                &lt;a&gt;\u2197 website.com&lt;\/a&gt;\n                &lt;div class=&quot;radius-ico&quot;&gt;\n                  &lt;img draggable=&quot;false&quot; src=&quot;https:\/\/cdn3.iconfinder.com\/data\/icons\/iconset-1-1\/24\/icon_set_outlinder-10-256.png&quot;&gt;\n                  &lt;img draggable=&quot;false&quot; src=&quot;https:\/\/cdn4.iconfinder.com\/data\/icons\/ionicons\/512\/icon-more-256.png&quot;&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;!--------------------&gt;\n          &lt;div class=&quot;window&quot;&gt;\n            &lt;img class=&quot;foto&quot; src=&quot;https:\/\/i.pinimg.com\/236x\/69\/1b\/17\/691b1705fc94d871d2fc6207bf8c4fe8.jpg&quot;&gt;\n              &lt;p class=&quot;content&quot;&gt;Yeeesss&lt;\/p&gt;\n            &lt;img class=&quot;user&quot; src=&quot;https:\/\/i.pinimg.com\/236x\/46\/1d\/f7\/461df750a734b8c580246e6618c6919a.jpg&quot;&gt;\n            &lt;a class=&quot;username&quot;&gt;anon&lt;\/a&gt;\n            \n            &lt;div class=&quot;hover-zone&quot;&gt;\n              &lt;div class=&quot;top-bar&quot;&gt;\n                &lt;p&gt;Profile \u2335&lt;\/p&gt;\n                &lt;a&gt;Save&lt;\/a&gt;\n              &lt;\/div&gt;\n              &lt;!--------------------&gt;\n              &lt;div class=&quot;bottom-bar&quot;&gt;\n                &lt;a&gt;\u2197 website.com&lt;\/a&gt;\n                &lt;div class=&quot;radius-ico&quot;&gt;\n                  &lt;img draggable=&quot;false&quot; src=&quot;https:\/\/cdn3.iconfinder.com\/data\/icons\/iconset-1-1\/24\/icon_set_outlinder-10-256.png&quot;&gt;\n                  &lt;img draggable=&quot;false&quot; src=&quot;https:\/\/cdn4.iconfinder.com\/data\/icons\/ionicons\/512\/icon-more-256.png&quot;&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          \n        &lt;\/div&gt;\n      &lt;\/body&gt;\n&lt;\/body&gt;\n&lt;script&gt;\n    document.getElementById(&quot;two&quot;).onclick=function(){\n  document.getElementById(&quot;two&quot;).style.pointerEvents=&quot;none&quot;;\n  document.getElementById(&quot;two&quot;).style.opacity=&quot;0.5&quot;;\n  document.querySelector(&quot;.responsive-search-bar&quot;).style.top=&quot;0px&quot;;\n}\ndocument.querySelector(&quot;.close&quot;).onclick=function(){\n  document.getElementById(&quot;two&quot;).style.pointerEvents=&quot;auto&quot;;\n  document.getElementById(&quot;two&quot;).style.opacity=&quot;1&quot;;\n  document.querySelector(&quot;.responsive-search-bar&quot;).style.top=&quot;-300px&quot;;\n}\n&lt;\/script&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Pinterest Clone Screenshot<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"336\" src=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/pinterest_clone-1024x336.jpg\" alt=\"Pinterest Clone Screenshot\" class=\"wp-image-3474\" srcset=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/pinterest_clone-1024x336.jpg 1024w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/pinterest_clone-300x98.jpg 300w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/pinterest_clone-768x252.jpg 768w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/pinterest_clone-1536x504.jpg 1536w, https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/pinterest_clone.jpg 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Pinterest Clone Screenshot<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>index.html Pinterest Clone Screenshot<\/p>\n","protected":false},"author":1,"featured_media":1762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Design Responsive Pinterest Landing &amp; Posts Pages UI Clone in HTML5 CSS3 &amp; JavaScript<\/title>\n<meta name=\"description\" content=\"index.html &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design Responsive Pinterest Landing &amp; Posts Pages UI Clone in HTML5 CSS3 &amp; JavaScript\" \/>\n<meta property=\"og:description\" content=\"index.html &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-21T15:28:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-21T15:28:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/pinterest_clone-1024x336.jpg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Design Responsive Pinterest Landing & Posts Pages UI Clone in HTML5 CSS3 & JavaScript","description":"index.html &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Design Responsive Pinterest Landing & Posts Pages UI Clone in HTML5 CSS3 & JavaScript","og_description":"index.html &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta","og_url":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-21T15:28:01+00:00","article_modified_time":"2022-09-21T15:28:03+00:00","og_image":[{"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/pinterest_clone-1024x336.jpg","type":"","width":"","height":""}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"How to Design Responsive Pinterest Landing &#038; Posts Pages UI Clone in HTML5 CSS3 &#038; JavaScript","datePublished":"2022-09-21T15:28:01+00:00","dateModified":"2022-09-21T15:28:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/"},"wordCount":22,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/","name":"How to Design Responsive Pinterest Landing & Posts Pages UI Clone in HTML5 CSS3 & JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","datePublished":"2022-09-21T15:28:01+00:00","dateModified":"2022-09-21T15:28:03+00:00","description":"index.html &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","width":880,"height":495,"caption":"Default Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/how-to-design-responsive-pinterest-landing-posts-pages-ui-clone-in-html5-css3-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Design Responsive Pinterest Landing &#038; Posts Pages UI Clone in HTML5 CSS3 &#038; JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"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.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3473"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3473\/revisions"}],"predecessor-version":[{"id":3475,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3473\/revisions\/3475"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/1762"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}