DEV Community

Cover image for Need Help: Merging Background and Menu Codes in Power BI Without JavaScript (Beginner Seeking Guidance)
JovemBoemio
JovemBoemio

Posted on

Need Help: Merging Background and Menu Codes in Power BI Without JavaScript (Beginner Seeking Guidance)

#webdev #powerplatform #beginners #help

Hello everyone!
I hope you're doing well. I'm new to coding, and my background is actually in communication. I'm currently working on a project for Power BI where I need to merge a background code with two menu codes using the buttons, but I can't use JavaScript in this case.
If anyone could provide some guidance or point me in the right direction, I'd greatly appreciate it! Thanks in advance!

This is first code

<video loop muted autoplay playsinline poster='URL/TO/poster.jpg' class='background-video'>
    <source src=' URL/TO ' type='video/mp4'>
    <source src='URL/TO/video.webm' type='video/webm'>
    <source src='URL/TO/video.ogv' type='video/ogv'>
  </video>
  
  <div class='background-video-content'>
  <h1 class='big-title'>PORTAL DEPARTAMENTO DE OBRAS PÚBLICAS</h1>
  <div class='button-container'>
    <button class='shiny-cta'>
      <span>Programa de Aceleração do Crescimento</span>
    </button>
    <button class='shiny-cta'>
      <span>Paineis de Planejamento</span>
    </button>
  </div>
  </div>
  
  <style>
  /* Video Styles */
  .background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh; 
    object-fit: cover; 
    z-index: -1;
  }
  
  /* Page hero */
  .page-hero {
    position: relative;
    overflow: hidden;
  }
  
  .background-video-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    padding: 0 20px;
  }
  
  /* Big Title Styles */
  .big-title {
    font-size: 3rem;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 40px;
  }
  
  /* Container for Buttons */
  /*
  CSS @property and the New Style
  https://ryanmulligan.dev/blog/css-property-new-style/
  */
  @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,500&display=swap');
  .button-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    padding: 0 50px;
  }
  
  :root {
  --shiny-cta-bg: #000000;
  --shiny-cta-bg-subtle: #1a1818;
  --shiny-cta-fg: #ffffff;
  --shiny-cta-highlight: blue;
  --shiny-cta-highlight-subtle: #8484ff;
  }
  
  @property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
  }
  
  @property --gradient-angle-offset {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
  }
  
  @property --gradient-percent {
  syntax: '<percentage>';
  initial-value: 5%;
  inherits: false;
  }
  
  @property --gradient-shine {
  syntax: '<color>';
  initial-value: white;
  inherits: false;
  }
  
  .shiny-cta {
  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 1.5rem 3rem;
  font-family: paralucent;
  font-size: 1.125rem;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 20px;
  color: var(--shiny-cta-fg);
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))
      padding-box,
    conic-gradient(
        from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
        transparent,
        var(--shiny-cta-highlight) var(--gradient-percent),
        var(--gradient-shine) calc(var(--gradient-percent) * 2),
        var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
        transparent calc(var(--gradient-percent) * 4)
      )
      border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
  
  &::before,
  &::after,
  span::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: -1;
  }
  
  &:active {
    translate: 0 1px;
  }
  }
  
  /* Dots pattern */
  .shiny-cta::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
      circle at var(--position) var(--position),
      white calc(var(--position) / 4),
      transparent 0
    )
    padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  border-radius: inherit;
  opacity: 0.4;
  z-index: -1;
  }
  
  /* Inner shimmer */
  .shiny-cta::after {
  --animation: shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(
    -50deg,
    transparent,
    var(--shiny-cta-highlight),
    transparent
  );
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
  }
  
  .shiny-cta span {
  z-index: 1;
  
  &::before {
    --size: calc(100% + 1rem);
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
    opacity: 0;
  }
  }
  
  /* Animate */
  .shiny-cta {
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  transition: var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent,
    --gradient-shine;
  
  &,
  &::before,
  &::after {
    animation: var(--animation) var(--duration),
      var(--animation) calc(var(--duration) / 0.4) reverse paused;
    animation-composition: add;
  }
  
  span::before {
    transition: opacity var(--transition);
    animation: calc(var(--duration) * 1.5) breathe linear infinite;
  }
  }
  
  .shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
  
  &,
  &::before,
  &::after {
    animation-play-state: running;
  }
  
  span::before {
    opacity: 1;
  }
  }
  
  @keyframes gradient-angle {
  to {
    --gradient-angle: 360deg;
  }
  }
  
  @keyframes shimmer {
  to {
    rotate: 360deg;
  }
  }
  
  @keyframes breathe {
  from,
  to {
    scale: 1;
  }
  50% {
    scale: 1.2;
  }
  }
  
  html,
  body {
  height: 100%;
  }
  
  body {
  display: grid;
  place-items: center;
  color: white;
  background: #02040c;
  font-family: 'Paralucent', sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  }
  </style>
Enter fullscreen mode Exit fullscreen mode

This is a First Menu

