CodePen Embed - Self-Introduction Color Updates

<body class=body-style>
  
  <link href='https://fonts.googleapis.com/css?family=Kaushan Script' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Merienda One' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Jaldi' rel='stylesheet'>
  
  <div class=top-header>
      <img src=https://sandbox.vamacreative.com/XiaofanDu/pictures/Background.jpg class=background-image />
      <h1 class=name-text>Xiaofan Du</h1>
      <div class=quote-text>
        <span>“The world is beautiful and I’m glad to be a part of it”</span>
      </div>
  </div>
  <div class=sections-text>
    <ul>
      <li><span id="HomePageLink" style="font-weight: bold;">About Me</span></li>
      <span class=sections-text-separator>|</span>
      <li><span id="HobbiesPageLink">Interests</span></li>
      <span class=sections-text-separator>|</span>
      <li><span id="WorkExamplesPageLink">Design Note</span></li>
      <span class=sections-text-separator>|</span>
      <li><span id="ContactPageLink">Contact</span></li>
    </ul>
    
    <div class=separator>
    </div>
  </div>
    
    <div id="HomePage" class=identifier-section>
      <span class="identifier" style="
                                      margin: 11% 0px 0px 31%;
                                      height: 330px;
                                      width: 330px;
                                      line-height: 330px;
                                      font-size: 40px;">Creative Designer</span>

      <span class="identifier" style="
                                      margin: 2% 0% 0% 65%;
                                      height: 230px;
                                      width: 230px;
                                      line-height: 230px;
                                      font-size: 35px;">3D Modeler</span>

      <span class="identifier" style="
                                      margin: 36% 0% 0% 65%;
                                      height: 180px;
                                      width: 180px;
                                      line-height: 180px;
                                      font-size: 28px;">Animal Lover</span>

      <span class="identifier" style="
                                      margin: 3% 0% 0% 11%;
                                      height: 200px;
                                      width: 200px;
                                      line-height: 200px;
                                      font-size: 35px;">Artist</span>

      <span class="identifier" style="
                                      margin: 29% 0% 0% 9%;
                                      height: 130px;
                                      width: 130px;
                                      line-height: 130px;
                                      font-size: 24px;">Gamer</span>

      <span class="identifier" style="
                                      margin: 44% 0% 0% 22%;
                                      height: 160px;
                                      width: 160px;
                                      line-height: 160px;
                                      font-size: 26px;">Adventurer</span>
    </div>
  
  <div id="Hobbies" class=section-content style="display: none;">
    <p>I am majoring in graphic design, and web design is ne of my major classes, and also a skill I have to learn to become a digital artist. I am going to transfer to a different university next year and this is a really good practice for me to make my own portfolio and introduction website.</p>
    <p>I'm a very active thinker, but a lot of the time my thoughts are hard to put into words precisely. But when I am designing, I can put all my emotions and thoughts into my artworks. So, for me, every piece of artwork is unique and rich in emotions. We can understand a person through design, and we can communicate with people through design.</p>
    <p>In creating this name card website. I want to show everyone who I am and what I love. I hope that any one who sees it can easily tell that I love our environment, love animals that are living around us. </p>
    <p>I tried my hardest learning website coding techniques to achieve the effect I want, and I will do my best to complete this course and learn more about web design! </p>
  </div>
  
  <div id="WorkExamples" class=section-content style="display: none;">
    <p>When designing this web page, the first thing I want to show to people is my love to nature and exploration. Therefore I chose a photo that I took inside a conservatory and pair it with a quote I came up that really reflects my feeling towards the nature as the top section.</p>
    <p>I mainly chose 3-4 light colors like light green, light yellow, light gray to create this site to match the main point of being close to nature.</p>
    <p>Then I start to think about the tags that would categorize and identify myself and make it easy for people to understand. I used the size of shape to convey the priority. </p>
    <p>I subdivided the content into sections because they are pretty different from each other. And created a navigation bar that helps people go switch around. </p>
  </div>
  
  <div id="Contact" class=section-content style="display: none;">
    <p>E-mail: euna666@yahoo.com</p>
    <p>Instgram: <a href="https://www.instagram.com/xiaofannnnovo">@xiaofannnnovo</a></p>
  </div>
  </div>

</body>

.body-style
{
  background-color: #5e5566;
}

.top-header
{
  width: 100%;
  height: 400px;
  position: relative;
}

