Get Your Groove On - Profile App

<!-- NOTES-->
<!--
------------------------------- HEADER ---------------------------
FIND <header id="app-header" style="background: url(https://images.rpginitiative.com/uploads/monthly_2019_05/header_urban.jpg.b184ec067b49cbd27137ae00229ce862.jpg);">
REPLACE image link with custom profile field

------------------- FOOTER ------------------------------
FIND <a href="#"><i class="fas fa-link"></i> Plotter</a>
REPLACE # with custom profile field

----------------------- YOUTUBE -----------------------
FIND videoId: 'IOX30CHr4JY'
REPLACE IOX30CHr4JY with custom profile field
instruct users to go to youtube and get the ID on the end of the URL. 
eg.
https://www.youtube.com/watch?v=IOX30CHr4JY
user is to put IOX30CHr4JY into the custom profile field

-->

<div id="app">
  <header id="app-header" style="background: url(https://images.rpginitiative.com/uploads/monthly_2019_05/header_urban.jpg.b184ec067b49cbd27137ae00229ce862.jpg); background-size: cover">
    Character's Name
  </header>
    <!-- the sidebar -->
    <aside id="app-sidebar">
      <h2>Quick Info</h2>
      <div>
        <h3>Age</h3>
        <p>50<!-- CUSTOM PROFILE FIELD HERE --></p>
      </div>
      <div>
        <h3>Height</h3>
        <p>5'5<!-- CUSTOM PROFILE FIELD HERE --></p>
      </div>
      <div>
        <h3>Header</h3>
        <p>Info<!-- CUSTOM PROFILE FIELD HERE --></p>
      </div>
      <div>
        <h3>Header</h3>
        <p>Info<!-- CUSTOM PROFILE FIELD HERE --></p>
      </div>
    </aside>
    <!-- end sidebar -->
    <!-- the main content -->
    <div id="main-content">
      <input type="radio" name="app-tabs" id="history" checked="checked" />
      <label for="history">History</label>
      <input type="radio" name="app-tabs" id="personality" />
      <label for="personality">Personality</label>
      <input type="radio" name="app-tabs" id="notes" />
      <label for="notes">Character Notes</label>
      <div class="tab-content history">
        <!-- CUSTOM PROFILE FIELD HERE -->
        <div style="font-style: italic">Edward James Drewett / Julian Bunetta / Wayne Anthony Hector / Liam James Payne / John Ryan / Louis William Tomlinson</div>
        <p>You've gotta help me, I'm losing my mind Keep getting the feeling you want to leave this all behind Thought we were going strong
I thought we were holding on Aren't we? No, they don't teach you this in school Now my heart's breaking and I don't know what to do Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever All of the rumours, all of the fights But we always find a way to make it out alive Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever Minibars, expensive cars, hotel rooms
And new tattoos, good champagne, and private planes But we don't need anything 'Cause the truth is out I realise that without you here like there's just a lie This is not the end This is not the end We can make it you know it, you know You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever So don't let me go So don't let me go We can live forever Baby don't you know
Baby don't you know We can live forever</p>
        <p>You've gotta help me, I'm losing my mind Keep getting the feeling you want to leave this all behind Thought we were going strong
I thought we were holding on Aren't we? No, they don't teach you this in school Now my heart's breaking and I don't know what to do Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever All of the rumours, all of the fights But we always find a way to make it out alive Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever Minibars, expensive cars, hotel rooms
And new tattoos, good champagne, and private planes But we don't need anything 'Cause the truth is out I realise that without you here like there's just a lie This is not the end This is not the end We can make it you know it, you know You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever So don't let me go So don't let me go We can live forever Baby don't you know
Baby don't you know We can live forever</p>
        <p>You've gotta help me, I'm losing my mind Keep getting the feeling you want to leave this all behind Thought we were going strong
I thought we were holding on Aren't we? No, they don't teach you this in school Now my heart's breaking and I don't know what to do Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever All of the rumours, all of the fights But we always find a way to make it out alive Thought we were going strong Thought we were holding on Aren't we? You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever Minibars, expensive cars, hotel rooms
And new tattoos, good champagne, and private planes But we don't need anything 'Cause the truth is out I realise that without you here like there's just a lie This is not the end This is not the end We can make it you know it, you know You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever You and me got a whole lot of history We could be the greatest thing that the world has ever seen You and me got a whole lot of history So don't let it go, we can make some more, we can live forever So don't let me go So don't let me go We can live forever Baby don't you know
Baby don't you know We can live forever</p>
      </div>
      <div class="tab-content personality">
        <!-- CUSTOM PROFILE FIELD HERE -->
        <div style="font-style:italic">Harold Logan / Loyd Price</div>
        <p>Over and over I tried to prove my love to you Over and over
What more can I do Over and over My friends say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, personality Love, personality And plus you've got A great big heart
So over (over and over) and over Oh, I'll be a fool for you
Now over (over and over) and over What more can I do? 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?
Over and over I said that I loved you Over and over Honey now it's the truth Over and over They still say I'm a fool But over and over
I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality
Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?</p>
        <p>Over and over I tried to prove my love to you Over and over
