Jump to content
  • Kami-Iro Awase

       (0 reviews)

    Another moodboard (6 pictures) based on Danganronpa! Hover + lyrics! Please review ❤️


    Actual Template Not Responsive

    Danganronpa
    A Moodboard
    Hope
    or
    Despair?

    Template code

    <link href="https://fonts.googleapis.com/css?family=Syncopate|Roboto" rel="stylesheet">
    <style>
     .drwant {overflow: hidden; width: 300px; height: 540px; position: relative; background: white; border: 3px solid #5ED1EA;}
     .spindle {z-index: 4; width: 300px; height: 300px; position: absolute; top: -120px; left: -110px;}
     .drwant .drtitle {font-family: 'Syncopate', sans-serif; line-height: 1.5; font-size: 16px; font-weight: bold; z-index: 2; width: 290px; height: 25px; position: absolute; transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; transform: rotate(15deg); -webkit- transform: rotate(15deg); -moz- transform: rotate(15deg); -o- transform: rotate(15deg); -ms- transform: rotate(15deg); background: rgba(94,209,234,.5); top: 100px; left: 300px;}
     .drwant:hover .drtitle { transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; top: 38px; left: 75px;}
     .drwant .drtitle2 {font-family: 'Syncopate', sans-serif; line-height: 1.75; font-size: 14px; font-weight: bold; text-align: right; z-index: 2; width: 253px; padding-right: 5px; height: 25px; position: absolute; transition: all 1.7s ease-in-out 1.5s; -moz-transition: all 1.7s ease-in-out 1.5s; -webkit-transition: all 1.7s ease-in-out 1.5s; transform: rotate(15deg); -webkit- transform: rotate(15deg); -moz- transform: rotate(15deg); -o- transform: rotate(15deg); -ms- transform: rotate(15deg); background: rgba(94,209,234,.5); top: -100px; left: -500px;}
     .drwant:hover .drtitle2 {transition: all 1.7s ease-in-out 1s; -moz-transition: all 1.7s ease-in-out 1s; -webkit-transition: all 1.7s ease-in-out 1s; top: 60px; left: 50px;}
     .drwant .details1 {z-index: 3; width: 20px; height: 20px; background: #C6EF49; opacity: 0; position: absolute; top: 32px; left: 255px;}
     .drwant:hover .details1 {transition: all 1.5s ease-in-out 2.5s; -moz-transition: all 1.5s ease-in-out 2.5s; -webkit-transition: all 1.5s ease-in-out 2.5s; -o-transition: all 1.5s ease-in-out 2.5s; opacity: .5}
     .drwant .details2 {z-index: 3; width: 20px; height: 20px; background: #C6EF49; position: absolute; top: 80px; left: 165px; opacity: 0;}
     .drwant:hover .details2 {transition: all 1.5s ease-in-out 2.5s; -moz-transition: all 1.5s ease-in-out 2.5s; -webkit-transition: all 1.5s ease-in-out 2.5s; -o-transition: all 1.5s ease-in-out 2.5s; opacity: .5}
     .drwant .details3 {background: #c6ef49; height: 15px; width: 15px; position: absolute; left: 135px; top: 5px; opacity: 0;}
     .drwant:hover .details3 {transition: all 1.5s ease-in-out 2.5s; -moz-transition: all 1.5s ease-in-out 2.5s; -webkit-transition: all 1.5s ease-in-out 2.5s; -o-transition: all 1.5s ease-in-out 2.5s; opacity: .5}
     .drtextyay {border: 2px solid #5ed1ea; position: absolute; padding: 10px; height: 100px; width: 100px; top: 125px; left: 17px; font-family: 'Roboto', sans-serif; text-align: center; font-size: 12px; border-radius: 100%; line-height: 2; overflow: auto;}
     .drwant .drquote {font-size: 16px; font-family: 'Syncopate', sans-serif; line-height: 2; font-weight: black; top: 277px; width: 300px; height: 100px;; position: absolute; background: rgba(200,0,100,.5); transition: all 2s ease-in-out 5s; -moz-transition: all 2s ease-in-out 5s; -webkit-transition: all 2s ease-in-out 5s; -o-transition: all 2s ease-in-out 5s; -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0); transform: scale(0);}
     .drquote b {color: #EC008C}
     .drwant:hover .drquote {transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); transition: all 2s ease-in-out 5s; -moz-transition: all 2s ease-in-out 5s; -webkit-transition: all 2s ease-in-out 5s; -o-transition: all 2s ease-in-out 5s;}
    </style>
    <center>
     <div class="drwant"><a href="https://rpginitiative.com/profile/2592-penny/"><div class="spindle"><img src="https://images.rpginitiative.com/uploads/monthly_2018_07/large.whooooo.png.21400ae727a252fb28fa1abea13f5e47.png" style="height: 100%; width: 100%;"></div></a>
       <div class="drtitle">Danganronpa</div>
       <div class="drtitle2">A Moodboard</div>
       <div class="details1"></div><div class="details2"></div><div class="details3"></div>
       <div class="drtextyay"><img src="https://placehold.it/100" style="height: 100%; width: 100%; border-radius: 100%"></div>
       <div class="drtextyay" style="left: 160px"><img src="https://placehold.it/100" style="height: 100%; width: 100%;border-radius: 100%"></div>
       <div class="drtextyay" style="top: 265px;"><img src="https://placehold.it/100" style="height: 100%; width: 100%;border-radius: 100%"></div>
       <div class="drtextyay" style="top: 265px; left: 160px;"><img src="https://placehold.it/100" style="height: 100%; width: 100%;border-radius: 100%"></div>
       <div class="drtextyay" style="top: 405px;"><img src="https://placehold.it/100" style="height: 100%; width: 100%;border-radius: 100%"></div>
       <div class="drtextyay" style="top: 405px; left: 160px;"><img src="https://placehold.it/100" style="height: 100%; width: 100%;border-radius: 100%"></div>
       <div class="drquote">Hope<br>or<br><b>Despair?</b></div>
     </div></center>



    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.