.background-image
{
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  filter: blur(3px) drop-shadow(10px 10px 10px #5c5c5c);
}

.name-text
{
  position: absolute;
  color: #8B4513;
  left: 3%;
  bottom: 5%;
  font-size: 90px;
  font-weight: lighter;
  filter: drop-shadow(10px 10px 4px #FFB6C1);
  font-family: 'Kaushan Script';
}

.quote-text
{
  position: absolute;
  bottom: 7%;
  width: 100%;
  text-align: end;
  right: 3%;
}

  .quote-text > span
  {
    position: relative;
    color: #8B4513;
    font-size: 24px;
    font-weight: lighter;
    font-family: 'Merienda One';
    filter: drop-shadow(5px 5px 4px #FFB6C1);
  }

.sections-text
{
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 25px;
  font-family: 'Jaldi';
  padding: 30px 0px 0px 0px;
  color: #FFB6C1;
}

.sections-text > ul
{
  padding-inline-start: 0;
  margin: 0;
}

.sections-text > ul > li
{
    display: inline;
}

.sections-text > ul > li > span
{
    color: #00FA9A;
}

.sections-text > ul > li > span:hover
{
  cursor: pointer;
}


.sections-text-separator
{
  padding: 0px 20px 0px 20px;
}

.separator
{
  position: relative;
  background-color: #FFB6C1;
  width: 70%;
  height: 2.5px;
  margin: auto;
}

.identifier-section
{
  width: 100%;
  height: 600px;
}

.section-content
{
  position: relative;
  width: 80%;
  text-align: center;
  font-size: 23px;
  font-family: 'Jaldi';
  margin: auto;
  color: #FFB6C1;
}

.identifier {
  position: absolute;
  background-color: #FFB6C1;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-family: 'Jaldi';
  font-weight: bold;
  color: #005EB8;
}

document.getElementById("HomePageLink").addEventListener("click", GoToHomePage);
document.getElementById("HobbiesPageLink").addEventListener("click", GoToHobbiesPage);
document.getElementById("WorkExamplesPageLink").addEventListener("click", GoToWorkExamplesPage);
document.getElementById("ContactPageLink").addEventListener("click", GoToContactPage);

function GoToHomePage()
{
  document.getElementById("HomePage").style.display = "";
  document.getElementById("Hobbies").style.display = "none";
  document.getElementById("WorkExamples").style.display = "none";
  document.getElementById("Contact").style.display = "none";
  
  document.getElementById("HomePageLink").style="font-weight: bold;";
  document.getElementById("HobbiesPageLink").style="font-weight: normal;";
  document.getElementById("WorkExamplesPageLink").style="font-weight: normal;";
  document.getElementById("ContactPageLink").style="font-weight: normal;";
}

function GoToHobbiesPage()
{
  document.getElementById("HomePage").style.display = "none";
  document.getElementById("Hobbies").style.display = "";
  document.getElementById("WorkExamples").style.display = "none";
  document.getElementById("Contact").style.display = "none";
  
  document.getElementById("HomePageLink").style="font-weight: normal;";
  document.getElementById("HobbiesPageLink").style="font-weight: bold;";
  document.getElementById("WorkExamplesPageLink").style="font-weight: normal;";
  document.getElementById("ContactPageLink").style="font-weight: normal;";
}

function GoToWorkExamplesPage()
{
  document.getElementById("HomePage").style.display = "none";
  document.getElementById("Hobbies").style.display = "none";
  document.getElementById("WorkExamples").style.display = "";
  document.getElementById("Contact").style.display = "none";
  
  document.getElementById("HomePageLink").style="font-weight: normal;";
  document.getElementById("HobbiesPageLink").style="font-weight: normal;";
  document.getElementById("WorkExamplesPageLink").style="font-weight: bold;";
  document.getElementById("ContactPageLink").style="font-weight: normal;";
}

function GoToContactPage()
{
  document.getElementById("HomePage").style.display = "none";
  document.getElementById("Hobbies").style.display = "none";
  document.getElementById("WorkExamples").style.display = "none";
  document.getElementById("Contact").style.display = "";
  
  document.getElementById("HomePageLink").style="font-weight: normal;";
  document.getElementById("HobbiesPageLink").style="font-weight: normal;";
  document.getElementById("WorkExamplesPageLink").style="font-weight: normal;";
  document.getElementById("ContactPageLink").style="font-weight: bold;";
}

This Pen is owned by Xiaofan Du on CodePen.

See more by @euna666 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.