Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--
User Profile Sidebar by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
-->

<div class="container">
    <div class="row profile">
		<div class="col-xs-4 col-s-4 col-md-4">
			<div class="profile-sidebar">
				<!-- SIDEBAR USERPIC -->
				<div class="profile-userpic">
					<img src="http://res.cloudinary.com/batits/image/upload/c_crop,h_530,w_530/v1496281484/profile_a7eleb.png" class="img-responsive img-circle" alt="profile">
				</div>
				<!-- END SIDEBAR USERPIC -->
				<!-- SIDEBAR USER TITLE -->
				<div class="profile-usertitle">
					<div class="profile-usertitle-name">
						Arthur Bradley
					</div>
					<div class="profile-usertitle-job">
						Developer
					</div>
				</div>
				<!-- END SIDEBAR USER TITLE -->
				<!-- SIDEBAR BUTTONS -->
				<div class="profile-userbuttons">
					  <button type="button">
              <span class="fa-stack fa-lg">
                <a href="https://facebook.com/batits" target="_blank">
                  <i class="fa fa-square-o fa-stack-2x"></i>
                  <i class="fa fa-facebook fa-stack-1x"></i>
                </a>
              </span>
            </button>
					  <button type="button">
              <span class="fa-stack fa-lg">
                <a href="https://freecodecamp.com/batits" target="_blank">
                  <i class="fa fa-square-o fa-stack-2x"></i>
                  <i class="fa fa-free-code-camp fa-stack-1x"></i>  
            </button>
                </a>
              </span>
            <button type="button">
              <span class="fa-stack fa-lg">
                <a href="https://github.com/batits" target="_blank">
                  <i class="fa fa-square-o fa-stack-2x"></i>
                  <i class="fa fa-github fa-stack-1x"></i>  
            </button>
                </a>
              </span>
            <button type="button">
              <span class="fa-stack fa-lg">
                  <i class="fa fa-square-o fa-stack-2x"></i>
                  <i class="fa fa-facebook fa-stack-1x"></i>  
              </span>
            </button> 
				</div>
				<!-- END SIDEBAR BUTTONS -->
				<!-- SIDEBAR MENU -->
				<div class="profile-usermenu">
					<ul class="nav">
						<li class="active">
							<a href="#">
							<i class="glyphicon glyphicon-home"></i>
							About</a>
						</li>
						<li>
							<a href="#">
							<i class="glyphicon glyphicon-user"></i>
							Projects</a>
						</li>
						<li>
							<a href="#" target="_blank">
							<i class="glyphicon glyphicon-ok"></i>
							Contact </a>
						</li>
					</ul>
				</div>
				<!-- END MENU -->
			</div>
		</div>
		<div class="col-xs-8 col-s-8 col-md-8">
            <div class="profile-content">
Bacon ipsum dolor amet hamburger fatback meatloaf, porchetta shankle cow brisket swine beef ribs capicola biltong. Frankfurter tri-tip bacon, shoulder shankle capicola turducken. Cow porchetta picanha, turducken pig meatball boudin burgdoggen ham hock shank. Cupim alcatra tail, turkey ham hock drumstick capicola doner picanha swine sirloin. Chuck salami beef leberkas, t-bone kielbasa short ribs flank. Pastrami ham short loin venison, andouille bacon corned beef pork belly hamburger alcatra shank jowl kielbasa. Salami prosciutto chicken shankle ham.<br />
Tail porchetta pig chicken burgdoggen pork chop drumstick pork loin fatback filet mignon. Drumstick bresaola cupim jerky kevin andouille fatback short loin picanha doner tenderloin chuck. Drumstick shankle turkey, ground round andouille kevin meatball cupim beef ribs fatback landjaeger tenderloin. Pork belly burgdoggen turkey, beef ribs ham tri-tip landjaeger alcatra meatball flank bresaola shank frankfurter salami. Ground round chicken venison, picanha shank sausage ball tip landjaeger pork chop beef ribs frankfurter pig. <br />
Ground round prosciutto spare ribs kevin sausage kielbasa rump, turkey burgdoggen drumstick tri-tip meatball brisket ball tip. Kevin frankfurter ham hock tail. Meatball kielbasa beef, strip steak tongue turducken pork belly sausage pastrami bacon landjaeger flank jerky ham shankle. Tri-tip pig pork chop tenderloin picanha capicola. Turkey cupim sirloin, leberkas prosciutto beef ribs pork. <br />
            </div>
          <br />
            <div class="profile-content">
