Custom ColorsHTMLWorld

Line Count: 61
Difficulty:
Copy
<!---
==== mootshoo world
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#222222 - main background
#383838 - faded background
#efefef - main text
#ffffff - glowing text
#006267 - accent color (buttons, line)
--->
<div class="mx-auto" style="max-width: 900px;">
  <div class="p-md-3 p-2" style="background: #222222; color: #efefef; box-shadow: 0 0 3px rgba(0,0,0,0.2); border-radius: 10px; overflow: hidden;">
    <div class="row no-gutters">
      <div class="col-12 p-2">
        <!--- banner image --->
        <div class="justify-content-center align-items-center text-center" style="background-image: url('IMGURL'); background-size: cover; min-height: 200px; border-radius: 10px;">
          <!--- world title --->
          <h1 class="display-2 font-weight-bold text-uppercase mb-0" style="color: #ffffff; text-shadow: 0 0 3px #ffffff; font-family:'Playfair Display', serif; letter-spacing: 3px;">World Title</h1>
        </div>
      </div>
      <div class="col-md-8 p-2">
        <!--- map image --->
        <div style="background-image: url('IMGURL'); background-size: cover; height: 300px; border-radius: 10px;"></div>
      </div>
      <div class="col-md-4 p-2">
        <div class="p-2 h-100 flex-column justify-content-between" style="background: #383838; border-radius: 10px;">
          <!--- links --->
          <a href="LINK" class="btn text-uppercase font-weight-bold m-1" style="font-size: 17px; background: #006267; color: #efefef; letter-spacing: 2px; font-family:'Playfair Display', serif;">Link</a>
          <a href="LINK" class="btn text-uppercase font-weight-bold m-1" style="font-size: 17px; background: #006267; color: #efefef; letter-spacing: 2px; font-family:'Playfair Display', serif;">Link</a>
          <a href="LINK" class="btn text-uppercase font-weight-bold m-1" style="font-size: 17px; background: #006267; color: #efefef; letter-spacing: 2px; font-family:'Playfair Display', serif;">Link</a>
          <a href="LINK" class="btn text-uppercase font-weight-bold m-1" style="font-size: 17px; background: #006267; color: #efefef; letter-spacing: 2px; font-family:'Playfair Display', serif;">Link</a>
        </div>
      </div>
      <!--- divider --->
      <div class="col-12 py-2">
        <div class="mx-md-n3 mx-n2" style="background: #006267; height: 10px;"></div>
      </div>
      <div class="col-12 p-2">
        <!--- card --->
        <div class="p-3 text-center" style="background: #383838; border-radius: 10px;">
          <!--- paragraphs --->
          <p>Paragraph 1. Pellentesque lobortis lobortis suscipit. Integer mauris tellus, pulvinar sit amet felis id, egestas pulvinar metus. Curabitur congue interdum mauris, vitae pharetra felis laoreet id. Aliquam imperdiet purus eget congue mollis. Sed tristique dolor facilisis, placerat ligula eu, mattis mauris.</p>
          <p>Paragraph 2. Nulla felis quam, commodo in porta nec, volutpat sit amet tellus. Sed sollicitudin est eget mi lacinia, eget efficitur ipsum tristique. Nam gravida, nunc ac dignissim laoreet, dui arcu accumsan nisi, nec interdum est eros at nunc. Donec tincidunt eros et orci rhoncus auctor. </p>
          <p>Paragraph 3. Morbi molestie sodales facilisis. Proin id arcu turpis. Sed ac nibh fermentum, convallis lacus congue, pretium tortor. Sed dignissim iaculis lectus sed placerat. Mauris convallis molestie risus, mollis blandit quam tristique ac. Fusce aliquam condimentum nisl, quis vulputate nisi ornare dapibus.</p>
          <p>Paragraph 4. Sed ut ornare libero. In vitae arcu eu ante placerat dignissim sit amet eu massa. Etiam id egestas purus, et suscipit nibh. Curabitur sed ipsum congue, consectetur magna nec, suscipit metus. </p>
          <p>Paragraph 5. Maecenas in orci a nulla faucibus venenatis sed nec tellus. Nulla nunc libero, malesuada ultrices scelerisque sed, tincidunt vitae nibh. Mauris non tempor leo. Suspendisse lacinia sollicitudin purus non aliquet. Sed posuere nulla non sodales rutrum.</p>
        </div>
      </div>
      <div class="col-12 pt-2">
        <div class="mx-md-n3 mx-n2 mb-md-n3 mb-n2 p-2 text-center" style="background: #006267;">
          <small><a href="/8byte" style="color: #ffffff; font-variant: small-caps;">code by 8byte</a></small>
        </div>
      </div>
    </div>
  </div>
</div>

Password (optional)

Users must enter a password before unlocking this specific version. Please note that this password will only apply to this version.