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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <ul id="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#videos">Videos</a></li>
  <li><a href="#sing_alongs">Sing Alongs</a></li>
  <li><a href="#song_writing">Song Writing</a></li>
</ul>
<section id="home">
  <h1 class="poets-fonts">Home</h1>
  <h2>Hi i love to sing and play guitar this is why I wanted to make a website, to help you write your very own song, but more about that in the 'About' section.</h2>  
</section>
<section id="about">
   <h1>About</h1>
   <h2>I will be doing all sorts of things regarding Music, for example, Music Videos, Sing Alongs, Song Writing, and MORE! I will help you write your own song, and I will show you some of my favorit song!</h2>
</section>
<section id="contact">
  <h2>If You Are Having Trouble With Anything </h2>
  <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeEmRFeABD_bplbO35ggcCrw8_-Vcz8SIl05XV_NLlplIw2AQ/viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</section>  
<section id="videos">
   <h1>Videos</h1>
  <h2>Videos Are Coming Soon!<br>I Will Be Having A YOUTUBE CHANNEL<br>The Name Will Be EtoE. But It Is Not Up Yet!</h2>
</section>  

<section id="sing_alongs">
   <h1>Sing Alongs</h1>
  <div id="willow" class="gallery">
  <h1>Willow</h1><br />
 
<a class="button" href="#popup1">Click Here</a>
<div id="popup1" class="overlay">
	<div class="popup">
		<h3>Willow</h3>
		<a class="close" href="#">&times;</a>
		<div class="content">
       <audio id="Willow">

  <source src="https://highmeadowschool.org/students-sites/poet/mp3/Taylor%20Swift%20-%20willow%20%28Official%20Music%20Video%29.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
      <button onclick="playAudio1()" type="button">Play Audio</button>
<button onclick="pauseAudio1()" type="button">Pause Audio</button> 

      
<p>I'm like the water, when the ship road in that night,</p>
      <p>rough on the surface, but you cut through like a knife,</p>
       <p>and if it was an open/shut case, i never would've known from the look on your face,</p>
       <p>lost in your curent like a priceless wine,</p>
       <p>the more that you say the less i know wherever you stray i follow,</p>
       <p>i'm begging for you to take my hand reck my plans thats my man</p>
       <p>life was a willow and it bent right to your wind,head on the pillow i can feel you sneakin' in, </p>
       <p>as if you were a mythical thing like you were a trophy or a champion ring and there was one prize i'd cheat to win, </p>
       <p>the more that you say the less i know werever you stray, i follow i beggin' for you to takemy hand, wreck my plans that's my man,</p>
       <p>you know that my train could take you home anywhere else its hollow I'm begging for you to take my hand wreck my plans that's my man, </p>
       <p>life was a willow and it bent right to your wind, they count me out time and time again, life was a willow and it bent right to your wind, but i come back stonger then a 90's trend, </p>
       <p>wait for the signal and i'll meet you after dark, show me the places where the others gave you scars, now this is an open/shut case, i guess i should've known from the look on your face, every bait-and-switch was a work of art,</p>
      <p>the more that you say the less i know wherever you stray i follow,i'mbegging for you to take my hand,wreck my plans, that's my man, you know that my train could take you home anywhere else in hollow, i'n begging for you to take my hand wreck my plans, that's my man,</p>	
      <p>the more that you say the less i know wherever you stray i follow, i'm begging for you to take my hand, wreck my plans, thats my man you know that my train could take you home, anywhere else is hollow i'm begging for you to take my hand, wreck my plans, that's my man,hey, that's my man,that's my man, yeah that's my man, every bait-and-switch was a work of art, that's my man, hey, that's my man, i'm begging for you to take my hand, wreck my plans, that's my man.</p>
    </div>
	</div>
</div>
</div>
  <div id="cookie_dough" class="gallery">
    <h1>Glitter</h1><br />

  <a class="button pink" href="#popup3">Click Here</a>
