BK's Dreg Heap

I've asked all over the world, but there's no answer.

倉庫

Storage

純 CSS 無限滑動效果

純 CSS 伸縮盒子

This is boxes title.

A:
A:

BK-黑暗模式按鈕 v1.0

開發過程存檔


連結卡片 v3.0

開發過程存檔


連結卡片 v2.0

開發過程存檔

連結卡片 v2.0_beta

乾淨模板


連結卡片 v1.0

從舊Blog搬過來的，以前用bulma做的老東西


<!-- 卡片01 Twtter-->
<div class="level-item has-text-centered is-marginless">
  <button
    id="c-btn-01"
    class="button is-white is-large is-paddingless is-marginless"
    onclick="location.href='https://twitter.com/Blackrow_tw'"
  >
    <div class="media" style="padding: 10px">
      <figure class="media-left is-paddingless is-marginless">
        <img
          class="image is-48x48"
          src="/+images/icon/icon-twitter_x512.png"
        />
      </figure>
      <div
        class="media-content"
        style="overflow: hidden; padding: 0px 6px"
      >
        <p class="title is-size-4">Twitter</p>
        <p
          class="text is-size-7 has-text-right has-text-weight-light"
          style="margin-top: -3px"
        >
          Blackrow_tw
        </p>
      </div>
    </div>
  </button>
</div>

<!-- 卡片02 Pixiv-->
<div class="level-item has-text-centered is-marginless">
  <button
    id="c-btn-02"
    class="button is-white is-large is-paddingless is-marginless"
    onclick="location.href='https://www.pixiv.net/users/2407057'"
  >
    <div class="media" style="padding: 10px">
      <figure class="media-left is-paddingless is-marginless">
        <img
          class="image is-48x48"
          src="/+images/icon/icon-pixiv_x512.png"
        />
      </figure>
      <div
        class="media-content"
        style="overflow: hidden; padding: 0px 6px"
      >
        <p class="title is-size-4">
          Pixiv
        </p>
        <p
          class="text is-size-7 has-text-right has-text-weight-light"
          style="margin-top: -3px"
        >
          user2407057
        </p>
      </div>
    </div>
  </button>
</div>

<!-- 卡片03 Twitch-->
<div class="level-item has-text-centered is-marginless">
  <button
    id="c-btn-03"
    class="button is-white is-large is-paddingless is-marginless"
    onclick="location.href='https://www.twitch.tv/blackrowtw'"
  >
    <div class="media" style="padding: 10px">
      <figure class="media-left is-paddingless is-marginless">
        <img
          class="image is-48x48"
          src="/+images/icon/icon-twitch_x512.png"
        />
      </figure>
      <div
        class="media-content"
        style="overflow: hidden; padding: 0px 6px"
      >
        <p class="title is-size-4">
          Twitch
        </p>
        <p
          class="text is-size-7 has-text-right has-text-weight-light"
          style="margin-top: -3px"
        >
         blackrowtw
        </p>
      </div>
    </div>
  </button>
</div>

<!-- 卡片04 Youtube-Channel_01-->
<div class="level-item has-text-centered is-marginless">
  <button
    id="c-btn-04"
    class="button is-white is-large is-paddingless is-marginless"
    onclick="location.href='https://www.youtube.com/channel/UCvhNgXA61EyiiSnMZn-7qcA'"
  >
    <div class="media" style="padding: 10px">
      <figure class="media-left is-paddingless is-marginless">
        <img
          class="image is-48x48"
          src="/+images/icon/icon-youtube_x512.png"
        />
      </figure>
      <div
        class="media-content"
        style="overflow: hidden; padding: 0px 6px"
      >
        <p class="title is-size-4">
          Main
        </p>
        <p
          class="text is-size-7 has-text-right has-text-weight-light"
          style="margin-top: -3px"
        >
        Youtube-Channel_01
        </p>
      </div>
    </div>
  </button>
</div>

