What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource β€” π™¨π™¬π™šπ™šπ™©π™šπ™£π™šπ™§. saccharine's code garden

saccharine

pelerine dream
[nobr]
[class=bkg]
position: relative;
width: 385px;
height: 276px;
background-color: rgba(255,255,255,0);
overflow: visible;
margin: auto;
[/class]
[class=brackets]
height: 276px;
width: 390px;
background:
linear-gradient(to right, white 2px, transparent 2px) 0 100%,
linear-gradient(to left, white 2px, transparent 2px) 100% 0,
linear-gradient(to bottom, white 2px, transparent 2px) 100% 0,
linear-gradient(to top, white 2px, transparent 2px) 0 100%;
background-repeat: no-repeat;
background-size: 20px 20px;
top: 50px;
[/class]
[class=img]
position: absolute;
overflow: visible;
width: 152px;
height: 152px;
left: 13px;
top: 24px;
background: url('https://i.pinimg.com/564x/5e/b1/6b/5eb16b31d0015b3fc9863d60df5ba7f9.jpg');
background-size: 100%;
background-position: center bottom;
[/class]
[class=titletwo]
position: absolute;
left: 169px;
top: 123px;
overflow: visible;
width: 182px;
height: 31px;
text-align: left;
font-family: Gelasio;
font-style: normal;
font-weight: normal;
font-size: 16px;
color: rgba(138,170,155,1);
[/class]
[class=title]
position: absolute;
left: 169px;
top: 92px;
overflow: visible;
width: 154px;
height: 29px;
text-align: left;
font-family: Gelasio;
font-style: normal;
font-weight: bold;
font-size: 20px;
color: rgba(138,170,155,1);
[/class]
[class=textbox]
position: absolute;
overflow: visible;
width: 225px;
height: 104px;
left: 121px;
top: 152px;
background: #FFFFFF;
[/class]
[class=text]
position: absolute;
left: 129px;
top: 162px;
overflow: visible;
width: 209px;
height: 85px;
text-align: left;
font: Lato;
font-style: normal;
font-weight: normal;
font-size: 9px;
color: rgba(123,123,123,1);
[/class]

[div class=bkg]
[div class=brackets]
[div class=img]
[/div]
[/div]
[div class=titletwo]
saccharine's garden.
[/div]
[div class=title]
sweetener;
[/div]
[div class=textbox]
[/div]
[div class=text][div=position: relative;width: 100%;height: 100% ;overflow: hidden;background-color: transparent;padding: 0px;][div=width: 100%;padding-right: 145px;height: 100%;overflow-y: scroll;font-align: justify;font-width: bold;]
hey all! saccharine here β€” and with some codes! now, these are all a bit finicky and not the best, but i figured i'd share them anyways. i mean,, if im spending so much time on them,, right?! anyways, all of these little disasterpieces are free to use with credit. on the off chance you enjoy them, i'm flattered!
[/div][/div][/div]
[/div]

[/nobr]
 

saccharine

pelerine dream
[nobr]
[class=bkgg]
position: relative;
width: 385px;
height: 276px;
background-color: rgba(255,255,255,0);
overflow: visible;
margin: auto;
[/class]
[class=brackets]
height: 276px;
width: 390px;
background:
linear-gradient(to right, white 2px, transparent 2px) 0 100%,
linear-gradient(to left, white 2px, transparent 2px) 100% 0,
linear-gradient(to bottom, white 2px, transparent 2px) 100% 0,
linear-gradient(to top, white 2px, transparent 2px) 0 100%;
background-repeat: no-repeat;
background-size: 20px 20px;
top: 50px;
[/class]
[class=imgc]
position: absolute;
overflow: visible;
width: 152px;
height: 152px;
left: 13px;
top: 24px;
background: url('https://i.pinimg.com/564x/29/b0/59/29b059765fff96f3cb724875988ed15d.jpg');
background-size: 103%;
background-position: center bottom;
[/class]
[class=titletwo]
position: absolute;
left: 169px;
top: 123px;
overflow: visible;
width: 182px;
height: 31px;
text-align: left;
font-family: Gelasio;
font-style: normal;
font-weight: normal;
font-size: 16px;
color: rgba(138,170,155,1);
[/class]
[class=title]
position: absolute;
left: 169px;
top: 92px;
overflow: visible;
width: 174px;
height: 29px;
text-align: left;
font-family: Gelasio;
font-style: normal;
font-weight: bold;
font-size: 18px;
color: rgba(138,170,155,1);
[/class]
[class=textbox]
position: absolute;
overflow: visible;
width: 225px;
height: 104px;
left: 121px;
top: 152px;
background: #FFFFFF;
border: 1px solid #707070;
[/class]
[class=text]
position: absolute;
left: 129px;
top: 162px;
overflow: visible;
width: 209px;
height: 85px;
text-align: left;
font: Lato;
font-style: normal;
font-weight: normal;
font-size: 9px;
color: rgba(123,123,123,1);
[/class]

