[02] little stars
created by:Skysong
Mixed ColorsHTMLCharacterUser
Copy
<!----------------------------------------------------------------------------------
L I T T L E S T A R S
> default
f2u code by skysong
c o l o r p a l e t t e
accent #6e75db
faded #444884
(ctrl + f to change)
things to edit (if you're not customizing more) should be marked in all caps with
instructions on what to change
i recommend editing on https://th.circlejourney.net/#
---------------------------------------------------------------------------------->
<div style="position:relative; display:flex; width:600px; height:200px; margin:0 auto;">
<!-- ^contains everything -->
<!--------------------------------------------------- P R O F I L E I M A G E -->
<div style="position:absolute; bottom:0; width:150px; height:150px;
background-image:url(https://iili.io/dZDMRR4.png);
background-size:100%; background-position:0% 0%;">
<!-- [background:url(PUT YOUR IMAGE URL HERE)] -->
<!-------------- IF YOU DON'T KNOW HOW TO GET THE URL
1. find an img hoster, i use https://freeimage.host/
3. upload and copy url
(on freeimage.host, click the img after uploading
and go to the "image url" box, NOT link)
You can also copy url, but it can be really long and
the image may be taken down in the future
------------------------ IF YOUR IMAGE IS NOT A SQUARE
1. go to the part where it says "background-position"
2. change the numbers to adjust positioning (x%, y%)
(x is left/right, y is up/down)
----------------------------------------------------->
<!--DIAGONAL BORDER-->
<div style="border:2px solid #6e75db; height:150px; width:150px; transform:rotate(45deg);"></div>
</div>
<!--------------------------------------------------------------------- N A M E -->
<div style="position:absolute; top:0; right:0; width:400px; height:50px; z-index:2;">
<!-- ^contains name section -->
<!--NAME-->
<h1 style="color: #6e75db; font-family:serif; font-size:50px; letter-spacing:5px;">
<b> name </b>
<!--ICON-->
<span style="font-size:30px;">
<!-- [i class="EDIT HERE"]-->
<i class="fal fa-sparkle" style="color:#444884"></i>
</span></h1>
</div> <!-- end name section -->
<!------------------------------------------------------ M A I N C O N T E N T-->
<div class="bg-faded" style="position:absolute; bottom:0; right:0; width:400px; height:150px; font-family:serif; font-size:12pt;">
<!-- ^contains content -->
<!--------------------------------------------------------- Q U I C K I N F O -->
<div class="pt-3 pb-3 "style="overflow:scroll; position:absolute; left:0; top:0; width:198px; height:150px;">
<!--copy/paste as much as you need-->
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">name</span>
<span class="pull-right">something</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">nickname</span>
<span class="pull-right">om</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">age</span>
<span class="pull-right">0 years</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">species</span>
<span class="pull-right">thing</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">pronouns</span>
<span class="pull-right">any/all</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">orientation</span>
<span class="pull-right">ramen</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">theme</span>
<span class="pull-right">song - artist</span></div>
<!--row of info w/ link---------------->
<div class="col-12">
<span style="color:#6e75db">art fight</span>
<span class="pull-right">
<a href="https://artfight.net">link</a>
</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">template</span>
<span class="pull-right">blank</span></div>
</div> <!--end quick info-->
<!--------------------------------------------------------- R I G H T S I D E -->
<div class="p-3"style="overflow:scroll; position:absolute; right:0; top:0; text-align:right; border-left: 1px solid #444884; width:198px; height:150px;">
<!--ABOUT-->
<!--TITLE-->
<h2 style="color:#6e75db;">
about </h2>
<!--TEXT-->
<p> Some words. You can retitle this if you want.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<p> Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
<hr style="border-color:#444884">
<!--BACKSTORY-->
<!--TITLE-->
<h2 style="color:#6e75db;">
backstory </h2>
<!--TEXT-->
<p> Some words. You can retitle this if you want.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<p> Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
</div> <!--end right side-->
<!-------------------------------------------------------------------------------->
</div> <!-- end content -->
</div> <!-- end everything -->
<!--------------------------------------------------------------- C R E D I T S -->
<!--do not remove! feel free to change position though-->
<div style="margin:0 auto; width:50px; height:50px; float:bottom; text-align:center; align-items:center;">
<a href="https://toyhou.se/29482757.little-stars-f2u" style="color:#444884;"> <i class="fal fa-code" style="margin:10px; font-size:18px;"></i> </a>
</div>Copy
<!----------------------------------------------------------------------------------
L I T T L E S T A R S
> tabbed version
f2u code by skysong
c o l o r p a l e t t e
accent #6e75db
faded #444884
(ctrl + f to change)
things to edit (if you're not customizing more) should be marked in all caps with
instructions on what to change
i recommend editing on https://th.circlejourney.net/#
---------------------------------------------------------------------------------->
<div style="position:relative; display:flex; width:640px; height:200px; margin:0 auto;">
<!-- ^contains everything -->
<!--------------------------------------------------- P R O F I L E I M A G E -->
<div style="position:absolute; bottom:0; width:150px; height:150px;
background-image:url(https://iili.io/dZDMRR4.png);
background-size:cover; background-position:0% 0%;">
<!-- [background:url(PUT YOUR IMAGE URL HERE)] -->
<!-------------- IF YOU DON'T KNOW HOW TO GET THE URL
1. find an img hoster, i use https://freeimage.host/
3. upload and copy url
(on freeimage.host, click the img after uploading
and go to the "image url" box, NOT link)
You can also copy url, but it can be really long and
the image may be taken down in the future
------------------------ IF YOUR IMAGE IS NOT A SQUARE
1. go to the part where it says "background-position"
2. change the numbers to adjust positioning (x%, y%)
(x is left/right, y is up/down)
----------------------------------------------------->
<!--DIAGONAL BORDER-->
<div style="border:2px solid #6e75db; height:150px; width:150px; transform:rotate(45deg);"></div>
</div>
<!--------------------------------------------------------------------- N A M E -->
<div style="position:absolute; top:0; right:40px; width:400px; height:50px; z-index:2;">
<!-- ^contains name section -->
<!--NAME-->
<h1 style="color: #6e75db; font-family:serif; font-size:50px; letter-spacing:5px;">
<b> name </b>
<!--ICON-->
<span style="font-size:30px;">
<!-- [i class="EDIT HERE"]-->
<i class="fal fa-sparkle" style="color:#444884"></i>
</span></h1>
</div> <!-- end name section -->
<!------------------------------------------------------ M A I N C O N T E N T-->
<div class="tab-content p-3 bg-faded" style="overflow:scroll; position:absolute; bottom:0; right:40px; width:400px; height:150px; font-family:serif; font-size:12pt;">
<!-- ^contains content -->
<!-------------------------------------------------------------------- I N F O -->
<div class="tab-pane fade active show" id="info">
<!-- COLUMN 1 -->
<div style="width:48%; display:inline-block;">
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">name</span>
<span class="pull-right">something</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">age</span>
<span class="pull-right">0 years</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">pronouns</span>
<span class="pull-right">any/all</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">theme</span>
<span class="pull-right">song - artist</span></div>
</div>
<!-- COLUMN 2 -->
<div style="width:48%; float:right; display:inline-block; border-left: 1px solid #444884">
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">nickname</span>
<span class="pull-right">om</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">species</span>
<span class="pull-right">thing</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#6e75db">orientation</span>
<span class="pull-right">ramen</span></div>
<!--row of info w/ link---------------->
<div class="col-12">
<span style="color:#6e75db">art fight</span>
<span class="pull-right">
<a href="https://artfight.net" style="color:#444884;">link</a>
</span></div>
</div>
</div>
<!------------------------------------------------------------------- A B O U T -->
<div class="tab-pane fade show" id="about">
<!--TEXT1-->
<!--TITLE-->
<h2 style="color:#6e75db; text-align:right;">
title </h2>
<!--TEXT-->
<p> Some words. You can retitle this if you want.
</p>
<p> 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.
</p>
<p> Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
<hr style="border-color:#444884">
<!--TEXT2-->
<!--TITLE-->
<h2 style="color:#6e75db; text-align:right;">
title </h2>
<!--TEXT-->
<p> Some words. You can retitle this if you want.</p>
<p> 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.
</p>
<p> 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.
</p>
</div>
<!----------------------------------------------------------------- D E S I G N -->
<div class="tab-pane fade show" id="design">
<!-- [background:url(URL HERE)] to change the image -->
<!--TOP-->
<div style="width:100%; height:150px; margin-bottom:15px;
background-image:url(https://iili.io/dZDMRR4.png);
background-size:100%; background-position:0% 0%;">
</div>
<!--LEFT SIDE-->
<div style="width:46%; height:180px; position:relative; display:inline-block;">
<!--IMAGE 1-->
<div style="height:80px; width:100%;
position:absolute; top:0;
background-image:url(https://iili.io/dZDMRR4.png);
background-size:100%; background-position:0% 0%;">
</div>cover
<!--IMAGE 2-->
<div style="height:80px; width:100%;
position:absolute; bottom:0;
background-image:url(https://iili.io/dZDMRR4.png);
background-size:100%; background-position:0% 0%;">
</div>
</div>
<!--RIGHT SIDE-->
<div style="width:46%; height:180px; position:absolute; right:15px; background-color:red; display:inline-block;">
<!--IMAGE 1-->
<div style="height:180px; width:100%;
position:absolute; top:0;
background-image:url(https://iili.io/dZDMRR4.png);
background-size:100%; background-position:0% 0%;">
</div>
</div>
<!--BOTTOM-->
<div style="width:100%; height:50px; margin-top:15px;
background-image:url(https://iili.io/dZDMRR4.png);
background-size:100%; background-position:0% 0%;">
</div>
</div>
<!-------------------------------------------------------------------------------->
</div> <!-- end content -->
<!------------------------------------------------------- N A V B U T T O N S -->
<!--BUTTONS-->
<ul class="nav flex-lg-column p-2" style="position:absolute; right:0; height:150px; bottom:0;">
<!-- edit [i class="CLASS HERE"] -->
<!--INFO BUTTON-->
<li class="nav-item" style="flex: 1 1 0;">
<a href="#info" class="nav-link btn d-flex justify-content-center align-items-center h-100 p-0 text-dark border-0 rounded-0" style="font-size: 20px; opacity: 0.5; box-shadow: none;" data-toggle="tab">
<i class="fal fa-moon" style="color:#6e75db;">
</i></a></li>
<!--ABOUT BUTTON-->
<li class="nav-item" style="flex: 1 1 0;">
<a href="#about" class="nav-link btn d-flex justify-content-center align-items-center h-100 p-0 text-dark border-0 rounded-0" style="font-size: 20px; opacity: 0.5; box-shadow: none;" data-toggle="tab">
<i class="fal fa-star" style="color:#6e75db;">
</i></a></li>
<!--DESIGN BUTTON-->
<li class="nav-item" style="flex: 1 1 0;">
<a href="#design" class="nav-link btn d-flex justify-content-center align-items-center h-100 p-0 text-dark border-0 rounded-0" style="font-size: 20px; opacity: 0.5; box-shadow: none;" data-toggle="tab">
<i class="fal fa-cloud" style="color:#6e75db;">
</i></a></li>
</ul></div> <!-- end buttons -->
<!--------------------------------------------------------------- C R E D I T S -->
<!--do not remove! feel free to change position though-->
<div style="margin:0 auto; width:50px; height:50px; float:bottom; text-align:center; align-items:center;">
<a href="https://toyhou.se/29482757.little-stars-f2u" style="color:#444884;"> <i class="fal fa-code" style="margin:10px; font-size:18px;"></i> </a>
</div>
<!--------------------------------------------------------------------------------->
</div> <!-- end everything -->Copy
<!----------------------------------------------------------------------------------
L I T T L E S T A R S
> user version
f2u code by skysong
c o l o r p a l e t t e
accent #6e75db
faded #444884
(ctrl + f to change)
things to edit (if you're not customizing more) should be marked in all caps with
instructions on what to change
i recommend editing on https://th.circlejourney.net/#
---------------------------------------------------------------------------------->
<div style="position:relative; display:flex; width:600px; height:200px; margin:0 auto;">
<!-- ^contains everything -->
<!--------------------------------------------------- P R O F I L E I M A G E -->
<div style="position:absolute; bottom:0; width:150px; height:150px;
background-image:url(https://iili.io/dZDMRR4.png);
background-size:100%; background-position:0% 0%;">
<!-- [background:url(PUT YOUR IMAGE URL HERE)] -->
<!-------------- IF YOU DON'T KNOW HOW TO GET THE URL
1. find an img hoster, i use https://freeimage.host/
3. upload and copy url
(on freeimage.host, click the img after uploading
and go to the "image url" box, NOT link)
You can also copy url, but it can be really long and
the image may be taken down in the future
------------------------ IF YOUR IMAGE IS NOT A SQUARE
1. go to the part where it says "background-position"
2. change the numbers to adjust positioning (x%, y%)
(x is left/right, y is up/down)
----------------------------------------------------->
<!--DIAGONAL BORDER-->
<div style="border:2px solid #6e75db; height:150px; width:150px; transform:rotate(45deg);"></div>
</div>
<!--------------------------------------------------------------------- N A M E -->
<div style="position:absolute; top:0; right:0; width:400px; height:50px; z-index:2;">
<!-- ^contains name section -->
<!--NAME-->
<h1 style="color: #6e75db; font-family:serif; font-size:50px; letter-spacing:5px;">
<b> name </b>
<!--ICON-->
<span style="font-size:30px;">
<!-- [i class="EDIT HERE"]-->
<i class="fal fa-sparkle" style="color:#444884"></i>
</span></h1>
</div> <!-- end name section -->
<!------------------------------------------------------ M A I N C O N T E N T-->
<div class="bg-faded" style="position:absolute; bottom:0; right:0; width:400px; height:150px; font-family:serif; font-size:12pt;">
<!-- ^contains content -->
<!--------------------------------------------------------- Q U I C K I N F O -->
<div class="pt-3 pb-3 "style="overflow:scroll; position:absolute; left:0; top:0; width:198px; height:150px;">
<!--copy/paste as much as you need-->
<p class="pl-3 pr-3">
Some info about you / a quick description.
</p>
<p class="pl-3 pr-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div> <!--end quick info-->
<!--------------------------------------------------------- R I G H T S I D E -->
<div class="p-3"style="overflow:scroll; position:absolute; right:0; top:0; text-align:right; border-left: 1px solid #444884; width:198px; height:150px;">
<!--row of info------------------------>
<div class="col-12">
<span style="float:left; color:#6e75db">comms</span>
<span>status</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="float:left; color:#6e75db">trades</span>
<span>status</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="float:left; color:#6e75db">requests</span>
<span>status</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="float:left; color:#6e75db">blank</span>
<span>thing</span></div>
<hr style="border-top: 1px solid #444884;">
<!--LINKS-->
<!--TITLE-->
<h2 style="color:#6e75db;">
links </h2>
<div style="text-align:center; width:150px; margin:0 auto; display: table; table-layout: fixed;">
<!--copy/paste as many as you need, spacing should adjust-->
<!--edit [href="LINK"] and [class="ICON"]-->
<a href="https://toyhou.se/" style="color:#fff; display:table-cell;">
<i class="fal fa-moon">
</i></a>
<a href="https://toyhou.se/" style="color:#fff; display:table-cell;">
<i class="fal fa-pen">
</i></a>
<a href="https://toyhou.se/" style="color:#fff; display:table-cell;">
<i class="fal fa-star">
</i></a>
<a href="https://toyhou.se/" style="color:#fff; display:table-cell;">
<i class="fal fa-palette">
</i></a>
<a href="https://toyhou.se/" style="color:#fff; display:table-cell;">
<i class="fal fa-cloud">
</i></a>
</div><!--end links-->
</div> <!--end right side-->
<!-------------------------------------------------------------------------------->
</div> <!-- end content -->
</div> <!-- end everything -->
<!--------------------------------------------------------------- C R E D I T S -->
<!--do not remove! feel free to change position though-->
<div style="margin:0 auto; width:50px; height:50px; float:bottom; text-align:center; align-items:center;">
<a href="https://toyhou.se/29482757.little-stars-f2u" style="color:#444884;"> <i class="fal fa-code" style="margin:10px; font-size:18px;"></i> </a>
</div>Copy
<!----------------------------------------------------------------------------------
L I T T L E S T A R S
> full text
f2u code by skysong
c o l o r p a l e t t e
accent #6e75db
faded #444884
(ctrl + f to change)
things to edit (if you're not customizing more) should be marked in all caps with
instructions on what to change
i recommend editing on https://th.circlejourney.net/#
---------------------------------------------------------------------------------->
<div style="position:relative; display:flex; width:600px; height:200px; margin:0 auto;">
<!-- ^contains everything -->
<!--------------------------------------------------- P R O F I L E I M A G E -->
<div style="position:absolute; bottom:0; width:150px; height:150px;
background-image:url(https://iili.io/dZDMRR4.png);
background-size:100%; background-position:0% 0%;">
<!-- [background:url(PUT YOUR IMAGE URL HERE)] -->
<!-------------- IF YOU DON'T KNOW HOW TO GET THE URL
1. find an img hoster, i use https://freeimage.host/
3. upload and copy url
(on freeimage.host, click the img after uploading
and go to the "image url" box, NOT link)
You can also copy url, but it can be really long and
the image may be taken down in the future
------------------------ IF YOUR IMAGE IS NOT A SQUARE
1. go to the part where it says "background-position"
2. change the numbers to adjust positioning (x%, y%)
(x is left/right, y is up/down)
----------------------------------------------------->
<!--DIAGONAL BORDER-->
<div style="border:2px solid #6e75db; height:150px; width:150px; transform:rotate(45deg);"></div>
</div>
<!--------------------------------------------------------------------- N A M E -->
<div style="position:absolute; top:0; right:0; width:400px; height:50px; z-index:2;">
<!-- ^contains name section -->
<!--NAME-->
<h1 style="color: #6e75db; font-family:serif; font-size:50px; letter-spacing:5px;">
<b> name </b>
<!--ICON-->
<span style="font-size:30px;">
<!-- [i class="EDIT HERE"]-->
<i class="fal fa-sparkle" style="color:#444884"></i>
</span></h1>
</div> <!-- end name section -->
<!------------------------------------------------------ M A I N C O N T E N T-->
<div class="p-3 bg-faded" style="overflow:scroll; position:absolute; bottom:0; right:0; width:400px; height:150px; font-family:serif; font-size:12pt;">
<!-- ^contains content -->
<!--TEXT1-->
<!--TITLE-->
<h2 style="color:#6e75db; text-align:right;">
title </h2>
<!--TEXT-->
<p> Some words. You can retitle this if you want.
</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<p> Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
<hr style="border-color:#444884">
<!--TEXT2-->
<!--TITLE-->
<h2 style="color:#6e75db; text-align:right;">
title </h2>
<!--TEXT-->
<p> Some words. You can retitle this if you want.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<p> Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
</div> <!-- end content -->
</div> <!-- end everything -->
<!--------------------------------------------------------------- C R E D I T S -->
<!--do not remove! feel free to change position though-->
<div style="margin:0 auto; width:50px; height:50px; float:bottom; text-align:center; align-items:center;">
<a href="https://toyhou.se/29482757.little-stars-f2u" style="color:#444884;"> <i class="fal fa-code" style="margin:10px; font-size:18px;"></i> </a>
</div>