tribute page

index.html

<section id="about" class="side-image about-section"><!-- About -->

				<div class="image-container col-lg-6 col-md-5 col-sm-3 pull-left">
					<div class="about-bg-image-holder">
					</div>
				</div>
				
		<div class="container">
			<div class="row animate-in" data-anim-type="bounce-in-up" data-anim-delay="400">
			
                <div class="col-md-6 col-md-offset-6 col-sm-8 signature col-sm-offset-4 about-pad content clearfix">
					<div class="about-info">
						<h1>Buenaventura Durruti</h1> 
						
						<p class="about-sub-title">José Buenaventura Durruti Dumange (14 July 1896 – 20 November 1936) was an anarcho-syndicalist militant involved with the CNT, FAI and other anarchist organisations during the period leading up to and including the Spanish Civil War. Durruti played an influential role during the Spanish Revolution and is remembered as a hero in the Anarchist movement.
						<h2>Early Life</h2>
						<p class="text-left">Durruti was born in León, Spain, son of Anastasia Dumangue and Santiago Durruti, a railway worker in the yard at Leon who described himself as a libertarian socialist. Buenaventura was the second of eight brothers (one was killed in the October 1934 uprising in the Asturias, another died fighting the Fascists on the Madrid front).

In 1910, aged 14, Durruti left school to become a trainee mechanic in the railway yard in León. Like his father, he joined the socialist Unión General de Trabajadores (UGT). He took an active part in the strike of August 1917 called by the UGT when the government overturned an agreement between the union and the employers. From the autumn of 1917 until the beginning of 1920, Durruti worked in Paris as a mechanic. He then decided to return to Spain and arrived at San Sebastian, Basque Country, just across the border. Here, he was introduced to local anarchists such as Suberviola, Ruiz, Aldabatrecu or Marcelino del Campo, with whom he formed the anarchist paramilitary group Los Justicieros ("The Avengers"). In 1921, during the inauguration of the Great Kursaal in San Sebastian, members of this group attempted unsuccessfully to assassinate King Alfonso XIII. In 1923 the group was also implicated in the assassination of Cardinal Juan Soldevilla y Romero, as a reprisal for the killing of an anarcho-syndicalist union activist Salvador Seguí. After Miguel Primo de Rivera seized power in Spain in 1923, Durruti and his comrades organised attacks on the military barracks in Barcelona and on the border stations near France. These attacks were unsuccessful and quite a few anarchists were killed. Following these defeats, Durruti, Ascaso and Oliver fled to Latin America. They subsequently travelled widely, visiting Cuba and carrying out bank robberies in Chile and Argentina. 