[div class=bkgg]
[div class=brackets]
[div class=imgc]
[/div]
[/div]
[div class=titletwo]
posting temp
[/div]
[div class=title]
peachy, babe ;
[/div]
[div class=textbox]
[/div]
[div class=text][div=position: relative;width: 100%;height: 100% ;overflow: hidden;background-color: transparent;padding: 0px;][div=width: 100%;padding-right: 145px;height: 100%;overflow-y: scroll;font-align: justify;font-width: bold;]
mobile friendly![br][/br]i'm back !! this is a lovely little template for a 1x1 i'm currently in. i'm honestly in love with the simplicity and the COLORS, and that might just be me, but i'm kinda feeling it ngl. either way, this one is actually pretty tolerant, so there's shouldn't be a whole lot of issues. i also cleaned up the credits a lil' bit !
[/div][/div][/div]
[/div]
[/nobr]

[nobr]
[class=variables]
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important
[/class]
[class=bkg]
position: relative;
margin: auto;
width: 384px;
height: 252px;
background-color: rgba(236,200,178,1);
overflow: hidden;
[/class]
[class=backtwo]
position: absolute;
overflow: visible;
width: 364px;
height: 231px;
left: 10px;
top: 11px;
background-color: #F5F5F5;
[/class]
[class=name]
position: absolute;
left: 31px;
top: 22px;
overflow: visible;
width: 353px;
height: 36px;
text-align: left;
text-transform: uppercase;
font-family: Segoe UI;
font-style: normal;
font-weight: bold;
font-size: 20px;
color: rgba(146,146,146,1);
[/class]
[class=underline]
overflow: visible;
position: absolute;
width: 318px;
height: 3px;
left: 31.5px;
top: 58.5px;
background-color: #ECC8B2;
[/class]
[class=quote]
position: absolute;
left: 31px;
top: 71px;
overflow: visible;
width: 161px;
height: 16px;
text-align: left;
font-family: Segoe UI;
font-style: normal;
font-weight: normal;
font-size: 11px;
color: rgba(146,146,146,1);
[/class]
[class=img]
position: absolute;
overflow: visible;
width: 159px;
height: 130px;
left: 32px;
top: 104px;
background: url('https://data.whicdn.com/images/294620939/original.jpg');
background-size: 100%;
transition: 0.5s;
[/class]
[class name=img state=hover]
filter: brightness(110%);
align: center;
fadeIn 900 alt2
[/class]
[class=alt2]
position: absolute;
left: -149px;
top: 80px;
overflow: visible;
width: 102px;
height: 38px;
text-align: center;
font-family: Segoe UI;
font-style: normal;
font-weight: normal;
font-size: 8px;
color: #FFFFFF;
[/class]

[script class=img on=mouseenter]
fadeIn 0900 alt2
[/script]
[script class=img on=mouseleave]
fadeOut 0900 alt2
[/script]

[class=hoverguide]
position: absolute;
left: 32px;
top: 94px;
overflow: visible;
width: 82px;
height: 8px;
text-align: left;
font-family: Segoe UI;
font-style: normal;
font-weight: normal;
font-size: 7px;
color: rgba(146,146,146,1);
[/class]
[class=content]
position: absolute;
left: 210px;
top: 71px;
overflow: visible;
width: 155px;
height: 163px;
text-align: justify;
text-transform: lowercase;
font-family: Segoe UI;
font-style: normal;
font-weight: normal;
font-size: 8.5px;
color: rgba(146,146,146,1);
[/class]
[class=hidden]
display:none;
[/class]

