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

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              nav.navbar.navbar-inverse.navbar-fixed-top
	.container-fluid
		.navbar-header
			button.navbar-toggle.collapsed(type="button" data-toggle="collapse" data-target="#bs-navbar-collapse" aria-expanded="false")
				span.sr-only Toggle navigation
				span.icon-bar
				span.icon-bar
				span.icon-bar
			a.navbar-brand(href="#") Brad Cordeiro
		.collapse.navbar-collapse#bs-navbar-collapse
			ul.nav.navbar-nav.navbar-right
				li.nav-item
					a(href="#about") About
				li.nav-item
					a(href="#portfolio") Web Portfolio
				li.nav-item
					a(href="#workhistory") Employment Summary
				li.nav-item
					a(href="#contact") Contact
a(name='about')
.jumbotron.text-center
	p Post Production Consultant, specializing in the Avid platorm. Practical experience with workflow design, as well as cost analysis and projection; currently on a mission to learn both computer science and software development.
	hr
	h3 Video Post Production & Full Stack Web Development
	img#portrait.img-responsive.img-circle.center-block(src='https://s3.amazonaws.com/bradcordeiro/webdev/portfolio/portfolio_1.jpg', alt='Brad Cordeiro hard at work')

.container.body-panel
	a(name='portfolio')
	.row
		.col-md-3.col-sm-3
			h2 Portfolio 
	.row
		.col-md-3
			.thumbnail
				a(href="http://www.wmbc.la")
					img(src='https://s3.amazonaws.com/bradcordeiro/webdev/portfolio/wmbc_thumb.png' alt='WMBC.LA')
				.caption
					a(href="http://www.wmbc.la")
						h3 WMBC.LA
					h6 Front-End
					p Find Los Angeles bus arrival times. Minimal design: No frameworks, a single page, and 7kb after minification. Runs entirely in-browser (with calls to LA Metro's API).
		.col-md-3
			.thumbnail
				a(href="https://protected-crag-33137.herokuapp.com/markerme/new")
					img(src='https://s3.amazonaws.com/bradcordeiro/webdev/portfolio/markerme_thumb.png' alt='MarkerMe')
				.caption
					a(href="https://protected-crag-33137.herokuapp.com/markerme/new")
						h3 MarkerMe!
					h6 Front- and Back-End
					p An online tool tool to convert plaintext time-coded notes into a file to import into Avid Media Composer as markers. Built with Ruby on Rails 4. No persistent storage.
		.col-md-3
			.thumbnail
				a(href="https://protected-crag-33137.herokuapp.com/edlgenius/new")
					img(src="https://s3.amazonaws.com/bradcordeiro/webdev/portfolio/edlgenius_thumb.png" alt="EDLGenius")
				.caption
					a(href="https://protected-crag-33137.herokuapp.com/edlgenius/new")
						h3 EDLGenius
					h6 Front- and Back-End
					p An online tool to convert Edit Decision Lists from editing software to spreadsheets useful for paperwork deliverables. Built with Ruby on Rails 4, using Postgres.
		.col-md-3
			.thumbnail
				a(href="https://treasure-fibre.glitch.me")
					img(src="https://s3.amazonaws.com/bradcordeiro/webdev/portfolio/urlshorten_thumb.png" alt="URL Shortener Microservice")
				.caption
					a(href="https://treasure-fibre.glitch.me")
						h3 URL Shortener Microservice
					h6 Back-End
					p A tiny and basic URL shortening service. Built with Node.js, Express, and MongoDB.

a(name="workhistory")
.container
	.row
		.col-md-10.col-sm-10.col-md-offset-1.col-sm-offset-1.body-panel
			h2 Employment Summary
			.col-md-4.col-sm-4
				p #[em Supervisor, Post Operations]
				p #[em Senior Post Production Supervisor]
				p #[em Post Production Supervisor]
				p #[em Lead Assistant Editor]
				p #[em Field Assistant Editor / DIT]
			.col-md-4.col-sm-4
				p #[strong Propagate Content] 
				p #[strong 495 Productions]
				p #[strong 495 Productions]
				p #[strong Freelance]
				p #[strong Mark Burnette Productions]
			.col-md-4.col-sm-4
				p Aug 2016 - Present
				p Jan 2014 - Feb 2016
				p Aug 2012 - Nov 2013
				p Nov 2006 - Jul 2012
				p Aug 2012 - Nov 2013
				
	a(name='contact')
.container
	.row
		.col-md-6.col-sm-8.col-md-offset-3.col-sm-offset-2.body-panel
			h2 Contact Me
			hr
			form#contact
				.form-group
					label(for='name') Name
					input.form-control(type='text')
				.form-group
					label(for='email') Email
					input.form-control(type='email')
				.form-group
					label(for='phone') Phone Number
					input.form-control(type='tel')
				.form-group
					label(for='message') Message
					textarea.form-control(rows='5')
				.row
					button#sendbutton.btn.center-block(type='submit') Send

.container
	.row
		.col-md-6.col-sm-6.col-md-offset-3.col-sm-offset-3.body-panel
			.col-md-6.col-sm-6
				h4 About This Page
				h5 This is a living document, its layout #[br]and content are constantly in flux.
			.col-md-6.col-sm-6
				h4 Around the Web
				a.button-social(href='https://github.com/bradcordeiro')
					span.badge
						i.fa.fa-fw.fa-github
				a.button-social(href='https://www.pinboard.in/u:bradcordeiro')
					span.badge
						i.fa.fa-fw.fa-delicious
				a.button-social(href='https://www.linkedin.com/in/bradcordeiro/')
					span.badge
						i.fa.fa-fw.fa-linkedin

.container-fluid.text-center
	h5#copyright © 2017 Brad Cordeiro
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');

body {
	position: relative;
  padding-top: 20px;
  background-image: url('https://s3.amazonaws.com/bradcordeiro/webdev/portfolio/Seamless+brown+paper+texture.jpg');
	background-color: #F2F1ED;
  color: #444;
}

h2 {
	font-family: 'Roboto Slab';
	color: #DE5A51;
}

.navbar {
  font-family: 'Roboto Slab';
}

.navbar-inverse .navbar-brand {
    color: #DE5A51;
}

.navbar-inverse .navbar-brand:hover {
	color: #FF8980;
}

.navbar-inverse
.navbar-nav>li>a {
  color: #DE5A51;
}

.navbar-inverse
.navbar-nav>li>a:hover {
	color: #FF8980;
}

.jumbotron {
	font-family: 'Roboto Slab';
  background-color: #F2F1ED;
  color: #444;
}

.jumbotron>h3 {
	color: #DE5A51;
}

.body-panel {
	border-radius: 6px;
	background-color: #F2F1ED;
	padding-bottom: 15px;
	margin-bottom: 15px;
}

.body-panel h3 {
	color: #000000;
}

.thumbnail {
	height: 389px;
	background-color: #C9C7BE;
}

.badge {
  color: #FFFFFE;
  background-color: #DE5A51;
}

#portrait {
  padding-top: 20px;
}

#sendbutton {
	color: #FFFFFE;
  background-color: #DE5A51;
}

#copyright {
	color: #DDD;
}
            
          
!
999px
Loading ..................

Console