diff options
update doc and index
1 files changed, 1278 insertions, 0 deletions
| -rw-r--r-- | index.html | 1278 |
diff --git a/index.html b/index.html new file mode 100644 index 0000000..d7ac1fc --- /dev/null +++ b/index.html @@ -0,0 +1,1278 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="robots" content="index, follow"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <meta name="author" content="https://github.com/picturepan2/spectre"> + <title>Spectre, a lightweight and clean CSS framework for faster and extendable development.</title> + <link rel="stylesheet" href="dist/spectre.css"> + <link rel="stylesheet" href="demo/font/style.css"> + <style> + header > h4 { + margin-top: 8rem; + margin-bottom: 2rem; + } + .bg-grey { + background-color: #efefef; + padding: 1rem; + border-radius: .3rem; + } + .grid-hero { + margin-top: 10rem; + margin-bottom: 10rem; + } + .grid-hero h3 { + margin-bottom: 5rem; + } + .notes { + margin: 2rem 0; + color: #666; + } + .code .com { + color: #adadad; + } + .code .tag { + color: #4452c0; + } + .code .atn { + color: #4452c0; + } + .code .atv { + color: #e06870; + } + </style> +</head> +<body> + <section class="container bg-grey"> + <section id="overview" class="grid-hero grid-960"> + <header class="text-center"><h3>Project Spectre</h3></header> + <section> + <p><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p> + <ul> + <li>lightweight and clean starting point for your project</li> + <li>flexbox and responsive layout friendly</li> + <li>built in useful components and utilities</li> + </ul> + </section> + <section class="notes text-center"> + <div class="btn-group"> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + <a href="#get-started" class="btn btn-primary">Documentation</a> + </div> + </section> + </section> + </section> + <section class="container grid-960"> + <section id="get-started"> + <!--<header class="text-center"><h4>get started</h4></header> + <section class="notes"> + <p>You can either manually install Spectre CSS framework to your website or app.</p> + <h5>Bower</h5> + <h5>NPM</h5> + </section>--> + </section> + + <section id="typography"> + <header class="text-center"><h4>typography</h4></header> + <section class="notes"> + <p><strong>Typography</strong> sets default styles for headings, paragraphs, blockquote, lists elements and some text related utilities. </p> + </section> + + <header class="text-center"><h5>headings</h5></header> + <h1>H1 Title <small class="label">5rem</small></h1> + <h2>H2 Title <small class="label">4rem</small></h2> + <h3>H3 Title <small class="label">3rem</small></h3> + <h4>H4 Title <small class="label">2.4rem</small></h4> + <h5>H5 Title <small class="label">2rem</small></h5> + <h6>H6 Title <small class="label">1.6rem</small></h6> + + <header class="text-center"><h5>paragraphs</h5></header> + <p>Lorem ipsum dolor sit amet, <span class="highlight">consectetur</span> adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p> + <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + + <header class="text-center"><h5>blockquote</h5></header> + <blockquote> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <small>- Source</small> + </blockquote> + + <header class="text-center"><h5>lists</h5></header> + <div class="columns"> + <div class="column col-6"> + <ul class="list"> + <li>list item 1</li> + <li>list item 2 + <ul> + <li>list item 2.1</li> + <li>list item 2.2</li> + <li>list item 2.3</li> + </ul> + </li> + <li>list item 3</li> + </ul> + </div> + <div class="column col-6"> + <ol class="list"> + <li>list item 1</li> + <li>list item 2 + <ol> + <li>list item 2.1</li> + <li>list item 2.2</li> + <li>list item 2.3</li> + </ol> + </li> + <li>list item 3</li> + </ol> + </div> + </div> + </section> + + <section id="layout"> + <header class="text-center"><h4>flexbox layout</h4></header> + <section class="notes"> + <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p> + <p>Add the class <code class="label">columns</code> to a container. And add any element you want with classname <code class="label">column</code> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code class="label">col-[1-12]</code>.</p> + </section> + <div class="columns"> + <div class="column"> + <div class="bg-grey">1</div> + </div> + <div class="column"> + <div class="bg-grey">2</div> + </div> + <div class="column"> + <div class="bg-grey">3</div> + </div> + <div class="column"> + <div class="bg-grey">4</div> + </div> + <div class="column"> + <div class="bg-grey">5</div> + </div> + <div class="column"> + <div class="bg-grey">6</div> + </div> + <div class="column"> + <div class="bg-grey">7</div> + </div> + <div class="column"> + <div class="bg-grey">8</div> + </div> + <div class="column"> + <div class="bg-grey">9</div> + </div> + <div class="column"> + <div class="bg-grey">10</div> + </div> + <div class="column"> + <div class="bg-grey">11</div> + </div> + <div class="column"> + <div class="bg-grey">12</div> + </div> + </div> + <div class="columns"> + <div class="column col-6"> + <div class="bg-grey">col-6</div> + </div> + <div class="column col-3"> + <div class="bg-grey">col-3</div> + </div> + <div class="column col-2"> + <div class="bg-grey">col-2</div> + </div> + <div class="column col-1"> + <div class="bg-grey">col-1</div> + </div> + </div> + <div class="columns"> + <div class="column col-2"> + <div class="bg-grey">col-2</div> + </div> + <div class="column col-4"> + <div class="bg-grey">col-4</div> + </div> + <div class="column col-4"> + <div class="bg-grey">col-4</div> + </div> + <div class="column col-2"> + <div class="bg-grey">col-2</div> + </div> + </div> + + <!-- layout example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-3"</span>>col-3<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-2"</span>>col-2<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-1"</span>>col-1<<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</pre> + + </section> + + <section id="tables"> + <header class="text-center"><h4>tables</h4></header> + <section class="notes"> + <p><strong>Tables</strong> include default styles for tables and data sets.</p> + <p>Add the class <code class="label">table</code> to any <table> element. The class will add padding, border and emphasized table header. Use the class <code class="label">selected</code> to make <tr> element highlighted. </p> + </section> + + <table class="table"> + <thead> + <tr> + <th>name</th> + <th>duration</th> + <th>genre</th> + <th>release date</th> + </tr> + </thead> + <tbody> + <tr class="selected"> + <td>The Shawshank Redemption</td> + <td>2h 22min</td> + <td>Crime, Drama</td> + <td>14 October 1994 <span class="label">USA</span></td> + </tr> + <tr> + <td>The Godfather</td> + <td>2h 55min</td> + <td>Crime, Drama</td> + <td>24 March 1972 <span class="label">USA</span></td> + </tr> + <tr> + <td>Schindler's List</td> + <td>3h 15min</td> + <td>Biography, Drama, History</td> + <td>4 February 1994 <span class="label">USA</span></td> + </tr> + <tr> + <td>Se7en</td> + <td>2h 7min</td> + <td>Crime, Drama, Mystery</td> + <td>24 March 1972 <span class="label">USA</span></td> + </tr> + </tbody> + </table> + + <!-- tables example --> +<pre class="code lang-html"> +<<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table"</span>> + <<span class="tag">thead</span>> + <<span class="tag">tr</span>> + <<span class="tag">th</span>>name<<span class="tag">/th</span>> + <<span class="tag">th</span>>duration<<span class="tag">/th</span>> + <<span class="tag">th</span>>genre<<span class="tag">/th</span>> + <<span class="tag">th</span>>release date<<span class="tag">/th</span>> + <<span class="tag">/tr</span>> + <<span class="tag">/thead</span>> + <<span class="tag">tbody</span>> + <<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">"selected"</span>> + <<span class="tag">th</span>>The Shawshank Redemption<<span class="tag">/th</span>> + <<span class="tag">th</span>>2h 22min<<span class="tag">/th</span>> + <<span class="tag">th</span>>Crime, Drama<<span class="tag">/th</span>> + <<span class="tag">th</span>>14 October 1994<<span class="tag">/th</span>> + <<span class="tag">/tr</span>> + <<span class="tag">/tbody</span>> +<<span class="tag">/table</span>> +</pre> + + </section> + + <section id="buttons"> + <header class="text-center"><h4>buttons</h4></header> + <section class="notes"> + <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p> + <p>Add the class <code class="label">btn</code> to <a>, <input> or <button> elements for a default button. There are classes <code class="label">btn-primary</code> and <code class="label">btn-link</code> for predefined primary and link buttons. A button with the class <code class="label">loading</code> can show loading indicator. </p> + </section> + + <div class="columns"> + <div class="column"> + <button class="btn">default button</button> + <button class="btn loading">default button</button> + </div> + <div class="column"> + <button class="btn btn-primary">primary button</button> + <button class="btn btn-primary loading">primary button</button> + </div> + <div class="column"> + <button class="btn btn-link">link button</button> + <button class="btn btn-link loading">link button</button> + </div> + </div> + + <!-- buttons example --> +<pre class="code lang-html"> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>default button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>primary button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>link button<<span class="tag">/button</span>> + +<span class="com"><!-- a button with loading state --></span> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> +</pre> + + <header class="text-center"><h5>button sizes</h5></header> + <section class="notes"> + <p>Add the class <code class="label">btn-sm</code> or <code class="label">btn-lg</code> for small or large button size. Also, you can add the class <code class="label">btn-block</code> for a full-width button. </p> + </section> + + <div class="columns"> + <div class="column"> + <button class="btn btn-lg">large button</button> + <button class="btn">normal button</button> + <button class="btn btn-sm">small button</button> + </div> + <div class="column"> + <button class="btn btn-block">block button</button> + </div> + </div> + + <!-- buttons example --> +<pre class="code lang-html"> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-sm"</span>>small button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-block"</span>>block button<<span class="tag">/button</span>> +</pre> + + <section class="notes"> + <p>Icons with the class <code class="label">icon</code> can be correctly rendered in each button size. </p> + </section> + <div class="columns"> + <div class="column"> + <button class="btn btn-primary btn-lg"><span class="icon icon-markunread"></span> large</button> + <button class="btn btn-primary"><span class="icon icon-markunread"></span> normal</button> + <button class="btn btn-primary btn-sm"><span class="icon icon-markunread"></span> small</button> + </div> + </div> + + <!-- buttons example --> +<pre class="code lang-html"> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-lg"</span>><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/span</span>> large<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/span</span>> normal<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm"</span>><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/span</span>> small<<span class="tag">/button</span>> +</pre> + + <header class="text-center"><h5>button groups</h5></header> + <section class="notes"> + <p>If you want to use buttons as a group, add the class <code class="label">btn-group</code> to the container. You can add the class <code class="label">btn-group-block</code> for a full-width button group.</p> + </section> + <div class="columns"> + <div class="column"> + <div class="btn-group"> + <button class="btn">first button</button> + <button class="btn">second button</button> + <button class="btn">third button</button> + </div> + </div> + <div class="column"> + <div class="btn-group btn-group-block"> + <button class="btn btn-primary">first button</button> + <button class="btn btn-primary">second button</button> + <button class="btn btn-primary">third button</button> + </div> + </div> + </div> + + <!-- button groups example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group btn-group-block"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>first button<<span class="tag">/button</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>second button<<span class="tag">/button</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>third button<<span class="tag">/button</span>> +<<span class="tag">/div</span>> +</pre> + + </section> + + <section id="forms"> + <header class="text-center"><h4>forms</h4></header> + <section class="notes"> + <p><strong>Forms</strong> provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch. </p> + <p> </p> + </section> + <div class="columns"> + <div class="column col-6"> + <form> + <div class="form-group"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-2">Email</label> + <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> + </div> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender" /> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" checked /> Female + </label> + </div> + <div class="form-group"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + <div class="form-group"> + <label class="form-switch"> + <input type="checkbox" /> + Send me emails with news and tips + </label> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-3">Message</label> + <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> + </div> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox" /> + Remember me + </label> + </div> + <div class="form-group"> + <button class="btn btn-primary">Submit</button> + <button class="btn btn-link">Cancel</button> + </div> + </form> + </div> + <div class="column col-6"> + <form class="form-horizontal"> + <div class="form-group"> + <label class="form-label col-3" for="input-example-4">Name</label> + <div class="col-9"> + <input class="form-input" type="text" id="input-example-4" placeholder="Name" /> + </div> + </div> + <div class="form-group"> + <label class="form-label col-3" for="input-example-5">Email</label> + <div class="col-9"> + <input class="form-input" type="email" id="input-example-5" placeholder="Email" /> + </div> + </div> + <div class="form-group"> + <label class="form-label col-3">Gender</label> + <div class="col-9"> + <label class="form-radio"> + <input type="radio" name="gender" /> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" checked /> Female + </label> + </div> + </div> + <div class="form-group"> + <div class="col-3"></div> + <div class="col-9"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + <div class="form-group"> + <div class="col-3"></div> + <div class="col-9"> + <label class="form-switch"> + <input type="checkbox" /> + Send me emails with news and tips + </label> + </div> + </div> + <div class="form-group"> + <label class="form-label col-3" for="input-example-6">Message</label> + <div class="col-9"> + <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea> + </div> + </div> + <div class="form-group"> + <div class="col-3"></div> + <div class="col-9"> + <label class="form-checkbox"> + <input type="checkbox" /> + Remember me + </label> + </div> + </div> + <div class="form-group"> + <div class="col-3"></div> + <div class="col-9"> + <button class="btn btn-primary">Submit</button> + <button class="btn btn-link">Cancel</button> + </div> + </div> + </form> + </div> + </div> + + <!-- forms example --> +<pre class="code lang-html"> +<<span class="tag">form</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span>>Gender<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> /> Male + <<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> <span class="atn">checked</span> /> Female + <<span class="tag">/label</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">select</span> <span class="atn">class</span>=<span class="atv">"form-select"</span>> + <<span class="tag">option</span>>Choose an option<<span class="tag">/option</span>> + <<span class="tag">option</span>>Slack<<span class="tag">/option</span>> + <<span class="tag">option</span>>Skype<<span class="tag">/option</span>> + <<span class="tag">option</span>>Hipchat<<span class="tag">/option</span>> + <<span class="tag">/select</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-switch"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> + Send me emails with news and tips + <<span class="tag">/label</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-3"</span>>Message<<span class="tag">/label</span>> + <<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">id</span>=<span class="atv">"input-example-3"</span> <span class="atn">placeholder</span>=<span class="atv">"Textarea"</span> <span class="atn">rows</span>=<span class="atv">"3"</span>><<span class="tag">/textarea</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-checkbox"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> + Remember me + <<span class="tag">/label</span>> + <<span class="tag">/div</span>> +<<span class="tag">/form</span>> +</pre> + + <header class="text-center"><h5>input groups</h5></header> + <div class="columns"> + <div class="column"> + <div class="input-group"> + <span class="input-group-addon">slack.com/</span> + <input type="text" class="form-input" placeholder="site name" /> + </div> + </div> + <div class="column"> + <div class="input-group"> + <span class="input-group-addon">slack.com/</span> + <input type="text" class="form-input" placeholder="site name" /> + <button class="btn btn-primary input-group-btn">Submit</button> + </div> + </div> + </div> + </section> + + <section id="images"> + <header class="text-center"><h4>images</h4></header> + <section class="notes"> + <p><strong>Images</strong> include responsive image class. </p> + <p>Add the class <code class="label">img-responsive</code> to <img> elements. The images will scale with the parent sizes.</p> + </section> + <div class="columns"> + <div class="column col-6"> + <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" /> + </div> + <div class="column col-6"> + <img src="demo/img/osx-el-capitan-2.jpg" class="img-responsive rounded hide-sm" /> + </div> + </div> + + <!-- images example --> +<pre class="code lang-html"> +<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> /> +</pre> + + </section> + + <section id="avatars"> + <header class="text-center"><h4>avatars</h4></header> + <section class="notes"> + <p><strong>Avatars</strong> are user profile pictures. </p> + <p>Add the class <code class="label">avatar</code> to <img> element. Avatars come in 5 sizes, including <code class="label">avatar-xl</code> (64px), <code class="label">avatar-lg</code> (48px), <code class="label">avatar-sm</code> (24px), and <code class="label">avatar-xs</code> (16px). By default, the avatar size is 32px.</p> + <p>For users who don't have profile pictures, you may use their initials for avatars. Add the class <code class="label">avatar</code> and avatar size class to <div> element. The attribute <code class="label">data-initial</code> is the name appear inside the avatar.</p> + </section> + <div class="columns"> + <div class="column col-3"> + <img src="demo/img/avatar-1.png" class="avatar avatar-xl" /> + <img src="demo/img/avatar-2.png" class="avatar avatar-lg" /> + <img src="demo/img/avatar-3.png" class="avatar" /> + <img src="demo/img/avatar-4.png" class="avatar avatar-sm" /> + <img src="demo/img/avatar-5.png" class="avatar avatar-xs" /> + </div> + <div class="column col-3"> + <div class="avatar-container"> + <img src="demo/img/avatar-1.png" class="avatar avatar-xl" /> + <img src="demo/img/avatar-2.png" class="avatar avatar-icon" /> + </div> + <div class="avatar-container"> + <img src="demo/img/avatar-2.png" class="avatar avatar-lg" /> + <img src="demo/img/avatar-3.png" class="avatar avatar-icon" /> + </div> + <div class="avatar-container"> + <img src="demo/img/avatar-3.png" class="avatar" /> + <img src="demo/img/avatar-4.png" class="avatar avatar-icon" /> + </div> + <div class="avatar-container"> + <img src="demo/img/avatar-4.png" class="avatar avatar-sm" /> + <img src="demo/img/avatar-5.png" class="avatar avatar-icon" /> + </div> + <div class="avatar-container"> + <img src="demo/img/avatar-5.png" class="avatar avatar-xs" /> + <img src="demo/img/avatar-1.png" class="avatar avatar-icon" /> + </div> + </div> + <div class="column col-3"> + <div class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></div> + <div class="avatar avatar-lg" data-initial="YZ" style="background-color: #6874cc;"></div> + <div class="avatar" data-initial="YZ" style="background-color: #7983d2;"></div> + <div class="avatar avatar-sm" data-initial="YZ" style="background-color: #8a93d7;"></div> + <div class="avatar avatar-xs" data-initial="YZ" style="background-color: #9ba2dd;"></div> + </div> + </div> + + <!-- avatars example --> +<pre class="code lang-html"> +<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> /> + + +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"avatar-container"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-5.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-icon"</span> /> +<<span class="tag">/div</span>> + +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>><<span class="tag">/div</span>> +</pre> + + </section> + + <section id="chips"> + <header class="text-center"><h4>chips</h4></header> + <div class="columns"> + <div class="column"> + <div class="chip"> + <span class="icon icon-favorite_border"></span> + <span class="chip-name">Crime</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <span class="chip-name">Drama</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <span class="chip-name">Biography</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <span class="chip-name">Mystery</span> + <button class="btn btn-clear"></button> + </div> + </div> + <div class="column"> + <div class="chip"> + <img src="demo/img/avatar-1.png" class="avatar avatar-xs" /> + <span class="chip-name">Yan Zhu</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <img src="demo/img/avatar-2.png" class="avatar avatar-xs" /> + <span class="chip-name">Yan Zhu</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <img src="demo/img/avatar-4.png" class="avatar avatar-xs" /> + <span class="chip-name">Yan Zhu</span> + <button class="btn btn-clear"></button> + </div> + </div> + </div> + </section> + + <section id="fileicons"> + <header class="text-center"><h4>file icons</h4></header> + <section class="notes"> + <p><strong>fileicons.less</strong> includes a set of file icons. This part is written entirely in CSS as well. </p> + </section> + <div class="columns"> + <div class="column"> + <div class="file-icon file-icon-xl" data-type="docx"></div> + <div class="file-icon file-icon-lg" data-type="pptx"></div> + <div class="file-icon" data-type="xlsx"></div> + <div class="file-icon file-icon-sm" data-type="pdf"></div> + <div class="file-icon file-icon-xs" data-type="png"></div> + </div> + </div> + </section> + + <section id="tooltips"> + <header class="text-center"><h4>tooltips</h4></header> + <section class="notes"> + <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p> + <p>Add the class <code class="label">tooltip</code> and the attribute <code class="label">data-tooltip</code>, which contains the tooltip content, to non self closing elements. And add the class name <code class="label">tooltip-right</code>, <code class="label">tooltip-bottom</code> or <code class="label">tooltip-left</code> to define the position of a tooltip. By default, the tooltip appears above the element.</p> + </section> + <div class="columns"> + <div class="column text-center"> + <button class="btn btn-primary tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." data-tooltip-pos="top">top tooltip</button> + </div> + <div class="column"> + <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button> + </div> + <div class="column"> + <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum dolor sit amet">bottom tooltip</button> + </div> + <div class="column"> + <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum dolor sit amet">left tooltip</button> + </div> + </div> + + <!-- tooltips example --> +<pre class="code lang-html"> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>top tooltip<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip tooltip-right"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>right tooltip<<span class="tag">/button</span>> +</pre> + + </section> + + <section id="labels"> + <header class="text-center"><h4>labels</h4></header> + <section class="notes"> + <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p> + <p>Add the class <code class="label">label</code> to <span> or <small> elements. You can add another class <code class="label">label-primary</code>, <code class="label">label-success</code>, <code class="label">label-info</code>, <code class="label">label-warning</code>, <code class="label">label-danger</code> for more colored labels.</p> + </section> + <div class="columns"> + <div class="column"> + <span class="label">default label</span> + </div> + <div class="column"> + <span class="label label-primary">primary label</span> + </div> + <div class="column"> + <span class="label label-success">success label</span> + </div> + <div class="column"> + <span class="label label-info">info label</span> + </div> + <div class="column"> + <span class="label label-warning">warning label</span> + </div> + <div class="column"> + <span class="label label-danger">danger label</span> + </div> + </div> + + <!-- labels example --> +<pre class="code lang-html"> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label"</span>>default label<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>primary label<<span class="tag">/span</span>> +</pre> + + </section> + + <section id="toasts"> + <header class="text-center"><h4>toasts</h4></header> + <section class="notes"> + <p><strong>Toasts</strong> are used to show alert or information to users.</p> + <p>Add a container element with the class <code class="label">toast</code>. You can add any text within the container, and even icons. You may also add a close button with the class <code class="label">btn-clear</code> if you need. </p> + </section> + <div class="columns"> + <div class="column"> + <div class="toast"> + <button class="btn btn-clear pull-right"></button> + <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. + </div> + </div> + <div class="column"> + <div class="toast toast-primary"> + <button class="btn btn-clear pull-right"></button> + <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. + </div> + </div> + </div> + <section class="notes"> + <p>You can add the class <code class="label">toast-primary</code>, <code class="label">toast-success</code>, <code class="label">toast-info</code>, <code class="label">toast-warning</code>, <code class="label">toast-danger</code> for more colors.</p> + </section> + <div class="columns"> + <div class="column"> + <div class="toast toast-success"> + <button class="btn btn-clear pull-right"></button> + Efficiently unleash cross-media information without cross-media value. + </div> + </div> + <div class="column"> + <div class="toast toast-info"> + <button class="btn btn-clear pull-right"></button> + Efficiently unleash cross-media information without cross-media value. + </div> + </div> + <div class="column"> + <div class="toast toast-warning"> + <button class="btn btn-clear pull-right"></button> + Efficiently unleash cross-media information without cross-media value. + </div> + </div> + <div class="column"> + <div class="toast toast-danger"> + <button class="btn btn-clear pull-right"></button> + Efficiently unleash cross-media information without cross-media value. + </div> + </div> + </div> + + <!-- toasts example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear pull-right"</span>><<span class="tag">/button</span>> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +<<span class="tag">/div</span>> + +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast toast-primary"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear pull-right"</span>><<span class="tag">/button</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-error_outline"</span>><<span class="tag">/span</span>> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +<<span class="tag">/div</span>> +</pre> + + </section> + + <section id="menus"> + <header class="text-center"><h4>menus</h4></header> + <section class="notes"> + <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p> + <p>Add a container element with the class <code class="label">menu</code>. And add child elements with the classname <code class="label">menu-item</code>. That is a basic menu component.</p> + </section> + <div class="columns"> + <div class="column col-3"> + <menu class="menu"> + <menuitem class="menu-item"> + <a href="#" class="active"> + My profile + </a> + </menuitem> + <menuitem class="divider"></menuitem> + <menuitem class="menu-item"> + <a href="#"> + Settings + </a> + </menuitem> + <menuitem class="menu-item"> + <a href="#"> + Logout + </a> + </menuitem> + </menu> + </div> + <div class="column col-3"> + <ul class="menu"> + <li class="menu-header"> + <span class="menu-header-text"> + Go to + </span> + </li> + <li class="menu-item"> + <a href="#"> + Slack + </a> + </li> + <li class="menu-item"> + <a href="#"> + Hipchat + </a> + </li> + <li class="menu-item"> + Skype + </li> + </ul> + </div> + <div class="column col-3"> + <ul class="menu"> + <li class="menu-header"> + <span class="menu-header-text"> + Go to + </span> + </li> + <li class="menu-item"> + <a href="#"> + <span class="icon icon-link"></span> Slack + </a> + </li> + <li class="menu-item"> + <a href="#"> + <span class="icon icon-link"></span> Hipchat + </a> + </li> + <li class="menu-item"> + <span class="icon icon-link"></span> Skype + </li> + </ul> + </div> + </div> + + <!-- menus example --> +<pre class="code lang-html"> +<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-header"</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"menu-header-text"</span>> + Go to + <<span class="tag">/span</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/span</span>> Slack + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/span</span>> HIpchat + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/span</span>> skype + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</pre> + + </section> + + <section id="navigation"> + <header class="text-center"><h4>navigation</h4></header> + <section class="notes"> + <p><strong>Navigation</strong> includes several components, including breadcrumbs and tabs.</p> + </section> + <header class="text-center"><h5>breadcrumbs</h5></header> + <section class="notes"> + <p>Add a container element with the class <code class="label">breadcrumb</code>. And add child elements with the classname <code class="label">breadcrumb-item</code>.</p> + </section> + <div class="columns"> + <div class="column"> + <ul class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="#"> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a href="#"> + Profile + </a> + </li> + <li class="breadcrumb-item"> + <a href="#"> + Change avatar + </a> + </li> + </ul> + </div> + </div> + + <!-- breadcrumbs example --> +<pre class="code lang-html"> +<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Home + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Profile + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Change avatar + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</pre> + + <header class="text-center"><h5>tabs</h5></header> + <section class="notes"> + <p>Add a container element with the class <code class="label">tab</code>. And add child elements with the classname <code class="label">tab-item</code>. You can add the class <code class="label">tab-block</code> for a full-width tab.</p> + </section> + <div class="columns"> + <div class="column"> + <ul class="tab"> + <li class="tab-item active"> + <a href="#"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#"> + Radio + </a> + </li> + <li class="tab-item"> + <a href="#"> + Connect + </a> + </li> + </ul> + </div> + <div class="column"> + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#"> + Radio + </a> + </li> + <li class="tab-item"> + <a href="#"> + Connect + </a> + </li> + </ul> + </div> + </div> + + <!-- tabs example --> +<pre class="code lang-html"> +<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Music + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Playlists + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Radio + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Connect + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</pre> + + </section> + + <section id="badges"> + <header class="text-center"><h4>badges</h4></header> + <section class="notes"> + <p><strong>Badges</strong> are often used as unread number indicators.</p> + <p>Add the class <code class="label">badge</code> to non self closing elements. And add the attribute <code class="label">data-badge</code> to define the content of a badge. The badge will appear in the top-right direction of the element.</p> + </section> + <div class="columns"> + <div class="column"> + <span class="badge" data-badge="1"> + Notifications + </span> + </div> + <div class="column"> + <span class="badge" data-badge="99"> + Notifications + </span> + </div> + <div class="column"> + <span class="badge" data-badge="999"> + Notifications + </span> + </div> + <div class="column"> + <span class="badge" data-badge="♀"> + Notifications + </span> + </div> + </div> + + <!-- badges example --> +<pre class="code lang-html"> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"99"</span>> + Notifications +<<span class="tag">/span</span>> +</pre> + + </section> + + <section id="modals"> + <header class="text-center"><h4>modals</h4></header> + <section class="notes"> + <p></p> + </section> + <div class="columns"> + <div class="column"> + <div class="modal"> + <div class="modal-container" role="document"> + <div class="modal-header"> + <button type="button" class="btn btn-clear pull-right" aria-label="Close"></button> + <h6 class="modal-title">Modal title</h6> + </div> + <div class="modal-body"> + <div class="content"> + <p> + This is the content inside the modal. + </p> + <h4>Lorem ipsum</h4> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. + </p> + <p> + Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs. + </p> + <h4>Cupcake ipsum</h4> + <p> + Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels. + </p> + <p> + De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve. + </p> + <h4>Candy ipsum</h4> + <p> + Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar. + </p> + <p> + Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow. + </p> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-link">Close</button> + <button class="btn btn-primary">Share</button> + </div> + </div> + </div> + </div> + </div> + + <!-- modals example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-header"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear pull-right"</span>><<span class="tag">/button</span>> + <<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">"modal-title"</span>>Modal title<<span class="tag">/h6</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-body"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"content"</span>> + <span class="com"><!-- content here --></span> + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-footer"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Close<<span class="tag">/button</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Share<<span class="tag">/button</span>> + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</pre> + + </section> + <section id="cards"> + <header class="text-center"><h4>cards</h4></header> + <section class="notes"> + <p><strong>Cards</strong> are flexible content containers.</p> + <p>Add a container element with the class <code class="label">card</code>. And add child elements with the class name <code class="label">card-image</code>, <code class="label">card-header</code>, <code class="label">card-content</code> and/or <code class="label">card-footer</code> in any order. </p> + </section> + <div class="columns"> + <div class="column col-4"> + <div class="card"> + <div class="card-image"> + <img class="img-responsive" src="demo/img/osx-el-capitan.jpg" /> + </div> + <div class="card-header"> + <h4 class="card-title">Microsoft</h4> + <h6 class="card-meta">Software and hardware</h6> + </div> + <div class="card-body"> + Empower every person and every organization on the planet to achieve more. + </div> + <div class="card-footer"> + <a href="#" class="btn btn-primary">Do</a> + </div> + </div> + </div> + <div class="column col-4"> + <div class="card"> + <div class="card-header"> + <h4 class="card-title">Apple</h4> + <h6 class="card-meta">Hardware and software</h6> + </div> + <div class="card-image"> + <img class="img-responsive" src="demo/img/osx-yosemite.jpg" /> + </div> + <div class="card-body"> + To make a contribution to the world by making tools for the mind that advance humankind. + </div> + <div class="card-footer"> + <div class="btn-group btn-group-block"> + <button class="btn">Buy</button> + <button class="btn">Buy</button> + <button class="btn">Buy</button> + </div> + </div> + </div> + </div> + <div class="column col-4"> + <div class="card"> + <div class="card-header"> + <h4 class="card-title">Google</h4> + <h6 class="card-meta">Software and hardware</h6> + </div> + <div class="card-body"> + Organize the world’s information and make it universally accessible and useful. + </div> + <div class="card-footer"> + <a href="#" class="btn btn-primary">Ad</a> + </div> + </div> + </div> + </div> + + <!-- cards example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-image"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> /> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-header"</span>> + <<span class="tag">h4</span> <span class="atn">class</span>=<span class="atv">"card-title"</span>>Microsoft<<span class="tag">/h4</span>> + <<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">"card-meta"</span>>Software and hardware<<span class="tag">/h6</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-body"</span>> + To make a contribution to the world by making tools for the mind that advance humankind. + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-footer"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Do<<span class="tag">/button</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</pre> + + </section> + </section> +</body> +</html> |