[div class=variables]
[div class=bkg]
[div class=backtwo]
[/div]
[div class=name]
A VERY PRETTY NAME.
[/div]
[div class=underline]
[/div]
[div class=quote]
❝𝐒𝐭'𝐬 𝐩𝐞𝐚𝐜𝐑𝐲, π›πšπ›πž.❞ ΰ©ˆβ™‘Λ³
[/div]
[div class=img]
[/div]
[div class=hoverguide]
hover over the image !
[/div]
[div class=content]
[div=position: relative;width: calc(100% - 0px);height: 170px;overflow: hidden;background-color: transparent;padding: 0px;][div=width: 100%;padding-right: 145px;height: 100%;overflow-y: scroll;font-align: justify;font-width: bold;]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio aenean sed adipiscing diam. Feugiat nisl pretium fusce id velit. Praesent tristique magna sit amet purus gravida quis blandit turpis. Nisi lacus sed viverra tellus in hac habitasse. [br][/br][br][/br]

Egestas maecenas pharetra convallis posuere morbi. Enim ut tellus elementum sagittis vitae et leo duis ut. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Sit amet massa vitae tortor condimentum lacinia.[br][/br][br][/br]

Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat. Nec nam aliquam sem et. Ut tristique et egestas quis ipsum suspendisse ultrices. Nibh cras pulvinar mattis nunc sed blandit libero. Eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. [br][/br][br][/br]

Libero nunc consequat interdum varius sit amet mattis vulputate enim. Diam quis enim lobortis scelerisque. Dolor morbi non arcu risus. Pretium nibh ipsum consequat nisl vel pretium lectus quam. Tortor consequat id porta nibh.[br][/br][br][/br]

Ornare arcu dui vivamus arcu felis. Enim diam vulputate ut pharetra sit amet aliquam id diam. Purus sit amet volutpat consequat mauris nunc congue nisi. Risus at ultrices mi tempus imperdiet. Tincidunt praesent semper feugiat nibh sed. [br][/br][br][/br]

Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. A erat nam at lectus urna. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Quis vel eros donec ac. Porttitor lacus luctus accumsan tortor posuere. Massa placerat duis ultricies lacus sed turpis tincidunt. Consequat semper viverra nam libero justo.[br][/br][br][/br]

Volutpat consequat mauris nunc congue nisi vitae suscipit. In ornare quam viverra orci. Hendrerit dolor magna eget est lorem ipsum dolor. Tellus orci ac auctor augue mauris. Varius vel pharetra vel turpis nunc eget lorem dolor.
[/div][/div]

[div class="alt2 hidden"]interactions: xxx[br][/br]location: xxx[br][/br]mood: xxx[/div]
[/div]
[/div]
[class=cred]
font: Roboto; font-size: 9px; color: #000; text-align: center;
[/class]
[div class=cred]Λšβ‚ŠΒ· ͟͟͞͞➳β₯ saccharine[/div][/div]
[/nobr]
 
Last edited:

saccharine

