Horse Mimic
created by:BigGayFish
Copy
<div class="container" style="font-size: 12pt; color: #333333;">
<div class="card rounded-0 bg-white" style="border: #013499 2px solid;">
<!--HEADER-->
<div class="card rounded-0 p-2" style="background-image:linear-gradient(to bottom,#24429A,#00297E); border-bottom: #25439C 2px solid; color: #fff;">
<!--HEADER TITLE-->
<p><span style="font-size:20pt;">NAME/TITLE</span> One half text
<span class="pull-right">Other Text</span>
</p>
<!--END OF HEADER TITLE-->
</div>
<!--END OF HEADER-->
<!--LINKS-->
<div class="card-text p-2" style="border-bottom: #999999 1px solid;">
<a href="#" style="color: #0033AA;">LINK 1</a> | <a href="#" style="color: #0033AA;">LINK 2</a> | <a href="#" style="color: #0033AA;">LINK 3</a> | <a href="#" style="color: #0033AA;">LINK 4</a> | <a href="#" style="color: #0033AA;">LINK 5</a> | <a href="#" style="color: #0033AA;">LINK 6</a> | <a href="#" style="color: #0033AA;">LINK 7</a> | <a href="#" style="color: #0033AA;">LINK 8</a>
</div>
<!--END OF LINKS-->
<div class="row p-3">
<div class="col-sm-3 mb-3">
<!--HORSE IMG CAROUSEL-->
<div class="card rounded-0 border-0 p-3 mb-3" style="background: #F5F5F5;">
<div id="HORSEIMG" class="carousel slide" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!--HORSE 1-->
<div class="carousel-item active">
<img class="d-block w-100" src="
https://dummyimage.com/350/ffffff/000000
">
</div>
<!--END OF HORSE 1-->
<!--HORSE 2-->
<div class="carousel-item">
<img class="d-block w-100" src="
https://dummyimage.com/350/ffffff/000000
">
</div>
<!--END OF HORSE 2-->
<!--HORSE 3-->
<div class="carousel-item">
<img class="d-block w-100" src="
https://dummyimage.com/350/ffffff/000000
">
</div>
<!--END OF HORSE 3-->
</div>
<a class="carousel-control-prev" href="#HORSEIMG" data-slide="prev">
<span class="carousel-control-prev-icon"></span></a>
<a class="carousel-control-next" href="#HORSEIMG" data-slide="next">
<span class="carousel-control-next-icon"></span></a>
</div>
</div>
<!--END OF HORSE IMG CAROUSEL-->
<!--STATS-->
<div class="card bg-transparent rounded-0" style="border: #999999 1px solid;">
<div class="card rounded-0 p-2" style="background-image:linear-gradient(to bottom,#F2F8FC,#D7E4EA); border: #FFFFFF 1px solid;">
<p><i class="fa-solid fa-chart-simple"></i> Stats</p>
</div>
<div class="card-text pt-2" style="border-top: #999999 1px solid;">
<h6 class="card-title ml-2">STAT</h6>
<div class="progress ml-2 mr-2 mb-2" style=" background-image:linear-gradient(to bottom,#C0C0C0,#868686); border-bottom: #474747 2px solid;">
<div class="progress-bar" role="progressbar" style="width: 60%; background-image:linear-gradient(to bottom,#688BE3,#416AD2); padding: 7px; font-size: 12pt;"></div>
</div>
<h6 class="card-title ml-2">STAT</h6>
<div class="progress ml-2 mr-2 mb-2" style=" background-image:linear-gradient(to bottom,#C0C0C0,#868686); border-bottom: #474747 2px solid;">
<div class="progress-bar" role="progressbar" style="width: 60%; background-image:linear-gradient(to bottom,#688BE3,#416AD2); padding: 7px; font-size: 12pt;"></div>
</div>
<h6 class="card-title ml-2">STAT</h6>
<div class="progress ml-2 mr-2 mb-2" style=" background-image:linear-gradient(to bottom,#C0C0C0,#868686); border-bottom: #474747 2px solid;">
<div class="progress-bar" role="progressbar" style="width: 60%; background-image:linear-gradient(to bottom,#688BE3,#416AD2); padding: 7px; font-size: 12pt;"></div>
</div>
</div>
</div>
<!--END OF STATS-->
</div>
<div class="col-md-5 mb-3">
<!--TABLE 1-->
<table class="w-100 mb-3">
<tbody>
<tr>
<td class="w-25" style="background-color: #F5FAFE; border-top: #999999 1px solid;">Item
</td>
<td style="border-left: #999999 1px dashed; border-bottom: #999999 1px solid">
content
</td>
</tr>
<tr>
<td class="w-25" style="background-color: #F5FAFE; border-top: #999999 1px solid;">Item
</td>
<td style="border-left: #999999 1px dashed; border-bottom: #999999 1px solid">
content
</td>
</tr>
<tr>
<td class="w-25" style="background-color: #F5FAFE; border-top: #999999 1px solid;">Item
</td>
<td style="border-left: #999999 1px dashed; border-bottom: #999999 1px solid">
content
</td>
</tr>
<tr>
<td class="w-25" style="background-color: #F5FAFE; border-top: #999999 1px solid;">Item
</td>
<td style="border-left: #999999 1px dashed; border-bottom: #999999 1px solid">
content
</td>
</tr>
<tr>
<td class="w-25" style="background-color: #F5FAFE; border-top: #999999 1px solid;">Item
</td>
<td style="border-left: #999999 1px dashed; border-bottom: #999999 1px solid">
content
</td>
</tr>
<tr>
<td class="w-25" style="background-color: #F5FAFE; border-top: #999999 1px solid;">Item
</td>
<td style="border-left: #999999 1px dashed; border-bottom: #999999 1px solid">
content
</td>
</tr>
</tbody>
</table>
<!--END OF TABLE 1-->
<div class="card bg-transparent rounded-0" style="border: #999999 1px solid;">
<div class="card rounded-0 p-2" style="background-image:linear-gradient(to bottom,#F2F8FC,#D7E4EA); border: #FFFFFF 1px solid;">
<p><i class="fa-solid fa-horse"></i> Horse</p>
</div>
<!--TABLE 2-->
<div class="row no-gutters" style="color: #0033AA; border-top: #999999 1px solid;">
<div class="col-md-6 p-2" style="background-color: #CCEFFF; border-right: #999999 1px solid; border-bottom: #999999 1px solid;">
Item
</div>
<div class="col-md-6">
<div class="card rounded-0 p-2" style="background-color: #CCEFFF;">
content 1
</div>
<div class="card rounded-0 p-2" style="background-color: #FFDBD5; border-top: #999999 1px solid; border-bottom: #999999 1px solid;">
content 2
</div>
</div>
<div class="col-md-6 p-2" style="background-color: #FFDBD5; border-right: #999999 1px solid;">
Item
</div>
<div class="col-md-6">
<div class="card rounded-0 p-2" style="background-color: #CCEFFF;">
content 1
</div>
<div class="card rounded-0 p-2" style="background-color: #FFDBD5; border-top: #999999 1px solid;">
content 2
</div>
</div>
</div>
<!--END OF TABLE 2-->
</div>
</div>
<div class="col-sm-4">
<!--COMMENT BOX-->
<div class="card bg-transparent rounded-0 mb-3" style="border: #999999 1px solid;">
<div class="card rounded-0 p-2" style="background-image:linear-gradient(to bottom,#F2F8FC,#D7E4EA); border: #FFFFFF 1px solid;">
<p><i class="fa-solid fa-comment"></i> Comments</p>
</div>
<div class="card-text p-2" style="border-top: #999999 1px solid; font-size: 10pt; max-height: 150px; overflow-y: auto; overflow-x: hidden;">
<!--COMMENT-->
<div class="row align-items-center p-2">
<div class="col-sm-3">
<img class="d-block" style="max-height: 150px" src="https://dummyimage.com/150/ffffff/000000">
</div>
<div class="col-md-9">
<p style="color: #0033AA;">Lorem Impsum filler text</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<p class="pull-right" style="color: #999999;"><i class="far fa-clock"></i> mm/dd/yyyy 00:00</p>
<!--END OF COMMENT-->
<!--DIVIDER-->
<div class="card w-100 border-0 rounded-0" style="background-color: #999999; height: 1px;"></div>
<!--END OF DIVIDER-->
<!--COMMENT-->
<div class="row align-items-center p-2">
<div class="col-sm-3">
<img class="d-block" style="max-height: 150px" src="https://dummyimage.com/150/ffffff/000000">
</div>
<div class="col-md-9">
<p style="color: #0033AA;">Lorem Impsum filler text</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<p class="pull-right" style="color: #999999;"><i class="far fa-clock"></i> mm/dd/yyyy 00:00</p>
<!--END OF COMMENT-->
<!--DIVIDER-->
<div class="card w-100 border-0 rounded-0" style="background-color: #999999; height: 1px;"></div>
<!--END OF DIVIDER-->
<!--COMMENT-->
<div class="row align-items-center p-2">
<div class="col-sm-3">
<img class="d-block" style="max-height: 150px" src="https://dummyimage.com/150/ffffff/000000">
</div>
<div class="col-md-9">
<p style="color: #0033AA;">Lorem Impsum filler text</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<p class="pull-right" style="color: #999999;"><i class="far fa-clock"></i> mm/dd/yyyy 00:00</p>
<!--END OF COMMENT-->
<!--DIVIDER-->
<div class="card w-100 border-0 rounded-0" style="background-color: #999999; height: 1px;"></div>
<!--END OF DIVIDER-->
</div>
</div>
<!--END OF COMMENT BOX-->
<!--INFO BOX-->
<div class="card bg-transparent rounded-0 mb-3" style="border: #999999 1px solid;">
<div class="card rounded-0 p-2" style="background-image:linear-gradient(to bottom,#F2F8FC,#D7E4EA); border: #FFFFFF 1px solid;">
<p><i class="fa-solid fa-horse"></i> Title</p>
</div>
<!--BUTTONS-->
<ul class="nav nav-tabs pt-2 px-2" role="tablist" style="border-top: #999999 1px solid;">
<li class="nav-item">
<a style="background-image:linear-gradient(to bottom,#F2F8FC,#D7E4EA); color: #0033AA;" class="nav-link active" data-toggle="tab" href="#tab1">Title 1</a>
</li>
<li class="nav-item">
<a style="background-image:linear-gradient(to bottom,#F2F8FC,#D7E4EA); color: #0033AA;" class="nav-link" data-toggle="tab" href="#tab2">Title 2</a>
</li>
</ul>
<!--END OF BUTTONS-->
<div class="card-text p-2" style="height: 170px; overflow-y: auto; overflow-x: hidden;">
<div class="tab-content">
<!--TAB INFO BOX 1-->
<div class="tab-pane fade show active" id="tab1">
<p>Tab 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!--END OF TAB INFO BOX 1-->
<!--TAB INFO BOX 2-->
<div class="tab-pane fade" id="tab2">
<p>Tab 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!--END OF TAB INFO BOX 2-->
</div>
</div>
</div>
<!--END OF INFO BOX-->
<!--CREDIT DO NOT TOUCH/MOVE-->
<a class="pull-right" href="#" style="color: #0033AA;"><i class="fa-solid fa-circle-play"></i> BigGayFish</a>
</div>
</div>
</div>
</div>