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.

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

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

/* controls positioning of layout */
.wrapper {
  max-width: 600;
  padding: 10;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  background: transparent;
  background-attachment: fixed;
  border: none;
}

/* adds gap at bottom of layout */
.content {
  margin: auto;
  margin-bottom: 50px;
}

/* the white box behind all other content */
#bdrop {
  width: 580px;
  height: 95%;
  position: absolute;
  background-color: white;
  border: 1px solid #C1C1C1;
  border-radius: 10px 10px 10px 10px;
  z-index: -1;
  padding: 5px;
  left: 0px;
overflow: hidden;
}

/* header image. just change the url & u should be good 2 go. if you dont want your username to be in all caps, delete "small-caps" */
#headerimg {
  background-image: url(https://i.imgur.com/mIgNhsu.jpg);
  background-size: 700px;
  width: 590px;
  border-radius: 10px 10px 0px 0px;
  height: 297px;
  margin-left: -10;
  border: 1px solid #C1C1C1;
  overflow: hidden;
  background-color: #000000;
  color: white;
  font:  small-caps bold 5vmin monospace;
  text-align: center;
}

/* holds navigation buttons */
#nav {
  margin-top: 93px;
  width: 592px;
  height: 30px;
  overflow: hidden;
  background-color: #000000;

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

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

.button1:hover {
  color: black;
  background-color: #d1e7eb;
  
}
/* 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;

}

.credit1 {
background: #c7c7c7;
  color: white; 
}

.credit:hover {
background: #e6e6e6;
  color: #000;
}
a:link, a:visited {
  color: #666666;
  text-decoration: none;

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

✦

lofty goals

Pet planning page. Live preview here!

/*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!

/*for the hoard*/
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>

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!