pelerine dream
[nobr]
[class=bkgg]
position: relative;
width: 385px;
height: 276px;
background-color: rgba(255,255,255,0);
overflow: visible;
margin: auto;
[/class]
[class=brackets]
height: 276px;
width: 390px;
background:
linear-gradient(to right, white 2px, transparent 2px) 0 100%,
linear-gradient(to left, white 2px, transparent 2px) 100% 0,
linear-gradient(to bottom, white 2px, transparent 2px) 100% 0,
linear-gradient(to top, white 2px, transparent 2px) 0 100%;
background-repeat: no-repeat;
background-size: 20px 20px;
top: 50px;
[/class]
[class=imgc]
position: absolute;
overflow: visible;
width: 152px;
height: 152px;
left: 13px;
top: 24px;
background: url('https://i.pinimg.com/564x/29/b0/59/29b059765fff96f3cb724875988ed15d.jpg');
background-size: 103%;
background-position: center bottom;
[/class]
[class=titletwo]
position: absolute;
left: 169px;
top: 123px;
overflow: visible;
width: 182px;
height: 31px;
text-align: left;
font-family: Gelasio;
font-style: normal;
font-weight: normal;
font-size: 16px;
color: rgba(138,170,155,1);
[/class]
[class=titlex]
position: absolute;
left: 169px;
top: 92px;
overflow: visible;
width: 174px;
height: 29px;
text-align: left;
font-family: Gelasio;
font-style: normal;
font-weight: bold;
font-size: 18px;
color: rgba(138,170,155,1);
[/class]
[class=textbox]
position: absolute;
overflow: visible;
width: 225px;
height: 104px;
left: 121px;
top: 152px;
background: #FFFFFF;
border: 1px solid #707070;
[/class]
[class=text]
position: absolute;
left: 129px;
top: 162px;
overflow: visible;
width: 209px;
height: 85px;
text-align: left;
font: Lato;
font-style: normal;
font-weight: normal;
font-size: 9px;
color: rgba(123,123,123,1);
[/class]

[div class=bkgg]
[div class=brackets]
[div class=imgc]
[/div]
[/div]
[div class=titletwo]
one x one
[/div]
[div class=titlex]
strawberry scented ;
[/div]
[div class=textbox]
[/div]
[div class=text][div=position: relative;width: 100%;height: 100% ;overflow: hidden;background-color: transparent;padding: 0px;][div=width: 100%;padding-right: 145px;height: 100%;overflow-y: scroll;font-align: justify;font-width: bold;]
mobile friendly![br][/br]now, immediate disclaimer ; the right row of lil' strawberries are cut of on mobile, but the title and images and all are still perfectly visible, so i figure that's good enough ! this is a smol thread starter i made for a 1x1. wow, i know, look at sachie with all the 1x1s! anyways, i just adore doing these little super simple codes that don't make me want to rip out my hair with tags or something like that.
[/div][/div][/div]
[/div]
[/nobr]

