ficusrobusta/daphne-oram-pioneer-of-electronic-music.markdown

## daphne-oram-pioneer-of-electronic-music.markdown

      
    Raw
  

              daphne-oram-pioneer-of-electronic-music.markdown
            
          
    Daphne Oram - Pioneer of Electronic Music

A tribute page to Daphne Oram
A Pen by Jenna Alnajar on CodePen.
License.

  
## index.html
<link href="https://fonts.googleapis.com/css?family=IBM Plex Mono" rel="stylesheet" type="text/css">

<!DOCTYPE html>
<html>

<head>
  <title>A Tribute to Daphne Oram</title>
</head>

<body id="body">
  <main id="main">
    <header>
      <iframe id="audio-player" src="https://bandcamp.com/EmbeddedPlayer/album=1600309377/size=small/bgcol=000000/linkcol=ffffff/transparent=true" seamless><a href="https://daphneoram.bandcamp.com/album/oramics">Oramics by Daphne Oram</a></iframe>
      <h1 id="title">Daphne Oram <br></h1>
      <h2>Electronic Music Pioneer</h2>
      <img class="image" id="image2" src="https://images.squarespace-cdn.com/content/v1/56af87fc20c6474b886cac9d/1613126455470-E03Y2RMDEE5Z8BTRNUPJ/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/Metonymy+Thumbnail.jpg?format=2500w" alt="Oramics drawings">

    </header>
    <div id="img-div">
      <p id="img-caption">Daphne Oram at her home studio, 1962.
      </p>
      <a id="tribute-link" href="https://en.wikipedia.org/wiki/Daphne_Oram" target="_blank"><img class="image" id="image" src="https://www.daphneoram.org/wp-content/uploads/2014/07/daphne-in-1962-oram-7-4-085.jpg" alt="Daphne Oram at her home studio, 1962."></a>
    </div>
    <section id="tribute-info">
      <h3>Important Life Events and Notable Achievments</h3>
      <ul>
        <li>Pioneer of the genre <i><a href="https://en.wikipedia.org/wiki/Musique_concrète" target="_blank">Musik Concrete</a></i> that uses recorded, everyday sounds.</li>
        <li>The first woman to design and construct an electronic musical instrument.</li>
        <li>The first woman to independently direct and set up a personal electronic music studio.</li>
        <li>Her sounds were used in the <i>James Bond</i> films, up until <i>Goldfinger</i>.</li>
        <li>Was offered a place at the Royal College of Music but instead choose to accept a junior engineer / music equaliser position at the BBC.</li>
        <li>The first combination of classical orchestral music and electronic sound, titled <i>Still Point</i>, was performed by the London Contemporary Orchestra at The Proms, 70 years after it was originally composed by Oram.</li>
        <li>Using a sine wave oscillator, a tape recorder and some self-designed filters, Oram produced the first electronic score in BBC history, <i>Amphityron 38.</i></li>
        <li>Pianist, organist and composer.</li>
        <li>Promoted to studio manager in the 1950s. Established the BBC Radiophonic Workshop alongside her colleague Desmond Briscoe. This laid the foundation for the creation of the iconic sounds of <i>Doctor Who</i>and <i>The Hitchhiker's Guide to the Galaxy</i>.</li>
        <li>She invented Oramics, a technique to produce electronic sounds. This involved directly drawing on 35mm photographic film which were read by photoelectric cells. </li>
        <li>She was commisioned for a number of television and radio works in genres ranging from horror, comedy to sci-fi. These include, <i>The Innocents</i>, 1961 and <i>The Goon Show</i></li>
        <li> During world war two, when music performances taking place at the Royal Albert Hall where interrupted by bombings, Oram would switch pre-recorded tracks of orchestral music into broadcasts of live music without the radio audience knowing.</li>
      </ul>
    </section>
    <iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/RTHXwgTpy90" title="YouTube BBC documentary excerpt" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </main>
</body>

</html>

## style.css
body {
  background-color: rgb(0 0 0);
}
#image2 {
  width: 100%;
}
h1 {
  font-family: "IBM Plex Mono";
  text-align: left;
  font-size: 120px;
  margin: 50px 50px 0px 50px;
  color: rgb(255, 255, 255);
}
h2 {
  font-size: 50px;
  font-family: "IBM Plex Mono";
  text-align: right;
  margin: 70px 70px 0px 50px;
  color: rgb(255, 255, 255);
}
#image {
  display: block;
  width: 70%;
  max-width: 100%;
  height: auto;
  size: relative;
  margin-left: auto;
  margin-right: auto;
}
#img-caption {
  text-align: center;
  color: rgb(255, 255, 255);
}
#img-caption {
  font-family: "IBM Plex Mono";
}
h3 {
  font-family: "IBM Plex Mono";
  text-align: center;
  font-size: 30px;
  margin: 50;
  color: rgb(255, 255, 255);
}
ul {
  font-family: "IBM Plex Mono";
  line-height: 2.5;
  margin: 0 auto 50px auto;
  text-align: justify;
  text-justify: inter-word;
  max-width: 800px;
  color: rgb(255, 255, 255);
}
a {
  color: white;
}
.video {
  display: block;
  width: 50%;
  height: 100;
  margin-left: auto;
  margin-right: auto;
}

