Jump to content
Saying Goodbye to Community

  • Friends Not Food

       (1 review)

    A shark/underwater themed layout. Most likely to be used for an application, but could easily be adapted to a mini-profile. It has a hover button on the bottom to display more content.

    Actual Template Responsive

    Hover For More
    Imma Shark, Baby
    Species: Shark, duh.
    Best Shark In the Ocean!
    482Posts
    25Topics
    22 yearsAge
    MaleGender
    BloodLikes
    Being on landDislikes
    I am a nice shark, not a mindless eating machine. If I am to change this image, I must first change myself. Fish are friends, not food. - Bruce
    Quagga mussel cat shark is batfish frogfish. . Peppered moray clownfish hawkfish at seahorse hammerhead a funny snake eel. Wobbegong shark blue whale gold damsel faucet snail, in snake eel sea coral grouper. The crackin crazy Neon goby nurse shark moon. Quagga musse.

    Grey whale mermaid appeared. Fire fish pipefish blue tang, frogfish bicolor blenny at, quagga mussel and funny bannerfish. Milk shark swim Asian clam soldierfish. Banana wrasse in yellow pseudochromis non mermaid parrotfish mystery snail. In seahorse banded eel, butter hamlet are butterflyfish blue tang, wabas.
    Pigtoe sea coral king crab heelsplitter, in painted comber Banded eel bicolor blenny. Bursa trigger funny filefish, a Snaggletooth shark lobster in. Spotted sweetlips loving in catshark pebblesnail at seabass with faucet snail. Yellow pseudochromis weasel shark shadow, darkness in deap ocean an, Motionless Wabash pigtoe Full moon. Fishies asian cla.

    Painted comber, king crab a elktoe a, grey whale seahorse. The crackin crazy Neon goby nurse shark moon. Hippo tang gold damsel peaclam.

    Template code

    <style>
	/* Template by Memoria at The Initiative.
	   Last updated 07.20.18.
	   Please do not remove credits! */
	
	/* Friends Not Food - Overall Styles */
	.fnf {
		width: auto;
		max-width: 375px; /* max template width */
		margin: 0 auto; /*remove to take away centering */
		font-family: arial, sans-serif; /*default font family */
		font-size: 12px;
		line-height: 18px;
		color: #ffffff; /*default font color */
	}
	.fnf, .fnf * {
		box-sizing: border-box;
	}
	.fnf .fnf-name, .fnf .fnf-title, .fnf .fnf-block > span, .fnf .fnf-hover-button {
		font-family: "Arial Narrow", arial, sans-serif; /*title font family */
		font-weight: bold;
		text-transform: uppercase;
	}
	.fnf .fnf-name, .fnf .fnf-hover-button {
		font-size: 18px;
		text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
	}
	.fnf .fnf-information, .fnf .fnf-more {
		padding: 20px;
		-webkit-transition: opacity 1.5s ease-in-out;
		transition: opacity 1.5s ease-in-out;
	}

	/* Friends Not Food - Wrapper */
	.fnf .fnf-wrapper {
		background: url('//images.rpginitiative.com/uploads/monthly_2018_08/large.shark-template-01.jpg.b00d4cb9cba6d95c8f32012f0fb2c33a.jpg') no-repeat 0 0; /*background image */
		background-size: cover;
		padding: 0 0 60px 0;
		position: relative;
	}

	/* Friends Not Food - Blocks */
	.fnf .fnf-block {
		background: rgba(23, 71, 109, 0.6); /*block colors - keep rgba for transparency */
		padding: 5px 10px;
	}

	/* Friends Not Food - Top Bar */
	.fnf .fnf-top-bar {
		width: auto;
		background: #17476d; /*header background color */
		margin: -20px -20px 0 -20px;
		padding: 20px 180px 20px 20px;
		position: relative;
	}
	.fnf .fnf-top-bar .fnf-name, .fnf .fnf-top-bar .fnf-species {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fnf .fnf-top-bar .fnf-name {
		margin: 45px 0 0 0;
	}
	.fnf .fnf-top-bar .fnf-species {
		margin: 5px 0 0 0;
		font-size: 14px;
	}
	.fnf .fnf-top-bar .fnf-avatar {
		border-radius: 100%;
		overflow: hidden;
		width: 125px;
		height: 125px;
		position: absolute;
		bottom: -70px;
		right: 20px;
		line-height: 0;
		border: 10px solid #17476d; /*avatar border color */
	}
	.fnf .fnf-top-bar .fnf-avatar img {
		max-width: 100%;
	}

	/* Friends Not Food - Profile */
	.fnf .fnf-profile {
		margin: 90px 0 0 0;
	}
	.fnf .fnf-profile .fnf-title, .fnf .fnf-profile .fnf-grid {
		text-align: center;
	}
	.fnf .fnf-profile .fnf-block span {
		display: block;
		margin: 2px 0 0 0;
	}
	.fnf .fnf-profile .fnf-title {
		margin: 0 0 4% 0;
		font-size: 14px;
	}
	.fnf .fnf-profile .fnf-grid {
		margin: 0 -2%;
	}
	.fnf .fnf-profile .fnf-grid:before, .fnf .fnf-profile .fnf-grid:after {
		content: '';
		display: table;
		zoom: 1;
	}
	.fnf .fnf-profile .fnf-grid:after {
		clear: both;
	}
	.fnf .fnf-profile .fnf-grid .fnf-column {
		float: left;
		width: 46%;
		margin: 0 2% 4% 2%;
	}
	.fnf .fnf-profile .fnf-quote span {
		text-align: right;
	}

	/* Friends Not Food - More Information */
	.fnf .fnf-more {
		position: absolute;
		top: 0;
		bottom: 60px;
		left: 0;
		right: 0;
		z-index: 1;
		margin: auto;
		opacity: 0;
		visibility: hidden;
	}
	.fnf .fnf-more .fnf-block {
		height: 48%;
		overflow: hidden;
	}
	.fnf .fnf-more .fnf-divider {
		height: 4%;
	}

	/* Friends Not Food - Hover Button & Animation */
	.fnf .fnf-hover-button {
		text-align: center;
		background: #17476d; /*button background color */
		padding: 0 20px;
		margin: 20px -20px -20px -20px;
		line-height: 60px;
		cursor: pointer;
		position: absolute;
		bottom: 20px;
		left: 20px;
		right: 20px;
		z-index: 1;
	}
	.fnf .fnf-hover-button:hover ~ .fnf-information {
		opacity: 0;
		visibility: hidden;
	}
	.fnf .fnf-hover-button:hover ~ .fnf-more {
		visibility: visible;
		opacity: 1;
		z-index: 2;
	}

	/* Friends Not Food - Responsive */
	@media only screen and (max-width: 420px) {
		.fnf .fnf-top-bar {
			padding: 20px 20px 60px 20px;
			text-align: center;
		}
		.fnf .fnf-top-bar .fnf-name {
			margin-top: 0;
		}
		.fnf .fnf-top-bar .fnf-avatar {
			bottom: -50px;
			left: 0;
			right: 0;
			margin: auto;
			width: 100px;
			height: 100px;
			border-width: 5px;
		}
		.fnf .fnf-profile {
			margin-top: 70px;
		}
		.fnf .fnf-profile .fnf-grid .fnf-column {
			float: none;
			width: auto;
		}
	}
</style>    
<div class="fnf">
   <div class="fnf-wrapper">
	   <div class="fnf-hover-button">Hover For More</div>
	   <div class="fnf-information">
		   <div class="fnf-top-bar">
			   <div class="fnf-name">Imma Shark, Baby</div>
			   <div class="fnf-species"><strong>Species:</strong> Shark, duh.</div>
			   <div class="fnf-avatar">
				   <img src="//images.rpginitiative.com/uploads/monthly_2018_08/large.shark-template-02.gif.beb3b632fc3cc179eec70a2f7d76709e.gif" />
			   </div>
		   </div>
		   <div class="fnf-profile">
			   <div class="fnf-title fnf-block">Best Shark In the Ocean!</div>
			   <div class="fnf-grid">
				   <div class="fnf-column fnf-block">
					   482<span>Posts</span>
				   </div>
				   <div class="fnf-column fnf-block">
					   25<span>Topics</span>
				   </div>
				   <div class="fnf-column fnf-block">
					   22 years<span>Age</span>
				   </div>
				   <div class="fnf-column fnf-block">
					   Male<span>Gender</span>
				   </div>
				   <div class="fnf-column fnf-block">
					   Blood<span>Likes</span>
				   </div>
				   <div class="fnf-column fnf-block">
					   Being on land<span>Dislikes</span>
				   </div>
			   </div>
			   <div class="fnf-quote fnf-block">
				   I am a nice shark, not a mindless eating machine. If I am to change this image, I must first change myself. Fish are friends, not food.
				   <span>- Bruce</span>
			   </div>
		   </div>
	   </div>
	   <div class="fnf-more">
		   <div class="fnf-block">
			   Quagga mussel cat shark is batfish frogfish. . Peppered moray clownfish hawkfish at seahorse hammerhead a funny snake eel. Wobbegong shark blue whale gold damsel faucet snail, in snake eel sea coral grouper. The crackin crazy Neon goby nurse shark moon. Quagga musse.
			   <br /><br />
			   Grey whale mermaid appeared. Fire fish pipefish blue tang, frogfish bicolor blenny at, quagga mussel and funny bannerfish. Milk shark swim Asian clam soldierfish. Banana wrasse in yellow pseudochromis non mermaid parrotfish mystery snail. In seahorse banded eel, butter hamlet are butterflyfish blue tang, wabas.
		   </div>
		   <div class="fnf-divider"></div>
		   <div class="fnf-block">
			   Pigtoe sea coral king crab heelsplitter, in painted comber Banded eel bicolor blenny. Bursa trigger funny filefish, a Snaggletooth shark lobster in. Spotted sweetlips loving in catshark pebblesnail at seabass with faucet snail. Yellow pseudochromis weasel shark shadow, darkness in deap ocean an, Motionless Wabash pigtoe Full moon. Fishies asian cla.
			   <br /><br />
			   Painted comber, king crab a elktoe a, grey whale seahorse. The crackin crazy Neon goby nurse shark moon. Hippo tang gold damsel peaclam.
		   </div>
	   </div>
   </div>
</div>
    Go to codes Post Templates

    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
    thenoisyflower

    thenoisyflower 7

       1 of 1 member found this review helpful 1 / 1 member

    This is beautiful, and so funny. I particularly love the gif; I'm having flash backs to Discovery Channel's Shark Week specials. It's clean, readable, and I particularly like that you put the category headers at the bottom of each of the boxes rather than the top. The color distribution is great and the hover feature is quite handy. I particularly like that the access to it doesn't cover the whole profile, just the bar at the bottom.

    Share this review

    Link to review

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