-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
62 lines (57 loc) · 3.81 KB
/
index.html
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
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- // Change these to better suit your project -->
<title>Poynter style guide</title>
<meta name="description" content="Poynter style guide - Typecast">
<meta name="keywords" content="Poynter style guide, Typecast">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<meta name="generator" content="Lovingly created using Typecast (http://typecast.com) on 2017/02/01">
<!-- // CSS Reset – http://meyerweb.com/eric/tools/css/reset/ -->
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
<script src="https://use.typekit.net/lbk6ptf.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<div class="content1">
<p class="label">Deck, intro, or label</p>
<h1>Heading One</h1>
<h2>Heading Two is where the action is.</h2>
<h3>Heading Three Adds Punchy Commentary</h3>
<p class="intro">An introductory paragraph leads the reader into the article. Make it count! It may be the only part of the article that today’s distracted web users bother to read. This one is set in Adelle Regular 24px/34px.</p>
<p class="intro-paragraph">Here is a callout. If we’re lucky, some people will read this. Adelle Sans Thin Italic 32px/40px, 38px/0 border.</p>
<p class="author-byline">by Doris Lessing, 20 January 2016</p>
<p><span class="dropcap">W</span>ise men say only fools rush in. Others say that the more typefaces you use, the less cohesive your design will feel. And on the web, that also means more loading time for your visitors. Choose a typeface for body text and another for display usage and you should be all set for most projects.</p>
<blockquote class="pull-quote">
<p class="quote">“My only regret is that I have but one life to give for my country. Now that is a hell of a pull-quote.”</p>
</blockquote>
<p>It rubs the lotion on its skin. Well, hello, Clarice. We begin by coveting what we see every day. Don’t you feel eyes moving over your body, Clarice? And don’t your eyes seek out the things you want? After your father’s murder, you were orphaned. You were ten years old. You went to live with cousins on a sheep and horse ranch in Montana. They were slaughtering the spring lambs? All praise to the Typecast element list, originally created by John Martins at typecast.com.</p>
<p class="label">Image Formats per John Martins</p>
<p class="image-labels">Avatar</p>
<img src="images/placeholders/1x1.png" class="testimonial-avatar"/>
<p class="image-labels">1:1 ratio</p>
<img class="square" src="images/placeholders/1x1.png"/>
<p class="image-labels">4:3 ratio</p>
<img class="standard" src="images/placeholders/4x3.png"/>
<p class="image-labels">Gallery</p>
<div class="three-col-gallery">
<img class="three-col-img" src="images/placeholders/1x1.png"/>
<img class="three-col-img" src="images/placeholders/1x1.png"/>
<img class="three-col-img" src="images/placeholders/1x1.png"/>
<img class="three-col-img" src="images/placeholders/1x1.png"/>
<img class="three-col-img" src="images/placeholders/1x1.png"/>
<img class="three-col-img" src="images/placeholders/1x1.png"/>
</div>
<nav class="menu-nav">
<p class="label">Text & Image</p>
<img src="images/placeholders/placeholder.png"/>
<div class="image-media"/>
</nav>
</div>
</body>
</html>