thebloodwoods | CODE 010 } a well beaten path

Title

Link Link Link Link Link Link

Title

Link Link Link

Name Surname

Subtitle

code

Information

A simpler version of code 006 for people who want more nav than bio.

⤷ One - You can add sections, or remove them as you see fit. This could also be used for other things if you wish.

⤷ Two - The sections collapse! :) if you want them to be collapsed by default remove where it says "open" at the end of the < details > tag. Likewise, if you want them open, add the open just before the >.

⤷ Three - All sections can be changed to your liking, basics can have more or less cells, they can be just links or text. You can make sections into just text like 006 has it. It's up to you.

⤷ Four - Feel free to change the colours, the images, etc.

⤷ Five - Please comment if you use it! I'd love to see.

<div style="width: 750px; height: 100%; overflow: hidden;background: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(236,236,236,0) 56%);">	
			
<div style="background: rgba(0,0,0,0.2); width: 370px; height: 300px; float: right; margin-top: 25px; margin-right: 25px; overflow: auto; border-radius: 20px;">
	
<details style=" color:#ececec;font-family:Century Gothic, helvetica,arial,sans-serif;font-size:15px; margin: 0px auto;">
	<summary style="cursor:pointer;color:transparent;font-size:0px;text-align: center; padding: 10px;font-family:  Century Gothic, Helvetica Neue, Helvetica, Arial, sans-serif; text-transform:uppercase; background: rgba(0,0,0,0.2); background-image: url(); background-size: cover; background-position: center center;"><span style="color:#fff;font-size:20px;letter-spacing: 1px;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);">Title</span></summary>			
	
<div style="max-width:95%;margin:10px auto 0 auto;letter-spacing:1px;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;font-family:  Century Gothic, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:14px;  font-weight:normal; ">
	
	<span style="color:#fff;background:rgba(21,21,21,0.5);width:100px;padding:10px 0;margin:3px; text-transform:uppercase;"><a href="#" target="_blank"  style="text-decoration: none;"><span style=" color: #fef;">Link</span></a></span>	
		
					<span style="color:#fff;background:rgba(21,21,21,0.5);width:100px;padding:10px 0;margin:3px; text-transform:uppercase;"><a href="#" target="_blank"  style="text-decoration: none;"><span style=" color: #fef;">Link</span></a></span>
	
				<span style="color:#fff;background:rgba(21,21,21,0.5);width:100px;padding:10px 0;margin:3px; text-transform:uppercase;"><a href="#" target="_blank"  style="text-decoration: none;"><span style=" color: #fef;">Link</span></a></span>

</details>

<details style=" color:#ececec;font-family:Century Gothic, helvetica,arial,sans-serif;font-size:15px; margin: 0px auto;">
	<summary style="cursor:pointer;color:transparent;font-size:0px;text-align: center; padding: 10px;font-family: Century Gothic, Helvetica Neue, Helvetica, Arial, sans-serif; text-transform:uppercase; background: rgba(0,0,0,0.2); background-image: url(); background-size: cover; background-position: center center;"><span style="color:#fff;font-size:20px;letter-spacing: 1px;text-shadow: 1px 1px 2px rgba(0,0,0,0.7);">Title</span></summary>			
	
<div style="max-width:95%;margin:10px auto 0 auto;letter-spacing:1px;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;font-family:  Helvetica Neue, Helvetica, Arial, sans-serif; font-size:14px;  font-weight:normal; ">
	
	<span style="color:#fff;background:rgba(21,21,21,0.5);width:100px;padding:10px 0;margin:3px; text-transform:uppercase;"><a href="#" target="_blank"  style="text-decoration: none;"><span style=" color: #fef;">Link</span></a></span>	
		
					<span style="color:#fff;background:rgba(21,21,21,0.5);width:100px;padding:10px 0;margin:3px; text-transform:uppercase;"><a href="#" target="_blank"  style="text-decoration: none;"><span style=" color: #fef;">Link</span></a></span>
	
				<span style="color:#fff;background:rgba(21,21,21,0.5);width:100px;padding:10px 0;margin:3px; text-transform:uppercase;"><a href="#" target="_blank"  style="text-decoration: none;"><span style=" color: #fef;">Link</span></a></span>	
	
			</div>

</details>		
	
			</div>

<div style="color:#fff;font-family:Century Gothic, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:30px;letter-spacing: 3px;text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); margin-top: 50px; margin-left: 40px; width: 300px; text-transform:uppercase; ">
<div style="background: url(https://i.postimg.cc/zfYs8HJB/pexels-photo-397219.jpg); background-position: center center; background-size: cover; height: 150px; width: 150px; margin: 20px auto;  border-radius: 200px;"></div>		
		Name Surname</div>
					<div style="color:#fff;font-family: Century Gothic, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:14px;letter-spacing: 2px;text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); margin-left: 40px; width: 300px; text-transform:uppercase; line-height: 200%;">Subtitle
<br>
 </div>
	</div>	</div>
	
	<div style="text-align: center; padding: 10px;"><a href="https://thebloodwoods.dreamwidth.org/" target="_blank"  style="text-decoration: none;"><span style="font-size:12px; letter-spacing: 2px; color: #494949;">code</span></a></div>	
	
</raw-code>

Flat | Top-Level Comments Only

Oh this is gorgeous!

I love your choice of images here. It really hammers in this mysterious and eerie atmosphere that's perfect for a duplicitous/interesting character.

Thank you! I'm so glad you like it. The images/theme can be easily changed for anything, I think I was just in my usual witchy mood ;)

CODE 010 } a well beaten path

no subject

no subject