-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
104 lines (101 loc) · 5.11 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
---
---
<!-- Header / Top of Page -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<title>Topcoat</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!-- <script type ="text/javascript" async src ="http://www.google-analytics.js"></script> <!--script to make microdata work with google -->
</head>
<body>
<!--header-->
<header id="site-header" itemscope itemtype="http://schema.org/WPHeader" class="site-header">
<div class="wrap--site-header">
<div class="logo"><img src="/assets/logo.svg" class="logo__mark" alt=""><span class="logo__title">Topcoat</span></div>
<nav class="site-nav">
<ul>
<li class="site-nav__item"><a itemprop="url" href="http://topcoat.io/topcoat/" class="site-nav__link">About</a></li>
<li class="site-nav__item"><a itemprop="url" href="http://topcoat.io/topcoat/" class="site-nav__link">Demos</a></li>
<li class="site-nav__item"><a itemprop="url" href="http://topcoat.io/blog/" class="site-nav__link">Blog</a></li>
<li class="site-nav__item"><a class="download-button" href="https://github.com/topcoat/topcoat.github.com">Download</a></li>
</ul>
</nav>
</div>
</header>
<!-- Top of Page -->
<!-- Section 0: top blue portion/icebergs in background, Hero -->
<section class="section--primary-flex-container">
<div class="primarytext-flex-item">
<h1>Topcoat</h1>
<h4> Flexible CSS documentation and tooling. </h4> </div>
<div class="primarysvg-flex-item"></div>
</section>
<!-- Section 1: white portion/racoon , "" default-->
<section class="section--what-flex-container">
<div class="whatsvg-flex-item"></div>
<div class="whattext-flex-item">
<h2>What is topcoat</h2>
<p>Etiam auctor, magna in sodales lobortis, nunc orci egestas urna, nec porta tortor massa et nibh. In ut ultrices nisi. Proin nec neque est. Quisque imperdiet dui eu enim sodales, sed mattis ligula convallis. Mauris eget quam ac augue luctus egestas
</p>
</div>
</section>
<!-- Section 2: purple portion/rocket, class secondary -->
<section class="section--sofast-flex-container ">
<div class="sofasttext-flex-item">
<h2>Sooooo Fast</h2>
<p>Performance is our #1 goal. Every component we design is benchmarked for performance(link here). You can see our results.</p> <br>
<h2>Themable</h2>
<p>Is that even a word? It should be! We love our theme, but we don't want to hit your brand over the head with it. Just add colors and voila!</p> <br>
<h2>Components Galore</h2>
<p>We have the building blocks to get you up and running fast. Our growing set of components were born from CSS.</p>
</div>
<div class="sofastsvg-flex-item"></div>
</section>
<!-- Section 3: Brown portion / spheres -->
<section class="section--bem-flex-container">
<div class="bemsvg-flex-item"></div>
<div class="bemtext-flex-item">
<h2 class="section__title">BEM Architecture</h2>
<p>We believe CSS is ready for primetime. We are basing our architecture on BEM make your apps faster, less contextual and easier to manage. </p> <br>
<h2>Even our font is open source</h2>
<p>The first open source font family contribution from Adobe, Source Sans Pro. It is served on Adobe Edge Web Fonts and Adobe Typekit. </p> <br>
<h2>Icons how you want them</h2>
<p>We created over 100 icons to go with Topcoat. You can use them as SVG, PNG or semantic icon font. And yes, they are also open source.</p>
</div>
</section>
<!-- Section 4: Blue portion / trees -->
<section class="section--design-flex-container">
<div class="designtext-flex-item">
<h2 class="section__title">Design with Topcoat</h2>
<p>Even though Topcoat was designed in code. We are including a PSD with all the components on our code base. </p> <br>
<h2 class="section__title">CDN Resources</h2>
<p>If you prefer to use a CDN to distribute your Topcoat assets then check out the Topcoat and Topcoat Icons distributions on cdnjs.</p> <br> </div>
<div class="designsvg-flex-item"></div>
</section>
<!-- Section 5: White Mountain Section-->
<section id="get-topcoat" class="section--get-topcoat">
<div class="wrap--center">
<h2 class="section__title">Get Topcoat now
<a class="download-button--large" href="https://github.com/topcoat/topcoat.github.com">Download
<span class="sub-text">Version 1.0</span>
</a>
</h2>
<p>You can also clone Topcoat from <a href="https://github.com/topcoat/topcoat.github.com">GitHub.</a></p>
</div>
</section>
<!-- Bottom of Page-->
<footer class="site-footer">
<div class="wrap">
<nav>
<a class="twitter-logo" href="http://www.twitter.com"> </a>
<a class="github-logo" href="http://www.github.com"> </a>
<a class="adobe-logo" href="http://www.adobe.com"> </a>
</nav>
</div>
</footer>
</body>
</html>