Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <h1>Adopt Me</h1>
  <h5>The wonderful family-friendly full-of-pets game that we all know and love.
Right now, I’ll be talking about things that I like to do in Adopt Me, as well as building hacks, fun in-game secrets, and more 🐱👶🐶</h5>
  <div class="accordion">
    <dl>
      <dt><a class="accordionTitle" href="#">Building Hacks🛠</a></dt>
      <dd class="accordionItem accordionItemCollapsed">
        <p>Depending on what style you want to go with, you might have to pick out a color scheme. Those are helpful for any building games! So if you’re doing a modern-themed home design, you might want to use whites, grays, and black accents.
If you want a more rustic design, you could use browns, tans, and whites.
Of course, you can use whatever colors you desire, but color schemes are especially handy if you want to give your home a little more architectural flare ✨
</p>
      <p>Tip #1: Tour your home by yourself and decide which rooms you want to be what. If you don’t have enough space for something you want like a kitchen or living room, you might have to separate a room and rethink your design layout.</p>  
        <p>Tip #2: Fill all empty spaces with tables, chairs, sitting areas, mirrors, or wall designs (made with shapes and other items). This will make your home feel cozy 🤗 (Plus it’s much easier to decorate in small areas)</p>
        <p>Tip #3: Big spaces don’t usually work. Instead, try to make everything smaller, or the size you really need it to be. 👍</p>
        <p>Tip #4: Get creative with items in Adopt Me and make things the game wouldn’t usually give you. For example, someone made a cake only using the cutting boards and ketchup bottles! 😱</p>
        <p>Tip #5 Lighting is crucial. If you’re making a modern home, I’d suggest using modern-style light fixtures. Use the items in the game that go well with your design.</p>
        <p>Tip #6: If you’re careful, you can actually combine items together to make something else. Some people place seats in their beds so that when they sit on the seat, it looks like they’re really sitting on the bed. 😮</p>
        <p>Tip #7: Use the default shapes and blocks to make custom furniture and other things! This will make your home feel more personalized.</p>
        <p>Tip #8: Use the text signs to make smaller details on your builds. It’s hard to make it work, but totally worth the effort! 😎✨</p>
        <p>Tip #9: Build things for your pets, too! Or even things for roleplaying, or parties, or events! 🐶👶🎄</p>
        <p>Tip #10: The more you practice and create, the more you’ll progress on your builds and designs! Get tips from friends or give them tips from your own experience.
HINT: I know I should’ve mentioned this before 😅 but it’s easier to build if you change your grid size from large to small.</p>
      </dd>
      <dt><a href="#" class="accordionTitle">Becoming a Pro 😎🦄💰</a>
      </dt>
      <dd class="accordionItem accordionItemCollapsed">
        <p>🌸 (information credits to SunsetSafari on Youtube) 🌸
          </p>
<p>
  Video I used: https://www.youtube.com/watch?v=iOGrqDPpOKE</p>
        <p>1: Learn the value of each pet. Pets get ranked by rarity, age, buy price, whether they are a “wanted” pet (in high demand), or if they are neon/mega neon. Personally, I think if you have, let’s say, two ultra-rare pets, realistically, that should be worth a legendary pet. But a lot of players get picky about their pets. Remember this information when trading! 🔁💕</p>
        <p>2: Logging in to Adopt Me every day helps a lot! You can collect your daily prize and maintain a login streak. The new Star Rewards program is also beneficial. If you obtain a certain amount of stars, you can earn a star prize! If you get ALL the star prizes, the very last prize is a special egg. Either a golden egg or a diamond egg 😱
Both the golden egg and the diamond egg will hatch into either a dragon, a griffin, or a unicorn. Each pet corresponds to their egg so if it’s a golden egg, it will be a golden pet. If it’s a diamond egg, it will be a diamond pet.
        </p>
        <p>All of these pets have around the same rarity, regardless of their original rarity (ex: If it’s a golden unicorn, a unicorn’s original rarity is legendary, so it will still be legendary).
Although if you want to keep your egg and not hatch it, there are some players who are willing to give a lot in return for it. You might even be able to get your dream pet with your egg, if you do the right trade. Be careful not to overpay; like if your dream pet is a regular unicorn, you might be overpaying because the egg would be more valuable than a normal pet. Maybe something like a neon legendary pet or a mega-neon would work.</p>
        <p>3: As this may have not been obvious before, but if you’re into trading, you should research rarities and what things are worth. That will give you more of a sense of how to trade for things, so you know what to get for your dream pet, vehicle, or toy.
          Use Youtube videos to help you find the proper worth of a pet.</p>
        </dd>
      <dt><a href="#" class="accordionTitle">Fast Cash 💰</a></dt>
      <dd class="accordionItem accordionItemCollapsed">
      <p>Normally, of course, the fastest way to get cash in Adopt Me is to take care of pets and babies, but there are other ways to get cash faster. Here are some popular methods.</p>
        <p>Method 1:
