-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
131 lines (119 loc) · 5.83 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
127
128
129
130
131
<html>
<head>
<title>OmbuShop Style Guide</title>
<link rel="stylesheet" type="text/css" href="compiled/main.css">
<script src="javascript/jquery-1.9.1.min.js"></script>
<script src="javascript/jquery.scrollto.js"></script>
<script src="javascript/main.js"></script>
<link href='//fonts.googleapis.com/css?family=Lato:400,400italic,700,300italic,300' rel='stylesheet' type='text/css'>
</head>
<body>
<a href="#" id="nav-button" class="">
<span>Menu</span>
</a>
<ul id="main-nav">
<a href="/"><h1>OmbuShop</h1></a>
<li><a href="#logo" title="Logo">Logo</a></li>
<li><a href="#color" title="Color">Color</a></li>
<li><a href="#typography" title="Typography">Typography</a></li>
<li><a href="#links-buttons" title="Links & Buttons">Links & Buttons</a></li>
<li><a href="#forms" title="Forms">Forms</a></li>
<li><a href="#icons" title="Icons">Icons</a></li>
</ul>
<section id="page-wrapper">
<div id="sections">
<h1>OmbuShop Style Guide</h1>
<p><a href="http://www.ombushop.com/" title="OmbuShop.com" target="_blank">OmbuShop.com</a> is a simple and user-friendly platform that lets anyone create an online store in just a few clicks. No software to download, no programming required. We help businesses and web designers to easily build beautiful online stores that simply sell more.</p>
<div id="logo">
<h2>Logo</h2>
<ul class="logos">
<li><img src="images/logo-1.png"><span>Logo with tagline</span></li>
<li><img src="images/logo-2.png"><span>Logo with tagline / Black</span></li>
<li><img src="images/logo-4.png"><span>Logo</span></li>
<li class="brown"><img src="images/logo-3.png"><span>Logo with background</span></li>
</ul>
</div>
<div id="color">
<h2>Color</h2>
<h3>Primary colors</h3>
<ul id="color-samples">
<li class="brown"><p>Brown<span>#4a382f</span></p></li>
<li class="green"><p>Green<span>#2ba47d</span></p></li>
<li class="light-green"><p>Light Green<span>#e0efec</span></p></li>
<li class="orange"><p>Orange<span>#ff8c2f</span></p></li>
<li class="light-orange"><p>Light Orange<span>#ffc495</span></p></li>
<li class="white"><p>White<span>#ffffff</span></p></li>
</ul>
<h3>Secondary colors</h3>
<ul id="color-samples">
<li class="black"><p>Black<span>#444444</span></p></li>
<li class="grey"><p>Grey<span>#a2adad</span></p></li>
<li class="light-yellow"><p>Light Yellow<span>#ffffdf</span></p></li>
</ul>
</div>
<div id="typography">
<h2>Typography</h2>
<h3>Font Family</h3>
<ul class="font-family">
<li class="light">Lato Light <span> Weight: 300</span></li>
<li class="normal">Lato Regular <span> Weight: 400</span></li>
<li class="bold">Lato Bold <span> Weight: 700</span></li>
</ul>
<ul class="font-family italic">
<li class="light">Lato Light Italic <span> Weight: 300, italic</span></li>
<li class="normal">Lato Regular Italic <span> Weight: 400, italic</span></li>
<li class="bold">Lato Bold Italic <span> Weight: 700, italic</span></li>
</ul>
<h3>Headings</h3>
<div id="headings">
<h1 class="h1">This is a large heading</h1>
<span>Weight 300, 16pt</span>
<h2 class="h2">This is a medium heading</h2>
<span>Weight 300, 16pt</span>
<h3 class="h3">This is a small heading</h3>
<span>Weight 300, 16pt</span>
</div>
<h3>Paragraph</h3>
<p class="paragraph">OmbuShop helps small businesses and entrepreneurs easily setup and run their online shops. We spend our days helping businesses sell more and improving eCommerce in Latin America.</p>
<span>Weight 300, 16pt</span>
</div>
<div id="links-buttons">
<h2>Links & Buttons</h2>
<h3>Link</h3>
<p>Read <a href="#">Terms and Conditions</a></p> </br>
<h3>Buttons</h3>
<a href="#" class="button">Subscribe</a>
<a href="#" class="button red">Unsubscribe</a>
</div>
<div id="forms">
<h2>Forms</h2>
<h3>Input</h3>
<label for="name">Name</label> </br>
<input name="name" type="text">
<h3>Select box</h3>
<label>Country</label></br>
<select name="country">
<option selected="selected">Argentina</option> <option>Chile</option> <option>Colombia</option> <option>Mexico</option> <option>Spain</option> <option>United States</option></select>
<h3>Textarea</h3>
<textarea rows="4" cols="50"></textarea>
</div>
<div id="icons">
<h2>Icons</h2>
<ul>
<li><div class="icon custom-design"></div><span>.custom-design</span></li>
<li><div class="icon chat"></div><span>.chat</span></li>
<li><div class="icon hosting"></div><span>.hosting</span></li>
<li><div class="icon payment-gateways"></div><span>.payment-gateways</span></li>
<li><div class="icon wholesale"></div><span>.wholesale</span></li>
<li><div class="icon facebook-store"></div><span>.facebook-store</span></li>
<li><div class="icon register"></div><span>.register</span></li>
<li><div class="icon comission"></div><span>.comission</span></li>
<li><div class="icon clients"></div><span>.clients</span></li>
<li><div class="icon time"></div><span>.time</span></li>
<li><div class="icon newsletter"></div><span>.newsletter</span></li>
</ul>
</div>
</div>
</section>
</body>
</html>