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

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

              
                <h2>Partial Interview Transcript Example</h2>

<p class="speaker-c">C: Good morning. Could you tell me your name, where you come from and where you and where you came from today.</p>

<p class="speaker-g">G:	Sure. George Scheer. I am Co-founder and Director of Elsewhere here in Greensboro, North Carolina, grew up in Atlanta Georgia, went to school in Philadelphia and then came down moved down to Greensboro 2003  </p>

<p class="speaker-c">C:	So that’s quite an East Coast journey then.</p>

<p class="speaker-g">G:	Yes.</p>

<p class="speaker-c">C:	I wanted to start with the, I was actually going to start Political Pie. I am a follower obviously on Instagram and I was intrigued and wondered if you had baked a specific pie? </p>

<p class="speaker-g">G:	Oh, a specific pie. I put together the programming so I did not get involved in much of the baking.  But a lot of people. Yeah, there are a lot of different pies. The funny thing, I love that programme.  My real desire is to actually be in some form of politics and in campaign work. I used to study that as an undergrad and so the dream of getting to call an election, without having to go through all the years of broadcasting and working for media corporations, it’s kinda like this is my special, this is the third year we’ve run the show but I never really get to eat any of the pies because I’m run, since I sit inside a hulled out television and I do this sort of behind the scenes media, I kind of, the, I don’t know what they call that person, where you have the two news anchors at the desk and you have like, in late night TV, the other guy who sits on the couch, you know across from <span class="highlight">Conan, whatever his name is.</span> Anyway. So I play that, inside of a hulled out TV but I’m kind of inside the TV for the whole of the election, the entire election cycle, <span class="highlight">juggling media clips and watching the election come in</span>, I don’t even get to eat very much of the pie but I heard there was a lot of delicious pies.</p>


<p class="speaker-c">C:	And was there a strong favourite then?</p>

<p class="speaker-g">G:	Ah, no, I mean I think, no don’t. I think there was a Wolfgang Puck had donated a pie to us that pizza place and it was some sort of smoked salmon pie that everyone was kind of freaking; I mean it wasn’t a pie it was a sort of pizza pie but it was a smoked salmon pizza pie that people were freaking out about. There was also some sort of Shepherd’s Pie that someone had made that was really good.
</p>

<p class="speaker-c">C:	Definitely, that’s a key dish if you were talking pie in the UK though with no pastry topping, which is a loss.</p>

<p class="speaker-g">G:	Right</p> 

<p class="speaker-c">C:	So then did you get to call the election or did the anchors call the election?</p>

<p class="speaker-g">G:	Well the anchors, so, what we did actually we partnered with Black Lives Matter Gate City, which the local Greensboro chapter, with Queer People of Colour Collective with Greensboro Project Space, which is a new projects space that has opened up around the corner and um with the Triad City Beat, which is the local paper and so we had two really wonderful news anchors and so, I was there with them following the election. It was a strange night, for sure.</p>

<p class="speaker-c">C:	I was going to say, with those partners there’s a definite side that you would have been on and that wasn’t the side that had won, so how did that pan out?</p>

<p class="speaker-g">G:	I should say that as a non-profit we are nonpartisan, however, that set-up is partners obviously; I don’t even know the Black Lives Matter is partisan per se, as an organisation and this actually, I should say specific details of what you can and can’t do in terms of non-profit status and partisanship, so you can advocate for policies, you just can’t support candidates in particular. So I would say that with the partnerships that we had it was [George pauses for thought] it was, in my experience a fairly hard and also powerful evening. I think it was a lot of really intense reflection. I mean the programming itself had a lot of different artists, who had been doing, you know we had an artist Sam Gould who came in and did a series of rants on line. He’s known to be, he was with Red76 which was an arts collective, still active but known from many years ago .We had the former Governor, former Democratic Governor of South Carolina skyped in and talked about sort of the Democratic Party. We had two city council people that came in and talked with the anchors. We had three artists who were part of a discussion of ‘Art after Ferguson’ working with, sort of responding to police accountability, so that was the programme and then that was inter-mixed with obviously the election returns coming in following the States.  I mean it was hard, it was not, it was, I mean…_to say it was  …I don’t know how to deconstruct it but it was good to be with such critical, hard and important like thinkers, people with a real analysis and to share that moment with people who had something really to say and who in some ways were partisan and in some ways you know a lot of the folks from Black Lives Matter were saying you know none of these candidates are actually really looking to make change at a real structural level. And so that said now we maybe know how--I think they would say we have always known how racist in fact this country really is and what we found in the election was that there extraordinary power in a white vote and that that you know, I have my own analysis that has evolved over the last couple of weeks about that but having that immediacy with that contingency of people and there was one moment where you know there was a demand to play ‘It’s going to be all right’ [Sarah Groves] by um er er laughs if you write it by the side of the paper for me. Anyway to play ‘It’s going to be all right’ I mean you know I think it was a strong moment that comes out of that movement.</p>