<div id="popup3" class="overlay">
	<div class="popup">
		<h3>Glitter</h3>
		<a class="close" href="#">&times;</a>
		<div class="content">
    <audio id="Glitter">
      <source src="https://highmeadowschool.org/students-sites/poet/mp3/BENEE%20-%20Glitter%20%28Official%20Video%29.mp3" type="audio/mpeg">Your browser does not support the audio element.
    </audio>
    <button onclick="playAudio2()" type="button">Play Audio</button>
    <button onclick="pauseAudio2()" type="button">Pause Audio</button>
      
            <p>Everyone else has left now, I bet that dis got you stresed out, wonderin' what can we do know, baby let it burn out, were I can't feel my face mmmmmmmmmmmm minds twisted in weird ways wonderin' what can we do now, baby let in burn out. Glitter sparklin' on your hart know darlin' won't you stay know, i'm here wonderin' what to say your pullin me away now, I know its gettin late now baby, mabye you should stay here with me, lets just make it our own party,stick together like glitter, glitter, glitter, glitter. </p>
      <p>Race ogensed the sunlight wanna have a long night, night mistories, night mistories. Under spotlight don't let me out of your sight, two energies, two energies. Glitter sparklin' on your hart now darlin' won't you stay now,</p>
       <p>i'm here wonderin' what to say your pullin' me away now i know its gettin' late now baby,</p>
       <p>mabye you should stay here with me lets just make it our own party,</p>
       <p>stick together like glitter,  glitter, glitter, glitter.</p>
       <p>Everyone else has left now, i bet that dis got you stressed out wonderin' what can we do now, baby letit burn out.</p>
    </div>
	</div>
</div>
</div>

  <div id="rocky_road" class="gallery">
    <h1>Talkin' About a Revolution</h1><br />

<a class="button tan" href="#popup2">Click Here</a>
<div id="popup2" class="overlay">
	<div class="popup">
		<h3>Talkin' About a Revalution</h3>
		<a class="close" href="#">&times;</a>
		<div class="content">
      <audio id="Revolution">
        <source src="https://highmeadowschool.org/students-sites/poet/mp3/Talkin%27%20Bout%20a%20Revolution.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
      </audio>
      <button onclick="playAudio3()" type="button">Play Audio</button>
      <button onclick="pauseAudio3()" type="button">Pause Audio</button>
      <p>Don't you know there talkin' about a revolotion it sounds like a whisper</p>
      <p>don't you know there talkin' about a revolotion it sounds like a whisper</p>
       <p>while there standing in the well fare lines, cring at the doorsteps of those armies in salvation, waisting time in the uninploiment lines, sitting around waiting for a promotion.</p>
       <p>Don't you know there talkin' about a revolotion, it sounds like a whisper. poor people gonna rise up, and take there share, poor people gonna rise up and take whats theres. Oh I said you better, run run run run run run run, oh i said you better,run run run run run run run.</p>
       <p>Cause finily the tables are starting to turn, talkin' about a revolotion oh no, cause finily the tables are starting to turn, talkin' about a revolotion oh no.</p>
       <p>I've been standing in the well fare lines, cring at the door steps of those armies in silvation, waisting time in the unimploiment lines, sitting around waiting for a proumotion.</p>
       <p>Don't you know there talkin' about a revolotion it sounds like a whisper,</p>
       <p>cause finily the tables are starting to turn talkin' about a revolotion oh no, talkin' about a revolotion oh no, talkin' about a revolotion oh no.  </p>
    </div>
	</div>
  
  
</div>
    
</div>
 </section>
  
  <section style="padding:0;height:auto;" id="song_writing">
    <div style="width:100%;height:auto;background: rgba(0, 0, 0, 0.4)!important;padding-bottom:40px;">
   <h1>Song Writing</h1>
