HTML CSS JSResult
*{
  font-family:proxima-nova,sans-serif;
}
html {
  scroll-behavior: smooth;
}
body {

  background: #0e0e0e;
  margin:0;
  padding:0;
  font-family: proxima-nova,sans-serif;
 /* overflow: hidden; */
/* height: 120vh; */

}
#mobile{
    display: none;
}

@-webkit-keyframes intro2{0%{-webkit-transform:translateZ(80px);transform:translateZ(80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-bck{0%{-webkit-transform:translateZ(80px);transform:translateZ(80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes fade-in-bl{0%{-webkit-transform:translateX(-50px) translateY(50px);transform:translateX(-50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-bl{0%{-webkit-transform:translateX(-50px) translateY(50px);transform:translateX(-50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes fade-in-br{0%{-webkit-transform:translateX(50px) translateY(50px);transform:translateX(50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-br{0%{-webkit-transform:translateX(50px) translateY(50px);transform:translateX(50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes fade-in-tl{0%{-webkit-transform:translateX(-50px) translateY(-50px);transform:translateX(-50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-tl{0%{-webkit-transform:translateX(-50px) translateY(-50px);transform:translateX(-50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes fade-in-tr{0%{-webkit-transform:translateX(50px) translateY(-50px);transform:translateX(50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-tr{0%{-webkit-transform:translateX(50px) translateY(-50px);transform:translateX(50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}

/* artist code start here */
/* artist code start here */
/* artist code start here */
/* artist code start here */
/* artist code start here */
.imgW{
  width: 100vw;
  height: 100vh;
  background: red;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
    top:50vh;

  background: #CDCDD1;

  animation: intro 2s ease-in-out;

  animation: intro2 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

  z-index: 9999999;
  overflow: hidden;

  transform-origin: center;
}

.sfmoma{
 margin: 0;

transform: scale(1);


}

/* -text */
.quatation-Wrap{
  position: absolute;
  width: 50vw;
  height: 50vh;
  left: 50vw;
  top: 150vh;
  z-index: 99999999999;
  font-size: 1.25em;
  pointer-events: visible;
  pointer-events: visibleFill;
    /* border-top:  solid 1px  rgba(255,255,255,0.4); */
    /* border-left:  solid 1px  rgba(255,255,255,0.4);
    border-right:  solid 1px  rgba(255,255,255,0.4);
    border-bottom:  solid 1px  rgba(255,255,255,0.4); */

    pointer-events: visible;
    pointer-events: visibleFill;
}
.quatation-Wrap3{
    position: absolute;
    width: 25vw;
    height: 50vh;
    left: 0vw;
    top: 150vh;
    z-index: 99999999999;
    font-size: 1.25em;
    pointer-events: visible;
    pointer-events: visibleFill;
}


.quatation-Wrap4{
    position: absolute;
    width: 25vw;
    height: 50vh;
    left: 0vw;
    top: 150vh;
    z-index: 99999999999;
    font-size: 1.25em;
    text-align: center;
    font-family: proxima-nova, sans-serif;
font-weight: 400;
pointer-events: visible;
pointer-events: visibleFill;
font-style: normal;
/* border-bottom:  solid 1px  rgba(255,255,255,0.4); */
}


  .quatation{
  pointer-events: visible;
  pointer-events: visibleFill;
  margin: 0;
  /* background: yellow; */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  padding: 10px 50px 10px 50px;
  line-height: 1.5;
  font-size: 1em;
  color: #f0f0f0;
  font-family: proxima-nova, sans-serif;
  font-weight: 300;
  }
.azWrap{
  width: 25vw;
  height: 50vh;
    position: absolute;
    left: 25vw;
    top: 150vh;
    z-index: 99999999999;
    font-size: 1em;
    /* background: red; */
    font-style: normal;
    pointer-events: visible;
    pointer-events: visibleFill;
    /* border-bottom:  solid 1px  rgba(255,255,255,0.4); */

}
.az{
  font-size: 3.5rem;
  display: block;
  margin:0px;
  text-align: center;
  pointer-events: visible;
  pointer-events: visibleFill;

}
.a3d{
  text-transform: uppercase;
text-transform: uppercase;
 font-size: 1.4rem;
  top: -12px;
  position: relative;
  text-align: left;
  pointer-events: visible;
  pointer-events: visibleFill;
}

.close{
top: -10px;
text-align: left;
position: relative;
margin: 0;
line-height: 1.5;
font-size: 1em;
color: #f0f0f0;
font-family: proxima-nova, sans-serif;
font-weight: 300;
opacity: .7;
pointer-events: visible;
pointer-events: visibleFill;
}

.quatation-Wrap2{
    position: absolute;
    width: 25vw;
    height: 50vh;
    left: 25vw;
    top: 150vh;
    z-index: 99999999999;
    font-size: 2em;
font-style: normal;
pointer-events: visible;
pointer-events: visibleFill;
}





.artist-name{
  position: relative;
/* left: -8px; */
top: 10px;
  font-size: 1rem;
font-style: normal;
float: right;
}


  /* copy*/
  .copyright-Wrap{
    position: absolute;
    width: 25vw;
    height: 50vh;
    left: 50%;
    top: 200vh;
    z-index: 99999;
    font-family: proxima-nova, sans-serif;
border-right: 1px solid rgba(255,255,255,0.4);
    z-index: 9999;
    overflow: hidden;
    }
  .copyright-text-Wrap{
    height: 50vh;
    width: 25vw;
    font-size: 1rem;
    color: #f0f0f0;
    line-height: 1.5;
    font-family: proxima-nova, sans-serif;
    font-weight: 300;
    top: -42px;
    position: relative;
  }
  .copyright{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    padding: 200px 40px 40px 40px;
  }
  .quatation-Wrap5{
    height: 50vh;
    width: 25vw;
    position: absolute;
    left: 25vw;
    top: 200vh;
    font-size: 1em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: visible;
    pointer-events: visibleFill;

  }
  .quatation5{
    z-index: 9;

    overflow: hidden;
    margin: 0;
    position: absolute;
    line-height: 1.5;
    font-size: 1.25rem;
    color: #f0f0f0;
    font-family: proxima-nova, sans-serif;
    font-weight: 300;
    font-style: italic;
  }


  animation: intro 2s ease-in-out;
  }

  @-webkit-keyframes intro {
  0% {

    opacity: 0;
  }
  50% {

    opacity: 0;
  }


  100% {

    opacity: 1;
  }
  }

/* -text end */




/* old code from page 1 */
/* old code from page 1 */
/* old code from page 1 */
/* old code from page 1 */
/* old code from page 1 */
/* old code from page 1 */
/* old code from page 1 */
/* old code from page 1 */
/* old code from page 1 */
/* old code from page 1 */


.container{

  /* margin-top: -30px; */
  width: 100vw;
  position: relative;
  float: left;
  /* background-color: white; */
  overflow: hidden;
  z-index: -9999999;
  background: #0e0e0e;
  scroll-snap-align: start;
  overflow: hidden;
 height: 250vh;
 z-index: -99999999999999999;
}

/* logo icon */
.logo-Wrap{
    position: absolute;
    width: 25vw;
    height: 50vh;
    top: 0;
  /* position:  fixed; */
  z-index: 99999999;
  pointer-events: visible;
  pointer-events: visibleFill;
  /* background: red; */
}

.logo{
position: relative;
z-index:1;
width: 25vw;
height: 50vh;
transform-origin: center;
transform: scale(.2);
transition: width 2s ease-in-out;

}
.logo:hover{
width: 30vw;
}

/* line start */


.line-vertical{
  z-index: 9999999999999;
  opacity:0.4;
  width: 1px;
  height: 250vh;
  position: absolute;
  background: white;
animation: scale-ver .95s cubic-bezier(0.55,0.05,0.855,0.06) both;
}
.line-vertical-1{
  left: 25vw;

}
.line-vertical-2{
  left: 50vw;
  z-index: 9999999999999;
}
.line-vertical-3{
  left: 75vw;
  height: 100vh;
}




.line-middle{
  z-index: 999999999999999999999999;
  width: 100vw;
  height: 1px;
    opacity:0.4;
  background: white;
  position: absolute;
  opacity:0.4;
animation: scale-ho .95s cubic-bezier(0.55,0.05,0.855,0.06) both;
}
.line-middle-1{
  top: 0vh;
}
.line-middle-2{
  top: 50vh;
}
.line-middle-3{
  top: 100vh;
}
.line-middle-4{
  top: 100vh;
  left: 75%;
  width: 25vw;
  z-index: 999999999999;
}
.line-middle-5{
  top: 150vh;
  z-index: 999999999999999;
}
.line-middle-6{
  top: 200vh;
  z-index: 999999999999999;
}
.line-middle-7{
  top: 249.9vh;
  z-index: 999999999999999;
}




/* line end */

.img-page01-1{
  position: absolute;
  left: 300px;
  animation: intro 3.3s ease-in-out;

}
.img-page01-1.clicked{
  transform: scale(2);
}

/* A img */
.Aimg-Wrap{
    position: relative;
    width: 25vw;
    height: 50vh;
    top: 0vh;
    left: 50%;
    /* background: red; */
    text-align: center;
background: #0e0e0e;
animation: intro 2s ease;
animation: intro2 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

z-index: 999;
}

@-webkit-keyframes intro {
0% {

  opacity: 0;
}
1% {

  opacity: 0;
}


100% {

  opacity: 1;
}
}
.Aimg{
  height: 75%;
  margin: 0;
    /* background: yellow; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}


@-webkit-keyframes intro2{0%{-webkit-transform:translateZ(80px);transform:translateZ(80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-bck{0%{-webkit-transform:translateZ(80px);transform:translateZ(80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes fade-in-bl{0%{-webkit-transform:translateX(-50px) translateY(50px);transform:translateX(-50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-bl{0%{-webkit-transform:translateX(-50px) translateY(50px);transform:translateX(-50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes fade-in-br{0%{-webkit-transform:translateX(50px) translateY(50px);transform:translateX(50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-br{0%{-webkit-transform:translateX(50px) translateY(50px);transform:translateX(50px) translateY(50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{0%{-webkit-transform:translateX(-50px);transform:translateX(-50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes fade-in-tl{0%{-webkit-transform:translateX(-50px) translateY(-50px);transform:translateX(-50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-tl{0%{-webkit-transform:translateX(-50px) translateY(-50px);transform:translateX(-50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes fade-in-tr{0%{-webkit-transform:translateX(50px) translateY(-50px);transform:translateX(50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@keyframes fade-in-tr{0%{-webkit-transform:translateX(50px) translateY(-50px);transform:translateX(50px) translateY(-50px);opacity:0}100%{-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);opacity:1}}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}

/* Menu-icon start */

.halfbox{
    top: 0;
    position: absolute;
    width: calc(25vw/2);
    height: 25vh;
    left: 75%;
    /* background: blue; */
    z-index: 111;
}

.menu-icon-Wrap{
top: 0;
position: absolute;
width: 25vw;
height: 50vh;
left: 75%;
/* background: red; */
display: flex;
align-items: center;
justify-content: center;
background: #0e0e0e;
z-index: 9999;
/* background: red; */
/* position: fixed; */

}



.x-icon-Wrap{
width: 60px;
height: 60px;
position: relative;
background: yellow;
background: #0e0e0e;
z-index: 9999;
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
pointer-events: visible;
pointer-events: visibleFill;



animation: intro 1.5 ease-in-out;
}

@-webkit-keyframes intro {
0% {

  opacity: 0;
}
50% {

  opacity: 0;
}


100% {

  opacity: 1;
}
}



.x-iconWW{
width: 60px;
height: 60px;
position: relative;
/* background: purple; */
display: flex;
align-items: center;
transition: 0.7s ease-in-out;
transform-origin: center;
transition: 0.7s ease-in-out;
/* background: yellow; */
z-index: 9999;
}
.x-icon{
  background: black;
  margin: 0;
  height: 70px;
  width: 1.5px;
  position: absolute;
  left: 50%;
  transition: 0.7s ease-in-out;
  background: white;

}
.x-icon-1{
transform:rotate(-45deg);
transform-origin: center;
}
.x-icon-2{
transform:rotate(45deg);
transform-origin:center;

}

.x-iconWW:hover{
  /* transition: 0.7s ease-in-out; */
  transform: rotate(90deg);
  transform-origin: center;
}
/* X icon END */

/* scroll */
.scroll-Wrap{
    position: absolute;
    width: 25vw;
    height: 50vh;
    top: 50vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background:#0e0e0e;
    z-index: 9999;
}
.scroll-text{
  /* background: yellow; */
  z-index: 111;
margin: 0;  /* height: 100px; */
    font-family: proxima-nova,sans-serif;
    font-weight: 300;
    font-size:1.2rem;
    color: white;
    text-transform: capitalize;
    letter-spacing: 0.25em;

    position: absolute;

animation: intro 1.5s ease-in-out;
}

@-webkit-keyframes intro {
0% {

  opacity: 0;
}
50% {

  opacity: 0;
}


100% {

  opacity: 1;
}
}

.line-scroll{
  z-index: 99;
  position: absolute;
    top: 54%;
  height: 70px;
  width: 1.3px;
  background: rgba(255,255,255,.4);
margin: 0;
  animation: line 1.5s  1.5s infinite ease-in-out both;
  }

  @-webkit-keyframes line {
    0% {
      transform: scaleY(0);
      transform-origin: 0% 100%;
      opacity: 1;
    }
    1% {
      transform: scaleY(1);
      transform-origin: 0% 100%;
      opacity: 1;
    }
    33.3% {
      transform: scaleY(0);
      transform-origin: 0% 100%;
      opacity: 1;
    }
    66.6% {
      transform: scaleY(0);
      transform-origin: 0% 0%;
      opacity: 1;
    }
    100% {
      transform: scaleY(1);
      transform-origin: 0% 0%;
      opacity: 1;
    }
  }

  @-webkit-keyframes opacity {
    0% {
background: black;
      opacity: 1;


    }
    99% {
background: black;
      opacity: 1;


    }

    100% {
  background: white;
      opacity: 0;


    }
  }

  #mobile{
      display: none;
  }

  /* mobile version */
  @media (max-width: 670px) {
    #mobile{
        display: block;
    }
      #desktop
       {
          display: none;
      }

      body {
          background: #0e0e0e;
          width: 100vw;
          height: 100vh;
          pointer-events: none;
      }
      #mobile{
          display: none;
      }

      /* mobile version */
      @media (max-width: 670px) {
        #mobile{
            display: block;
        }
          #desktop
           {
              display: none;
          }

          body {
              background: #0e0e0e;
              width: 100vw;
              height: 100vh;
              pointer-events: none;
          }