write a reply

daydaydream

pronounsfeminine
377written posts
idindinearned bits
offlinecurrently
idindin
Senior Member
idindin Avatar
[nospaces]
[googlefont=Dela Gothic One:100,200,300,400,500,600,700,800]
[googlefont=Quicksand:100,200,300,400,500,600,700,800]
[newclass=.ame-heartbreak]width: 500px;margin: auto;display: grid;grid-template-columns: 50px 400px 50px;grid-template-rows: 550px;font-family: 'Dela Gothic One', cursive;[/newclass]
[newclass=.hb-avi]width: 90px;height: 90px;background-size: contain;border-radius: 100%;margin: 10px;background-image: url('https://i.imgur.com/fESisri.png');[/newclass]
[newclass=.hb-body]border: 1px solid silver;[/newclass]
[newclass=.hb-lyric]font-size: 30px;color: #ef476f;[/newclass]
[newclass=.left-lyric]writing-mode:vertical-lr;transform: rotate(180deg);text-align: justify;font-size: 39.3px;[/newclass]
[newclass=.hb-body]display: grid;grid-template-rows: 1fr 1fr 1fr;[/newclass]
[newclass=.hb-post-window]border-top: 1px solid silver;border-bottom: 1px solid silver;height: 300px;background-color: #edf2f4;border-bottom: 10px solid #ef476f;[/newclass]
[newclass=.hb-post]height: calc(100% - 60px);margin: 30px;padding: 0px 15px;overflow-y: auto;text-align: justify;font-size: 13px;font-family: 'Quicksand', sans-serif;color: #495057;[/newclass]
[newclass=.hb-post b]color: #ef476f;[/newclass]
[newclass=.hb-pane]color: #ef476f;text-align: center;background-color: #343a40;display: flex;flex-direction: row;align-items: center;justify-content: center;[/newclass]
[newclass=.right-lyric]writing-mode:vertical-lr;text-align: right;font-size: 37px;padding-left: 6px[/newclass]
[newclass=.hb-bottom]font-size: 15px;padding: 5px 10px;background-color: #edf2f4;margin: 0px 30px;width: calc(100% - 150px);height: 70px;overflow-y: auto;[/newclass]
[newclass=.note-text]font-size: 11px;color: grey;font-family: tahoma;display: flex;align-items: center;justify-content: center;[/newclass]
[newclass=.ame-heartbreak ::-webkit-scrollbar] width: 3px;[/newclass]
[newclass=.ame-heartbreak ::-webkit-scrollbar-thumb] background: #ef476f;[/newclass]
[newclass=.hb-top]display: flex;align-items: center;justify-content: center;[/newclass]
[newclass=.left-bar]width: 100px;height: calc(100% - 20px);border-left: 10px solid #ef476f;[/newclass]
[newclass=.right-bar]width: 100px;height: calc(100% - 20px);border-right: 10px solid #ef476f;[/newclass]

[attr="class","ame-heartbreak"]
[attr="class","hb-lyric left-lyric"]
heartbreak, heartbreak

[attr="class","hb-body"]
[attr="class","hb-top hb-pane"]
[attr="class","left-bar"]

[attr="class","hb-avi"]

[attr="class","right-bar"]


[attr="class","hb-post-window"]
[attr="class","hb-post"]

Prompt #04 Years From Now
[break][break]
No one said you can't be depressing for the bingo! ...But ah, if it works out, just change the lyrics into something happier and it'll still work. uwub

[break][break]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae metus ornare, dictum ante condimentum, pretium nisi.
[break][break]
Proin porttitor nec turpis ut pharetra. Nunc dolor tortor, euismod sit amet viverra vel, malesuada in quam. Curabitur sollicitudin, lectus in eleifend euismod, lacus felis eleifend sapien, quis suscipit sem sem ut arcu. Duis vel ornare magna, vel rhoncus urna. Nam convallis volutpat libero vitae interdum. Suspendisse porta nisl quam, at molestie nisi scelerisque ac.
[break][break]
Sed risus libero, aliquet et auctor ut, pretium vel purus. Vestibulum pulvinar risus eget nisi dictum, eget consequat orci commodo. Quisque augue felis, aliquet id mauris vel, pulvinar luctus nibh. Donec ornare nisl urna, a maximus ante venenatis et. Aliquam et erat iaculis neque efficitur fringilla. Ut mattis congue tortor sed pretium. Curabitur sed risus ligula. In turpis lectus, tempor eget velit id, tincidunt bibendum mi.



