Ibrahim Bakare

Ibrahim Bakare

How I built a Tribute page for a Nigerian Musical icon, aka Sound Sultan.

How I built a Tribute page for a Nigerian Musical icon, aka Sound Sultan.

On July 11, 2021, i woke up at the wee hours of the morning and heard the news that Sound Sultan has been lost to cancer😔. so sad to hear which I could not believe my ears.🤧

During the day while I was leafing through my journal to figure out my to-dos. I came up with building a tribute page to pay my last respect and hone my frontend skills.👨‍💻

HTML file structure

I created a class with toggle-btn to hold the toggle and the icon. next to it create class="tributeheader" to hold the tribute title and stage name. I had the <main> tag to hold the content of the tribute as follows, and created class="row" to have 2 columns layout class="col first" class="col second".

<body>
    <div class="toggle-btn">
      <i class="fas fa-adjust"></i>
    </div>
    <div class="tributeheader">
      <h1 class="title">Olanrewaju Abdul-Ganiu Fasasi</h1>
      <h3><span>aka</span> Sound Sultan</h3>
    </div>
    <main>
      <div class="container">
        <div class="row">
          <div class="col first">
            <p class="paragraph">
              <strong>Sound Sultan</strong>
              was a Nigerian rapper, singer, songwriter, actor, comedian, and
              recording artist. ... He was notable for using his music to speak
              against <i>poverty</i>, <i>corruption</i> and
              <i>bad government</i> and <i>ills</i> in Nigeria. He was born in
              Born <strong>27 November 1976, Jos</strong>. Died in
              <strong>July 11 2021</strong>.
            </p>
            <p class="paragraph">
              Sound Sultan released his first single
              <a href="#" target="_blank" rel="noopener">“Jagbajantis”</a> in,
              <strong>2000 </strong>which became an instant hit and was then
              signed to <b>Kennis Music</b> record label. He released four
              albums under the label before his contract expired in
              <strong>2007</strong> and partnered with
              <strong>Baba Dee</strong> to start <strong>Naija Ninjas</strong>,
              a parent organization for a record label, production outfit and
              clothing line.
            </p>

            <p class="paragraph">
              He started off his career as a rapper but soon delved into
              <i> Afrobeat</i>, <i>R&B </i> and Nigerian <i>fuji</i> music. He
              had released numerous albums under <b>Naija Ninjas</b> and had
              signed talented artists including <b>Karma Da Rapper</b>,
              <b>Young GreyC</b>, <b>Shawn and Blacka</b>.
            </p>
            <p class="paragraph">
              Prior to his music career, Sound Sultan used to play Basketball
              for the <b>Dodan Warriors</b>. He later partnered with investors
              and purchased shares in the
              <strong> Lagos Islanders basketball</strong> team in
              <strong>2015</strong> He became a facilitator in the African
              Basketball League and was a special guest at the first<strong>
                NBA African</strong
              >
              Games.
            </p>
          </div>
          <div class="col second">
            <img src="img/SoundSultan.jpeg" alt="" />
            <figcaption>
              "oyinbo say na BODMAS will dey use solve mathematices, for
              JAGBAJANTIS”
            </figcaption>
          </div>
        </div>
      </div>
    </main>
    <script src="index.js"></script>
  </body>

CSS

I assigned shades of CSS colour variables to have nice look background whenever the toggle is switched.

:root {
  /* color variables */
  --title-color: #66899c;
  --body-colour: #696969;
  --background-color: #2b2828;
  --foreground-color: #fff;
  --blend-mode: normal;
}
.dark-theme {
  --title-color: #ffff;
  --body-colour: #afafaf;
  --background-color: #181621;
  --foreground-color: #ebe7e7;
  --blend-mode: lighten;
}

Styling the content and layout was fun all the way.

html {
  scroll-behavior: smooth;
}
body::-webkit-scrollbar {
  display: none;
}
body {
  font-family: "Lato", sans-serif;
  font-size: 18px;
  background: var(--background-color);
  color: var(--foreground-color);
  transition: background-color 1s, color 1s;
}
main {
  margin: 30px;
  max-height: 100%;
  max-width: 1280px;
}
.toggle-btn {
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: 1.2rem;
  right: 1rem;
  display: flex;
  cursor: pointer;
  z-index: 9999;
  background-color: var(--background-color);
}
.toggle-btn i {
  margin: auto;
  font-size: 1.3rem;
  color: white;
}
.title {
  margin-top: 2rem;
}
h3 {
  color: var(--title-color);
  font-family: cursive;
  font-weight: bold;
  transition: background-color 1s, color 1s;
  text-align: center;
  letter-spacing: 1px;
}
h1,
h5 {
  text-align: center;
}

Mobile responsive across all devices

/* Responsive layout - When the screen is less than 650px wide, 
make the columns stack ontop of each other instead of next to each other */
@media screen and (max-width: 650px) {
  .tributeheader {
    margin-top: 85px;
    height: 15px;
  }
  main {
    margin: 10px;
    height: 100%;
  }
  .toggle-btn {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
  }
  .toggle-btn i {
    margin: auto;
    font-size: 1.2rem;
    color: white;
  }
  h1,
  h3 {
    font-size: 20px;
  }
  .row {
    grid-template-columns: 1fr;
  }
  figcaption {
    font-size: 15px;
    font-weight: bold;
    align-self: center;
    width: 80%;
    padding: 12px;
  }

JavaScript

I wrote JavaScript code that works on the toggle button and save the background themes Dark and LIght theme inside local storage. so whenever the session refreshes it stays on default background.

let body = document.body;
let toggleBtn = document.querySelector(".toggle-btn");
let currentTheme = localStorage.getItem("currentTheme");

if (currentTheme) {
    body.classList.add("dark-theme");
}
toggleBtn.addEventListener("click", function () {
    body.classList.toggle("dark-theme");

    if (body.classList.contains("dark-theme")) {
        localStorage.setItem("currentTheme", "themeActive");
    } else {
        localStorage.removeItem("currentTheme");
    }
});

Tribute Page preview

Screen Shot 2021-07-22 at 11.09.31 AM.png

Live Demo

Repo link

Oyinbo say na BODMAS, we dey use dey solve Mathematics for JAGBANJATIS

Conclusion

in this tribute page, while paying our last respect, we have learnt about building 2 columns layouts using FLEXBOX and also a dark theme using JavaScript on toggle switch.

With this knowledge, you can also create a page to practise what I had done,

If you find this article helpful, kindly leave a like ❤️ Thanks for reading. 👋

#web-development#100daysofcode#codenewbies#programming#javascript
 
Share this