<!---
GOOD AND GOLDEN / by cati/dogboy
NOTES
accent: #DEA86A
fontawesome icon: fab fa-pagelines
(use ctrl+f + replace for accent/icon replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container" style="background:url(https://image.freepik.com/free-vector/abstract-geometric-lines-pattern-seamless-background-white-gray-gold-luxury-design_60284-42.jpg) repeat fixed;padding:20px;border-radius:40px;max-width:500px;margin:30px auto 5px;">
<div class="row no-gutters">
<div class="col-lg-5 p-1">
<!--- avatar --->
<img class="mx-auto d-block fr-rounded img-thumbnail" style="max-width:110%" src="https://i.imgur.com/RTYKJwG.png">
</div>
<div class="col-lg-7 p-3">
<!--- title --->
<div class="mt-0 py-1 px-3" style="border-radius:14px;background-color:#DEA86A;"><h3 class="text-uppercase m-2 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:4px;" align="center">good &. golden</h3></div>
<div class="card rounded-circle mx-auto my-3" style="width:115px;height:115px;background:#FFFFFF;">
<a class="btn w-60 h-60 mx-1 mt-3" data-toggle="collapse" href="#more">
<i class="fab fa-pagelines m-auto fa-4x" style="color:#DEA86A"></i>
</a>
</div>
</div>
</div>
<div class="my-2 collapse" id="more">
<div class="card p-2 col-12" style="background-color:#FFFFFF;height:400px;width:900px;overflow:auto;border-radius:30px;">
<!--- name/title 2 --->
<h3 class="text-uppercase m-2 font-italic" style="color:#FFFFFF;font-size:15px;letter-spacing:4px;background:#DEA86A;border-radius:20px;padding:10px;" align="center">name (or title or quote)</h3>
<!--- column info --->
<div class="row no-gutters">
<div class="col-lg-5 col-md-12 text-center">
<div class="d-flex">
<span class="p-2 m-3 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:14px;letter-spacing:4px;background:#DEA86A;border-radius:30px;">specie</span>
<span class="p-3 m-2 w-50 text-right text-muted" style="letter-spacing:2px;">specie</span>
</div>
<div class="d-flex">
<span class="p-2 m-3 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:14px;letter-spacing:4px;background:#DEA86A;border-radius:30px;">age</span>
<span class="p-3 m-2 w-50 text-right text-muted" style="letter-spacing:2px;">age</span>
</div>
<div class="d-flex">
<span class="p-2 m-3 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:14px;letter-spacing:4px;background:#DEA86A;border-radius:30px;">gender</span>
<span class="p-3 m-2 w-50 text-right text-muted" style="letter-spacing:2px;">gender</span>
</div>
</div>
<div class="col-lg-7 col-md-12 text-center">
<!--- side column image, should be something thats of equal dimensions (ie 200x200, 100x100, etc) but you can play with the width/height pixels to accomodate to your image! --->
<img style="width:200px;height:200px;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/26461776_E7soqQXrvPAl2FP.gif">
</div>
</div>
<hr class="my-4" style="width:85%;background-color:#DEA86A;">
<!--- traits --->
<div align="center">
<span class="p-2 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#DEA86A;border-radius:30px;">trait</span>
<i class="p-2 fab fa-pagelines m-auto" style="color:#DEA86A"></i>
<span class="p-2 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#DEA86A;border-radius:30px;">trait</span>
<i class="p-2 fab fa-pagelines m-auto" style="color:#DEA86A"></i>
<span class="p-2 text-uppercase font-italic font-weight-bold" style="color:#FFFFFF;font-size:12px;letter-spacing:2px;background:#DEA86A;border-radius:30px;">trait</span></div>
<!--- personality, history, etc... --->
<p class="text-center p-3" style="letter-spacing:1px;color:#DEA86A;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.
<br><br>Sed malesuada ultricies tincidunt. Sed odio turpis, bibendum nec justo sed, lacinia sagittis nunc. Mauris facilisis purus neque, id feugiat sem malesuada vel. Aenean id nisl quis nulla vehicula iaculis quis sit amet sapien. Vestibulum faucibus lectus sit amet justo tempus hendrerit. Praesent ut lacus neque. Curabitur vitae sem at sapien rutrum dictum.</p>
<center>
<!--- color palette --->
<i class="fas fa-circle fa-2x m-2" style="color: #2A2A38;"></i>
<i class="fas fa-circle fa-2x m-2" style="color: #754B3A;"></i>
<i class="fas fa-circle fa-2x m-2" style="color: #BA7726;"></i>
<i class="fas fa-circle fa-2x m-2" style="color: #D79C25;"></i>
<i class="fas fa-circle fa-2x m-2" style="color: #ECC894;"></i>
<br>
<!--- stamps --->
<img class="m-3"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5e3500d6-8cf6-4863-9a5f-7fa21a0d7674/dacgwgc-1f7abaa1-5f5d-4348-98e2-6441ef1055e0.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWUzNTAwZDYtOGNmNi00ODYzLTlhNWYtN2ZhMjFhMGQ3Njc0XC9kYWNnd2djLTFmN2FiYWExLTVmNWQtNDM0OC05OGUyLTY0NDFlZjEwNTVlMC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.Ts91hsEemHgMWPqO1QUFQVf9rpHdVwpX_tU87MzjO6s">
<img class="m-3"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5e3500d6-8cf6-4863-9a5f-7fa21a0d7674/dag808a-59023470-80dd-4e6f-beee-e34228f785db.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvNWUzNTAwZDYtOGNmNi00ODYzLTlhNWYtN2ZhMjFhMGQ3Njc0XC9kYWc4MDhhLTU5MDIzNDcwLTgwZGQtNGU2Zi1iZWVlLWUzNDIyOGY3ODVkYi5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ._JyfZ-5Dc4DWUvnwEa8_XoN6DhQzktxe8JsmDaxplFQ">
<img class="m-3"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8b535ce0-6b96-4d5c-9567-9ceb47c5b113/daze5t9-3569add6-1ef7-4d91-84ce-73959b8ceece.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvOGI1MzVjZTAtNmI5Ni00ZDVjLTk1NjctOWNlYjQ3YzViMTEzXC9kYXplNXQ5LTM1NjlhZGQ2LTFlZjctNGQ5MS04NGNlLTczOTU5YjhjZWVjZS5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.sjqy9wFe3919V0kgOkvn5nsxpyNSZl71SKUiR0cQ6iw">
<br>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/8425596.good-and-golden-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
