write a reply

bingo fish

options
quote
bingo fish written Mar 28, 2021 15:36:06 GMT
937written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
01. Summertime
02. Bad Reputation
03. Ashes to Ashes
04. Years From Now
05. Red Roses


08. Wild
09. Trilogy
10. Prophecy
11. Dreams
12. Who Cares?
13. On With the Show
14. Dawn/Dusk

16. Mirrors
17. Impressions


20. Fireside
21. Electricity
22. Keep Trying
23. Robot
24. Shout It Out

26. One More Time
27. Haunted
28. Prisoner
29. Power of Love
30. The World

Board: pixel-perfect.boards.net/post/57859/thread
last edit on May 15, 2021 18:03:51 GMT by gimmick
options
quote
bingo fish written Apr 11, 2021 21:10:54 GMT
937written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
No. 13: On with the show - Riffing on ticket stubs



[nospaces]
[attr="class","ticketcredits"]


[attr="class","ticketshape charOne"]
[attr="class","ticket_grid"]
[attr="class","col_left"]
[attr="class","iconbox"]
[attr="class","ticketdivider"]


[attr="class","col_right"]
[attr="class","front"]
[attr="class","name_box"]
[attr="class","name"]John Doe

[attr="class","hatch"]


[attr="class","ticket_stats"]
[attr="class","stat_box"]
[attr="class","stat_label"]Age

[attr="class","stat_input"]Twenty


[attr="class","stat_box"]
[attr="class","stat_label"]Group

[attr="class","stat_input"]Lorem ipsum


[attr="class","stat_box"]
[attr="class","stat_label"]Occupation

[attr="class","stat_input"]Job


[attr="class","stat_box"]
[attr="class","stat_label"]Field

[attr="class","stat_input"]Info


[attr="class","back"]
Beef meatball biltong, sirloin burgdoggen tri-tip spare ribs shank buffalo cupim short loin bacon fatback tongue. Buffalo flank short loin drumstick capicola strip steak picanha shoulder hamburger bresaola brisket. Chicken capicola ham hock, kevin ribeye leberkas jerky t-bone rump meatball cow tri-tip shoulder spare ribs. Swine bresaola hamburger, sirloin landjaeger salami picanha ground round alcatra chicken pancetta pork chop. Landjaeger strip steak brisket, cow pork loin pork chop pork chicken tenderloin biltong ground round capicola meatball. Short loin bresaola beef chuck kevin strip steak. Frankfurter shankle capicola rump jowl bresaola burgdoggen pastrami jerky venison beef.[break][break]

SEE APP

[attr="class","bottomrule"]





[attr="class","ticketshape charTwo"]
[attr="class","ticket_grid"]
[attr="class","col_left"]
[attr="class","iconbox"]
[attr="class","ticketdivider"]


[attr="class","col_right"]
[attr="class","front"]
[attr="class","name_box"]
[attr="class","name"]Jane Doe

[attr="class","hatch"]


[attr="class","ticket_stats"]
[attr="class","stat_box"]
[attr="class","stat_label"]Age

[attr="class","stat_input"]Twenty


[attr="class","stat_box"]
[attr="class","stat_label"]Group

[attr="class","stat_input"]Lorem ipsum


[attr="class","stat_box"]
[attr="class","stat_label"]Occupation

[attr="class","stat_input"]Job


[attr="class","stat_box"]
[attr="class","stat_label"]Field

[attr="class","stat_input"]Info


[attr="class","back"]
Bacon ipsum dolor amet boudin bacon porchetta meatball ham. Prosciutto pork loin picanha, pancetta kevin tri-tip pork. Biltong pork loin chicken, salami tri-tip hamburger andouille cow.
[break][break]

SEE APP

[attr="class","bottomrule"]






made by gimmick




[googlefont=Source Sans Pro:400,600,700][googlefont=Source Code Pro:400,600,700]

[newclass=.ticketshape.charOne]--accent: rgb(255, 63, 47); --accentLight: rgba(255,63,47,.4)[/newclass]
[newclass=.ticketshape.charTwo]--accent: rgb(92, 111, 210); --accentLight: rgba(92, 111, 210, .4); [/newclass]

