FABLED.DAY - adding attractive quotations to your site

Long Quotations

You can view a live demonstration of this snippet on Codepen, and even play with it a bit. The version I've provided fits a very sedate aesthetic but should be easily customizable for yours...

When I came to neocities, it was to create a sort of reminiscence website about a group/cult and my involvement with it. It’s called the Aristasian Reminiscence Project (touches on tough topics - not for minors). The sheer volume of text I had written - and quotations from primary sources I had to insert - made things complicated, particularly within the confines of HTML and CSS.

Perhaps you’ve got a similar problem, or just want to highlight large passages of text (rather than the small ones highlighted in the pullquotes snippet) to catch eyes. Either way, I thought I’d show (one amongst many ways) how to set up your CSS and HTML such that large passages of text within the documents are

Naturally, HTML has a native structure for a <blockquote> for us to work with, though, so we needn’t fiddle with a bunch of random <div>s. Here, as was the case in the pullquotes snippet, I’m using the <small> tag at the end of the <blockquote> element to hold the quote source.

I’ve added a (significantly larger) pale quotation mark silhouetted against the background of the quote itself in lieu of the two small ones. I think it looks nice, but would probably look just as good with a different sort of color scheme, provided it wasn’t too contrasting. I may do a version more suitable to contrast.

CSS

You'll probably want to change the colors and play with things a bit, since your site likely looks completely different than the demonstration here, which shows exactly what these colors look like. You may, for example, want to change the size or font of the giant quotation mark, or remove it entirely. I think it looks best with Trebuchet MS out of all (main) websafe fonts, but that's just me. I expect you'd use your own font within the actual blockquote text.

/* heart of the matter - styling the blockquote itself. the below affects the appearance of everything within the box containing the quote */
	blockquote.quoth {
		border-radius: 1em;
		padding-top: 0.5em;
		background-color: #e1d2a6;
		width: 80%; /* here, the width has been set to 80% of the available space. if you, perchance, would like a (slightly) smaller or larger quote, change this, of course - the quote will remain centered on the page. it is possible to float it to the left or right by adding a different width, alongside float:<left/right> in the CSS.*/
		margin: 0.5em auto; /* if you're floating the quote to the left or right, change this to margin:0.5em; you may also want to play with the margin-right and margin-left value to align it with the side of the page better depending on where it is floated */
		position: relative;
	}
	/* this creates the curled quotation mark in the corner of the box; i've found this works best if it stays with the (websafe) font trebuchet ms, and it is sized properly for that. */
	blockquote.quoth::before {
		content: "“";
		font-family: trebuchet ms;
		position: absolute;
		opacity: 0.2; /* as you could probably tell, the quotation mark itself isn't entirely opaque. */
		font-size: 20em;
		top: -0.2em;
		left: 0em;
	}
	
	/* presumably a long quote *will* have paragraphs, so you'd better provide some formatting for them! */
	blockquote.quoth p {
		margin: 1em;
	}
	
	/* the below *small* tag actually styles the bottom bar of the quote which displays the source of the words... */
	blockquote.quoth small {
		display: block;
		background: #c2a77c;
		padding: 0.4em 0;
		width: 100%;
		border-radius: 0 0 1em 1em;
		color: #f0e8bb;
		margin: 0 auto 0 0;
		text-align: center;
	}
	
	/* since the colors and such used in your large blockquotes are no doubt unique, you might want to change the link colors within them, too, including those in that *small* tag we're using as the citation, just in case it clashes with your theme */
	blockquote.quoth small a,
	blockquote.quoth a {
		color: #f0e8bb;
		text-decoration: underline solid;
		transition: ease 1s all;
	}
	
	blockquote.quoth a {
		color: #ad6b00;
	}
	
	blockquote.quoth a:hover {
		color: #ad6b00;
		background-color: #f0e8bb;
    }

HTML

Rather straightforward, isn't it? the only really custom feature is the addition of the <small> tag as a way of showing the source of the pullquote, and perhaps even linking to it. The filler quote comes from Marcus Aurelius's Meditations for no reason at all, really. It was just available. In this example, the quotation is 80% of the page, as indicated in the CSS, and the text doesn't wrap around it; it's centered. All of that is controlled within the CSS. Be mindful that the <small> tag is here used to denote the source of the quote. If you, for whatever reason, don't need that - feel free to remove it, no harm done, just add padding on the bottom to compensate!

<!-- this is a blockquote, used as it is intended for once -->
    <blockquote class="quoth">
    <!-- and below, you will place your quote. please use paragraphs properly - it looks rather odd without them. the filler quote is from Marcus Aurelius's *Meditations*, as you can see... -->
    <p>Consider how quickly all things are dissolved and resolved: the bodies and substances themselves, into the matter and substance of the world: and their memories into the general age and time of the world. Consider the nature of all worldly sensible things; of those especially, which either ensnare by pleasure, or for their irksomeness are dreadful, or for their outward lustre and show are in great esteem and request, how vile and contemptible, how base and corruptible, how destitute of all true life and being they are.</p>
    <!-- the following tag denotes the source of the quote in smaller text. you can actually make the text larger or smaller in the css, but it's necessary to leave the <small> tag in place for formatting reasons, dears -->
    <small>Marcus Aurelius <a href="https://www.gutenberg.org/cache/epub/2680/pg2680-images.html">Meditations, Book Two IX-XI.</a></small><br /></blockquote>