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
Oyinbo say, na BODMAS we dey use dey solve Mathematics for JAGBANJATIS 🕺🏻
Conclusion
On 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 the 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. 👋
You can also connect with me on Twitter