Skip to content

Instantly share code, notes, and snippets.

@hzlzh

hzlzh/demo-using-temp.im.html

Last active December 11, 2015 01:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hzlzh/4524827 to your computer and use it in GitHub Desktop.
Save hzlzh/4524827 to your computer and use it in GitHub Desktop.
Download ZIP
demo using temp.im.html
Raw
demo-using-temp.im.html
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8">
<meta content="width=device-width" name="viewport">
<title>temp.im | A placeholder images service.</title>
<meta content="placeholder,placehold,temp,images,service,HTML,CSS" name="keywords">
<meta content="A placeholder images service." name="description">
<style>
@import url(http://fonts.googleapis.com/css?family=Voces);
@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);
/*
@name: temp.im
@author: hzlzh(hlzh.dev@gmail.com)
*/
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* Corrects `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* Addresses styling for `hidden` attribute not present in IE 8/9.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Sets default font family to sans-serif.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 2 */
}
/*
* Removes default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
}
/*
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/*
* Addresses styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/*
* Addresses styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/*
* Corrects font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Sets consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/*
* Addresses inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/*
* Removes border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/*
* Corrects overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/*
* Addresses margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/*
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/*
* 1. Corrects color not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/*
* 1. Corrects font family not being inherited in all browsers.
* 2. Corrects font size not being inherited in all browsers.
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
*/
button,
input,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 2 */
margin: 0;
/* 3 */
}
/*
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/*
* Re-set default cursor for disabled elements.
*/
button[disabled],
input[disabled] {
cursor: default;
}
/*
* 1. Addresses box sizing set to `content-box` in IE 8/9.
* 2. Removes excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/*
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/*
* Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* Removes inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. Removes default vertical scrollbar in IE 8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/*---------------------------------------------------
LESS Elements 0.6
---------------------------------------------------
A set of useful LESS mixins by Dmitry Fadeyev
Special thanks for mixin suggestions to:
Kris Van Herzeele,
Benoit Adam,
Portenart Emile-Victor,
Ryan Faerman
More info at: http://lesselements.com
-----------------------------------------------------*/
.tooltip {
display: block;
font-size: 11px;
opacity: 0;
padding: 5px;
position: absolute;
visibility: visible;
z-index: 1030;
}
.tooltip.in {
opacity: 0.8;
}
.tooltip.top {
margin-top: -3px;
}
.tooltip.right {
margin-left: 3px;
}
.tooltip.bottom {
margin-top: 3px;
}
.tooltip.left {
margin-left: -3px;
}
.tooltip-inner {
background-color: #000000;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
max-width: 200px;
padding: 3px 8px;
text-align: center;
text-decoration: none;
}
.tooltip-arrow {
border-color: transparent;
border-style: solid;
height: 0;
position: absolute;
width: 0;
}
.tooltip.top .tooltip-arrow {
border-top-color: #000000;
border-width: 5px 5px 0;
bottom: 0;
left: 50%;
margin-left: -5px;
}
.tooltip.right .tooltip-arrow {
border-right-color: #000000;
border-width: 5px 5px 5px 0;
left: 0;
margin-top: -5px;
top: 50%;
}
.tooltip.left .tooltip-arrow {
border-left-color: #000000;
border-width: 5px 0 5px 5px;
margin-top: -5px;
right: 0;
top: 50%;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #000000;
border-width: 0 5px 5px;
left: 50%;
margin-left: -5px;
top: 0;
}
body {
font-family: 'Happy Monkey', sans-serif;
margin: 0 auto;
background: url("images/grid-18px-masked.png") repeat-x scroll 0 0 transparent;
}
body .header {
width: 809px;
margin: 0 auto 10px;
}
body .header h1 {
margin: 10px 0;
}
body .header h1 a {
color: #333;
text-decoration: none;
}
body .header h1 a:hover {
color: #2281cf;
}
body .header .description {
font-size: 14px;
line-height: 14px;
}
body .header .description i {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-style: normal;
padding: 3px 4px 2px;
background-color: #bde5ff;
color: #ffffff;
}
body .header .description i.dark {
background: #333333;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #444444), color-stop(1, #222222));
background: -ms-linear-gradient(bottom, #444444, #222222);
background: -moz-linear-gradient(center bottom, #444444 0%, #222222 100%);
}
body .header .code {
margin-top: 20px;
text-align: center;
}
body .header .code input {
border: none;
width: 206px;
padding: 0;
margin: 0 5px;
background: none;
}
body .wrapper {
width: 610px;
height: 377px;
margin: 0 auto;
position: relative;
}
body .wrapper ul {
margin: 0;
padding: 0;
}
body .wrapper ul:hover img {
outline: 1px solid #ffffff;
}
body .wrapper ul li {
list-style: none;
}
body .wrapper ul li img {
position: absolute;
display: block;
}
body .wrapper ul li img.p14 {
right: 0;
top: 0;
}
body .wrapper ul li img.p13 {
left: 0;
top: 0;
}
body .wrapper ul li img.p12 {
left: 0;
bottom: 0;
}
body .wrapper ul li img.p11 {
left: 144px;
bottom: 0;
}
body .wrapper ul li img.p10 {
right: 377px;
top: 233px;
}
body .wrapper ul li img.p9 {
left: 144px;
top: 233px;
}
body .wrapper ul li img.p8 {
left: 144px;
bottom: 89px;
}
body .wrapper ul li img.p7 {
left: 165px;
bottom: 89px;
}
body .wrapper ul li img.p6 {
right: 432px;
top: 267px;
}
body .wrapper ul li img.p5 {
left: 165px;
top: 267px;
}
body .wrapper ul li img.p4 {
left: 165px;
bottom: 102px;
}
body .wrapper ul li img.p3 {
left: 168px;
bottom: 102px;
}
body .wrapper ul li img.p2 {
right: 440px;
top: 272px;
}
body .wrapper ul li img.p1 {
left: 168px;
top: 272px;
}
body .footer {
margin-top: 12px;
margin-bottom: 12px;
font-size: 12px;
line-height: 12px;
color: #999999;
}
body .footer .copyright {
line-height: 20px;
overflow: hidden;
position: relative;
text-align: center;
}
body .footer .copyright a {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-style: normal;
padding: 3px 4px 2px;
background-color: #bde5ff;
color: #ffffff;
text-decoration: none;
}
body .footer .copyright a:hover {
background-color: #2281cf;
}
body .footer .copyright a#name {
background-color: #e6e6e7;
color: #999999;
}
body .footer .copyright abbr {
cursor: default;
border-bottom: 1px dotted #f8f8f8;
}
body .footer .copyright .tweet-button {
right: 0;
display: inline-block;
line-height: 20px;
position: absolute;
top: 0;
}
</style>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header class="header">
<h1><a href="http://temp.im/">temp.im</a></h1>
<div class="description">im temp <i class="dark">placeholder</i> images, feel free to use it anywhere.</div>
<div class="code">&lt;img src="<input type="text" value="http://temp.im/123x456"/>" /&gt;</div>
</header>
<article class="wrapper">
<ul>
<li>
<img class="p14" src="http://temp.im/377x377" title="http://temp.im/377x377">
</li>
<li>
<img class="p13" src="http://temp.im/233x233" title="http://temp.im/233x233">
</li>
<li>
<img class="p12" src="http://temp.im/144x144" title="http://temp.im/144x144">
</li>
<li>
<img class="p11" src="http://temp.im/89x89" title="http://temp.im/89x89">
</li>
<li>
<img class="p10" src="http://temp.im/55x55" title="http://temp.im/55x55">
</li>
<li>
<img class="p9" src="http://temp.im/34x34" title="http://temp.im/34x34">
</li>
<li>
<img class="p8" src="http://temp.im/21x21" title="http://temp.im/21x21">
</li>
<li>
<img class="p7" src="http://temp.im/13x13" title="http://temp.im/13x13">
</li>
<li>
<img class="p6" src="http://temp.im/8x8" title="http://temp.im/8x8">
</li>
<li>
<img class="p5" src="http://temp.im/5x5" title="http://temp.im/5x5">
</li>
<li>
<img class="p4" src="http://temp.im/3x3" title="http://temp.im/3x3">
</li>
<li>
<img class="p3" src="http://temp.im/2x2" title="http://temp.im/2x2">
</li>
<li>
<img class="p2" src="http://temp.im/1x1" title="http://temp.im/1x1">
</li>
<li>
<img class="p1" src="http://temp.im/1x1" title="http://temp.im/1x1">
</li>
</ul>
</article>
<footer class="footer">
<div class="copyright" title="Thanks to Dropbox, im stable and fast :)">
<abbr id="readme" rel="tooltip">Hosted on</abbr>
<a class="green" href="https://www.dropbox.com/" target="_blank">Dropbox</a>
by
<a href="https://twitter.com/hzlzh" id="name" target="_blank">@hzlzh</a>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment