Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

              
                <div class="content">
  <div class="row parent">
<div id="yma" class="col-md-6">
	<img id="ymaLogo" src="https://s3.amazonaws.com/showcase.knanthony.com/sumac/ymaLogo.png" alt="Yma Sumac logo"/>
</div>

  <div id="column1" class="col-sm-6 col-md-3">
		<section>
			<h2>About</h2>
			<p>Yma Sumac was a Peruvian soprano.
				In the 1950s, she was one of the most famous proponents of exotica music.
				Sumac became an international success based on her extreme vocal range,
				which was said to be "well over five octaves"
				at the peak of her singing career.</p>
			<button type="button" data-toggle="modal" data-target="#aboutModal">Read More</button>
		</section>
  </div>
	<div id="column2" class="col-sm-6 col-md-3">
		<h2>Listen</h2>
		<a href="#" data-toggle="modal" data-target="#listenModal">
		<section>
			<span class="verticalHelper"></span>
			<img id="play" src="https://s3.amazonaws.com/showcase.knanthony.com/sumac/playIcon.png" alt="play video"/>
		</section>
		</a>
  </div>
	<div id="column3" class="col-sm-6 col-md-3">
    <section>
			<h2>Discography</h2>
			<ul class="discography">
				<li>
					<time>1950</time>
					<p>Voice of the Xtabay</p>
				</li>
				<li>
					<time>1952</time>
					<p>Legend of the Sun Virgin</p>
				</li>
				<li>
					<time>1953</time>
					<p>Inca Taqui</p>
				</li>
				<li>
					<time>1954</time>
					<p>Mambo!</p>
				</li>
				<li class="overage">
					<time>1957</time>
					<p>Legend of the Jivaro</p>
				</li>
				<li class="overage">
					<time>1959</time>
					<p>Fuego Del Andes</p>
				</li>
				<li class="overage">
					<time>1961</time>
					<p>Recital</p>
				</li>
				<li class="overage">
					<time>1971</time>
					<p>Miracles</p>
				</li>
			</ul>
			<button id="showDiscs" type="button">Show All</button>
		</section>
  </div>
	<div id="column4" class="col-sm-6 col-md-3">
		<section>
			<h2>More</h2>
			<ul class="more-links">
				<li><a href="http://yma-sumac.com/index.htm" target="_blank">Yma Sumac.com</a></li>
				<li><a href="https://www.youtube.com/watch?v=-vk_GjINYr8&list=PLv4E-x2jbitl8qvX_w1BPxtpEC5vsaLBC" target="_blank">An Yma Sumac Playlist</a></li>
				<li><a href="https://www.google.com/doodles/yma-sumacs-94th-birthday" target="_blank">2016 Google Doodle</a></li>
				<li>Made with great admiration by <br /><a href="http://knanthony.com" target="_blank">K. Anthony</a></li>
			</ul>
		</section>
  </div>
</div>
</div>
</div>

