<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="open-iconic-master/font/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="css/quill.snow.css">
<link rel="stylesheet" href="css/bludit.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/quill.min.js"></script>
</head>
<body>
<!-- Navbar -->
<div class="bg-light">
<div class="container">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="img/logo.svg" width="30" height="30" class="d-inline-block align-top" alt=""> Bludit
</a>
</nav>
</div>
</div>
</div>
<div class="container">
<!-- 25%/75% split on large devices, small, medium devices hide -->
<div class="row">
<!-- LEFT SIDEBAR - Display only on large devices -->
<div class="sidebar col-lg-2 d-none d-lg-block">
<!-- Use .flex-column to set a vertical direction -->
<ul class="nav flex-column pt-4">
<li class="nav-item">
<a class="nav-link" href="#"><span class="oi oi-dashboard"></span>Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="oi oi-external-link"></span>Website</a>
</li>
<li class="nav-item mt-3">
<a class="nav-link" href="#"><span class="oi oi-plus"></span>New content</a>
</li>
<li class="nav-item mt-3">
<h4>Manage</h4>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Content</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Users</a>
</li>
<li class="nav-item mt-3">
<h4>Settings</h4>
</li>
<li class="nav-item">
<a class="nav-link" href="#">General</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Plugins</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Themes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
<!-- RIGHT MAIN -->
<div class="col-lg-10 pt-4">
<!-- TABS -->
<ul class="nav nav-tabs" id="dynamicTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="content-tab" data-toggle="tab" href="#content" role="tab" aria-controls="content" aria-selected="true">Content</a>
</li>
<li class="nav-item">
<a class="nav-link" id="images-tab" data-toggle="tab" href="#images" role="tab" aria-controls="images" aria-selected="false">Images</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="options-tab" data-toggle="tab" href="#options" role="tab" aria-controls="options" aria-selected="false">Options</a>
</li>
</ul>
<form class="tab-content mt-3" id="dynamicTabContent">
<!-- TABS CONTENT -->
<div class="tab-pane" id="content" role="tabpanel" aria-labelledby="content-tab">
<div class="form-group">
<input type="text" class="form-control form-control-lg" aria-describedby="title" placeholder="Enter title">
</div>
<div class="form-group mt-2">
<div id="editor"></div>
</div>
<div class="form-group mt-2">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn">Save as draft</button>
<button type="button" class="btn">Cancel</button>
</div>
</div>
<!-- TABS IMAGES -->
<div class="tab-pane" id="images" role="tabpanel" aria-labelledby="images-tab">
IMAGES
</div>
<!-- TABS OPTIONS -->
<div class="tab-pane show active" id="options" role="tabpanel" aria-labelledby="options-tab">
<h4>General</h4>
<!-- Categories -->
<div class="form-group row">
<label for="jscategory" class="col-sm-2 col-form-label">Category</label>
<div class="col-sm-10">
<select class="custom-select">
<option selected>- No categoriezed -</option>
<option value="1">Music</option>
<option value="2">Videos</option>
<option value="3">General</option>
</select>
</div>
</div>
<h4>Advanced</h4>
<!-- Date -->
<div class="form-group row">
<label for="jsdate" class="col-sm-2 col-form-label">Date</label>
<div class="col-sm-10">
<select class="custom-select">
<option selected>- No categoriezed -</option>
<option value="1">Music</option>
<option value="2">Videos</option>
<option value="3">General</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
var quill = new Quill('#editor', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Content, support Markdown and HTML.',
theme: 'snow' // or 'bubble'
});
</script>
</body>
</html>