rNdboNq

index.html

<div class="banner_wrapper playlist">
  <a href="https://hlsinki.fi/1.mp3">https://hlsinki.fi/1.mp3</a>
    
  <a href="https://hlsinki.fi/2.mp3">https://hlsinki.fi/2.mp3</a>
    
  <a href="https://hlsinki.fi/3.mp3">https://hlsinki.fi/3.mp3</a>
    
  <a href="https://hlsinki.fi/4.mp3">https://hlsinki.fi/4.mp3</a>
    
  <a href="https://hlsinki.fi/5.mp3">https://hlsinki.fi/5.mp3</a>
    
    <a href="https://hlsinki.fi/6.mp3">https://hlsinki.fi/6.mp3</a>
  <p class="sponsored">Sponsored</p>
  <div class="banner">
    
    <header>hlsinki.fi</header>
    <div class="playback">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="art">
      <!--  scifi circles  -->
      <css-doodle use="var(--scifi)"></css-doodle>
      <!--  iris radial from center pattern  -->
      <css-doodle use="var(--iris)"></css-doodle>
      <!--  iris radial from center triangles  -->
      <css-doodle use="var(--iris2)"></css-doodle>
    </div>


    <!-- <h1 class="ml15">
      <span class="word">Cool<br>music</span>
    </h1>
    <a class="button" href="#">Listen now</a>-->

    <div class="spinning_label">
      <h1>hlsinki</h1>
      <span></span>
    </div>

    <footer>
      Listen now
    </footer>
  </div>
</div>

rndbonq.markdown

rNdboNq

A Pen by BergenBergen BergenBergen on CodePen.

License.

script.babel

// https://tobiasahlin.com/moving-letters/#15

var spinningLabel = anime ({
  targets: ['.spinning_label'],
  rotate: 3000,
  duration: 100000,
  loop: true
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.29.0/css-doodle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.3.2/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

style.scss

.playlist > a {
  font-size: 30px;
}
.banner_wrapper {
  display: flex;
  background: #efefef;
  justify-content: center;
  padding: 10px 0 28px;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.banner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 300px;
  padding-bottom: 30px;
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  background: black;
  color: white;
}

.banner header {
  position: absolute;
  top: 10px;
  left: 10px;
}

.banner footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background: white;
  color: black;
}

.banner footer:after {
  content: "";
  position: absolute;
  background-image: url("https://i.imgur.com/zZEcHBd.png");
  background-repeat: no-repeat;
  background-size: 12px;
  height: 12px;
  width: 12px;
  right: 30px;
  top: 14px;
}

// MARKETPLACE
.marketplace h1 {position: absolute;
display: flex; justify-content: center;
font-size: 22px; margin-bottom: -90px;}

.banner_wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.banner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
  border-radius: 6px;
}

.marketplace .heart {
  background-image: url("https://i.imgur.com/UuMp6wY.png");
  background-repeat: no-repeat;
  background-size: 50px 50px;
  height: 50px;
  width: 50px;
  position: absolute;
}

// DATING
.dating .banner {
  background: #100f24;
}
.dating css-doodle {
  transform: scale(1.6);
  margin-top: -20px;
}
.dating .bankid { text-indent: -99999px; }
.dating .bankid:before {
  content: "";
  position: absolute;
  background-image: url("https://i.imgur.com/pxWH162.png");
  background-repeat: no-repeat;
  background-size: 60px 10px;
  height: 10px;
  width: 60px;
  left: 10px;
  top: 14px;
}


// PLAYLIST

.playlist .banner {
  background: black;
  color: white;
  position: relative;
}

// FOOD


.food h1 {
  top: 66px;
  left: 20px;
  position: absolute;
  background: black;
  padding: 5px;
}
// --
:root {
  --colorEyeBlue: #34495e12;
  --colorEyeDark: #07070715;
  --colorBackground: #111;
  
  // --sizeEye: 80vmin;
  --sizeEye: 220px;
  --sizeBigLine: calc(0.01 * var(--sizeEye));
  --sizeSmallLine: calc(0.003 * var(--sizeEye));;
  --sizeIris: calc(var(--sizeEye) / 2);
}

:root {
  --scifi: (
    :doodle {
      @grid: 1x19 / 100%;    
      position: absolute;
      left: 0;
      top: 0;
    }
    
    @place-cell: center; 
    @size: calc(20% + @i * 4%);
    z-index: 2; 

    border-radius: 100%; 
    border-style: solid;
    border-width: @pick(
      var(--sizeSmallLine),
      var(--sizeSmallLine),
      var(--sizeBigLine)
    );

    border-color: 
      hsla(
        215, @r(40%,50%), @r(70%, 82%), @r(5%, 90%)
      )
      transparent
    ;    


    will-change: transform;
    animation: myanimation @r(4s, 15s) linear alternate infinite;    

    @keyframes myanimation {
      from { transform: rotate(@r(360deg)) }
      to { transform: rotate(@r(360deg)) }
    }    

    @nth(1) { background-color: #000; border: none; z-index: 3; }  
  );
}

:root {
  --iris: (
    :doodle {
      @grid: 1x30 / 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    @place-cell: center;
    @size: 100%;
    z-index: 1; 

    border-radius: 100%;
    border-style: dashed;
    border-width: var(--sizeIris);    
    border-color: var(--colorEyeBlue) var(--colorEyeDark);
    transform: rotate(@r(179deg));
  );
}

:root {  
  --iris2: (
    :doodle {
      @grid: 1x30 / 100%;
      position: absolute;
      left: 0;
      top: 0;      
    }
    z-index: 1;
    @place-cell: center;
    background-color: var(--colorEyeBlue);
    @size: 100%;
    clip-path: polygon(48% 50%, 50% 100%, 52% 50%, 50% 0%);
    transform: rotate(@r(179deg));
  );
}

.art {
  position: relative;
  margin-top: -8px;
  width: var(--sizeEye);
  height: var(--sizeEye);
}

.spinning_label {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  overflow: hidden;
  height: 80px;
  width: 80px;
  background-color: white;
  border-radius: 100%;
  //border: 1px solid blue;
  z-index: 5;
}

.spinning_label h1 {
  z-index: 6;
  font-size: 120%;
  color: black;
}
.spinning_label span {
  background: black;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  position: absolute;
}


// FOOD
.food .banner {
  background: black;
}



body {
  font-family: sans-serif;
}

input[type="submit"],
button,
a.button {
  display: flex;
  // flex-direction: column;
  // align-items: center;
  border: none;
  background-color: #ff9900;
  color: black;
  // border-radius: 7px;
  border-radius: 30px;
  font-size: 14px;
  padding: 10px 20px 12px;
}

a.button {
  // display: inline-flex;
  text-decoration: none;
}



.playback {
  position: absolute;
  left: 12px;
  top: 40px;
  display: inline-flex;
  justify-content: space-between;
  width: 13px;
  height: 13px;
  margin-right: 8px;

  & > span {
    width: 3px;
    height: 100%;
    background-color: white;
    border-radius: 3px;
    transform-origin: bottom;
    transition: opacity 0.3s ease-out;
    animation: bounce 2.2s ease infinite alternate;
    content: '';

    &:nth-of-type(2) {
      animation-delay: -2.2s;
    }

    &:nth-of-type(3) {
      animation-delay: -3.7s;
    }
  }
}

@keyframes bounce {
  10% {
    transform: scaleY(0.3);
  }

  30% {
    transform: scaleY(1);
  }

  60% {
    transform: scaleY(0.5);
  }

  80% {
    transform: scaleY(0.75);
  }

  100% {
    transform: scaleY(0.6);
  }
}