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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                
              
            
!

CSS

              
                /* Bootstrap 4 Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
  font-size: 62.5%;
}

@-ms-viewport {
  width: device-width;
}

article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

a,
area,
button,
[role="button"],
input:not([type=range]),
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #868e96;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}

button {
  border-radius: 0;
  border: solid 1px #ccc;
  background-color: #ccc;
  overflow: hidden;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl,
dt, dd, blockquote, address, table {
  margin: 0;
  padding: 0;
}

* {
  font-weight: 100;
}


/****************/
/* Local Styles */
/****************/

@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");

section {
  padding-bottom: 100px;
}
html, body {
	padding-top: 35px;
	font-family: Roboto, Helvetica, Arial;
	box-sizing: border-box;
	background: #FAFAFA;
	width: 100%;
	margin: 0;
}

::-webkit-scrollbar {
	display: none;
}

* {
	box-sizing: border-box;
}

header {
	z-index: 999;
	position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
	background: #990000;
	color: #fff;
	top: 0;
	left: 0;
	/* height: 56px; */
	width: 100%;
	width: 100vw;
	box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

header h1 {
	font-size: 1.5em;
	margin: 14px 20px;
	font-weight: normal;
  flex: 1;
}

header svg {
  margin-top: 15px;
}

header input {
	font-size: 1.5em;
	color: white;
	z-index: 1000;
	max-width: 300px;
	min-width: 300px;
	height: 28px;
	top: 14px;
	right: 20px;
	background: transparent;
	border: none;
  border-bottom: 1px solid #fff;
  margin-right: 20px;
}

header input:focus {
	outline: none;
	top: 15px;
	border-bottom: 2px solid white;
}

header input::placeholder {
	color: #fff;
}
header button {
  -webkit-appearance: none;
  background-color: transparent;
  border: solid 1px #fff;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  transition: all .25s ease-out;
  margin-right: 20px;
}
header button:hover {
  background-color: #fff;
  color: #990000;
}

#infocontainer {
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
	max-width: 810px;
	margin-left: calc( 50% - 405px);
}

@media (max-width: 845px) {
	#infocontainer {
		display: inline-block;
		max-width: 540px;
		margin-left: calc( 50% - 270px);
	}
}

@media (max-width: 570px) {
	#infocontainer {
		display: inline-block;
		width: 100%;
		margin-left: 0;
	}

	.infobox {
		width: calc( 100% - 20px) !important;
	}

	header h1 {
		font-size: 1.2em;
		margin: 16px 10px;
	}

	header svg {
		right: 195px;
		height: 24px;
		top: 17px;
	}

	header input {
		max-width: 180px;
		min-width: 180px;
		font-size: 1.2em;
	}
}

.infobox {
	border-radius: 2px;
	float: left;
	display: flex;
  flex-direction: column;
	margin: 12px 10px;
	width: 400px;
	background: #fff;
	box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
	padding: 0;
  transition: all .5s ease-out;
}

.infobox h2 {
	margin: 0;
	padding-top: 8px;
	color: rgba(0, 0, 0, 0.87);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 2rem;
}

.infobox .img {
	border-top-right-radius: 2px;
	border-top-left-radius: 2px;
	width: 100%;
  min-height: 500px;
	background-position-x: center;
	background-size: cover;
  transition: all .5s ease-out;
  flex: 1;
}
.infobox.closed {
  cursor: pointer;
	width: 250px;
}
.infobox.closed .img {
  min-height: 45px;
}

.infobox section.stats {
	padding: 16px;
	width: 100%;
}

.infobox section.stats span {
	color: rgba(0, 0, 0, 0.87);
	font-size: 0.875rem;
	line-height: 2;
}

              
            
!

JS

              
                /** @jsx h */
const { h, Component} = composi



