HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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">×</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">×</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>
/* 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%;
}
// 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");
});
}
});
Also see: Tab Triggers