Reflection Challenge Post Template

<!--  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>