[newclass=.ticketcredits] width: 550px; overflow-x: hidden; margin: 30px auto; --background: #FDF7EF; color: var(--accent);[/newclass]
[newclass=.ticketcredits *] transition: .5s ease; -webkit-transition: .5s ease; [/newclass]
[newclass=.ticketcredits>a:last-child] display: block; text-align: right; margin-top: 4px; font: 700 7px/10px sans-serif; letter-spacing: .8px; text-decoration: none; text-transform: uppercase; [/newclass]
[newclass=.ticketcredits .ticketshape] position: relative; background: #FDF7EF; clip-path: polygon(0% 0%, 100% 0%, 100% calc(50% - 15px), calc(100% - 5px) calc(50% - 14px), calc(100% - 8px) calc(50% - 13px), calc(100% - 9px) calc(50% - 12px), calc(100% - 12px) calc(50% - 10px), calc(100% - 14px) calc(50% - 5px), calc(100% - 15px) calc(50% - 1px), calc(100% - 15px) 50%, calc(100% - 15px) calc(50% + 1px), calc(100% - 14px) calc(50% + 5px), calc(100% - 12px) calc(50% + 10px), calc(100% - 9px) calc(50% + 12px), calc(100% - 8px) calc(50% + 13px), calc(100% - 5px) calc(50% + 14px), 100% calc(50% + 15px), 100% 100%, 0% 100%, 0% calc(50% + 18px)); [/newclass]
[newclass=.ticketcredits .ticketshape:not(:first-child)] margin: 12px 0 0; [/newclass]
[newclass=.ticketcredits .ticket_grid] display: grid; grid-template-columns: 165px auto 1fr; grid-template-rows: 165px; grid-template-areas: 'left divider right'; grid-column-gap: 4px; [/newclass]
[newclass=.ticketcredits .col_left] grid-area: left; background-image: linear-gradient(135deg, var(--accentLight) 12.50%, var(--background) 12.50%, var(--background) 50%, var(--accentLight) 50%, var(--accentLight) 62.50%, var(--background) 62.50%, var(--background) 100%); background-size: 8px 8px; display: flex; justify-content: center; align-items: center;[/newclass]
[newclass=.ticketcredits .ticketdivider] grid-area: divider; background-image: linear-gradient(135deg, var(--accentLight) 12.50%, var(--background) 12.50%, var(--background) 50%, var(--accentLight) 50%, var(--accentLight) 62.50%, var(--background) 62.50%, var(--background) 100%); background-size: 8px 8px; width: 1px; margin-right: 16px; [/newclass]
[newclass=.ticketcredits .col_right] grid-area: right; padding: 24px 0 16px; background: var(--background); transition-delay: .25s; [/newclass]
[newclass=.ticketcredits .iconbox] width: 105px; height: 105px; border-radius: 100%; overflow: hidden; border: 10px solid var(--background); [/newclass]
[newclass=.ticketcredits .iconbox img] width: 100%; [/newclass]
[newclass=.ticketcredits .name_box] display: flex; align-items: center; justify-content: space-between; width: calc(100% + 124px); [/newclass]
[newclass=.ticketcredits .name] padding-right: 8px; font: 600 16px/1em 'Source Code Pro', monospace; color: var(--accent); [/newclass]
[newclass=.ticketcredits .hatch] background-image: linear-gradient(135deg, var(--accentLight) 12.50%, var(--background) 12.50%, var(--background) 50%, var(--accentLight) 50%, var(--accentLight) 62.50%, var(--background) 62.50%, var(--background) 100%); background-size: 8px 8px; flex-grow: 2; height: 13px; [/newclass]
[newclass=.ticketcredits .ticket_stats] display: grid; grid-template-columns: repeat(2, 1fr); grid-row-gap: 12px; margin: 18px 16px 0 0; padding-bottom: 16px; margin: 0; padding: 18px 16px 16px 0; [/newclass]
[newclass=.ticketcredits .stat_label] font: 400 11px/1.4em 'Source Sans Pro', sans-serif; text-transform: uppercase; color: var(--accent);[/newclass]
[newclass=.ticketcredits .stat_input] font: 600 12px/1.4em 'Source Code Pro', monospace; [/newclass]
[newclass=.ticketcredits .bottomrule] border-bottom: 1px dashed var(--accentLight); width: calc(100% + 124px) [/newclass]
[newclass=.ticketcredits .front] transition-delay: .3s; [/newclass]
[newclass=.ticketcredits .back] position: absolute; left: 190px; top: 0; width: calc(100% - 80px); height: 113px; overflow: auto; padding: 0 16px 0 0; margin: 21px 16px 0 0; opacity: 0; transition-delay: .3s; font: 400 14px/20px 'Source Sans Pro', sans-serif; color: #4e4e4e; [/newclass]
[newclass=.ticketcredits .back a] color: var(--accent); text-decoration-style: dotted; font: 700 14px 'Source Sans Pro', monospace; [/newclass]
[newclass=.ticketcredits br] content: ' '; display: block; margin: 0 0 9px [/newclass]
[newclass=.ticketshape:hover .back] opacity: 1; [/newclass]
[newclass=.ticketshape:hover .ticket_grid] transform: translateX(-150px); [/newclass]
[newclass=.ticketshape:hover .front] opacity: 0; [/newclass]
[newclass=.ticketshape ::-webkit-scrollbar] -webkit-appearance: none; width: 4px !important; border: 0 !important;[/newclass]
[newclass=.ticketshape ::-webkit-scrollbar-thumb] background: var(--accentLight); border: 0; [/newclass]
[newclass=.ticketshape ::-webkit-scrollbar-track] background: var(--background); border: 0; [/newclass]
[newclass=.ticketshape ::-webkit-scrollbar-thumb:horizontal] border: 0; [/newclass]
[newclass=.ticketshape ::-webkit-scrollbar-track:horizontal] border: 0 [/newclass]
last edit on Apr 11, 2021 21:19:01 GMT by gimmick
options
quote
bingo fish written Apr 15, 2021 4:59:51 GMT
937written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
No. 30: The World - Wanted to do something planetary, landed on a martian landscape. I forgot proboards doesn't support svgs so only an image here hah. The sun "sets" as you scroll 🌅

Live preview here




last edit on Apr 16, 2021 5:41:43 GMT by gimmick
options
quote
bingo fish written Apr 18, 2021 20:53:07 GMT
937written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
No. 04: Years From Now - Couldn't decide on a vibe, did both. Years from now in the past and the future. Vintage version is a bit too wide for this skin so it crops awkwardly, but— scrolls anyway.



[nospaces]

[attr="class","yearsvintage"]

[attr="class","yearsvintage_gradient"]

[attr="class","yearsvintage_left"]
[attr="class","running_shoulder"]
[attr="class","yearsvintage_iconbox"]


[attr="class","h1"]Molly Mockup
[attr="class","h2"]Planting seeds in a garden you never get to see. I wrote some notes at the beginning of a song someone will sing for me


[attr="class","yearsvintage_right"]
[attr="class","timelinearea"]

[attr="class","yearbox"]
[attr="class","h3"]2020
[attr="class","time_line"]
[attr="class","time_marker"]


[attr="class","year_content"]

[attr="class","datebox"] Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod. Culpa chislic porchetta picanha tongue. Proident tongue dolore. Ut irure kevin short ribs tail chuck kielbasa.

Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod. Culpa chislic porchetta picanha tongue. Proident tongue dolore. Ut irure kevin short ribs tail chuck kielbasa.


[attr="class","datebox"]
[attr="class","h4"]Event or Thread
Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod.


[attr="class","datebox"]
[attr="class","h4"]Event or Thread
Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod. Culpa chislic porchetta picanha tongue. Proident tongue dolore. Ut irure kevin short ribs tail chuck kielbasa.


[attr="class","datebox"]
[attr="class","h4"]Event or Thread
Culpa chislic porchetta picanha tongue. Proident tongue dolore.


[attr="class","datebox"]
[attr="class","h4"]Event or Thread
Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod.


[attr="class","datebox"]
[attr="class","h4"]Event or Thread
Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod.




[attr="class","yearbox"]
[attr="class","h3"]2021
[attr="class","time_line"]
[attr="class","time_marker"]


[attr="class","year_content"]

[attr="class","datebox"] Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod. Ut irure kevin short ribs tail chuck kielbasa. Culpa chislic porchetta picanha tongue. Proident tongue dolore


[attr="class","datebox"]
[attr="class","h4"]Thread or Event
Ut irure kevin short ribs tail chuck kielbasa. Culpa chislic porchetta picanha tongue. Proident tongue dolore


