cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <head>
  <link href="https://fonts.googleapis.com/css?family=Frijole" rel="stylesheet">
</head>

<style>
  
  
</style>

<!---Above this line are the styles used throughout--->

<div class="container-fluid">

	<div class"section">
		<h1 class="text-center">The Bourbon Kid</h1>
		<h2 class="text-center">A reader's delight better described as an unpredictable rollercoaster ride into horror and black comedy</h2>
	</div>
	
		<div class="row section">
		
			<div class="col-md-6">
				<img src="https://4.bp.blogspot.com/-3tYEbULVN1I/UW5d1PiGAZI/AAAAAAAAMJo/Pa9yYWfsqq0/s1600/bourbon+kid+art+1.jpeg" alt="bourbon-kid-cover" class="img-responsive img-center">
				<p class="intro">The Bourbon Kid series is a horror/thriller series by an anonymous British author. The series began with The Book With No Name, a book which apparently after finishing assures to seal one´s fate with an early and unfortunate demise. It was originally published in 2006 through Lulu.com, but has since been re-released through Michael O'Mara Books. The books center on a supernatural serial killer only known as the "Bourbon Kid".<br /><br />The series premise centers around antihero Bourbon Kid, who as a teenager becomes a supernatural serial killer after drinking some tainted alcohol. As the series progresses he becomes hunted by several different groups of people and must find a way to stop the evil plans of various villains.</p>
			</div>
			
			<div class="col-md-6 mobile">
			
				<div>
					<p><img src="https://images-na.ssl-images-amazon.com/images/I/41oGyU-HdVL.jpg" alt="book-with-no-name" class="img-responsive img" align="left"><br />Santa Mondega is no ordinary town, and its inhabitants are even less ordinary: gangsters, martial-arts monks, low-lifes, bounty hunters, vampires and Elvis-impersonating hitmen abound. And then, in the shadowed streets, there lurks the serial killer known only as the Bourbon Kid. In The Book With No Name, an unnamed book brings violent death to anyone who reads it. Thus begins the adventures of the Bourbon Kid and the strange and sinister occurrences in Santa Mondega . . .</p>
				</div>

				<div>
					<p><img src="https://images-na.ssl-images-amazon.com/images/I/41yzLtBP0aL.jpg" alt="eye-of-the-moon" class="img-responsive img" align="left"><br />Those who miraculously survived the blood-soaked conclusion to the first novel are back only to be drawn into the violent vortex surrounding the Bourbon Kid once again, the supernatural killer who is himself now being hunted. Hot on his heels are several vampire gangs, the US Secret Service, a couple of werewolves, some corrupt cops, and the Dark Lord himself, and none will rest until he is dead. But the Kid has vengeance of his own to wreak . . .</p>
				</div>

				<div>
					<p><img src="https://images-na.ssl-images-amazon.com/images/I/41uhEYP5GaL.jpg" alt="devils-graveyard" class="img-responsive img" align="left"><br />The Devil's Graveyard is an area of desert. Its only habitations are a small roadside gas station, and a giant hotel, where the final of the Back From the Dead singing competition takes place. This is a show where anything goes and anyone can enter. Even the judges aren't quite what they seem. Sanchez, Elvis, the Mystic Lady, a whole bunch of dead rock stars and, of course, the Bourbon Kid are headed to the Hotel Pasadena. Dreams will be crushed, deals will be made and blood will be spilled.
					</p>
				</div>

				<div>
					<p><img src="https://2.bp.blogspot.com/-gm0jEhqQ3eU/Vc1-TQ1NzxI/AAAAAAAAApk/ejMXlnA6wl8/s1600/whiskey%2Bglass%2Bpix.jpg" alt="bourbon-link" class="img-responsive img" align="left"><br /><br /><br /><br /><br /><a href="https://en.wikipedia.org/wiki/Bourbon_Kid" target="_blank">...to find out more enter here</a></p>
				</div>
			</div>
				
		</div>

</div>
            
          
!
            
              body {
    background-color: black;
    font-family: 'Frijole', sans-serif;

}

h1 {
    color: #730404;
    font-size: 5em;
}
h2 {
    color: #eec3c3;
    font-size: 1.75em;
}
p {
  display: inline-block;
  font-size: 0.85em;
  color: #f9f2f2;
  padding: 20px 0px;
  max-width: 800px;
}
.intro {
  font-size: 1em;
  display: block;
  margin: auto;
}

.img-center, .intro {
  margin: auto;
  padding:  30px 0;
}

.img {
   max-width: 26%;
   padding: 17px 20px;
}

@media screen and (max-width: 3000px) {
  h1 {
  font-size: 6em;
  }
  h2 {
  font-size: 2em;
  }
    .intro {
    max-width: 40%;
  }
}
@media screen and (max-width: 1920px) {
  h1 {
  font-size: 5em;
  }
  h2 {
  font-size: 1.75em;
  }
    .intro {
    max-width: 50%;
  }
}
@media screen and (max-width: 1600px) {
  h1 {
  font-size: 4em;
  }
  h2 {
  font-size: 1.4em;
  }
    .intro {
    max-width: 60%;
  }
}
@media screen and (max-width: 1440px) {
  h1 {
  font-size: 3em;
  }
  h2 {
  font-size: 1.2em;
  }
    .intro {
    max-width: 70%;
  }
}
@media screen and (max-width: 1280px) {
  h1 {
  font-size: 2em;
  }
  h2 {
  font-size: 1em;
  }
    .intro {
    max-width: 80%;
  }
}
@media screen and (max-width: 960px) {
  h1 {
  font-size: 2em;
  }
  h2 {
  font-size: 1em;
  }
    .intro {
    max-width: 80%;
  }
}
@media screen and (max-width: 768px) {
  h1 {
  font-size: 2em;
  }
  h2 {
  font-size: 1em;
  }
    .intro {
    max-width: 85%;
  }
}
@media screen and (max-width: 568px) {
    h1 {
    font-size: 1.5em;
   }
    h2 {
    font-size: 0.75em;
   }
    .intro {
    max-width: 85%;
  }
 }
@media screen and (max-width: 480px) {
    h1 {
    font-size: 1em;
    }
    h2 {
    font-size: 0.5em;
    }
  p {
    max-width: 54%;
  }
  .intro {
    max-width: 85%;
  }
  }
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console