V for Vendetta Responsive Layout

In this example below you will see how to do a V for Vendetta Responsive Layout with some HTML / CSS and Javascript

Just something very simple with one of my favorite speeches in a movie to experiment with layout design.

Thumbnail
This awesome code was written by virav120, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright virav120 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>V for Vendetta Responsive Layout</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
	<div id="v" class="span4">V</div>
	<div id="content" class="span4">
			<div id="heading" class="span6">V for Vendetta</div>
			<div id="hr" class="span6"></div>
			<div id="column" class="span3">
				But on this most auspicious of nights, permit me then, in lieu of the more commonplace soubriquet, to suggest the character of this dramatis persona. Voila! <br />In view humble vaudevillian veteran, cast vicariously as both victim and villain by the vicissitudes of fate. This visage, no mere veneer of vanity, is a vestige of the “vox populi” now vacant, vanished. However, this valorous visitation of a bygone vexation stands vivified, and has vowed to vanquish these venal and virulent vermin, van guarding vice and vouchsafing the violently vicious and voracious violation of volition.
			</div>
			<div id="column" class="span3">
			The only verdict is vengeance; a vendetta, held as a votive not in vain, for the value and veracity of such shall one day vindicate the vigilant and the virtuous.
			Verily this vichyssoise of verbiage veers most verbose, so let me simply add that it’s my very good honour to meet you and you may call me V.
			<p id="pullout" class="span5">I'm quite sure they will say so.</p>
			</div>
	</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/virav120/v-for-vendetta-responsive-layout-AaiIB */
* {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;  
}

body {
	background-color: #f6f6f6;
	font-family: "MS Serif", "New York", serif;
	-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.container {
	max-width: 900px;
	width: 90%;
	margin: 0 auto;
padding-top: 30px;
}

/*-------------------------
 		Grid
-------------------------*/

.span6 {
	width: 100%;
}

.span5 {
	width: 83.84%;
}

.span4 {
	width: 66.66%;
}

.span3 {
	width: 50%;
}

.span2 {
	width: 33.33%;
}

/*-------------------------
 		Content
-------------------------*/
#content {
	float: right;
	display: block;
	position:relative;
	top: -500px;
}

#column,
#heading {
	padding: .6em;
	float: left;
	line-height: 1.2em;
}

#heading {
	font-size: 4em;
	font-variant:small-caps;
	padding: 1em 1em .1em .1em;
}

#hr {
	position: relative;
	margin-top: 155px;
	background-color: black;
	height: .2em;
}

#column {
	margin-top: 15px;
}


#v {
	font-family: "MS Serif", "New York", serif;
 	display: block;
	color: #b40001;
	font-weight:700;
	z-index: -1;
	font-size: 35em;
	margin: -100px -50px;
}

#pullout {
	font-size: 3em;
	font-style:italic;
	line-height: 1em;
	margin-top: .3em;
float: right;
}

@media screen and (max-width : 899px) {
#hr {
	margin-top: 220px;
}	
}

@media screen and (max-width : 712px) {
	
.span4 {
	width: 83.84%; 
}
}


@media screen and (max-width : 530px) {

.span1, .span2, .span3, .span4, .span5, .span6 {
	width: 100%;
}	

#pullout {
	width: 83.84%;
	float: right;
	margin-top: .8em;	
}
}

Comments