Jump to content
  • Sumertime Application

       (0 reviews)

    A simple application template with a cover photo. The recommended size for the cover photo is about 500 tall. 300 will show on desktop and more on mobile but can be adjusted with help.


    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 dictumst. Etiam elit quam, pellentesque eu iaculis id, pharetra nec nisl. Praesent non dictum sem, eu molestie risus. Duis sit amet quam odio. Maecenas at volutpat elit. Fusce eu pulvinar lacus. Praesent in velit bibendum, luctus enim ut, molestie 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, vestibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci est, hendrerit quis ultricies vel, tristique vestibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.

    Vivamus non condimentum tellus. Mauris rhoncus diam nisi, eget fermentum justo tempor at. Proin gravida enim at quam ultrices luctus. Ut pellentesque malesuada purus, sit amet cursus est consectetur nec. Nullam vitae sem iaculis, mollis lacus ut, blandit est. Maecenas ullamcorper erat non quam porttitor hendrerit. Vestibulum consequat porta consequat. Cras velit ante, porta in lobortis quis, faucibus quis nunc. Suspendisse a est 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 vestibulum, ipsum eu fermentum molestie, risus tellus rutrum mi, vitae malesuada dui urna nec ipsum. Sed sodales libero vel elit pellentesque interdum. Nullam nec hendrerit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 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 est sed, scelerisque tortor. Vivamus dictum mattis dui, quis feugiat magna sagittis blandit. Sed ac nisi eu lectus pulvinar tempor at malesuada enim. Vestibulum 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, vestibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci est, hendrerit quis ultricies vel, tristique vestibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.

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

    Template code

    <style>
    .stOuter h1, .stOuter h2, .stOuter h3, .stOuter h4, .stOuter h5 {
    	font-family: 'Fredericka the Great', cursive;
    	margin: 0 auto;
    text-align: center;
    }
    .stOuter {
    	max-width: 95%;
    	padding: 8px;
    	background: #ffe545;
    	font-family: 'Josefin Slab', serif;
    	font-size: 14px;
    	color: #fbf1b2;
    	margin: 0 auto;
    }
    .stOuter img {
    	max-width: 100%;
    }
    .stOuter a {
    	color: #68bdcc;
    }
    .stOuter ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
      .stHeader {
        background: #fab728;
        width: 100%;
        height: 300px;
        background: url(https://images.rpginitiative.com/uploads/monthly_2019_06/h170.jpg.156eece38e2a86fc96d70e36ec912a23.jpg) no-repeat center top;
        background-size: cover;
        padding-bottom: 2em;
        position: relative;
      }
    .stHeader_name {
    	background: #fab728;
    	font-size: 1.5em;
    	line-height: 1.5em;
    	color: #026474;
    	padding: 10px;
    	text-align: center;
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	right: 0;
    }
    
    .stContent {
    	background: #026474;
    	padding: 8px;
    	margin: 0;
    	max-width: 100%;
    }
    .stSidebar, .stMainInfo {
    	display: table-cell;
    	height: 100%;
    	vertical-align: top;
    	box-sizing: border-box;
    }
    .stSidebar {
    	max-width: 250px;
    	min-width: 250px;
    }
    .stSidebar_inner {
    	padding: 8px;
    }
    .stSidebar_inner strong {
    	font-family: 'Fredericka the Great', cursive;
    }
    .stSidebar_inner li {
    	margin-bottom: 5px;
    }
    .stMainInfo {
    	min-width: 100%;
    	padding: 10px;
    }
    .stMainInfo h4 {
    	font-size: 1.5em;
    }
    
    @media screen and (max-width: 767px) {
    		.stSidebar, .stMainInfo {
    			display: block;
    			height: 100%;
    			vertical-align: top;
    			box-sizing: border-box;
    		}
    		.stSidebar {
    			max-width: 100%;
    			min-width: 100%;
    			text-align: center;
    		}
    }
        
    
    
    </style>
    
    <div class='stOuter'>
    	<div class='stHeader' style='background-image: url(https://images.rpginitiative.com/uploads/monthly_2019_06/h170.jpg.156eece38e2a86fc96d70e36ec912a23.jpg);'>
    		<div class='stHeader_name'>
    			<h2>Character Name</h2>
    		</div>
    	</div>
    	<div class='stContent'>
    		<div class='stSidebar'>
    			<img src='https://via.placeholder.com/250x400' />
    			<div class='stSidebar_inner'>
    				<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='stMainInfo'>
    			<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 dictumst. Etiam elit quam, pellentesque eu iaculis id, pharetra nec nisl. Praesent non dictum sem, eu molestie risus. Duis sit amet quam odio. Maecenas at volutpat elit. Fusce eu pulvinar lacus. Praesent in velit bibendum, luctus enim ut, molestie 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, vestibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci est, hendrerit quis ultricies vel, tristique vestibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.</p>
    
    				<p>Vivamus non condimentum tellus. Mauris rhoncus diam nisi, eget fermentum justo tempor at. Proin gravida enim at quam ultrices luctus. Ut pellentesque malesuada purus, sit amet cursus est consectetur nec. Nullam vitae sem iaculis, mollis lacus ut, blandit est. Maecenas ullamcorper erat non quam porttitor hendrerit. Vestibulum consequat porta consequat. Cras velit ante, porta in lobortis quis, faucibus quis nunc. Suspendisse a est 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 vestibulum, ipsum eu fermentum molestie, risus tellus rutrum mi, vitae malesuada dui urna nec ipsum. Sed sodales libero vel elit pellentesque interdum. Nullam nec hendrerit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 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 est sed, scelerisque tortor. Vivamus dictum mattis dui, quis feugiat magna sagittis blandit. Sed ac nisi eu lectus pulvinar tempor at malesuada enim. Vestibulum 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, vestibulum sed metus. Integer placerat faucibus neque et ultricies. Duis orci est, hendrerit quis ultricies vel, tristique vestibulum dui. Sed tincidunt ligula elit, nec lacinia urna malesuada eu.</p>
    
    				<p>Vivamus non condimentum tellus. Mauris rhoncus diam nisi, eget fermentum justo tempor at. Proin gravida enim at quam ultrices luctus. Ut pellentesque malesuada purus, sit amet cursus est consectetur nec. Nullam vitae sem iaculis, mollis lacus ut, blandit est. Maecenas ullamcorper erat non quam porttitor hendrerit. Vestibulum consequat porta consequat. Cras velit ante, porta in lobortis quis, faucibus quis nunc. Suspendisse a est 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">
    Morrigan

    Edited by Morrigan

    • Like 1



    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.