function TopBar({dashboard, showDashboard, onClick, onInput}) {
  if (dashboard) {
    return (
    <header>
      <h1>Rick and Morty Characters</h1>
      <svg onclick={(e) => onClick(e)} xmlns="http://www.w3.org/2000/svg" fill="#fff" height="28" viewBox="0 0 28 28" width="28">
        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
        <path d="M0 0h24v24H0z" fill="none"/>
      </svg>
      <input onkeydown={(e) => onInput(e)} placeholder="Search" ></input>
    </header>
    )
  } else {
    return (
    <header>
      <h1>Rick 'n' Morty Characters</h1>
      <button onclick={()=> showDashboard()} id="showDashboard">Show Dashboard</button>
    </header>
    )
  }
}


function InfoBox({character, onClick}) {
    return (
      <div data-id={character.id} class="infobox closed" onclick={(e) => onClick(e)}>
        <div class="img" style={{ backgroundImage: `url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/${character.image})` }}></div>
        
        <section class="stats">
          <h2>{character.name}</h2>
        </section>
      </div>
    )

}

function DetailBox({character}) {
  return (
    <div class="infobox">
      <div class="img" style={{ backgroundImage: `url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/77047/${character.image})` }}></div>
      
      <section class="stats">
        <h2>{character.name}</h2>
        <h3>
						{character.description}
				</h3><p>
          <strong>Age:</strong> {character.age}
        </p>
        <p>
          <strong>Status:</strong> {character.status}
        </p>
        <p>
          <strong>Job:</strong> {character.job.join(', ')}
        </p>
        <p>
          <strong>Place of Origin:</strong> {character.placeOfOrigin}
        </p>
      </section>
    </div>
  )
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      characters: characters,
      character: characters[0],
      dashboard: true
    }
    this.container = 'body'
  }
  render(data) {
    const character = false
    const dashboard = this.state.dashboard
    const char = this.state.characters[0]
    if (dashboard) {
      return (
        <section>
          <TopBar dashboard={dashboard} onInput={this.findCharacterInput.bind(this)} onClick={this.findCharacter.bind(this)} />
          <div id="infocontainer">
            { 
              data.characters.map( char => (
              <InfoBox  character={char}  onClick={this.showDetail.bind(this)} />
            )) }
          </div>
        </section>
      )
    } else {
      return (
        <section>
          <TopBar dashboard={dashboard} showDashboard={this.showDashboard.bind(this)}/>
          <div id="infocontainer">
            <DetailBox character={this.state.character}/>
          </div>
        </section>
      )
    }

  }
  
  showDetail(e) {
    const target = e.target.closest('.infobox')
    const characters = this.state.characters
    const id = target.dataset.id
    const character = characters.filter(char => id === char.id)[0]
    this.setState({character})
    this.setState({dashboard: false})
  }

  showDashboard() {
    this.setState({dashboard: true})
  }
  
  showDetail(e) {
    const target = e.target.closest('.infobox')
    const characters = this.state.characters
    const id = target.dataset.id
    const character = characters.filter(char => id === char.id)[0]
    this.setState({character})
    this.setState({dashboard: false})
  }
  
  findCharacter(e) {
    const input = this.element.querySelector('input')
    const value = input && input.value
    
    const characters = this.state.characters
    if (value) {
      const character = characters.filter(char => {
        const regex = new RegExp(value, 'img')
        return char.name.match(regex)
      })[0]
      if (character) {
        this.setState({character})
        this.setState({dashboard: false})
      }
    } else {
      alert('Please provide a character name to search for.')
    }
  }
  findCharacterInput(e) {
    if (e.keyCode == 13) {
      this.findCharacter(e)
    }
  }
}


