-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (118 loc) · 5.07 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
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
<!doctype html>
<html lang="en-US">
<head>
<title>Art.com style guide and component library</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<svg id="svg-library" style="display: none;">
<defs>
<g id="icon-logo">
<path d="M2.6,126.5L26.5,0h24.3l24.1,126.5H53l-3.9-23.1H26.5l-3.7,23.1H2.6z M29.3,86.4h17l-8.4-50.7h-0.2L29.3,86.4z"/>
<path d="M106,68.5v58H84.7V0h31C137.2,0,145,10.6,145,28.4v16.2c0,13.6-4.9,21.6-17,24.4l20.3,57.5H126L106,68.5z M106,17.4v39.4
h7.1c7.3,0,10.4-3.7,10.4-10.4V27.6c0-6.9-3.2-10.3-10.4-10.3H106z"/>
<path d="M153.4,0h56.5v17.4h-17.5v109.1h-21.5V17.4h-17.5V0z"/>
<path d="M210.5,106.2h20.3v20.3h-20.3V106.2z"/>
<path d="M0,234.5v-61.2c0-19.8,9.3-34.1,31.7-34.1c23.5,0,30,13.1,30,31.7v14.9H42.4v-16.6c0-7.8-2.6-12.3-10.3-12.3
c-7.6,0-10.8,5.4-10.8,13.1v67.9c0,7.7,3.2,13.1,10.8,13.1c7.6,0,10.3-4.9,10.3-12.3v-23.3h19.4v21.8c0,18.1-7.5,31.5-30,31.5
C9.3,268.7,0,254.1,0,234.5z"/>
<path d="M74.4,234.5v-61.2c0-19.8,9.7-34.1,32.1-34.1c22.6,0,32.3,14.4,32.3,34.1v61.2c0,19.6-9.7,34.1-32.3,34.1
C84.1,268.7,74.4,254.1,74.4,234.5z M117.5,237.9V170c0-7.6-3.4-13.1-11-13.1c-7.5,0-10.8,5.4-10.8,13.1v67.9
c0,7.7,3.4,13.1,10.8,13.1C114.2,250.9,117.5,245.5,117.5,237.9z"/>
<path d="M210.6,185.1h-0.6l-14.4,82.1h-9.9L170,185.1h-0.4v82.1h-17.5V140.7h24.8l13.8,71.3h0.2l12.3-71.3H230v126.5h-19.4V185.1z"
/>
</g>
</defs>
</svg>
<div id="main">
<header class="style-guide-header">
<h1>Style Guide & Component Library</h1>
</header>
<div class="style-guide-page">
<nav class="style-nav">
<ul class="style-nav-menu">
<li>
<a href="/Style-Guide" class="style-nav-heading">Brand</a>
<ul>
<li><a href="/Style-Guide/#welcome">Welcome</a></li>
<li><a href="/Style-Guide/#wordmark">Wordmark</a></li>
<li><a href="/Style-Guide/#brand-voice">Brand Voice</a></li>
</ul>
</li>
<li>
<a href="/Style-Guide/elements" class="style-nav-heading">Site elements</a>
<ul>
<li><a href="#fonts">Fonts</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Menus</a></li>
<li><a href="#">Tabs</a></li>
<li><a href="#">Pagination</a></li>
<li><a href="#">Carousel</a></li>
<li><a href="#">Scrolling</a></li>
<li><a href="#">Tool tips</a></li>
<li><a href="#">Pop-up modals</a></li>
<li><a href="#">Menus</a></li>
<li><a href="#">List types</a></li>
<li><a href="#">Tables</a></li>
<li><a href="#form-elements">Form Elements</a></li>
</ul>
</li>
<li>
<a href="#" class="style-nav-heading">TBD</a>
</li>
</ul>
</nav>
<div class="style-guide">
<section id="welcome">
<h2>Welcome</h2>
<p class="headline">We are art</p>
<p>We exist so you can have the art you love. this means giving you easy access to incredible art images and top-notch craftsmanship. Because when you find art you love, you'll love your space more... and that's what it's all about.</p>
</section>
<section id="wordmark">
<h2>Wordmark</h2>
<div>
<svg width="100px" height="100px" viewBox="0 0 230.8 268.7" aria-labelledby="title desc" fill="#222">
<title>Art.com Logo</title>
<desc>A dark-gray Art.com logo.</desc>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-logo"></use>
</svg>
<svg width="100px" height="100px" viewBox="0 0 230.8 268.7" aria-labelledby="title desc" fill="#FFF" style="background:#888; padding:10px;">
<title>Art.com Logo</title>
<desc>A dark-gray Art.com logo.</desc>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-logo"></use>
</svg>
</div>
<a class="btn btn-primary btn-small" href="#">Download logos</a>
</section>
<section id="brand-voice">
<h2>Brand Voice</h2>
<p class="headline headline--secondary">Art.com is your friendly and knowledgable art confidan.</p>
<p>The conversational tone of Art.com immediately establishes a collaborative rapport with our customers. Never condescending or exclusive, the language of Art.com is friendly, inspirational, and insightful. Using the first person plural (e.g."We"), our tone is knowledgeable but approachable.</p>
</section>
</div><!--/.style-guide-->
</div><!--/.style-guide-page-->
</div><!--/#main-->
<script src="/js/highlights.pack.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
$(document).ready(function() {
var stickyNavTop = $('.style-nav').offset().top; //get top coordinate of nav
var stickyNav = function() {
var scrollTop = $(window).scrollTop(); //get top coordinate of scrolling window
if (scrollTop > stickyNavTop) {
$('.style-nav-menu').addClass('sticky');
} else {
$('.style-nav-menu').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
</body>
</html>