may
25

petpage added

added Lofty Lean - its Lofty Goals but optimized for the HTML cap.

may
16

code validated

all codes should work as intended as of may 2023

may
15

petlookup added

back 2 basics has been added!

may
15

guess who's back

im back 2 coding again. also i hit the html character cap on site.

may
29

userlookup added

Half Empty Half Full has been added!

may
29

petpage added

Lofty Goals, a pet planning layout, has been added!

may
29

petpage added

For The Hoard, a wishlist layout, has been added!

may
28

site update

page created! hee hoo. all updates will be logged in this section

latest

Welcome to Gamut! This is a css-based page curated by Hollis Hypnagog that aims to host a number of contemporary & minimalist layouts. This page also seeks to encourage users to explore html & css by using these templates as a jumpstarter (haha). I hope to semi-regularly add a few new layouts, so please check back often!
If you have any issues, questions, or critique, please dm me at hvman#0247 on discord.

✦

half empty half full

Features an MP3 player and links.

css html

/* half empty half full */
body {
  background-color: #F1F1F1;
  border: none;

}.user-info-table {
    margin-left: 20px !important;

}footer {
    display: none !important;

}.main-sidebar, .site-banner, .main-site-header,
    hr, #header,  .username-text, .sidebar {
    display: none;

}#main{
    background: transparent;
    border: none;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 600px;
    border-radius: 10px;

/* site css override; controls positioning of layout */
  }.wrapper {
    max-width: 600;
    padding: 5 0 0 0;
    margin: auto;
    background: transparent;
    background-attachment: fixed;
    border: none;

/* the background behind everything else */
  }.content {
    margin: auto;
    margin-bottom: 50px;
    background: white;
    border-radius: 10px;
    padding: 0;

}#content{
    border: none;
    margin-left: 20%;
    width: 580px;

/* header image. just change the url & u should be good 2 go */
  }#headerimg {
    background-image: url(https://i.imgur.com/mIgNhsu.jpg);
    background-color: #000;
    background-size: 600px;
    width: 100%;
    border-radius: 10px 10px 0px 0px;
    height: 210px;
    overflow: hidden;
    color: white;
    font:  small-caps bold 5vmin monospace;
    text-align: center;

/* holds navigation buttons */
  }#nav {
    width: 100%;
    height: 30px;
    overflow: hidden;
    background-color: #000;

/* button global styling */
  }.button {
    width: 193.34;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-variant: small-caps;
    font-size: 16px;
    transition-duration: 0.4s;
    cursor: pointer;
    border: none;
    padding: 6px;

/* nav button styling */
  }.button1 {
    color: #ffffff;
    background-color: #000000;

}.button1:hover {
    background-color: #c1c1c1;
    color: #000000;

}#desc {
    padding: 10px;
    height: auto;
    z-index: 5 !important;
    position: relative;
    text-align: justify;

✦

lofty lean

now w/ less excess html! best for big pages

css html

/* lofty goals 2.0 */
 body {
  margin-top: -15px;
  border: none;
  background: #e9eef2;
  background-attachment: fixed;

}#holder {
  width: 860px;
  height: auto;
  padding: 5px;
  border-radius: 10px;
  overflow: hidden;
  margin: auto;
  margin-top: 20px;
  background: #fff;
  border-radius: 5px 5px 0px 0px;

}#petcontainer img {
  border-radius: 5px 5px 0px 0px;

/* TO MATCH COLORS, change the background in h1 and h2, and the border color in petcontainer. */

/* Pet Name Header */
}h1 {
  padding: 4 10 10 10;
  margin-top: 0px;
  margin-bottom: -15px;
  color: #fff;
  background: #0F97CC;
  width: 100%;
  margin-left: -8px;
  font: bold 13px arial, serif;
  text-align:center;

}#petcontainer {
  height: auto;
  padding: 8;
  margin: 2px;
  border: 1px solid #0F97CC;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  float: left;

/* Page Header */
}h2 {
  padding: 5px;
  width: 100%;
  background: #0F97CC;
  margin-top: -5px;
  margin-bottom: -5px;
  color: #fff;
  font: small-caps bold 20px arial, serif;
  text-align: center;
  margin-left: -5px;

/* links back to me! please don't delete, but feel free to adjust the colors as needed to match your layout */

}
.credit {
  border: none;
  background: #d1d1d1;
  color: #e0e0e0;
  padding: 5px;
  height: 40px;
  width: 40px;
  border-radius: 10px;
  text-align: center;
  transition-duration: 0.4s;
  cursor: pointer;
  color: white;
  font:  small-caps bold 2vmin monospace;
  text-align: center;
  right: 20px;
  bottom: 10px;
  position: fixed;

}
.credit:hover {
background: #e6e6e6;
  color: #000;
}

