V for Vendetta Responsive Layout

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

<!DOCTYPE html>
<html >
<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/ */
* {
	-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;	
}
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( V for Vendetta Responsive Layout ) is write by Elvira Valencia, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Elvira Valencia