You can get more cash if you take care of more than one pet/child at a time. Maybe you can ask to adopt someone, or ask if you can take care of someone’s pet. Or both.
Another way you could do this is to make multiple accounts (alt accounts), and take care of those accounts as babies, and maybe even take care of their starter pets.
        </p>
        <p>Method 2: Each season, Adopt Me normally releases a seasonal update (Christmas, Easter, Halloween, etc) and there’s usually some fun minigames to participate in. Those minigames sometimes give you cash and other rewards. So whenever there’s a new update, be sure to check it out!</p>
        <p>Method 3: If you have a lot of cash in Adopt Me, you can put a little bit of that cash into the Build with Friends budget section. You can put all of it, but you might need a little money to play the game with. By leaving some cash in the budget, it acts as a storage, so you’ll probably forget about the money you stored in there. Then when you’ve gotten more cash, you’ll remember that you stored more cash in the budget storage. Kind of like a bank account.</p>
        <p>Method 4: If you have a lemonade stand or a hotdog stand, be sure to use it! Place it in an area where everyone hangs out, and the best place is no other than in front of the nursery! Make sure everyone can see it, and make the price pretty cheap. If you make the stand $1 or $2, people are sure to buy some. Once you’ve established your stand, go off and do something else in the game like earn more bucks, and while you’re earning money, you’ll be earning even MORE money when people buy your lemonade or hotdogs!</p>
        <p>Thank you so much for viewing this page. I know it was a little short, but if you continue to play the game and do research, you will be a better player. If you want to know more, please feel free to check out Adopt Me Youtubers or anywhere else you can get information. I hope you have fun playing this great game. Byee 👋✨</p>

      <dd class="accordionItem accordionItemCollapsed">

      <dd class="accordionItem accordionItemCollapsed">
    </dl>
  </div>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Lato:400,700);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Lato';
  padding:30px;
}

h1 {
  font-size: 2em;
  padding: 10px;
  text-align: center;
}

.accordion dt > a {
  text-align: center;
  font-weight: 700;
  padding: 2em;
  display: block;
  text-decoration: none;
  color: #fff;
  -webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {
  background-color: #a3a3a3;
  color:#fafafa;
  font-size: 1em;
  line-height: 1.5em;
  border:1px white solid;
}
.accordion dd > p {
padding: 10px 90px
}

.accordion {
  position: relative;
  background-color: #fff;
  margin-top:20px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2em 0 2em 0;
}

.accordionTitle {
  background-color: #e6bac3;
  border-bottom: 1px solid #e6bac3;
}
.accordionTitle:before {
  content: "+";
  font-size: 1.5em;
  line-height: 0.5em;
  float: left;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
  background-color: #d1a1ab;
}

.accordionTitleActive {
  background-color:#34495e;
}
.accordionTitleActive:before {
  -webkit-transform: rotate(-225deg);
  -moz-transform: rotate(-225deg);
  transform: rotate(-225deg);
}

.accordionItem {
  height: auto;
  overflow: scroll;
}
@media all {
  .accordionItem {
    max-height: 50em;
    -moz-transition: max-height 1s;
    -o-transition: max-height 1s;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
  }
}
@media screen and (min-width: 48em) {
  .accordionItem {
    max-height: 15em;
    -moz-transition: max-height 0.5s;
    -o-transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s;
    transition: max-height 0.5s;
  }
}

.accordionItemCollapsed {
  max-height: 0;
}

.animateIn {
  -webkit-animation-name: accordionIn;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -moz-animation-name: normal;
  -moz-animation-duration: 0.65s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0s;
  animation-name: accordionIn;
  animation-duration: 0.65s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-delay: 0s;
}

.animateOut {
  -webkit-animation-name: accordionOut;
  -webkit-animation-duration: 0.75s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -moz-animation-name: accordionOut;
  -moz-animation-duration: 0.75s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0s;
  animation-name: accordionOut;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-delay: 0s;
}

@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes accordionIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1);
  }
}
@keyframes accordionIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
}
@-moz-keyframes accordionOut {
  0% {
    opacity: 1;
    -moz-transform: scale(1);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
}
@keyframes accordionOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
              
            
!

JS

              
                /*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}
var classie = {
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};
if ( typeof define === 'function' && define.amd ) {
  define( classie );
} else {
  window.classie = classie;
}
})( window );
var $ = function(selector){
  return document.querySelector(selector);
}
var accordion = $('.accordion');
accordion.addEventListener("click",function(e) {
  e.stopPropagation();
  e.preventDefault();
  if(e.target && e.target.nodeName == "A") {
    var classes = e.target.className.split(" ");
    if(classes) {
      for(var x = 0; x < classes.length; x++) {
        if(classes[x] == "accordionTitle") {
          var title = e.target;
          var content = e.target.parentNode.nextElementSibling;
          classie.toggle(title, 'accordionTitleActive');
          if(classie.has(content, 'accordionItemCollapsed')) {
            if(classie.has(content, 'animateOut')){
              classie.remove(content, 'animateOut');
            }
            classie.add(content, 'animateIn');
          }else{
             classie.remove(content, 'animateIn');
             classie.add(content, 'animateOut');
          }
          classie.toggle(content, 'accordionItemCollapsed');      
        }
      }
    }  
  }
});
              
            
!
999px

Console