<body>
    <div class='container'>
        <div class='card'>
            <div class='face face1'>
                <div class='content'>
                    <img src='img-link'>
                    <h3>Title 1</h3>
                </div>
            </div>
            <div class='face face2'>
                <div class='content'>
                    <p>text!</p>
                        <a href='https://'>Saiba mais</a>
                </div>
            </div>
        </div>
        <div class='card'>
            <div class='face face1'>
                <div class='content'>
                    <img src='https://cdn-icons-png.'>
                    <h3>Title 2</h3>
                </div>
            </div>
            <div class='face face2'>
                <div class='content'>
                    <p>text!</p>
                        <a href='https://'>Saiba mais</a>
                </div>
            </div>
        </div>
        <div class='card'>
            <div class='face face1'>
                <div class='content'>
                    <img src='https://cdn-icons-png'>
                    <h3>ICM</h3>
                </div>
            </div>
            <div class='face face2'>
                <div class='content'>
                    <p>Text!</p>
                        <a href='https://'>Saiba mais</a>
                </div>
            </div>
        </div>
    </div>
</body>
<style>
    body{
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #00;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: paralucent;
}

.container{
    width: 1000px;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.container .card{
    position: relative;
    cursor: pointer;
}

.container .card .face{
    width: 300px;
    height: 200px;
    transition: 0.5s;
}

.container .card .face.face1{
    position: relative;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
}

.container .card:hover .face.face1{
    background: #152f4e;
    transform: translateY(0);
}

.container .card .face.face1 .content{
    opacity: 0.2;
    transition: 0.5s;
}

.container .card:hover .face.face1 .content{
    opacity: 1;
}

.container .card .face.face1 .content img{
    max-width: 100px;
}

.container .card .face.face1 .content h3{
    margin: 10px 0 0;
    padding: 0;
    color: #fff;
    text-align: center;
    font-size: 1.5em;
}

.container .card .face.face2{
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-100px);
}

.container .card:hover .face.face2{
    transform: translateY(0);
}

.container .card .face.face2 .content p{
    margin: 0;
    padding: 0;
}

.container .card .face.face2 .content a{
    margin: 15px 0 0;
    display:  inline-block;
    text-decoration: none;
    font-weight: 900;
    color: #333;
    padding: 5px;
    border: 1px solid #333;
}

.container .card .face.face2 .content a:hover{
    background: #333;
    color: #fff;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Second menu ()

<body>
    <div class='container'>
        <div class='card'>
            <div class='face face1'>
                <div class='content'>
                    <img src='img-link'>
                    <h3>Title 1</h3>
                </div>
            </div>
            <div class='face face2'>
                <div class='content'>
                    <p>text!</p>
                        <a href='https://'>Saiba mais</a>
                </div>
            </div>
        </div>
        <div class='card'>
            <div class='face face1'>
                <div class='content'>
                    <img src='https://cdn-icons-png.'>
                    <h3>Title 2</h3>
                </div>
            </div>
            <div class='face face2'>
                <div class='content'>
                    <p>text!</p>
                        <a href='https://'>Saiba mais</a>
                </div>
            </div>
        </div>
        <div class='card'>
            <div class='face face1'>
                <div class='content'>
                    <img src='https://cdn-icons-png'>
                    <h3>ICM</h3>
                </div>
            </div>
            <div class='face face2'>
                <div class='content'>
                    <p>Text!</p>
                        <a href='https://'>Saiba mais</a>
                </div>
            </div>
        </div>
    </div>
</body>
<style>
    body{
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #00;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: paralucent;
}

.container{
    width: 1000px;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.container .card{
    position: relative;
    cursor: pointer;
}

.container .card .face{
    width: 300px;
    height: 200px;
    transition: 0.5s;
}

.container .card .face.face1{
    position: relative;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
}

.container .card:hover .face.face1{
    background: #152f4e;
    transform: translateY(0);
}

.container .card .face.face1 .content{
    opacity: 0.2;
    transition: 0.5s;
}

.container .card:hover .face.face1 .content{
    opacity: 1;
}

.container .card .face.face1 .content img{
    max-width: 100px;
}

.container .card .face.face1 .content h3{
    margin: 10px 0 0;
    padding: 0;
    color: #fff;
    text-align: center;
    font-size: 1.5em;
}

.container .card .face.face2{
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-100px);
}

.container .card:hover .face.face2{
    transform: translateY(0);
}

.container .card .face.face2 .content p{
    margin: 0;
    padding: 0;
}

.container .card .face.face2 .content a{
    margin: 15px 0 0;
    display:  inline-block;
    text-decoration: none;
    font-weight: 900;
    color: #333;
    padding: 5px;
    border: 1px solid #333;
}

.container .card .face.face2 .content a:hover{
    background: #333;
    color: #fff;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

ng_news profile image

Ng-News 24/43: Angular's Future Authoring Format

ng-news -

nozibul_islam_113b1d5334f profile image

The Ultimate Guide to JavaScript Arrays: A Complete Method List (50 Topics)

Nozibul Islam -

ngtduc693 profile image

My Experience with GitHub Copilot

Duc Nguyen Thanh -

travislramos profile image

The Resurgence of Server-Side Rendering in the JavaScript Era

Travis Ramos -