use-theme-editor
Version:
Zero configuration CSS variables based theme editor
508 lines (464 loc) • 21.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halfmoon</title>
<link rel="stylesheet" href="../dist/halfmoon.css">
<link href="../static/site/css/documentation-styles-4.css" rel="stylesheet">
</head>
<body>
<div class="page-wrapper with-navbar with-sidebar with-navbar-fixed-bottom" data-sidebar-type="overlayed-sm-and-down">
<!-- Sticky alerts (toasts), empty container -->
<!-- Reference: https://www.gethalfmoon.com/docs/sticky-alerts-toasts -->
<div class="sticky-alerts"></div>
<!-- Navbar start -->
<nav class="navbar">
<!-- Reference: https://www.gethalfmoon.com/docs/navbar -->
</nav>
<!-- Navbar end -->
<!-- Content wrapper start -->
<div class="content-wrapper">
<!--
Add your page's main content here
Examples:
1. https://www.gethalfmoon.com/docs/content-and-cards/#building-a-page
2. https://www.gethalfmoon.com/docs/grid-system/#building-a-dashboard
-->
<div class="w-full h-full d-flex justify-content-center">
<br><br><br><br>
<div class="container">
<!-- Card with no padding with a content container nested inside of it -->
<div class="w-400 mw-full">
<!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
<div class="card p-0">
<!-- p-0 = padding: 0 -->
<!-- <img src="" class="img-fluid rounded-top" alt="..."> rounded-top = rounded corners on the top -->
<!-- Nested content container inside card -->
<div class="content">
<h2 class="content-title">
Title of the article
</h2>
<p class="text-muted">
Subtitle that hooks the reader and prompts them to click on the read more button.
</p>
<div class="text-right">
<!-- text-right = text-align: right -->
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
<nav aria-label="Page navigation example">
<ul class="pagination">
<!-- Previous page -->
<li class="page-item">
<a href="#" class="page-link">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span> <!-- sr-only = only for screen readers -->
</a>
</li>
<!-- Pages and ellipses -->
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item ellipsis"></li>
<li class="page-item"><a href="#" class="page-link">45</a></li>
<!-- Active page item -->
<li class="page-item active" aria-current="page">
<a href="#" class="page-link" tabindex="-1">46</a>
</li>
<li class="page-item"><a href="#" class="page-link">47</a></li>
<li class="page-item ellipsis"></li>
<li class="page-item"><a href="#" class="page-link">86</a></li>
<!-- Next page -->
<li class="page-item">
<a href="#" class="page-link">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span> <!-- sr-only = only for screen readers -->
</a>
</li>
</ul>
</nav>
</div>
<!-- Card with no padding with multiple content containers nested inside of it -->
<div class="w-600 mw-full">
<!-- w-600 = width: 60rem (600px), mw-full = max-width: 100% -->
<div class="card p-0">
<!-- p-0 = padding: 0 -->
<!-- <img src="" class="img-fluid rounded-top" alt="..."> rounded-top = rounded corners on the top -->
<!-- First content container nested inside card -->
<div class="content">
<h2 class="content-title">
A long and descriptive title of the picture that is slightly pretentious
</h2>
<div>
<span class="text-muted">
<i class="fa fa-clock-o mr-5" aria-hidden="true"></i> May 4th, 2020
<!-- mr-5 = margin-right: 0.5rem (5px) -->
</span>
</div>
<div>
<span class="badge">
<i class="fa fa-comments text-primary mr-5" aria-hidden="true"></i> 5 comments
<!-- text-primary = color: primary-color, mr-5 = margin-right: 0.5rem (5px) -->
</span>
<span class="badge ml-5">
<!-- ml-5 = margin-left: 0.5rem (5px) -->
<i class="fa fa-heart text-danger mr-5" aria-hidden="true"></i> 124 likes
<!-- text-danger = color: danger-color, mr-5 = margin-right: 0.5rem (5px) -->
</span>
</div>
</div>
<hr />
<!-- Second content container nested inside card (comments) -->
<div class="content">
<h2 class="content-title">
Comments
</h2>
<div>
<strong>John Doe</strong>
<br />
Amazing picture! Great job!
</div>
<hr />
<div>
<strong>Jane Doe</strong>
<br />
This is beautiful.
</div>
<hr />
<div>
<strong>James Bucks</strong>
<br />
This is just pretentious enough for my tastes. I love it.
</div>
<div class="text-center mt-20">
<!-- text-center = text-align: center, mt-20 = margin-top: 2rem (20px) -->
<button class="btn btn-sm">Load all comments</button>
</div>
</div>
</div>
</div>
<nav aria-label="...">
<ul class="pagination">
<!-- Disabled page item -->
<li class="page-item disabled">
<a href="#" class="page-link w-50" tabindex="-1">Prev.</a> <!-- w-50 = width: 5rem (50px) -->
</li>
<!-- Active page item -->
<li class="page-item active">
<a href="#" class="page-link" tabindex="-1">1</a>
</li>
<li class="page-item" aria-current="page"><a href="#" class="page-link">2</a></li>
<li class="page-item" aria-current="page"><a href="#" class="page-link">3</a></li>
<li class="page-item">
<a href="#" class="page-link w-50">Next</a> <!-- w-50 = width: 5rem (50px) -->
</li>
</ul>
</nav>
<div class="alert" role="alert">
<h4 class="alert-heading">Default alert</h4>
This is a default alert with some content and <a href="#" class="alert-link">a link</a>.
</div>
<div class="alert alert-primary" role="alert">
<h4 class="alert-heading">Primary alert</h4>
This is a primary alert with some content and <a href="#" class="alert-link">a link</a>.
</div>
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Success alert</h4>
This is a success alert with some content and <a href="#" class="alert-link">a link</a>.
</div>
<div class="alert alert-secondary" role="alert">
<h4 class="alert-heading">Secondary alert</h4>
This is a secondary alert with some content and <a href="#" class="alert-link">a link</a>.
</div>
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">Danger alert</h4>
This is a danger alert with some content and <a href="#" class="alert-link">a link</a>.
</div>
<!-- First button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button class="btn" type="button">Left</button>
<button class="btn" type="button">Middle</button>
<button class="btn" type="button">Right</button>
</div>
<!-- Second button group (used as pagination) -->
<div class="btn-group" role="group" aria-label="Button group as pagination">
<!-- Previous page -->
<button class="btn btn-square" type="button">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous page</span> <!-- sr-only = only for screen readers -->
</button>
<!-- Pages -->
<button class="btn btn-square" type="button">1</button>
<button class="btn btn-square" type="button">2</button>
<button class="btn btn-square" type="button">3</button>
<button class="btn btn-square" type="button">4</button>
<button class="btn btn-square" type="button">5</button>
<!-- Next page -->
<button class="btn btn-square" type="button">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next page</span> <!-- sr-only = only for screen readers -->
</button>
</div>
<!-- Third button group -->
<div class="btn-group" role="group" aria-label="Another button group">
<button class="btn" type="button">Button</button>
<a href="#" class="btn" role="button">Link</a>
<input class="btn btn-primary" type="submit" value="Submit">
</div>
<br>
<br>
<nav aria-label="Breadcrumb navigation example">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Breadcrumb</a></li>
</ul>
</nav>
<!-- Primary progress bar (default, without utility class) -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<br>
<!-- Success progress bar -->
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<!-- Secondary progress bar -->
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 40%" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br>
<!-- Danger progress bar -->
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br><br>
<form action="..." method="..." class="w-400 mw-full">
<!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
<!-- Input -->
<div class="form-group">
<label for="full-name" class="required">Full name</label>
<input type="text" class="form-control" id="full-name" placeholder="Full name" required="required">
</div>
<!-- Radio -->
<div class="form-group">
<label for="gender-male" class="required">Gender</label>
<div class="custom-radio">
<input type="radio" name="gender" id="gender-male" value="male" required="required">
<label for="gender-male">Male</label>
</div>
<div class="custom-radio">
<input type="radio" name="gender" id="gender-female" value="female" required="required">
<label for="gender-female">Female</label>
</div>
<div class="custom-radio">
<input type="radio" name="gender" id="gender-other" value="other" required="required">
<label for="gender-other">Other</label>
</div>
</div>
<!-- Select -->
<div class="form-group">
<label for="area-of-specialization" class="required">Area of specialization</label>
<select class="form-control" id="area-of-specialization" required="required">
<option value="" selected="selected" disabled="disabled">Select your area of specialization</option>
<option value="front-end">Front-end</option>
<option value="back-end">Back-end</option>
<option value="full-stack">Full-stack</option>
</select>
</div>
<!-- Multi-select -->
<div class="form-group">
<label for="languages" class="required">Languages</label>
<select class="form-control" id="languages" multiple="multiple" required="required" size="5">
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="php">PHP</option>
...
</select>
</div>
<!-- Textarea -->
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description"
placeholder="Write a short description about yourself."></textarea>
</div>
<!-- File input -->
<div class="form-group">
<label for="picture" class="required">Display picture</label>
<div class="custom-file">
<input type="file" id="picture" required="required">
<label for="picture">Choose picture</label>
</div>
</div>
<!-- Switch -->
<div class="form-group">
<div class="custom-switch">
<input type="checkbox" id="remember-my-information">
<label for="remember-my-information">Remember my information</label>
</div>
</div>
<!-- Checkbox -->
<div class="form-group">
<div class="custom-checkbox">
<input type="checkbox" id="agree-to-terms">
<label for="agree-to-terms">I agree to all the <a href="#" class="hyperlink">terms and
conditions</a></label>
</div>
</div>
<!-- Submit button -->
<input class="btn btn-primary" type="submit" value="Submit">
</form>
<form action="..." method="...">
<!-- First row -->
<div class="form-row row-eq-spacing-sm">
<div class="col-sm">
<label for="first-name" class="required">First name</label>
<input type="text" class="form-control" id="first-name" placeholder="First name" required="required">
</div>
<div class="col-sm">
<label for="last-name">Last name</label>
<input type="text" class="form-control" id="last-name" placeholder="Last name">
</div>
</div>
<!-- Second row container -->
<div>
<!-- Label -->
<label for="day-of-birth" class="required">Date of birth</label>
<!-- Second row -->
<div class="form-row row-eq-spacing">
<div class="col">
<input type="text" class="form-control" id="day-of-birth" placeholder="Day" pattern="[0-9]*"
inputmode="numeric" required="required">
</div>
<div class="col">
<input type="text" class="form-control" id="month-of-birth" placeholder="Month" pattern="[0-9]*"
inputmode="numeric" required="required">
</div>
<div class="col">
<input type="text" class="form-control" id="year-of-birth" placeholder="Year" pattern="[0-9]*"
inputmode="numeric" required="required">
</div>
</div>
</div>
<!-- Third row container -->
<div>
<label for="state" class="required">School</label>
<!-- Third row -->
<div class="form-row row-eq-spacing-md">
<div class="col-md-3">
<select class="form-control" id="state" required="required">
<option value="" selected="selected" disabled="disabled">State</option>
<option value="NY">NY</option>
<option value="NJ">NJ</option>
<option value="PA">PA</option>
</select>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="school-name" placeholder="Name of school"
required="required">
</div>
</div>
</div>
<!-- Submit button container -->
<div class="text-right">
<!-- text-right = text-align: right -->
<input class="btn btn-primary" type="submit" value="Submit">
</div>
</form>
<!-- Contextual classes -->
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Row type</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Default</td>
<td>Cell</td>
</tr>
<tr class="table-primary">
<th>2</th>
<td>Primary</td>
<td>Cell</td>
</tr>
<tr class="table-success">
<th>3</th>
<td>Success</td>
<td>Cell</td>
</tr>
<tr class="table-secondary">
<th>4</th>
<td>Secondary</td>
<td>Cell</td>
</tr>
<tr class="table-danger">
<th>5</th>
<td>Danger</td>
<td>Cell</td>
</tr>
</tbody>
</table>
<!-- Equal in-between spacing with content -->
<div class="container-fluid">
<!-- First row -->
<div class="row row-eq-spacing-md">
<div class="col-md-6">
<div class="content">
<div class="alert alert-primary" role="alert">
<h4 class="alert-heading">Primary alert</h4>
Contextual alert box with some placeholder content and <a href="#" class="alert-link">a link</a>.
</div>
</div>
</div>
<div class="col-md-6">
<div class="content">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Success alert</h4>
Contextual alert box with some placeholder content and <a href="#" class="alert-link">a link</a>.
</div>
</div>
</div>
</div>
<!-- Second row -->
<div class="row row-eq-spacing-md">
<div class="col-md-6">
<div class="content">
<div class="alert alert-secondary" role="alert">
<h4 class="alert-heading">Secondary alert</h4>
Contextual alert box with some placeholder content and <a href="#" class="alert-link">a link</a>.
</div>
</div>
</div>
<div class="col-md-6">
<div class="content">
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">Danger alert</h4>
Contextual alert box with some placeholder content and <a href="#" class="alert-link">a link</a>.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content wrapper end -->
<!-- Navbar fixed bottom start -->
<nav class="navbar navbar-fixed-bottom">
<!-- Reference: https://www.gethalfmoon.com/docs/navbar#navbar-fixed-bottom -->
</nav>
<!-- Navbar fixed bottom end -->
</div>
<link rel="stylesheet" href="../../dist/main.css">
<script src="../../dist/bundle.js"></script>
</body>
</html>