[attr="class","hb-pane"]
[attr="class","hb-bottom"]
tags // [break]
[attr="class","note-text"]tagging here

notes // [break]
[attr="class","note-text"]notes here. not too long. ugly.




[attr="class","hb-lyric right-lyric"]
you tell me goodbye

last edit on Mar 28, 2021 17:18:27 GMT by idindin
pronounsfeminine
377written posts
idindinearned bits
offlinecurrently
idindin
Senior Member
idindin Avatar
[nospaces]
[break]
Prompt #23: robot
[break]
the actual one is toggle-able, but that won't happen in proboards unless i do x and y so... yep!

[break][break]
[googlefont=Orbitron:500]
[googlefont=Exo 2:500]
[googlefont=Montserrat:300,400,700,800]

[newclass=.tides]margin: auto;height: 400px;width: 500px;border: 1px solid black;display: flex;[/newclass]
[newclass=.chara-box]border: 1px solid black;transition-duration: 1s;flex-basis: 50%;margin: 10px;display: grid;grid-template-columns: 1fr 9fr;background-size: cover;background-repeat: no-repeat;[/newclass]
[newclass=.chara-header]writing-mode:vertical-lr;display: flex;align-items: center;font-size: 30px;padding: 0px 10px;color: silver;transform: rotate(180deg);display: flex;align-items: center;[/newclass]
[newclass=.tides-chara-info]background-color: rgba(255,255,255,0.8);margin: 10px;padding: 10px;opacity: 0;transition-duration: 0.5s;display:grid;grid-template-rows: 1fr;grid-template-columns: 1fr;[/newclass]
[newclass=.chara-box:hover .tides-chara-info]transition-delay: 1s;opacity: 1;[/newclass]
[newclass=.chara-box:hover]flex-basis: 100%;[/newclass]
[newclass=.left]background-image: url('https://i.imgur.com/F3JB8OX.png');background-position: -130px center;background-blend-mode: luminosity;background-color: #0077B6;margin-right: 0px;[/newclass]
[newclass=.right]background-image: url('https://i.imgur.com/HzFl2su.jpg');background-position: -240px center;background-blend-mode: luminosity;background-color: #e63946;[/newclass]
[newclass=.left:hover]background-position: -250px center;[/newclass]
[newclass=.right:hover]background-position: -360px center;[/newclass]
[newclass=.chara-box:hover .tides-chara-info]margin-left: 0px;[/newclass]
[newclass=.tides-button]font-size: 18px;margin: 10px 0px;color: white;cursor: crosshair;font-family: 'Orbitron', sans-serif;font-weight: 500;[/newclass]
[newclass=.tides-button:hover]color: black;[/newclass]
[newclass=.chara-name-2]font-size: 25px;[/newclass]
[newclass=.tides-chara-info-1]opacity: 0;position: relative;z-index: -1;overflow-y: auto;grid-column-start: 1;grid-column-end: 2;grid-row-start: 1;grid-row-start: 2;height: 340px;transition-duration: 0.5s;padding-right: 10px;[/newclass]
[newclass=.chara-box:hover .tides-one-info, .chara-box:hover .tides-four-info]opacity: 1;position: relative;z-index: 1;[/newclass]
[newclass=.tides-button-1]color: black;background-color: white;transition-duration: 0.5s;padding: 5px 0px;[/newclass]
[newclass=.tides-button-4]color: black;background-color: white;transition-duration: 0.5s;padding: 5px 0px;[/newclass]
[newclass=.tides-wanted-blob]font-family: 'Montserrat', sans-serif;font-size: 13px;text-align: justify;margin-bottom: 10px;[/newclass]
[newclass=.tides-info-header]font-family: 'Exo 2', sans-serif;margin: 10px 0px;text-align: center;border-bottom: 3px solid black;font-size: 15px;margin-top: 0px;font-weight: 500;[/newclass]


[attr="class","tides"]
[attr="class","chara-box left"]
[attr="class","chara-header"]
[attr="class","tides-button chara-name-2 tides-button-1"]AIGIS

[attr="class","tides-button tides-button-2"]wanteds.

[attr="class","tides-button tides-button-3"]threads.


[attr="class","tides-chara-info"]
[attr="class","tides-chara-info-1 tides-one-info"]
[attr="class","tides-info-header"]
aigis: header #1

[attr="class","tides-wanted-blob"]
she made me pronounce aegis wrong for like, years.

[attr="class","tides-info-header"]
header #2