<!-- Modal -->
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h1 class="modal-title" id="aboutLabel">About Yma</h1>
      </div>
      <div class="modal-body">
				<p>Yma Sumac  was born on either September 13, 1922,
					 or September 10, 1923, most likely in Callao,
					 a seacoast city in Peru; but, possibly, according to herself,
					 in Ichocán, an Indian village. Her parents were Sixto Chávarri and
					 Emilia Castillo. Her father was born in Cajamarca and her mother was
					 born in Pallasca. Stories published in the 1950s claimed that she
					 was an Incan princess, directly descended from Atahualpa.
					 The government of Peru in 1946 formally supported her claim to be
					 descended from Atahualpa, the last Incan emperor".
					 Chávarri adopted the stage name of Imma Sumack
					 (also spelled Ymma Sumack and Ima Sumack) before she left South
					 America to go to the United States. The stage name was based on her
					 mother's name, which was derived from Ima Shumaq,
					 Quechua for "how beautiful!"</p>
        <p>Sumac recorded an extraordinarily wide vocal range of 5 octaves,
					3 notes and a semitone ranging from E2 to B♭7
					(approximately 107 Hz to 3.7 kHz).
					She was able to sing notes in the low baritone register as well as
					notes above the range of an ordinary soprano and notes in the
					whistle register.
					Both low and high extremes can be heard in the song Chuncho
					(The Forest Creatures) (1953), in which she sings a range of over
					four and a half octaves, from B2 to F♯7.
					She was also apparently able to sing in an eerie "double voice".</p>
					<h2>Career</h2>
					<p>In 1954, classical composer Virgil Thomson described Sumac's voice
						as "very low and warm, very high and birdlike",
						noting that her range "is very close to five octaves, but is in no
						way inhuman or outlandish in sound". In 2012, audio recording
						restoration expert John H. Haley favorably compared Súmac's tone
						to opera singers Isabella Colbran, Maria Malibran,
						and Pauline Viardot. He described Súmac's voice as not having the
						"bright penetrating peal of a true coloratura soprano", but having
						in its place "an alluring sweet darkness...virtually unique in
						our time".</p>
						<p>Sumac first appeared on radio in 1942.
							She recorded at least 18 tracks of Peruvian folk songs in
							Argentina in 1943. These early recordings for the Odeon label
							featured Moisés Vivanco's group, Compañía Peruana de Arte,
							a group of 46 Indian dancers, singers, and musicians. She married
							composer and best friend Moises Vivanco on June 6, 1942.
							She had a son, Charles, in 1949. In 1946, Sumac and Vivanco moved
							to New York City, where they performed as the Inka Taky Trio,
							Sumac singing soprano, Vivanco on guitar, and her cousin Cholita
							Rivero singing contralto and dancing.
							She was signed by Capitol Records in 1950, at which time her
							stage name became Yma Sumac.
							Her first album, Voice of the Xtabay, launched a period of fame
							that included performances at the Hollywood Bowl and Carnegie Hall.</p>
							<p>In 1950 she made her first tour to Europe and Africa, and
								debuted at the Royal Albert Hall in London and the Royal
								Festival Hall before the Queen. She presented more than 80
								concerts in London alone and 16 concerts in Paris.
								During the 1950s, Sumac produced a series of lounge music
								recordings featuring Hollywood-style versions of Incan and
								South American folk songs.
								The combination of her extraordinary voice, exotic looks,
								and stage personality made her a hit with American audiences.</p>
								<p>During the 1950s, Sumac continued to be popular, playing
									Carnegie Hall, the Roxy Theatre with Danny Kaye,
									Las Vegas nightclubs and concert tours of South America and
									Europe. She put out a number of hit albums, such as Mambo!
									(1954) and Fuego del Ande (1959).
									During the height of Sumac's popularity, she appeared in
									the film <i>Secret of the Incas</i> (1954) with Charlton Heston
									and Robert Young and Omar Khayyam (1957).</p>
									<p>In 1957, Súmac and Vivanco divorced, as Vivanco had
										had twins with another woman. They remarried later that year.
										A second tour took her to the Far East: Persia,
										Afghanistan, Pakistan, Burma, Thailand, Sumatra,
										the Philippines, and Australia.
										During the 1961 tour, Yma Sumac was to do two weeks of concerts in Russia.
										The demand for her was so great there,
										she stayed a staggering 6 months, and
										performed for royalty on many occasions.
										By the tour's end, she and husband Moises Vivanco
										were more than ready for their second and final divorce.</p>
							<p>She performed in concert from time to time during the 1970s
								in Peru and later in New York at the Chateau Madrid and
								Town Hall. In the 1980s she resumed her career and had a number of concerts both
								in the United States and abroad.</p>
								<p>She gave several concerts in the summer of 1996 in
									San Francisco and Hollywood as well as two more in Montreal,
									Canada, in July 1997 as part of the Montreal International
									Jazz Festival.
								</p>
									<h2>Her Music in Popular Culture</h2>
									<p>Her song "Bo Mambo" appeared in a commercial for Kahlúa
										liquor and was sampled for the song "Hands Up" by
										The Black Eyed Peas. The song "Gopher Mambo" was used in the
										films Ordinary Decent Criminal, Happy Texas, Spy Games, and
										Confessions of a Dangerous Mind, among others.
										"Gopher Mambo" was used in an act of the Cirque Du Soleil
										show Quidam. The songs "Goomba Boomba" and "Malambo No. 1"
										appeared in Death to Smoochy. A sample from "Malambo No.1"
										was used in Robin Thicke's "Everything I Can't Have".
										Yma Súmac is also mentioned in the lyrics of the 1980s
										song "Joe le taxi" by Vanessa Paradis, and her album Mambo!
										is the record that Belinda Carlisle pulls out of its jacket
										in the video for "Mad About You".
										With the resurgence of lounge music in the late 1990s,
										Sumac's profile rose again when the song "Ataypura" was
										featured in the Coen Brothers film The Big Lebowski.</p>
									<h2>Death</h2>
							<p>Yma Sumac died on November 1, 2008, aged 85 or 86, at an
								assisted living home in Los Angeles, California, nine months
							after being diagnosed with colon cancer.
							She was interred at the Hollywood Forever Cemetery in Hollywood,
							CA, in the "Sanctuary of Memories" section.</p>
							<small>Text from Wikipedia</small>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="listenModal" tabindex="-1" role="dialog" aria-labelledby="listenLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h1 class="modal-title" id="listenLabel">Listen</h1>
      </div>
      <div class="modal-body">
				<h2>Chuncho</h2>
				<div class='embed-container'>
					<iframe id="chuncho" src='https://www.youtube.com/embed/1KprLT-JxPY' frameborder='0' allowfullscreen></iframe>
				</div>
				<h2>Pachamama</h2>
				<div class='embed-container'>
					<iframe id="pachamama" src='https://www.youtube.com/embed/G-6eKroZeIg' frameborder='0' allowfullscreen></iframe>
				</div>
      </div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                /* Visual Inspiration: http://www.frankyrizardo.com/#!/home */

