You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
276 lines
14 KiB
276 lines
14 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CSS Components | Upstage Component</title>
|
|
<link rel="stylesheet" href="assets/upstage.css">
|
|
<link rel="stylesheet" href="assets/components.css">
|
|
<link rel="stylesheet" href="assets/docs.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="navbar navbar-fixed-top">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="index.html">UPSTAGE</a>
|
|
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="nav-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<div class="nav-collapse collapse bs-navbar-collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li class="brand-subtitle">Component</li>
|
|
</ul>
|
|
<ul class="nav navbar-nav pull-right">
|
|
<li>
|
|
<a href="https://github.com/upstage/components/">GitHub Repo</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/upstage/components/issues">Issues</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col col-lg-12">
|
|
<div class="panel panel-docs">
|
|
<div class="page-header">
|
|
<div class="container">
|
|
<h1>CSS Sections</h1>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=upstage&repo=css-section&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=upstage&repo=css-section&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
|
</div>
|
|
</div>
|
|
<section class="section section-white">
|
|
<div class="container-fluid text-center">
|
|
<div class="row">
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section section-blue">
|
|
<div class="container-fluid text-center">
|
|
<div class="row">
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#006b9f:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#006b9f:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#006b9f:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section section-aqua">
|
|
<div class="container-fluid text-center">
|
|
<div class="row">
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#219eb6:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#219eb6:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#219eb6:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section section-slate">
|
|
<div class="container-fluid text-center">
|
|
<div class="row">
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#354149:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#354149:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#354149:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section section-violet">
|
|
<div class="container-fluid text-center">
|
|
<div class="row">
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#414798:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#414798:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#414798:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section section-gray">
|
|
<div class="container-fluid text-center">
|
|
<div class="row">
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#6f7b82:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#6f7b82:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
<div class="col col-lg-4">
|
|
<img class="img-circle" data-src="holder.js/110x110/#6f7b82:#fff">
|
|
<h3>Heading</h3>
|
|
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.</p>
|
|
<p>
|
|
<a class="label" href="#">View details</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="page-header">
|
|
<div class="container">
|
|
<h1>CSS Buttons</h1>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=upstage&repo=css-button&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=upstage&repo=css-button&type=fork&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
|
</div>
|
|
</div>
|
|
<h2>Buttons</h2>
|
|
<a class="btn btn-info" href="#">Base Button</a>
|
|
<a class="btn btn-primary" href="#">Base Button</a>
|
|
<a class="btn btn-jade" href="#">Base Button</a>
|
|
<a class="btn btn-success" href="#">Base Button</a>
|
|
<a class="btn btn-warning" href="#">Base Button</a>
|
|
<a class="btn btn-danger" href="#">Base Button</a>
|
|
<a class="btn btn-inverse" href="#">Base Button</a>
|
|
<h2>Small Buttons</h2>
|
|
<a class="btn btn-info btn-small" href="#">Small Button</a>
|
|
<a class="btn btn-primary btn-small" href="#">Small Button</a>
|
|
<a class="btn btn-jade btn-small" href="#">Small Button</a>
|
|
<a class="btn btn-success btn-small" href="#">Small Button</a>
|
|
<a class="btn btn-warning btn-small" href="#">Small Button</a>
|
|
<a class="btn btn-danger btn-small" href="#">Small Button</a>
|
|
<a class="btn btn-inverse btn-small" href="#">Small Button</a>
|
|
<h2>Large Buttons</h2>
|
|
<a class="btn btn-info btn-large" href="#">Large Button</a>
|
|
<a class="btn btn-primary btn-large" href="#">Large Button</a>
|
|
<a class="btn btn-jade btn-large" href="#">Large Button</a>
|
|
<a class="btn btn-success btn-large" href="#">Large Button</a>
|
|
<a class="btn btn-warning btn-large" href="#">Large Button</a>
|
|
<a class="btn btn-danger btn-large" href="#">Large Button</a>
|
|
<a class="btn btn-inverse btn-large" href="#">Large Button</a>
|
|
<h2>Jumbo Buttons</h2>
|
|
<a class="btn btn-info btn-jumbo" href="#">Jumbo Button</a>
|
|
<a class="btn btn-primary btn-jumbo" href="#">Jumbo Button</a>
|
|
<a class="btn btn-jade btn-jumbo" href="#">Jumbo Button</a>
|
|
<a class="btn btn-success btn-jumbo" href="#">Jumbo Button</a>
|
|
<a class="btn btn-warning btn-jumbo" href="#">Jumbo Button</a>
|
|
<a class="btn btn-danger btn-jumbo" href="#">Jumbo Button</a>
|
|
<a class="btn btn-inverse btn-jumbo" href="#">Jumbo Button</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="assets/highlight.js"></script>
|
|
<script src="assets/holder.js"></script>
|
|
</body>
|
|
|
|
</html> |