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 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.

Quick-add: + add another resource

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.

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. Computer Science student at Los Angeles City College. freeCodeCamp Front End and Back End Certificate recipient. Practical experience with post production workflow design, as well as cost analysis and projection. Passion for software development. 
	hr
	h3 Video Post Production & Full Stack Web Development
	#portrait-container
		svg#portrait.img-responsive.img-circle.center-block(width=472 height=472)
			path(fill='#625344', d='M0 0h472v472H0z')
			g(fill-opacity='.502')
				path(d='M442.208 1.792c66.389 66.389 66.389 174.027 0 240.416-66.389 66.389-174.027 66.389-240.416 0-66.389-66.389-66.389-174.027 0-240.416 66.389-66.39 174.027-66.39 240.416 0', fill='#fff3a1')
				path(d='M-14 123l501 343-488 21z')
				path(d='M310 92l19 193 63-203z', fill='#0f0022')
				path(d='M480 252L-16 441l487 46z', fill='#00000d')
				path(d='M43.524-1.761L-16 85.69l220.029-47.114L201.486-16z', fill='#fffc7c')
				path(d='M366.749 176.251c13.668 13.669 13.668 35.829 0 49.498-13.669 13.668-35.829 13.668-49.498 0-13.668-13.669-13.668-35.829 0-49.498 13.669-13.668 35.829-13.668 49.498 0', fill='#020024')
				path(d='M435 209l-176 43 113 45z', fill='#f3ffff')
				path(d='M146 329l11-218 155 201z', fill='#936a59')
				path(d='M168 203L-16 336 64 39z', fill='#000015')
				path(d='M236-16l120 50-112 182z', fill='#ffff85')
				path(d='M389.678 20.858c9.763 7.81 9.763 20.474 0 28.284-9.763 7.81-25.593 7.81-35.356 0-9.763-7.81-9.763-20.474 0-28.284 9.763-7.81 25.593-7.81 35.356 0', fill='#0a0000')
				path(d='M460.657 11.766c3.124 18.355 3.124 48.113 0 66.468-3.124 18.355-8.19 18.355-11.314 0-3.124-18.355-3.124-48.113 0-66.468 3.124-18.355 8.19-18.355 11.314 0M316.536 9.988c1.952 22.65 1.952 59.374 0 82.024-1.953 22.651-5.119 22.651-7.072 0-1.952-22.65-1.952-59.374 0-82.024 1.953-22.65 5.119-22.65 7.072 0')
				path(d='M148.565 176.895c-10.819 28.096-26.854 27.571-35.813-1.172-8.96-28.743-7.453-74.82 3.367-102.916 10.82-28.096 26.854-27.57 35.814 1.172 8.96 28.743 7.452 74.82-3.368 102.916', fill='#070012')
				path(d='M331 247l-57 37 18-85z', fill='#fff')
				path(d='M392.301 337.606c-23.914 2.584-62.744 3.202-86.729 1.38-23.984-1.821-24.041-5.392-.127-7.976 23.915-2.584 62.745-3.202 86.729-1.381 23.985 1.822 24.042 5.393.127 7.977', fill='#ffcf88')
				path(d='M76 50L54 6 10-5z', fill='#000003')
				path(d='M372 88l103 28-86 128z', fill='#efe6a2')
				path(d='M9.936 59.094L64.14 98.476l-54.076 74.43-54.204-39.382z', fill='#d79165')
				path(d='M115.903 342.425c-25.087-.528-64.846-7.001-88.805-14.457-23.96-7.455-23.045-13.071 2.042-12.542 25.086.529 64.846 7.001 88.805 14.457 23.959 7.456 23.045 13.071-2.042 12.542', fill='#d0907a')
				path(d='M226 104l50 107 61-98z', fill='#ffe189')
				path(d='M379 83l69-12-3-87z', fill='#fff1a2')
				path(d='M51.34 70.14C35.302 78.15 7.95 82.35-9.752 79.517c-17.703-2.833-19.052-11.624-3.014-19.636 16.038-8.012 43.39-12.21 61.093-9.377 17.702 2.833 19.052 11.624 3.014 19.636', fill='#ffffcb')
				path(d='M224.127 325.383c-11.175-1.145-12.037-6.04-1.924-10.932 10.112-4.892 27.368-7.93 38.543-6.785 11.175 1.146 12.036 6.04 1.924 10.932-10.112 4.893-27.368 7.93-38.543 6.785', fill='#f1e3c6')
				path(d='M479.093 82.118c-24.465 4.786-64.497 9.257-89.414 9.986-24.918.729-25.285-2.56-.82-7.346 24.464-4.786 64.496-9.256 89.413-9.985 24.918-.73 25.285 2.56.821 7.345', fill='#100210')
				path(d='M470 487l-486-20 503-146z', fill='#000013')
				path(d='M376.841 154.764c-4.638 17.236-16.897 19.498-27.382 5.053-10.485-14.445-15.225-40.128-10.587-57.364 4.638-17.237 16.897-19.5 27.382-5.054 10.485 14.445 15.225 40.128 10.587 57.365', fill='#250018')
				path(d='M125-1l114 1-1 203z', fill='#d89e47')
				path(d='M362.728 57.272c7.029 7.03 7.029 18.426 0 25.456-7.03 7.03-18.426 7.03-25.456 0-7.029-7.03-7.029-18.426 0-25.456 7.03-7.03 18.426-7.03 25.456 0', fill='#ffffb4')
				path(d='M418 175l69 107-62-3z', fill='#a57945')
				path(d='M293 350l-309-12L8 487z', fill='#000015')
				path(d='M337.263 151.737c8.983 8.982 8.983 23.544 0 32.526-8.982 8.983-23.544 8.983-32.526 0-8.983-8.982-8.983-23.544 0-32.526 8.982-8.983 23.544-8.983 32.526 0', fill='#c6787c')
				path(d='M74 56L54-16l133 61z', fill='#ffca63')
				path(d='M144 320l11-224-171 201z', fill='#00001b')
				path(d='M35.77 43.473c-9.363-3.112-19.804-13.109-23.32-22.328-3.517-9.218 1.223-14.169 10.586-11.056 9.363 3.112 19.804 13.108 23.32 22.327 3.517 9.22-1.222 14.17-10.586 11.057', fill='#ffff9b')
				path(d='M324 284l95-21-24-84z', fill='#daf2f0')
				path(d='M265 201l-115 63 7-156z', fill='#a49059')
				path(d='M365.908 168.254l-37.104 83.228 39.717-27.946 6.492-40.515z', fill='#0f0727')
				path(d='M346 0h17v28h-17z', fill='#2e040d')
				path(d='M284 251l-84-64-33 111z', fill='#685948')
				path(d='M416.581 8.106l-13.288 40.895-21.874-7.107L394.707.999z', fill='#612825')
				path(d='M268 184l50-200-81 20z', fill='#fffc80')
				path(d='M290.862 372.862l-14.934-84.694 51.21-9.03 14.934 84.694z', fill='#572c31')
				path(d='M476.306 79.41c-4.257 36.485-10.084 36.379-13.015-.236-2.931-36.615-1.855-95.873 2.403-132.358 4.257-36.484 10.084-36.379 13.015.236 2.931 36.615 1.855 95.874-2.403 132.359', fill='#e5cf91')
				path(d='M64 69l94-20-18 184z', fill='#2d1224')
				path(d='M395.891 297.565c21.479 7.42 21.479 19.45 0 26.87-21.479 7.42-56.303 7.42-77.782 0s-21.479-19.45 0-26.87c21.479-7.42 56.303-7.42 77.782 0', fill='#12001d')
				path(d='M374 144l-65-52 53-6z', fill='#000012')
				path(d='M-16 46.943l29.741 9.92-18.332-61.8L33.03 51.192z', fill='#1c132d')
				path(d='M384.657 49.615c3.124 10.154 3.124 26.616 0 36.77-3.124 10.153-8.19 10.153-11.314 0-3.124-10.154-3.124-26.616 0-36.77 3.124-10.153 8.19-10.153 11.314 0', fill='#45201f')
				path(d='M322 279l-38-41 23-43z', fill='#fffff2')