[attr="class","tides-wanted-blob"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at tortor nec lectus finibus sagittis. In eros urna, consectetur eget lectus non, scelerisque euismod sem. Curabitur enim ex, suscipit vel molestie a, pellentesque nec nisi. Fusce lacinia hendrerit semper. Quisque semper, nibh sit amet finibus laoreet, ex est convallis massa, ut viverra nulla tortor bibendum eros.





[attr="class","chara-box right"]
[attr="class","chara-header"]
[attr="class","tides-button chara-name-2 tides-button-4"]LABRYS

[attr="class","tides-button tides-button-5"]wanteds.

[attr="class","tides-button tides-button-6"]threads.


[attr="class","tides-chara-info"]
[attr="class","tides-chara-info-1 tides-four-info"]
[attr="class","tides-info-header"]
labrys: header #1

[attr="class","tides-wanted-blob"]
one day i'll code something that doesnt rely on images as my crutch

[attr="class","tides-info-header"]
header #2

[attr="class","tides-wanted-blob"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at tortor nec lectus finibus sagittis. In eros urna, consectetur eget lectus non, scelerisque euismod sem. Curabitur enim ex, suscipit vel molestie a, pellentesque nec nisi. Fusce lacinia hendrerit semper. Quisque semper, nibh sit amet finibus laoreet, ex est convallis massa, ut viverra nulla tortor bibendum eros.




pronounsfeminine
377written posts
idindinearned bits
offlinecurrently
idindin
Senior Member
idindin Avatar
[nospaces]

[break]

Prompt #1: summertime

[break]this time i don't know how to do icons on pixel ;-; full template here


[break][break]

[googlefont=Montserrat:300,400,700,800]



[newclass=.no-bezel]margin: auto;background-image: url('https://i.imgur.com/4JieIjl.png');background-size: contain;height: 525px;width: 245px;background-position: no-repeat;border-radius: 10px;border: 3px solid #343a40;box-shadow: 2px 2px 5px grey;display: grid;grid-template-rows: 20px auto;font-family: 'Montserrat', sans-serif;[/newclass]

[newclass=.nb-top]margin: 5px;display: grid;grid-template-columns: 1fr 1fr 1fr;color: white;font-size: 11px;[/newclass]

[newclass=.nb-camera]height: 10px;width: 10px;border-radius: 100%;background-color: #011627;margin: auto;[/newclass]

[newclass=.nb-lock-time]color: white;margin: 40px 0px 0px 15px;font-size: 20px;[/newclass]

[newclass=.nb-camera-icon]color: white;position: relative; top: 374px;left: 200px;height: 35px;width: 35px; background-color: #f33da1;display: flex;justify-content: center;align-items: center;border-radius: 30%;[/newclass]

[newclass=.no-bezel .fa-camera]margin-top: -2px;font-size: 18px;[/newclass]



[attr="class","no-bezel"]

[attr="class","nb-top"]

docomo




[attr="class","nb-camera"]




56%




[attr="class","nb-lockscreen"]

[attr="class","nb-lock-time"]

10:30[break]

Tue, February 4







last edit on Apr 5, 2021 12:54:07 GMT by idindin
pronounsfeminine
377written posts
idindinearned bits
offlinecurrently
idindin
Senior Member
idindin Avatar
[nospaces]
[break]
Prompt #26: one more time
[break]...of me making thread trackers + plotters in one ago. actually based on a watch? wind it one more time etc etc stuff like that. had four faces for four characters to it on the spinning avatar, but i watered it down for pp.

[break][break]
[googlefont=Noto Sans JP:300,400,700,800]
[googlefont=Orelega One:300,400,700,800]

[newclass=.watchface]height: 500px;width: 550px;margin: 20px auto;background-color: #cde2e7;border: 5px solid white;border-radius: 5px;--accent1: #b07d62;--accent2: #cde2e7;[/newclass]
[newclass=.watchface-watch]background-color: white;padding: 5px 20px;border-bottom-right-radius: 100%;border-bottom-left-radius: 100%;margin: 0px 0px 0px 20px;[/newclass]
[newclass=.daytona]height:150px;width: 150px;border-radius: 100%;border: 5px solid var(--accent1);display: flex; justify-content: center;align-items: center;background-color: var(--accent2);[/newclass]
[newclass=.daytona-info]display: grid;grid-template-columns: 1fr 2fr;grid-template-rows: 180px 315px;font-family: 'Noto Sans JP', sans-serif;[/newclass]
[newclass=.daytona-watchface]background-color: transparent;width: calc(85%);height: calc(85%);border-radius: 100%;display: grid;animation: clockwise 60s linear infinite;[/newclass]
[newclass=.dt-chara-grid]background-size: cover;background-blend-mode: luminosity;background-color: black;transition-duration: .5s;border-radius: 100%;[/newclass]
[newclass=.dt-chara-grid:hover]background-color: var(--accent1);[/newclass]
[newclass=.daytona-watchface:hover]animation-play-state: paused;[/newclass]
[newclass=.dt-chara-hd]display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;padding-top: 10px;width: 88%;justify-content: center;[/newclass]
[newclass=.dt-top-bar]justify-content: center;display: flex;[/newclass]
[newclass=.chara-hd-name]margin: 0px 0px 10px;font-size: 30px;font-family: 'Orelega One', cursive;text-decoration: overline;[/newclass]
[newclass=.chara-hd-tags]display: flex;flex-flow: row wrap;justify-content: center;align-content: flex-start;margin: 0px 10px;overflow-y: auto;max-height: 75px;[/newclass]
[newclass=.dt-chara-info]padding: 15px;grid-column: span 2;height: calc(100% - 30px);[/newclass]
[newclass=.chara-hd-tagbox]padding: 5px; font-size: 14px; margin: 5px;background-color: var(--accent1);color: white;text-transform: lowercase;border-radius: 5px;[/newclass]
[newclass=.dt-chara-info-2]display: flex;background-color: white;height: calc(100% - 30px);border-radius: 5px;padding: 15px;overflow-y: auto;border-bottom: 10px solid var(--accent1);flex-direction: row;font-size: 13px;text-align: justify;[/newclass]
[newclass=.dt-wanteds]border-right:1px dashed silver;width: 55%;padding: 0px 10px 10px 0px;text-align: left;overflow-y: scroll;[/newclass]
[newclass=.dt-threads]padding: 0px 0px 0px 10px;width: 45%;overflow-y: auto;[/newclass]
[newclass=.ix-pic]border-top-left-radius: 100%; background-color: var(--accent1); background-image: url('https://i.imgur.com/0YBABu1.png')[/newclass]
[newclass=.dt-header]margin: 0px 0px 5px;padding: 2px 10px;font-size: 30px;font-family: 'Orelega One', cursive;color: var(--accent1);border-radius: 5px;[/newclass]
[newclass=.dt-header2]margin: 10px 0px;font-size: 24px;letter-spacing: -2px;font-family: 'Noto Sans JP', sans-serif;color: var(--accent1);border-radius: 5px;[/newclass]
[newclass=.watchface ::-webkit-scrollbar]width: 10px;[/newclass]
[newclass=.watchface ::-webkit-scrollbar-track]background-color: white;[/newclass]
[newclass=.watchface ::-webkit-scrollbar-thumb]background-color: var(--accent1);border-radius: 50px;[/newclass]
[newclass=.chara-hd-tags::-webkit-scrollbar-track]background-color: var(--accent2);[/newclass]
[newclass=.dt-wanteds::-webkit-scrollbar-thumb]display: none; } @keyframes clockwise{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}[/newclass]


[attr="class","watchface"]
[attr="class","daytona-info"]
[attr="class","watchface-watch"]
[attr="class","daytona"]
[attr="class","daytona-watchface"]
[attr="class","dt-chara-grid ix-pic ix"]




[attr="class","dt-top-bar"]
[attr="class","dt-chara-hd ix"]
[attr="class","chara-hd-name"]Willow Winters

[attr="class","chara-hd-tags"]
[attr="class","chara-hd-tagbox"]character

[attr="class","chara-hd-tagbox"]duntz duntz

[attr="class","chara-hd-tagbox"]tags

[attr="class","chara-hd-tagbox"]unz unz

[attr="class","chara-hd-tagbox"]tags

[attr="class","chara-hd-tagbox"]more tags

[attr="class","chara-hd-tagbox"]just practicing flex :v




[attr="class","dt-chara-info"]
[attr="class","ix dt-chara-info-2"]
[attr="class","dt-wanteds"]
Character blurb here, talk about y, talk about z, maybe post wanteds here or some other stuff?
[attr="class","dt-header2"]wanted: a brother

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur suscipit, sem ac semper malesuada, ligula dui interdum quam, a tincidunt justo ligula vitae tellus.
[break]
[attr="class","dt-header2"]given: a pesky sister


[attr="class","dt-threads"]
[attr="class","dt-header"]plot hooks

✗ someone gets decked
[break]
🗸 he gets decked

[break][break]
[attr="class","dt-header"]current

✧ thread title here
[break]
✧ thread title here
[break]
✧ thread title here
[break][break]
[attr="class","dt-header"]completed

✧ thread title here
[break]
✧ thread title here
[break]
✧ thread title here
[break][break]
[attr="class","dt-header"]inactive

✧ thread title here
[break]
✧ thread title here
[break]
✧ thread title here
[break][break]




pronounsfeminine
377written posts
idindinearned bits
offlinecurrently
idindin
Senior Member
idindin Avatar
[nospaces]
[break]
prompt #13: on with the show[break]
i mixed up my prompts because im a big dum.[break]
watered down for pp again ha ha ha codepen vers.[break]
can u tell i really like making character showcases that i never use anw

[googlefont=Noto Sans JP:300,400,700,800]
[googlefont=Oswald:300,400,700,800]
[newclass=.stage-dots]margin: 10px auto 2px;width: 450px;display: flex;justify-content: flex-end;[/newclass]
[newclass=.stage-dots div]margin-left: 2px;cursor: crosshair;[/newclass]
[newclass=.dot-1]height: 15px; width: 15px; border-radius: 100%;background-color: #ff6b6b;[/newclass]
[newclass=.dot-2]height: 15px; width: 15px; border-radius: 100%;background-color: #98c1d9;[/newclass]
[newclass=.dot-3]height: 15px; width: 15px; border-radius: 100%;background-color: #f2cc8f;[/newclass]
[newclass=.ame-stage]height: 550px;width: 450px;margin: auto;font-size: 13px;--stage-black: #343a40;--stage-spotlight: linear-gradient(#ff6b6b, #f2cc8f, white, white, silver, transparent);color: var(--stage-black);font-family: 'Noto Sans', sans-serif;[/newclass]
[newclass=.stage-backdrop]background: var(--stage-black);height: 100%;width: 100%;[/newclass]
[newclass=.stage-back]position: absolute;z-index: 3;height: 150px;width: 450px;background: transparent;display: flex;flex-direction: row;justify-content: space-between;[/newclass]
[newclass=.stage-back-left]width: 170px;height: 450px;background: var(--stage-black);clip-path: polygon(0 0, 0 100%, 100% 0);[/newclass]
[newclass=.stage-back-right]width: 170px;height: 450px;background: var(--stage-black);clip-path: polygon(0 0, 100% 100%, 100% 0);[/newclass]
[newclass=.stage-spotlight]position: absolute;z-index: 2;background: var(--stage-spotlight);height: 550px;width: 450px;opacity: 0;animation: stage-shine 30s infinite;[/newclass]
[newclass=.stage-cast]position: absolute;z-index: 5;height: 550px;width: 450px;margin-top: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;[/newclass]
[newclass=.cast-border]background-color: var(--stage-black);padding: 10px;border-radius: 100%;[/newclass]
[newclass=.cast-name]font-size: 30px;margin-top: 20px;text-align: center;font-family: 'Oswald', sans-serif;[/newclass]
[newclass=.cast-description]margin-top: 0px;max-width: 300px;max-height: 100px;overflow-y: hidden;text-align: center;[/newclass]
[newclass=.cast-1]background-image: url('https://i.imgur.com/XiYsnt8.png');background-size: cover;width: 150px;height: 150px;border-radius: 100%; } @keyframes stage-shine {0% { opacity: 0; }1% { opacity: 0.7; }2% { opacity: 0; }3% { opacity: 0.7; }95% { opacity: 0.7; }100% { opacity: 0; }[/newclass]

[attr="class","stage-dots"]
[attr="class","dot-1"]

[attr="class","dot-2"]

[attr="class","dot-3"]


[attr="class","ame-stage"]
[attr="class","stage-backdrop"]
[attr="class","stage-back"]
[attr="class","stage-back-left"]

[attr="class","stage-back-right"]


[attr="class","stage-spotlight"]

[attr="class","stage-cast"]
[attr="class","cast-border"]
[attr="class","cast-1"]

[attr="class","cast-info"]
[attr="class","cast-name"]akira (not) tsuchiya

[attr="class","cast-description"]
trYinG hER bEst
[break][break]
LOREM ipsum dolor sit amet, consectetur adipiscing elit. curabitur cursus, dui ac suscipit dignissim, leo tellus tempus nibh, et cursus erat eros eget mauris. etiam finibus pellentesque aliquet.







last edit on May 8, 2021 15:26:53 GMT by idindin
write a reply

QUICK REPLY

WRITE YOUR POST DOWN BELOW