sanrio cinnamoroll layout

Tags: sanrio, cinnamoroll, cinnamonroll, blue, pastel, cute

Description:

▸Here is one of my favorite layouts so far! My Cinnamoroll layout! I hope you all enjoy it :33 I'd love for anyone who is using to comment and let me know what you think!◂

▸Find my other layouts here ~ Click Here!

▸Make sure to past the first part in the "About Me" section and the second part in the "Who I'd like to meet" section. (If you don't the dividers might look funny (；´∀｀) )◂

▸Here are the dividers I used ~ Just paste the code into general, music, books, etc. after your text!◂

✧CINNAMOROLL DIVIDER✧

Put this code in between <> ~ img src="https://i.ibb.co/gW6q0pQ/cinna-divider.gif" alt="cinna-divider"/

✧BOW DIVIDER✧

Put this code in between <> ~ img src="https://i.ibb.co/C0h4Lsw/blue-bow-divider-recolored.png" alt="blue-bow-divider-recolored"/

▸It should look something like this▾

✧If you need help, either comment or send me an IM! Hope you all enjoy~✧

Preview:

Code:

<!-- (c) Layout created by (https://layouts.spacehey.com/layout?id=100153) --> <p><img src="https://i.ibb.co/gW6q0pQ/cinna-divider.gif" alt="cinna-divider"/></p> <style> html:before { animation: grain 8s steps(10) infinite; background-image: url('https://i.ibb.co/10x97R9/sparkle-overlay.gif'); content: ""; height: 300%; left: -50%; opacity:.1; position: fixed; top: -110%; width: 300%; pointer-events:none; } </style> <style> @import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap'); p{ font-family:’Gloria Hallelujah’, sans-serif; font-size: 13px; color: #6c8da4; } :root { --light-orange: transparent; --even-lighter-orange: transparent; --font-family: "Gloria Hallelujah"; --lighter-blue: #edfbff; --even-lighter-blue: transparent; --lightest-blue: transparent; } h1, h2, h3, h4, h5{ font-family:'Gloria Hallelujah', sans-serif; font-size: 13px; color: #6c8da4; } .count { color: #a9c2d5; } .profile .friends .person p { color: #6c8da4; font-weight: bold; width: 100%; overflow-wrap: break-word; word-break: break-word; font-size: 100%; text-align: center; } .profile .friends .person p:hover { color: #aecbde; } .profile h1 { font-size: 2em; margin: 0 0 10px 0; } p, b, nav label, .section { font-family: var(--font-family) !important; font-size: 13px; color: #6c8da4; } nav .links a { text-decoration: none; color: #6c8da4; text-shadow: 0 0 7px #ffffff; font-size: 0.98em; font-size: max(0.98em, 12px); } nav .links a:hover { color: #aecbde; } nav .top a { text-decoration: none; color: #6c8da4; } nav .top a:hover { text-decoration: none; color: #aecbde; } a, .section { font-family: var(--font-family) !important; font-size:12px; color: #6c8da4; } a:hover { color: #aecbde; } .logout-btn { font-family:'Gloria Hallelujah', sans-serif; } .logout-btn, .logout-form { color: #6c8da4; display: inline-block; font-size: 13px; } .logout-btn:hover { color: #aecbde; } .profile .blurbs .section h4 { margin: 0; color: #6c8da4; } </style> <p><a href="https://spacehey.com/l0v3rg1rl_bri">Layout made by l0v3rg1rl_bri</a></p> <style> body { background: url(https://i.ibb.co/HXp2qYh/cinna-background.jpg); } main { background-color: #e0f5fa; } nav .top { align-items: center; border: 2px #e0f5fa double; border-radius: 25px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-image: url(https://i.ibb.co/yN9hYjT/cinna-banner.jpg); background-size: 200px; } nav .links { background-color: #e0f5fa; } .profile-info { border: 2px solid #ffffff; background:url("https://i.ibb.co/D9057LF/cinna-profile-info-5-tran.png") } .profile .blurbs .heading, .profile .friends .heading { background: #f9c56c; background: var(--lighter-blue); color: #ED0707; color: var(--lighter-blue); padding: 2px 7px; } footer { text-align: center; font-size: 70%; margin: 10px 0 10px; padding: 10px 5px; background-color: #e3e3e3; background-color: var(--light-orange); } .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 { content: url("https://i.ibb.co/4TRWMsT/blue-bow-icon.gif") } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { content: url("https://i.ibb.co/4TRWMsT/blue-bow-icon.gif") } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { content: url("https://i.ibb.co/JQ4Hydm/cinna-blink-icon.gif") } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { content: url("https://i.ibb.co/JQ4Hydm/cinna-blink-icon.gif") } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { content: url("https://i.ibb.co/Br3SkDy/cinna-wave-icon.gif") } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { content: url("https://i.ibb.co/Br3SkDy/cinna-wave-icon.gif") } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { content: url("https://i.ibb.co/4TRWMsT/blue-bow-icon.gif") } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { content: url("https://i.ibb.co/4TRWMsT/blue-bow-icon.gif") } </style> <style> .online { content: url("https://i.ibb.co/cvrNPgt/cinna-online-icon.png"); } .logo { content:url("https://i.ibb.co/n0bknYJ/cinna-logo.png") } .general-about img {-webkit-mask-image: url(https://i.ibb.co/47xPKh8/cinna-webmask-2.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;} .profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://i.ibb.co/47xPKh8/cinna-webmask-2.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;} .comments-table td:first-child img:not(.icon) { -webkit-mask-image: url(https://i.ibb.co/47xPKh8/cinna-webmask-2.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;} </style> <style>body { cursor: url('https://i.ibb.co/gzX7KjD/cinna-cursor.png'), auto; }</style> <style> img, .friends img{ overflow: hidden; margin: auto; transition: all 0.5s; } img:hover, .friends img:hover{ webkit-filter: blur(1px); filter: blur(1px); } </style> <style> table.comments-table{ display: block; height: 400px!important; overflow-y: scroll; } </style> <style> /* customizable snowflake styling */ .snowflake { color: #fff; font-size: 1em; font-family: Gloria Hallelujah, sans-serif; text-shadow: 0 0 1px #000; } @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s} </style> <div class="snowflakes"> <div class="snowflake"> <img src="https://i.ibb.co/GRG607F/pixel-balloon-pink.png"/> </div> <div class="snowflake"> <img src="https://i.ibb.co/Wg3gQDn/pixel-balloon-yellow.png"/> </div> <div class="snowflake"> <img src="https://i.ibb.co/9vRZh5s/pixel-balloon-blue.png"/> </div> <div class="snowflake"> <img src="https://i.ibb.co/jTG7jcR/pixel-balloon-purple.png"/> </div> <div class="snowflake"> <img src="https://i.ibb.co/GRG607F/pixel-balloon-pink.png"/> </div> <div class="snowflake"> <img src="https://i.ibb.co/Wg3gQDn/pixel-balloon-yellow.png"/> </div> <div class="snowflake"> <img src="https://i.ibb.co/9vRZh5s/pixel-balloon-blue.png"/> </div> <div class="snowflake"> <img src="https://i.ibb.co/jTG7jcR/pixel-balloon-purple.png"/> </div> <div class="snowflake"> <img src="https://i.ibb.co/GRG607F/pixel-balloon-pink.png"/> </div> <div class="snowflake"> <img src="https://i.ibb.co/Wg3gQDn/pixel-balloon-yellow.png"/> </div> <div class="snowflake"> <img src="https://i.ibb.co/9vRZh5s/pixel-balloon-blue.png"/> </div> <div class="snowflake"> <img src="https://i.ibb.co/jTG7jcR/pixel-balloon-purple.png"/> </div> </div> <div style="float: ; max-height: 200px; position: absolute; left:1100px; top: 200px; z-index: 300;"> <img src="https://i.ibb.co/9GssbG0/cinna-icecream-embed.gif" alt="cinna-icecream-embed"/></div> <style></style> <div style="float: ; max-height: 200px; position: absolute; left:-25px; top: 650px; z-index: 300;"> <img src="https://i.ibb.co/g3b3mcG/sleepy-cinna.png" alt="sleepy-cinna" height="150" width="300"/></div> <style></style> <div style="float: ; max-height: 200px; position: absolute; left: 1px; top: 50px; z-index: 300;"> <img src="https://i.ibb.co/kHctXCT/heart-cinna.png" alt="heart-cinna" height="150" width="200"/></div> <style></style> <div style="float: ; max-height: 200px; position: absolute; right: 3px; bottom: -500px; z-index: 300;"> <img src="https://i.ibb.co/FVxqq2g/nomnom-cinna.png" alt="nomnom-cinna" height="200" width="275"/></div> <style></style> <iframe width="0" height="0" src="https://www.youtube.com/embed/zjPSvBQsZCQ//?&;amp;;autoplay=1&;loop=1&;controls=1" title="messages from the stars speed up" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"> </iframe> <div style="position:absolute; left:900px; top:50px; background-color:light-blue;"> <a href="https://spacehey.com/l0v3rg1rl_bri">layout made by l0v3rg1rl_bri</a> </div> <style> /* paste next section in who id like to meet*/ </style> <p><img src="https://i.ibb.co/gW6q0pQ/cinna-divider.gif" alt="cinna-divider"/></p> <style> body:before { content: ""; height: 100vh; width: 100vw; display: block; position: fixed; top: 0; left: 0; z-index: 100; background-image: url('https://i.ibb.co/G5syvjY/cinna-loadingscreen.gif'); background-size: cover; background-repeat: no-repeat; background-position:center; animation: yourAnimation 5s ease 1s 1 normal forwards; pointer-events: none;} @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } </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.