Profile
<!----------------------------------------------
| UNDER THE SEA |
| by Zylphide |
------------------------------------------------
everything in this code stretches to fit - write as much as you want
------- COLORS ------------
top fish: #152037
bottom fish: #0B0C16
text: #232B31
info box: rgba(133, 209, 255, 1)
text boxes: rgba(176,226,255,1)
lines beside name: #343F57
lines separating stats: rgba(142,192,222,1)
stats: #414C63
likes: #508F75
dislikes: #7C64A3
trivia: #507F8F
links: #005CAB
------>
<!---- whale ---->
<div class="col-11 text-right p-0 " style="color: #46516E; margin-bottom: -30px; font-size: 1.2em"> <i class="fas fa-whale fa-10x"></i></div>
<!---- whale END ---->
<!---- background gradient ----->
<div class="p-2 m-0" style="background: linear-gradient(0deg, rgba(21,31,88,1) 0%, rgba(53,178,252,1) 100%);
border-top-right-radius:20px; border-top-left-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px;">
<!---- top row fish ---->
<div class="row justify-content-center">
<div class="col-1 d-none d-lg-block my-2 mx-0" style="color: #152037">
<i class="fas fa-fish fa-flip-horizontal fa-2x faded"></i>
<i class="fas fa-fish fa-flip-horizontal fa-4x" style="margin-left: 10px"></i>
</div>
<div class="col-3 my-2 mx-0" style="color: #152037">
<i class="fas fa-fish fa-flip-horizontal fa-2x faded"></i>
<i class="fas fa-fish fa-flip-horizontal fa-4x"></i>
<div class="text-right"><i class="fas fa-fish fa-flip-horizontal fa-2x faded"></i></div>
</div>
<div class="col-3 my-2 mx-0" style="color: #152037">
<i class="fas fa-fish fa-flip-horizontal fa-3x faded"></i>
<i class="fas fa-fish fa-flip-horizontal fa-1x faded"></i>
</div>
<div class="col-2 d-none d-lg-block pt-3 my-2 mx-0" style="color: #152037">
<i class="fas fa-fish fa-4x"></i>
</div>
<div class="col-2 pt-5 my-2 mx-0" style="color: #152037">
<i class="fas fa-fish fa-2x faded"></i>
<i class="fas fa-fish fa-3x faded"></i>
<i class="fas fa-fish fa-1x faded"></i>
</div>
</div>
<!---- top row fish END ---->
<!--- info box ---->
<div class="justify-content-center" style="color: #232B31; ">
<div class="col-12 px-4" style="max-width: 90%; background: rgba(133, 209, 255, 1);
border-top-right-radius:20px; border-top-left-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px;">
<div class="row">
<!---- design info ----->
<div class="col-lg-4 d-flex py-3" style="flex-direction:column;">
<!---- profile image ---->
<div class="card border-0 my-2" style="height: 400px;
background: url(https://images.unsplash.com/photo-1513039464749-94912b3841ce?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1302&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px;">
</div>
<!--- profile image END --->
<!--- color info ---->
<div class="card border-0 bg-transparent my-2">
<div class="row no-gutters mt-2 rounded modal-open" style="height:45px; cover; border-top-right-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px;">
<!---- you can put more than 6 or less than 6 colors here --->
<div style="background-color: #96D3E4;" class="col h-100"></div>
<div style="background-color: #62C5EF;" class="col h-100"></div>
<div style="background-color: #006BD2;" class="col h-100"></div>
<div style="background-color: #0D1C7F;" class="col h-100"></div>
<div style="background-color: #102431;" class="col h-100"></div>
<div style="background-color: #266B83;" class="col h-100"></div>
</div>
</div>
<!--- color info END ---->
<!--- extra image ---->
<div class="card border-0 my-2" style="height: 200px;
background: url(https://images.unsplash.com/photo-1513343041531-f73bffeed81b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
border-top-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px;">
</div>
<!--- extra image END ---->
</div>
<!---- design info END ----->
<!---- about ----->
<div class="col-lg-8 d-flex py-3" style="flex-direction:column;">
<!---- name/title ----->
<div class="row no-gutters align-items-center p-2">
<div class="col-sm-4">
<div class="container-fluid border-0" style="height: 2px; background: #343F57"></div>
</div>
<div class="col-sm-4 text-center">
<div style="font-size: 2.3em; font-family: century gothic; ">
NAME
</div>
</div>
<div class="col">
<div class="container-fluid border-0" style="height: 2px; background: #343F57"></div>
</div>
</div>
<!---- name/title END ---->
<!---- about row 1 ----->
<div class="row no-gutters">
<!---- stats ----->
<div class="col-lg-4 px-2">
<div class="container-fluid d-flex justify-content-between py-2 h-100" style="background: rgba(176,226,255,1);
border-top-right-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; flex-direction:column;">
<!---- stat 1 ----->
<div class="d-flex justify-content-between px-1">
<span style="color: #414C63">Stat</span>
<i>info</i>
</div>
<!---- stat 1 END ---->
<hr class="my-1 w-100" style="background: rgba(142,192,222,1)">
<!---- stat 2 ----->
<div class="d-flex justify-content-between px-1">
<span style="color: #414C63">Stat</span>
<i>info</i>
</div>
<!---- stat 2 END ---->
<hr class="my-1 w-100" style="background: rgba(142,192,222,1)">
<!---- stat 3 ----->
<div class="d-flex justify-content-between px-1">
<span style="color: #414C63">Stat</span>
<i>info</i>
</div>
<!---- stat 3 END ---->
<hr class="my-1 w-100" style="background: rgba(142,192,222,1)">
<!---- stat 4 ----->
<div class="d-flex justify-content-between px-1">
<span style="color: #414C63">Stat</span>
<i>info</i>
</div>
<!---- stat 4 END ---->
<hr class="my-1 w-100" style="background: rgba(142,192,222,1)">
<!---- stat 5 ----->
<div class="d-flex justify-content-between px-1">
<span style="color: #414C63">Stat</span>
<i>info</i>
</div>
<!---- stat 5 END ---->
</div>
</div>
<!---- stats END --->
<!---- personality ---->
<div class="col-lg-8 d-flex justify-content-between px-2" style="flex-direction:column;">
<div class="container-fluid p-3 h-100 d-flex" style="background: rgba(176,226,255,1);
border-top-right-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; flex-direction:column;">
<p><b>Personality info goes here.</b> Sed reprehenderit totam and anim. Culpa incididunt. Enim velitesse molestiae. Aperiam non for eos for quasi or laboriosam for sed omnis. Voluptate illo nequeporro est irure sit mollit. Tempor voluptate for eius and laudantium but sit so numquam. Magna quaerat. Vel nequeporro so nulla, or eos or aut and aperiam but explicabo. Consequuntur occaecat fugit, for excepteur deserunt, so magni. Veniam exercitation. Aliquid commodo. </p>
</div>
</div>
<!---- personality end ---->
</div>
<!---- about row 1 ----->
<!---- about row 2 ----->
<div class="row no-gutters mt-3">
<!---- likes/dislikes ----->
<div class="col-lg-8 px-2">
<div class="container-fluid d-flex justify-content-between p-3 h-100" style="background: rgba(176,226,255,1);
border-top-right-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; flex-direction:column;">
<div class="row">
<!---- likes ----->
<div class="col-lg-6">
<span style="color:#508F75; font-family: century gothic; font-size: 1.2em; display: block; text-align: center">Likes:</span>
<ul class="mb-1">
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
<!---- likes END ----->
<!---- dislikes ----->
<div class="col-lg-6">
<span style="color: #7C64A3; font-family: century gothic; font-size: 1.2em; display: block; text-align: center">Dislikes:</span>
<ul class="mb-1">
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
<!---- dislikes END ----->
</div>
</div>
</div>
<!---- likes/dislikes END --->
<!---- trivia ---->
<div class="col-lg-4 d-flex justify-content-between px-2" style="flex-direction:column;">
<div class="container-fluid p-3 h-100 d-flex" style="background: rgba(176,226,255,1);
border-top-right-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; flex-direction:column;">
<span class="text-center" style="color: #507F8F; font-family: century gothic; font-size: 1.2em">Trivia:</span>
<ul class="mb-1">
<li>info</li>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
</div>
<!---- trivia END ---->
</div>
<!---- about row 2 ----->
<!---- about row 3 ----->
<div class="row no-gutters mt-3">
<!---- background ----->
<div class="col-lg-12 px-2">
<div class="container-fluid d-flex justify-content-between p-3 h-100" style="background: rgba(176,226,255,1);
border-top-right-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; flex-direction:column;">
<p><b>Background/history info goes here.</b> Veritatis quia natus, modi so nihil adipisci yet nisi. Numquam vel sint commodi ipsum. Eum lorem beatae and quam. Eum non yet velitesse so ipsa. Veritatis quasi quae. Ipsum anim velitesse so unde yet nemo. Sed illo culpa. Laborum eius si molestiae deserunt, incididunt. Odit molestiae. Sit minima quae. Sed consequat yet minima exercitationem. Totam anim, eaque aute. Id numquam sunt ratione, nequeporro. Aperiam amet for accusantium yet quisquam occaecat. </p>
<p>Omnis quasi pariatur for commodi nihil. Aut aliquid magna eiusmod. Voluptate id or fugiat molestiae yet ipsum or eu. Suscipit rem, so odit nequeporro minima. Fugit dolorem. Doloremque laboris. Reprehenderit elit quaerat and explicabo incidunt. Ullam explicabo or voluptas numquam. Magni.</p>
<p>Consequuntur tempora ullam and aliquid for error but laudantium but ipsum. Minima veniam commodi yet accusantium for quia. Aliqua. Quasi aspernatur, for incididunt or explicabo and consequat. Duis ab. Quis id. Incidunt doloremque for deserunt yet vitae dolore, and eu but iste. Veniam ad modi consectetur yet illum. Eum. Eaque. Ad laborum. Aute ut pariatur, veniam culpa. </p>
</div>
</div>
<!---- background END ----->
</div>
<!---- about row 3 END ---->
</div>
<!---- about END ----->
<!--- relationships ---->
<div class="col-lg-12 px-3 mb-4">
<div class="container-fluid justify-content-between py-2" style="background: rgba(176,226,255,1);
border-top-right-radius:10px; border-top-left-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; flex-direction:column;">
<div class="row">
<!---- relationship 1 ---->
<div class="col-lg-3 p-3">
<div class="card border-0 mx-auto" style="height: 150px; width:150px;
background: url(https://images.unsplash.com/photo-1553010932-18c22b4bdd33?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
border-top-right-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; flex-direction:column;"></div>
<span class="mt-2" style="font-family: trebuchet ms; font-size: 1.3em; display: block; text-align: center">
<a href="#URL" style="color: #005CAB;">
Name
</a>
</span>
<span style="display: block; text-align: center"><i>
Relationship
</i></span>
<p class="px-2">Quo nostrum yet illum so accusan tium and quo, so sit cupidatat. Lorem si but explicabo so irure incidunt commodo dolor. Aut minim and accusantium molestiae, quia for sequi deserunt. Magni eos or perspiciatis amet est, pariatur. Et architecto nihil et. Aperiam.</p>
</div>
<!---- relationship 1 END ---->
<!---- relationship 2 ---->
<div class="col-lg-3 p-3">
<div class="card border-0 mx-auto" style="height: 150px; width:150px;
background: url(https://images.unsplash.com/photo-1522720833375-9c27ffb02a5e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1374&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
border-top-right-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; flex-direction:column;"></div>
<span class="mt-2" style="font-family: trebuchet ms; font-size: 1.3em; display: block; text-align: center">
<a href="#URL" style="color: #005CAB;">
Name
</a>
</span>
<span style="display: block; text-align: center"><i>
Relationship
</i></span>
<p class="px-2">Quo nostrum yet illum so accusan tium and quo, so sit cupidatat. Lorem si but explicabo so irure incidunt commodo dolor. Aut minim and accusantium molestiae, quia for sequi deserunt. Magni eos or perspiciatis amet est, pariatur. Et architecto nihil et. Aperiam.</p>
</div>
<!---- relationship 2 END ---->
<!---- relationship 3 ---->
<div class="col-lg-3 p-3">
<div class="card border-0 mx-auto" style="height: 150px; width:150px;
background: url(https://images.unsplash.com/photo-1576468946905-db224812a511?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NTZ8fGZpc2h8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60); background-size: cover; background-repeat: no-repeat; background-position: center;
border-top-right-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; flex-direction:column;"></div>
<span class="mt-2" style="font-family: trebuchet ms; font-size: 1.3em; display: block; text-align: center">
<a href="#URL" style="color: #005CAB;">
Name
</a>
</span>
<span style="display: block; text-align: center"><i>
Relationship
</i></span>
<p class="px-2">Quo nostrum yet illum so accusan tium and quo, so sit cupidatat. Lorem si but explicabo so irure incidunt commodo dolor. Aut minim and accusantium molestiae, quia for sequi deserunt. Magni eos or perspiciatis amet est, pariatur. Et architecto nihil et. Aperiam.</p>
</div>
<!---- relationship 3 END ---->
<!---- relationship 4 ---->
<div class="col-lg-3 p-3">
<div class="card border-0 mx-auto" style="height: 150px; width:150px;
background: url(https://images.unsplash.com/photo-1604072451988-1310cc2fed5d); background-size: cover; background-repeat: no-repeat; background-position: center;
border-top-right-radius:5px; border-top-left-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:5px; flex-direction:column;"></div>
<span class="mt-2" style="font-family: trebuchet ms; font-size: 1.3em; display: block; text-align: center">
<a href="#URL" style="color: #005CAB;">
Name
</a>
</span>
<span style="display: block; text-align: center"><i>
Relationship
</i></span>
<p class="px-2">Quo nostrum yet illum so accusan tium and quo, so sit cupidatat. Lorem si but explicabo so irure incidunt commodo dolor. Aut minim and accusantium molestiae, quia for sequi deserunt. Magni eos or perspiciatis amet est, pariatur. Et architecto nihil et. Aperiam.</p>
</div>
<!---- relationship 4 END ---->
</div>
</div>
</div>
<!--- relationships END ---->
</div>
</div>
</div>
<!--- info box end ---->
<!---- bottom row fish ---->
<div class="row justify-content-center mt-3">
<div class="col-2 pt-5 my-2 mx-0" style="color: #0B0C16">
<i class="fas fa-fish fa-2x faded"></i>
<i class="fas fa-fish fa-3x faded"></i>
<i class="fas fa-fish fa-1x faded"></i>
</div>
<div class="col-2 pt-3 d-none d-lg-block my-2 mx-0" style="color: #0B0C16">
<i class="fas fa-fish fa-4x"></i>
</div>
<div class="col-3 my-2 mx-0" style="color: #0B0C16">
<i class="fas fa-fish fa-flip-horizontal fa-3x faded"></i>
<i class="fas fa-fish fa-flip-horizontal fa-1x faded"></i>
</div>
<div class="col-3 my-2 mx-0" style="color: #0B0C16">
<i class="fas fa-fish fa-flip-horizontal fa-2x faded"></i>
<i class="fas fa-fish fa-4x"></i>
<div class="text-right"><i class="fas fa-fish fa-flip-horizontal fa-2x faded"></i></div>
</div>
<div class="col-1 d-none d-lg-block my-2 mx-0" style="color: #0B0C16">
<i class="fas fa-fish fa-flip-horizontal fa-2x faded"></i>
<i class="fas fa-fish fa-4x" style="margin-left: 10px"></i>
</div>
</div>
<!---- bottom row fish END ---->
<!--- credits, do not remove! --->
<a class="col-12 " style="color: #00ECFF; 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>
<!---- background gradient END ----->
Recent Images
No images.