<div id="holder">
<h2>#OWNER's pet goals</h2><br>

</div>

✦

lofty goals

Pet planning page. Live preview here!

css html

/*lofty goals*/
      body {
  margin-top: -15px;
  border: none;
  background-color: #F1F1F1;
 }
  a:link, a:visited {
  color: #666666;
  text-decoration: none;

}
  a:active, a:hover {
  color: #d95950;
  text-decoration: none;

}
#holder{
  width: 850px;
  height: auto;
  padding: 5px;
  overflow: hidden;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 15px;
  background: #ffffff;
}
#desc{
  width: 550px;
  height: auto;
  padding: 10px;
  overflow: hidden;
  margin: auto;
  margin-top: 20px;
  background: #ffffff;

}
#petcontainer {
  width: 200px;
 height: 350px;
  padding 10px;
  margin: 5px;
  float: left;
  border: 1px solid #C1C1C1;
  background: #ffffff;

/* Petname Header */
}
h1 {
  width: 110px;
  padding: 10px 0px 0px 0px;
  margin-top: -5px;
  margin-bottom: -15px;
  border-bottom: 1px solid black;
  color: #000000;
  font:  small-caps bold 20px arial, serif;
  background: transparent;

}
h1:hover {
   color: #C1C1C1;
   transition-duration: 0.4s;

}
h2:hover {
   color: #C1C1C1;
   transition-duration: 0.4s;
}
/* links back to me! please don't delete, but feel free to adjust the colors as needed to match your layout */
.credit {
  border: none;
  background: #d1d1d1;
  color: #e0e0e0;
  padding: 5px;
  height: 40px;
  width: 40px;
  border-radius: 10px;
  text-align: center;
  transition-duration: 0.4s;
  cursor: pointer;
  color: white;
  font:  small-caps bold 2vmin monospace;
  text-align: center;
  right: 20px;
  opacity: 0.4;
  bottom: 10px;
  position: fixed;

}

.credit1 {
background: #c7c7c7;

color: white; 
}

.credit:hover {
background: #e6e6e6;
  color: #000;

<div id="desc"><center><h2>✦ ─── gamut's pet goals ─── ✦</h2></center><br> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br><center> hee hoo enjoy<br>xoxo, hollis<br><img src="https://cdn.discordapp.com/attachments/520522976861356047/972194971681714317/emoji.gif">
</center></div>
<br>
<div id="holder">

<div id="petcontainer"><center>
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/pets/circle/uni_grey_baby.gif">
<br>
<h1>callosus</h1>
<br> 
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/painted_petpet/grey_ghostkerchief.gif"><img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/petpetpet/glack.gif">
<br><br>

<div id="petcontainer"><center>
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/pets/circle/peophin_darigan_baby.gif">
<br>
<h1>shava</h1>
<br> 
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/painted_petpet/darigan_drugal.gif"><img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/petpetpet/moquot.gif">
<br><br>

<div id="petcontainer"><center>
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/pets/circle/uni_brown_baby.gif">
<br>
<h1>texas</h1>
<br> 
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/petpet/doglefox.gif"><img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/petpetpet/jermite.gif">
<br><br>

<div id="petcontainer"><center>
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/pets/circle/peophin_tyrannian_baby.gif">
<br>
<h1>simmons</h1>
<br> 
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/painted_petpet/apple_spyder.gif"><img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/petpetpet/skuffler.gif">
<br><br>

</div>
</center><a href="https://virtu.pet/hypnagog/~Gamut" target="_blank">
<button class="credit">✦</button></a>

✦

for the hoard

Item wishlist page. Live preview here!

css html

body {
  margin-top: -15px;
  border: none;
 background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: url(https://cdn.discordapp.com/attachments/872920662128328707/979405275415072778/john-fowler-RsRTIofe0HE-unsplash.jpg);
}
    a:link, a:visited {
  color: #666666;
  text-decoration: none;

}
  a:active, a:hover {
  color: #6596AA;
  text-decoration: none;

/* Holds the content */  
}
#holder{
  width: 690px;
  height: auto;
  padding: 40px;
  overflow: hidden;
  margin: auto;
  color: #6596AA;
  font: 15px arial, serif;
  background: #ffffff;

/* Holds Item Images. */
}
#itemcontainer {
  width: 140px;
  height: 145px;
overflow: hidden;
  padding: 10;
  margin: 5px;
  float: left;
  text-align: center;
  color: #000;
  border: 1px solid #C1C1C1;
  background: #ffffff;
  font:  1.5vm arial, serif;
  }