#audio-player {
  border: 0;
  width: 20%;
  height: 50px;
  margin: 0px 0px 0px 80%;
  color: rgb(0, 0, 0);
}
	<link href="https://fonts.googleapis.com/css?family=IBM Plex Mono" rel="stylesheet" type="text/css">

	<!DOCTYPE html>
	<html>

	<head>
	<title>A Tribute to Daphne Oram</title>
	</head>

	<body id="body">
	<main id="main">
	<header>
	<iframe id="audio-player" src="https://bandcamp.com/EmbeddedPlayer/album=1600309377/size=small/bgcol=000000/linkcol=ffffff/transparent=true" seamless><a href="https://daphneoram.bandcamp.com/album/oramics">Oramics by Daphne Oram</a></iframe>
	<h1 id="title">Daphne Oram <br></h1>
	<h2>Electronic Music Pioneer</h2>
	<img class="image" id="image2" src="https://images.squarespace-cdn.com/content/v1/56af87fc20c6474b886cac9d/1613126455470-E03Y2RMDEE5Z8BTRNUPJ/ke17ZwdGBToddI8pDm48kNvT88LknE-K9M4pGNO0Iqd7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USOFn4xF8vTWDNAUBm5ducQhX-V3oVjSmr829Rco4W2Uo49ZdOtO_QXox0_W7i2zEA/Metonymy+Thumbnail.jpg?format=2500w" alt="Oramics drawings">

	</header>
	<div id="img-div">
	<p id="img-caption">Daphne Oram at her home studio, 1962.
	</p>
	<a id="tribute-link" href="https://en.wikipedia.org/wiki/Daphne_Oram" target="_blank"><img class="image" id="image" src="https://www.daphneoram.org/wp-content/uploads/2014/07/daphne-in-1962-oram-7-4-085.jpg" alt="Daphne Oram at her home studio, 1962."></a>
	</div>
	<section id="tribute-info">
	<h3>Important Life Events and Notable Achievments</h3>
	<ul>
	<li>Pioneer of the genre <i><a href="https://en.wikipedia.org/wiki/Musique_concrète" target="_blank">Musik Concrete</a></i> that uses recorded, everyday sounds.</li>
	<li>The first woman to design and construct an electronic musical instrument.</li>
	<li>The first woman to independently direct and set up a personal electronic music studio.</li>
	<li>Her sounds were used in the <i>James Bond</i> films, up until <i>Goldfinger</i>.</li>
	<li>Was offered a place at the Royal College of Music but instead choose to accept a junior engineer / music equaliser position at the BBC.</li>
	<li>The first combination of classical orchestral music and electronic sound, titled <i>Still Point</i>, was performed by the London Contemporary Orchestra at The Proms, 70 years after it was originally composed by Oram.</li>
	<li>Using a sine wave oscillator, a tape recorder and some self-designed filters, Oram produced the first electronic score in BBC history, <i>Amphityron 38.</i></li>
	<li>Pianist, organist and composer.</li>
	<li>Promoted to studio manager in the 1950s. Established the BBC Radiophonic Workshop alongside her colleague Desmond Briscoe. This laid the foundation for the creation of the iconic sounds of <i>Doctor Who</i>and <i>The Hitchhiker's Guide to the Galaxy</i>.</li>
	<li>She invented Oramics, a technique to produce electronic sounds. This involved directly drawing on 35mm photographic film which were read by photoelectric cells. </li>
	<li>She was commisioned for a number of television and radio works in genres ranging from horror, comedy to sci-fi. These include, <i>The Innocents</i>, 1961 and <i>The Goon Show</i></li>
	<li> During world war two, when music performances taking place at the Royal Albert Hall where interrupted by bombings, Oram would switch pre-recorded tracks of orchestral music into broadcasts of live music without the radio audience knowing.</li>
	</ul>
	</section>
	<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/RTHXwgTpy90" title="YouTube BBC documentary excerpt" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</main>
	</body>

	</html>
	body {
	background-color: rgb(0 0 0);
	}
	#image2 {
	width: 100%;
	}
	h1 {
	font-family: "IBM Plex Mono";
	text-align: left;
	font-size: 120px;
	margin: 50px 50px 0px 50px;
	color: rgb(255, 255, 255);
	}
	h2 {
	font-size: 50px;
	font-family: "IBM Plex Mono";
	text-align: right;
	margin: 70px 70px 0px 50px;
	color: rgb(255, 255, 255);
	}
	#image {
	display: block;
	width: 70%;
	max-width: 100%;
	height: auto;
	size: relative;
	margin-left: auto;
	margin-right: auto;
	}
	#img-caption {
	text-align: center;
	color: rgb(255, 255, 255);
	}
	#img-caption {
	font-family: "IBM Plex Mono";
	}
	h3 {
	font-family: "IBM Plex Mono";
	text-align: center;
	font-size: 30px;
	margin: 50;
	color: rgb(255, 255, 255);
	}
	ul {
	font-family: "IBM Plex Mono";
	line-height: 2.5;
	margin: 0 auto 50px auto;
	text-align: justify;
	text-justify: inter-word;
	max-width: 800px;
	color: rgb(255, 255, 255);
	}
	a {
	color: white;
	}
	.video {
	display: block;
	width: 50%;
	height: 100;
	margin-left: auto;
	margin-right: auto;
	}

	#audio-player {
	border: 0;
	width: 20%;
	height: 50px;
	margin: 0px 0px 0px 80%;
	color: rgb(0, 0, 0);
	}