[nobr]
[class=variables]
cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important
[/class]
[class=bkg]
position: relative;
margin: auto;
width: 452px;
height: 546px;
background-color: rgba(246,246,246,1);
overflow: hidden;
[/class]
[class=back]
position: absolute;
overflow: visible;
width: 248px;
height: 511px;
left: 102px;
top: 18px;
background-color: #F1D5CB;
[/class]
[class=s1]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 7px;
top: 18px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
animation:{post_id}shake 10s linear infinite;
[/class]
[class=s2]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 7px;
top: 107px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
animation:{post_id}shake 10s linear infinite;
[/class]
[class=s3]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 7px;
top: 196px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
animation:{post_id}shake 10s linear infinite;
[/class]
[class=s4]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 7px;
top: 284px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
animation:{post_id}shake 10s linear infinite;
[/class]
[class=s5]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 7px;
top: 375px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
animation:{post_id}shake 10s linear infinite;
[/class]
[class=s6]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 7px;
top: 466px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
animation:{post_id}shake 10s linear infinite;
[/class]
[class=s7]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 364px;
top: 18px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
transform: scaleX(-1);
animation:{post_id}shake2 10s linear infinite;
[/class]
[class=s8]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 364px;
top: 107px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
transform: scaleX(-1);
animation:{post_id}shake2 10s linear infinite;
[/class]
[class=s9]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 364px;
top: 196px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
transform: scaleX(-1);
animation:{post_id}shake2 10s linear infinite;
[/class]
[class=s10]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 364px;
top: 284px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
transform: scaleX(-1);
animation:{post_id}shake2 10s linear infinite;
[/class]
[class=s11]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 364px;
top: 375px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
transform: scaleX(-1);
animation:{post_id}shake2 10s linear infinite;
[/class]
[class=s12]
position: absolute;
overflow: visible;
width: 81px;
height: 63px;
left: 364px;
top: 466px;
background: url('https://smallimg.pngkey.com/png/small/395-3950570_kawaii-pixel-art-and-strawberry-image-kawaii-strawberry.png');
background-size: 100%;
background-repeat: no-repeat;
transform: scaleX(-1);
animation:{post_id}shake2 10s linear infinite;
[/class]
[class=title]
text-shadow: 0px 3px 0px#DCA996;
position: absolute;
left: 94px;
top: 12px;
overflow: visible;
width: 202px;
height: 117px;
text-align: left;
font-family: Segoe UI;
font-style: normal;
font-weight: normal;
font-size: 31px;
color: rgba(255,255,255,1);
transform: rotate(-19deg);
line-height: 23px;
[/class]
[class=img1]
position: absolute;
overflow: visible;
width: 170px;
height: 120px;
left: 141px;
top: 125px;
background: url('https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png');
background-size: 106%;
background-position: center center;
[/class]
[class=imgb]
position: absolute;
overflow: visible;
width: 170px;
height: 120px;
left: 141px;
top: 318px;
background-size: 100%;
background: url('https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png');
background-size: 106%;
background-position: center center;
[/class]
[class=tag1]
position: absolute;
left: 141px;
top: 259px;
overflow: visible;
width: 171px;
height: 45px;
text-align: center;
font-family: Segoe UI;
font-style: normal;
font-weight: bold;
font-size: 11px;
color: rgba(255,255,255,1);
[/class]
[class=tag2]
position: absolute;
left: 141px;
top: 452px;
overflow: visible;
width: 171px;
height: 45px;
text-align: center;
font-family: Segoe UI;
font-style: normal;
font-weight: bold;
font-size: 11px;
color: rgba(255,255,255,1);
[/class]
[animation=shake]
[keyframe=0]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[keyframe=10]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
[keyframe=20]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[keyframe=30]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
[keyframe=40]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[keyframe=50]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
[keyframe=60]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[keyframe=70]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
[keyframe=80]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[keyframe=90]transform: translate(-1px, -2px) rotate(-5deg);[/keyframe]
[keyframe=100]transform: translate(1px, 1px) rotate(5deg);[/keyframe]
[/animation]
[animation=shake2]
[keyframe=0]transform: translate(1px, 1px) scaleX(-1) rotate(5deg);[/keyframe]
[keyframe=10]transform: translate(-1px, -2px) scaleX(-1) rotate(-5deg);[/keyframe]
[keyframe=20]transform: translate(1px, 1px) scaleX(-1) rotate(5deg);[/keyframe]
[keyframe=30]transform: translate(-1px, -2px) scaleX(-1) rotate(-5deg);[/keyframe]
[keyframe=40]transform: translate(1px, 1px) scaleX(-1) rotate(5deg);[/keyframe]
[keyframe=50]transform: translate(-1px, -2px) scaleX(-1) rotate(-5deg);[/keyframe]
[keyframe=60]transform: translate(1px, 1px) scaleX(-1) rotate(5deg);[/keyframe]
[keyframe=70]transform: translate(-1px, -2px) scaleX(-1) rotate(-5deg);[/keyframe]
[keyframe=80]transform: translate(1px, 1px) scaleX(-1) rotate(5deg);[/keyframe]
[keyframe=90]transform: translate(-1px, -2px) scaleX(-1) rotate(-5deg);[/keyframe]
[keyframe=100]transform: translate(1px, 1px) scaleX(-1) rotate(5deg);[/keyframe]
[/animation]

[div class=variables]
[div class=bkg]
[div class=back]
[/div]
[div class=s1]
[/div]
[div class=s2]
[/div]
[div class=s3]
[/div]
[div class=s4]
[/div]
[div class=s5]
[/div]
[div class=s6]
[/div]
[div class=s7]
[/div]
[div class=s8]
[/div]
[div class=s9]
[/div]
[div class=s10]
[/div]
[div class=s11]
[/div]
[div class=s12]
[/div]
[div class=title]
βž³β™‘γ‚›strawberry scented!
[/div]
[div class=img1]
[/div]
[div class=imgb]
[/div]
[div class=tag1]
name here β€”[br][/br]person here.
[/div]
[div class=tag2]
name here β€”[br][/br]person here.
[/div]
[/div]
[class=cred]
font: Roboto; font-size: 9px; color: #000; text-align: center;
[/class]
[div class=cred]Λšβ‚ŠΒ· ͟͟͞͞➳β₯ saccharine[/div]
[/div]
[/nobr]
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top