#itemcontainer:hover {
   color: #6596AA;
   transition-duration: 0.4s;

/* Description Header */
}
h2 {
  padding: 5px 5px 5px 5px;
  margin-top: -5px;
  margin-bottom: -5px;
  border-bottom: 1px solid black;
  color: #000000;
  font:  small-caps bold 20px arial, serif;
  background: transparent;
   text-align: center;
}
h2:hover {
   color: #6596AA;
   transition-duration: 0.4s;
}
/* links back to me! please don't delete, but feel free to adjust the colors as needed to match your layout */
.credit {
  border: none;
  background: #d1d1d1;
  color: #e0e0e0;
  padding: 5px;
  height: 40px;
  width: 40px;
  border-radius: 10px;
  text-align: center;
  transition-duration: 0.4s;
  cursor: pointer;
  color: white;
  font:  small-caps bold 2vmin monospace;
  text-align: center;
  right: 20px;
  opacity: 0.4;
  bottom: 10px;
  position: fixed;

}

.credit1 {
background: #c7c7c7;

color: white; 
}

.credit:hover {
background: #e6e6e6;
  color: #000;
}

<div id="holder">
<h2>✦ ─── gamut's wishlist ─── ✦</h2><br> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat magna id massa egestas, eu pharetra velit sollicitudin. Nulla consequat massa a augue maximus vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eget aliquet neque. Vestibulum efficitur a felis posuere tempor. Quisque tincidunt rhoncus imperdiet. Mauris dignissim tortor a neque cursus, non tristique sem tempus. Nam at est lorem. Etiam mattis odio viverra nisi facilisis semper. Quisque id volutpat libero, laoreet malesuada leo. Sed sed dignissim magna. In tincidunt vitae diam ac interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
<br> <br><center><img src="https://web.archive.org/web/20091027110029/http://www.geocities.com/Nashville/Stage/7894/parrotbar.gif"></center>
<h2></h2><br><br>

<div id="itemcontainer">
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/gross_food/crunchy_bone_sandwich.gif">
<br><br> Crunchy Bone Sandwich
</div>

<div id="itemcontainer">
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/baked/left_over_turkey_wing_sandwich.gif">
<br><br> Left-Over Turkey Wing Sandwich
</div>

<div id="itemcontainer">
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/magic_item/elephante_transmogrification_potion.gif">
<br><br> Elephante Transmogrification Potion
</div>

<div id="itemcontainer">
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/petpet_supplies/indestructible_petpet_ball.gif">
<br><br> Indestructible Petpet Ball
</div>

<div id="itemcontainer">
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/special/electric_blue_paint_brush.gif">
<br><br> Electric Blue Paint Brush
</div>

<div id="itemcontainer">
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/gross_food/crunchy_bone_sandwich.gif">
<br><br> Crunchy Bone Sandwich
</div>

<div id="itemcontainer">
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/baked/left_over_turkey_wing_sandwich.gif">
<br><br> Left-Over Turkey Wing Sandwich
</div>

<div id="itemcontainer">
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/petpet_supplies/indestructible_petpet_ball.gif">
<br><br> Indestructible Petpet Ball
</div>

<div id="itemcontainer">
<img src="https://virtupetsbucket.s3.us-east-2.amazonaws.com/images/items/special/electric_blue_paint_brush.gif">
<br><br> Electric Blue Paint Brush
</div>

</div>

</center><a href="https://virtu.pet/hypnagog/~Gamut" target="_blank">
<button class="credit">✦</button></a>

✦

back 2 basics

Must have Compact Layout ticked!

css html

body {
    background-image: url(https://i.imgur.com/BS6eyJh.jpg);
background-size: cover;
    color: #000000;

}a{
color: #00c5ff;

}a:hover{ 
color: #ff2e00;

/* Don't mess with any of this stuff SECTION START*/
  }.wrapper {
    border: none;
    background: transparent;
    overflow: visible;
    margin-left: 20%;

}.pet-lookup {
    height: 315px;
    width: 640px;
    margin-left: 20px;
    z-index: 2 !important;
        position: relative;
    overflow: visible !important;
 
  }.petpet span{
    display: none;

}.main-content {
    display: flex;
    flex-direction: column;
    overflow: visible !important;

}.battledome_pet_image, .pet-treasure b, .main-site-header, .main-sidebar, .site-banner, .main-site-footer, hr, .random-event, #header, .sidebar {
    display: none !important;

}#main{
    background: transparent;
    border: none;
/* Don't mess with any of this stuff SECTION END*/