.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
	.col-md-10.col-sm-10.col-md-offset-1.col-sm-offset-1.body-panel
		h2 Employment Summary
		table.table
			tr
				th.col-md-4.col-sm-4 Position
				th.col-md-4.col-sm-4 Company
				th.col-md-4.col-sm-4 Dates
			tr
				td.col-md-4.col-sm-4
					em Assistant Editor
				td.col-md-4.col-sm-4
					strong Outlaw Laboratories
				td.col-md-4.col-sm-4 Oct 2017 - Present
			tr
				td.col-md-4.col-sm-4
					em Supervisor, Post Operations
				td.col-md-4.col-sm-4
					strong Propagate Content
				td.col-md-4.col-sm-4 Aug 2016 - Oct 2017
			tr
				td.col-md-4.col-sm-4
					em Senior Post Production Supervisor
				td.col-md-4.col-sm-4
					strong 495 Productions
				td.col-md-4.col-sm-4 Jan 2014 - Feb 2016
			tr
				td.col-md-4.col-sm-4
					em Post Production Supervisor
				td.col-md-4.col-sm-4
					strong 495 Productions
				td.col-md-4.col-sm-4 Aug 2012 - Nov 2013
			tr
				td.col-md-4.col-sm-4
					em Field Assistant Editor / DIT
				td.col-md-4.col-sm-4
					strong Freelance
				td.col-md-4.col-sm-4 Nov 2006 - Jul 2012
			tr
				td.col-md-4.col-sm-4
					em Lead Assistant Editor
				td.col-md-4.col-sm-4
					strong Mark Burnette Productions
				td.col-md-4.col-sm-4 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 &copy; 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 {
	background-color: #C9C7BE;
}

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

#portrait {
  padding-top: 20px;
}

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

#copyright {
	color: #DDD;
}
            
          
!
            
              var img = new Image(),
	url = "https://s3.amazonaws.com/bradcordeiro/webdev/portfolio/portfolio_1.jpg",
	container = document.getElementById("portrait-container");
	img.classList.add("img-responsive");
	img.classList.add("img-circle");
	img.classList.add("center-block");

img.onload = function() {
	while (container.firstChild) {
		container.removeChild(container.firstChild);
	}
	container.appendChild(img);
};
img.src = url;

            
          
!
999px
Loading ..................

Console