- Created
- 1 year, 3 months ago
- Creator
- Phantasmagorical
- Favorites
- 25
Profile
<!------- Tea Time accent: #989dc8 -------> <div class="container my-5" style="max-width:800px; font-family:helvetica; font-weight:200"> <div class="row no-gutters"> <!--- this image could be an icon too! replace IMG_LINK with the address of your image ---> <div class="col-lg-4 flex-column my-2 my-lg-0"> <img src="IMG_LINK" style="border:1px solid #989dc8 ;border-radius:40px 0px 0px; object-fit:cover" class="card p-2 flex-fill bg-transparent"> </div> <!--- right column ---> <div class="col-lg flex-column ml-lg-2" style="overflow:hidden"> <div class="card p-3 rounded-0 flex-fill bg-transparent" style="border-color:#989dc8; height:275px"> <!--- number 01 ---> <div class="justify-content-center" style="margin-top:-30px; margin-right:-460px"> <div class="card rounded-circle p-1 text-center w-100" style="max-width:65px; height:65px; border:2px dashed #989dc8"> <p class="mt-1" style="font-size:1.9rem; font-family:georgia">01</p> </div> </div> <!--- introduction / about section ---> <div class="card-block p-0 px-1" style="margin-top:-35px;"> <div style="font-size:1.2rem; letter-spacing:1.3px"> username <p class="text-muted" style="font-size:13px">prn / prns . languages . timezone</p> </div> <hr class="my-2" style="border-style:dashed; border-top-width:2px"> <div class="card-block p-1 px-2 pt-2 mb-2" style="max-height:150px; overflow:auto"> Talk about yourself here, this box scrolls! 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. </div> <!--- socials replace URLHERE with the links to your social medias! ---> <div class="text-center"> <a href="URLHERE" style="color:#989dc8"><i class="fa-brands fa-twitter fa-fw"></i></a> // <a href="URLHERE" style="color:#989dc8"><i class="fa-brands fa-tumblr fa-fw"></i></a> // <a href="URLHERE" style="color:#989dc8"><i class="fa-brands fa-instagram fa-fw"></i></a> </div> </div> </div> </div> </div> <!--- divider ---> <div class="row no-gutters align-items-center mx-2"> <div class="col"> <hr style="border-top:1px solid"> </div> <div class="col-auto px-2"> ◦ <i class="fal fa-flower"></i> ◦ </div> <div class="col"> <hr style="border-top:1px solid"> </div> </div> <!----> <div class="row no-gutters"> <!--- notice board ---> <div class="col-lg flex-column"> <div class="card pb-2 pl-2 rounded-0 flex-fill border-right-0 border-top-0 bg-transparent" style="border:3px solid #989dc8;"> <div class="card h-100 rounded-0 p-3 bg-transparent" style="border:1px solid #989dc8;"> <p style="font-size:1.1rem; font-family:helvetica; font-weight:200">NOTICE BOARD <span style="font-family:calibri;font-weight:900; font-style:italic; font-size:1.4rem; color:#878dbf"> !! </span> </p> <div><hr class="my-1" style="border-style:dashed; border-top-width:2px"></div> <div style="height:220px; overflow:auto"> <ul class="fa-ul mt-2" style="font-family:helvetica; font-weight:200;"> <li><span class="fa-li"><i class="fal fa-flower fa-sm"></i></span> write some triggers / warnings / notes here</li> <li class="my-2"><span class="fa-li"><i class="fal fa-flower fa-sm"></i></span> lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li class="my-2"><span class="fa-li"><i class="fal fa-flower fa-sm"></i></span> fusce ut purus quam. fusce sollicitudin vel odio ac maximus. donec et neque id dui feugiat elementum ut id nulla.</li> </ul> </div> </div> </div> </div> <!--- number 02 - replace IMG_LINK with the address of your image ---> <div class="col-lg-2 flex-column my-2 my-lg-0" style="height:300px"> <div class="card p-2 mx-lg-2 rounded-0 flex-fill bg-transparent" style="border:1px solid #989dc8;"> <div class="card h-100 rounded-0 border-0 text-white" style=" background:url(IMG_LINK); background-position:center; background-size:cover;"> <p class="text-center my-auto" style="font-size:2.9rem; font-family:georgia">02</p> </div> </div> </div> <!--- art status ---> <div class="col-lg flex-column"> <div class="card pb-2 pr-2 rounded-0 flex-fill border-left-0 border-top-0 bg-transparent" style="border:3px solid #989dc8;"> <div class="card h-100 rounded-0 p-3 bg-transparent" style="border:1px solid #989dc8;"> <p style="font-size:1.1rem; font-family:helvetica; font-weight:200">ART STATUS <span style="font-family:calibri;font-weight:900; font-style:italic; font-size:1.4rem; color:#878dbf"> !! </span> </p> <div class="justify-content-between mt-2"> <span class="text-muted" style="letter-spacing: 1px;"> <i class="fal fa-dollar-sign"></i> commissions </span> <span class="text-success"> OPEN </span> </div> <div class="justify-content-between mt-2"> <span class="text-muted" style="letter-spacing: 1px;"> <i class="fal fa-exchange"></i> art trades / collabs</span> <span class="text-warning"> ASK </span> </div> <div class="justify-content-between mt-2"> <span class="text-muted" style="letter-spacing: 1px;"> <i class="fal fa-gift"></i> requests </span> <span class="faded text-danger"> CLOSED </span> </div> <div><hr class="my-2" style="border-style:dashed; border-top-width:2px"></div> <!--- just change the colors or the icons to your liking! ---> <div class="justify-content-between mt-1"> <span class="text-muted" style="letter-spacing: 1px;"> <i class="fal fa-dollar-sign"></i> sales </span> <span class="text-success"> <i class="far fa-check"></i> </span> </div> <div class="justify-content-between mt-2"> <span class="text-muted" style="letter-spacing: 1px;"> <i class="fal fa-exchange"></i> character trades </span> <span class="text-warning"> <i class="far fa-question"></i> </span> </div> <div class="justify-content-between mt-2"> <span class="text-muted" style="letter-spacing: 1px;"> <i class="fal fa-tags"></i> offers </span> <span class="faded text-danger"> <i class="far fa-xmark"></i> </span> </div> <div><hr class="my-2" style="border-style:dashed; border-top-width:2px"></div> <!--- links ---> <div class="text-center"> <a href="URL" class="tooltipster" title="UFT/S" style="color:#989dc8"> <i class="fal fa-folder-open fa-lg fa-fw"></i> </a> <a href="URL" class="tooltipster" title="comm info" style="color:#989dc8"> <i class="fal fa-list fa-lg fa-fw"></i> </a> <a href="URL" class="tooltipster" title="char preference" style="color:#989dc8"> <i class="fal fa-heart fa-lg fa-fw"></i> </a> </div> </div> </div> </div> </div> <div><hr class="my-2" style="border-top:2px dashed; opacity:0.3"></div> <div class="row no-gutters"> <!--- number 03 ---> <div class="col-lg-2 mr-lg-2 mt-lg-0 mt-2 p-1 order-md-1 order-2" style="border:2px solid #989dc8; border-radius:0px 0px 0px 20px;"> <div class="card h-100" style="border:2px solid #989dc8; background:#989dc8; border-radius:0px 0px 0px 16px;"> <p class="text-center my-auto text-white" style="font-size:2.9rem; font-family:georgia; text-shadow:-1px -1px 0 rgba(22,18,20,1),2px -2px 0 rgba(22,18,20,1),-1px 1px 0 rgba(22,18,20,1),1px 1px 0 rgba(22,18,20,1);">03</p> </div> </div> <!--- featured characters or folders ---> <div class="col-lg card rounded-0 p-2 order-md-2 order-1" style="border:2px solid #989dc8;"> <div class="row no-gutters"> <!--- character - rreplace IMG_LINK with the address of your image and LINK_HERE to the link to your character profile ---> <!-- char #1 - replace IMG_LINK with the address of your image --> <div class="col-lg-3 col-12 pr-lg-2 my-lg-0 my-1"> <div class="card border-0 rounded-0 justify-content-end p-1" style="height: 115.5px; background: url(IMG_LINK); background-size: cover; background-position: center;"> <a href="LINK_HERE" class="text-white font-weight-bold" style="font-size:10pt;text-shadow:0 0 8px #000; letter-spacing:1.3px;"> character name </a> </div> </div> <!-- char #2 - replace IMG_LINK with the address of your image --> <div class="col-lg-3 col-12 pr-lg-2 my-lg-0 my-1"> <div class="card border-0 rounded-0 justify-content-end p-1" style="height: 115.5px; background: url(IMG_LINK); background-size: cover; background-position: center;"> <a href="LINK_HERE" class="text-white font-weight-bold" style="font-size:10pt;text-shadow:0 0 8px #000; letter-spacing:1.3px;"> character name </a> </div> </div> <!-- char #3 - replace IMG_LINK with the address of your image --> <div class="col-lg-3 col-12 pr-lg-2 my-lg-0 my-1"> <div class="card border-0 rounded-0 justify-content-end p-1" style="height: 115.5px; background: url(IMG_LINK); background-size: cover; background-position: center;"> <a href="LINK_HERE" class="text-white font-weight-bold" style="font-size:10pt;text-shadow:0 0 8px #000; letter-spacing:1.3px;"> character name </a> </div> </div> <!-- VIEW ALL - link to your characters page or folder --> <div class="col-lg-3 col-12 my-lg-0 my-1"> <div class="card btn-block btn-outline-secondary rounded-0 text-center p-2" style="height: 115.5px; mix-blend-mode:luminosity; border:3px solid #989dc8"> <a href="LINK_HERE" class="text-white font-weight-bold my-auto" style="font-size:10pt;text-shadow:0 0 8px #000, -1px -1px 0 rgba(22,18,20,0.7),1px -1px 0 rgba(22,18,20,0.7),-1px 1px 0 rgba(22,18,20,0.7),1px 1px 0 rgba(22,18,20,0.7);; letter-spacing:1.3px;"> VIEW ALL CHARACTERS </a> </div> </div> </div> </div> </div> <!-- CREDIT - DON'T REMOVE --> <div class="text-center mt-3"> <a href="https://toyhou.se/19937391.-f2u-user-tea-time"><i class="fa-solid fa-alien-8bit fa-lg text-primary"></i></a> </div> </div>
Recent Images
No images.