[attr="class","datebox"]
[attr="class","h4"]Thread or Event
Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod.




[attr="class","yearbox"]
[attr="class","h3"]2022
[attr="class","time_line"]
[attr="class","time_marker"]


[attr="class","year_content"]

[attr="class","datebox"] Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod. Ut irure kevin short ribs tail chuck kielbasa. Culpa chislic porchetta picanha tongue. Proident tongue dolore










[attr="class","credits"]made by gimmick






[googlefont=EB Garamond:400,500,600,700]

[newclass=.yearsvintage]max-width: 750px; width: 95%; margin: 30px auto; --background: #F8F3EC; --hatch: rgb(159, 113, 103, .4); --accentText: #8D5A4E; --accentTextRGB: rgb(141, 90, 78, .3); } .yearsvintage a.credits { display: block; text-align: right; margin-top: 4px; font: 700 7px/10px sans-serif; letter-spacing: .8px; text-decoration: none; text-transform: uppercase; } .yearsvintage_gradient { background: var(--background); position: relative; overflow: hidden; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .25); display: grid; grid-template-areas: 'left right'; overflow-x: auto; } .yearsvintage_left { grid-area: left; background-image: linear-gradient(135deg, var(--hatch) 12.50%, var(--background) 12.50%, var(--background) 50%, var(--hatch) 50%, var(--hatch) 62.50%, var(--background) 62.50%, var(--background) 100%); background-size: 6px 2px; width: 200px; height: 100%; padding: 33px 0 0 0; margin-left: 25px; } .yearsvintage .running_shoulder { background: var(--background); width: 100%; padding: 15px 0 12px; color: var(--accentText); } .yearsvintage_iconbox { z-index: 10; width: 100px; height: 100px; margin-left: 25px; border-radius: 100%; overflow: hidden; z-index: 10; position: relative; box-shadow: -25px 0 0 0 var(--accentTextRGB); } .yearsvintage .h1 { font: 400 24px/26px 'EB Garamond', serif; text-transform: uppercase; margin: 15px 0 3px; letter-spacing: .3px; } .yearsvintage .h2 { font: 400 11px/15px 'EB Garamond', serif; text-transform: uppercase; letter-spacing: .5px; } .yearsvintage_iconbox img { width: 100%; filter: grayscale(.95) sepia(.25) brightness(1.16) } .yearsvintage_right { grid-area: right; background: var(--background); padding: 0 0 2px; position: relative; z-index: 5; width: 100%; } .yearsvintage .timelinearea { overflow-x: auto; padding: 45px 30px 30px; display: flex } .yearsvintage .yearbox { display: inline-grid; align-content: flex-start; border-right: 1px dotted var(--hatch); margin-right: 20px; } .yearsvintage .time_line { background: #D3D3D3; height: 1px; display: flex; align-items: center; margin: 14px 0 2px; display: none; } .yearsvintage .time_marker { width: 7px; height: 7px; transform: rotate(45deg); background: var(--accentText); } .yearsvintage .year_content { display: inline-flex; writing-mode: vertical-lr; flex-wrap: wrap; align-content: flex-start; height: 500px; width: -webkit-fit-content; width: fit-content; } .yearsvintage .h3 { margin: 0 0 -5px; font: 500 24px/27px 'EB Garamond', serif; color: var(--accentText); } .yearsvintage .datebox { width: 210px; writing-mode: horizontal-tb; margin: 10px 20px 0 0; font: 400 14px/17px 'EB Garamond', serif; color: #444; } .yearsvintage .datebox:last-child { margin-bottom: 0; } .yearsvintage .h4 { margin: 0; color: var(--accentText); font: 700 14px/17px 'EB Garamond', serif; } .yearsvintage br+br { content: ''; display: block; height: 6px; } .yearsvintage .yearbox:last-child { border: 0; margin-right: 0; } .yearsvintage .yearbox:last-child .datebox { margin-right: 0; } .yearsvintage ::-webkit-scrollbar { -webkit-appearance: none; height: 0px; border: 0 !important; } .yearsvintage ::-webkit-scrollbar-thumb { background: var(--accentText); border: 0; /* border-left: 225px solid var(--background);*/ } .yearsvintage ::-webkit-scrollbar-track { background: var(--background); } .yearsvintage ::-webkit-scrollbar-thumb:vertical { border: 0; } .yearsvintage ::-webkit-scrollbar-track:vertical { border: 0px;[/newclass]




[attr="class","yearsmodern"]

[attr="class","yearsmodern_gradient"]

[attr="class","yearsmodern_iconbox"]


[attr="class","yearsmodern_content"]
[attr="class","timelinearea"]

[attr="class","yearbox"]
[attr="class","h1"]2020
[attr="class","time_line"]
[attr="class","time_marker"]


[attr="class","year_content"]

[attr="class","datebox"] Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod. Culpa chislic porchetta picanha tongue. Proident tongue dolore. Ut irure kevin short ribs tail chuck kielbasa.

Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod. Culpa chislic porchetta picanha tongue. Proident tongue dolore. Ut irure kevin short ribs tail chuck kielbasa.


[attr="class","datebox"]
[attr="class","h3"]Event or Thread
Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod.


[attr="class","datebox"]
[attr="class","h3"]Event or Thread
Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod. Culpa chislic porchetta picanha tongue. Proident tongue dolore. Ut irure kevin short ribs tail chuck kielbasa.


[attr="class","datebox"]
[attr="class","h3"]Event or Thread
Culpa chislic porchetta picanha tongue. Proident tongue dolore.


[attr="class","datebox"]
[attr="class","h3"]Event or Thread
Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod.
[attr="class","datebox"]
[attr="class","h3"]Event or Thread
Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod.




[attr="class","yearbox"]
[attr="class","h1"]2021
[attr="class","time_line"]
[attr="class","time_marker"]


[attr="class","year_content"]

[attr="class","datebox"] Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod. Ut irure kevin short ribs tail chuck kielbasa. Culpa chislic porchetta picanha tongue. Proident tongue dolore
[attr="class","datebox"]
[attr="class","h3"]Thread or Event
Ut irure kevin short ribs tail chuck kielbasa. Culpa chislic porchetta picanha tongue. Proident tongue dolore


[attr="class","datebox"]
[attr="class","h3"]Thread or Event
Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod.




