forked from Rydgel/Fake-images-please
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·90 lines (89 loc) · 3.81 KB
/
Copy pathindex.html
File metadata and controls
executable file
·90 lines (89 loc) · 3.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
{% extends "layout.html" %}
{% block content %}
<header role="banner">
<div class="container">
<h1>Fake images please?</h1>
<h2>placeholders all the way</h2>
<section role="share">
<a id="tweet" href="http://twitter.com/?status=Fake%20images%20please%3F%20http://fakeimg.pl%20via%20@phollow"><span class="icon-twitter"></span></a>
<a id="facebook" href="http://www.facebook.com/sharer/sharer.php?u=http://fakeimg.pl"><span class="icon-facebook"></span></a>
</section>
</div>
</header>
<figure id="example">
<div class="container">
<aside role="sidebar">
<p>
When designing websites, you may not have the images you need at first.
But you already know the sizes and inserting some placeholders can help
you better seeing the layout. Don’t waste your time making dummy images
for your mockup or wireframe. <strong>Fakeimg.pl</strong> is a little tool
that generates images with an URL. Choose the size, the colors, even the
text. It’s free and
<a target="_blank" href="https://github.com/Rydgel/Fake-images-please">
open-source</a>.
</p>
<h3>How to use</h3>
<p>
You just have to put your image size after our URL. Only the first
parameter is mandatory. There are options too, you can pass a text, or
change some colors. Colors must be hexadecimal, the first one is the
background color. You can add the alpha value of the color with a comma,
(hex,a). The text can be passed with the <strong>text</strong>
GET variable. Here are some examples you can look at:
</p>
<pre><code><img src="http://fakeimg.pl/300/">
<img src="http://fakeimg.pl/250x100/">
<img src="http://fakeimg.pl/250x100/ff0000/">
<img src="http://fakeimg.pl/350x200/ff0000/000">
<img src="http://fakeimg.pl/350x200/ff0000,128/000,255">
<img src="http://fakeimg.pl/350x200/?text=Hello">
<img src="http://fakeimg.pl/350x200/?text=World&font=lobster"></code></pre>
<p>
Use them directly in an image tag or a CSS background, or whatever you
want to. This is a first draft, so you may expect some new features soon.
</p>
</aside>
<section role="images">
<div class="first-line">
<img alt="fakeimg.pl" src="/440x320/282828/eae0d0/?retina=1">
</div>
<div class="second-line-1">
<img class="left" alt="fakeimg.pl" src="/200x100/282828/eae0d0/?retina=1">
</div>
<div class="second-line-2">
<img class="right" alt="fakeimg.pl" src="/200x100/282828/eae0d0/?retina=1">
</div>
<div class="third-line">
<img alt="fakeimg.pl" src="/440x230/282828/eae0d0/?retina=1&text=Problem?">
</div>
</section>
</div>
</figure>
<footer>
<div class="container">
<div class="footer-left">
<p>
Made by <a href="http://jrm.li">Jérôme Mahuet</a>, with love in 2016.
<br>Powered by <a target="_blank" href="http://www.python.org/">Python</a>,
<a target="_blank" href="http://flask.pocoo.org/">Flask</a>,
<a target="_blank" href="http://sass-lang.com/">Sass</a>,
<a target="_blank" href="http://compass-style.org/">Compass</a>,
<a target="_blank" href="http://coffeescript.org/">Coffeescript</a> &
<a target="_blank" href="http://www.vim.org/">Vim</a>.
<br>The fonts are
<a target="_blank" href="https://typekit.com/fonts/ff-dagny-web-pro">FF Dagny Web Pro</a> &
<a target="_blank" href="https://typekit.com/fonts/brandon-grotesque">Brandon Grotesque</a>.
</p>
</div>
<div class="footer-right">
<p>
Follow <a href="http://twitter.com/phollow">@phollow</a> to stay up-to-date with the project, or if you just want to ask something.
<br>Licensed under
<a target="_blank" href="http://en.wikipedia.org/wiki/MIT_License">MIT</a>
♥
</p>
</div>
</div>
</footer>
{% endblock %}