<p class="speaker-c">C:	That’s very good. And you talked about somebody ranting online, so how do you enable that as a not for profit? Does that happen with someone integral to your programming – but they do that outside of your organisation or - that I didn’t track.</p>

<p class="speaker-g">G:	Oh no, we just had, I just made a program so we had people who skyped in so I had brought Sam in to do five minute rants.  Sam [Gould] was part of this group called Red 76 he wrote this book called ‘Guide to Radical Shimming’ you know it was just part of the programme.  You know we had a soap box up that people could get up and talk on, we had a GPS was doing a whole series of projects where they had taken these political cartoons and re- drawn, from the election cycle,  redrawn them large and allowed people to create their own political cartoons using these like sort of over-sized pieces and photograph them – we also had these sort of people here -  moves away from microphone  - </p>

<p class="speaker-c">C:	This is the TV</p>
<p>G:	Yes, the TV.  We had all these facemasks </p>
<p>C:	Oh, excellent.</p>
<p>G:	So people were in the crowds</p>
<p>C:	Putin. Putin was in the crowd, Snowden.</p>
<p>G:	Carson, and um </p>
<p>C:	Who is this woman?</p>
<p>G:	She is the ABC news anchor</p> 
<p>C:	She looks familiar </p>
<p>G:	Newscaster. I think this is Melania [Trump]</p>
<p>G:	That’s a woman, the Fox news Megan [Kelly]</p>
<p>C:	Yes</p>
<p>G:	What’s her name, Helen something Putin</p>
<p>C:	No, turn them over.</p>
<p>G:	Yes, and then Marco Ribero.</p>
<p>C:	I think with their eyes cut out that’s – I work with an artist who put black eyeballs into a taxidermied things and no, took animals and then overlaid that – and there’s  a deadness to the eye sockets.</p>
<p>G:	Yes, I mean what I’m just saying is we do a lot of different kind of programming here and this is one that we’ve done every four years and it’s just you know… Elsewhere has a space within a lot of different cultural moments and also I guess I’d say that we--I think what’s curious actually is going to more like this real one is Elsewhere. We produce events and programs, we produce art happenings, broadly speaking and sometimes that means we bring in other artists, sometimes that means we commission artists to do projects that are theirs and we support them but sometimes it means that we host events and programs that we produce- ourselves that are not happenings in and of themselves and we have a team, you know our staff are all artists, like we all consider ourselves artists, our interns are all artists and you know in whatever form and while this may not be their particular art form that they do we, you know, in the same way, a similar style - we ‘re not just a presenting organisation I guess is what I would say, it’s a lot of work, a lot of organisation operate project spaces, operate as presenting organisations and I think that we as an organisation ourselves operate as a producing organisation so maybe in the same way that something like,  what’s the name pause for thought in LA </p>
              
            
!

CSS

              
                /* started as a demo for someone formatting and interview and things progressed . . . */


/*sets your body width and the font size*/
body {
  width: 60%;
  margin: auto;
  font-size: 1.2em;
}


p {
    padding: 10px 15px;/*creates a bit of padding around the paragraphs*/
    margin: 10px;/*creates a bit of room between the paragraphs - set to 0 to condense*/
  min-height: 40px;
  font-weight: 300;
}

p::first-letter { 
  font-size: 2em;
  color: #424242;
  background-color:#fff;
  padding: 0 5px;
  margin-right: 10px;
  float:left;
  display:absolute;
  line-height: 1.2em;  
}

p:nth-of-type(odd) {
      background-color: #efefef; /*background color for speaker c - set to white if you want it vanilla*/
}

p:nth-of-type(even) {
  background-color: pink;/*background color for speaker g - set to white if you want it vanilla*/
}

p:nth-of-type(odd)::first-letter{
  background-color:#424242;
  color:#fff;
}

.highlight {
  background-color: lightgreen;/*highlight color for anything with that class -- example uses <span class="highligh">*/
}

              
            
!

JS

              
                
              
            
!
999px

Console