420 lines
20 KiB
HTML
420 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Color Admin | Support Forum Front End Theme</title>
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
|
|
<meta content="" name="description" />
|
|
<meta content="" name="author" />
|
|
|
|
<!-- ================== BEGIN core-css ================== -->
|
|
<link href="../assets/css/forum/vendor.min.css" rel="stylesheet" />
|
|
<link href="../assets/css/forum/app.min.css" rel="stylesheet" />
|
|
<!-- ================== END core-css ================== -->
|
|
<!-- ================== BEGIN page-css ================== -->
|
|
<link href="../assets/plugins/summernote/dist/summernote-lite.min.css" rel="stylesheet" />
|
|
<!-- ================== END page-css ================== -->
|
|
|
|
</head>
|
|
<body>
|
|
<!-- begin #header -->
|
|
<div id="header" class="header navbar navbar-default navbar-fixed-top navbar-expand-lg">
|
|
<!-- begin container -->
|
|
<div class="container">
|
|
<!-- begin navbar-brand -->
|
|
<a href="index.html" class="navbar-brand">
|
|
<span class="brand-logo"></span>
|
|
<span class="brand-text">
|
|
Support Forum
|
|
</span>
|
|
</a>
|
|
<!-- end navbar-brand -->
|
|
<!-- begin navbar-toggle -->
|
|
<button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse" data-bs-target="#header-navbar">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<!-- end navbar-toggle -->
|
|
<!-- begin #header-navbar -->
|
|
<div class="collapse navbar-collapse" id="header-navbar">
|
|
<ul class="nav navbar-nav navbar-end">
|
|
<li>
|
|
<form class="navbar-form">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="Enter Keywords..." />
|
|
<button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
|
|
</div>
|
|
</form>
|
|
</li>
|
|
<li><a href="javascript:;">Create Account</a></li>
|
|
<li><a href="javascript:;">Sign In</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- end #header-navbar -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #header -->
|
|
|
|
<!-- begin page-title -->
|
|
<div class="page-title has-bg">
|
|
<!-- begin bg-cover -->
|
|
<div class="bg-cover" data-paroller="true" data-paroller-factor="0.5" data-paroller-factor-xs="0.01" style="background-image: url(../assets/img/cover/cover-3.jpg)"></div>
|
|
<!-- end bg-cover -->
|
|
<!-- begin container -->
|
|
<div class="container">
|
|
<!-- begin breadcrumb -->
|
|
<ul class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="index.html">Forum</a></li>
|
|
<li class="breadcrumb-item"><a href="category_list.html">Twitter Bootstrap</a></li>
|
|
<li class="breadcrumb-item active"> </li>
|
|
</ul>
|
|
<!-- end breadcrumb -->
|
|
<h1>How to create an arrow by using css?</h1>
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end page-title -->
|
|
|
|
<!-- begin content -->
|
|
<div class="content">
|
|
<!-- begin container -->
|
|
<div class="container">
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-9 -->
|
|
<div class="col-lg-9">
|
|
<!-- begin pagination -->
|
|
<ul class="pagination justify-content-end mb-4">
|
|
<li class="page-item active"><a href="#" class="page-link">1</a></li>
|
|
<li class="page-item"><a href="#" class="page-link">2</a></li>
|
|
<li class="page-item"><a href="#" class="page-link">3</a></li>
|
|
<li class="page-item"><a href="#" class="page-link">4</a></li>
|
|
<li class="page-item"><a href="#" class="page-link">5</a></li>
|
|
<li class="page-item text"><span>...</span></li>
|
|
<li class="page-item"><a href="#" class="page-link">322</a></li>
|
|
<li class="page-item right"><a href="#" class="page-link"><i class="fa fa-chevron-right"></i></a></li>
|
|
</ul>
|
|
<!-- end pagination -->
|
|
<!-- begin forum-list -->
|
|
<ul class="forum-list forum-detail-list mb-4">
|
|
<li>
|
|
<!-- begin media -->
|
|
<div class="media">
|
|
<img src="../assets/img/user/user-1.jpg" alt="" class="rounded-3" />
|
|
<span class="badge fw-bold fs-10px rounded-2 bg-red">ADMIN</span>
|
|
</div>
|
|
<!-- end media -->
|
|
<!-- begin info-container -->
|
|
<div class="info-container">
|
|
<div class="post-user"><a href="#">Radomit Grigor</a> <small>SAYS</small></div>
|
|
<div class="post-content">
|
|
Hi All, <br /><br />
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis, risus quis tincidunt vestibulum, elit massa placerat elit,
|
|
at sagittis mi mauris a mi. Ut ullamcorper quam ut nisi aliquam placerat. In et malesuada enim, eu pretium elit.
|
|
Sed ut tortor nulla. Fusce malesuada mi velit, consequat egestas lectus blandit in.<br /><br />
|
|
<pre class="p-15px"><code>var handleAddCommasToNumber = function(value) {
|
|
return value.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
|
|
};</code></pre>
|
|
Curabitur lacinia hendrerit ante. Suspendisse arcu turpis, gravida quis massa non, sagittis auctor felis.
|
|
Praesent varius feugiat lectus et venenatis. Mauris ornare metus ac euismod interdum. Suspendisse id fringilla elit.
|
|
Donec egestas mollis velit. Donec consectetur malesuada est et luctus. Quisque eget magna accumsan, pellentesque nibh dapibus, ultrices tellus.
|
|
Mauris sit amet justo eu sem eleifend porttitor in ac mi.
|
|
Morbi pellentesque et odio nec vehicula. Nunc vulputate lobortis magna.
|
|
<br /><br />
|
|
Thank you in Advance!<br />
|
|
</div>
|
|
<div class="post-time">4 hours ago</div>
|
|
</div>
|
|
<!-- end info-container -->
|
|
</li>
|
|
<li>
|
|
<!-- begin media -->
|
|
<div class="media">
|
|
<img src="../assets/img/user/user-2.jpg" alt="" class="rounded-3" />
|
|
<span class="badge fw-bold fs-10px rounded-2 bg-gray-500">USER</span>
|
|
</div>
|
|
<!-- end media -->
|
|
<!-- begin info-container -->
|
|
<div class="info-container">
|
|
<div class="post-user"><a href="#">Hagano</a> <small>SAYS</small></div>
|
|
<div class="post-content">
|
|
Curabitur et tempus risus. Aenean et tortor pretium ligula elementum blandit. Aliquam in nibh vitae ligula molestie tristique nec quis augue.
|
|
</div>
|
|
<div class="post-time">5 hours ago</div>
|
|
</div>
|
|
<!-- end info-container -->
|
|
</li>
|
|
<li>
|
|
<!-- begin media -->
|
|
<div class="media">
|
|
<img src="../assets/img/user/user-3.jpg" alt="" class="rounded-3" />
|
|
<span class="badge fw-bold fs-10px rounded-2 bg-primary">STAFF</span>
|
|
</div>
|
|
<!-- end media -->
|
|
<!-- begin info-container -->
|
|
<div class="info-container">
|
|
<div class="post-user"><a href="#">Cruz Erwann</a> <small>SAYS</small></div>
|
|
<div class="post-content">
|
|
Sed lacinia nec odio eu maximus!
|
|
</div>
|
|
<div class="post-time">5 hours ago</div>
|
|
</div>
|
|
<!-- end info-container -->
|
|
</li>
|
|
<li>
|
|
<!-- begin media -->
|
|
<div class="media">
|
|
<img src="../assets/img/user/user-4.jpg" alt="" class="rounded-3" />
|
|
<span class="badge fw-bold fs-10px rounded-2 bg-gray-500">USER</span>
|
|
</div>
|
|
<!-- end media -->
|
|
<!-- begin info-container -->
|
|
<div class="info-container">
|
|
<div class="post-user"><a href="#">Boyce</a> <small>SAYS</small></div>
|
|
<div class="post-content">
|
|
Aliquam sit amet justo accumsan, pulvinar purus vel, aliquet dolor. Cras tempus magna sit amet est sagittis, a egestas ligula fringilla.
|
|
Nunc volutpat metus non turpis cursus faucibus. Aliquam molestie arcu et ipsum placerat, et porta orci euismod. <br /><br />
|
|
Nam sed magna at turpis imperdiet ornare. Maecenas tincidunt iaculis ligula quis ultrices. Nunc id elit vel nulla efficitur ultrices in at nunc.
|
|
Fusce imperdiet urna vitae lectus aliquet lobortis.<br /><br />
|
|
Aenean non felis non leo dignissim egestas id id tellus. Nulla at elit sed lectus suscipit tempus.
|
|
Sed non tellus nunc. Curabitur metus ipsum, luctus sed mi at, ullamcorper laoreet tortor.
|
|
Sed nec sem fringilla erat consectetur vestibulum et rutrum augue. Mauris non ultrices velit. <br /><br />
|
|
Duis rutrum turpis sed ipsum auctor blandit. Phasellus iaculis at augue id commodo. Praesent euismod vel nisl sed eleifend.
|
|
Vestibulum malesuada vehicula viverra. Pellentesque maximus semper suscipit. Morbi eget dignissim urna, sit amet tempor nisl. <br /><br />
|
|
Integer vel ipsum ut enim rutrum lacinia. Fusce sapien nunc, vulputate ac cursus in, luctus ac turpis.
|
|
</div>
|
|
<div class="post-time">Just Now</div>
|
|
</div>
|
|
<!-- end info-container -->
|
|
</li>
|
|
</ul>
|
|
<!-- end forum-list -->
|
|
<!-- begin pagination -->
|
|
<ul class="pagination justify-content-end mb-4">
|
|
<li class="page-item active"><a href="#" class="page-link">1</a></li>
|
|
<li class="page-item"><a href="#" class="page-link">2</a></li>
|
|
<li class="page-item"><a href="#" class="page-link">3</a></li>
|
|
<li class="page-item"><a href="#" class="page-link">4</a></li>
|
|
<li class="page-item"><a href="#" class="page-link">5</a></li>
|
|
<li class="page-item text"><span>...</span></li>
|
|
<li class="page-item"><a href="#" class="page-link">322</a></li>
|
|
<li class="page-item right"><a href="#" class="page-link"><i class="fa fa-chevron-right"></i></a></li>
|
|
</ul>
|
|
<!-- end pagination -->
|
|
<!-- begin comment-section -->
|
|
<div class="comment-banner-msg">
|
|
Posting to the forum is only allowed for members with active accounts.
|
|
Please <a href="#">sign in</a> or <a href="#">sign up</a> to post.
|
|
</div>
|
|
<form action="/" name="form_comment" method="POST">
|
|
<div class="card card-forum mb-4 mb-lg-0">
|
|
<div class="card-header">Comment</div>
|
|
<div class="card-body p-0">
|
|
<textarea class="textarea form-control" id="comment" placeholder="Leave your comment here ..." rows="12"></textarea>
|
|
</div>
|
|
<div class="card-footer bg-light">
|
|
<button type="submit" class="btn btn-lg btn-inverse">Post Comment </button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!-- end comment-section -->
|
|
</div>
|
|
<!-- end col-9 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3">
|
|
<!-- begin card-forum -->
|
|
<div class="card card-forum">
|
|
<div class="card-header">Active Threads</div>
|
|
<!-- begin threads-list -->
|
|
<ul class="threads-list">
|
|
<li>
|
|
<h4 class="title"><a href="detail.html">Browser Local Storage Tutorial</a></h4>
|
|
last reply by <a href="#">Anatoliy</a> 1 minutes ago
|
|
</li>
|
|
<li>
|
|
<h4 class="title"><a href="detail.html">How to create live push notification with HTML5 web socket</a></h4>
|
|
last reply by <a href="#">Nasim</a> 8 minutes ago
|
|
</li>
|
|
<li>
|
|
<h4 class="title"><a href="detail.html">Help! How to fire an ajax call while bootstrap modal is loading.</a></h4>
|
|
last reply by <a href="#">Ural</a> 15 minutes ago
|
|
</li>
|
|
<li>
|
|
<h4 class="title"><a href="detail.html">Migrate from jQuery 1.9.x to 2.x.x</a></h4>
|
|
last reply by <a href="#">Arnold</a> 1 hour ago
|
|
</li>
|
|
<li>
|
|
<h4 class="title"><a href="detail.html">Angular JS IE8 compatibility issues</a></h4>
|
|
last reply by <a href="#">Mayeso</a> 4 hours ago
|
|
</li>
|
|
<li>
|
|
<h4 class="title"><a href="detail.html">How to use FontAwesome Cheatsheet?</a></h4>
|
|
last reply by <a href="#">Cepheus Herman</a> 1 day ago
|
|
</li>
|
|
</ul>
|
|
<!-- end threads-list -->
|
|
</div>
|
|
<!-- end card-forum -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end content -->
|
|
|
|
<!-- begin #footer -->
|
|
<div id="footer" class="footer">
|
|
<!-- begin container -->
|
|
<div class="container">
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-4 -->
|
|
<div class="col-md-4">
|
|
<!-- begin section-container -->
|
|
<div class="section-container">
|
|
<h4 class="footer-title">About Color Admin</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices ipsum in elementum porttitor.
|
|
Cras porttitor fermentum nisl non elementum. Nulla in placerat libero. Nulla pharetra purus eget diam dictum
|
|
ullamcorper nec et eros. Suspendisse consectetur nulla ut volutpat aliquam.
|
|
</p>
|
|
</div>
|
|
<!-- end section-container -->
|
|
</div>
|
|
<!-- end col-4 -->
|
|
<!-- begin col-4 -->
|
|
<div class="col-md-4">
|
|
<!-- begin section-container -->
|
|
<div class="section-container">
|
|
<h4 class="footer-title">Latest Post</h4>
|
|
<ul class="latest-post">
|
|
<li>
|
|
<h4 class="title"><a href="#">Consectetur adipiscing elit ultrices</a></h4>
|
|
<p class="time">yesterday 10:42am</p>
|
|
</li>
|
|
<li>
|
|
<h4 class="title"><a href="#">Fusce ultrices ipsum porttitor</a></h4>
|
|
<p class="time">10/04/2025</p>
|
|
</li>
|
|
<li>
|
|
<h4 class="title"><a href="#">Cras porttitor fermentum adipiscing</a></h4>
|
|
<p class="time">02/04/2025</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- end section-container -->
|
|
</div>
|
|
<!-- end col-4 -->
|
|
<!-- begin col-4 -->
|
|
<div class="col-md-4">
|
|
<!-- begin section-container -->
|
|
<div class="section-container">
|
|
<h4 class="footer-title">New Users</h4>
|
|
<ul class="new-user">
|
|
<li><a href="#"><img src="../assets/img/user/user-1.jpg" alt="" /></a></li>
|
|
<li><a href="#"><img src="../assets/img/user/user-2.jpg" alt="" /></a></li>
|
|
<li><a href="#"><img src="../assets/img/user/user-3.jpg" alt="" /></a></li>
|
|
<li><a href="#"><img src="../assets/img/user/user-4.jpg" alt="" /></a></li>
|
|
<li><a href="#"><img src="../assets/img/user/user-5.jpg" alt="" /></a></li>
|
|
<li><a href="#"><img src="../assets/img/user/user-6.jpg" alt="" /></a></li>
|
|
<li><a href="#"><img src="../assets/img/user/user-7.jpg" alt="" /></a></li>
|
|
<li><a href="#"><img src="../assets/img/user/user-8.jpg" alt="" /></a></li>
|
|
<li><a href="#"><img src="../assets/img/user/user-9.jpg" alt="" /></a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- end section-container -->
|
|
</div>
|
|
<!-- end col-4 -->
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #footer -->
|
|
|
|
<!-- begin #footer-copyright -->
|
|
<div id="footer-copyright" class="footer-copyright">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
© 2016 - 2025 SeanTheme All Right Reserved
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<a href="#" class="me-4">Contact Us</a>
|
|
<a href="#">Knowledge Base</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end #footer-copyright -->
|
|
<!-- BEGIN theme-panel -->
|
|
<div class="theme-panel">
|
|
<a href="javascript:;" data-toggle="theme-panel-expand" class="theme-collapse-btn"><i class="fa fa-cog"></i></a>
|
|
<div class="theme-panel-content">
|
|
<div class="theme-list clearfix">
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-red" data-theme-class="theme-red" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Red" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-pink" data-theme-class="theme-pink" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Pink" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-orange" data-theme-class="theme-orange" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Orange" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-yellow" data-theme-class="theme-yellow" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Yellow" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-lime" data-theme-class="theme-lime" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Lime" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-green" data-theme-class="theme-green" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Green" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item active"><a href="javascript:;" class="bg-teal" data-theme-class="" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Default" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-cyan" data-theme-class="theme-cyan" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Aqua" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-blue" data-theme-class="theme-blue" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Blue" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-purple" data-theme-class="theme-purple" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Purple" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-indigo" data-theme-class="theme-indigo" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Indigo" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-gray-500" data-theme-class="theme-gray-500" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Gray" data-original-title="" title=""> </a></div>
|
|
</div>
|
|
<hr class="mb-0" />
|
|
<div class="row mt-10px pt-3px">
|
|
<div class="col-9 control-label text-dark fw-bold">
|
|
<div class="d-flex">Dark Mode <span class="badge bg-primary ms-2 position-relative py-4px px-6px d-flex align-items-center rounded-1">NEW</span></div>
|
|
<div class="lh-sm fs-12px">
|
|
<small class="text-dark opacity-50">
|
|
Adjust the appearance to reduce glare and give your eyes a break.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-3 d-flex">
|
|
<div class="form-check form-switch ms-auto mb-0 mt-2px">
|
|
<input type="checkbox" class="form-check-input" name="app-theme-dark-mode" id="appThemeDarkMode" value="1" />
|
|
<label class="form-check-label" for="appThemeDarkMode"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="mb-0" />
|
|
<div class="row mt-10px pt-3px">
|
|
<div class="col-9 control-label text-dark fw-bold">
|
|
<div class="d-flex">RTL Mode <span class="badge bg-primary ms-2 position-relative py-4px px-6px d-flex align-items-center rounded-1">NEW</span></div>
|
|
<div class="lh-sm fs-12px">
|
|
<small class="text-dark opacity-50">
|
|
Flip the layout direction to support right-to-left languages.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-3 d-flex">
|
|
<div class="form-check form-switch ms-auto mb-0 mt-2px">
|
|
<input type="checkbox" class="form-check-input" name="app-theme-rtl-mode" id="appThemeRtlMode" value="1" />
|
|
<label class="form-check-label" for="appThemeRtlMode"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END theme-panel -->
|
|
|
|
<!-- ================== BEGIN BASE JS ================== -->
|
|
<script src="../assets/js/forum/vendor.min.js"></script>
|
|
<script src="../assets/js/forum/app.min.js"></script>
|
|
|
|
<!-- ================== BEGIN page-js ================== -->
|
|
<script src="../assets/plugins/summernote/dist/summernote-lite.min.js"></script>
|
|
<script src="../assets/js/forum/demo/forum-details-page.js"></script>
|
|
<!-- ================== END page-js ================== -->
|
|
</body>
|
|
</html>
|