Profile
<!-------------------------------------------
| TIGER'S EYE |
| by Zylphide |
---------------------------------------------
** write as much as you want in the areas with text, the boxes will
stretch to fit and make sure both left and right boxes are the
same size **
white text: #fff
black background: #141414
red nameplate: #640000
red icons: #7B0000
gold border: #E7A320
images from:
https://www.pexels.com/photo/close-up-photography-of-tiger-792381/
https://unsplash.com/photos/WOGjh2sORuM
---------->
<div class="row justify-content-center" style="color: #fff;">
<div class="col-lg-10 p-0">
<!--- top banner ---->
<div class="col-lg-12 p-2 my-2" style="background: url(https://images.pexels.com/photos/792381/pexels-photo-792381.jpeg); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px">
<!--- banner image ---->
<div class="h-100" style="border: 3px double #E7A320;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;"></div>
<!--- banner image END ---->
</div>
<!--- top banner END --->
<!--- bottom info ---->
<div class="row no-gutters justify-content-center">
<!--- left sidebar ---->
<div class="col-lg-3 px-2">
<div class="h-100 d-flex justify-content-between p-2" style="background: #141414; flex-direction: column;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px">
<div class="no-gutters h-100 p-1" style="border: 3px double #E7A320;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px">
<!--- image avatar ---->
<div class="col-lg-12 justify-content-center">
<div class="rounded-circle p-2 my-2" style="background: url(https://images.unsplash.com/photo-1613368189266-4442a07cd081?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size: cover; background-position: center; background-repeat: no-repeat; height: 250px; width: 250px; ">
<div class="rounded-circle h-100" style="border: 2px ridge #E7A320;"></div>
</div>
</div>
<!--- image avatar END --->
<!--- name --->
<div class="col-lg-12 justify-content-center px-4 my-3">
<div class="display-4 rounded w-100 justify-content-center px-1 py-1" style="background: #640000; letter-spacing: 2px">
NAME
</div>
</div>
<!--- name END ---->
<!--- stats --->
<div class="col-lg-12 px-4">
<!---- stat 1 ----->
<div class="col-lg-12 mb-2">
<span class="text-uppercase" style="color: #E7A320; letter-spacing: 1px; opacity: 0.8;"><b>age</b></span>
<span class="pull-right">info</span>
</div>
<!---- stat 1 END ----->
<!---- stat 2 ----->
<div class="col-lg-12 mb-2">
<span class="text-uppercase" style="color: #E7A320; letter-spacing: 1px; opacity: 0.8;"><b>gender</b></span>
<span class="pull-right">info</span>
</div>
<!---- stat 2 END ----->
<!---- stat 3 ----->
<div class="col-lg-12 mb-2">
<span class="text-uppercase" style="color: #E7A320; letter-spacing: 1px; opacity: 0.8; "><b>birthday</b></span>
<span class="pull-right">info</span>
</div>
<!---- stat 3 END ----->
<!---- stat 4 ----->
<div class="col-lg-12 mb-2">
<span class="text-uppercase" style="color: #E7A320; letter-spacing: 1px; opacity: 0.8; "><b>zodiac</b></span>
<span class="pull-right">info</span>
</div>
<!---- stat 4 END ----->
<!---- stat 5 ----->
<div class="col-lg-12 mb-2">
<span class="text-uppercase" style="color: #E7A320; letter-spacing: 1px; opacity: 0.8; "><b>height</b></span>
<span class="pull-right">info</span>
</div>
<!---- stat 5 END ----->
<!---- stat 6 ----->
<div class="col-lg-12 mb-2">
<span class="text-uppercase" style="color: #E7A320; letter-spacing: 1px; opacity: 0.8; "><b>species</b></span>
<span class="pull-right">info</span>
</div>
<!---- stat 6 END ----->
<!---- stat 5 ----->
<div class="col-lg-12 mb-2">
<span class="text-uppercase" style="color: #E7A320; letter-spacing: 1px; opacity: 0.8; "><b>theme</b></span>
<span class="pull-right"><a href="#" style="color: #fff">info</a></span>
</div>
<!---- stat 5 END ----->
</div>
<!--- stats END --->
<hr class="mx-5" style="background: #640000; border: 2px ridge #640000; opacity: 0.9 ;">
<!--- credits, do not remove! --->
<a class="col-12 " style="color: #7B0000; font-size: 12px; display: block; text-align: center" href="https://toyhou.se/Zylphide"><i class="fas fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
<!--- credits end ---->
</div>
</div>
</div>
<!--- left sidebar END ---->
<!--- right info area --->
<div class="col-lg-9 px-2">
<div class="container-fluid d-flex p-3" style="background: #141414; flex-direction: column;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px">
<!--- section 1 header ---->
<div class="row no-gutters display-4 justify-content-between align-items-center mb-2 p-2" style="position: relative; font-size: 1.7rem; letter-spacing: 2px;">
<!--- section 1 icon --->
<div class="col-lg-1" style="text-align: right">
<i class="fa-solid fa-circle-star" style="color: #7B0000"></i>
</div>
<!--- section 1 icon END --->
<!--- section 1 line --->
<div class="col-lg-8">
<div class="card rounded-0" style="width: 100%; border: 2px solid #E7A320; opacity: 0.7;"></div>
</div>
<!--- section 1 line END --->
<!--- section 1 title --->
<div class="col-lg-3 rounded justify-content-center py-1" style="background: #640000">
ABOUT
</div>
<!--- section 1 title END --->
</div>
<!--- section 1 header END ---->
<!--- section 1 text --->
<div class="row justify-content-center px-4 mb-3" style="text-align: justify;">
<div class="col-lg-11">
<p>Tempor esse occaecat aspernatur, natus illum. Rem fugit veniam nequeporro natus anim or mollit. Laudantium ullam ut deserunt autem ea. Eos voluptas aut. Dolorem. Beatae quasi or aliquip dolorem minim yet autem or voluptatem. Voluptate aliquip, eiusmod, for voluptas so quae. Exercitation dicta in. Illum tempora but laboris nequeporro, consequat, totam for ullam. Ab. Laudantium voluptas quasi or vitae ullamco. Ut quae and natus quisquam. Elit illum. Nostrum odit or dolores or molestiae velit.</p>
</div>
</div>
<!--- section 1 text END --->
<!--- background header ---->
<div class="row no-gutters display-4 justify-content-between align-items-center mb-2 p-2" style="position: relative; font-size: 1.7rem; letter-spacing: 2px;">
<!--- background icon --->
<div class="col-lg-1 order-lg-3 d-flex">
<i class="fa-solid fa-circle-star" style="color: #7B0000"></i>
</div>
<!--- background icon END --->
<!--- background line --->
<div class="col-lg-8 order-lg-2 d-flex">
<div class="card rounded-0" style="width: 100%; border: 2px solid #E7A320; opacity: 0.7;"></div>
</div>
<!--- background line END --->
<!--- background title --->
<div class="col-lg-3 rounded justify-content-center order-lg-1 d-flex py-1" style="background: #640000">
BACKGROUND
</div>
<!--- background title END --->
</div>
<!--- background header END ---->
<!--- background text --->
<div class="row justify-content-center px-4" style="text-align: justify;">
<div class="col-lg-11">
<p>Dolorem accusantium laudantium or exercitation consequatur but laboriosam, yet consequat. Esse quam aliqua but velit voluptatem. Eu tempora for est. Irure irure or tempora in. Voluptas ea. Vel occaecat et aliquam for laboris eum esse. Esse magnam so do so ipsum and officia but suscipit and aspernatur. Perspiciatis incidunt, so ut tempor yet ullam. Ipsum ex and illum nulla illum for consequuntur. </p>
<p>Accusantium consectetur culpa magna. Nostrud exercitation yet veritatis. Numquam incididunt or laudantium but est. Adipisci dicta, yet dolores adipisci. Deserunt error. Architecto incidunt yet officia. Rem nostrud yet aspernatur ex sit. Aut dolores for perspiciatis, suscipit, yet accusantium or mollit nostrum. Eiusmod exercitation so do non. Quo numquam anim. Commodi id, and exercitation sed elit. Magni qui. Iure quia vitae but doloremque error odit. </p>
</div>
</div>
<!--- background text END --->
<!--- relations header ---->
<div class="row no-gutters display-4 justify-content-between align-items-center mb-2 p-2" style="position: relative; font-size: 1.7rem; letter-spacing: 2px;">
<!--- relations icon --->
<div class="col-lg-1" style="text-align: right">
<i class="fa-solid fa-circle-star" style="color: #7B0000"></i>
</div>
<!--- relations icon END --->
<!--- relations line --->
<div class="col-lg-8">
<div class="card rounded-0" style="width: 100%; border: 2px solid #E7A320; opacity: 0.7;"></div>
</div>
<!--- relations line END --->
<!--- relations title --->
<div class="col-lg-3 rounded justify-content-center py-1" style="background: #640000">
RELATIONS
</div>
<!--- relations title END --->
</div>
<!--- relations header END ---->
<!--- relations info --->
<div class="row justify-content-center px-4 mb-3">
<!--- relationship 1 ---->
<div class="col-lg-3 row my-1">
<div class="col-lg-12 justify-content-center">
<div class="rounded-circle p-1 my-1" style="background: url(https://images.unsplash.com/photo-1613368189266-4442a07cd081?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size: cover; background-position: center; background-repeat: no-repeat; height: 100px; width: 100px; ">
<div class="rounded-circle h-100" style="border: 2px ridge #E7A320;"></div>
</div>
</div>
<div class="col-12 justify-content-center display-4 my-1" style="font-size: 1.1rem; letter-spacing: 2px;">
<a href="#" style="color: #fff">NAME</a>
</div>
<div class="col-12 justify-content-center" style="color: #E7A320; opacity: 0.7; font-size: 0.8rem; letter-spacing: 1px;">
relationship
</div>
</div>
<!--- relationship 1 END --->
<!--- relationship 2 ---->
<div class="col-lg-3 row my-1">
<div class="col-lg-12 justify-content-center">
<div class="rounded-circle p-1 my-1" style="background: url(https://images.unsplash.com/photo-1613368189266-4442a07cd081?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size: cover; background-position: center; background-repeat: no-repeat; height: 100px; width: 100px; ">
<div class="rounded-circle h-100" style="border: 2px ridge #E7A320;"></div>
</div>
</div>
<div class="col-12 justify-content-center display-4 my-1" style="font-size: 1.1rem; letter-spacing: 2px;">
<a href="#" style="color: #fff">NAME</a>
</div>
<div class="col-12 justify-content-center" style="color: #E7A320; opacity: 0.7; font-size: 0.8rem; letter-spacing: 1px;">
relationship
</div>
</div>
<!--- relationship 2 END --->
<!--- relationship 3 ---->
<div class="col-lg-3 row my-1">
<div class="col-lg-12 justify-content-center">
<div class="rounded-circle p-1 my-1" style="background: url(https://images.unsplash.com/photo-1613368189266-4442a07cd081?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size: cover; background-position: center; background-repeat: no-repeat; height: 100px; width: 100px; ">
<div class="rounded-circle h-100" style="border: 2px ridge #E7A320;"></div>
</div>
</div>
<div class="col-12 justify-content-center display-4 my-1" style="font-size: 1.1rem; letter-spacing: 2px;">
<a href="#" style="color: #fff">NAME</a>
</div>
<div class="col-12 justify-content-center" style="color: #E7A320; opacity: 0.7; font-size: 0.8rem; letter-spacing: 1px;">
relationship
</div>
</div>
<!--- relationship 3 END --->
<!--- relationship 4 ---->
<div class="col-lg-3 row my-1">
<div class="col-lg-12 justify-content-center">
<div class="rounded-circle p-1 my-1" style="background: url(https://images.unsplash.com/photo-1613368189266-4442a07cd081?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size: cover; background-position: center; background-repeat: no-repeat; height: 100px; width: 100px; ">
<div class="rounded-circle h-100" style="border: 2px ridge #E7A320;"></div>
</div>
</div>
<div class="col-12 justify-content-center display-4 my-1" style="font-size: 1.1rem; letter-spacing: 2px;">
<a href="#" style="color: #fff">NAME</a>
</div>
<div class="col-12 justify-content-center" style="color: #E7A320; opacity: 0.7; font-size: 0.8rem; letter-spacing: 1px;">
relationship
</div>
</div>
<!--- relationship 4 END --->
</div>
<!--- relations info END --->
</div>
</div>
<!--- right info area END --->
</div>
<!--- bottom info END ---->
</div>
</div>
Recent Images
No images.