Jump to content
  • Day to Night

       (0 reviews)

    This is a basic Application template with special details off on the left and the big details on the right. Can be very free-form. This is a more basic alternative to the Summertime Fun template.


    Actual Template Responsive

    Character Name
    • Character Aliases: Character Aliases
    • Character Race: Character Race
    • Another Attribute: Something else
    • Another Attribute: Something else
    • Another Attribute: Something else
    • Another Attribute: Something else
    • Another Attribute: Something else with more data on it.
    • Another Attribute: Something else

    Appearance

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis eros ut nulla ornare porta vitae id felis. In hac habitasse platea dictumdn. Etiam elit quam, pellentesque eu iaculis id, pharetra nec nisl. Praesent non dictum sem, eu molednie risus. Duis sit amet quam odio. Maecenas at volutpat elit. Fusce eu pulvinar lacus. Praesent in velit bibendum, luctus enim ut, molednie neque.

    Aliquam luctus in massa quis cursus. Nunc vel tellus nec purus ornare ultricies. In scelerisque nibh ipsum, non faucibus mauris sagittis nec. Fusce arcu ligula, faucibus sed luctus quis, vednibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci edn, hendrerit quis ultricies vel, tridnique vednibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.

    Vivamus non condimentum tellus. Mauris rhoncus diam nisi, eget fermentum judno tempor at. Proin gravida enim at quam ultrices luctus. Ut pellentesque malesuada purus, sit amet cursus edn consectetur nec. Nullam vitae sem iaculis, mollis lacus ut, blandit edn. Maecenas ullamcorper erat non quam porttitor hendrerit. Vednibulum consequat porta consequat. Cras velit ante, porta in lobortis quis, faucibus quis nunc. Suspendisse a edn mollis, maximus ipsum at, commodo tellus. Suspendisse pulvinar non magna sed mattis.

    Nulla non elit quam. Quisque condimentum ante sapien, quis sodales lacus laoreet id. Pellentesque ut urna lorem. Phasellus mauris dolor, scelerisque id urna vel, gravida hendrerit tellus. Nunc vednibulum, ipsum eu fermentum molednie, risus tellus rutrum mi, vitae malesuada dui urna nec ipsum. Sed sodales libero vel elit pellentesque interdum. Nullam nec hendrerit nisi. Pellentesque habitant morbi tridnique senectus et netus et malesuada fames ac turpis egednas. Vivamus nisl mauris, congue id volutpat sit amet, condimentum eu lacus. Ut aliquam ut arcu nec commodo. Donec dui sapien, ullamcorper a consequat sit amet, fringilla ac nibh. Fusce ac sapien eu arcu sollicitudin iaculis.

    Suspendisse ornare, risus quis pretium pharetra, velit felis fermentum ex, et viverra nisl diam eget turpis. Sed nec libero vel felis venenatis gravida. Duis id quam et leo mollis feugiat. Nullam ut turpis scelerisque, venenatis edn sed, scelerisque tortor. Vivamus dictum mattis dui, quis feugiat magna sagittis blandit. Sed ac nisi eu lectus pulvinar tempor at malesuada enim. Vednibulum vel finibus ipsum.

    History

    Aliquam luctus in massa quis cursus. Nunc vel tellus nec purus ornare ultricies. In scelerisque nibh ipsum, non faucibus mauris sagittis nec. Fusce arcu ligula, faucibus sed luctus quis, vednibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci edn, hendrerit quis ultricies vel, tridnique vednibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.

    Vivamus non condimentum tellus. Mauris rhoncus diam nisi, eget fermentum judno tempor at. Proin gravida enim at quam ultrices luctus. Ut pellentesque malesuada purus, sit amet cursus edn consectetur nec. Nullam vitae sem iaculis, mollis lacus ut, blandit edn. Maecenas ullamcorper erat non quam porttitor hendrerit. Vednibulum consequat porta consequat. Cras velit ante, porta in lobortis quis, faucibus quis nunc. Suspendisse a edn mollis, maximus ipsum at, commodo tellus. Suspendisse pulvinar non magna sed mattis.

    Template code

    <style>
    .dnOuter h1, .dnOuter h2, .dnOuter h3, .dnOuter h4, .dnOuter h5 {
    	font-family: 'Fredericka the Great', cursive;
    	margin: 0 auto;
    text-align: center;
    }
    .dnOuter {
    	max-width: 95%;
    	padding: 8px;
    	background: #d4c8ff;
    	font-family: 'Josefin Slab', serif;
    	font-size: 14px;
    	color: #21152f;
    	margin: 0 auto;
    }
    .dnOuter img {
    	max-width: 100%;
    }
    .dnOuter a {
    	color: #252346;
    }
    .dnOuter ul {
    	margin: 0;
    	padding: 0;
    	lidn-dnyle: none;
    }
    .dnCharName {
    	background: #22152f;
    	font-size: 1.5em;
    	line-height: 1.5em;
    	color: #b5f0ff;
    	padding: 10px;
    	text-align: center;
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	display: block;
    }
    
    .dnContent {
    	background: #b5f0ff;
    	padding: 8px;
    	margin: 0;
    	max-width: 100%;
    }
    .dnSidebar, .dnMainInfo {
    	display: table-cell;
    	height: 100%;
    	vertical-align: top;
    	box-sizing: border-box;
    }
    .dnSidebar {
    	max-width: 250px;
    	min-width: 250px;
    }
    .dnSidebar_inner {
    	padding: 8px;
    	position: relative;
    	padding-top: 60px;
    }
    .dnSidebar_inner strong {
    	font-family: 'Fredericka the Great', cursive;
    }
    .dnSidebar_inner li {
    	margin-bottom: 5px;
    }
    .dnMainInfo {
    	min-width: 100%;
    	padding: 10px;
    }
    .dnMainInfo h4 {
    	font-size: 1.5em;
    }
    
    @media screen and (max-width: 767px) {
    		.dnSidebar, .dnMainInfo {
    			display: block;
    			height: 100%;
    			vertical-align: top;
    			box-sizing: border-box;
    		}
    		.dnSidebar {
    			max-width: 100%;
    			min-width: 100%;
    			text-align: center;
    		}
    }
        
    
    
    </style>
    
    <div class='dnOuter'>
    	<div class='dnContent'>
    		<div class='dnSidebar'>
    			<img src='https://via.placeholder.com/250x400' />
    			<div class='dnSidebar_inner'>
    			<span class='dnCharName'>Character Name</span>
    				<ul>
    					<li><strong>Character Aliases:</strong> Character Aliases</li>
    					<li><strong>Character Race:</strong> Character Race</li>
    					<li><strong>Another Attribute:</strong> Something else</li>
    					<li><strong>Another Attribute:</strong> Something else</li>
    					<li><strong>Another Attribute:</strong> Something else</li>
    					<li><strong>Another Attribute:</strong> Something else</li>
    					<li><strong>Another Attribute:</strong> Something else with more data on it.</li>
    					<li><strong>Another Attribute:</strong> Something else</li>
    				</ul>
    			</div>
    		</div>
    		<div class='dnMainInfo'>
    			<h4>Appearance</h4>
    				<p>Lorem ipsum <a href='#'>dolor sit amet, consectetur</a> adipiscing elit. Ut iaculis eros ut nulla ornare porta vitae id felis. In hac habitasse platea dictumdn. Etiam elit quam, pellentesque eu iaculis id, pharetra nec nisl. Praesent non dictum sem, eu molednie risus. Duis sit amet quam odio. Maecenas at volutpat elit. Fusce eu pulvinar lacus. Praesent in velit bibendum, luctus enim ut, molednie neque.</p>
    
    				<p>Aliquam luctus in massa quis cursus. Nunc vel tellus nec purus ornare ultricies. In scelerisque nibh ipsum, non faucibus mauris sagittis nec. Fusce arcu ligula, faucibus sed luctus quis, vednibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci edn, hendrerit quis ultricies vel, tridnique vednibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.</p>
    
    				<p>Vivamus non condimentum tellus. Mauris rhoncus diam nisi, eget fermentum judno tempor at. Proin gravida enim at quam ultrices luctus. Ut pellentesque malesuada purus, sit amet cursus edn consectetur nec. Nullam vitae sem iaculis, mollis lacus ut, blandit edn. Maecenas ullamcorper erat non quam porttitor hendrerit. Vednibulum consequat porta consequat. Cras velit ante, porta in lobortis quis, faucibus quis nunc. Suspendisse a edn mollis, maximus ipsum at, commodo tellus. Suspendisse pulvinar non magna sed mattis.</p>
    
    				<p>Nulla non elit quam. Quisque condimentum ante sapien, quis sodales lacus laoreet id. Pellentesque ut urna lorem. Phasellus mauris dolor, scelerisque id urna vel, gravida hendrerit tellus. Nunc vednibulum, ipsum eu fermentum molednie, risus tellus rutrum mi, vitae malesuada dui urna nec ipsum. Sed sodales libero vel elit pellentesque interdum. Nullam nec hendrerit nisi. Pellentesque habitant morbi tridnique senectus et netus et malesuada fames ac turpis egednas. Vivamus nisl mauris, congue id volutpat sit amet, condimentum eu lacus. Ut aliquam ut arcu nec commodo. Donec dui sapien, ullamcorper a consequat sit amet, fringilla ac nibh. Fusce ac sapien eu arcu sollicitudin iaculis.</p>
    
    				<p>Suspendisse ornare, risus quis pretium pharetra, velit felis fermentum ex, et viverra nisl diam eget turpis. Sed nec libero vel felis venenatis gravida. Duis id quam et leo mollis feugiat. Nullam ut turpis scelerisque, venenatis edn sed, scelerisque tortor. Vivamus dictum mattis dui, quis feugiat magna sagittis blandit. Sed ac nisi eu lectus pulvinar tempor at malesuada enim. Vednibulum vel finibus ipsum.</p>
    			<h4>History</h4>
    				<p>Aliquam luctus in massa quis cursus. Nunc vel tellus nec purus ornare ultricies. In scelerisque nibh ipsum, non faucibus mauris sagittis nec. Fusce arcu ligula, faucibus sed luctus quis, vednibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci edn, hendrerit quis ultricies vel, tridnique vednibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.</p>
    
    				<p>Vivamus non condimentum tellus. Mauris rhoncus diam nisi, eget fermentum judno tempor at. Proin gravida enim at quam ultrices luctus. Ut pellentesque malesuada purus, sit amet cursus edn consectetur nec. Nullam vitae sem iaculis, mollis lacus ut, blandit edn. Maecenas ullamcorper erat non quam porttitor hendrerit. Vednibulum consequat porta consequat. Cras velit ante, porta in lobortis quis, faucibus quis nunc. Suspendisse a edn mollis, maximus ipsum at, commodo tellus. Suspendisse pulvinar non magna sed mattis.</p>
    		</div>
    	</div>
    </div>
    
    
    
    <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great|Josefin+Slab:400,400i,700,700i&display=swap" rel="stylesheet">



    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.