<!-- 卡片05 Youtube-Channel_02-->
<div class="level-item has-text-centered is-marginless">
  <button
    id="c-btn-05"
    class="button is-white is-large is-paddingless is-marginless"
    onclick="location.href='https://www.youtube.com/channel/UCtDyeUUMhmFvoydc1b-DQwg'"
  >
    <div class="media" style="padding: 10px">
      <figure class="media-left is-paddingless is-marginless">
        <img
          class="image is-48x48"
          src="/+images/icon/icon-youtube_x512.png"
        />
      </figure>
      <div
        class="media-content"
        style="overflow: hidden; padding: 0px 6px"
      >
        <p class="title is-size-4">
          Stream
        </p>
        <p
          class="text is-size-7 has-text-right has-text-weight-light"
          style="margin-top: -3px"
        >
        Youtube-Channel_02
        </p>
      </div>
    </div>
  </button>
</div>

<!-- 卡片06 Github-->
<div class="level-item has-text-centered is-marginless">
  <button
    id="c-btn-06"
    class="button is-white is-large is-paddingless is-marginless"
    onclick="location.href='https://github.com/Blackrowtw'"
  >
    <div class="media" style="padding: 10px">
      <figure class="media-left is-paddingless is-marginless">
        <img
          class="image is-48x48"
          src="/+images/icon/icon-github_x512.png"
        />
      </figure>
      <div
        class="media-content"
        style="overflow: hidden; padding: 0px 6px"
      >
        <p class="title is-size-4">
          Github
        </p>
        <p
          class="text is-size-7 has-text-right has-text-weight-light"
          style="margin-top: -3px"
        >
        Blackrowtw
        </p>
      </div>
    </div>
  </button>
</div>

<!-- 卡片07 Fanbox-->
<div class="level-item has-text-centered is-marginless">
  <button
    id="c-btn-07"
    class="button is-white is-large is-paddingless is-marginless"
    onclick="location.href='https://blackrow.fanbox.cc'"
  >
    <div class="media" style="padding: 10px">
      <figure class="media-left is-paddingless is-marginless">
        <img
          class="image is-48x48"
          src="/+images/icon/icon-pixivfanbox-2_x512.png"
        />
      </figure>
      <div
        class="media-content"
        style="overflow: hidden; padding: 0px 6px"
      >
        <p class="title is-size-4">
          Fanbox
        </p>
        <p
          class="text is-size-7 has-text-right has-text-weight-light"
          style="margin-top: -3px"
        >
        blackrow
        </p>
      </div>
    </div>
  </button>
</div>

<!-- 卡片08 巴哈姆特-->
<div class="level-item has-text-centered is-marginless">
  <button
    id="c-btn-08"
    class="button is-white is-large is-paddingless is-marginless"
    onclick="location.href='https://home.gamer.com.tw/homeindex.php?owner=backsliding'"
  >
    <div class="media" style="padding: 10px">
      <figure class="media-left is-paddingless is-marginless">
        <img
          class="image is-48x48"
          src=" /+images/icon/icon-bahamut_x512.png"
        />
      </figure>
      <div
        class="media-content"
        style="overflow: hidden; padding: 0px 6px"
      >
        <p class="title is-size-4">
          巴哈姆特
        </p>
        <p
          class="text is-size-7 has-text-right has-text-weight-light"
          style="margin-top: -3px"
        >
        個人小屋 [CN]
        </p>
      </div>
    </div>
  </button>
</div>

<!-- 卡片09 Plurk-->
<div class="level-item has-text-centered is-marginless">
  <button
    id="c-btn-09"
    class="button is-white is-large is-paddingless is-marginless"
    onclick="location.href='https://www.plurk.com/blackrow'"
  >
    <div class="media" style="padding: 10px">
      <figure class="media-left is-paddingless is-marginless">
        <img
          class="image is-48x48"
          src="/+images/icon/icon-plurk_x512.png"
        />
      </figure>
      <div
        class="media-content"
        style="overflow: hidden; padding: 0px 6px"
      >
        <p class="title is-size-4">
          Plurk
        </p>
        <p
          class="text is-size-7 has-text-right has-text-weight-light"
          style="margin-top: -3px"
        >
        放置中-AFK [CN]
        </p>
      </div>
    </div>
  </button>
