I’m struggling with one header banner element, I need to get it: when it is displayed on the page, the text should be displayed on a purple background and on the yellow only the button should be and it should be hidden under the purple one. And so when I click on the button on the yellow background (drop by drop interactive), the yellow comes to the fore and the purple on the second (they cross in the middle are superimposed) an animated text is shown, which is on the yellow background and disappears from purple and a yellow button is shown on a purple background.
On mobile, it should be so that a yellow button is visible on a purple background and when clicked, a yellow background with a purple button is shown.
I hope that it is understandable to get the effect.
The effect should look like this: http://www.marypieroszkiewicz.com/image__files/screen.jpg
HTML
<header id="header" class="header-container js--purple js--yellow">
<div class="header__front">
<div class="header-content header-content--purple" id="purple">
<h1 class="header-content__heading">
<span class="header-content__heading-text">Creative</span>
<span class="header-content__heading-text header-content__heading-text--yellow">Design</span>
<span class="header-content__heading-text">House</span>
<span class="header-content__heading-text"> And </span>
</h1>
<div class="header-content__par header-content__par--1">
<p class="header-content__par-first header-content__par-first--left">projektujemy kreacje <br>do druku i nowych mediów</p>
<p class="header-content__par-second">Tworzymy wizualizacje, które wyróżniają <br>naszych klientów</p>
</div>
</div>
</div>
<div class="header__back">
<div class="header-content header-content--yellow" id="yellow">
<h1 class="header-content__heading">
<span class="header-content__heading-text">Interactive</span>
<span class="header-content__heading-text header-content__heading-text--purple"> Design</span>
<span class="header-content__heading-text"> House</span>
<span class="header-content__heading-text"> And </span>
</h1>
<div class="header-content__par header-content__par--2">
<p class="header-content__par-first header-content__par-first--right">kreatywne podejście <br>do nowych mediów</p>
<p class="header-content__par-second">tworzymy wizualizacje, które wyróżniają <br>naszych klientów</p>
</div>
</div>
</div>
<div class="header__button">
<button class="header__button-box header__button-box--1 js--btn is-active" onclick="focusPurple()"><a href="#purple">Drop by drop creative</a></button>
<button class="header__button-box header__button-box--2 js--btn" onclick="focusYellow()"><a href="#yellow">Drop by drop intereative</a></button>
</div>
</header>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
html {
--scroll-behavior: smooth;
scroll-behavior: smooth;
font-family: "scroll-behavior: smooth";
}
html,
body {
width: 100%;
height: 100%;
}
@media (min-width: 1200px) {
html,
body {
overflow-x: hidden;
}
}
body {
scroll-behavior: smooth;
font-family: "Ubuntu", sans-serif;
height: 100%;
}
a {
text-decoration: none;
}
img {
display: block;
max-width: 100%;
height: auto;
}
li {
list-style: none;
}
h1 {
margin: 0;
}
p {
padding-bottom: 20px;
}
button {
background: none;
border: 0;
}
/* --- CLEARFIX --- */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* --- WEBPAGE CONTAINER --- */
.container {
margin: 0 auto;
width: 100%;
max-width: 1530px;
/* maksymalna szerokość projektu wynosi 1920px */
position: relative;
}
.header-container {
position: relative;
background-size: cover;
min-height: calc(739px / 2);
}
@media (min-width: 768px) {
.header-container {
min-height: calc(800px / 2);
background-size: contain;
}
}
@media (min-width: 1200px) {
.header-container {
min-height: 650px;
background-size: cover;
}
}
@media (min-width: 1920px) {
.header-container {
height: 1048px;
height: 100vh;
}
}
.header-container::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url("http://www.marypieroszkiewicz.com/project_drop__by__drop/images/texture_01.png");
z-index: 3;
pointer-events: none;
}
.header-container::before.js--purple {
}
.header-container::before.js--purple {
}
.header-container::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url("http://www.marypieroszkiewicz.com/project_drop__by__drop/images/texture_02.png");
pointer-events: none;
z-index: 0;
}
.header__front {
margin: 0;
padding: 0;
position: absolute;
top: calc(29% - 24px);
left: 19%;
font-size: 32px;
z-index: 3;
}
@media (min-width: 768px) {
.header__front {
top: calc(25% - 24px);
}
}
@media (min-width: 1200px) {
.header__front {
top: calc(24% - 24px);
}
}
.header__back {
position: absolute;
top: calc(29% - 24px);
right: 11%;
z-index: 1;
}
@media (min-width: 768px) {
.header__back {
top: calc(25% - 24px);
}
}
@media (min-width: 1200px) {
.header__back {
top: calc(24% - 24px);
}
}
.header-content {
display: flex;
flex-direction: column;
}
.header-content--purple {
align-items: start;
left: 12%;
}
@media (min-width: 768px) {
.header-content--purple {
left: 8%;
}
}
@media (min-width: 1200px) {
.header-content--purple {
left: 12%;
}
}
@media (min-width: 1920px) {
.header-content--purple {
left: 19%;
}
}
.header-content--yellow {
align-items: end;
text-align: right;
right: 12%;
}
@media (min-width: 768px) {
.header-content--yellow {
right: 8%;
}
}
@media (min-width: 1200px) {
.header-content--yellow {
right: 12%;
}
}
.header-content__heading {
font-size: 1.875rem;
text-transform: uppercase;
color: #fff;
}
@media (min-width: 768px) {
.header-content__heading {
font-size: 1.5rem;
}
}
@media (min-width: 1200px) {
.header-content__heading {
font-size: 4.375rem;
line-height: 61px;
}
}
@media (min-width: 1920px) {
.header-content__heading {
font-size: 6.75rem;
line-height: 88px;
}
}
.header-content__heading-text:nth-of-type(1) {
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
white-space: normal;
}
.header-content__heading-text:nth-of-type(2) {
font-weight: 500;
}
.header-content__heading-text--yellow {
color: #fac800;
}
.header-content__heading-text--purple {
color: #311e46;
}
.header-content__heading-text:nth-of-type(3) {
font-weight: 400;
}
.header-content__heading-text:nth-of-type(4) {
font-weight: 300;
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
white-space: normal;
}
.header-content__heading-text:nth-of-type(4)::after {
content: "AGENCY";
font-weight: 700;
}
.header-content__par {
color: #fff;
}
.header-content__par-first {
font-size: 1rem;
font-weight: 500;
padding: 0.3125rem 0 0;
text-transform: uppercase;
}
@media (min-width: 768px) {
.header-content__par-first {
font-size: 1.125rem;
}
}
@media (min-width: 1200px) {
.header-content__par-first {
font-size: 1.25rem;
padding-top: 1.563rem;
}
}
@media (min-width: 1920px) {
.header-content__par-first {
font-size: 1.5rem;
padding-top: 4.063rem;
}
}
.header-content__par-first--left {
align-self: start;
}
.header-content__par-first--left::after {
margin-left: -0.125rem;
}
.header-content__par-first--right {
align-self: end;
}
.header-content__par-first--right::after {
margin-right: -0.125rem;
transform: translateX(43px);
}
.header-content__par-first::after {
content: "";
border-bottom: 0.0625rem solid #fff;
width: 170px;
display: block;
padding-top: 0.3125rem;
}
@media (min-width: 768px) {
.header-content__par-first::after {
border-bottom: 0.1875rem solid #fff;
width: 288px;
padding-top: 0.5625rem;
}
}
.header-content__par-second {
font-size: 0.75rem;
font-weight: 400;
font-style: italic;
text-transform: lowercase;
padding-top: 0.3125rem;
padding-bottom: 0;
}
@media (min-width: 768px) {
.header-content__par-second {
font-size: 1rem;
padding-top: 1.25rem;
}
}
@media (min-width: 1200px) {
.header-content__par-second {
font-size: 1rem;
padding-top: 1.375rem;
}
}
@media (min-width: 1920px) {
.header-content__par-second {
font-size: 1.125rem;
padding-top: 2.5rem;
}
}
.header-content__par-second::first-letter {
text-transform: uppercase;
}
.header__button {
position: absolute;
bottom: 6%;
width: 100vw;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
}
@media (min-width: 768px) {
.header__button {
flex-direction: row;
justify-content: space-evenly;
bottom: 11%;
}
}
@media (min-width: 1920px) {
.header__button {
bottom: 17%;
}
}
.header__button-box {
padding: 0.9375rem 1.563rem;
font-size: 0.9375rem;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
}
@media (min-width: 1200px) {
.header__button-box {
padding: 1.125rem 1.938rem;
font-size: 1.25rem;
}
}
@media (min-width: 1920px) {
.header__button-box {
padding: 2.313rem 3.875rem;
}
}
.header__button-box--1 {
border: 0.1875rem solid #333;
color: #333;
z-index: -1;
transform: translateY(51px);
}
@media (min-width: 768px) {
.header__button-box--1 {
border: 0.1875rem solid #fac800;
color: #fac800;
transform: translateY(0px);
z-index: 4;
}
}
.header__button-box--2 {
border: 0.125rem solid #fac800;
color: #fac800;
z-index: 4;
}
@media (min-width: 768px) {
.header__button-box--2 {
border: 0.125rem solid #333;
color: #333;
transform: translateY(0px);
}
}
@media (min-width: 1200px) {
.header__button-box--2 {
z-index: 2;
}
}
.header__heading {
font-size: 1.875rem;
text-transform: uppercase;
}
@media (min-width: 768px) {
.header__heading {
font-size: 1.5rem;
}
}
@media (min-width: 1200px) {
.header__heading {
font-size: 5.938rem;
line-height: 88px;
}
}
@media (min-width: 1920px) {
.header__heading {
font-size: 6.75rem;
}
}
.header__heading-text:nth-of-type(1) {
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
white-space: normal;
}
.header__heading-text:nth-of-type(2) {
font-weight: 500;
}
.header__heading-text--yellow {
color: #fac800;
}
.header__heading-text--purple {
color: #311e46;
}
.header__heading-text:nth-of-type(3) {
font-weight: 400;
}
.header__heading-text:nth-of-type(4) {
font-weight: 300;
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
white-space: normal;
}
.header__heading-text:nth-of-type(4)::after {
content: "AGENCY";
font-weight: 700;
}
.header-first {
font-size: 1rem;
font-weight: 500;
padding: 0.3125rem 0 0;
text-transform: uppercase;
}
@media (min-width: 768px) {
.header-first {
font-size: 1.125rem;
}
}
@media (min-width: 1200px) {
.header-first {
font-size: 1.375rem;
}
}
@media (min-width: 1920px) {
.header-first {
font-size: 1.5rem;
}
}
.header-first::after {
content: "";
border-bottom: 0.0625rem solid #fff;
width: 170px;
display: block;
padding-top: 0.3125rem;
}
@media (min-width: 768px) {
.header-first::after {
border-bottom: 0.1875rem solid #fff;
width: 288px;
padding-top: 0.75rem;
}
}
.header-first--left {
align-self: start;
}
.header-first--left::after {
margin-left: -0.125rem;
}
.header-first--right {
align-self: end;
}
.header-first--right::after {
margin-right: -0.125rem;
transform: translateX(43px);
}
.header-second {
font-size: 0.75rem;
font-weight: 400;
font-style: italic;
text-transform: lowercase;
padding-top: 0.3125rem;
padding-bottom: 0;
}
@media (min-width: 768px) {
.header-second {
font-size: 1rem;
padding-top: 1.25rem;
}
}
@media (min-width: 1200px) {
.header-second {
font-size: 1rem;
padding-top: 1.5rem;
}
}
@media (min-width: 1920px) {
.header-second {
padding-top: 2.5rem;
font-size: 1.125rem;
}
}
.header-second::first-letter {
text-transform: uppercase;
}
.header-content {
display: none;
}
.header-content.is-active {
display: block;
}
JS
document.addEventListener('DOMContentLoaded', function () {
const btns = document.querySelectorAll('.js--btn');
const headerCont = document.querySelectorAll('.header-content');
function mark(e) {
e.preventDefault();
btns.forEach(el => el.classList.remove('is-active'));
this.classList.add('is-active');
const link = this.querySelector('a');
const href = link.getAttribute('href');
const targetTab = document.querySelector(href);
headerCont.forEach(el => el.classList.remove('is-active'));
targetTab.classList.add('is-active');
}
function unmark() {
btns.forEach(el => el.classList.remove('is-active'));
headerCont.forEach(el => el.classList.remove('is-active'));
}
btns.forEach(el => {
el.addEventListener('click', mark);
});
function focusPurple() {
document.querySelector('.js--purple').style.zIndex = 3;
document.querySelector('.js--yellow').style.zIndex = 0;
}
function focusYellow() {
document.querySelector('.js--purple').style.zIndex = 0;
document.querySelector('.js--yellow').style.zIndex = 3;
}
});
My code here: https://codepen.io/mary_pieroszkiewicz/pen/rNNVVBy
All gratitude for help! 