const characters = [
  {
    name: 'Rick',
    image: 'Rick_Sanchez.png',
    description: 'Rick Sanchez is the co-eponymous main character and leading protagonist of the show. He is a genius scientist whose alcoholism and reckless, nihilistic behavior are a source of concern for his daughter\'s family, as well as the safety of their son, Morty. He is voiced by Justin Roiland.',
    age: '70',
    status: 'alive',
    job: [
      'Scientist',
      'Inventor',
      'Arms salesman',
      'Store Owner (briefly)'
    ],
    placeOfOrigin: 'Earth (Dimension C-137)',
    id: '101'
  },
  {
    name: 'Morty',
    image: 'Morty_Smith.jpg',
    description: 'Mortimer "Morty" Smith Sr. is one of the two eponymous main protagonists in Rick and Morty. He is the grandson of Rick and is often forced to tag along on his various misadventures. Morty attends Harry Herpson High School along with his sister, Summer.',
    age: '14',
    status: 'alive',
    job: ['Student at Harry Herpson High School'],
    placeOfOrigin: 'Earth (Dimension C-137)',
    id: '102'
  },
  {
    name: 'Jerry',
    image: 'Jerry_Smith.png',
    description: 'Jerry Smith is the husband of Beth Smith, the father of Summer Smith and Morty Smith, and the son-in-law of Rick Sanchez and Mrs. Sanchez/Diane Sanchez, he currently acts as the father, and the son-in-law, of the Morty Smith and Rick Sanchez from Dimension C-137, respectively. He shares the same history as his C-137 counterpart until the Cronenberg disaster, where it was averted in his dimension.',
    age: '34',
    status: 'alive',
    job: [
      'Advertising agent (fired)',
      'Unknown assigned Galactic Federation employment (laid off after Federation collapse)'
    ],
    placeOfOrigin: 'Earth (Dimension C-137)',
    id: '103'
  },
  {
    name: 'Beth',
    image: 'Beth_Smith.png',
    description: 'Beth Smith (née Sanchez) is the daughter of Rick Sanchez and Mrs. Sanchez/Diane Sanchez, the wife of Jerry Smith, and the mother of Summer Smith and Morty Smith. She currently acts as the mother, and the daughter, of the Morty Smith and Rick Sanchez from Dimension C-137, respectively. She is currently employed as a veterinary surgeon at St. Equis Hospital.',
    age: '34',
    status: 'alive',
    job: ['Horse surgeon at St. Equis Hospital'],
    placeOfOrigin: 'Earth (Dimension C-137)',
    id: '104'
  },
  {
    name: 'Summer',
    image: 'Summer_Smith.jpg',
    description: 'Summer Smith is the daughter of Jerry Smith and Beth Smith, the older sister of Morty Smith, and the granddaughter of Rick Sanchez and Mrs. Sanchez/Diane Sanchez, she currently acts as the older sister, and the granddaughter, of the Morty Smith and Rick Sanchez from Dimension C-137. She is the only other member of the Smith Family to be aware of that fact.',
    age: '17',
    status: 'alive',
    job: ['Student at Harry Herpson High School'],
    placeOfOrigin: 'Earth (Dimension C-137)',
    id: '105'
  },
  {
    name: 'Birdperson',
    image: 'Birdperson.png',
    description: '',
    age: 'Unknown',
    status: 'alive',
    job: ['Unknown'],
    placeOfOrigin: 'Bird World, 20 light-years away from Earth',
    id: '106'
  },
  {
    name: 'Davin',
    image: 'Davin.png',
    description: 'Davin was Beth\'s coworker at St. Equis Hospital. Davin is in love with Beth and he constantly hits on her and tries to seduce her and win her over. Because of this, Jerry is extremely jealous of him. Beth denies having any feelings for him, which she most likely doesn\'t, but Jerry does not trust her around him and absolutely hates him with every fiber in his being.',
    age: 'Unknown, possibly late 20\'s - early 30\'s',
    status: 'Deceased',
    job: ['Horse surgeon'],
    placeOfOrigin: 'Earth (Dimension C-137)',
    id: '107'
  },
  {
    name: 'Jessica',
    image: 'Jessica.png',
    description: 'Jessica is a student at Harry Herpson High School. She is a popular girl in Morty\'s math class who he desires to be with romantically and often has surreal daydreams about, almost exclusively sexual in nature. Much to Morty\'s dismay she is already in a relationship with Brad, whom she frequently experiences difficulties with. She is voiced by Kari Wahlgren.',
    age: '14',
    status: 'alive',
    job: ['Student at Harry Herpson High School'],
    placeOfOrigin: 'Earth (Dimension C-137)',
    id: '108'
  },
  {
    name: 'Mr. Goldenfold',
    image: 'mr_goldenfold.png',
    description: 'Mr. Goldenfold is Morty\'s eccentric math teacher. He is voiced by Brandon Johnson.',
    age: 'Unknown, possibly late 40\'s - early 50\'s',
    status: 'alive',
    job: ['Teacher at Harry Herpson High School'],
    placeOfOrigin: 'Earth (Dimension C-137)',
    id: '109'
  },
  {
    name: 'Principal Vagina',
    image: 'Principal_Vagina.png',
    description: 'Principal Gene Vagina is the principal of Harry Herpson High School. He is voiced by Phil Hendrie.',
    age: 'Unknown, possibly late 60\'s - early 70\'s',
    status: 'alive',
    job: ['Principal of Harry Herpson High School'],
    placeOfOrigin: 'Earth (Dimension C-137)',
    id: '110'
  },
  {
    name: 'Squanchy',
    image: 'Squanchy_.png',
    description: 'Squanchy is a cat-like anthropomorphic creature that was invited to Rick and Summer\'s party in "Ricksy Business". He is a recurring character in Rick and Morty, and very good friends with Rick, sharing his love for alcohol. Morty and Jessica catch Squanchy engaging in auto-erotic asphyxiation masturbation in Morty\'s garage. He refers to this as "squanching".',
    age: 'Unknown',
    status: 'dead',
    job: ['Unknown'],
    placeOfOrigin: 'Earth (Dimension C-137)',
    id: '111'
  },
  {
    name: 'Mr. Meeseeks',
    image: 'Meeseeks.png',
    description: 'Mr. Meeseeks (voiced by Justin Roiland) is the name of all the Meeseeks summoned by activating a Meeseeks Box. The Meeseeks appear in the fifth episode of the first season, "Meeseeks and Destroy". They are known to inhabit planets across the universe.',
    age: 'Alive until they finish their mission',
    status: 'Extant (regularly dying)',
    job: ['Whatever is asked of them'],
    placeOfOrigin: 'Meeseeks Box',
    id: '112'
  },
  {
    name: 'King Flippy Nips',
    image: 'King_Flippynips.png',
    description: 'King Flippy Nips is the ruler of Pluto. He first appeared in "Something Ricked This Way Comes" as the secondary main antagonist.',
    age: 'Unknown',
    status: 'alive',
    job: ['King of Pluto'],
    placeOfOrigin: 'Pluto',
    id: '113'
  },
  {
    name: 'Noob-Noob',
    image: 'noob_noob.jpg',
    description: 'Noob-Noob is a small masked character who made his first appearance in "Vindicators 3: The Return of Worldender." He acts as a janitor for the Vindicators, and is generally underappreciated. Noob-Noob appears to be ready to graduate to a full Vindicator, but is forced to remain behind after Rick gets drunk, passes out, and defecates all over the ship\'s holo-table. Nevertheless, he seems to be the only member of the Vindicators that enjoys Rick\'s humor, and as Rick later reveals to Morty (while drunk), Noob-Noob is the only member of the Vindicators that Rick values, even more than Morty, to which Morty replies with "Motherf***er." . At the end of the episode, Logic raps about how underappreciated Noob-Noob is, although Rick doesn\'t remember him. ',
    age: 'Unknown',
    status: 'alive',
    job: ['Intern, Janitor'],
    placeOfOrigin: 'Unknown',
    id: '114'
  },
  {
    name: 'Mr. Poopybutthole',
    image: 'Mr_poopy_butthole.png',
    description: 'Mr. Poopybutthole is a long-time family friend of the Smiths. Rick clearly considers him to have long been a dependable person, although it\'s uncertain how long they\'ve known each other. He made his first appearance in the episode Total Rickall. He is voiced by Justin Roiland.',
    age: 'Unknown, long-time family friend of the Smiths',
    status: 'alive',
    job: ['Keep the Smith family in a good mood even in the darkest of times'],
    placeOfOrigin: 'Earth (Dimension C-137)',
    id: '115'
  }
]




// Create app instance:
new App()
              
            
!
999px

Console