Pinterest Thumb

Developer
Kevin Gimbel
Size
5,308 Kb
Views
42,504
  1. Pinterest Thumb Previews
  2. Pinterest Thumb HTML Codes
  3. Pinterest Thumb CSS Codes
  4. Pinterest Thumb JS Codes

How do I make an pinterest thumb?

Design taken from http://dribbble.com/shots/1077195-Pinterest-ThumbHTML/CSS by Kevin Gimbel.. What is a pinterest thumb? How do you make a pinterest thumb? This script and codes were developed by Kevin Gimbel on 11 August 2022, Thursday.

Pinterest Thumb Previews
IQ Test

Pinterest Thumb - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pinterest Thumb</title> <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="pin__container"> <header class="pin__image"> <img src="http://static.kevingimbel.de/codepenio/img/pinterest thumb_mainimg.jpg" /> </header><!-- pin__image --> <div class="pin__info"> <h3 class="pin__title">Matilda</h3> <div class="pin__meta"> <ul> <li> <span class="fontawesome-retweet"> 26</span> </li> <li> <span class="fontawesome-heart"> 10</span> </li> <li> <span class="typicons-message"></span> <span class="typicon--fix">1</span> </li> </ul> <p class="pin__source"> Pinned from <b>uncovet.com</b> </p> </div><!-- pin__meta --> </div><!-- pin__info --> <section class="pin__comments--container"> <div class="comment__single"> <aside class="comment__avatar"> <img src="http://static.kevingimbel.de/img/avatar/max.jpg" /> </aside><!-- comment__avatar --> <div class="comment__body"> <h4 class="comment__commentator-name">Max Boll</h4> <p class="comment__content">This is wonderful!</p> </div><!-- comment__body --> </div><!-- comment__single --> <div class="comment__single"> <aside class="comment__avatar"> <img src="http://static.kevingimbel.de/img/avatar/kevin.jpg" /> </aside><!-- comment__avatar --> <div class="comment__body"> <textarea class="comment__input" placeholder="This is a new comment!"></textarea> <input type="submit" class="add_button" value="Add" /> </div><!-- comment__body --> </div><!-- comment__single --> </section><!-- pin__comments -->
</section> <!-- pin__container --> <script src="js/index.js"></script>
</body>
</html>

Pinterest Thumb - Script Codes CSS Codes

/* ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++ +++++++++++++++++ I C O N F O N T S ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++
*/
@import url(http://weloveiconfonts.com/api/?family=fontawesome|typicons);
/* fontawesome */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
/* typicons */
[class*="typicons-"]:before { font-family: 'Typicons', sans-serif; font-size: 1.4em; position: absolute; top: 0;
}
.typicon--fix { padding-left: 22px; /* I hate to use magical numbers and normaly I wouldn't do this but this time it was needed. */
}
/* ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++ B A S I C S ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++
*/
* { margin: 0; padding: 0; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { font-family: "Ubuntu", sans-serif; font-size: 1em; color: #313232; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2MyYmNiYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQyM2UzZSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -moz-radial-gradient(center, #c2bcbb, #423e3e); background: -webkit-radial-gradient(center, #c2bcbb, #423e3e); background: radial-gradient(center, #c2bcbb, #423e3e);
}
/* ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++ E X T E N D S ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++
*/
/* used for @extend only. */
.ext__pin-border-radius, .pin__container, .comment__avatar img, .comment__input, .add_button { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
/* ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++ C O N T A I N E R ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++
*/
.pin__container { width: 300px; height: auto; margin: 20px auto; background: #f1f1f1; box-shadow: 0 0 30px rgba(66, 62, 62, 0.4);
}
.pin__image { width: 100%; height: 300px; overflow: hidden;
}
.pin__image img { width: 300px; height: auto; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px;
}
/* ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++ P I N I N F O ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++
*/
.pin__title { font-size: 1.3em; padding: 20px 0 0 20px; font-weight: 400;
}
.pin__meta { color: #A3A4A4;
}
.pin__meta ul > li { font-size: 0.99em; display: inline; list-style-type: none; margin: 0 0 0 15px;
}
.pin__meta ul > li:first-child { margin: 0 0 0 20px;
}
.pin__source { font-size: 0.95em; margin: 20px 0 10px 0; padding: 25px 20px 15px 20px; border-top: 1px solid #A3A4A4;
}
/* ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++ C O M M E N T S ++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++
*/
.pin__comments--container { width: 100%; height: auto; padding: 20px; background: #DFE3E4; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.comment__single { overflow: hidden; *zoom: 1; margin: 20px 0 0 0;
}
.comment__single:first-child { margin: 0;
}
.comment__avatar { float: left; width: 20%;
}
.comment__avatar img { width: 50px; height: auto;
}
.comment__body { float: right; width: 80%; padding-left: 10px;
}
.comment__commentator--name { font-size: 1.1em;
}
.comment__content { font-size: 0.9em;
}
.comment__input { width: 100%; height: 100px; padding: 10px; font-family: "Ubuntu", sans-serif; border: 1px solid #A3A4A4; resize: none;
}
.add_button { margin: 10px 0 0 0; padding: 7px 21px; font-size: 0.75em; color: white; font-weight: 500; border: none; float: right; box-shadow: inset 0 -3px 7px rgba(0, 0, 0, 0.3); background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2MzMWEyMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q2MWQyNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -moz-linear-gradient(90deg, #c31a22, #d61d25); background: -webkit-linear-gradient(90deg, #c31a22, #d61d25); background: linear-gradient(0deg, #c31a22, #d61d25);
}
.add_button:hover { cursor: pointer; box-shadow: inset 0 -3px 7px rgba(0, 0, 0, 0.3); background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q2MWQyNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2MzMWEyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -moz-linear-gradient(90deg, #d61d25, #c31a22); background: -webkit-linear-gradient(90deg, #d61d25, #c31a22); background: linear-gradient(0deg, #d61d25, #c31a22);
}

Pinterest Thumb - Script Codes JS Codes

/*
Build from this Dribbble Shot http://dribbble.com/shots/1077195-Pinterest-Thumb
Design http://dribbble.com/noptar / https://twitter.com/noptar
HTML/CSS by Myself.
*/
Pinterest Thumb - Script Codes
Pinterest Thumb - Script Codes
Home Page Home
Developer Kevin Gimbel
Username kevingimbel
Uploaded August 11, 2022
Rating 3.5
Size 5,308 Kb
Views 42,504
Do you need developer help for Pinterest Thumb?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Gimbel (kevingimbel) Script Codes
Name
Felixble Product Flags
.LANG
CSS Pre-Block Overflow example
Nerdli.st
Chat UI - WIP
Pure CSS3 single element Link from TLOZ
CSS3 only Turret from Portal
Custom Rating buttons with Icon Fonts
An Object-Oriented ToDo-List
CSS3 only classic Gameboy
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!