344 lines
14 KiB
PHP
344 lines
14 KiB
PHP
@extends('layout.master')
|
|
|
|
@section('content')
|
|
<div class="row">
|
|
<div class="col-md-6 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Headings</h4>
|
|
<p class="card-description"> Add tags <code><h1></code> to <code><h6></code> or class <code>.h1</code> to <code>.h6</code> </p>
|
|
<div class="template-demo">
|
|
<h1>h1. Heading</h1>
|
|
<h2>h2. Heading</h2>
|
|
<h3>h3. Heading</h3>
|
|
<h4>h4. Heading</h4>
|
|
<h5>h5. Heading</h5>
|
|
<h6>h6. Heading</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Headings with secondary text</h4>
|
|
<p class="card-description"> Add faded secondary text to headings </p>
|
|
<div class="template-demo">
|
|
<h1> h1. Heading <small class="text-muted"> Secondary text </small>
|
|
</h1>
|
|
<h2> h2. Heading <small class="text-muted"> Secondary text </small>
|
|
</h2>
|
|
<h3> h3. Heading <small class="text-muted"> Secondary text </small>
|
|
</h3>
|
|
<h4> h4. Heading <small class="text-muted"> Secondary text </small>
|
|
</h4>
|
|
<h5> h5. Heading <small class="text-muted"> Secondary text </small>
|
|
</h5>
|
|
<h6> h6. Heading <small class="text-muted"> Secondary text </small>
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Display headings</h4>
|
|
<p class="card-description"> Add class <code>.display1</code> to <code>.display-4</code> </p>
|
|
<div class="template-demo">
|
|
<h1 class="display-1">Display 1</h1>
|
|
<h1 class="display-2">Display 2</h1>
|
|
<h1 class="display-3">Display 3</h1>
|
|
<h1 class="display-4">Display 4</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 d-flex align-items-stretch">
|
|
<div class="row">
|
|
<div class="col-md-12 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Paragraph</h4>
|
|
<p class="card-description"> Write text in <code><p></code> tag </p>
|
|
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley not only five centuries, </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Icon size</h4>
|
|
<p class="card-description"> Add class <code>.icon-lg</code>, <code>.icon-md</code>, <code>.icon-sm</code> </p>
|
|
<div class="row">
|
|
<div class="col-md-4 d-flex align-items-center">
|
|
<div class="d-flex flex-row align-items-center">
|
|
<i class="mdi mdi-compass icon-lg text-warning"></i>
|
|
<p class="mb-0 ml-1"> Icon-lg </p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-center">
|
|
<div class="d-flex flex-row align-items-center">
|
|
<i class="mdi mdi-compass icon-md text-success"></i>
|
|
<p class="mb-0 ml-1"> Icon-md </p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 d-flex align-items-center">
|
|
<div class="d-flex flex-row align-items-center">
|
|
<i class="mdi mdi-compass icon-sm text-danger"></i>
|
|
<p class="mb-0 ml-1"> Icon-sm </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Blockquotes</h4>
|
|
<p class="card-description"> Wrap content inside <code><blockquote class="blockquote"></code> </p>
|
|
<blockquote class="blockquote">
|
|
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
</blockquote>
|
|
</div>
|
|
<div class="card-body">
|
|
<blockquote class="blockquote blockquote-primary">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite>
|
|
</footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Address</h4>
|
|
<p class="card-description"> Use <code><address></code> tag </p>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<address>
|
|
<p class="font-weight-bold">Victory imc</p>
|
|
<p> 695 lsom Ave, </p>
|
|
<p> Suite 00 </p>
|
|
<p> San Francisco, CA 94107 </p>
|
|
</address>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<address class="text-primary">
|
|
<p class="font-weight-bold"> E-mail </p>
|
|
<p class="mb-2"> johndoe@examplemeail.com </p>
|
|
<p class="font-weight-bold"> Web Address </p>
|
|
<p> www.Victory.com </p>
|
|
</address>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Lead</h4>
|
|
<p class="card-description"> Use class <code>.lead</code> </p>
|
|
<p class="lead"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 grid-margin">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Text colors</h4>
|
|
<p class="card-description"> Use class <code>.text-primary</code>, <code>.text-secondary</code> etc. for text in theme colors </p>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="text-primary">.text-primary</p>
|
|
<p class="text-success">.text-success</p>
|
|
<p class="text-danger">.text-danger</p>
|
|
<p class="text-warning">.text-warning</p>
|
|
<p class="text-info">.text-info</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p class="text-light bg-dark pl-1">.text-light</p>
|
|
<p class="text-secondary">.text-secondary</p>
|
|
<p class="text-dark">.text-dark</p>
|
|
<p class="text-muted">.text-muted</p>
|
|
<p class="text-white bg-dark pl-1">.text-white</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Top aligned media</h4>
|
|
<div class="media">
|
|
<i class="mdi mdi-earth icon-md text-info d-flex align-self-start mr-3"></i>
|
|
<div class="media-body">
|
|
<p class="card-text">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Center aligned media</h4>
|
|
<div class="media">
|
|
<i class="mdi mdi-earth icon-md text-info d-flex align-self-center mr-3"></i>
|
|
<div class="media-body">
|
|
<p class="card-text">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Bottom aligned media</h4>
|
|
<div class="media">
|
|
<i class="mdi mdi-earth icon-md text-info d-flex align-self-end mr-3"></i>
|
|
<div class="media-body">
|
|
<p class="card-text">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Highlighted Text</h4>
|
|
<p class="card-description"> Wrap the text in <code><mark></code> to highlight text </p>
|
|
<p> It is a long <mark class="bg-warning text-white">established</mark> fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">List Unordered</h4>
|
|
<ul>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Integer molestie lorem at massa</li>
|
|
<li>Facilisis in pretium nisl aliquet</li>
|
|
<li>Nulla volutpat aliquam velit</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Bold text</h4>
|
|
<p class="card-description"> Use class <code>.font-weight-bold</code> </p>
|
|
<p> It is a long <span class="font-weight-bold">established fact</span> that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">List Ordered</h4>
|
|
<ol>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Integer molestie lorem at massa</li>
|
|
<li>Facilisis in pretium nisl aliquet</li>
|
|
<li>Nulla volutpat aliquam velit></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title text-primary">Underline</h4>
|
|
<p class="card-description"> Wrap in <code><u></code> tag for underline </p>
|
|
<p>
|
|
<u>lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.</u>
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title text-danger">Lowercase</h4>
|
|
<p class="card-description"> Use class <code>.text-lowercase</code> </p>
|
|
<p class="text-lowercase"> lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua. </p>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title text-warning">Uppercase</h4>
|
|
<p class="card-description"> Use class <code>.text-uppercase</code> </p>
|
|
<p class="text-uppercase"> lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua. </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Mute</h4>
|
|
<p class="card-description"> Use class <code>.text-muted</code> </p>
|
|
<p class="text-muted"> lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua. </p>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title text-success">Strike</h4>
|
|
<p class="card-description"> Wrap content in <code><del></code> tag </p>
|
|
<p>
|
|
<del> lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua. </del>
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title text-info">Capitalized</h4>
|
|
<p class="card-description"> Use class <code>.text-capitalize</code> </p>
|
|
<p class="text-capitalize"> lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua. </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">List with icon</h4>
|
|
<p class="card-description">Add class <code>.list-ticked</code> to <code><ul></code> </p>
|
|
<ul class="list-ticked">
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Integer molestie lorem at massa</li>
|
|
<li>Facilisis in pretium nisl aliquet</li>
|
|
<li>Nulla volutpat aliquam velit></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">List with icon</h4>
|
|
<p class="card-description">Add class <code>.list-arrow</code> to <code><ul></code> </p>
|
|
<ul class="list-arrow">
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Integer molestie lorem at massa</li>
|
|
<li>Facilisis in pretium nisl aliquet</li>
|
|
<li>Nulla volutpat aliquam velit></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">List with icon</h4>
|
|
<p class="card-description">Add class <code>.list-star</code> to <code><ul></code> </p>
|
|
<ul class="list-star">
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Integer molestie lorem at massa</li>
|
|
<li>Facilisis in pretium nisl aliquet</li>
|
|
<li>Nulla volutpat aliquam velit></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection |