FNAF

Tags: #fnaf
Description:

This layout is free to use
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by Moonlightt_Editz (https://layouts.spacehey.com/layout?id=29487) -->

<a href="#" target="_BLANK" style="color:#DE6A6A">TEXT</a> ------------------&gt;

<div class="background" style="border: none; width: auto; margin-top: 0px; margin-bottom: 15px; float: left; height: auto; background: #FFFFFF url('https://trello-attachments.s3.amazonaws.com/5e4b2b51a0d4535270c8679d/5eb805cfa838f67ea59b1e00/9df632810e7e01c18eea85b053bd4db3/Wiki-background.png'); background-position: center; background-attachment: fixed;">
  <div class="transbox" style="background-color: rgba(28,29,31,0.9); border: 1px solid #AAAAAA; padding: 10px 15px; text-align: left; background-repeat: repeat; margin: 20px 20px 20px 20px; font-family: 'Helvetica Neue', arial, helvetica, sans-serif; color: #E6E6E6">
      
    <h3 style="color: #E6E6E6; font-size: 36px; font-family: 'Play', 'Verdana'; font-weight: lighter;">Character Name</h3>
    <div class="card mb-1 border-top-0" style="height: 1px; background: #8E8E8F"></div>

<!------------------------------------------->
<div align="center">
<div class="mb-3 my-3" style="border-bottom: 1px solid #B9BBB6; background: #000000 url('https://trello-attachments.s3.amazonaws.com/5e4b2b51a0d4535270c8679d/5eb805cfa838f67ea59b1e00/b06cf407a84336c1ac30fc69be303a85/FNaF-MainUniverse.png'); background-position: top left; background-attachment: contain; width: 80%; text-align: right; padding-right: 1em; max-height: 77px; font-size: large; font-variant: small-caps; line-height: 25px">
    <a href="https://freddy-fazbears-pizza.fandom.com/wiki/Five_Nights_at_Freddy%27s_Wiki:Core_Series_Portal" target="_BLANK" title="Five Nights at Freddy's Wiki:Core Series Portal" style="color: #DE6A6A">Core <i>Five Nights at Freddy's</i> Series</a>
    <br/><span style="font-size: smaller;">Main plotline by <a href="https://freddy-fazbears-pizza.fandom.com/wiki/Scott_Cawthon" target="_BLANK" title="Scott Cawthon" style="color: #DE6A6A">Scott Cawthon</a> and partnered game companies</span>
    <br/><span style="font-size: smaller;">Fan Character by <a href="YOURTOYHOUSELINK" target="_BLANK" title="Your Username" style="color: #DE6A6A">Your Username</a></span>
    </div>
</div>

<!------------------------------------------- PAGE NAVIGATION --------------------------------------------->
<div class="card text-center" style="border:2px solid #B9BBB6; border-radius: 5px 5px 0px 0px; background-color: #000000; line-height:21px; font-family:monospace; font-size:13px; font-weight:700; color:#E6E6E6;">Page Navigation</div>
    <p>
        <span style="color: #E6E6E6; border: 2px solid #B9BBB6; border-color: black #B9BBB6 #B9BBB6; border-radius:0px 0px 5px 5px; float: left; margin-right: 5px; min-width: 80px; text-align: center; background-color: #000000; font-weight: 700; font-family: 'Helvetica Neue', arial, helvetica, sans-serif; line-height: 18px; font-size: smaller">Overview</span>
        <a href="URLHistory" title="Character Name/History" style="color:#DE6A6A;"><span style="border: 2px solid #B9BBB6; border-color: black #B9BBB6 #B9BBB6; border-radius:0px 0px 5px 5px; float: left; margin-right: 5px; min-width: 80px; text-align: center; background-color: #000000; font-weight: 700; font-family: 'Helvetica Neue', arial, helvetica, sans-serif; line-height: 18px; font-size: smaller">History</span></a>
        <a href="URLGallery" title="Character Name/Gallery" style="color:#DE6A6A;"><span style="border: 2px solid #B9BBB6; border-color: black #B9BBB6 #B9BBB6; border-radius:0px 0px 5px 5px; float: left; margin-right: 5px; min-width: 80px; text-align: center; background-color: #000000; font-weight: 700; font-family: 'Helvetica Neue', arial, helvetica, sans-serif; line-height: 18px; font-size: smaller">Gallery</span></a>
        <a href="URLTrivia" title="Character Name/Trivia" style="color:#DE6A6A;"><span style="border: 2px solid #B9BBB6; border-color: black #B9BBB6 #B9BBB6; border-radius: 0px 0px 5px 5px; float: left; margin-right: 5px; min-width: 80px; text-align: center; background-color: #000000; font-weight: 700; font-family: 'Helvetica Neue', arial, helvetica, sans-serif; line-height: 18px; font-size: smaller">Trivia</span></a>
    </p>

<div style="clear:both;"></div>
<!------------------------ INFOBOX ---------------------->
<table style="border-radius: 5px; border-collapse: collapse; border: 1px solid #404040; color: #FFFFFF; width: 300px; float: right; margin: 0 0 15px 15px; padding: 2px; font-family:'Helvetica Neue', helvetica, arial, sans-serif; font-size:12px; background: #333333 url('https://trello-attachments.s3.amazonaws.com/5e4b2b51a0d4535270c8679d/5eb805cfa838f67ea59b1e00/d753b2ca73d80755f2c8f9f9992bc291/Infobox-Background.png')">
	<tbody>
	    <tr>
			<td colspan="2" style="padding:4px">
			    <div class="card rounded p-2" style="border-radius: 5px 5px 0px 0px; background: #000000; color:#FFFFFF; font-weight:bold; font-size: 17px; line-height:30px; text-align: center;">Character Name</div>
		   </td>
		</tr>
		<tr>
            <td colspan="2" style="text-align: center; border:none; padding: 0px 0px; margin: 0px 0px">
                        <img src="https://via.placeholder.com/300x350"/>
            </td>
        </tr>
		<tr>
		    <td colspan="2" style="padding:4px">
			    <div class="card rounded-0 p-2" style="background: #000000; color:#FFFFFF; font-weight:bold; line-height:20px; text-align: center; font-size: 16px">In-Game Information</div>
		   </td>
		</tr>
		<tr>
			<td style="font-weight:700;">Alias</td>
			<td>--</td>
		</tr>
		<tr>
			<td style="font-weight:700;">Occupation</td>
			<td><i>--</i></td>
		</tr>
		<tr>
			<td style="font-weight:700;">Affiliation</td>
			<td><i>--</i></td>
		</tr>
		<tr>
			<td style="font-weight:700;">Debut</td>
			<td><i>--</i></td>
		</tr>
		<tr>
		    <td colspan="2" style="padding:4px">
			    <div class="card rounded-0 p-2" style="background: #000000; color:#FFFFFF; font-weight:bold; line-height:20px; text-align: center; font-size: 16px">In-Game Description</div>
		   </td>
		</tr>
		<tr>
			<td style="font-weight:700;">Species</td>
			<td>--</td>
		</tr>
		<tr>
			<td style="font-weight:700;">Skin Color</td>
			<td>--</td>
		</tr>
		<tr>
			<td style="font-weight:700;">Eye Color</td>
			<td>--</td>
		</tr>
		<tr>
			<td style="font-weight:700;">Gender</td>
			<td>--</td>
		</tr>
		<tr>
			<td style="font-weight:700;">Animatronic Set</td>
			<td>--</td>
		</tr>
	</tbody>
</table>

<!-------------------QUOTE-------------------->
<div class="my-3" style="background:transparent; border-radius:6px; padding:0; margin:.5em 1em .5em 1em; width:auto; border:none">
    <div style="text-align:justify; margin-left:10px; margin-right:10px; color:white">
        <p>
            <span style="font-size:20px; font-weight:700;">“</span>
                <i>QUOTE HERE</i> 
            <span style="font-size:20px; font-weight:700;">”</span><br/>
                — <span class="small" style="font-weight:700;">Character Name, <i><a href="#" target="_BLANK" title="#" style="color:#DE6A6A;">Game Name</a></i></span>
        </p>
    </div>
</div>


<!-----------------------DESCRIPTION---------------------------->
<p class="my-3" style="color:#E6E6E6"><b>Character Name</b> is a fan character for the  <a href="https://freddy-fazbears-pizza.fandom.com/wiki/Five_Nights_at_Freddy%27s_(Franchise)" target="_BLANK" style="color:#DE6A6A"><em>Five Nights at Freddy's</em></a> series. (+ brief presentation here)</p>

<!-----------------------CONTENTS---------------------------->
<div class="row"><div class="col-md-5 mb-2">
    <div class="card bg-faded rounded-0 card-outline-default" style="border: 1px solid #8E8E8F; background-color: transparent; width: 270px; margin-left: 10px; font-size: 13px">
    <h6 class="p-2 mb-0 text-center" style="font-size: 13px; font-family: ; color:#E6E6E6">Contents <sup>[<a data-toggle="collapse" href="#tocshow" style="color: #DE6A6A">show</a>]</sup></h6>
        <div class="collapse p-2 pt-0 rounded-bottom" id="tocshow" style="color:#E6E6E6">
            1 <a href="#physical_appearance" style="color:#DE6A6A">Physical Appearance</a><br/>
            2 <a href="#personality" style="color:#DE6A6A">Personality</a><br/>
            3 <a href="#functionality" style="color:#DE6A6A">Functionality</a><br/>
            4 <a href="#appearances" style="color:#DE6A6A">Appearances</a>
        </div>
    </div>
</div></div>

<!-----------------------PHYSICAL APPEARANCE---------------------------->
<div class="profile-fields-title" style="margin-bottom:-5px;color:#E6E6E6"><a id="physical_appearance"><h2>Physical Appearance</h2></a></div>
<div class="card mb-1 border-top-0" style="height:1px; background: #8E8E8F"></div>
<p style="color:#E6E6E6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae tincidunt quam. Praesent lacinia nulla ipsum, ut molestie dolor malesuada in. Ut quis odio hendrerit, viverra neque at, rhoncus neque. Proin vel nisl non orci mollis elementum. Donec luctus gravida eros, et blandit ipsum faucibus sit amet. Nulla at ultricies ante, sodales vehicula sapien. Cras condimentum semper nulla, a sollicitudin mauris euismod a. Proin et posuere metus. Ut tempus diam a leo pulvinar porta. Pellentesque a pulvinar ante. Fusce a nisi sed purus suscipit porta quis vitae est. Ut vehicula, dolor quis egestas pellentesque, lacus ex varius tellus, ac gravida tellus turpis non dolor. Fusce pulvinar vitae risus in lobortis.</p>

<!-----------------------PERSONALITY---------------------------->
<div class="profile-fields-title" style="margin-bottom:-5px;color:#E6E6E6"><a id="personality" style="color:#E6E6E6"><h2>Personality</h2></a></div>
<div class="card mb-1 border-top-0" style="height:1px; background: #8E8E8F"></div>
<p style="color:#E6E6E6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae tincidunt quam. Praesent lacinia nulla ipsum, ut molestie dolor malesuada in. Ut quis odio hendrerit, viverra neque at, rhoncus neque. Proin vel nisl non orci mollis elementum. Donec luctus gravida eros, et blandit ipsum faucibus sit amet. Nulla at ultricies ante, sodales vehicula sapien. Cras condimentum semper nulla, a sollicitudin mauris euismod a. Proin et posuere metus. Ut tempus diam a leo pulvinar porta. Pellentesque a pulvinar ante. Fusce a nisi sed purus suscipit porta quis vitae est. Ut vehicula, dolor quis egestas pellentesque, lacus ex varius tellus, ac gravida tellus turpis non dolor. Fusce pulvinar vitae risus in lobortis.</p>

<!------------------ FUNCTIONALITY ---------------------->
<div class="profile-fields-title" style="margin-bottom:-5px;color:#E6E6E6"><a id="functionality" style="color:#E6E6E6"><h2>Functionality</h2></a></div>
<div class="card mb-1 border-top-0" style="height:1px; background: #8E8E8F"></div>
<p style="color:#E6E6E6">[History before the beginning of the manga/anime]<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae tincidunt quam. Praesent lacinia nulla ipsum, ut molestie dolor malesuada in. Ut quis odio hendrerit, viverra neque at, rhoncus neque. Proin vel nisl non orci mollis elementum. Donec luctus gravida eros, et blandit ipsum faucibus sit amet. Nulla at ultricies ante, sodales vehicula sapien. Cras condimentum semper nulla, a sollicitudin mauris euismod a. Proin et posuere metus. Ut tempus diam a leo pulvinar porta. Pellentesque a pulvinar ante. Fusce a nisi sed purus suscipit porta quis vitae est. Ut vehicula, dolor quis egestas pellentesque, lacus ex varius tellus, ac gravida tellus turpis non dolor. Fusce pulvinar vitae risus in lobortis.</p>

<!----------------------- APPEARANCES ---------------------------->
<div class="my-2 profile-fields-title" style="margin-bottom:-5px;color:#E6E6E6"><a id="appearances" style="color:#E6E6E6"><h2>Appearances</h2></a></div>
<div class="card mb-1 border-top-0" style="height:1px; background: #8E8E8F"></div>

<table class="my-3" align="center" border="1" style="text-align:center; border: 1px solid #8E8E8F; background: #17181A">
    <tbody>
        <tr>
            <th class="p-2" style="background: #101012; color:#E6E6E6 font-size:14px; line-height: 18px">Game Title</th>
            <th class="p-2" style="background: #101012; color:#E6E6E6 font-size:14px; line-height: 18px">Role</th>
            <th class="p-2" style="background: #101012; color:#E6E6E6 font-size:14px; line-height: 18px">Description</th>
        </tr>
        <tr>
            <td><i><a href="https://freddy-fazbears-pizza.fandom.com/wiki/Five_Nights_at_Freddy%27s" target="_BLANK" title="Five Nights at Freddy's" style="color: #DE6A6A">Five Nights at Freddy's</a></i></td>
            <td>Major character / Minor character <br/> Cameo / Mentioned-only.</td>
            <td>N/A</td>
        </tr>
        <tr>
            <td><i><a href="https://freddy-fazbears-pizza.fandom.com/wiki/Five_Nights_at_Freddy%27s_2" target="_BLANK" title="Five Nights at Freddy's 2" style="color: #DE6A6A">Five Nights at Freddy's 2</a></i></td>
            <td>Major character / Minor character <br/> Cameo / Mentioned-only.</td>
            <td>N/A</td>
        </tr>
        <tr>
            <td><i><a href="https://freddy-fazbears-pizza.fandom.com/wiki/Five_Nights_at_Freddy%27s_3" target="_BLANK" title="Five Nights at Freddy's 3" style="color: #DE6A6A">Five Nights at Freddy's 3</a></i></td>
            <td>Major character / Minor character <br/> Cameo / Mentioned-only.</td>
            <td>N/A</td>
        </tr>
        <tr>
            <td><i><a href="https://freddy-fazbears-pizza.fandom.com/wiki/Five_Nights_at_Freddy%27s_4" target="_BLANK" title="Five Nights at Freddy's 4" style="color: #DE6A6A">Five Nights at Freddy's 4</a></i></td>
            <td>Major character / Minor character <br/> Cameo / Mentioned-only.</td>
            <td>N/A</td>
        </tr>
        <tr>
            <td><i><a href="https://freddy-fazbears-pizza.fandom.com/wiki/Five_Nights_at_Freddy%27s:_Sister_Location" target="_BLANK" title="Five Nights at Freddy's: Sister Location" style="color: #DE6A6A">Five Nights at Freddy's: Sister Location</a></i></td>
            <td>Major character / Minor character <br/> Cameo / Mentioned-only.</td>
            <td>N/A</td>
        </tr>
        <tr>
            <td><i><a href="https://freddy-fazbears-pizza.fandom.com/wiki/Freddy_Fazbear%27s_Pizzeria_Simulator" target="_BLANK" title="Freddy Fazbear's Pizzeria Simulator" style="color: #DE6A6A">Freddy Fazbear's Pizzeria Simulator</a></i></td>
            <td>Major character / Minor character <br/> Cameo / Mentioned-only.</td>
            <td>N/A</td>
        </tr>
        <tr>
            <td><i><a href="https://freddy-fazbears-pizza.fandom.com/wiki/Ultimate_Custom_Night" target="_BLANK" title="Ultimate Custom Night" style="color: #DE6A6A">Ultimate Custom Night</a></i></td>
            <td>Major character / Minor character <br/> Cameo / Mentioned-only.</td>
            <td>N/A</td>
        </tr>
        <tr>
            <td><i><a href="https://freddy-fazbears-pizza.fandom.com/wiki/Five_Nights_at_Freddy%27s_VR:_Help_Wanted" target="_BLANK" title="Five Nights at Freddy's VR: Help Wanted" style="color: #DE6A6A">Five Nights at Freddy's VR: Help Wanted</a></i></td>
            <td>Major character / Minor character <br/> Cameo / Mentioned-only.</td>
            <td>N/A</td>
        </tr>
        <tr>
            <td><i><a href="https://freddy-fazbears-pizza.fandom.com/wiki/Five_Nights_at_Freddy%27s_AR:_Special_Delivery" target="_BLANK" title="Five Nights at Freddy's AR: Special Delivery" style="color: #DE6A6A">Five Nights at Freddy's AR: Special Delivery</a></i></td>
            <td>Major character / Minor character <br/> Cameo / Mentioned-only.</td>
            <td>N/A</td>
        </tr>
        <tr>
            <td><i><a href="https://freddy-fazbears-pizza.fandom.com/wiki/Five_Nights_at_Freddy%27s:_Security_Breach" target="_BLANK" title="Five Nights at Freddy's: Security Breach" style="color: #DE6A6A">Five Nights at Freddy's: Security Breach</a></i></td>
            <td>Major character / Minor character <br/> Cameo / Mentioned-only.</td>
            <td>N/A</td>
        </tr>
    </tbody>
</table>
 

</div></div>

    <p align="right" class="text-muted">
        <a href="https://toyhou.se/Hestiaria/characters/folder:1170930" target="_BLANK" class="text-muted" style="text-decoration:none"><i class="fas fa-code mr-1 mx-1"></i>Get the code here<i class="fas fa-code mr-1 mx-1"></i></a><br/>
        <a href="https://toyhou.se/Hestiaria" target="_BLANK" class="small text-muted" style="text-decoration:none"><i class="fas fa-cat mr-1 mx-1"></i>Layout by Hestiaria</a> •
        <a href="https://freddy-fazbears-pizza.fandom.com/wiki/Five_Nights_at_Freddy%27s_Wiki" target="_BLANK" class="small text-muted" style="text-decoration:none">Based on Five Nights at Freddy's Wiki</a>
    </p>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.