[attr="class","yearbox"]
[attr="class","h1"]2022
[attr="class","time_line"]
[attr="class","time_marker"]


[attr="class","year_content"]

[attr="class","datebox"] Flank short loin commodo, dolore nulla officia picanha eu. Biltong quis elit, salami sint laboris eiusmod. Ut irure kevin short ribs tail chuck kielbasa. Culpa chislic porchetta picanha tongue. Proident tongue dolore






[attr="class","yearsmodern_hatch"]






[attr="class","credits"]made by gimmick








[googlefont=Barlow:400,500,600,700]

[newclass=.yearsmodern]max-width: 600px; width: 95%; margin: 30px auto; --background: white; --hatch: black; --accentOne: #3349CC; --accentTwo: #8054ea; --accentText: #5657CD; } .yearsmodern a.credits { display: block; text-align: right; margin-top: 4px; font: 700 7px/10px sans-serif; letter-spacing: .8px; text-decoration: none; text-transform: uppercase; } .yearsmodern_gradient { background: linear-gradient(to right, var(--accentTwo) 0%, var(--accentOne) 100%); padding: 42px 0 15px; position: relative; border-radius: 5px 5px 0 0; overflow: hidden; box-shadow: 0 2px 3px 0 rgba(0,0,0,.25); } .yearsmodern_hatch { background-image: linear-gradient(135deg, var(--hatch) 12.50%, var(--background) 12.50%, var(--background) 50%, var(--hatch) 50%, var(--hatch) 62.50%, var(--background) 62.50%, var(--background) 100%); background-size: 6px 6px; width: 100%; height: 100%; position: absolute; z-index: 0; top: 0; opacity: .25; mix-blend-mode: soft-light; } .yearsmodern_iconbox { z-index: 10; width: 100px; height: 100px; border-radius: 100%; overflow: hidden; margin: 0 36px -50px; z-index: 10; position: relative; box-shadow: 0 0 0 8px var(--background); } .yearsmodern_iconbox img { width: 100%; } .yearsmodern_content { background: var(--background); padding: 0 0 2px; position: relative; z-index: 5; width: 100%; overflow: auto } .yearsmodern .timelinearea { overflow-x: auto; padding: 76px 36px 20px; height: 100%; display: flex } .yearsmodern .yearbox { display: inline-grid; align-content: flex-start; } .yearsmodern .time_line { background: #D3D3D3; height: 1px; display: flex; align-items: center; margin: 14px 0 2px; } .yearsmodern .time_marker { width: 7px; height: 7px; transform: rotate(45deg); background: var(--accentText); } .yearsmodern .year_content { display: inline-flex; writing-mode: vertical-lr; flex-wrap: wrap; align-content: flex-start; min-height: 500px; max-height: 500px; width: -webkit-fit-content; width: fit-content; } .yearsmodern .h1 { margin: 0; font: 600 30px/1em 'Barlow', sans-serif; color: var(--accentText); } .yearsmodern .datebox { width: 210px; writing-mode: horizontal-tb; margin: 12px 25px 0 0; font: 400 13px/16px 'Barlow', sans-serif; color: #444; } .yearsmodern .datebox:last-child { margin-bottom: 0; } .yearsmodern .datebox .h3 { margin: 0; color: var(--accentText); font: 600 13px/16px 'Barlow', sans-serif; } .yearsmodern br+br { content: ''; display: block; height: 6px; } .yearsmodern .yearbox:last-child .year_content { margin-right: 10px; } .yearsmodern ::-webkit-scrollbar { -webkit-appearance: none; height: 5px; border: 0 !important; } .yearsmodern ::-webkit-scrollbar-thumb { background: linear-gradient(to right, var(--accentTwo) 0%, var(--accentOne) 100%); border: 0; border-radius: 1px; } .yearsmodern ::-webkit-scrollbar-track { background: var(--background); } .yearsmodern ::-webkit-scrollbar-thumb:horizontal { border: 0; } .yearsmodern ::-webkit-scrollbar-track:horizontal { border: 0px; [/newclass]
last edit on Apr 25, 2021 7:49:00 GMT by gimmick
options
quote
bingo fish written Apr 22, 2021 0:16:36 GMT
937written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
No. 9: Trilogy - When I think of trilogies, I think of book series, which led to bookshelves. Technically it's a quartet now, but the proportions worked better. Featuring four Makimas in the absence of other filler images.

[nospaces]
[attr="class","gim-bookshelf"]
[attr="class","gim-bookshelf_inner"]
[attr="class","gim-bookend"]
[attr="class","gim-bookend_text"]
[attr="class","gim-book_h1"]
Hello, [break]Gimmick here.

[attr="class","gim-book_h2"]
I like to write about pork belly, turkey shoulder beef drumstick ullamco ham fatback. Ut sed officia, laboris labore pork belly hamburger chuck beef minim.

[attr="class","gim-hatch gim-thin"]

[attr="class","gim-hatch gim-thick"]


[attr="class","gim-books"]
[attr="class","gim-book charFour"]
[attr="class","gim-book_spine"]
[attr="class","spine_image"]

[attr="class","spine_color"]

[attr="class","spine_overlay"]

[attr="class","spine_text"]IV

[attr="class","spine_decor"]
[attr="class","gim-hatch gim-thin"]

[attr="class","gim-hatch gim-thick"]

[attr="class","gim-book_page"]
[attr="class","gim-page_content"]

[attr="class","gim-book_h3"]Azure


Spicy jalapeno incididunt excepteur consectetur laboris beef andouille tempor biltong aliquip sed fugiat irure swine est. Pastrami cillum sunt irure laboris, sint esse sausage. Cow officia ut ullamco shoulder. Mollit qui non biltong beef ribs ut corned beef. Duis sausage porchetta do dolore commodo sint, excepteur filet mignon. Minim aliqua in kielbasa, chislic non short ribs venison rump turkey eiusmod chuck. Cupidatat pork belly ham hock pastrami mollit chislic enim bacon. [break][break]

Hook One / Chicken dolore capicola, pastrami ground round sirloin nulla in picanha corned beef fugiat fatback. Voluptate t-bone jerky nostrud, alcatra capicola sunt ham hock non cillum tri-tip pork belly. Short loin ex in cupidatat turkey reprehenderit. Pariatur corned beef duis, ball tip kielbasa sausage sint adipisicing jerky.






