Rugrats Theme

Tags: tv shows, tv, cartoons, rugrats, nickelodeon
Description:

Do you like Rugrats? Then this is the theme for you.
Preview:

click on the image for a larger preview
Code:

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

<iframe width="450" height="30" src="https://www.youtube.com/embed/LGYl4-ac-vQ//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
 
<style>
@import url('https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap');
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/toons/too-12/too1100.cur), auto !important;} /* End https://www.cursors-4u.com */
main:before {
    width: 807;
    margin-bottom: 25px;
    border: 1px solid black;
    height: 254px;
    display: block;
    content: "";
    background-image: url("https://wwwimage-us.pplusstatic.com/base/files/show_page/rugr_about_web_1400x440.jpg"); 
    background-position: center center;
    background-size: cover;
}
*{
  border-radius: 9px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
  border-radius: 6px 6px 9px 9px;
}
footer {
background-color: #9895ca;
}
:root{
  --logo-blue: url(https://64.media.tumblr.com/8bf16a87aed5137d42cfef9d5b279e00/tumblr_mtlvqpW4Nu1qgtmlco4_1280.png);
  --darker-blue: #9895ca;
  --lighter-blue: #9895ca;
  --even-lighter-blue: #f17f21;
  --lightest-blue: #70c4e8;
  --dark-orange: #462e8c;
  --light-orange: #f17f21;
  --even-lighter-orange: #70c4e8;
  --green: #05e7ad;
  --dark-green: #05e7ad;
}
 
*{
  box-sizing: border-box;
}
html, body{
  margin: 0;
  padding: 0;
}
body{
  background-color: #05e7ad
;
  background-image: url(https://64.media.tumblr.com/075e1fac62a0dd2367a0acd92241b752/tumblr_mtlvqpW4Nu1qgtmlco6_1280.png);
  font-family: 'Finger Paint', cursive;
  font-size: 15px;
  padding: 10px;
}

.friends:not(#comments) {
  grid-area: friends;
  background: url(https://garden.spoonflower.com/c/13320521/p/f/m/mFK-tQe1pSTlscaCqEBqz73rIplQiR0jxhnWJ1ngJrxBnzgZ9Tw3/Bah%20bah.jpg);
  background-size: 550px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center; 
  border-radius: 15px
}

.contact {
  grid-area: friends;
  background: url(https://garden.spoonflower.com/c/13320521/p/f/m/mFK-tQe1pSTlscaCqEBqz73rIplQiR0jxhnWJ1ngJrxBnzgZ9Tw3/Bah%20bah.jpg);
  background-size: 360px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center; 
  border-radius: 15px
}
.profile .profile-info {
	background-image: url(https://64.media.tumblr.com/8bf16a87aed5137d42cfef9d5b279e00/tumblr_mtlvqpW4Nu1qgtmlco4_1280.png);
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
	padding: 20px;
	border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #9895ca;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}
.col.left h1:before{
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 150px;
  background-image: url(https://static.wikia.nocookie.net/parody/images/8/8c/Chuckie_and_Tommy.png);
  background-repeat: no-repeat;
  background-size: 150px;
}
.col.right:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 200px;
  background-image: url(https://favim.com/pd/p/orig/2019/01/01/rugrats-gif-angelica-Favim.com-6722019.gif);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 300px;
}
.blurbs:after{
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 200px;
  background-image: url(https://hellogiggles.com/wp-content/uploads/sites/7/2016/01/06/SusieAngelica.gif);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 400px;
}
.mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 193px;
  background-image: url(https://webappstatic.buzzfeed.com/static/2020-09/28/19/asset/d7dc3bb716c4/anigif_sub-buzz-30136-1601322065-29.gif);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 280px; 
}
 
img {
}
 
.container{
  width: 810px;
  max-width: 100%;
  border-width: 2px;
  border-style: solid;
  border-color: #05e7ad;
  margin: 0 auto 10px;
}
time.ago{
  opacity: 0;
}
.soon{
  opacity: 0.7;
}
details summary{
  cursor: pointer;
  user-select: none;
}
a{
  color: #4a0087;
;
  text-decoration: underline;
}
a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
  color: #70508a
;
}
.logout-btn:hover,
.logout-btn:active{
  color: inherit;
  text-decoration: underline;
}
p, ol li{
  font-size: 0.875em;
}
ol li ol li{
  font-size: 100%;
}
nav{
  color: #ffffff;
  font-size: 72%;
}
nav .top{
  background: var(--logo-blue);
  padding: 15px 10px 14px 10px;
  display: flex;
}
nav .top a{
  text-decoration: none;
  color: inherit;
}
nav .top a:hover{
  text-decoration: underline;
}
nav .top div{
  display: inline-block;
  vertical-align: top;
}
nav .top .left a{
  text-decoration: none;
  color: inherit;
}
nav .top .left img{
  margin: 0 0 0 6px;
}
nav .top .left .logo{
  min-height: 35px;
  width: 165px;
}
nav .top .left .christmas{
  height: 42px;
}
nav .top .center{
  text-align: center;
  flex: 1;
}
nav .top .right{
 
}
nav .top .center form{
  margin-top: -2px;
  width: 100%;
}
nav .links{
  background-color: #05e7ad;
  padding: 3.5px 16px 5.5px 16px;
}
nav .links,
footer .links{
  margin: 0;
  list-style: none;
}
footer .links{
  font-size: 0.875em;
  margin: 16px 0 5px 0;
  padding: 0;
  text-align: center;
}
nav .links li,
footer .links li{
  display: inline-block;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
  content: url("https://hiimorion.carrd.co/assets/images/gallery02/8c260a91.gif?v=40b0c6d4");
  color: #aaaaaa;
}
nav .links a{
  text-decoration: none;
  color: #5a5979;
  font-size: 0.98em;
}
nav .links a:hover{
  text-decoration: underline;
  color: #8482a4;
}
main{
  background: linear-gradient(180deg, rgba(255,249,120,1) 0%, rgba(255,189,134,1) 50%, rgba(241,145,242,1) 100%);
  color: #462e8c;
  padding: 6px 0px;
  font-size: 80%;
}
.profile .contact .heading,
.profile .table-section .heading,
.home-actions .heading{
  background: var(--lighter-blue);
  color: #f14a44;
  padding: 2px 7px;
}
.profile .contact .heading h4,
.profile .table-section .heading h4,
.profile .blurbs .heading h4,
.profile .friends .heading h4,
.blog-entry .comments .heading h4,
.bulletin .comments .heading h4,
.home-actions .heading h1,
.statistics .heading h4{
  margin: 0;
  display: inline-block;
  color: #ffd200;
}
.profile .friends .person{
  width: 105px;
  display: inline-block;
  padding: 0 10px 15px 0;
}
.profile .friends .person p{
  color: #00069f;
  font-weight: bold;
  width: 100%;
  word-break: break-word;
  font-size: 100%;
  text-align: center;
}
.profile .friends .person img:not(.icon){
  max-width: 95px;
  max-height: 95px;
  display: block;
  margin: 0 auto;
}
.count{
  color: #ff0a80;
}
.online{
  color: #ff0a80;
  font-weight: bold;
  font-size: 95%;
}
<style>.online { visibility: hidden; } .online img { content: url("https://media.tenor.com/oC6fho9tJ1IAAAAM/spicy-hot.gif"); animation-name: none; visibility: visible; height: 50px;}</style>
 
<style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Angelica-icon.png")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Chuckie-icon.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Tommy-icon.png")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Susie-icon.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Lil-icon.png")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Phil-icon.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Cynthia-icon.png")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://icons.iconarchive.com/icons/shelby/rugrats/32/Spike-icon.png")
}
</style>
<div style="float:  ; max-height: 800px; position: fixed; right: 1px; bottom: 10px; z-index: 200;"><img src="https://cdn.sanity.io/images/krd6avww/production/298fdf2671559ffefd060b9431405da790d38ce9-238x463.png" width="209"/></div>
<div class="image"></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 1 of 1 comments ( View all | Add Comment )
Gl0r!a
1703703057
Using! Or kinda using lol? (I used & edited ur cursor & contact icons from ur code) But I love ur layout!!! I plan on doing rugrats next 🍼 so TYYYY! When I post this layout (since I used some of ur code) as well as in the future my Rugrats one (since ur layout will be part of my inspo haha) I'll be sure to credit u!!! TYSMMM ;DDDD <333
Report Comment