</div>

<!-- 卡片10 Imgur-old-->
<div class="level-item has-text-centered is-marginless">
  <button
    id="c-btn-10"
    class="button is-white is-large is-paddingless is-marginless"
    onclick="location.href='https://imgur.com/a/klo47'"
  >
    <div class="media" style="padding: 10px">
      <figure class="media-left is-paddingless is-marginless">
        <img
          class="image is-48x48"
          src="/+images/icon/icon-imgur_x512.png"
        />
      </figure>
      <div
        class="media-content"
        style="overflow: hidden; padding: 0px 6px"
      >
        <p class="title is-size-4">
          Imgur
        </p>
        <p
          class="text is-size-7 has-text-right has-text-weight-light"
          style="margin-top: -3px"
        >
        Self-works [old]
        </p>
      </div>
    </div>
  </button>
</div>

<!-- 卡片11 Imgur-2020-->
<div class="level-item has-text-centered is-marginless">
  <button
    id="c-btn-11"
    class="button is-white is-large is-paddingless is-marginless"
    onclick="location.href='https://imgur.com/a/U56JE73'"
  >
    <div class="media" style="padding: 10px">
      <figure class="media-left is-paddingless is-marginless">
        <img
          class="image is-48x48"
          src="/+images/icon/icon-imgur_x512.png"
        />
      </figure>
      <div
        class="media-content"
        style="overflow: hidden; padding: 0px 6px"
      >
        <p class="title is-size-4">
          Imgur
        </p>
        <p
          class="text is-size-7 has-text-right has-text-weight-light"
          style="margin-top: -3px"
        >
        Self-works [2020+]
        </p>
      </div>
    </div>
  </button>
</div>

<style>
  #c-btns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    overflow-x: scroll;
  }


  #c-btns::-webkit-scrollbar {
    height: 0.5em;
    background-color: none;
  }


  #c-btns > div > button {
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -8px;
    transition: all 0.2s ease-out;
  }


  #c-btns > div > button > div {
    width: 200px;
    height: auto;
    transition: all 0.2s ease-out;
  }


  #c-btn-01:hover {
    background-color: #48b2f8;
  }
  #c-btn-02:hover {
    background-color: #0096fa;
  }
  #c-btn-03:hover {
    background-color: #9146ff;
  }
  #c-btn-04:hover {
    background-color: #da4843;
  }
  #c-btn-05:hover {
    background-color: #da4843;
  }
  #c-btn-06:hover {
    background-color: #9c9c9c;
  }
  #c-btn-07:hover {
    background-color: #fbf38a;
  }
  #c-btn-08:hover {
    background-color: #3a8fa7;
  }
  #c-btn-09:hover {
    background-color: #ff9b76;
  }
  #c-btn-10:hover {
    background-color: #89c623;
  }
  #c-btn-11:hover {
    background-color: #89c623;
  }


  #c-btn-01 > div:hover {
    transform: scale(1.02);
  }
  #c-btn-02 > div:hover {
    transform: scale(1.02);
  }
  #c-btn-03 > div:hover {
    transform: scale(1.02);
  }
  #c-btn-04 > div:hover {
    transform: scale(1.02);
  }
  #c-btn-05 > div:hover {
    transform: scale(1.02);
  }
  #c-btn-06 > div:hover {
    transform: scale(1.02);
  }
  #c-btn-07 > div:hover {
    transform: scale(1.02);
  }
  #c-btn-08 > div:hover {
    transform: scale(1.02);
  }
  #c-btn-09 > div:hover {
    transform: scale(1.02);
  }
  #c-btn-10 > div:hover {
    transform: scale(1.02);
  }
  #c-btn-11 > div:hover {
    transform: scale(1.02);
  }