<h2>Song Writing Is Quite Easy If You Have The Right Tools<br>Step By Step, I Will Help You Write Your Song!</h2><h1 style="font-size:20px;">
      <ul>
        <li>1st: Choose your song topic or your title.</li>
        <li>2nd: Write a hook/chorus on your main instrument. "YOU DO NOT NEED A INSTRUMENT!"<li></li>3rd: Write the verses. 4th: Write a brige or a brakedown. Them put it together, there should be two choruses, two verses or one, and you can make cords to go along with your song. Have fun writing your very own song!</li></ul></h1>   
    </div>
  </section>
  


              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');

/* Colors */
.pink {background-color: #ff4d94 !important;}
.tan {background-color: tan !important;}

section{
  width:100vw;
  text-align:center;
}
li a {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #fff;
  text-decoration:none;
  text-transform: uppercase;
  letter-spacing: .1em;
  transition:1s;
}
a:hover {
  color: grey;
  transition:.2s;
}
#home{
  background:#717255;
  padding: 60px 0 40px;

}
#about{
  background:#205963;
   height:auto;
  padding: 60px 0 40px;
}
#contact{
  background:grey;
  height:auto!important;
   padding: 60px 0 0px;
}
#videos{
  background:#411;
  padding: 60px 0 40px;
}4
#sing_alongs{
  background:#123456;
   height:500px;
  padding: 60px 0 0px;
}
#sing_alongs .gallery h1 {
  background-color:#000;
  padding:4px 8px;
  margin: 0 0 20px 0;
  display: inline-block;
}
#song_writing{
 padding: 60px 0 0px; background:url(https://lh3.googleusercontent.com/xyM7WGnKHjJSeZs6T9Cll119CnNPVEWFPOgy9W1BVO2W3tHc0mjdZgKJlvDyesQmiZW-X2tYXISPcw=w2880-h1619-l90-rj);
 background-size:cover;
  height:500px;
}   

h1{
  text-align:center;
  color:white;
  padding:20px;
  font-size:30px;
}
h2{
  text-align:center;
  color:white;
  padding:20px;
  font-size:30px;
  font-family: 'Itim', cursive;
}
#nav{
  text-align:center;
  background:black;
  width:100%;
  padding:20px;
  position:fixed;
  top:0;
}
#nav li{
  display:inline;
  padding:20px;
}
li{
  line-height:1.8;
}

.gallery{
  width:28%;
  height:300px;
  background:pink;
  display:inline-block;
  padding:30px;
  vertical-align:top;
  text-align:center;
}

#willow{ background:url(https://i1.wp.com/homida.com/wp-content/uploads/2020/09/free-download-black-willow-tree-related-keywords-a.jpeg?resize=800%2C600&ssl=1);
  background-size:cover;
  background-position:center;
}
#cookie_dough{ background:url(https://d4musicmarketing.com/wp-content/uploads/2018/02/start-music-career-header.jpg);
  background-size:cover;
  background-position:center;
}
#rocky_road{ background:url(https://st2.depositphotos.com/3225059/5302/i/950/depositphotos_53026781-stock-photo-acoustic-guitar-on-nature.jpg);
  background-size:cover;
  background-position:center;
}
button{
  background:pink;
  padding:20px;
  font-size:18px;
  border-radius:15px;
  border:none;
}
button:hover{
  background:aqua;
}


.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: white;
  margin:auto;
  background:green;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}


              
            
!

JS

              
                $('a[href*="#"]')
  .not('[href="#popup1"]')
  .not('[href="#popup2"]')
  .not('[href="#popup3"]')
  .not('[href="#0"]')
  .click(function(event) {
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });
      var x = document.getElementById("Willow"); 
      var y = document.getElementById("Glitter"); 
      var z = document.getElementById("Revolution"); 

function playAudio1() { 
  x.play(); 
} 

function pauseAudio1() { 
  x.pause(); 
}  

function playAudio2() { 
  y.play(); 
} 

function pauseAudio2() { 
  y.pause(); 
}  

function playAudio3() { 
  z.play(); 
} 

function pauseAudio3() { 
  z.pause(); 
} 
              
            
!
999px

Console