html,
body,
.row,
.content {
  height: 100%;
}

body {
  margin: 0;
  background: #FBFFFE;
  font-family: 'Nunito', sans-serif;
}

h1,
h2 {
  font-weight: 900;
  ;
  text-transform: uppercase;
}

button {
  background-color: transparent;
  border: none;
  color: #fff;
  font-size: 1em;
  letter-spacing: 1px;
  padding: 0.6em 0.6em 0.6em 0;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
}

#showDiscs {
  padding-left: 5px;
}

#yma {
  background-image: url(https://s3.amazonaws.com/showcase.knanthony.com/sumac/ymaSumac1.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 720px;
  height: 100%;
  box-sizing: border-box;
}

#ymaLogo {
  padding: 20px;
  width: 40%;
  min-width: 140px;
  max-width: 350px;
}


/* Image Media Query */

@media(max-width:991px) {
  #yma {
    background-position: 50% 20%;
    min-height: 50%;
    height: 50%;
  }
}


/* Column Styles */

#column1,
#column2,
#column3,
#column4 {
  border-left: 1px solid #FFF;
  border-top: 1px solid #FFF;
  padding: 20px;
  margin: 0;
  height: 50%;
  min-height: 360px;
}

#column1 {
  background: #CF0629;
  color: #FFF;
}

#column2 {
  background-image: url(https://s3.amazonaws.com/showcase.knanthony.com/sumac/secretOfTheIncas.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-color: #000;
  color: #FFF;
  overflow: hidden;
}

/* Hover effect inspiration from Codrops: https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/ */

#column2 section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
  overflow: hidden;
}

#column2 section::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://knanthony.com/img/triangle2.svg) no-repeat center center;
  background-size: cover;
  content: '';
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale3d(5, 2.5, 1);
  transform: scale3d(5, 2.5, 1);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

