Ponytown Layout! ⋆｡°✩

Tags: layout, simple, my little pony, pony

Description:

A layout based on the online game of PonyTown! (and my FIRST LAYOUT IM POSTING!! AHH) ✩- includes 2 banners, a window below your contact table, and 2 customizable pony skin GIFs! ✩- the pony GIFS are completely customizable and can be changed to be your own skin; all you have to do is export a GIF from the PonyTown character creator, upload it to an image/file host, copy the image address of your upload, and then just replace the URL between the image URL parentheses of the div sections (theyre labelled with HTML comments, so they shouldn't be too hard to find) C: pls comment if you use it!! I'm excited to see if anyone uses it hehe :D If you have any questions or need any help, dont hesitate in adding a comment or asking to IM me if we're friends! and if anything's not working, pls tell me as well (though ive checked and this layout seems to work okay in both chrome and firefox!)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ☆ churro (https://layouts.spacehey.com/layout?id=29295) -->

<!-- this is the ponytown logo -->
 <div style="float:  ; max-height: 400px; position: absolute; right: 280px; top:52px; z-index: 200;">
    <img src="https://files.catbox.moe/3gdmko.png" width="200" height="/"/></div>

<!-- this is the pony gif next to your mood -->
<div style="float:  ; max-height: 400px; position: absolute; left: 460px; top:480px; z-index: 200;">
    <img src="https://files.catbox.moe/16mfpq.gif" width="100" height="/"/></div>



<style>
/*----------- MAIN PROFILE SETTINGS -----------*/

    /*background*/
body {
    background-color: #aef0cb;   
    background-image: url(https://files.catbox.moe/pxlbxf.png);    
    background-attachment: fixed;
    background-size: 150%;
    background-repeat: NO-REPEAT;
    background-position: center;
    
}

.container {
  border: 0px solid lightblue; 
  border-radius: 10px;
  margin-top:20px;
}


main{    
    background-color: rgba(38, 19, 13, .94); 
    border: 2px solid black;
    border-radius: 2px;
    box-shadow: 0px 0px 8px 1px #000;
    /*the color for your text in your profile*/ color: #afa0a7;
    font-family: MS UI Gothic;
}


.profile .contact, .profile .table-section, .profile .url-info {
    border: 0;
    /*erases the border that surrounds contacts and the gif window*/
}

/*border for contact options*/
.profile .contact .inner, .profile .table-section .inner {
    border: black 2px solid;
}

/* mood */
.mood p, .profile .url-info  {
 font-size: 13px;
 font-family: 'MS UI Gothic';
}
.mood b, .profile .url-info b{
  font-family: MS UI Gothic;
  font-size: 14px;
}

.icon {
    content:url(https://files.catbox.moe/p1uwbe.png);
    height: 1.5em;
    width: 1.5em;
}


/*----------- HEADINGS AND BLURBS ----------- */

.profile h1{
 font-size: 20px;
 
}

/* Contacting "your name here" */

.profile .contact .heading h4, .profile .table-section h4 {
  font-size: 14px;
}
.profile .blurbs .inner, .profile .friends .inner, .profile .contact .heading {
  border: 1.6px solid black;
  box-shadow: #72181d 0 2px 2px 1px inset;

}


 /* right column blurb headings*/
.profile .blurbs .heading, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {
  background: #2e140c; 
  box-shadow: #72181d 0 1px 2px 1px inset;
  color: #fbe261;
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: normal;
  border: 2px solid black;
  border-radius: 2px;
}
.profile .friends .heading h4,  .blurbs .heading h4{
 font-weight: normal; 
}

 /* "about me" , "who id like to meet" */
.profile .blurbs .section h4 {
 color: #afa0a7;
 font-weight: bold;
 font-size: 13px;
 font-family: 'ms ui gothic';
}

/*the blurbs regular text*/
.profile .blurbs .section {
 font-size: 17px; 
 font-family: 'ms ui gothic';
 color: white;
}


/* ----------- NAVIGATION BARS ----------- */

nav .links {
 margin-top: 10px;
 margin-bottom: 10px;
 background: #2e140c; 
 box-shadow: #72181d 0 1px 2px 2px inset;
  border: 2px solid black;
  border-radius: 2px;
 padding: 4;
 text-align: center;
}

nav .links a {
   color: #fbe261;
  font-weight: bold;
  padding: 1px
}

nav .links a:hover {
  color: #dad9f0;
  background: linear-gradient(#3d3a7b, #5853b0);
  text-decoration: none;
  padding-top: 0;
}

nav .links li.active a {
  color: #1a586c; 
  font-weight: normal;
}

nav .links li:not(:last-child)::after {
  color: black;
}

/* ----------- TOP SEARCHBAR (nav top)----------- */

nav .top {
 background: #2e140c; 
 border: 2px solid black;
 box-shadow: #72181d 0 8px 8px 1px inset;
}

nav .top a {
 font-family: MS UI Gothic;
 font-size: 13px
}

/* ----------- INTERESTS TABLE ----------- */
.details-table td {
  background-color: #774c3f;
  color: #2f748a;
} 

.details-table td p {
  font-size: 14px;
  font-family: 'ms ui gothic';
  color: white;
} 

.details-table td:first-child {
  background: black;
  text-align: center;
  width: 30%;
  box-shadow: #721e1f 0px 1px 2px 1px inset;
  color: black;
  font-family: ms ui gothic;
  font-size: 15px;
}

/*----------- LINKS ----------- */
.blog-preview a {
 color: #fc9170;
 font-weight: normal;
 font-size: 12px;
 font-family: 'MS UI Gothic';
}

.mood a, .inner a, .friends a {
 color: #fc9170;
 font-size: 13px;
 font-family: 'MS UI Gothic';
}

/*----------- FRIENDS LIST ----------- */

.profile .friends .person img:not(.icon){
  width: 110px;
  height: 110px;
  border: solid black 2px;
  border-radius: 6px;
}

.profile .inner b {
 font-size: 11px; 
 font-family: 'ms ui gothic';
 color: ##afa0a7;
}

.profile .inner span.count {
 color: orange; 
}

.profile .friends .person p {
 font-size: 11px;
 font-family: verdana;
 color: #f17d94;
}

/*----------- COMMENTS ----------- */

table.comments-table{
border: solid black 1px;
}

.comments-table td:first-child {
  background: black;
  text-align: center;
  width: 30%;
  box-shadow: #72181d 0px 4px 8px 2px inset;
}
.comments-table img:not(.icon){
    border: 1px solid black;
    box-shadow: 0px 1px 2px grey;
}

.comments-table td {
 background-color: #72181d;
 border: solid black 1.5px;
}

footer{    
background-color: transparent;    
}

</style>


<!--  ----------- BANNER ; BLOG PREVIEW BANNER : CONTACT TABLE WINDOW ---------------------- -->
<style>

main:before {

height: 140px;
display: block;
content: "";
background-image: url('https://pbs.twimg.com/media/FijVWglXgAMOSIl?format=jpg&name=large');
background-position: center;
background-size: cover;
border: ridge #431c1c 3px;
border-radius: 10px;
margin-bottom: 20px;
margin-top: 10px;
margin-inline-start: 10px;
margin-inline-end: 10px;
}

.blog-preview:before {
  content: "";
  display: block;
  height: 120px;
  background-image: url(https://pbs.twimg.com/media/FijUPGJXEAEw6SC?format=png&name=small);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  margin-bottom: 10px;
  border: 3px ridge #431c1c ;
  border-radius: 10px;

}

.profile .contact:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 170px;
  width: px;
  background-image: url(https://1.bp.blogspot.com/-SxtpJJkou8c/YVnAXCuzZUI/AAAAAAADjK4/PDzV0pp-DysE-XIRkN80w8MJBGji9ctKQCLcBGAsYHQ/s470/update.gif);
  background-repeat: no-repeat;
  background-size: 100%;
  align-content: center;
  border: 4px ridge #431c1c;
  margin-bottom: 10px;
  margin-left: 1px;
  border-radius: 10px;
}


</style>

<!--  ----------- red pony trotting across your screen :3 --------------------- -->

<div class="trot">
<div style="float:  ; max-height: 400px; position: fixed; left: 460px; bottom:0px; z-index: 200;">
    <img src="https://files.catbox.moe/lm9i8b.gif" width="100" height="/"/></div>
</div>

<style>
.trot > *{
    animation: fly 5s linear infinite;
	left: 0;
	position: fixed;
	z-index: 999;
	pointer-events: none;
}
@keyframes fly {
	0% { left: 100%; }
	50% { left: 50%; }
	100% { left: -10%; }
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 7 of 7 comments ( View all | Add Comment )

Nat (AutoPlay Music)	1715843502 Adorbs!! Def using Report Comment
iluvst4gbeetlez	1713635111 using! Report Comment
XxnailbatzxX	1704695318 Using! Report Comment
J4yy	1704231809 using! Report Comment
citrustea.^.🍊✧⁠*⁠♡	1690576349 Definitely using soon Report Comment
r.o.u.s.	1681535008 this looks errmmm EPIC!!!!!1 Report Comment THANK YOUU!!!! :D by ☆ churro; 1681536967; Report