</style>
<script>
let data_base = {
contact_title_01: Twitter, //#1D9BF0
contact_subtitle_01: Blackrow_tw,
contact_title_01: /+images/icon/icon-twitter_x512.png,
contact_title_01: https://twitter.com/Blackrow_tw,


contact_title_02: Pixiv, //#0096FA
contact_subtitle_02: user2407057,
contact_title_02: /+images/icon/icon-pixiv_x512.png,
contact_title_02: https://www.pixiv.net/users/2407057,


contact_title_03: Twitch, //#9146ff
contact_subtitle_03: blackrowtw,
contact_title_03: /+images/icon/icon-twitch_x512.png,
contact_title_03: https://www.twitch.tv/blackrowtw,


contact_title_04: Main, //#C4302B
contact_subtitle_04: Youtube-Channel_01,
contact_title_04: /+images/icon/icon-youtube_x512.png,
contact_title_04: https://www.youtube.com/channel/UCvhNgXA61EyiiSnMZn-7qcA,


contact_title_05: Stream,
contact_subtitle_05: Youtube-Channel_02,
contact_title_05: /+images/icon/icon-youtube_x512.png,
contact_title_05: https://www.youtube.com/channel/UCtDyeUUMhmFvoydc1b-DQwg,


contact_title_06: Github, //#333333
contact_subtitle_06: Blackrowtw,
contact_title_06: /+images/icon/icon-github_x512.png,
contact_title_06: https://github.com/Blackrowtw,


contact_title_07: Fanbox, //#FBF38A
contact_subtitle_07: blackrow,
contact_title_07: /+images/icon/icon-pixivfanbox-2_x512.png,
contact_title_07: https://blackrow.fanbox.cc,


contact_title_08: 巴哈姆特, //#0B7897
contact_subtitle_08: 個人小屋 [CN],
contact_title_08: /+images/icon/icon-bahamut_x512.png,
contact_title_08: https://home.gamer.com.tw/homeindex.php?owner=backsliding,


contact_title_09: Plurk, //#FF9B76
contact_subtitle_09: 放置中-AFK [CN],
contact_title_09: /+images/icon/icon-plurk_x512.png,
contact_title_09: https://www.plurk.com/blackrow,


contact_title_10: Imgur, //#89C623
contact_subtitle_10: Self-works [old],
contact_title_10: /+images/icon/icon-imgur_x512.png,
contact_title_10: https://imgur.com/a/klo47,


contact_title_11: Imgur,
contact_subtitle_11: Self-works [2020+],
contact_title_11: /+images/icon/icon-imgur_x512.png,
contact_title_11: https://imgur.com/a/U56JE73,


// hero-backgrond-01: /assets/images/hero-backgrond-01.jpg
// hero-backgrond-02: /assets/images/hero-backgrond-02.jpg
// hero-backgrond-03: /assets/images/hero-backgrond-03.jpg
// hero-backgrond-04: /assets/images/hero-backgrond-04.jpg
// hero-backgrond-05: /assets/images/hero-backgrond-05.jpg


navbar_logo_image: /assets/images/logo_white_x512.png,


navbar_HOME: <p class="icon-text"><i class="fas fa-home"></i> HOME</p>,
navbar_ABOUT: <p class="icon-text"><i class="fas fa-address-book"></i> ABOUT</p>,
navbar_CONTACT: <p class="icon-text"><i class="fas fa-paper-plane"></i> CONTACT</p>,
navbar_PROJECT: <p class="icon-text"><i class="fas fa-columns"></i> PROJECT</p>,
navbar_MORE: MORE,


// # hero-backgronds:
// #   - url: /assets/images/hero-backgrond-01.jpg
// #   - url: /assets/images/hero-backgrond-02.jpg
// #   - url: /assets/images/hero-backgrond-03.jpg
// #   - url: /assets/images/hero-backgrond-04.jpg
// #   - url: /assets/images/hero-backgrond-05.jpg


// # src="/assets/images/icon-twitter_x512.png"
}
</scrip>

0%