What more can I do Over and over My friends say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, personality Love, personality And plus you've got A great big heart
So over (over and over) and over Oh, I'll be a fool for you
Now over (over and over) and over What more can I do? 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?
Over and over I said that I loved you Over and over Honey now it's the truth Over and over They still say I'm a fool But over and over
I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality
Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?</p>
        <p>Over and over I tried to prove my love to you Over and over
What more can I do Over and over My friends say I'm a fool But over and over I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, personality Love, personality And plus you've got A great big heart
So over (over and over) and over Oh, I'll be a fool for you
Now over (over and over) and over What more can I do? 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?
Over and over I said that I loved you Over and over Honey now it's the truth Over and over They still say I'm a fool But over and over
I'll be a fool for you 'Cause you've got personality Walk, with personality Talk, with personality Smile, with personality
Charm, with personality Love, with personality And of course you've got A great big heart So over (over and over) and over Oh, I'll be a fool for you Now over (over and over) and over What more can I do?</p>
      </div>
      <div class="tab-content notes">
        <!-- CUSTOM PROFILE FIELD HERE -->
        ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪ ♪
      </div>
    </div>
    <!-- end main content -->
    <!-- the footer -->
    <footer id="app-footer">
      <div id="yt-container">
        <div id="ytplayer"></div>
      </div>
      <div id="app-footer-links">
        <a href="#"><i class="fas fa-link"></i> Plotter</a>
        <a href="#"><i class="fas fa-plus"></i> Wanted Ad</a>
        <a href="#"><i class="fas fa-map-marked"></i> Tracker</a>
        <a href="#"><i class="fas fa-check-square"></i> And another thing</a>
      </div>
      <!-- delete this if you don't need so many links in the footer -->
      <div id="app-footer-links">
        <a href="#"><i class="fas fa-link"></i> Plotter</a>
        <a href="#"><i class="fas fa-plus"></i> Wanted Ad</a>
        <a href="#"><i class="fas fa-map-marked"></i> Tracker</a>
        <a href="#"><i class="fas fa-check-square"></i> And another thing</a>
      </div>
      <!-- end delete all the links -->
    </footer>
  <!-- END FOOTER -->
</div>

<script>// Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '270',
      width: '480',
      color: 'white',
      disablekb: '0',
      videoId: 'IOX30CHr4JY'
    });
  }
</script>

<!-- the following should go into your CSS -->

<style>/* define grid areas */
#app-header { grid-area: header }
#app-sidebar { grid-area: sidebar }
#main-content { grid-area: main }
#app-footer { grid-area: footer }
/* end define grid areas want to shuffle things around? Read about grid here https://css-tricks.com/snippets/css/complete-guide-grid/ */

div#app {
  font-family: sans-serif;
  background: #efefef;
  color: #1a1a1a;
  display: grid;
  grid-template-columns: 15% 22.5% 22.5%;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
  margin: 10px auto
}

#app-header {
  font-size: 2rem;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 7px black, 0 0 5px black, 0 0 2px black;
  color: #efefef;
  padding: 3rem;
  margin-bottom: 10px
}

#app-sidebar {
  top: 5px;
  text-align: center;
  padding: 1%;
  margin-right: 1%
}

#app-sidebar > * {
  margin: 5px 0
}

#app-sidebar h3 {
  text-transform: uppercase;
  border-bottom: 1px dotted #ccc
}

#main-content {
  padding: 10px;
  border-left: 5px solid rgba(0,0,0, .1)
}

#main-content input { 
  display: none 
}

#main-content label {
  color: #1a1a1a;
  cursor: default;
  display: inline-block;
  padding: 10px 
}

#main-content input:not(:checked) + label:hover {
  cursor: pointer
}

#main-content input:checked + label {
  background: #fefefe;
  border-radius: 5px 5px 0 0
}

.tab-content {
  display: none
}

#history:checked ~ .history,
#personality:checked ~ .personality,
#notes:checked ~ .notes {
  display: block;
  background: #fefefe;
  padding: 10px
}

#app-footer {
  background: black;
  margin-top: 10px;
  padding: 10px;
  display: flex;
  color: #ccc
}

#app-footer a {
  color: #efefef;
  text-decoration: none
}

#app-footer-links {
  flex-grow: 2;
  flex-basis: calc(100% - 480);
  padding: 10px;
  display: flex;
  flex-wrap: wrap
}

#app-footer-links a {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  align-self: center;
  width: 100%;
  padding: 10px;
  background: #0a0a0a;
  border: 1px solid black;
  outline: 1px solid #0a0a0a
}

#app-footer-links a:hover {
  background: black;
  border-color: #0a0a0a;
  outline-color: black
}

#app-footer-links a i {
  margin-right: 1em
  }
  
  @media screen and (max-width: 767px) {
	div#app { display: block }
    #app-header { font-size: 1.5rem; padding: 2rem 5px }
    #main-content { border: 0 }
    #main-content label { display: block }
    #main-content input:checked + label { border-radius: 0 }
	#app-sidebar div { display: inline-block; padding: 0 5px; margin: 0 }
    #app-footer { flex-wrap: wrap }
    div#yt-container { width: 100%; overflow: hidden }
    iframe#ytplayer { width: 100% }
  }
</style>