#column2:hover section {
  opacity: 1.0;
}

#column2:hover section::before {
  opacity: 0.6;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.verticalHelper {
  display: inline-block;
  height: 20%;
  vertical-align: middle;
}

#play {
  display: block;
  width: 45%;
  max-width: 250px;
  margin: 0 auto;
  cursor: pointer;
  vertical-align: middle;
}

#column3 {
  background: #000;
  color: #FFF;
  overflow-y: hidden;
}

#column4 {
  background: #FFF;
  color: #000;
}

.more-links,
.discography {
  padding: 5px;
  list-style: none;
  text-transform: uppercase;
  font-weight: 700;
}

.more-links li {
  border-top: 1px solid #000;
  padding-top: 10px;
  padding-bottom: 10px;
}

.more-links li a {
  color: #CF0629;
}

.discography li {
  border-top: 1px solid #FFF;
  padding-top: 2px;
}

.discography time {
  font-weight: normal;
  font-size: 0.7em;
}

.overage {
  display: none;
}


/* Modals */

.modal-header {
  border-bottom: none;
}

.modal-footer {
  border-top: none;
}

.modal-dialog,
.modal-content {
  background: #CF0629;
  color: #FFF;
}

.modal-content {
  padding-bottom: 50px;
}

.modal-header,
.modal-footer,
.modal-body {
  width: 80%;
  margin: 0 auto;
}

@media only screen and (max-width: 480px) {
  .modal-header,
  .modal-footer,
  .modal-body {
    width: 95%;
  }
}

.modal-content h1,
.modal-content h2 {
  text-align: center;
}

.modal-content p {
  text-align: justify;
}

#aboutModal .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#aboutModal .modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

.modal-body p {
  font-size: 1.3em;
}

button.close {
  border: 2px solid #fff;
  border-radius: 50%;
}

.close {
  color: #FFF;
  opacity: 1.0;
  width: 2em;
  height: 2em;
  font-size: 2em;
}

/* Responsive Video Embed using Embed Responsively */

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
              
            
!

JS

              
                // Stop YouTube vid from playing on modal close from Tutorial Republic: http://www.tutorialrepublic.com/faq/how-to-embed-youtube-video-inside-bootstrap-modal.php

/* Get iframe src attribute value i.e. YouTube video url
    and store it in a variable */
var chunchoUrl = $("#chuncho").attr('src');
var pachaUrl = $("#pachamama").attr('src');

/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
$("#listenModal").on('hide.bs.modal', function() {
  $("#chuncho").attr('src', '');
  $("#pachamama").attr('src', '');
});

/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
$("#listenModal").on('show.bs.modal', function() {
  $("#chuncho").attr('src', chunchoUrl);
  $("#pachamama").attr('src', pachaUrl);
});

// Expand and Collapse Discography Section

$("#showDiscs").click(function() {
  //First click
  $showDiscs = $(this);
  $content = $('.overage');
  // columnOneHeight is equal to the calculated height of column one plus 20px padding top and bottom and 1px top border
  $columnOneHeight = $('#column1').height() + 41;
  console.log($columnOneHeight);
  if ($showDiscs.text() === 'Show All') {
    if ($(window).width() >= 768) {
      $("#column3").animate({
        marginTop: -1 * $columnOneHeight,
        height: "100%",
        minHeight: "720px"
      }, 500, function() {
        // Animation complete.
      });
    } else {
      $("#column3").animate({
        height: "100%",
        minHeight: "720px"
      }, 500, function() {
        // Animation complete.
      });
    }

    $content.slideDown(500, function() {
      $showDiscs.text("Show Less");
    });
  } else {
    //Second click
    $("#column3").animate({
      marginTop: "0",
      minHeight: "360px",
      height: "50%"
    }, 700, function() {
      // Animation complete.
    });
    $content.slideUp(500, function() {
      $showDiscs.text("Show All");
    });
  }
});
              
            
!
999px

Console