T-bone cupim boudin tail pork loin bacon turkey. Beef ribs venison burgdoggen jerky, brisket pork chop shankle pork loin ham hock sausage hamburger. Leberkas biltong ground round, turducken porchetta shank swine jowl. Swine sirloin strip steak flank, ham venison biltong beef corned beef. Turducken landjaeger beef andouille filet mignon.<br />
Shank ham jowl, burgdoggen shankle brisket bresaola meatball strip steak. Porchetta fatback leberkas, ball tip pastrami tail turkey bacon t-bone pork chop filet mignon kielbasa jerky bresaola drumstick. Strip steak swine beef ribs, capicola spare ribs corned beef shankle meatloaf tri-tip. Beef pork chop picanha porchetta spare ribs flank. Chicken brisket chuck, tail flank rump biltong jerky kevin.<br />
Ball tip jowl chicken, kielbasa landjaeger pig pancetta jerky fatback shankle. Sausage meatloaf capicola leberkas cow kielbasa andouille spare ribs. Kielbasa fatback swine jerky beef picanha biltong tenderloin rump meatloaf tongue alcatra frankfurter kevin. Corned beef burgdoggen landjaeger t-bone kevin, swine biltong tri-tip ball tip brisket meatloaf beef pancetta meatball ground round. Frankfurter rump prosciutto boudin pork loin filet mignon biltong beef andouille bresaola fatback pork chicken. Pork loin turkey sirloin jowl capicola short ribs t-bone. Tenderloin salami sausage porchetta landjaeger tri-tip bacon prosciutto drumstick.<br />
            </div>
          <br />
            <div class="profile-content">           
Turducken jowl meatball ground round frankfurter fatback spare ribs pastrami kevin tri-tip shankle. Flank fatback brisket shank pork belly turducken cupim hamburger tenderloin short loin strip steak shoulder. Burgdoggen ham hock shank doner venison spare ribs. Shank porchetta bresaola pork, chicken pancetta capicola bacon jerky drumstick. Meatloaf ground round tail flank ribeye shankle pig shoulder ham hock biltong cupim short ribs brisket turducken. T-bone cupim pork sirloin.<br />
Turkey drumstick chuck, salami t-bone picanha bacon andouille pig pastrami short ribs fatback strip steak. Prosciutto meatloaf andouille, pork belly beef biltong brisket. Frankfurter beef ribs bresaola, corned beef short ribs kielbasa boudin leberkas ham hock tri-tip pork chop rump strip steak. Ribeye fatback landjaeger cupim, chicken ham hock leberkas ham t-bone pastrami.<br />
Rump pastrami drumstick, kevin leberkas boudin pork loin. Filet mignon alcatra corned beef shank andouille burgdoggen ham. Bresaola jowl chicken, ham hock pastrami ground round biltong frankfurter doner cupim. Tail shankle prosciutto brisket, drumstick frankfurter rump hamburger capicola. Capicola tri-tip frankfurter rump tongue beef. Alcatra filet mignon bresaola picanha jowl biltong t-bone brisket pork chop frankfurter. Doner leberkas bacon short ribs landjaeger biltong jerky kielbasa alcatra ham hock.<br />
            </div>
		</div>
	</div>
</div>
<footer class="footer">
  <center>
<strong><i class="fa fa-copyright" aria-hidden="true"></i> 2017 by <a href="https://twitter.com/batits" target="_blank">Batits</a></strong>
</center>
</footer>
<br>
<br>
              
            
!

CSS

              
                /***
User Profile Sidebar by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/

body {
  background: #222;
}

button {
  background: none;
  border: none;
}

/* Profile container */
.profile {
  margin: 20px 0;
}

/* Profile sidebar */
.profile-sidebar {
  padding: 20px 0 10px 0;
  background: orange;
  
}

.profile-userpic img {
  float: none;
  margin: 0 auto;
  width: 40%;
  height: 40%;
 
}

.profile-usertitle {
  text-align: center;
  margin-top: 20px;
}

.profile-usertitle-name {
  color: #333;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 7px;
}

.profile-usertitle-job {
  text-transform: uppercase;
  color: #666;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

.profile-userbuttons {
  text-align: center;
  margin-top: 10px;
}
  
.profile-userbuttons button, 
.profile-userbuttons button a {
  margin: 0px;
  padding: 0px;
  color: #222;
}

.profile-userbuttons button a:hover {
  color: #666;
}

.profile-usermenu {
  margin-top: 30px;
}

.profile-usermenu ul li {
  border-bottom: none;
}

.profile-usermenu ul li:last-child {
  border-bottom: none;
}

.profile-usermenu ul li a {
  color: #222;
  font-size: 14px;
  font-weight: 400;
}

.profile-usermenu ul li a i {
  margin-right: 8px;
  font-size: 14px;
  
}

.profile-usermenu ul li a:hover {
  background-color: #222;
  color: orange;
}

.profile-usermenu ul li.active {
  border-bottom: none;
}

.profile-usermenu ul li.active a {
  color: orange;
  background-color: #222;
  border-left: 2px solid #222;
  margin-left: -2px;
}

/* Profile Content */
.profile-content {
  padding: 20px;
  background: orange;
  color: #222;
  min-height: 460px;
}

.footer, .footer a {
  color:orange;
}
              
            
!

JS

              
                
              
            
!
999px

Console