/*  This is the pet name/color/species header. You may need to adjust this if your pet's name is long. */
  }h2{
  z-index: 4;
    position: relative;
    width: auto;

/*  Neomail and Petpage buttons. The text styling isn't controlled here, but in the HTML. Look for the div class="content" nested within bdrop.  */
  }.pet-lookup-buttons{
    margin-top: -166px;
    margin-left: 480px;
    background: #e8e8e8;
    width: 140;
    padding: 4px;
    padding-bottom:10px;
    position: absolute;
    border: 1px solid black;
    border-top: none;
    z-index: 4;

/*  Prevents classic images from being used. If you want to use them, delete the opacity field.  */
  }.neomail-owner img, .visit-pet-page img {
    opacity: 0;

/*  Put any image you want here to change the NEOMAIL icon. Auto sized to fit the default ratio of the classic images.  */
  }a.neomail-owner {
    display: inline-block;
    width: 50px;
    height: 50px;
    content: "";
    background: url(https://i.imgur.com/hdwTKzs.png) no-repeat 0 0;
    background-size: 100%;
    margin-left: 5px;

/*  Put any image you want here to change the PETPAGE icon. Auto sized to fit the default ratio of the classic images.  */
  }a.visit-pet-page {
    width: 50px;
    height: 50px;
    content: "";
    background: url(https://i.imgur.com/yJ0uQnC.png) no-repeat 0 0;
    background-size: 100%;
    margin-left: 8px;

}.pet-statistics {
    background: #e8e8e8 !important;
    padding: 10px;
    margin-left: 5px;
    padding-top: 1px !important;
    width: 10px !important;
    text-align: left !important;
    border: 1px solid black;

}.pet-battledome{
    background: #e8e8e8 !important;
    margin-left: 460px;
    width: 122px;
    height: 113px;
    padding-top: 1px !important;
    padding: 13px;
    position: absolute;
    text-align: left !important;
    padding-bottom: 15;
    border: 1px solid black;

/*  This is the code to add an overlay to your pet. It's resized to be larger. You can change the background image to your desired pet image. */
  }.pet_image {
   background-image: url(https://cdn.discordapp.com/attachments/728470878572249142/1107907501996904510/uni_sketch_baby_waifu2x_art_noise1_scale.png);
    background-repeat: no-repeat;
    background-size: 215px;
    height: 215px;
    width: 215px;
    font-size: 15px;

}.pet_image img {
    display: none;

/*  This affects your treasure, specifically the holder. */
  }.pet-treasure{
    margin-left: 231px;
    padding-top: 0 !important;

}.item-grid {
    width: 415px;
    margin-top: -110px;
 z-index: 4;
    position: absolute;

/*  This affects your treasure, specifically the items in your pet's treasure. */
  }.item {
    width: 79px;
    z-index: -1;
    padding: 23px;

/*-------------------CUSTOM DIVS---------------------*/

}#bdrop{
    background: white;
    width: 610px;
    padding: 10px;
    height: auto;
    z-index: 1;
    position: absolute;
    margin-top: -380px;
    min-height:400px;

}#messagebloq{
    background: #e8e8e8; 
    padding: 5px; 
    margin-top: 182px; 
    width: 138px; 
    height: 50px;
    margin-left: 460px; 
    padding-bottom: 10px;  
    text-align: center; 
    font-variant: small-caps; 
    border: 1px solid black;
  
 }#desc {
    border: 1px solid black;
    margin-top: 171px;
    padding: 10px;
    height: auto;
    z-index: 5 !important;
    position: relative;
    text-align: justify;

/*  Optional header styling. Don't mess with the height, but you can change the color, border style, and font variant. */
 }h6{
    font-size: 15px;
    font-variant: small-caps; 
    height:20px;
    margin-top: 2px;
    margin-bottom: 5px;
    color: #2098fb;
    border-bottom: 1.5px solid pink;

/* links back to me! please don't delete, but feel free to adjust the colors as needed to match your layout */
 }.credit {
    border: none;
    padding: 5px;
  background: #eeeeee;
    color: #5b5b5b; 
    height: 40px;
    width: 40px;
    border-radius: 10px;
    text-align: center;
    transition-duration: 0.4s;
    cursor: pointer;
    font:  small-caps bold 2vmin monospace;
    text-align: center;
    right: 20px;
    opacity: 0.8;
    bottom: 10px;
    position: fixed;

}.credit:hover {
    background: #5b5b5b;
    color: #eeeeee;
 }

Looking for more code? Here are some other pages!

Wanna get linked here? DM me at hvman#0247 on discord.
Credit to Tomo for the music player code!

you are visitor number: