-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyleguide.html
131 lines (130 loc) · 5.12 KB
/
styleguide.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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inspire Brands Style Guide</title>
<link rel="stylesheet" href="styles.css">
<script src="styleguide.js" defer></script>
</head>
<body>
<h1> Inspire Brands Style Guide</h1>
<Nav>
<uL class="breadcrumb">
<li>Inspire Brands</li>
<li>Arby's</li>
<li>Buffalo Wild Wings</li>
<li>Baskin Robbins</li>
<li>Dunkin</li>
<li>Jimmy John's</li>
<li>Sonic Drive-In</li>
<li>Rusty Taco</li>
</uL>
</Nav>
<!--Color Section-->
<div class="mainBox">
<h2>Color Guide</h2>
<div class="levelTwo">
<h3>Inspire Brands</h3>
<div id="dark-red" class="levelThree">
<br>
<p>CMYK: 20 100 90 30<br>RGB: 150 22 34<br>HEX: #961622</p>
</div>
<div id="primary-black" class="levelThree">
<h4>Primary</h4>
<p>CCMYK: 0 0 0 100<br>RGB 35 31 32<br>HEX #231F20</p>
</div>
<div id="grey-1" class="levelThree">
<br>
<p>CMYK 93 55 16 25<br>RGB 40 87 128<br>HEX #285780</p>
</div>
<div id="grey-2" class="levelThree">
<br>
<p>CMYK 0 0 0 30<br>RGB 188 190 192<br>HEX #BCBEC0</p>
</div>
<div id="grey-3" class="levelThree">
<br>
<p>CMYK 0 0 0 30<br>RGB 188 190 192<br>HEX #BCBEC0</p>
</div>
</div>
<div class="levelTwo">
<h3>Arby's</h3>
<button class="garden-fresh-btn">Reveal Garden Fresh Colors</button>
<div id="arbys-passion-red" class="levelThree">
<h4>Arby's Passion Red</h4>
<p>PMS 199 C<br>C0 / M100 / Y79 / K0<br>R213 / G0 / B55<br>HEX: #dc0032</p>
</div>
<div id="arbys-dark-red" class="levelThree">
<h4>Dark Red</h4>
<p>PMS 7421 C<br>C7 / M100 / Y35 / K64<br>R102 / G29 / B52<br>HEX #691c33</p>
</div>
<div id="arbys-medium-red" class="levelThree">
<h4>Medium Red</h4>
<p>PMS 7427 C<br>C0 / M100 / Y68 / K35<br>R152 / G27 / B50<br>HEX #981b32</p>
</div>
<div id="arbys-white" class="levelThree">
<h4 id="font-black">White</h4>
<p class="font-black">C0 / M0 / Y0 / K0<br>R255 / G255 / B255<br>HEX #FFFFFF</p>
</div>
<div id="arbys-craft" class="levelThree">
<h4 id="font-black">Craft</h4>
<p class="font-black">PMS 7590 C<br>C0 / M15 / Y25 / B17<br>HEX #d5b49e</p>
</div>
<div class="levelThree" id="arbys-black">
<h4>Black</h4>
<p>C60 / M40 / Y40 / K100<br>R0 / G0 / B0<br>HEX #000000</p>
</div>
<div class="market-fresh-colors levelThree" id="arbys-crisp" style="display:none">
<h4>Crisp</h4>
<p>PMS 7740 C<br>C73 / M1 / Y91 / K17<br>R58 / G145 / B68<br>HEX #3A913F</p>
</div>
<div class="market-fresh-colors levelThree" id="arbys-garnish" style="display:none">
<h4>Garnish</h4>
<p>PMS 7484 C<br>C92 / M8 / Y75 / K58<br>RR0 / G87 / B63<br>HEX #00573F</p>
</div>
<div class="market-fresh-colors levelThree" id="arbys-zest" style="display:none">
<h4>Zest</h4>
<p>PMS 2284 C<br>C32 / M0 / Y62 / K0<br>R178 / G213 / B131<br>HEX #dc0032v</p>
</div>
</div>
<div class="levelTwo">
<h3>Buffalo Wild Wings</h3>
</div>
<div class="levelTwo">
<h3>Baskin Robbins</h3>
</div>
<div class="levelTwo">
<h3>Dunkin'</h3>
</div>
<div class="levelTwo">
<h3>Jimmy John's</h3>
</div>
<div class="levelTwo">
<h3>Sonic Drive-In</h3>
<div id="cherry" class="levelThree">
<h4>Cherry<br>192 C</h4>
<p>CMYK 0 94 64 0 <br> RGB 228 0 70 <br> HEX #e40046</p>
</div>
<div id="sky" class="levelThree">
<h4>Sky<br>2382 C</h4>
<p>CMYK 78 30 0 0<br>RGB 0 138 216<br>HEX #008ad8</p>
</div>
<div id="frost" class="levelThree">
<h4>Frost<br>2197 C</h4>
<p>CMYK 50 0 12 0<br>RGB 116 210 231<br>HEX #74d2e7</p>
</div>
<div id="midnight" class="levelThree">
<h4>Midnight <br>2161 C</h4>
<p>CMYK 93 55 16 25<br>RGB 40 87 128<br>HEX #285780</p>
</div>
<div id="lemonade" class="levelThree">
<h4>Lemonade<br>Yellow C</h4>
<p>CMYK 0 1 100 0<br>RGB 254 221 0<br>HEX #fedd00</p>
</div>
</div>
<div class="levelTwo">
<h3>Rusty Taco</h3>
</div>
</div>
</body>
</html>