[01] a walk in the woods
created by:Skysong
Custom ColorsHTMLCharacter
Copy
<!------------------------------------------------------------------------------------
A W A L K I N T H E W O O D S
> default theme
f2u code by skysong
c o l o r p a l e t t e
main #382e2e
main2 #292222
accent #c09090
accent2 #d78b75
text #dfcfcf
(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="align-items: center; display:flex; margin:0 auto; width:850px; height:530px;">
<!-- ^contains everything-->
<div style="margin:0 auto; width:820px; justify-content:center;">
<!-- ^contains just the content-->
<!------------------------------------------------------------- L E F T S I D E -->
<div style="position:relative; width:300px; height:500px; float:left;">
<!-- ^contains whole left section -->
<div class="tab-content" style="position:relative; width:300px; height:300px; background-color:black;">
<!-- ^contains profile image & quick info -->
<!------------------------------------------------------ P R O F I L E I M A G E -->
<div> <!-- contains profile image section-->
<!--PROFILE IMAGE -->
<!-- edit [background:url(PUT YOUR IMAGE URL HERE)] -->
<div style="width:300px; height:300px;
background:url(https://iili.io/dQgoAk7.png);
background-size:cover; background-position:0% 0%">
</div> <!-- end image -->
<!-------------- 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)
----------------------------------------------------->
<!--TOGGLE ICON-->
<div style="width:35px; height:35px; position:absolute; bottom:0; right:0; z-index: 1; margin:10px;">
<a href="#info" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="info">
<!--go to https://fontawesome.com/ for more and edit [iclass="CLASS HERE"] -->
<i class="fal fa-moon" style="font-size:35px; color:#c09090; opacity:0.9; filter:drop-shadow(0px 0px 5px #c09090)"></i></a>
</div> <!-- end toggle icon -->
</div> <!-- end profile image section -->
<!----------------------------------------------------------- Q U I C K I N F O -->
<div style="position:absolute; top:0; width:300px; background-color:#382e2e;">
<div class="collapse" id="info">
<div style="height:300px; overflow:auto; padding:15px; font-family:serif; font-size:15.5px; color:#dfcfcf;">
<!-- ^contains quick info section -->
<!--ICON-->
<div style="text-align:center;">
<!--replace [src="URL HERE"]
(you can also use a pic of your OC)-->
<img src="https://iili.io/dQbnSpe.png"
style="width:50px; height:50px;">
</div><br> <!--end icon-->
<!--THE ACTUAL INFO-->
<!--add/subtract as much as you like!-->
<div class="row">
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">name</span>
<span class="pull-right">something</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">nickname</span>
<span class="pull-right">om</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">age</span>
<span class="pull-right">0 years</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">species</span>
<span class="pull-right">thing</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">pronouns</span>
<span class="pull-right">any/all</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">orientation</span>
<span class="pull-right">ramen</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">theme</span>
<span class="pull-right">song - artist</span></div>
<!--row of info w/ link---------------->
<div class="col-12">
<span style="color:#c09090">art fight</span>
<span class="pull-right">
<a href="https://artfight.net" style="color:#d78b75;">link</a>
</span></div>
<!--row of info------------------------>
<div class="col-12">
<span style="color:#c09090">template</span>
<span class="pull-right">blank</span></div>
</div> <!--end the actual info-->
<br><br>
</div></div></div> <!-- end quick info section-->
</div> <!-- end profile image/info -->
<!-------------------------------------------------------- E X T R A I M A G E S -->
<div style="width:300px; height:180px; position:absolute; bottom:0">
<!-- ^contains extra images section -->
<!-- edit [border:size style color] for outline;
[filter:brightness(VALUE HERE)] for brightness;
[background:url(URL HERE)] to change the image
-->
<!--IMAGE 1-->
<div style="width:140px; height:80px; position:absolute; bottom:0; top:0;
filter:brightness(0.6);
background:url(https://iili.io/dQgx5ap.png);
background-size:cover; background-position:0% 0%">
<!--BORDER-->
<div style="width:130px; height:70px; border:1px solid #c09090; margin:5px;"></div>
</div>
<!--IMAGE 2-->
<div style="width:140px; height:80px; position:absolute; bottom:0;
filter:brightness(0.6);
background:url(https://iili.io/dQgxtVa.png);
background-size:cover; background-position:0% 0%;">
<!--BORDER-->
<div style="width:130px; height:70px; border:1px solid #c09090; margin:5px;"></div>
</div>
<!--IMAGE 3-->
<div style="width:140px; height:180px; position:absolute; bottom:0; right:0;
filter:brightness(0.6);
background:url(https://iili.io/dQgRmfn.png);
background-size:cover; background-position:0% 0%;">
<!--BORDER-->
<div style="width:130px; height:170px; border:1px solid #c09090; margin:5px;"></div>
</div>
</div> <!-- end extra images section-->
</div> <!-- end left section -->
<!--------------------------------------------------------------- R I G H T S I D E -->
<div style="width:500px; height:500px; float:right;">
<!-- ^contains right section-->
<div style="background-color:#292222; width:50px; height:500px; float:left; ">
<!-- ^contains buttons-->
<!--BUTTONS-->
<ul class="nav flex-lg-column h-100">
<!-- edit [i class="CLASS HERE"] -->
<!--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-leaf-maple" style="color:#c09090;">
</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-holly-berry" style="color:#c09090;">
</i></a></li>
<!--TRIVIA BUTTON-->
<li class="nav-item" style="flex: 1 1 0;">
<a href="#trivia" 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-leaf" style="color:#c09090;">
</i></a></li>
<!--RELATIONS BUTTON-->
<li class="nav-item" style="flex: 1 1 0;">
<a href="#relations" 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-mistletoe" style="color:#c09090;">
</i></a></li>
</ul></div> <!-- end buttons -->
<div style="overflow:auto; width:450px; height:500px; background-color:#382e2e; float:right; padding:15px; font-family:serif; font-size:15.5px; color:#dfcfcf;">
<div class="tab-content">
<!-- ^contains main content-->
<!------------------------------------------------------------------------- A B O U T -->
<div class="tab-pane fade active show" id="about">
<!-- ^contains about section-->
<!--TITLE-->
<h1 style="font-family: monospace; font-size:30px; letter-spacing:10px; color:#c09090;">
about
<span style="font-size:15px; letter-spacing:1px;">𖤣 𖥧 𓋼 𖡼 𓍊 𖥧 ⋆ </span> </h1> <br>
<!--QUOTE-->
<p style="background-color:#292222; padding:3px; padding-right:10px; padding-left:10px; margin:10px; text-align:center;">
<span style="color:#c09090">"</span>
quote here
<span style="color:#c09090">"</span></p><br>
<hr>
<!--PERSONALITY-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75; text-align:right;">
personality </h2> <!--title-->
<p>  
You can change the header if you want. This box will scroll.
</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>
<hr>
<!--BACKSTORY-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75; text-align:right;">
backstory </h2> <!--title-->
<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> <!--end about section-->
<!-------------------------------------------------------------------- D E S I G N -->
<div class="tab-pane fade show" id="design">
<!-- ^contains design section -->
<!--TITLE-->
<h1 style="font-family: monospace; font-size:30px; letter-spacing:10px; color:#c09090;">
design
<span style="font-size:15px; letter-spacing:1px;">𖤣 𖥧 𓋼 𖡼 𓍊 𖥧 ⋆ ˚ </span> </h1> <br>
<!-- FOR MORE HORIZONTAL REFS -->
<div>
<!--REF: edit [img src="URL HERE"]-->
<img src="https://iili.io/dQmlkNf.png"> <br><br>
<!--TITLE-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75; text-align:right;">
notes </h2>
<!--DESIGN NOTES-->
<ul style="list-style-type: square;">
<li>Design notes here</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio</li>
<li>They can also be more longer. Donec accumsan tempor lacus, et venenatis elit feugiat non</li>
<li>Duis porta eros et velit blandit dapibus</li>
</ul>
</div> <!--end ref/notes section (h) -->
<hr>
<!-- FOR MORE VERTICAL REFS -->
<div>
<!--REF: edit [img src="URL HERE"]-->
<img src="https://iili.io/dQmUddu.png" style="max-width:50%; left:0;"></img>
<!--CONTAINS TEXT-->
<div style="width:50%; float:right; display:inline-block;">
<!--TITLE-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75; text-align:right;">
notes </h2>
<!--DESIGN NOTES-->
<ul style="list-style-type: square;">
<li>Design notes here</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio</li>
<li>They can also be more longer. Donec accumsan tempor lacus, et venenatis elit feugiat non</li>
<li>Duis porta eros et velit blandit dapibus</li>
</ul>
</div> <!--end design notes-->
</div> <!--end ref/notes section (v) -->
<hr>
<!--AESTHETIC-->
<div>
<!--TITLE-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75; text-align:right;">
aesthetic </h2>
<!--TEXT (list)-->
<ul style="list-style-type: square;">
<li>Aesthetic here</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
<!--TEXT (paragraph)-->
<p>  
You can also use a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div> <!-- end aesthetic section-->
</div> <!-- end design section-->
<!-------------------------------------------------------------------- T R I V I A -->
<div class="tab-pane fade show" id="trivia">
<!-- ^contains trivia section-->
<!--TITLE-->
<h1 style="font-family: monospace; font-size:30px; letter-spacing:10px; color:#c09090;">
trivia
<span style="font-size:15px; letter-spacing:1px;">𖤣 𖥧 𓋼 𖡼 𓍊 𖥧 ⋆ </span> </h1> <br>
<!--TEXT-->
<ul style="list-style-type: square;">
<li>Some trivia/fun facts</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non</li>
<li>Curabitur ac finibus eros</li>
</ul>
<hr>
<!--LIKES-->
<div style="width:49%; float:left; display:inline-block;">
<!--TITLE-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75; text-align:left;">
likes </h2>
<!--LIKES TEXT-->
<ul style="list-style-type: square;">
<li>Likes here</li>
<li>Lorem ipsum</li>
<li>Duis sollicitudin elit</li>
<li>They can also be more longer. Donec accumsan tempor lacus, et venenatis elit feugiat non</li>
<li>Duis porta eros</li>
</ul>
</div> <!-- end likes -->
<!--DISLIKES-->
<div style="width:49%; float:right; display:inline-block;">
<!--TITLE-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75; text-align:right;">
dislikes </h2>
<!--DISLIKES TEXT-->
<ul style="list-style-type: square;">
<li>dislikes here</li>
<li>Lorem ipsum</li>
<li>Duis sollicitudin elit</li>
<li>They can also be more longer. Donec accumsan tempor lacus, et venenatis elit feugiat non</li>
<li>Duis porta eros</li>
</ul>
</div> <!-- end dislikes -->
<hr>
<!--STATS-->
<!--TITLE-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75; text-align:right;">
stats </h2>
<!--add/subtract as much you want-->
<!--STAT ROW-->
<div class="row no-gutters align-items-center">
<div class="col-3">
confidence
</div>
<!--STAT BAR-->
<div class="col-9" style="background-color:#292222; height:3px;">
<div style="background-color:#c09090; height:3px;
width:50%;"></div>
<!--^edit [width:VALUE%]-->
</div></div>
<!--STAT ROW-->
<div class="row no-gutters align-items-center">
<div class="col-3">
creativity
</div>
<!--STAT BAR-->
<div class="col-9" style="background-color:#292222; height:3px;">
<div style="background-color:#c09090; height:3px;
width:50%;"></div>
<!--^edit [width:VALUE%]-->
</div></div>
<!--STAT ROW-->
<div class="row no-gutters align-items-center">
<div class="col-3">
honesty
</div>
<!--STAR BAR-->
<div class="col-9" style="background-color:#292222; height:3px;">
<div style="background-color:#c09090; height:3px;
width:50%;"></div>
<!--^edit [width:VALUE%]-->
</div></div>
<!--STAT ROW-->
<div class="row no-gutters align-items-center">
<div class="col-3">
humor
</div>
<!--STAT BAR-->
<div class="col-9" style="background-color:#292222; height:3px;">
<div style="background-color:#c09090; height:3px;
width:50%;"></div>
<!--^edit [width:VALUE%]-->
</div></div>
<!--STAT ROW-->
<div class="row no-gutters align-items-center">
<div class="col-3">
intelligence
</div>
<!--STAT BAR-->
<div class="col-9" style="background-color:#292222; height:3px;">
<div style="background-color:#c09090; height:3px;
width:50%;"></div>
<!--^edit [width:VALUE%]-->
</div></div>
<!--STAT ROW-->
<div class="row no-gutters align-items-center">
<div class="col-3">
kindness
</div>
<!--STAT BAR-->
<div class="col-9" style="background-color:#292222; height:3px;">
<div style="background-color:#c09090; height:3px;
width:50%;"></div>
<!--^edit [width:VALUE%]-->
</div></div>
<!--STAT ROW-->
<div class="row no-gutters align-items-center">
<div class="col-3">
patience
</div>
<!--STAT BAR-->
<div class="col-9" style="background-color:#292222; height:3px;">
<div style="background-color:#c09090; height:3px;
width:50%;"></div>
<!--^edit [width:VALUE%]-->
</div></div>
<!--STAT ROW-->
<div class="row no-gutters align-items-center">
<div class="col-3">
custom
</div>
<!--STAT BAR-->
<div class="col-9" style="background-color:#292222; height:3px;">
<div style="background-color:#c09090; height:3px;
width:50%;"></div>
<!--^edit [width:VALUE%]-->
</div></div>
</div> <!-- end trivia section-->
<!-------------------------------------------------------------- R E L A T I O N S -->
<div class="tab-pane fade show" id="relations">
<!-- ^contains relations -->
<!--TITLE-->
<h1 style="font-family: monospace; font-size:30px; letter-spacing:10px; color:#c09090;">
relations
<span style="font-size:15px; letter-spacing:1px;">𖤣 𖥧 𓋼 𖡼 𓍊 𖥧 ⋆ </span> </h1> <br>
<!--RELATIONSHIP (left)-->
<!--copy/paste the whole thing -->
<div style="height:100px;">
<!--IMAGE-->
<!--[background:url(URL HERE)] to change image-->
<div style="float:left; height:100px; width:100px;
background:url(https://iili.io/dZuqJnt.png);
background-size:cover; background-position:0% 0%;"></div>
<!--TEXT-->
<div style="float:right; width:70%;">
<!--TITLE-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75;">
name</h2>
<!--ICONS, fas for solid and fal for empty-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
<!--DESCRIPTION-->
<p> <!--will not scroll, so keep it short-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div><!--end text-->
</div> <hr> <!--end left relation -->
<!--RELATIONSHIP (right)-->
<!--copy/paste the whole thing -->
<div style="height:100px;">
<!--TEXT-->
<div style="float:left; width:70%; text-align:right;">
<!--TITLE-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75;">
name</h2>
<!--ICONS, fas for solid and fal for empty-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
<!--DESCRIPTION-->
<p> <!--will not scroll, so keep it short-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div><!--end text-->
<!--IMAGE-->
<!--[background:url(URL HERE)] to change image-->
<div style="float:right; height:100px; width:100px;
background:url(https://iili.io/dZuqJnt.png);
background-size:cover; background-position:0% 0%;"></div>
</div> <hr> <!--end left relation -->
<!--RELATIONSHIP (left)-->
<!--copy/paste the whole thing -->
<div style="height:100px;">
<!--IMAGE-->
<!--[background:url(URL HERE)] to change image-->
<div style="float:left; height:100px; width:100px;
background:url(https://iili.io/dZuqJnt.png);
background-size:cover; background-position:0% 0%;"></div>
<!--TEXT-->
<div style="float:right; width:70%;">
<!--TITLE-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75;">
name</h2>
<!--ICONS, fas for solid and fal for empty-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
<!--DESCRIPTION-->
<p> <!--will not scroll, so keep it short-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div><!--end text-->
</div> <hr> <!--end left relation -->
<!--RELATIONSHIP (right)-->
<!--copy/paste the whole thing -->
<div style="height:100px;">
<!--TEXT-->
<div style="float:left; width:70%; text-align:right;">
<!--TITLE-->
<h2 style="font-family: monospace; font-size:20px; letter-spacing:10px; color:#d78b75;">
name</h2>
<!--ICONS, fas for solid and fal for empty-->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
<!--DESCRIPTION-->
<p> <!--will not scroll, so keep it short-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div><!--end text-->
<!--IMAGE-->
<!--[background:url(URL HERE)] to change image-->
<div style="float:right; height:100px; width:100px;
background:url(https://iili.io/dZuqJnt.png);
background-size:cover; background-position:0% 0%;"></div>
</div> <!--end left relation -->
</div> <!-- end relations section-->
<!----------------------------------------------------------------------------------->
</div></div> <!--end right content-->
</div> <!--end right section-->
</div> <!--end main content-->
</div> <!--end everything-->
<!------------------------------------------------------------------ C R E D I T S -->
<div class="text-muted" style="margin:0 auto; width:820px; text-align:center; font-family:serif;">
⋆ 𖤣 𖥧 𖡼 𓋼 𖤣 𖥧 𓍊
<i>code by <a href="https://toyhou.se/29469904.a-walk-in-the-woods-f2u" class="text-muted">skysong</a></i>
𓍊 𖥧 𖤣 𓋼 𖡼 𖥧 𖤣 ⋆
</div>