Profile
<!----------------------------------------------
| NETRUNNER |
| by Zylphide |
------------------------------------------------
image credits: unsplash
COLORS:
hexagon text color: #fff
hexagon background color: rgba(0,6,13,0.8)
hexagon line separator: rgba(111,128,138,0.15)
**NOTE**: the hexagons will cut off any excess text beyond its edges instead of forcing the text to be shown within the confines of the hexagon. I've tried adjust the sizes of the inner text boxes so that most of the text you can type will not be cut off, but you may have to play around with text spacing depending on what you write.
----------------------------------------------->
<!--- text box ----->
<div class="row no-gutters justify-content-center" style="height: 1100px; margin-top: 50px">
<!---- left box ---->
<div class="col-lg-4 bg-faded" style="display:flex;">
<div class="border-0 rounded-0 px-4" style="height: 700px; margin-top: auto;">
<!----- left section title ----->
<div class="px-2" style="font-size:1.7rem">
TITLE
</div>
<!----- left section title END ----->
<hr class="mt-1 mx-2">
<!----- left section text, write as much as you want, will scroll ----->
<div class="px-2" style="height: 610px; overflow-y: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Aliquip unde, so velitesse doloremque for beatae. Qui illum and sit ad. Exercitationem consequuntur eiusmod id. Qui ex yet ab commodo. Do nulla numquam, esse, exercitation odit and do. Anim. Labore enim minima non. Voluptas velitesse yet vel. Elit cupidatat suscipit yet veritatis. Sed consequatur anim, and magni, eiusmod. Tempora consequatur so eu so sint. Nulla eum perspiciatis or quisquam. Anim rem so eum or magna. Numquam dicta yet nostrum. Inventore magni so ratione architecto. Quam exercitation for ipsum. Eius nihil for consequatur and tempora yet quis minim. Elit ratione eu yet nesciunt. Aliquam velitesse. </p>
<!----- subsection title ---->
<div class="row no-gutters mb-1">
<div class="display-4" style="font-size: 1.2rem;">SUBSECTION</div>
<!----- if the subsection title is too long, this line will be pushed below the subsection instead of beside it, to change this, adjust the percentage in [width: 70%] ---->
<div class="card pull-right mx-2 my-auto" style="width: 70%; height: 1px;"></div>
</div>
<!----- subsection title END ---->
<p>Ipsa voluptas so aute yet magni, for ullamco laudantium ab. Doloremque exercitationem esse eiusmod eiusmod omnis id. Nostrud ratione but unde. Elit ratione yet enim or totam or irure nulla yet pariatur. Sed. Amet ratione so dolore, so illum. Adipisci minim, so quaerat culpa, but amet, yet natus. Nisi totam so incidunt but proident. Perspiciatis aperiam yet veritatis or illum. Laboriosam corporis. Est ratione est so aute magnam so quae iure. Fugit. Molestiae reprehenderit or nostrud. Accusantium occaecat. </p>
</div>
<!----- left section text END ----->
</div>
</div>
<!---- left box END ----->
<!---- right box ---->
<div class="col-lg-4 bg-faded" style="display:flex;">
<div class="border-0 rounded-0 px-4" style="height: 545px; margin-top: auto;">
<!----- name ----->
<div class="mr-2" style="font-size: 1.7rem; text-align: right;">
TITLE
</div>
<!----- name END ----->
<hr class="mt-1 mx-2">
<!----- right section text, write as much as you want, will scroll ----->
<div class="px-2" style="height: 455px; overflow-y: auto;">
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!----- subsection title ---->
<div class="row no-gutters mb-1">
<div class="display-4" style="font-size: 1.2rem;">SUBSECTION</div>
<!----- if the subsection title is too long, this line will be pushed below the subsection instead of beside it, to change this, adjust the percentage in [width: 70%] ---->
<div class="card pull-right mx-2 my-auto" style="width: 70%; height: 1px;"></div>
</div>
<!----- subsection title END ---->
<p class="">Incididunt officia for qui or illum or pariatur in. Dolorem laborum, or fugiat for nemo duis. Exercitation vitae, eaque, reprehenderit. Sit eum reprehenderit and eaque for nostrud illo. Eu. Autem eiusmod but explicabo labore. Nesciunt ea yet excepteur do cillum yet ipsum. Illo. In lorem. Veniam aliquid. Sit in yet autem ipsam lorem illum. Est mollit. Nequeporro iste but quisquam, yet veritatis. Sunt consectetur. Minima cupidatat. </p>
<p>Aspernatur laboris fugit but nihil and vel inventore. Reprehenderit velit so consequatur yet proident so nostrud sed incidunt. Ad. Nequeporro proident and cupidatat. Occaecat inventore but anim so nihil. Si consequatur si inventore quaerat. </p>
</div>
<!----- right section text END ----->
</div>
</div>
<!---- right box END ----->
</div>
<!--- text box END ----->
<!--- hexagons row 1 ---->
<div class="row no-gutters justify-content-center" style="margin-top: -1140px; color: #fff; ">
<!--- hexagon 1 (name and basic info) ---->
<div style="height: 312px; width: 362px;
background: url(https://images.unsplash.com/photo-1546437744-529610df132e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: flex;">
<div class="container-fluid justify-content-center my-auto" style="text-align: center;">
<div class="p-3" style="width: 310px; background: rgba(0,6,13,0.8); ">
<!---- name ---->
<span class="display-4" style="font-size: 2.5rem">NAME</span>
<!---- name END ---->
<br>
<!---- traits ----->
<span class="display-4" style="font-size: 1.5rem">word || word || word</span>
<!---- traits END ---->
<hr class="mt-2 mb-2" style="background: rgba(111,128,138,0.15)">
<!---- basic info --->
<div class="display-4" style="font-size: 1.2rem;">
<p class="my-1">gender</p>
<p class="my-1">age</p>
<p class="my-1">height</p>
<p class="my-1">species</p>
<p class="my-1">class</p>
</div>
<!---- basic info END --->
</div>
</div>
</div>
<!--- hexagon 1 END ---->
<!--- hexagon 2 (image only) ---->
<div style="height: 312px; width: 362px;
background: url(https://images.unsplash.com/photo-1630017025404-365f643f7ecb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-top: 156px; margin-left: -89px"></div>
<!--- image 2 END ---->
<!--- hexagon 3 (traits) ---->
<div style="height: 312px; width: 362px;
background: url(https://images.unsplash.com/photo-1543946602-a0fce8117697?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-left: -89px; display: flex;">
<div class="container-fluid justify-content-center my-auto" style="text-align: center;">
<div class="p-3" style="width: 276px; background: rgba(0,6,13,0.8); ">
<span class="display-4" style="font-size: 1.5rem">TRAITS</span>
<hr class="mt-2 mb-2" style="background: rgba(111,128,138,0.15)">
<p class="my-1">trait one</p>
<p class="my-1">trait two</p>
<p class="my-1">trait three</p>
<p class="my-1">trait four</p>
<p class="my-1">trait five</p>
<p class="my-1">trait six</p>
<p class="my-1">trait seven</p>
</div>
</div>
</div>
<!--- hexagon 3 END ---->
<!--- hexagon 4 (cybernetics) ---->
<div style="height: 312px; width: 362px;
background: url(https://images.unsplash.com/photo-1527100673774-cce25eafaf7f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-top: 156px; margin-left: -89px; display: flex; ">
<div class="container-fluid justify-content-center my-auto" style="text-align: center;">
<div class="p-3" style="width: 276px; background: rgba(0,6,13,0.8); ">
<span class="display-4" style="font-size: 1.5rem">CYBERNETICS</span>
<hr class="mt-2 mb-2" style="background: rgba(111,128,138,0.15)">
<p class="my-1">piece one</p>
<p class="my-1">piece two</p>
<p class="my-1">piece three</p>
<p class="my-1">piece four</p>
<p class="my-1">piece five</p>
<p class="my-1">piece six</p>
<p class="my-1">piece seven</p>
</div>
</div>
</div>
<!--- hexagon 4 END ---->
</div>
<!--- hexagons row 1 END --->
<!--- hexagons row 2 ---->
<div class="row no-gutters justify-content-center" style="margin-top: -155px; margin-bottom: 360px; color: #fff; ">
<!--- DON'T TOUCH THESE, THEY'RE NEEDED FOR SPACING ---->
<div class="bg-transparent" style="height: 312px; width: 362px;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
<div class="bg-transparent" style="height: 312px; width: 362px;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-top: 156px; margin-left: -89px"></div>
<!--- DON'T TOUCH THESE, THEY'RE NEEDED FOR SPACING ---->
<!--- hexagon 5 (skills) ---->
<div style="height: 312px; width: 362px;
background: url(https://images.unsplash.com/photo-1589763472885-46dd5b282f52?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1353&q=80); background-size: cover; background-repeat: no-repeat; background-position: center ;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-left: -89px; display: flex; ">
<div class="container-fluid justify-content-center my-auto" style="text-align: center;">
<div class="p-3" style="width: 276px; background: rgba(0,6,13,0.8); ">
<span class="display-4" style="font-size: 1.5rem">SKILLS</span>
<hr class="mt-2 mb-2" style="background: rgba(111,128,138,0.15)">
<p class="my-1">skill one</p>
<p class="my-1">skill two</p>
<p class="my-1">skill three</p>
<p class="my-1">skill four</p>
<p class="my-1">skill five</p>
<p class="my-1">skill six</p>
<p class="my-1">skill seven</p>
</div>
</div>
</div>
<!--- hexagon 5 END ---->
<!--- DON'T TOUCH THESE, THEY'RE NEEDED FOR SPACING ---->
<div class="bg-transparent" style="height: height: 312px; width: 362px;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin-top: 156px; margin-left: -89px"></div>
<!--- DON'T TOUCH THESE, THEY'RE NEEDED FOR SPACING ---->
</div>
<!--- hexagons row 2 END --->
<div class="col-lg-12 p-0 mt-0">
<!--- credits, do not remove! --->
<a class="d-block text-center pt-2" style="font-size:12px; color: #0CBADA" href="https://toyhou.se/Zylphide"><i class="fas fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
</div>
Recent Images
No images.