components
Version:
Upstage component library.
276 lines (273 loc) • 14.6 kB
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>