[attr="class","gim-book charThree"]
[attr="class","gim-book_spine"]
[attr="class","spine_image"]

[attr="class","spine_color"]

[attr="class","spine_overlay"]

[attr="class","spine_text"]III

[attr="class","spine_decor"]
[attr="class","gim-hatch gim-thin"]

[attr="class","gim-hatch gim-thick"]

[attr="class","gim-book_page"]
[attr="class","gim-page_content"]

[attr="class","gim-book_h3"]Cloverleaf


Spicy jalapeno incididunt excepteur consectetur laboris beef andouille tempor biltong aliquip sed fugiat irure swine est. Pastrami cillum sunt irure laboris, sint esse sausage. Cow officia ut ullamco shoulder. Mollit qui non biltong beef ribs ut corned beef. Duis sausage porchetta do dolore commodo sint, excepteur filet mignon. Minim aliqua in kielbasa, chislic non short ribs venison rump turkey eiusmod chuck. Cupidatat pork belly ham hock pastrami mollit chislic enim bacon. [break][break]

Hook One / Chicken dolore capicola, pastrami ground round sirloin nulla in picanha corned beef fugiat fatback. Voluptate t-bone jerky nostrud, alcatra capicola sunt ham hock non cillum tri-tip pork belly. Short loin ex in cupidatat turkey reprehenderit. Pariatur corned beef duis, ball tip kielbasa sausage sint adipisicing jerky.






[attr="class","gim-book charTwo"]
[attr="class","gim-book_spine"]
[attr="class","spine_image"]

[attr="class","spine_color"]

[attr="class","spine_overlay"]

[attr="class","spine_text"]II

[attr="class","spine_decor"]
[attr="class","gim-hatch gim-thin"]

[attr="class","gim-hatch gim-thick"]

[attr="class","gim-book_page"]
[attr="class","gim-page_content"]

[attr="class","gim-book_h3"]Goldenrod


Spicy jalapeno incididunt excepteur consectetur laboris beef andouille tempor biltong aliquip sed fugiat irure swine est. Pastrami cillum sunt irure laboris, sint esse sausage. Cow officia ut ullamco shoulder. Mollit qui non biltong beef ribs ut corned beef. Duis sausage porchetta do dolore commodo sint, excepteur filet mignon. Minim aliqua in kielbasa, chislic non short ribs venison rump turkey eiusmod chuck. Cupidatat pork belly ham hock pastrami mollit chislic enim bacon. [break][break]

Hook One / Chicken dolore capicola, pastrami ground round sirloin nulla in picanha corned beef fugiat fatback. Voluptate t-bone jerky nostrud, alcatra capicola sunt ham hock non cillum tri-tip pork belly. Short loin ex in cupidatat turkey reprehenderit. Pariatur corned beef duis, ball tip kielbasa sausage sint adipisicing jerky.






[attr="class","gim-book charOne"]
[attr="class","gim-book_spine"]
[attr="class","spine_image"]

[attr="class","spine_color"]

[attr="class","spine_overlay"]

[attr="class","spine_text"]I

[attr="class","spine_decor"]
[attr="class","gim-hatch gim-thin"]

[attr="class","gim-hatch gim-thick"]

[attr="class","gim-book_page"]
[attr="class","gim-page_content"]
[attr="class","gim-book_h3"]Carmine

Spicy jalapeno excepteur consectetur laboris beef andouille tempor biltong aliquip sed fugiat irure swine est. Pastrami cillum sunt irure laboris, sint esse sausage. Cow officia ut ullamco shoulder. Mollit qui non biltong beef ribs ut corned beef. Duis sausage porchetta do dolore commodo sint, excepteur filet mignon. Minim aliqua in kielbasa, chislic non short ribs venison rump turkey eiusmod chuck. Cupidatat pork belly ham hock pastrami mollit chislic enim bacon. [break][break]

Hook One / Chicken dolore capicola, pastrami ground round sirloin nulla in picanha corned beef fugiat fatback. Voluptate t-bone jerky nostrud, alcatra capicola sunt ham hock non cillum tri-tip pork belly. Short loin ex in cupidatat turkey reprehenderit. Pariatur corned beef duis, ball tip kielbasa sausage sint adipisicing jerky. [break][break]

Hook Two / Adipiscing nunc duis a nisl. Leo proin vitae sagittis in. Mattis volutpat viverra nulla amet amet, felis. Neque, elit gravida mauris ac praesent in amet. Vestibulum scelerisque lacus aliquam volutpat non massa nulla purus. Tellus turpis lorem amet nec, non. Congue aliquet nunc in viverra. Habitant at felis placerat sed facilisis velit amet nec amet. Sed sollicitudin enim nec pellentesque. Posuere volutpat eu lacinia quam. Aliquam mauris volutpat nisl at id scelerisque varius in ullamcorper.







[attr="class","gimcredits"]made by gimmick










[googlefont=Crimson Text:400,700][googlefont=Varta:400,700]

[newclass=.charOne]--charAccent: #A52A2A[/newclass]
[newclass=.charTwo]--charAccent: #927A01[/newclass]
[newclass=.charThree]--charAccent: #23A735[/newclass]
[newclass=.charFour]--charAccent: #567EAE [/newclass]

