Simple Harvey Dent / Vote Dent Layout

Tags: batman, dc, harvey dent, simple, easy

Description:

No need to credit / say if using. Very simple as just made it to remind myself how css works.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by michael ♱   (https://layouts.spacehey.com/layout?id=80863) -->

<style>

/* This part is for the banner at the top of the page. */

main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image: url('https://www.hollywoodchicago.com/sites/default/files/banner6.jpg');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}
</style>

<style>
/* background of the page (i.e. left and right of your profile) */
body {
  background-color: white;
}

/* your profile itself. main does not encompass the header/footer, which I prefer to leave alone */
main {
  background-color: white;
  color: #ccc;
}

/* links within main. --green is a variable from spacehey's own CSS */
main a {
  color: var(--red);
}

/* color/style of borders around tables on the left */
.profile .contact, .profile .table-section, .profile .url-info {
  border: 1px solid red;
}

/* colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background-color: red;
  color: white;
}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
  background-color: #333;
  color: white;
}

/* headings on the right */
.profile .blurbs .heading, .profile .friends .heading {
  background-color: #444;
  color: #bbb;
}
</style>

<style>
/* These are the icons for your contact section */
.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* Add to Friends */
	content: "🇺🇸"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "🪙"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🇺🇸"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "🪙"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "🇺🇸"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🪙"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "🇺🇸"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🪙"
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 0 of 0 comments ( View all | Add Comment )