fluticasone
neru
will close the poll tomorrow when i wake up so uh currently we have a tie between sapporo and pokemon wwww
-
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 ✱⁞GOLDFISH.MEMORIES _freebs
- Thread starter fluticasone
- Start date
fluticasone
neru
looks like the next old design im releasing is my pokemon one
Nano
procrastination symphony
fluticasone
neru
[export]
[div style="display: none;"]font callfont callfont call[/div]
[class name="groot"]
--gmaincolor: #ff6f61;
--gaccentcolor: #ffffff;
--gtextcolor: #7b7b7b;
--gmaintext: 'Roboto', sans-serif;
--gaccenttext: 'Averia Serif Libre', serif;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
position: relative;
padding: 5vh 15%;
box-sizing: border-box;
font-family: var(--gmaintext);
color: var(--gtextcolor);
text-align: center;
font-size: initial;
position: relative;
[/class]
[class name="groot" maxWidth=88vh]
padding: 10px;
[/class]
[class name="gmaincontainer"]
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
height: 25vh;
width: 100%;
max-width: 780px;
margin: auto;
overflow: hidden;
[/class]
[class name="gmaincontainer" maxWidth=88vh]
height: auto;
flex-flow: column nowrap;
justify-content: center;
align-items; center;
align-content: center;
[/class]
[class name="gbutton"]
flex: 0 0 10vh;
height: 100%;
width: 10vh;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
align-content: center;
background: #ff6f61;
color: #ffffff;
font-size: 4vh;
cursor: pointer;
transition: all .75s ease-in-out;
[/class]
[class name="gbutton" state=hover]
color: #ff6f61;
background: #ffffff;
[/class]
[class name="gbutton" maxWidth=88vh]
width: 100%;
[/class]
[class name="gdesc"]
flex: 1 0 10vh;
background: url(https://i.imgur.com/Jsg5ogo.jpg) center center/auto;
height: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
align-content: center;
[/class]
[class name="gdesc" maxWidth=88vh]
flex: 0 0 auto;
height: auto;
background: url(https://i.imgur.com/CSUbBi1.jpg) center center/auto;
[/class]
[class name="gscrollboxcontainer"]
display: block;
width: 80%;
height: 80%;
overflow: hidden;
margin: auto;
text-align: justify;
font-size: .7em;
background: var(--gaccentcolor);
box-sizing: border-box;
padding: 20px;
[/class]
[class name="gscrollboxcontainer" maxWidth=88vh]
height: auto;
margin: 10%;
[/class]
[class name="gscrollbox"]
display: block;
height: 100%;
width: 100%;
overflow-x: visible;
overflow-y: auto;
padding-right: 150px;
position: relative;
[/class]
[class name="gscrollbox" maxWidth=88vh]
height: auto;
max-height: 500px;
[/class]
[class name="gbtntxt"]
display: inline-block;
padding: 10px;
[/class]
[class name="gtitle"]
display: block;
font-size: 1.25em;
color: var(--gmaincolor);
text-transform: uppercase;
font-family: var(--gaccenttext);
margin-bottom: .25em;
[/class]
[class name="gfreebtags"]
padding: 0px 0% 0px 5%;
font-size: .8em;
text-align: left;
display: inline-block;
box-sizing: border-box;
color: var(--gtextcolor);
width: 100%;
opacity: .8;
margin-bottom: 1.5em;
[/class]
[class name="gtag"]
display: inline-block;
border-right: 1px solid var(--gmaincolor);
padding: 0px 10px;
text-transform: uppercase;
[/class]
[class name="gcodechunk"]
color: var(--gmaincolor);
display: block;
text-align: left;
font-family: Roboto Mono, monospace;
[/class]
[/export][div class="groot"][div class="gmaincontainer"][div class="gbutton"][div class="gbtntxt"][/div][/div][div class="gdesc"][div class="gscrollboxcontainer"][div class="gscrollbox"][div class="gtitle"]chunmi[/div][div class="gfreebtags"][div class="gtag"]twitter-style cs[/div][div class="gtag"]social media[/div][div class="gtag"]mobile compatible[/div][div class="gtag"]finicky code[/div][div class="gtag" style="border-right: none;"]no tabs[/div][/div]First time in a while I've released a full on freebie. Wew. Much of this one explains itself in the code. To add a new tweet, copy paste the below chunk of code. This should be nested inside the tweetscontainer div.
[div class="gcodechunk"][div class="tweet"]
[div class="twimg"].[/div]
[div class="twcontainer"]
[div class="tweetbox"]tweet text here[/div]
[div class="timestamp"]posted (unit of time)[/div]
[/div]
[/div][/div]
That aside though, the code is very much based on visual balance rather than relying on things like animations or transitions. In fact, there's nothing here that moves other than you scrolling through the "tweets". As a general reminder, please use the br tag to create line breaks. [/div][/div][/div][/div][/div]
[div style="display: none;"]font call[/div] [class name="root"] --mainbgcolor: #fbfbfb; --color1: #ffaed6; --color2: #cba1ff; --textcolor: #818181; --headertext: #ffffff; --headershadow: #818181; --subtext: #d4d4d4; --subtextfont: 'IBM Plex Mono', monospace; --profileimg: url(https://i.imgur.com/oWMGEOe.jpg); font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; position: relative; overflow: hidden; background: var(--mainbgcolor); padding-bottom: 15px; font-size: initial; color: var(--textcolor); [/class] [class name="header"] display: block; width: 100%; box-sizing: border-box; background-color: var(--color1); font-size: 3.5vh; letter-spacing: -.05vh; color: var(--headertext); text-shadow: 1px 1px 1px var(--headershadow); border-bottom: 2px solid var(--color2); padding: 20px 5%; letter-spacing: -1px; margin-bottom: 15px; [/class] [class name="header" maxWidth=100vh] padding: 10px 5%; [/class] [class name="flexbox"] display: flex; width: 100% box-sizing: border-box; padding: 0px 5%; flex-flow: row wrap; justify-content: flex-start; align-items: center; align-content: center; overflow: hidden; [/class] [class name="flexbox" maxWidth=100vh] justify-content: center; [/class] [class name="sidebar"] flex: 1 0 200px; text-align: center; max-width: 250px; [/class] [class name="sidebar" maxWidth=100vh] margin-bottom: 10px; [/class] [class name="username"] display: block; box-sizing: border-box; width: 180px; background: var(--color2); padding: 10px; border-radius: 5px; margin: 0px calc(50% - 90px); color: var(--headertext); font-size: 2vh; position: relative; z-index: 2; [/class] [class name="arrow"] display: block; height: 16px; width: 16px; margin: -8px calc(50% - 8px) 15px calc(50% - 8px); background: var(--color2); transform: rotate(45deg); position: relative; z-index: 1; [/class] [class name="icon"] display: block; box-sizing: border-box; width: 130px; height: 130px; margin: 5px calc(50% - 65px); border-radius: 5px; font-size: 0px; overflow: hidden; padding: 5px; border: 1px solid var(--color2); background: var(--headertext); [/class] [class name="iconimage"] display: block; height: 100%; width: 100%; border-radius: 5px; overflow: hidden; background: var(--profileimg) center center/cover; [/class] [class name="information"] display: block; width: 174px; box-shadow: 4px 4px var(--color1); margin: 15px calc(50% - 87px) 5px calc(50% - 87px); background: var(--headertext); box-sizing: border-box; border: 1px solid var(--color2); padding: 10px 15px; font-size: .7em; text-align: justify; [/class] [class name="credits"] display: block; width: 150px; font-family: var(--subtextfont); color: var(--subtext); margin: 3vh calc(50% - 75px) 0px calc(50% - 75px); font-size: 1vh; text-align: left; text-transform: uppercase; [/class] [class name="timeline"] flex: 2 0 180px; height: 65vh; overflow: hidden; width: calc(100% - 20px); padding: 0px 10px; text-align: left; max-width: 600px; [/class] [class name="scrollbox"] display: block; height: 100%; width: 100%; padding-right: 40%; overflow-x: hidden; overflow-y: auto; [/class] [class name="tweetscontainer"] display: flex; flex-flow: column-reverse nowrap; justify-content: flex-end; align-items: stretch; align-content: flex-end; [/class] [class name="tweet"] display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; margin: 15px 0px; width: 100%; text-align: left; [/class] [class name="twimg"] display: inline-block; vertical-align: top; height: 70px; width: 70px; margin-right: 15px; border-radius: 5px; overflow: hidden; background: var(--profileimg) center center/cover; font-size: 0px; [/class] [class name="twcontainer"] flex: 1 0 0px; [/class] [class name="tweetbox"] display: block; width: calc(100% - 6px); vertical-align: top; box-sizing: border-box; background: var(--headertext); border: 1px solid var(--color2); box-shadow: 4px 4px var(--color1); padding: 10px 15px; text-align: justify; font-size: .73em; white-space: normal !important; [/class] [class name="timestamp"] margin-top: 6px; display: block; box-sizing: border-box; width: 100%; padding-right: 25px; font-family: var(--subtextfont); color: var(--color2); font-size: 1vh; text-align: right; text-transform: uppercase; [/class] [class name="at"] display: inline; color: var(--color1); text-transform: none; cursor: pointer; [/class] [class name="tag"] display: inline; color: var(--color2); cursor: pointer; [/class] [class name="url"] display: inline; color: var(--color1); cursor: pointer; [/class] [class name="postimg"] display: block; border-left: 5px solid var(--color1); padding-left: 2px; overflow: hidden; width: 100%; margin-top: 2vh; pointer-events: none; font-size: 0px; [/class] [class name="yunapuppy"] --color1: #A3826F; --color2: #F2C140; --profileimg: url(https://i.imgur.com/CBgA1D4.jpg); [/class] [div class="root"] [div class="header"] 夜もすがら君想ふ [/div] [div class="flexbox"] [div class="sidebar"] [div class="username"] @konbini-p [/div] [div class="arrow"][/div] [div class="icon"] [div class="iconimage"] [/div] [/div] [div class="information"] Group Mu: The group is on the unsteady deck of a wooden ship. [/div] [div class="credits"] C: GLUCOSE GUARDIAN
A: 岩本ゼロゴ [/div] [/div] [div class="timeline"] [div class="scrollbox"] [div class="tweetscontainer"] [div class="tweet"] [div class="twimg"].[/div] [div class="twcontainer"] [div class="tweetbox"]hello please send help[/div] [div class="timestamp"]posted january 5[/div] [/div] [/div] [div class="tweet"] [div class="twimg"].[/div] [div class="twcontainer"] [div class="tweetbox"]newest tweet with a [div class="url"]http://fakeurl.com[/div][/div] [div class="timestamp"]posted january 8[/div] [/div] [/div] [div class="tweet"] [div class="twimg"].[/div] [div class="twcontainer"] [div class="tweetbox"] testing [div class="tag"]#tags[/div] and [div class="at"]@someone[/div]
Reminder that to create linebreaks you need the [br][/br] tags. [/div] [div class="timestamp"]posted january 9[/div] [/div] [/div] [div class="tweet"] [div class="twimg"].[/div] [div class="twcontainer"] [div class="tweetbox"] testing img. As an fyi, this format works better with horizontal/landscape orientation images. [div class="postimg"]
[/div]
[/div]
[div class="timestamp"]posted january 10[/div]
[/div]
[/div]
[div class="tweet" style="--color1: #B36EFB; --color2: #4DD7FF; --profileimg: url(https://i.imgur.com/iQxsYkQ.jpg);"]
[div class="twimg"].[/div]
[div class="twcontainer"]
[div class="tweetbox"]
you can fake retweets by using this format. if you plan on "retweeting" from a person a lot, make your own variable class and attach it to the tweet class here.
[/div]
[div class="timestamp"]posted by [div class="at"]@anise[/div] january 9[/div]
[/div]
[/div]
[div class="tweet yunapuppy"]
[div class="twimg"].[/div]
[div class="twcontainer"]
[div class="tweetbox"]
like so. This time I simply added the yunapuppy class name, which has its own variables that override the main's.
[div class="postimg"]
[/div]
[/div]
[div class="timestamp"]posted by [div class="at"]@yunapuppy[/div] january 11[/div]
[/div]
[/div]
[div class="tweet"]
[div class="twimg"].[/div]
[div class="twcontainer"]
[div class="tweetbox"]When writing in the code for the tweets, you write them in chronological order. The code automatically displays it in reverse. Retweets can be out of whack date-wise since we're assuming it's based on when they were retweeted and not the original posting date.[/div]
[div class="timestamp"]posted january 14[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/export][div class="groot"][div class="gmaincontainer"][div class="gbutton"][div class="gbtntxt"][/div][/div][div class="gdesc"][div class="gscrollboxcontainer"][div class="gscrollbox"][div class="gtitle"]chunmi[/div][div class="gfreebtags"][div class="gtag"]twitter-style cs[/div][div class="gtag"]social media[/div][div class="gtag"]mobile compatible[/div][div class="gtag"]finicky code[/div][div class="gtag" style="border-right: none;"]no tabs[/div][/div]First time in a while I've released a full on freebie. Wew. Much of this one explains itself in the code. To add a new tweet, copy paste the below chunk of code. This should be nested inside the tweetscontainer div.
[div class="gcodechunk"][div class="tweet"]
[div class="twimg"].[/div]
[div class="twcontainer"]
[div class="tweetbox"]tweet text here[/div]
[div class="timestamp"]posted (unit of time)[/div]
[/div]
[/div][/div]
That aside though, the code is very much based on visual balance rather than relying on things like animations or transitions. In fact, there's nothing here that moves other than you scrolling through the "tweets". As a general reminder, please use the br tag to create line breaks. [/div][/div][/div][/div][/div]
[div style="display: none;"]font call[/div] [class name="root"] --mainbgcolor: #fbfbfb; --color1: #ffaed6; --color2: #cba1ff; --textcolor: #818181; --headertext: #ffffff; --headershadow: #818181; --subtext: #d4d4d4; --subtextfont: 'IBM Plex Mono', monospace; --profileimg: url(https://i.imgur.com/oWMGEOe.jpg); font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; position: relative; overflow: hidden; background: var(--mainbgcolor); padding-bottom: 15px; font-size: initial; color: var(--textcolor); [/class] [class name="header"] display: block; width: 100%; box-sizing: border-box; background-color: var(--color1); font-size: 3.5vh; letter-spacing: -.05vh; color: var(--headertext); text-shadow: 1px 1px 1px var(--headershadow); border-bottom: 2px solid var(--color2); padding: 20px 5%; letter-spacing: -1px; margin-bottom: 15px; [/class] [class name="header" maxWidth=100vh] padding: 10px 5%; [/class] [class name="flexbox"] display: flex; width: 100% box-sizing: border-box; padding: 0px 5%; flex-flow: row wrap; justify-content: flex-start; align-items: center; align-content: center; overflow: hidden; [/class] [class name="flexbox" maxWidth=100vh] justify-content: center; [/class] [class name="sidebar"] flex: 1 0 200px; text-align: center; max-width: 250px; [/class] [class name="sidebar" maxWidth=100vh] margin-bottom: 10px; [/class] [class name="username"] display: block; box-sizing: border-box; width: 180px; background: var(--color2); padding: 10px; border-radius: 5px; margin: 0px calc(50% - 90px); color: var(--headertext); font-size: 2vh; position: relative; z-index: 2; [/class] [class name="arrow"] display: block; height: 16px; width: 16px; margin: -8px calc(50% - 8px) 15px calc(50% - 8px); background: var(--color2); transform: rotate(45deg); position: relative; z-index: 1; [/class] [class name="icon"] display: block; box-sizing: border-box; width: 130px; height: 130px; margin: 5px calc(50% - 65px); border-radius: 5px; font-size: 0px; overflow: hidden; padding: 5px; border: 1px solid var(--color2); background: var(--headertext); [/class] [class name="iconimage"] display: block; height: 100%; width: 100%; border-radius: 5px; overflow: hidden; background: var(--profileimg) center center/cover; [/class] [class name="information"] display: block; width: 174px; box-shadow: 4px 4px var(--color1); margin: 15px calc(50% - 87px) 5px calc(50% - 87px); background: var(--headertext); box-sizing: border-box; border: 1px solid var(--color2); padding: 10px 15px; font-size: .7em; text-align: justify; [/class] [class name="credits"] display: block; width: 150px; font-family: var(--subtextfont); color: var(--subtext); margin: 3vh calc(50% - 75px) 0px calc(50% - 75px); font-size: 1vh; text-align: left; text-transform: uppercase; [/class] [class name="timeline"] flex: 2 0 180px; height: 65vh; overflow: hidden; width: calc(100% - 20px); padding: 0px 10px; text-align: left; max-width: 600px; [/class] [class name="scrollbox"] display: block; height: 100%; width: 100%; padding-right: 40%; overflow-x: hidden; overflow-y: auto; [/class] [class name="tweetscontainer"] display: flex; flex-flow: column-reverse nowrap; justify-content: flex-end; align-items: stretch; align-content: flex-end; [/class] [class name="tweet"] display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; margin: 15px 0px; width: 100%; text-align: left; [/class] [class name="twimg"] display: inline-block; vertical-align: top; height: 70px; width: 70px; margin-right: 15px; border-radius: 5px; overflow: hidden; background: var(--profileimg) center center/cover; font-size: 0px; [/class] [class name="twcontainer"] flex: 1 0 0px; [/class] [class name="tweetbox"] display: block; width: calc(100% - 6px); vertical-align: top; box-sizing: border-box; background: var(--headertext); border: 1px solid var(--color2); box-shadow: 4px 4px var(--color1); padding: 10px 15px; text-align: justify; font-size: .73em; white-space: normal !important; [/class] [class name="timestamp"] margin-top: 6px; display: block; box-sizing: border-box; width: 100%; padding-right: 25px; font-family: var(--subtextfont); color: var(--color2); font-size: 1vh; text-align: right; text-transform: uppercase; [/class] [class name="at"] display: inline; color: var(--color1); text-transform: none; cursor: pointer; [/class] [class name="tag"] display: inline; color: var(--color2); cursor: pointer; [/class] [class name="url"] display: inline; color: var(--color1); cursor: pointer; [/class] [class name="postimg"] display: block; border-left: 5px solid var(--color1); padding-left: 2px; overflow: hidden; width: 100%; margin-top: 2vh; pointer-events: none; font-size: 0px; [/class] [class name="yunapuppy"] --color1: #A3826F; --color2: #F2C140; --profileimg: url(https://i.imgur.com/CBgA1D4.jpg); [/class] [div class="root"] [div class="header"] 夜もすがら君想ふ [/div] [div class="flexbox"] [div class="sidebar"] [div class="username"] @konbini-p [/div] [div class="arrow"][/div] [div class="icon"] [div class="iconimage"] [/div] [/div] [div class="information"] Group Mu: The group is on the unsteady deck of a wooden ship. [/div] [div class="credits"] C: GLUCOSE GUARDIAN
A: 岩本ゼロゴ [/div] [/div] [div class="timeline"] [div class="scrollbox"] [div class="tweetscontainer"] [div class="tweet"] [div class="twimg"].[/div] [div class="twcontainer"] [div class="tweetbox"]hello please send help[/div] [div class="timestamp"]posted january 5[/div] [/div] [/div] [div class="tweet"] [div class="twimg"].[/div] [div class="twcontainer"] [div class="tweetbox"]newest tweet with a [div class="url"]http://fakeurl.com[/div][/div] [div class="timestamp"]posted january 8[/div] [/div] [/div] [div class="tweet"] [div class="twimg"].[/div] [div class="twcontainer"] [div class="tweetbox"] testing [div class="tag"]#tags[/div] and [div class="at"]@someone[/div]
Reminder that to create linebreaks you need the [br][/br] tags. [/div] [div class="timestamp"]posted january 9[/div] [/div] [/div] [div class="tweet"] [div class="twimg"].[/div] [div class="twcontainer"] [div class="tweetbox"] testing img. As an fyi, this format works better with horizontal/landscape orientation images. [div class="postimg"]
Last edited:
fluticasone
neru
Oof looks like im having webkit vs firefox issues :x i'll fix it when i wake up tomorrow morning bluh should have checked it on my phone
Edit: figured out what's causing the issue it was me being lazy and not nesting attributes properly. Will fix when i wake up.
Edit: figured out what's causing the issue it was me being lazy and not nesting attributes properly. Will fix when i wake up.
Last edited:
fluticasone
neru
and fixed the issues! c: Chunmi code is now once again available~
Emmi
Jumin's Bae
sneeze on me so i can be good at coding too
finbutt
getting back into the flow of things
this is bb code this is so beautiful how could i have lived without such beauty
