Skip to content

Instantly share code, notes, and snippets.

View trinhtanloc789's full-sized avatar

trinhtanloc789

View GitHub Profile
@trinhtanloc789
trinhtanloc789 / index.html
Created October 23, 2019 01:08
Simple Bootstrap datepicker example
<div class="container">
<div class="row">
Date formats: yyyy-mm-dd, yyyymmdd, dd-mm-yyyy, dd/mm/yyyy, ddmmyyyyy
</div>
<br />
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
@trinhtanloc789
trinhtanloc789 / index.html
Created October 23, 2019 01:12
RangeSlider pure [issue boilerplate]
<div class="container">
<input type="range"/>
<output data-output></output>
</div>
@trinhtanloc789
trinhtanloc789 / css-range-slider.markdown
Created October 23, 2019 01:59
CSS Range Slider
@trinhtanloc789
trinhtanloc789 / index.html
Created October 23, 2019 02:29
Range slider output
<main>
<form oninput="output.value = Math.round(range.valueAsNumber / 1000)">
<h2>
Range slider
</h2>
<div class="range">
<input name="range" type="range" min="0" max="100000">
<div class="range-output">
<output class="output" name="output" for="range">
50
@trinhtanloc789
trinhtanloc789 / index.html
Created October 23, 2019 02:42
UI Range Slider
<html lang="en-US">
<title>Simple Range Input Slider With Output</title>
<head>
<link href='https://fonts.googleapis.com/css?family=Quantico' rel='stylesheet' type='text/css'>
</head>
<div class="container">
@trinhtanloc789
trinhtanloc789 / index.html
Created October 23, 2019 03:05
Range Slider
<div class="main">
<div class="slideContainer">
<label>Value: <span id="value"></span></label>
<input type="range" min="0" max="100" value="1" class="slider" id="myRange">
</div>
</div>
@trinhtanloc789
trinhtanloc789 / index.pug
Created October 23, 2019 06:51
Youtube card
.card
.card-play
.card-video
iframe#video(src="https://www.youtube.com/embed/JE9z-gy4De4?enablejsapi=1&html5=1&iv_load_policy=3&rel=0&showinfo=0", frameborder="0", allowfullscreen)
@trinhtanloc789
trinhtanloc789 / index.html
Created November 1, 2019 08:51
Tab Pill
<div class="tabs">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
<li><a href="#section5">Section 5</a></li>
</ul>
<section id="section1">
<h2>Section 1</h2>
@trinhtanloc789
trinhtanloc789 / bootstrap-tabs-pills.markdown
Created November 1, 2019 08:53
[bootstrap] tabs/pills
@trinhtanloc789
trinhtanloc789 / index.html
Created November 1, 2019 09:46
Reponsive Bootstrap Tabs
<div class="wrapper">
<div class="container">
<div id="narrow-browser-alert" class="alert alert-info text-center">
<strong>Heads up!</strong> <br>Narrow your browser!</div>
<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs nav-tabs-responsive" role="tablist">
<li role="presentation" class="active">
<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">