[newclass=.gim-bookshelf]width: max-content; margin: 30px auto; --clearstripe: transparent; --fontserif: 'Crimson Text'; --fontsans: 'Varta'; } .gim-book, .gim-book div { transition: transform .5s ease, opacity .5s 0s ease; } .gim-page_content { transition: opacity 1s .25s ease; } .gim-bookshelf a.gimcredits { display: block; text-align: right; margin-top: 4px; font: 700 7px/10px sans-serif; letter-spacing: .8px; text-decoration: none; text-transform: uppercase; margin-right: 6px; } .gim-bookshelf_inner { background: radial-gradient(ellipse farthest-corner at 75% 100%, rgba(0, 0, 0, .1) 0%, #f9f9f9 100%), #f9f9f9; width: 600px; border-radius: 6px; position: relative; transform: translateZ(0); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .25); padding: 6px; } .gim-books { display: flex; flex-direction: row-reverse; justify-content: flex-end; width: 600px; overflow-x: hidden; border-radius: 6px; } .gim-bookend { display: block; width: 312px; height: calc(100% - 12px); position: absolute; --colorstripe: gray; } .gim-bookend_text { height: 417px; margin: 12px 0 0 12px; color: black; } .gim-book_h1 { font: 400 42px/42px var(--fontserif), serif; opacity: .5; letter-spacing: -1px; margin-bottom: 9px; width: 250px; } .gim-book_h2 { font: 400 13px/18px var(--fontsans), sans-serif; opacity: .5; width: 260px; } .gim-bookend .gim-hatch { opacity: .5; margin-left: -6px; } .gim-book { display: grid; grid-template-columns: 75px 300px; grid-template-areas: 'spine page'; --colorstripe: var(--charAccent); box-sizing: border-box; } .gim-book_spine { grid-area: spine; position: relative; display: flex; justify-content: center; border: 1px solid white; border-radius: 6px 0 0 6px; overflow: hidden; transform: translateZ(0); -webkit-transform: translateZ(0); } .spine_image { filter: saturate(1.25) contrast(.5) brightness(1.3); -webkit-filter: saturate(1.25) contrast(.5) brightness(1.3); position: absolute; width: 100%; height: 100%; top: 0; } .spine_color { background: var(--charAccent); position: absolute; width: 100%; height: 100%; top: 0; mix-blend-mode: color; opacity: .5; } .spine_overlay { background: linear-gradient(to top, rgba(255, 255, 255, 0.2) 0%, #FFFFFF 100%), rgba(220, 220, 220, .65); mix-blend-mode: luminosity; opacity: 0.9; position: absolute; width: 100%; height: 100%; top: 0; z-index: 0; } .spine_text { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: transparent; margin-top: 21px; color: var(--charAccent); font: 400 21px/1em var(--fontserif), serif; margin-right: 3px; height: 43px; width: 100%; z-index: 100; } .spine_text:after { content: ''; display: block; width: 81px; margin-right: -2px; height: 10px; background-image: linear-gradient(to bottom left, var(--colorstripe) 12.50%, var(--clearstripe) 12.50%, var(--clearstripe) 50%, var(--colorstripe) 50%, var(--colorstripe) 62.50%, var(--clearstripe) 62.50%, var(--clearstripe) 100%); background-size: 6px 6px; height: 1px; } .spine_decor { position: absolute; z-index: 100; width: 100%; bottom: 15px; } .gim-hatch { background-image: linear-gradient(to bottom left, var(--colorstripe) 12.50%, var(--clearstripe) 12.50%, var(--clearstripe) 50%, var(--colorstripe) 50%, var(--colorstripe) 62.50%, var(--clearstripe) 62.50%, var(--clearstripe) 100%); background-size: 6px 6px; } .gim-thin { height: 15px; margin-bottom: 10px; } .gim-thick { height: 20px; } .gim-book_page { grid-area: page; background: #f9f9f9; padding: 21px 9px 16px 0; position: relative; overflow-x: hidden; width: 305px; } .gim-book_page:before { content: ''; position: absolute; width: 100%; top: 0; left: 0; height: 100%; z-index: 1; opacity: .05; background: linear-gradient(to right, white 0%, var(--charAccent) 100%); } .gim-page_content { position: relative; z-index: 100; padding: 0 18px 3px 18px; height: calc(500px - 50px); overflow: auto; font: 400 13px/17px var(--fontsans), sans-serif; color: #555 } .gim-books b { color: var(--charAccent); } .gim-books a { color: var(--charAccent); text-decoration-style: dotted; font: inherit } .gim-books br+br { content: ' '; display: block; margin: 8px 0; } .gim-book_h3 { color: var(--charAccent); font: 400 21px/1em var(--fontserif), serif; margin: 0 0 15px; font-style: normal; } /* ACCORDION POSITIONING */ .gim-books .charOne { transform: translate(309px); -webkit-transform: translate(309px); z-index: 10; } .gim-books .charTwo { transform: translate(6px); -webkit-transform: translate(6px); z-index: 20; } .gim-books .charThree { transform: translate(-297px); -webkit-transform: translate(-297px); z-index: 30 } .gim-books .charFour { transform: translate(-600px); -webkit-transform: translate(-600px); z-index: 40; } /* SLIDE OVER */ .gim-books .charOne:hover, .gim-books .charTwo:hover~.charOne, .gim-books .charThree:hover~.charOne, .gim-books .charFour:hover~.charOne { transform: translate(0); -webkit-transform: translate(0); margin-left: 0; } .gim-books .charTwo:hover, .gim-books .charThree:hover~.charTwo, .gim-books .charFour:hover~.charTwo { transform: translate(-303px); -webkit-transform: translate(-303px); } .gim-books .charThree:hover, .gim-books .charFour:hover~.charThree { transform: translate(-606px); -webkit-transform: translate(-606px); } .gim-books .charFour:hover { transform: translate(-909px); -webkit-transform: translate(-909px); } /* FADE-IN */ .gim-book:hover .spine_overlay { opacity: .75; } .gim-book:hover~.gim-books .charOne .spine_overlay { opacity: .9; } .gim-book .gim-page_content, .gim-book:hover~.gim-books .charOne .gim-page_content { opacity: 0; } .gim-book:hover .gim-page_content { opacity: 1; } .gim-bookshelf ::-webkit-scrollbar { -webkit-appearance: none; width: 4px !important; border: 0 !important; background: rgba(0,0,0,0); } .gim-bookshelf ::-webkit-scrollbar-thumb { background: #dedede; border: 0; } .gim-bookshelf ::-webkit-scrollbar-track { background: background: rgba(0,0,0,0); border: 0; [/newclass]
last edit on Apr 25, 2021 18:13:18 GMT by gimmick
options
quote
bingo fish written Apr 25, 2021 15:31:44 GMT
937written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
[nospaces]
[attr="class","gim-canvasdark"]
No. 03: Ashes to Ashes - Minimal as minimal gets, yet spent a stupidly long amount of time on those blasted embers soooo...I'm slapping this on a darker background so they're at least somewhat more visible orz. Lyrics are from a Promare track, though not, I'm afraid, the one called Ashes


[attr="class","emberlit"]
[attr="class","emberlit_border"]
[attr="class","emberlit_inner"]
[attr="class","emberlit_gradient"]


[attr="class","emberlit_header"]
[attr="class","top-ember"]


[attr="class","emberlit_lyrics"]
The pyro in us wants to watch [break]
the kingdom of your castle burn


[attr="class","emberlit_text"] We do not say the words of cheer much any more. All smiles have become archaic. The trouble is that we have a bad habit, encouraged by pedants and sophisticates, of considering happiness as something rather stupid. Only pain is intellectual, only evil interesting. This is the treason of the artist: a refusal to admit the banality of evil and the terrible boredom of pain. If you can’t lick ‘em, join ‘em. If it hurts, repeat it. But to praise despair is to condemn delight, to embrace violence is to lose hold of everything else. [break][break] We have almost lost hold; we can no longer describe a happy man, nor make any celebration of joy. How can I tell you about the people of Omelas? They were not naive and happy children— though their children were, in fact, happy. They were mature, intelligent, passionate adults whose lives were not wretched. [break][break] O miracle! but I wish I could describe it better. I wish I could convince you. Omelas sounds in my words like a city in a fairy tale, long ago and far away, once upon a time. Perhaps it would be best if you imagined it as your own fancy bids, assuming it will rise to the occasion, for certainly I cannot suit you all. [break][break]


[attr="class","h3"]notes – exerpt from The Ones Who Walk Away From Omelas, Ursula Le Guin



[attr="class","emberlit_footer"]
[attr="class","seamlessembers"]
[attr="class","bottom-ember"]

[attr="class","bottom-ember"]

[attr="class","bottom-ember"]

[attr="class","bottom-ember"]



[attr="class","emberlit_footer"]
[attr="class","seamlessembers"]
[attr="class","bottom-ember"]

[attr="class","bottom-ember"]

[attr="class","bottom-ember"]

[attr="class","bottom-ember"]


[attr="class","gimcredits"]made by gimmick




[googlefont=Nunito Sans:300,400,600][googlefont=Petrona:400,500,700]
[newclass=.gim-canvasdark]background: #111; width: 100%; padding: 20px 0; color: #999; line-height: 1.5em[/newclass]

[newclass=.emberlit]max-width: calc(450px + 10px); min-width: 300px; width: 95%; margin: 30px auto; --textgray: #808080; --textaccent: rgb(179 87 22); --textaccentRGB: 179, 87, 22; } .emberlit a.gimcredits { display: block; text-align: right; margin-top: 4px; font: 700 7px/10px sans-serif; letter-spacing: .8px; text-decoration: none; text-transform: uppercase; } .emberlit_gradient { position: absolute; height: 100%; width: 100%; background: linear-gradient(to bottom, rgb(11, 15, 21) 70%, rgba(7, 16, 31, 0) 90%); top: 0; z-index: 20; } .emberlit_border { padding: 3px; background: transparent; border: 1px solid rgba(var(--textaccentRGB), .3); border: 1px solid #0D0E0F; } .emberlit_inner { background: #0D0E0F; background: rgb(13, 19, 29); position: relative; overflow: hidden; border: 1px solid rgba(var(--textaccentRGB), .3); } .emberlit_header { width: 100%; height: 45px; top: 0; z-index: 30; position: relative; display: flex; justify-content: center; overflow: hidden; } .top-ember { display: block; } .top-ember svg, .top-ember img { opacity: 0; animation: flicker3 9s 0 linear; animation-iteration-count: infinite; filter: brightness(2.25); -webkit-animation: flicker3 9s 0 linear; -webkit-animation-iteration-count: infinite; -webkit-filter: brightness(2.25); } @keyframes flicker3 { 0%, 100% { transform: translate(0, 15px); opacity: 0; } 90%, 99% { opacity: 1; transform: translate(0, -45px); } } .emberlit_lyrics { position: relative; color: var(--textaccent); padding: 35px 60px 0px; text-align: center; z-index: 50; letter-spacing: .15em; margin-top: -45px; text-transform: uppercase; font: 700 11.5px/14px 'Petrona', serif; opacity: .8; } .emberlit_text { color: var(--textgray); padding: 20px 35px 0 45px; margin-bottom: -138px; z-index: 50; position: relative; font: 300 12px/17px 'Nunito Sans', sans-serif; font: 300 13px/18.5px 'Nunito Sans', sans-serif; letter-spacing: .65px; } .emberlit br+br { content: ''; display: block; margin: 0 0 11px; } .emberlit hr { display: block; border: 0; border-top: 0px dotted var(--textgray); width: 10%; margin: 22px auto 0; opacity: .8; } .emberlit .h3 { font: 500 11.5px/11.5px 'Petrona', serif; text-transform: uppercase; color: var(--textaccent); display: inline-flex; align-items: center; letter-spacing: .1em; } .emberlit_footer { z-index: 0; height: 227px; width: 100%; display: flex; justify-content: center; } .seamlessembers { position: absolute; bottom: 0; display: block; } .bottom-ember { height: calc(240px / 2); overflow: visible; } .bottom-ember img { height: 240px; filter: brightness(1.3) blur(1); -webkit-filter: brightness(1.3) blur(1); } .seamlessembers:first-child { animation: flicker1 60s 0 linear; animation-iteration-count: infinite; transform: translate(0, 0) scale(1); -webkit-animation: flicker1 60s 0 linear; -webkit-animation-iteration-count: infinite; -webkit-transform: translate(0, 0) scale(1); opacity: .75; } .seamlessembers:last-child { animation: flicker2 60s 0 linear; animation-iteration-count: infinite; transform: translate(0, 480px) scale(1.25); -webkit-animation: flicker2 60s 0 linear; -webkit-animation-iteration-count: infinite; -webkit-transform: translate(0, 480px) scale(1.25); } @keyframes flicker1 { 0%, 100% { transform: translate(0, 0) scale(1); -webkit-transform: translate(0, 0) scale(1); } 49% { transform: translate(0, -480px) scale(1); -webkit-transform: translate(0, -480px) scale(1); opacity: 1; } 50% { transform: translate(0, 480px) scale(1); -webkit-transform: translate(0, 480px) scale(1); opacity: 0 } 51% { opacity: 1; } 99% { transform: translate(0px, 0) scale(1); -webkit-transform: translate(0px, 0) scale(1); opacity: .75; } } @keyframes flicker2 { 0%, 100% { transform: translate(0, 480px) scale(1.25); -webkit-transform: translate(0, 480px) scale(1.25); } 50% { transform: translate(0, 0) scale(1); -webkit-transform: translate(0, 0) scale(1); opacity: .75 } 99% { transform: translate(0, -480px) scale(1.25); -webkit-transform: translate(0, -480px) scale(1.25); opacity: 1; } [/newclass]
last edit on Apr 25, 2021 18:10:00 GMT by gimmick
options
quote
bingo fish written Apr 27, 2021 3:36:50 GMT
937written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
[nospaces]
[attr="class","gim-canvasdark"]
No. 14: Dawn/Dusk - This was originally going to be two separate color studies. Then I decided to try a thing. Pro tip: it only plays on hover. Give it a few seconds in order to, shall we say, watch the sun rise. ‘Tis slow





[attr="class","sundial"]

[attr="class","sundialinner"]
[attr="class","gradientbox gradient-day"]


[attr="class","sundial-topper"]
[attr="class","sun-iconbox"]
[attr="class","sun-iconcolor"]




[attr="class","sun-lyricbox"]
[attr="class","sun-lyric"]
all I want is freedom [break]a world with no more night [break]


[attr="class","sundial-text"]
Enim, ultricies platea ullamcorper aliquet habitant odio amet. Duis commodo, leo vitae egestas enim. Vitae ut placerat at mauris eget augue velit porttitor. Porttitor sed arcu mauris morbi quis. Ut in enim aliquet natoque erat turpis porttitor adipiscing. Dui diam dignissim aliquam nulla id. Viverra viverra facilisis nullam mattis viverra. Porttitor eget fringilla mauris sed magna consequat. Tellus morbi ut consectetur faucibus purus a, urna nulla. Aliquam dui lobortis duis venenatis eget sed quam sapien nec. Habitant pellentesque vulputate facilisi ultrices nibh. Aliquam at amet volutpat, velit amet, nunc mattis faucibus. [break][break]

Viverra a ipsum tortor senectus. Quisque ut urna aliquam amet, placerat lorem amet. Eu sagittis, pharetra, pellentesque proin. Tortor sed interdum amet, vehicula mattis auctor risus cursus. Vel elit in nunc viverra mauris malesuada orci lobortis porttitor. Consectetur ipsum sit viverra ut. Nam orci et dictum sed. Praesent dignissim imperdiet tristique dignissim ut pellentesque accumsan et. [break][break]

[attr="class","sundial-tagbox"]
for gimmick


[attr="class","gimcredits"]made by gimmick







[newclass=.gim-canvasdark]background: #111; width: 100%; padding: 20px 0; color: #999; line-height: 1.5em[/newclass]

[googlefont=Nunito:300,400,600,700]
[newclass=.sundial]width: 420px; margin: 30px auto; --accent1: #8E471D; --accent2: #50463B; --suncolor: #FFA216; } .sundial a.gimcredits { display: block; text-align: right; margin-top: 4px; font: 700 7px/10px sans-serif; letter-spacing: .8px; text-decoration: none; text-transform: uppercase; } .sundialinner { position: relative; background: linear-gradient(to bottom, rgb(11, 2, 65, .5), rgb(73, 16, 47, .5) 90%), #0b0b0c; } .sundial .gradientbox { height: 100%; width: 100%; position: absolute; top: 0; z-index: 0; } .sundial .gradient-day { background: radial-gradient(105.69% 49.89% at 50% 50.11%, #FFA216 0%, #A93131 19.41%, #49102F 58.03%, #0B0241 100%); background-size: 300% 400%; background-position: 50% 0%; animation: gradient-day 30s linear infinite; animation-play-state: paused; opacity: 1; } .sundialinner:hover .gradient-day { animation-play-state: running } @keyframes gradient-day { /* starts center bottom then goes clockwise */ 0% { /* center bottom */ opacity: .15; background-position: 50% 0%; } 5% { opacity: .5; } 23% { /* left bottom */ opacity: 1; background-position: 100% 0%; } 45% { /* left top */ background-position: 100% 99%; } 50% { opacity: 1; } 55% { /* right top */ background-position: 0% 99%; } 77% { /* right bottom */ background-position: 0% 0%; opacity: 1 } 95% { opacity: .5; } 100% { /* center bottom */ background-position: 50% 0%; opacity: .15; } } .sundial-topper { padding: 30px 45px; display: flex; align-items: center; justify-content: center; } .sun-iconbox { width: max-content; height: max-content; margin: 0; border-radius: 100%; padding: 5px; border: 1px solid var(--accent1); position: relative; overflow: hidden; transition: all .6s ease; } .sundialinner:hover .sun-iconbox { opacity: 0; transform: translateY(2.25em); } .sun-lyricbox { height: 90px; width: 45px; position: absolute; display: flex; justify-content: center; align-items: center; flex-direction: column; overflow: visible; border-top: 0px solid var(--suncolor); border-bottom: 1px solid var(--suncolor); transform: translateY(3em); opacity: 0; transition: all .6s ease; } .sundialinner:hover .sun-lyricbox { opacity: .65; transform: translateY(.25em); } .sun-lyric { width: 300px; display: block; text-align: center; color: var(--suncolor); font: 600 11px/18px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: 1.5px; mix-blend-mode: color-dodge; } .sun-iconbox img { position: relative; display: block; width: 90px; height: 90px; border-radius: 100%; z-index: 50; opacity: .8; } .sun-iconcolor { display: block; width: 90px; height: 90px; border-radius: 100%; background: var(--accent2); position: absolute; top: 5px; opacity: 1; z-index: 20; } .sundial-text { padding: 0 45px 60px; color: rgba(255, 255, 255, .55); font: 300 13px/19.5px 'Nunito', sans-serif; letter-spacing: .5px; z-index: 100; position: relative; } .sundial-tagbox { text-align: left; margin: 11px 0 0; font: 600 11px/19.5px 'Nunito', sans-serif; opacity: 1; } .sundial-text b { color: var(--suncolor); opacity: .65; font-weight: 600; } .sundial-text a { color: var(--suncolor); opacity: .65; text-decoration-style: dotted; letter-spacing: .7px; } .sundial-text br+br { content: ''; display: block; margin: 0 0 11px; } .sundial ::selection { background: rgb(255, 162, 22,.25); color: rgba(255,255,255,.65); [/newclass]

last edit on Apr 27, 2021 6:06:23 GMT by gimmick
write a reply

QUICK REPLY

WRITE YOUR POST DOWN BELOW