-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle-guide.html
141 lines (141 loc) · 7.1 KB
/
style-guide.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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Fri Jul 23 2021 13:40:14 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="60f933bb9362018195a05be2" data-wf-site="60f933bb9362016539a05bcc">
<head>
<meta charset="utf-8">
<title>Foundation - Webflow HTML Website Template</title>
<meta content="Foundation - Webflow HTML Website Template" property="og:title">
<meta content="Foundation - Webflow HTML Website Template" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/wills-portfolio-f29842.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Inter:100,200,300,regular,500,600,700,800,900"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
<style type="text/css">
body {
-webkit-font-smoothing: antialiased;
}
</style>
<meta name="robots" content="noindex">
</head>
<body class="body">
<div class="nav-container">
<div data-collapse="medium" data-animation="default" data-duration="200" data-doc-height="1" role="banner" class="navbar w-nav">
<div class="w-layout-grid menu-grid">
<div>
<a href="index.html" class="brand">Will Rains</a>
</div>
<nav role="navigation" class="nav-menu w-nav-menu">
<a href="work.html" class="nav-link w-nav-link">Work</a>
<a href="services.html" class="nav-link w-nav-link">Services</a>
<a href="about.html" class="nav-link w-nav-link">About</a>
</nav>
<div id="w-node-_55a81060-6aca-191f-1d76-5dfe32b05d59-32b05d4a" class="menu-button w-nav-button">
<div class="icon w-icon-nav-menu"></div>
</div>
</div>
</div>
</div>
<div class="section wf-section">
<div class="main-container">
<h1 class="big-text">Style Guide</h1>
<div class="w-layout-grid grid-halves">
<div>
<div class="text-block">Use this style guide to access, edit or adjust styles that are used throughout the template.<br></div>
</div>
</div>
</div>
</div>
<div id="services" class="section no-top-padding wf-section">
<div class="main-container">
<div class="w-layout-grid grid-halves">
<div>
<h3>Colors</h3>
<div class="text-block">Use this section to edit the colors for the entire template.<br></div>
</div>
<div class="image-resource-grid">
<div>
<div class="color-tile color-primary"></div>
<div class="small-text">Primary<br></div>
</div>
<div>
<div class="color-tile color-secondary"></div>
<div class="small-text">Secondary<br></div>
</div>
<div>
<div class="color-tile color-hover"></div>
<div class="small-text">Hover<br></div>
</div>
</div>
<div>
<h3>Typography</h3>
<div class="text-block">Use this section to edit the typography for the entire site.</div>
</div>
<div>
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<p>This is some body text. <a href="#">This is a body link.</a>
</p>
<p class="small-text">This is some small text. <a href="#">This is a small link.</a>
</p>
<div class="big-text">Big Text<br></div>
</div>
<div>
<h3>Rich Text</h3>
<div class="text-block">Rich text sections are styled to be used throughout the template.</div>
</div>
<div>
<div class="w-richtext">
<h2>H2 headings will look like this.</h2>
<p>Illo eos tempore magnam qui dolorum tenetur. Sed architecto inventore. <strong>Qui voluptatem aut in neque magni non aut provident molestiae.</strong> <em>Numquam maiores rem accusantium nobis non sit laboriosam sed molestiae.</em></p>
<h3>Example of an H3 in use.</h3>
<blockquote>This is what quotes look like. Deleniti voluptas neque iure voluptatum tempore quasi repellendus. Aut dolorem sint veritatis vel autem quia sit reiciendis. Non hic cum enim adipisci quas corporis. Atque qui itaque tenetur aut occaecati quaerat.</blockquote>
<p>Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.</p>
<figure style="max-width:1080px" class="w-richtext-align-fullwidth w-richtext-figure-type-image">
<div><img src="images/60196731f1a680591e19f7a1_you-x-ventures-zSpGWzwRFas-unsplash-p-1080.jpeg" loading="lazy" alt=""></div>
<figcaption>This is an example of a figure caption.</figcaption>
</figure>
<ul role="list">
<li>Bulleted lists are formatted like this</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
</ul>
<p>Eveniet harum et perspiciatis est. Autem aut cum placeat veritatis. Quibusdam deserunt quo ea cum maiores dolore rerum voluptatem est. Libero voluptatem distinctio recusandae sint.</p>
<ol start="" role="list">
<li>Numbered lists will look like this</li>
<li>Eveniet harum et perspiciatis est</li>
<li>Autem aut cum placeat veritatis</li>
</ol>
<p></p>
</div>
</div>
</div>
</div>
</div>
<div data-w-id="e80a0129-a058-7b69-e932-61ee9aec5d96" class="footer">
<div class="main-container">
<div class="grid-footer">
<div class="footer-block">
<div>
<a href="about.html" class="footer-link">About</a>
<a href="contact.html" class="footer-link">Contact</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=60f933bb9362016539a05bcc" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>