Jump to content
  • Reflection Challenge Post Template

       (1 review)

    Here is a simple dohtml posting template for the reflection post template challenge.  The top box and the image border use animated gifs, but these can easily be replaced with still pictures.  The reflection fades best with a dark background with this particular gif, but will fade into any background (I included the full tempate on a light background, but the image next to it shows how it fades on the darker background).

     


    Actual Template Not Responsive

    Title
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at interdum justo. Curabitur elementum erat in scelerisque rhoncus. Curabitur rutrum diam a rhoncus faucibus. Curabitur sit amet molestie nunc, at scelerisque felis. Sed egestas risus vel facilisis dignissim. Nam ultrices elit elit, at vulputate urna egestas nec. Morbi eleifend lorem nec lectus feugiat, eu dictum leo facilisis. Duis efficitur magna nec viverra volutpat. Integer eleifend egestas pellentesque. Mauris eu lectus eu neque aliquet placerat. Nulla facilisi. Proin rhoncus libero ac hendrerit vestibulum. Proin blandit orci et lectus molestie fringilla.

    Curabitur lobortis mauris dolor, sed imperdiet ipsum ultricies sit amet. Cras sodales tincidunt augue id dictum. Aenean bibendum venenatis mattis. Sed condimentum est rutrum erat sagittis elementum vitae ut justo. Morbi nisl nulla, condimentum sed libero in, rutrum molestie diam. Cras porttitor sit amet libero ut tincidunt. Vestibulum suscipit sapien a felis aliquet, ut lacinia felis posuere. Cras interdum, urna suscipit consequat consequat, odio risus iaculis metus, at fermentum enim erat in libero. Cras non elit imperdiet nisl sagittis aliquet.

    Curabitur lobortis mauris dolor, sed imperdiet ipsum ultricies sit amet. Cras sodales tincidunt augue id dictum. Aenean bibendum venenatis mattis. Sed condimentum est rutrum erat sagittis elementum vitae ut justo. Morbi nisl nulla, condimentum sed libero in, rutrum molestie diam. Cras porttitor sit amet libero ut tincidunt. Vestibulum suscipit sapien a felis aliquet, ut lacinia felis posuere. Cras interdum, urna suscipit consequat consequat, odio risus iaculis metus, at fermentum enim erat in libero. Cras non elit imperdiet nisl sagittis aliquet.

    Template code

    <!--  I based the colors for the central box around the images, but they are quite easy to adjust by switching out the background-color in topbox2 for one that suits the images you use.  You can place an image wherever you like within the middle box or multiple images.  They are floated to the right, but you can easily switch to the left by altering the code to float: left.  Keep the title in <b> </b> to have the correct formatting.  -->
    
    <style>
    	@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
    	@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');
    
    	.topbox1 {
    		width: 400px;
    		background-color: #000;
    		background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/large.reflectchallengegifimage.gif.29a63221249c58eba2ae4741cc854aa6.gif);
    		border-radius: 10px 10px 0px 0px;
    		border-bottom: 1px solid #0b3a3e;
    		color: #fff;
    		padding: 15px;
    		font-family: 'Amatic SC', cursive;
    text-align: justify;
    	}
    
    .topbox1 b {
    		color: #0a91ac;
    		font-weight: bolder;
    	    font-size: 250%;
    text-shadow: 2px 2px 8px #000;
    		
    	}
    
    	.topbox2 {
    		width: 400px;
            background-color: #0a191e;
    		color: #afc2c3;
    		padding: 5px;
    		border-bottom: 1px solid #0b3a3e;
    font-family: 'Nanum Gothic', sans-serif;
    text-align: justify;
    	}
    
    .topbox2 img {
    border: 10px solid transparent;
        margin: 10px;
        -webkit-border-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/large.reflectchallengegifimage.gif.29a63221249c58eba2ae4741cc854aa6.gif) 30 stretch; 
    	/* Safari 3.1-5 */
        -o-border-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/large.reflectchallengegifimage.gif.29a63221249c58eba2ae4741cc854aa6.gif) 30 stretch; 
    	/* Opera 11-12.1 */
        border-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/large.reflectchallengegifimage.gif.29a63221249c58eba2ae4741cc854aa6.gif) 30 stretch;
    clear: left;
    width: 175px;
    float: right;
    }
    
    
    
    	.reflectingbox {
    		width: 400px;
    min-height:100px;
    		background-color: #000;
    		color: #fff;
    		padding: 10px;
    margin-bottom: 200px;
    		background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/large.reflectchallengeimage.png.85fd5233238945810b6431baf67e13f8.png);
    		box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));
    		-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));
    	}
    
    .reflectingbox a {
    color: #013d44;
    font-style: italic;
    font-size: 75%;
    }
    	
    	</style>
    	<div class="topbox1">
    		<b>Title</b>
    	</div>
    	<div class="topbox2">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at interdum justo. Curabitur elementum erat in scelerisque rhoncus. Curabitur rutrum diam a rhoncus faucibus. Curabitur sit amet molestie nunc, at scelerisque felis. Sed egestas risus vel facilisis dignissim. Nam ultrices elit elit, at vulputate urna egestas nec. Morbi eleifend lorem nec lectus feugiat, eu dictum leo facilisis. Duis efficitur magna nec viverra volutpat. Integer eleifend egestas pellentesque. Mauris eu lectus eu neque aliquet placerat. Nulla facilisi. Proin rhoncus libero ac hendrerit vestibulum. Proin blandit orci et lectus molestie fringilla.
    	<br><br><img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large.caveimagereflect.jpeg.28fc710fbf96ef1c09d21e8df0d74b41.jpeg">
    	Curabitur lobortis mauris dolor, sed imperdiet ipsum ultricies sit amet. Cras sodales tincidunt augue id dictum. Aenean bibendum venenatis mattis. Sed condimentum est rutrum erat sagittis elementum vitae ut justo. Morbi nisl nulla, condimentum sed libero in, rutrum molestie diam. Cras porttitor sit amet libero ut tincidunt. Vestibulum suscipit sapien a felis aliquet, ut lacinia felis posuere. Cras interdum, urna suscipit consequat consequat, odio risus iaculis metus, at fermentum enim erat in libero. Cras non elit imperdiet nisl sagittis aliquet.
    	<br><br>
    	Curabitur lobortis mauris dolor, sed imperdiet ipsum ultricies sit amet. Cras sodales tincidunt augue id dictum. Aenean bibendum venenatis mattis. Sed condimentum est rutrum erat sagittis elementum vitae ut justo. Morbi nisl nulla, condimentum sed libero in, rutrum molestie diam. Cras porttitor sit amet libero ut tincidunt. Vestibulum suscipit sapien a felis aliquet, ut lacinia felis posuere. Cras interdum, urna suscipit consequat consequat, odio risus iaculis metus, at fermentum enim erat in libero. Cras non elit imperdiet nisl sagittis aliquet.
    	</div>
    	<div class="reflectingbox"><a href="https://rpginitiative.com/profile/2528-the-rebel/"> © The Rebel</a></div>



    User Feedback


×
×
  • 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.