Ouran Highschool Host Club

Tags: pink, blue, yellow, anime, manga, cute, romance, shojo
Description:

This layout had lots of pink, but hey, it’s a lot of pink in the original, so it’s not a big deal.
Preview:

click on the image for a larger preview
Code:

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

<iframe width="0" height="0" src="https://www.youtube.com/embed/xi4JLywH_cA?&#10;//?&;amp;;autoplay=1&;loop=1&;controls=1" title="mlp" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<div style="float:  ; max-height: 400px; position: fixed; right: 1px; bottom: 9px; z-index: 200;">
<img src="https://i.postimg.cc/Kv6cZ1tV/Untitled347-20230808101955.png" width="" height="200px"/></div>

<style>
/*** SPROCKET FONT ***/
@font-face {
font-family: "Sprocket";
src: url("https://file.garden/ZM7iki0EPHK4dl0B/Sprocket_BT.ttf");
}
</style>

<style>
/*** LOGO REPLICATING THE ENGLISH LOGO ***/
.logo {
content:url("https://i.postimg.cc/Jz2smQ9r/Untitled307-20230807123545.png");
}
</style>

<style>
/*** LOADING SCREEN ***/
body::before {
content: "";
display: block;
position: fixed;
left: -32px;
top: 0;
width: calc(100% + 32px);
height: calc(100% + 32px);
background-image: url(https://images.gr-assets.com/hostedimages/1591467985ra/29604879.gif);
background-size: cover;
background-position: center;
background-repeat: repeat;
z-index: 10000000;
animation: ScanlineAnimationRight 0.2s linear infinite;
pointer-events: none;
opacity: 1;
animation: hide 0.9s linear 1s 1 forwards;
}

@keyframes hide {
to {
opacity: 0;
}
}
</style>

<style>
/*** BANNER ***/
main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image:
url('https://i.postimg.cc/BZjDn0R0/IMG-4927.png');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}
</style>

<style>
/*** MAIN ***/
main {
    background: rgba(255, 240, 220, 0.51);
    color: black;
    font-family: 'Sprocket';
    border: 1px dotted #E95CA0;
}
</style>

