523 lines
29 KiB
PHP
523 lines
29 KiB
PHP
@extends('layouts.app3')
|
|
|
|
@section('title')
|
|
Style Guide
|
|
@endsection
|
|
|
|
@section('breadcrumb-title')
|
|
Style Guide
|
|
@endsection
|
|
|
|
@section('breadcrumb-path')
|
|
<li class="rainbow-breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
|
|
<li class="rainbow-breadcrumb-item active">Style Guide</li>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="rbt-style-guide-area rbt-utilize-area rainbow-section-gap-big">
|
|
<div class="container">
|
|
<div class="row g-5">
|
|
<div class="col-lg-3">
|
|
<div class="rbt-default-sidebar sticky-top rbt-shadow-box rbt-gradient-border">
|
|
<div class="inner">
|
|
<div class="content-item-content">
|
|
<div class="rbt-widget-details">
|
|
<nav class="onepagenav">
|
|
<ul class="mainmenu rbt-course-details-list-wrapper">
|
|
<li class="current">
|
|
<a href="#colorPalette"><span>1. Color Palette</span></a>
|
|
</li>
|
|
<li><a href="#gradient"><span>2. Color Gradient</span></a></li>
|
|
<li><a href="#typography"><span>3. Typography</span></a></li>
|
|
<li><a href="#formElements"><span>4. Form Elements</span></a></li>
|
|
<li><a href="#pagination"><span>5. Pagination</span></a></li>
|
|
<li><a href="#avatars"><span>6. Avatars</span></a></li>
|
|
<li><a href="#animatedHeading"><span>7. Animated Heading</span></a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-9">
|
|
|
|
<div id="colorPalette" class="rbt-elements-area rbt-shadow-box mb--60">
|
|
<div class="wrapper">
|
|
<div class="section-title">
|
|
<h4 class="rbt-title-style-3">Color Palette</h4>
|
|
</div>
|
|
|
|
<div class="row g-5">
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-primary radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#805AF5</span>
|
|
<h6 class="title mb--0">Primary Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-primary-alt radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#35316f</span>
|
|
<h6 class="title mb--0">Primary Alt Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-secondary radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#ffffff</span>
|
|
<h6 class="title mb--0">Secondary Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-heading radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#800080</span>
|
|
<h6 class="title mb--0">Heading Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-bg-one radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#0E0C15</span>
|
|
<h6 class="title mb--0">Background Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-dark radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#21242D</span>
|
|
<h6 class="title mb--0">Dark Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-darker radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">rgba(6, 6, 6, 0.7)</span>
|
|
<h6 class="title mb--0">Darker Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-darkest radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">rgba(0, 0, 0, 0.3)</span>
|
|
<h6 class="title mb--0">Darkest Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-white-off radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">rgba(255,255,255,0.05)</span>
|
|
<h6 class="title mb--0">white off Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-white radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#FFFFFF</span>
|
|
<h6 class="title mb--0">white Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-body radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#BCC3D7</span>
|
|
<h6 class="title mb--0">Body Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-link radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#B9B9B9</span>
|
|
<h6 class="title mb--0">Link Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-border radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#2E313D</span>
|
|
<h6 class="title mb--0">Border Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-border radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#e5e7eb</span>
|
|
<h6 class="title mb--0">Light Border Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-gray radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#3E414B</span>
|
|
<h6 class="title mb--0">gray Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-midgray radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#878787</span>
|
|
<h6 class="title mb--0">Midgray Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-success radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#3EB75E</span>
|
|
<h6 class="title mb--0">success Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-danger radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#FF0003</span>
|
|
<h6 class="title mb--0">danger Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-warning radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#FFC876</span>
|
|
<h6 class="title mb--0">warning Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-color-info radius-10"></div>
|
|
<div class="content mt--10">
|
|
<span class="rbt-title-style-2">#1BA2DB</span>
|
|
<h6 class="title mb--0">info Color</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="gradient" class="rbt-elements-area rbt-shadow-box mb--60">
|
|
<div class="wrapper">
|
|
|
|
<div class="section-title">
|
|
<h4 class="rbt-title-style-3">Color Gradient</h4>
|
|
</div>
|
|
|
|
<div class="row g-5">
|
|
|
|
<div class="col-lg-3">
|
|
<div class="color-box-inner">
|
|
<div class="color-box bg-gradient-1 radius-10"></div>
|
|
<div class="content mt--10">
|
|
<h6 class="title mb--0">Gradient 1</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="typography" class="rbt-elements-area rbt-shadow-box mb--60">
|
|
<div class="wrapper">
|
|
<div class="section-title">
|
|
<h4 class="rbt-title-style-3">Typography</h4>
|
|
</div>
|
|
|
|
<div class="row g-5">
|
|
<div class="col-lg-6">
|
|
<h1>H1. Heading 1</h1>
|
|
<h2>H2. Heading 2</h2>
|
|
<h3>H3. Heading 3</h3>
|
|
<h4>H4. Heading 4</h4>
|
|
<h5>H5. Heading 5</h5>
|
|
<h6>H6. Heading 6</h6>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<p class="b1">B1- Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
|
Similique non ipsam reiciendis.</p>
|
|
<p class="b2">B2- Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
|
Similique non ipsam reiciendis.</p>
|
|
<p class="b3">B3- Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
|
Similique non ipsam reiciendis.</p>
|
|
<p>Befault- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique
|
|
non
|
|
ipsam reiciendis.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt--40">
|
|
<div class="section-title">
|
|
<h4 class="rbt-title-style-3">Heading Style</h4>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<div class="section-title text-center">
|
|
<h2 class="title">Heading Style One.</h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 mt--60">
|
|
<div class="section-title text-center">
|
|
<h2 class="rbt-title-style-2">Heading Style Two.</h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 mt--60">
|
|
<div class="section-title text-center">
|
|
<h2 class="rbt-title-style-3">Heading Style Three.</h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-12 mt--60">
|
|
<div class="section-title text-center">
|
|
<h2 class="rbt-short-title">Heading Short Title.</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="formElements" class="rbt-elements-area rbt-shadow-box mb--60">
|
|
<div class="wrapper">
|
|
<div class="section-title">
|
|
<h4 class="rbt-title-style-3">Form Elements</h4>
|
|
</div>
|
|
<form action="#" class="rbt-image-genarator-row rbt-default-form row row--15">
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
|
|
<div class="form-group">
|
|
<label for="firstname4">First Name</label>
|
|
<input id="firstname4" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
|
|
<div class="form-group">
|
|
<label for="lastname4">Last Name</label>
|
|
<input id="lastname4" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
|
|
<div class="form-group">
|
|
<label for="username4">User Name</label>
|
|
<input id="username4" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
|
|
<div class="form-group">
|
|
<label for="phonenumber4">Phone Number</label>
|
|
<input id="phonenumber4" type="tel">
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-group">
|
|
<label for="bio4">Bio</label>
|
|
<textarea id="bio4" cols="20" rows="5"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mt--20">
|
|
<div class="form-group mb--0">
|
|
<a class="btn-default" href="#">Update Info</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pagination" class="rbt-elements-area rbt-shadow-box mb--60">
|
|
<div class="wrapper">
|
|
<div class="section-title">
|
|
<h4 class="rbt-title-style-3">Pagination</h4>
|
|
</div>
|
|
<div class="row g-5">
|
|
<div class="col-lg-12">
|
|
<nav>
|
|
<ul class="rbt-pagination justify-content-start">
|
|
<li><a href="#" aria-label="Previous"><i
|
|
class="feather-chevron-left"></i></a></li>
|
|
<li><a href="#">1</a></li>
|
|
<li class="active"><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#" aria-label="Next"><i
|
|
class="feather-chevron-right"></i></a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<nav>
|
|
<ul class="rbt-pagination justify-content-center">
|
|
<li><a href="#" aria-label="Previous"><i
|
|
class="feather-chevron-left"></i></a></li>
|
|
<li><a href="#">1</a></li>
|
|
<li class="active"><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#" aria-label="Next"><i
|
|
class="feather-chevron-right"></i></a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<nav>
|
|
<ul class="rbt-pagination justify-content-end">
|
|
<li><a href="#" aria-label="Previous"><i
|
|
class="feather-chevron-left"></i></a></li>
|
|
<li><a href="#">1</a></li>
|
|
<li class="active"><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#" aria-label="Next"><i
|
|
class="feather-chevron-right"></i></a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="avatars" class="rbt-elements-area rbt-shadow-box mb--60">
|
|
<div class="wrapper">
|
|
<div class="section-title">
|
|
<h4 class="rbt-title-style-3">Avatars</h4>
|
|
</div>
|
|
<div class="row g-5 align-items-center">
|
|
<div class="col-lg-2">
|
|
<div class="rbt-avatars m-auto size-lg">
|
|
<img src="{{ asset('assets/images/team/team-01.png') }}" alt="Author Images">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2">
|
|
<div class="rbt-avatars m-auto">
|
|
<img src="{{ asset('assets/images/team/team-02.png') }}" alt="Author Images">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2">
|
|
<div class="rbt-avatars m-auto size-sm">
|
|
<img src="{{ asset('assets/images/team/team-03.png') }}" alt="Author Images">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="animatedHeading" class="rbt-elements-area rbt-shadow-box mb--60">
|
|
<div class="wrapper">
|
|
<div class="section-title">
|
|
<h4 class="rbt-title-style-3">Animated Heading</h4>
|
|
</div>
|
|
<div class="row g-5">
|
|
<div class="col-lg-12">
|
|
|
|
<h3 class="title">Clip Animated
|
|
<span class="header-caption">
|
|
<span class="cd-headline clip is-full-width">
|
|
<span class="cd-words-wrapper" style="width: 156px;">
|
|
<b class="theme-gradient is-hidden">Clip One.</b>
|
|
<b class="theme-gradient is-visible">Clip Two.</b>
|
|
<b class="theme-gradient is-hidden">Clip Three.</b>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</h3>
|
|
|
|
<h3 class="title">Rotate Animated
|
|
<span class="header-caption">
|
|
<span class="cd-headline rotate-1">
|
|
<span class="cd-words-wrapper" style="width: 221px;">
|
|
<b class="theme-gradient is-visible">Rotate One.</b>
|
|
<b class="theme-gradient is-hidden">Rotate Two.</b>
|
|
<b class="theme-gradient is-hidden">Rotate Three.</b>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</h3>
|
|
|
|
<h3 class="title">Loading Animated
|
|
<span class="header-caption">
|
|
<span class="cd-headline loading-bar">
|
|
<span class="cd-words-wrapper is-loading">
|
|
<b class="theme-gradient is-hidden">Loading One.</b>
|
|
<b class="theme-gradient is-hidden">Loading Two.</b>
|
|
<b class="theme-gradient is-visible">Loading Three.</b>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</h3>
|
|
|
|
<h3 class="title">Zoom Animated
|
|
<span class="header-caption">
|
|
<span class="cd-headline zoom">
|
|
<span class="cd-words-wrapper" style="width: 201px;">
|
|
<b class="theme-gradient is-hidden">Zoom One.</b>
|
|
<b class="theme-gradient is-visible">Zoom Two.</b>
|
|
<b class="theme-gradient is-hidden">Zoom Three.</b>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</h3>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
s
|
|
@endsection
|