<h2>In the civil war</h2>
						<p class="text-left">Working closely with his comrades in the FAI and CNT Durruti helped to co-ordinate armed resistance to the military rising of Francisco Franco, an effort which was to prove vital in preventing General Goded's attempt to seize control of Barcelona.
             <p class="text-left">You can read more on his <a href="https://en.wikipedia.org/wiki/Buenaventura_Durruti">Wikipedia entry</a></p>
					</div>
						
				</div>	
				
			</div>		
		</div>	
		
    </section><!-- end About -->

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@font-face {
	font-family: 'pixelvicon';
	src:url('../fonts/Pixelvicon/pixelvicon.eot?3annyp');
	src:url('../fonts/Pixelvicon/pixelvicon.eot?#iefix3annyp') format('embedded-opentype'),
		url('../fonts/Pixelvicon/pixelvicon.woff?3annyp') format('woff'),
		url('../fonts/Pixelvicon/pixelvicon.ttf?3annyp') format('truetype'),
		url('../fonts/Pixelvicon/pixelvicon.svg?3annyp#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'pixelvicon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size:20px;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-browser-1:before {
	content: "a";
}
.icon-browser-2:before {
	content: "b";
}
.icon-browser-3:before {
	content: "c";
}
.icon-browser-4:before {
	content: "d";
}
.icon-browser-5:before {
	content: "e";
}
.icon-browser-6:before {
	content: "f";
}
.icon-imac:before {
	content: "g";
}
.icon-laptop:before {
	content: "h";
}
.icon-monitor:before {
	content: "i";
}
.icon-pc-case:before {
	content: "j";
}
.icon-tablet-1:before {
	content: "k";
}
.icon-tablet-2:before {
	content: "l";
}
.icon-tablet-3:before {
	content: "m";
}
.icon-tablet-4:before {
	content: "n";
}
.icon-smart-phone-1:before {
	content: "o";
}
.icon-smart-phone-2:before {
	content: "p";
}
.icon-smart-phone-3:before {
	content: "q";
}
.icon-smart-phone-4:before {
	content: "r";
}
.icon-printer:before {
	content: "s";
}
.icon-calculator:before {
	content: "t";
}
.icon-keyboard:before {
	content: "u";
}
.icon-mouse:before {
	content: "v";
}
.icon-video-game-controller:before {
	content: "w";
}
.icon-floppy-disk:before {
	content: "x";
}
.icon-coffee:before {
	content: "y";
}
.icon-mug:before {
	content: "z";
}
.icon-briefcase-1:before {
	content: "A";
}
.icon-briefcase-2:before {
	content: "B";
}
.icon-briefcase-3:before {
	content: "C";
}
.icon-first-aid:before {
	content: "D";
}
.icon-shopping-bag:before {
	content: "E";
}
.icon-gift:before {
	content: "F";
}
.icon-notepad-1:before {
	content: "G";
}
.icon-notepad-2:before {
	content: "H";
}
.icon-list-1:before {
	content: "I";
}
.icon-list-2:before {
	content: "J";
}
.icon-list-3:before {
	content: "K";
}
.icon-book:before {
	content: "L";
}
.icon-calendar-1:before {
	content: "M";
}
.icon-calendar-2:before {
	content: "N";
}
.icon-notebook:before {
	content: "O";
}
.icon-ruler:before {
	content: "P";
}
.icon-pen-1:before {
	content: "Q";
}
.icon-pen-2:before {
	content: "R";
}
.icon-document-1:before {
	content: "S";
}
.icon-document-2:before {
	content: "T";
}
.icon-document-3:before {
	content: "U";
}
.icon-film:before {
	content: "V";
}
.icon-photo-gallery:before {
	content: "W";
}
.icon-clock:before {
	content: "X";
}
.icon-cupboard:before {
	content: "Y";
}
.icon-drawer:before {
	content: "Z";
}
.icon-dresser:before {
	content: "0";
}
.icon-chair:before {
	content: "1";
}
.icon-sofa:before {
	content: "2";
}
.icon-desk:before {
	content: "3";
}
.icon-table:before {
	content: "4";
}
.icon-door:before {
	content: "5";
}
.icon-window:before {
	content: "6";
}
.icon-brick-wall:before {
	content: "7";
}
.icon-trash-1:before {
	content: "8";
}
.icon-trash-2:before {
	content: "9";
}
.icon-lock:before {
	content: "!";
}
.icon-unlock:before {
	content: "\"";
}
.icon-plus:before {
	content: "#";
}
.icon-minus:before {
	content: "$";
}
.icon-battery-1:before {
	content: "%";
}
.icon-battery-2:before {
	content: "&";
}
.icon-battery-3:before {
	content: "'";
}
.icon-battery-4:before {
	content: "(";
}
.icon-transform:before {
	content: ")";
}
.icon-resize:before {
	content: "*";
}
.icon-grid:before {
	content: "+";
}
.icon-menu:before {
	content: ",";
}
.icon-fullscreen:before {
	content: "-";
}
.icon-outline:before {
	content: ".";
}
.icon-align-left:before {
	content: "/";
}
.icon-align-center:before {
	content: ":";
}
.icon-align-right:before {
	content: ";";
}
.icon-align-justify:before {
	content: "<";
}


/* Body and Tags */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border:0 none;
font-family:inherit;
font-size-adjust:inherit;
font-stretch:inherit;
font-style:inherit;
font-variant:inherit;
font-weight:inherit;
line-height:inherit;
margin:0;
padding:0;
}


body {
width: 100%;
height: 100%;
font-family: 'Source Sans Pro', sans-serif;
}

html {
width: 100%;
height: 100%;
}

a, a:hover, a:active, a:focus {
outline: medium none;
text-decoration: none;
}

p {
padding:0 0 30px;
}

ol, ul {
list-style:none outside none;
}

h1, h2, h3, h4, h5, h6 {
letter-spacing:1px;
}

h1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-family: 'Montserrat',sans-serif;
font-size:42px;
font-weight:700;
letter-spacing:4px;
margin-bottom: 25px;
line-height: 45px;
padding:0 0 35px;
text-align:left;
text-transform:uppercase;
}
input::-webkit-input-placeholder {color:#0a1a39;}
textarea::-webkit-input-placeholder {color:#0a1a39;}

/* No Padding */
.no-pad {
padding:0;
}

/* Image Responsive */
.img-responsive {
display: block;
width: 100%;
height: auto;
}


/* Side Image on Sections */
.side-image .image-container.pull-right {
right: 0;
}

.side-image {
padding: 0;
position: relative;
}

.side-image .image-container {
height: 100%;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
}

/* ABOUT */
.about-bg-image-holder {
background-position: 50% 50% !important;
background-size: cover !important;
background: url('http://www.relatably.com/q/img/buenaventura-durruti-quotes/buenaventura-durruti-2.jpg') repeat scroll 50% 0% transparent;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}

.about-pad {
padding:100px 0 100px 100px;
}

.about-info {
background: none repeat scroll 0 0 #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
color: #5E5E5E;
font-size:16px;
letter-spacing:1px;
line-height: 24px;
margin:0 0 30px;
}
.about-info h1 {
color: #1a1a1a;
}
.about-info h2 {
text-align: left;
  padding-bottom: 10px;
}

.about-sub-title {
color: #0D4494;
font-size:25px;
font-weight:400;
line-height:28px;
text-align:left;
}



/* SECTIONS */
.home-section {
display:table;
height:100%;
text-align:center;
width:100%;
}

.about-section {
background: #fff;
display: table;
height: auto;
text-align: center;
width: 100%;
}


/* Style for Responsive Design */

@media only screen and (max-width: 1200px) {
/* ABOUT */
.about-pad {
padding:100px 0 100px 20px;
}



}

@media only screen and (max-width: 992px) {
/* ABOUT */
.about-pad {
padding:100px 0 100px 10px;
}

}




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

/* ABOUT */
.about-pad {
padding:100px 32px 100px;
}

}


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



}


/* -------------------------------- 

Team xkeyframes 

-------------------------------- */
@-webkit-keyframes cd-fade-in {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-moz-keyframes cd-fade-in {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes cd-fade-in {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes cd-move-in {
0% {
-webkit-transform: translateX(100px);
}

100% {
-webkit-transform: translateX(0);
}
}

@-moz-keyframes cd-move-in {
0% {
-moz-transform: translateX(100px);
}

100% {
-moz-transform: translateX(0);
}
}

@keyframes cd-move-in {
0% {
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}

100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />

tribute page.markdown

tribute page

A Pen by giannis panagiotopoulos on CodePen.

License.