<style>
/*** BODY ***/
body {
    background:
url(https://wallpapercave.com/wp/wp2031028.jpg) no-repeat rgba(255, 180, 220);
    background-position: fixed;
    background-size: cover;
    background-position: center top;
}
</style>

<style>
/*** FRIENDS  ***/
.person img {
    width: 100px;
    -webkit-mask-image: url(https://i.postimg.cc/jSDjxKM7/Untitled337-20230807135636.png);
    -webkit-mask-size: 112.5%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
     filter: invert(50%) sepia(57%) saturate(632%) hue-rotate(283deg) brightness(92%) contrast(98%);
    opacity: 1;
    filter: alpha(opacity=100);
    transition: all 1.5s ease;
}

.person img:hover {
        filter: none;
        filter: alpha(opacity=50);
	-webkit-transition: all .4s linear 0s;
	-moz-transition: all .4s linear 0s;
	-ms-transition: all .4s linear 0s;
	-o-transition: all .4s linear 0s;
	transition: all .4s linear 0s;
}

.friends a p{
  color: #DC6DA0 !important;
  font-size: 14px !important;
}
</style>

<style>
/*** HEART-SHAPED PFP ***/
.general-about .profile-pic img {
-webkit-mask-image: url(https://i.postimg.cc/jSDjxKM7/Untitled337-20230807135636.png);
-webkit-mask-size: 112.5%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
</style>

<style>
/*** CURSOR ***/
cursor: url(https://i.postimg.cc/Fz9Wh4JL/Untitled340-20230807163853.png), auto;
}
</style>

<style>
/*** ICON ***/
.icon, .award img {
content:url(https://i.postimg.cc/QCdkMLp9/Untitled323-20230807164511.png);
display: inline-block;
height: 1.5em;
width: 1.5em;
margin: 0 .05em 0 .1em;
vertical-align: -0.3em;
color: none;
}
</style>

<style>
/*** LINK COLOR ***/
a{
  color: #a0a0c8 !important;
}
a:hover{
  color: #a0a0dc !important;
}
</style>

<style>
/*** FOOTER ***/
footer:before {
    content: url(https://i.postimg.cc/GhBxqL87/Untitled342-20230807170229.png);
}
footer {
    background:
url(https://i.pinimg.com/originals/2c/f7/ff/2cf7ffeb2ee64c8febf9ac0b5a330af9.jpg);
    background-size: cover;
    background-position: center top;
    font-family: 'Sprocket';
    color: #E95CA0;
    border: 4px solid #E95CA0;
    border-radius: 16px;
}
footer a, footer p {
    font-size: 7px;
}
footer a {
    color:#ffb4dc !important;
}
</style>

<style>
/*** COUNT ***/
.count {
    color: #ffb4dc;
}
</style>

<style>
/*** ONLINE & OFFLINE ***/
.online {
content:url("https://i.postimg.cc/630fCb1d/Untitled319-20230807215555.png");
}

.online img  {
  display: none;
}
    
time.ago {
    color: #E95CA0;
}
</style>

<style>
/*** NAVIGATION ***/
nav .top {
background:url(https://i.pinimg.com/originals/8e/15/68/8e15689702d10a9df30f320ce7095794.jpg);
    background-size: cover;
    background-position: center top;
}
nav .links {
    background: rgba(255, 220, 240, 0.51);
    border-top: 1px dotted #E95CA0;
    border-bottom: 1px dotted #E95CA0;
}
nav .links .special a {
    color: #a0a0c8;
}

nav ul.links a {
    color: #a0a0c8;
    font-family: 'Sprocket' !important;
    text-shadow: none;
}

nav ul.links a:hover {
  color: #a0a0dc !important;
}
nav ul.links {
    padding-top: 10px;
}
nav ul.links li:not(:last-child)::after {
content: url(https://i.postimg.cc/QCdkMLp9/Untitled323-20230807164511.png);
    padding-left: 5px;
    text-align: left;
}
input#q {
    background: rgba(255, 220, 240, 0.51);
    color: #E95CA0;
    border: 1px dotted #E95CA0;
    border-radius: 0px;
}
nav .links li .icon{
content:
url(https://i.postimg.cc/KvF48zkq/Untitled348-20230808091128.png);
}
nav label {
    color: black;
    font-family: 'Sprocket' !important;
}
</style>

<style>
/*** BUTTON ***/
button {
    background: rgba(255, 220, 240, 0.51);
    color: #E95CA0 !important;
    border: 4px solid #E95CA0;
    border-radius: 16px;
    font-family: 'Sprocket';
}
button:hover {
    color: white !important;
}
</style>

<style>
/*** ROOTS ***/
:root {
--logo-blue: none;
--darker-blue: none;
--lighter-blue: none;
--even-lighter-blue: none;
--lightest-blue: none;
--dark-orange: none;
--light-orange: none;
--even-lighter-orange: none;
--green: none;
}
</style>

<style>
/*** HEADERS ***/
h1,h2, h3, h4, h5 {
    font-family: 'Sprocket' !important;
    color: #E95CA0 !important;
    font-size: 22px !important;
}
</style>

<style>
/*** URL EDIT ***/
.url-info {
background:
url(https://i.pinimg.com/originals/de/0a/bc/de0abc7ef56794cb3743b188d007842f.gif) !important;
    background-size: cover;
    background-position: center top;
    font-family: 'Sprocket';
    color: #E95CA0 !important;
    border: 4px solid #E95CA0 !important;
    border-radius: 16px !important;
}
</style>

<style>
/*** BORDER ON COMMENTS ***/
.comments-table{
   border: 1px dotted #E95CA0;
}
</style>

<style>
/*** HEADERS ***/
.profile .contact, .profile .table-section, .profile .url-info {
    border: none;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    background: url(https://m.media-amazon.com/images/M/MV5BMjllMzRmMDYtOGQ1OC00Mzk4LTg1MzktMWQyZGQ5YmMzOGQ3XkEyXkFqcGdeQXVyODEzNjM5OTQ@._V1_.jpg) !important;
    background-size: cover;
    background-position: center top;
    font-family: 'Sprocket';
    color: #E95CA0;
    border: 4px solid #E95CA0;
    border-radius: 16px;
}

.profile .table-section .details-table td {
  background: transparent;
  color: #E95CA0;
  font-family: 'Sprocket';
}

.profile .blurbs .heading, .profile .friends .heading {
    background: url(https://i.pinimg.com/originals/12/09/a0/1209a00cd4df9f01ee260333cc9932be.gif) !important;
    background-size: cover;
    background-position: center top;
    font-family: 'Sprocket';
    color: #E95CA0;
    border: 4px solid #E95CA0;
    border-radius: 16px;
}

.profile .friends. .comments-table td {
    background: url(https://64.media.tumblr.com/0197327037c0e673a794d03e3e453d71/tumblr_nof26oRqet1r4jf9no2_540.gif) !important;
    background-size: cover;
    background-position: center top;
    font-family: 'Sprocket';
    color: #E95CA0;
    border: 4px solid #E95CA0;
    border-radius: 16px;
}
</style>

<style>
/*** BLOG HEADER ***/
.blog-preview {
    background: url(https://i.pinimg.com/1200x/44/5d/e0/445de0d615258b7ba3ccfbc302d40c70.jpg) !important;
    background-size: cover;
    background-position: center top;
    font-family: 'Sprocket';
    color: #E95CA0;
    border: 4px solid #E95CA0;
    border-radius: 16px;
}
.blog-preview p {
    background: none;
    text-align: center;
    margin: %;
    padding: 2%;
    font-size: 15px;
    margin-left: 10%;
    margin-right: 10%;
    border-radius: 12px;
    border: none;
    color: #DC6DA0;
}
.blog-preview a, .profile .mood p:first-child a, .profile .friends:last-child b a {
    color: #DC6DA0;
}
.blog-preview h4 {
    text-align: center;
    color: #DC6DA0;
    font-family: 'Sprocket';
    font-size: 18px;
    margin: 2%;
}
</style>

<style>
/*** COMMENTS ***/
.comments-table a:hover {
    color: #DC6DA0;
}

.comments-table td:first-child {
   background: url(https://yattatachi.com/wp-content/uploads/2016/03/Otaku-Art-History-Ouran-High-School-Host-Club2.gif) !important;
    text-align: center;
    width: 28%;
    font-family: 'Sprocket';
    color: #DC6DA0;
    box-shadow: none;
}

.comments-table img:not(.icon) {
    -webkit-mask-image: url(https://i.postimg.cc/jSDjxKM7/Untitled337-20230807135636.png);
    -webkit-mask-size: 112.5%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.comments-table a {
    color: #a0a0c8;
    font-style: normal;
}

.comments-table a:hover {
    text-decoration: none;
    color: #a0a0dc;
}

.comments-table button {
    font-family: 'Sprocket' !important;
    color: #E95CA0; !important;
}

.comments-table td {
   background: rgba(255, 200, 240, 0.51) !important;
   border: 1px dotted #E95CA0 !important;
   border-radius: 0px !important;
}
</style>

<style>
/*** PROFILE INFO ***/
.profile .profile-info {
    background:
url(https://yattatachi.com/wp-content/uploads/2016/03/Otaku-Art-History-Ouran-High-School-Host-Club2.gif);
    background-size: cover;
    background-position: center top;
    font-family: 'Sprocket';
    color: #E95CA0 !important;
    border: 4px solid #E95CA0;
    border-radius: 16px;
}

.profile .profile-info a{
    color: #E95CA0 !important;
}
</style>

<style>
/*** SCROLLBAR ***/
/* width */
::-webkit-scrollbar
{
  width: 15px;
}

/*Customizes color of the direction buttons*/  
::-webkit-scrollbar-button:start {
    background-color: #E95CA0;
}

::-webkit-scrollbar-button:end {
    background-color: #E95CA0;
}

/*Customizes color of Handle */
::-webkit-scrollbar-thumb
{
  background-color: #a0a0c8;
  border-radius: 0px;
}

/*Customizes color of Handle hover*/
::-webkit-scrollbar-thumb:hover {
  background: #a0a0dc;
}  
  
/*Customizes color of Track */
::-webkit-scrollbar-track
{
  background-color: #ffdcf0;
  border-radius: 0px;
}
</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 )
Imy !?	1705113754 USING?!$+$(;3 Report Comment
kokomo!	1704046833 USING!! Report Comment
Damien☆ ★ ✮ ★ ☆	1698833786 Using? Report Comment
Vivi	1692297978 USINGG I LOVE IT Report Comment
¡¡¡ SMITUNA !!!	1692159693 using :) Report Comment
harusene	1691959984 using!!! i love this sm <3 Report Comment
doomteensy	1691555780 You can make the layout themed around your favorite character, I don’t mind. Report Comment