little sites themes :: idioteque's plastic layout + soft pink

Tags: cute, soft, pink, sweet lolita, customizable

Description:

thank you idioteque for the layout of the page! amazing layout maker, i SO recommend using their layouts. you can find them here NOTE: this is the second layout of my little series or wtv of "little sites themes". the entire compact, minimal formatting is completely done by the css deity, idioteque, and i get all girly with the decorating jajaja my other layouts

pompompurin |soft pink | pink rilakkuma | gloomy the bear

Preview:

click on the image for a larger preview

Code:

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

<style>
/* customization~ */
:root {
    /* background of page itself */
	--backgrounds-color: white;
    /* accent color - used for banner, titles, tabs, scrollbars, and link hover colors. */
    --accent: #ffd4e5;
    /* the banner image, inside the parentheses. leave the parentheses empty for no image. short, wide pictures look better */
    --banner: url(https://pagedeco.carrd.co/assets/images/gallery06/2d52c9b6.gif?v=1cb5da6d);
    /* the background color. if you have a background image, this color is used for the shadow on the credits text */
    --body-background-color: white;
    /* the background image, inside the parentheses. leave the parentheses empty for no image */
    --background-imagege: url(https://pagedeco.carrd.co/assets/images/gallery28/958ddf08.jpg?v=1cb5da6d);
    /* border radius for the main page! in px - 0px for no corner-rounding */
    --border-radius: 15px;
    /* border radius for the little titles! in px - 0px for no corner-rounding - lower values recommended */
    --title-border-radius: 5px;
    /* general font color, also used for links */
    --font-color: #ffb0d0;
    /* font color used on titles only */
    --title-font-color: #ff9ec5;
    /* color of borders */
    --border-color: #ffbad6;
}
/* code~ */
nav .top .left a:after,nav .top .right *{text-shadow:0 0 2px var(--accent),0 0 2px var(--accent),0 0 2px var(--accent),0 0 2px var(--accent),0 0 2px var(--accent),0 0 2px var(--accent),0 0 2px var(--accent)}.more:hover,a,nav .links a{text-decoration:underline}.blurbs .heading,.profile h1{border:1px solid var(--border-color)}#comments .heading h4:before,.table-section td:first-child a,.table-section td:first-child p,nav .top .right *{color:var(--title-font-color)!important}.blurbs .inner,.contact .heading,.details,.table-section td,body:after,nav .links{text-align:center}.ago,.blurbs .heading,.comments-table button,.comments-table td:first-child a,.contact .f-row,.details,.friends .inner p&gt;b,.logout-btn,.mood p,.person a,.person p,.profile h1,.report,.section h4,.table-section td:first-child p,.top .right,body:after,footer *,nav .links a,small{text-transform:uppercase}[title=Notifications]:after,body:after{left:5px;white-space:nowrap;text-shadow:0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color)}[title=Notifications]:after,body:after,footer *{text-shadow:0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color),0 0 5px var(--body-background-color)}@font-face{src:url(https://dl.dropbox.com/scl/fi/phd6lorzz1gdkzku5f7ac/Volter__28Goldfish_29.ttf?rlkey=m9msku2d84m2c3imqzb72gtnp);font-family:voltergoldfish}::-webkit-scrollbar{width:8px;height:8px;background:0 0}::-webkit-scrollbar-track{margin-block:10px}::-webkit-scrollbar-thumb{background:var(--accent);border-block:1px solid var(--border-color);border-left:1px solid var(--border-color)}.blurbs .inner::-webkit-scrollbar-thumb{background:var(--accent);border:1px solid var(--border-color)}body:after{content:"layout by dan/idioteque - best seen in desktop";font-size:8.5px;position:fixed;bottom:5px;display:block;width:100px;color:var(--font-color)}.logout-btn,body{font-family:voltergoldfish;color:var(--font-color)}.count,a,a:hover,body,main{color:var(--font-color)!important}.top,nav .links{border-bottom:1px solid var(--border-color)}.profile h1,nav .links{user-select:none}#comments .heading h4,.contact h4,.copyright a,.friends:not(#comments) .heading h4,.mood p:last-child b,.table-section+.table-section .heading h4,.table-section:not(.table-section + .table-section) .heading h4,.top .right{font-size:0px}#comments .heading,.friends:not(#comments) .heading{background:var(--accent)!important;width:1.45vw;line-height:.8vh;right:-1.45vw}.more,a:hover,nav .links a:hover{text-decoration:none}.profile h1,a,b,body:after,button,h2,h3,h4,h5,h6,i,p{filter:contrast(1)}.container{margin-top:3.8rem;margin-inline:auto;height:81vh;width:40vw;background:var(--backgrounds-color)}main{background:0 0;padding:0!important;height:calc(81vh - 58px)}.col{height:calc(81vh - 58px)!important}body{background:var(--body-background-color) var(--background-imagege)}.comments-table button:hover,.copyright a:hover:after,.f-row:nth-child(2) .f-col:last-child a:hover:after,.profile h1,.table-section td:first-child p,a:hover,nav .links a:hover{background:var(--accent)}.logout-btn{font-size:9px}.comments-table,.more,nav .links a{font-size:9px!important}.profile h1,a,b,button,h2,h3,h4,h5,h6,i,p{font-size:9px;font-weight:400}.person a,.person p,nav .links a{font-weight:400!important;color:var(--font-color)!important}.top{background:var(--accent) var(--banner)!important;background-size:cover!important;background-position:center!important;padding-top:2px!important;height:40px}.col,nav .links{padding:0!important}nav .top .left a:after{content:"SPACEHEY";font-family:"MS Gothic";font-size:30px;font-weight:700;letter-spacing:1px;color:var(--title-font-color)}.blog-preview,.edit-link,.f-col .icon,.mood p:last-child a:nth-child(3),.online img,.profile-info,.report .icon,.supporter img,.url-info,.verified,[title=Notifications] img,nav .top .left img{display:none}.links li:not(:last-child)::after{content:""!important}nav .links{background:0 0;word-spacing:-3px}.comments-table td,.contact .heading,.table-section td,.top .left a:hover,footer{background:0 0!important}nav .links a{text-shadow:none!important}.top .right{word-spacing:2px;line-height:40px}.blurbs .heading,.profile h1{font-size:12px!important}.top .center{visibility:hidden}.profile h1{padding-inline:3px;padding-block:1px;margin:4px!important;width:fit-content}.col:not(.table-section) :is(p,b){margin-inline:10px}.col.left{width:12rem}.blurbs .heading,.table-section td:first-child p{padding-inline:3px!important;padding-block:1px!important;width:fit-content}.col.right{position:relative;border-left:1px solid var(--border-color)}.general-about .profile-pic,.general-about .profile-pic img{min-width:100%!important;min-height:100%!important;object-fit:cover;object-position:center center;border-bottom:1px solid var(--border-color);margin-bottom:4px!important}.general-about .profile-pic{border-top:1px solid var(--border-color)}.details p:first-child{margin-top:0!important}.blurbs,small b:first-child{margin:0!important}.blurbs .heading{margin:4px;background:var(--accent)!important}.blurbs .heading:before{content:"ABOUT";color:var(--title-font-color)}.blurbs .heading h4{display:none!important}.table-section:not(.table-section + .table-section){position:absolute;top:3.2rem;height:81vh!important;width:41.45vw;border:0 solid var(--border-color)!important;visibility:hidden;z-index:99999;padding-right:20px;opacity:1}#comments .heading,.friends:not(#comments) .heading,.table-section+.table-section .heading,.table-section:not(.table-section + .table-section) .heading{border:1px solid var(--border-color);writing-mode:vertical-lr;text-orientation:upright;visibility:visible;text-transform:uppercase;text-align:center;color:var(--title-font-color)}.container:before{content:"";display:block;position:absolute;height:80.7%;width:39.9vw;border:1px solid var(--border-color);z-index:999999999;pointer-events:none}.table-section td{display:block;width:100%!important}.table-section td:first-child p{border:1px solid var(--border-color);margin:auto}.table-section td:first-child a{text-decoration:none!important;pointer-events:none}.table-section tr{width:50%!important;display:inline-block;vertical-align:top}.table-section:not(.table-section + .table-section) .heading{background:var(--accent);width:3.5%;height:100px;line-height:.7vh;position:absolute;top:40px;right:0}.table-section:not(.table-section + .table-section) .heading h4:before{content:"INTERESTS";font-size:9px}.friends,.table-section+.table-section{height:81vh!important;padding-right:20px;position:absolute}.table-section+.table-section .heading{background:var(--accent);width:1.5vw;height:60px;line-height:.8vh;position:absolute;top:145px;right:0}.table-section+.table-section .heading h4:before{content:"LINKS";font-size:9px}.table-section .inner:hover,.table-section:has(.heading:hover) .inner{opacity:1;visibility:visible}.table-section:has(.heading:hover){visibility:visible}.table-section+.table-section{top:3.2rem;width:41.45vw;border:0 solid var(--border-color)!important;z-index:99999;opacity:1;visibility:hidden}.friends .inner,.table-section .inner{height:100%;width:40vw;overflow-y:scroll}.friends .inner,.more,.table-section .inner{visibility:hidden;opacity:0;transition:.3s}.table-section .inner{background:var(--backgrounds-color);padding-top:10px!important}#comments .heading{height:88px;position:absolute;top:293.5px}#comments .heading h4:before{content:"COMMENTS";font-size:9px}.friends:not(#comments) .heading{height:78px;position:absolute;top:210.5px}.friends:not(#comments) .heading h4:before{content:"FRIENDS";font-size:9px;color:var(--title-font-color)!important}.more{position:absolute;z-index:999;float:initial;top:-188px;right:13px;width:100px!important;writing-mode:horizontal-tb}.more:hover{background:0 0}.friends .inner{background:var(--backgrounds-color);padding-top:20px!important}.comments-table .pfp-fallback,.person .pfp-fallback{border:1px solid var(--border-color);object-fit:cover;transition:.2s}.person a,.person p{text-decoration:none!important;margin:0!important}.person .pfp-fallback{margin-top:5px!important;height:100px!important;width:100px!important}.comments-table .pfp-fallback:hover,.person .pfp-fallback:hover{outline:5px solid var(--accent)}.comments-table,.comments-table td{border:0}.contact h4:after,.mood p:first-child b,.mood p:last-child b:before,.section h4,.supporter a{background:var(--accent);border:1px solid var(--border-color);color:var(--title-font-color)!important}.comments-table .pfp-fallback{height:100px;width:100px}.comment-replies,.contact{border:0!important}.comments-table td:first-child a{text-decoration:none!important}.friends-grid{margin:50px auto!important;width:340px}.friends:has(.heading:hover),.friends:has(.heading:hover) .inner,.friends:has(.heading:hover) .more{visibility:visible;opacity:1}.friends .inner:hover{visibility:visible;opacity:1}:has(.friends:not(#comments) .inner:hover) .more{visibility:visible;opacity:1}.friends{width:40vw;border:0 solid var(--border-color)!important;visibility:hidden;z-index:999;opacity:1;background:0 0;top:-58px;right:0}.blurbs .inner{height:calc(81vh - 90px);background:0 0;margin-inline:5px;overflow-y:auto;overflow-x:hidden;color:var(--font-color)!important}.section h4{width:fit-content;padding:2px;padding-inline:4px;margin:5px auto!important}.comments-table button,.online{color:var(--font-color)!important}footer{position:fixed;left:40vh;width:60px;top:10vh}footer *{font-style:normal!important;color:var(--font-color)}.copyright a:after{content:"©2023 spacehey all rights reserved";font-size:9px}.supporter a{padding:3px}.online{font-weight:400;font-size:9px}.mood p{margin:8px 0!important}.mood p:first-child b{padding:2px 3px}.mood p:last-child b:before{content:"VIEW MY:";padding:2px 3px;font-size:9px;margin-right:3px}.mood p:last-child a{margin-inline:2px}.contact .heading{border-top:1px solid var(--border-color);padding-top:10px!important}.contact h4:after{content:"CONTACT ME";padding:2px 3px;font-size:9px}.contact .f-row{margin-inline:7px!important}.f-col a{font-size:8.5px!important;white-space:nowrap}.contact .inner{width:98%}.f-row:nth-child(2) .f-col:last-child a{font-size:0px!important}.f-row:nth-child(2) .f-col:last-child a:after{font-size:8.5px!important;content:"FORWARD TO..."}small{font-size:8.5px}.comments-table button{background:0 0;border:0!important;text-decoration:underline;padding:0!important;cursor:pointer}.logout-btn:hover{background:var(--accent)!important}.blurbs:before{width:100%;content:"";border-bottom:1px solid var(--border-color);display:block;height:0;position:relative;top:26px}.container,.container:before,.inner:not(.contact .inner,.blurbs .inner),.pfp-fallback:not(.general-about .pfp-fallback),main{border-radius:var(--border-radius)!important}.inner{padding:5px}.top{border-radius:var(--border-radius) var(--border-radius) 0 0}.heading:not(.contact .heading,.blurbs .heading){border-radius:0 var(--title-border-radius) var(--title-border-radius) 0}.blurbs .heading,.contact h4:after,.mood p:first-child b,.mood p:last-child b:before,.profile h1,.section h4,.supporter a,.table-section td:first-child p{border-radius:var(--title-border-radius)}.profile h1{color:var(--title-font-color)!important}@keyframes shakyguy{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(1px)}50%{transform:translateX(-1px)}}[title=Notifications]:after{content:"YOU HAVE NOTIFICATIONS.";position:absolute;bottom:55px;animation:.5s infinite shakyguy} 
}
</style>
<center>
<img src="https://gifcity.carrd.co/assets/images/gallery46/f2789c37.gif?v=5bf8fcf7"/>
<img src="https://gifcity.carrd.co/assets/images/gallery46/e9bf9bf9.png?v=5bf8fcf7"/>
<img src="https://gifcity.carrd.co/assets/images/gallery83/afdca1b4.gif?v=5bf8fcf7"/>
</center>
<center>
name(s)
<img src="https://maguro.carrd.co/assets/images/gallery02/70c28c7e.gif?v=10a293e5"/> 
pro/nouns 
<img src="https://gifcity.carrd.co/assets/images/gallery08/6368790d.gif?v=5bf8fcf7"/>
age (minor/adult)
</center>
<center>
<img src="https://maguro.carrd.co/assets/images/gallery09/65a0f6a2_original.gif?v=10a293e5"/>
 info info info 
<img src="https://gifcity.carrd.co/assets/images/gallery08/ac41e783.gif?v=5bf8fcf7"/> 
info info info
</center>
<center>
link 
<img src="https://gifcity.carrd.co/assets/images/gallery147/abb7ea73.gif?v=5bf8fcf7"/>
link 
<img src="https://maguro.carrd.co/assets/images/gallery02/19a0911a_original.gif?v=10a293e5"/>

link
</center>

<center>
<img src="https://gifcity.carrd.co/assets/images/gallery46/b2ff3c46.png?v=5bf8fcf7"/>
</center>
<div style="float:  ; max-height: 400px; position: fixed; top: 1px; right: 9px; z-index: 200;"><img src="https://gifcity.carrd.co/assets/images/gallery83/32ca7e6d.gif?v=5bf8fcf7"/></div>

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 20 of 38 comments ( View all | Add Comment )

♯ MIMI	1712387436 using !! Report Comment
bishie !! 🌷💕	1711741392 using !! ^^ Report Comment
♰ ₊‧ 𝒟𝑒𝓃𝒾𝓈𝑒	1711347837 Usingg!<333 Report Comment
Dea Amoris	1710463141 using Report Comment
Aki -`♡´-	1706197530 using <3 Report Comment
Maeloaf	1705129652 usinggg Report Comment
joyy!1!?	1705093406 usingg<3 Report Comment
Gumily	1704289662 using!!! Report Comment
janebug (FROM HOMESTUCK!!!)	1704152273 Using Report Comment
itzmeIsaac_	1702827753 Using sz Report Comment
Adeline	1701406616 using!! Report Comment
yin ໒꒱ ‧₊˚	1701075335 using <3 Report Comment
Yen	1700957226 using!! Report Comment
kaairystarlight	1700797146 using!! Report Comment
vickee	1699880358 using! Report Comment
Axel's Asylum	1699663294 USING!! Report Comment
aerin 🍉 (autoplay)	1699367135 using Report Comment
⋆ ˚｡⋆୨୧˚ quack u,_u	1699224927 might use :3 Report Comment
angel dust / anthony	1699197166 using ! ! Report Comment
kaj ♡	1699172384 Using! <3 Report Comment