<!-- Paste this Code Block at the top of your Learning Design page -->

<style>

.lj-switcher-wrap {

width: 100%;

border-bottom: 1px solid #E8E8E8;

background: #fff;

margin-bottom: 0;

}

.lj-switcher {

display: flex;

max-width: 980px;

margin: 0 auto;

padding: 0;

}

.lj-tab {

font-family: Inter, -apple-system, sans-serif;

font-size: 16px;

font-weight: 500;

color: #888888;

text-decoration: none;

padding: 12px 16px 10px;

border-bottom: 2px solid transparent;

display: inline-block;

}

.lj-tab:hover { color: #371843; }

.lj-tab.active {

color: #000;

border-bottom-color: #000;

font-weight: 700;

}

@media (max-width: 640px) {

.lj-switcher { padding: 0 20px; }

}

</style>

<div class="lj-switcher-wrap">

<div class="lj-switcher">

<a class="lj-tab" href="/">UX / Product Design</a>

<a class="lj-tab active" href="/learning-design">Learning Design</a>

</div>

</div>

<!-- Paste this Code Block at the top of your UX / Work page -->

<style>

.lj-switcher-wrap {

width: 100%;

border-bottom: 1px solid #E8E8E8;

background: #fff;

margin-bottom: 0;

}

.lj-switcher {

display: flex;

max-width: 980px;

margin: 0 auto;

padding: 0;

}

.lj-tab {

font-family: Inter, -apple-system, sans-serif;

font-size: 16px;

font-weight: 500;

color: #888888;

text-decoration: none;

padding: 12px 16px 10px;

border-bottom: 2px solid transparent;

display: inline-block;

}

.lj-tab:hover { color: #371843; }

.lj-tab.active {

color: #000;

border-bottom-color: #000;

font-weight: 700;

}

@media (max-width: 640px) {

.lj-switcher { padding: 0 20px; }

}

</style>

<div class="lj-switcher-wrap">

<div class="lj-switcher">

<a class="lj-tab active" href="/">UX / Product Design</a>

<a class="lj-tab" href="/learning-design">Learning Design</a>

</div>

</div>