write a reply

They Look Better In Codepen

options
quote
They Look Better In Codepen written Mar 18, 2022 23:46:59 GMT
pronounsShe/Her
75written posts
zytlearned bits
offlinecurrently
zytl
Junior Member
zytl Avatar
If you're waiting until you feel talented enough to make it, you'll never make it.

[newclass=".th-newspaper-o:before"]content:"\ead8";[/newclass]
[newclass=".th-smartphone-o:before"]content:"\eb53";[/newclass]
[newclass="nullelem"]} @font-face {font-family: "honeybee";src:url("//solrainha.github.io/honeybee/honeybee.eot");src:url("//solrainha.github.io/honeybee/honeybee.eot?#iefix") format("embedded-opentype"),url("//solrainha.github.io/honeybee/honeybee.woff") format("woff"),url("//solrainha.github.io/honeybee/honeybee.ttf") format("truetype"),url("//solrainha.github.io/honeybee/honeybee.svg#honeybee") format("svg");font-weight: normal;font-style: normal;} [class^="th-"]:before {font-family: "honeybee" !important;font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;speak: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} [class^="th-"] {display:inline-grid;[/newclass]
[nospaces][googlefont=Inria+Sans|Inria+Serif]


[attr="class","Porcelain"]
[attr="class","PorcelainBanner"]
[attr="class","PorcelainHeader"]Firstname Last

[attr="class","PorcelainSubheader"]AGE: 69 ➛ PROFESSION: YOUR MOM ➛ Sexuality: Bisexual


[attr="class","PorcelainUncompletedContain"]
[attr="class","PorcelainHeader"]Ongoing

[attr="class","UncompletedScroll"]
[attr="class","Uncompleted"]
[attr="class","UncompletedIcon"][attr="class","th-smartphone-o"]
[attr="class","UncompletedInfo"]
[attr="class","PorcelainSubheader"]Title here

[attr="class","PorcelainWith"]With Zytl



[attr="class","Uncompleted"]
[attr="class","UncompletedIcon"][attr="class","th-newspaper-o"]
[attr="class","UncompletedInfo"]
[attr="class","PorcelainSubheader"]Title here

[attr="class","PorcelainWith"]With Zytl



[attr="class","Uncompleted"]
[attr="class","UncompletedIcon"][attr="class","th-newspaper-o"]
[attr="class","UncompletedInfo"]
[attr="class","PorcelainSubheader"]Title here

[attr="class","PorcelainWith"]With Zytl




[attr="class","PorcelainHeader"]PAUSED

[attr="class","UncompletedScroll"]
[attr="class","Uncompleted"]
[attr="class","UncompletedIcon"][attr="class","th-newspaper-o"]
[attr="class","UncompletedInfo"]
[attr="class","PorcelainSubheader"]Title here

[attr="class","PorcelainWith"]With Zytl



[attr="class","Uncompleted"]
[attr="class","UncompletedIcon"][attr="class","th-smartphone-o"]
[attr="class","UncompletedInfo"]
[attr="class","PorcelainSubheader"]Title here

[attr="class","PorcelainWith"]With Zytl





[attr="class","PorcelainCompletedContain"]
[attr="class","PorcelainProfile"]
[attr="class","PorcelainProfileImg"]


[attr="class","PorcelainCompleted"]
[attr="class","PorcelainHeader"]Complete

[attr="class","CompletedInfo"]
[attr="class","PorcelainSubheader"]Title here

[attr="class","PorcelainWith"]With Zytl


[attr="class","CompletedInfo"]
[attr="class","PorcelainSubheader"]Wow it's not scroll

[attr="class","PorcelainWith"]With Zytl


[attr="class","CompletedInfo"]
[attr="class","PorcelainSubheader"]Get naenae'd

[attr="class","PorcelainWith"]With Zytl


[attr="class","CompletedInfo"]
[attr="class","PorcelainSubheader"]Because it's

[attr="class","PorcelainWith"]With Zytl


[attr="class","CompletedInfo"]
[attr="class","PorcelainSubheader"]Actually scroll

[attr="class","PorcelainWith"]With Zytl







[newclass=".Porcelain"]--black1: #4B4B54; --black2: #333441; --black3: #1D1E30; --white: #FFFFFF; --blue1: #F3F4FA; --blue2: #CFD9FF; --blue3: #7887C2; --gradient: linear-gradient(90deg, rgba(152,158,182,1) 9%, rgba(243,244,250,1) 18%, rgba(190,202,249,1) 28%, rgba(165,175,217,1) 33%, rgba(207,217,255,1) 50%, rgba(144,159,214,1) 59%, rgba(200,219,251,1) 88%, rgba(163,183,255,1) 90%, rgba(120,135,194,1) 100%);;[/newclass]
[newclass=".Porcelain"]margin: 20px auto; width: 500px; background-color: #F3F4FA; padding: 30px; display: flex; flex-direction: row; flex-wrap: wrap; overflow: hidden; align-items: center;[/newclass]
[newclass=".PorcelainFlowers"]z-index: 1; width: 350px; height: 390px; opacity: 0.6; filter: grayscale(40%);[/newclass]
[newclass=".PorcelainBanner"]z-index: 2; width: 350px; padding: 30px 100px 30px 40px; background-color: #4B4B54; margin-left: -30px; margin-bottom: 20px; -webkit-clip-path: polygon(0 0, 100% 0%, 90% 50%, 100% 100%, 0% 100%); border: 1px solid var(--black2);[/newclass]
[newclass=".PorcelainHeader"]font-family: 'Inria Serif'; font-style: normal; font-weight: 600; text-transform: uppercase; word-spacing: 5px; background-image: var(--gradient); -webkit-background-clip: text; background-size: 200%; animation: PorcelainShine 12s infinite alternate;[/newclass]
[newclass=".PorcelainHeader::after"]content: ""; margin: 5px 0px 5px 0px; width:100%; height:1px; display:block; background: var(--black2);[/newclass]
[newclass=".PorcelainSubheader"]padding-right: 5px; margin-top: 10px; font-family: 'Inria Sans'; font-weight: 400; font-size: 13px; color: var(--white); text-shadow: 2px 2px 4px rgba(14, 22, 53, 0.7); text-transform: uppercase;[/newclass]
[newclass=".PorcelainWith"]font-family: 'Inria Sans'; color: var(--white); font-size: 9px; text-transform: uppercase;[/newclass]
[newclass=".PorcelainWith a"]text-decoration: none; color: var(--blue3); font-style: italic; text-shadow: 2px 2px 4px rgba(14, 22, 53, 0.7);[/newclass]
[newclass=".PorcelainWith::before"]content:"I"; font-size: 12px; margin-right: 5px; display:inline-block; color: var(--black3);[/newclass]
[newclass=".PorcelainUncompletedContain"]z-index: 2; width: 270px; background-color: #4B4B54; padding: 20px; display: flex; flex-direction: column; align-items: center;[/newclass]
[newclass=".Uncompleted"]margin-top: 5px; width: 230px; height: 50px; display: flex; margin-bottom: 10px;[/newclass]
[newclass=".UncompletedScroll"]width: 232px; max-height: 170px; overflow-y: scroll;[/newclass]
[newclass=".UncompletedInfo"]width: 190px; height: 50px; background-color: var(--black2); border: 1px solid var(--black3); padding: 0px 10px 0px 20px;[/newclass]
[newclass=".UncompletedIcon"]padding: 5px; width: 40px; height: 42px; background-color: var(--black3); display: flex; justify-content: center; align-items: center;[/newclass]
[newclass=".PorcelainCompletedContain"]z-index:2; width: 135px; margin-left: 30px;[/newclass]
[newclass=".PorcelainProfileImg"]width: 135px; height: 135px; border: 1px solid var(--black2); background-size: cover; background-image: url("https://i.pinimg.com/564x/e1/cb/e3/e1cbe3872cf11e27c712e75fe91d1447.jpg"); filter: grayscale(50%); transition: 0.5s;[/newclass]
[newclass=".Porcelain:hover .PorcelainProfileImg"]filter:grayscale(0%);[/newclass]
[newclass=".PorcelainProfile"]width: 150px; height: 150px; border: 1px solid var(--black2); background: var(--black1); display: flex; justify-content: center; align-items: center;[/newclass]
[newclass=".PorcelainCompleted"]margin-top : 20px; width: 150px; background: #333441; border: 1px #1D1E30 solid; display: flex; flex-direction: column; align-items: center; padding: 0px 0px 10px 0px; max-height: 300px; overflow-y: scroll;[/newclass]
[newclass="::-webkit-scrollbar"]width: 2px;[/newclass]
[newclass="::-webkit-scrollbar-thumb"]background: var(--black3);[/newclass]
[newclass=".CompletedInfo"]width: 80px; background-color: var(--black1); border: 1px solid var(--black3); padding: 0px 10px 10px 20px; margin-bottom: 10px;[/newclass]
[newclass=".th-smartphone-o"]font-size: 24px; color: var(--blue2);[/newclass]
[newclass=".th-newspaper-o"]font-size: 24px; color: var(--blue2);[/newclass]
[newclass="nullelem"]} @keyframes PorcelainShine { 0%{background-position: left;} 100%{background-position: right;} [/newclass]
last edit on May 14, 2022 17:52:56 GMT by zytl
options
quote
They Look Better In Codepen written Mar 19, 2022 0:17:13 GMT
pronounsShe/Her
75written posts
zytlearned bits
offlinecurrently
zytl
Junior Member
zytl Avatar
If you're waiting until you feel talented enough to make it, you'll never make it.
[nospaces][googlefont=Voces&display=swap]



[attr="class","ZY"]

[attr="class","ZYBackground"]

[attr="class","ZYContain1"]

[attr="class","ZYBox1"]

[attr="class","ZYTitle"]
[attr="class","ZYTitleBox"]Lonesome Lover


[attr="class","ZYTagBox"]

[attr="class","ZYTag"] [HASH]Tracker [attr="class","ZYTag"] [HASH]Tabs[attr="class","ZYTag"] [HASH]Hover[attr="class","ZYTag"] [HASH]Jcink





[attr="class","ZYBox2"]

[attr="class","ZYColor"]#548BAA


[attr="class","ZYColor"]#2D3B69


[attr="class","ZYColor"]#303B41


[attr="class","ZYColor"]#7C9CAE








[attr="class","ZYTextBackground"]

[attr="class","ZYTextBox"]

[attr="class","ZYTextBoxList"]- Here are some stuff you should know:




[attr="class","ZYTextBoxList"]- This template auto-formats its images. I used grid but didn't bother to keep track of the number of rows this time oisdgufdkg- ANYWAYS you shouldn't need to change them anyways? Hopefully? lmao If you'd like to resize your image tho, dimensions are 250px by 250px  




[attr="class","ZYTextBoxList"]- I gave up trying to make PB version of this bc too lazy to learn BBCode input radio wheeeee




[attr="class","ZYTextBoxList"]- Please don't delete or edit the credits. Feel free to use this code as reference for learning (but WHY WOULD YOU-) or a base..etc.








[attr="class","ZYBackground2"]










[newclass=".ZY"]display:flex; justify-content:center;[/newclass]

[newclass=".ZYBackground"]width:380px; height:380px; padding: 20px; background-image: url("https://i.pinimg.com/564x/f0/f7/2d/f0f72dc8d12ad65e3a16e8443e1ee2e8.jpg"); display:flex; flex-direction:column; background-size: cover; background-position: center;[/newclass]

[newclass=".ZYContain1"]z-index:2; width: 380px; height:194px; display:flex; flex-direction: row;[/newclass]

[newclass=".ZYBox1"]width:160px; height:140px; background-color: #FFFFFF; border: solid 1px #ADB5C1; padding:25px;[/newclass]

[newclass=".ZYBox2"]z-index: 2; width: 150px; height: 100px; margin-left:20px; align-self:end; overflow:auto;[/newclass]

[newclass=".ZYTitle"]margin-top:0px; width:166px; height:75px; font-size: 30px; padding-bottom:20px; padding-right:20px; border-bottom: 2px solid #ADB5C1;[/newclass]

[newclass=".ZYTitleBox"]text-transform: uppercase; color: #686C73; font-family:voces; font-size:30px; width:166px; height:75px; overflow:auto;[/newclass]

[newclass=".ZYTagBox"]margin-top: 10px; padding-right: 10px; width:156px; height: 35px; overflow: auto; line-height: 2;[/newclass]

[newclass=".ZYTag a.hashtag"]border: 1px solid #ADB5C1; border-radius: 5px; padding:3px; margin-right: 10px; background-color:#EBEEEF; text-transform: uppercase; color: #ADB5C1; font-family:voces; font-size:10px;[/newclass]

[newclass=".ZYTagBox::-webkit-scrollbar"]width: 3px;[/newclass]

[newclass=".ZYTagBox::-webkit-scrollbar-thumb"]background-color: #686C73;[/newclass]

[newclass=".ZYTitleBox::-webkit-scrollbar"]width: 0px;[/newclass]
[newclass=".ZYBox2::-webkit-scrollbar"]width: 0px;[/newclass]
[newclass=".ZYTextBox::-webkit-scrollbar"]width: 0px;[/newclass]

[newclass=".ZYColor"]width: 40px; border: 2px solid; font-size:9px; font-family:voces; color: #686C73; padding-top:2px; padding-bottom:2px; padding-left:10px; padding-right:10px; border-left: 50px solid; transition: 0.6s ease; margin-bottom:10px;[/newclass]

[newclass=".ZYColor:nth-of-type(1):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYColor:nth-of-type(2):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYColor:nth-of-type(3):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYColor:nth-of-type(4):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYTextBackground"]margin-top:20px; z-index:2; width: 315px; height:119px; background-color: #ADB5C1; padding-top:25px; padding-bottom:25px; padding-left:35px; padding-right:30px;[/newclass]

[newclass=".ZYTextBox"]border-left: 7px solid #FFFFFF; width: 280px; height:114px; padding-top:5px; padding-left: 25px; color:white; overflow: auto; text-align:justify; font-family:voces; font-size:9px;[/newclass]

[newclass=".ZYTextBoxList"]list-style-type: '- '; margin-bottom:6px;[/newclass]

[newclass=".ZYBackground2"]margin-top:100px; position:absolute; z-index:1; width: 420px; height:250px; background-color: #EBEEEF;[/newclass]
last edit on Jun 25, 2022 13:38:01 GMT by zytl
options
quote
They Look Better In Codepen written Mar 27, 2022 17:57:21 GMT
pronounsShe/Her
75written posts
zytlearned bits
offlinecurrently
zytl
Junior Member
zytl Avatar
If you're waiting until you feel talented enough to make it, you'll never make it.
[nospaces][googlefont=Voces&display=swap]



[attr="class","ZY"]

[attr="class","ZYBackground"]

[attr="class","ZYContain1"]

[attr="class","ZYBox1"]

[attr="class","ZYTitle"]
[attr="class","ZYTitleBox"]Lonesome Lover


[attr="class","ZYTagBox"]

[attr="class","ZYTag"] [HASH]Tracker [attr="class","ZYTag"] [HASH]Tabs[attr="class","ZYTag"] [HASH]Hover[attr="class","ZYTag"] [HASH]Jcink





[attr="class","ZYBox2"]

[attr="class","ZYColor"]#946D6D


[attr="class","ZYColor"]#FFBEBE


[attr="class","ZYColor"]#1D1D1D








[attr="class","ZYTextBackground"]

[attr="class","ZYTextBox"]

[attr="class","ZYTextBoxList"]- Here are some stuff you should know:



[attr="class","ZYTextBoxList"]- Thank you so much Leap for reccomending me this Coding Camp challenge, & Selkie for the beautiful flower gfx <3 <3 <3



[attr="class","ZYTextBoxList"]- This template auto-formats its images. Image size is 350px width by 250px height. There's also a filter over the image, so go to the .loverImg newclass to change it :)   



[attr="class","ZYTextBoxList"]- Back to BBCode Converter my bestiee









[attr="class","ZYBackground2"]










[newclass=".ZY"]display:flex; justify-content:center;[/newclass]

[newclass=".ZYBackground"]width:380px; height:380px; padding: 20px; background-image: url("https://i.pinimg.com/564x/f0/f7/2d/f0f72dc8d12ad65e3a16e8443e1ee2e8.jpg"); display:flex; flex-direction:column; background-size: cover; background-position: center;[/newclass]

[newclass=".ZYContain1"]z-index:2; width: 380px; height:194px; display:flex; flex-direction: row;[/newclass]

[newclass=".ZYBox1"]width:160px; height:140px; background-color: #FFFFFF; border: solid 1px #ADB5C1; padding:25px;[/newclass]

[newclass=".ZYBox2"]z-index: 2; width: 150px; height: 100px; margin-left:20px; align-self:end; overflow:auto;[/newclass]

[newclass=".ZYTitle"]margin-top:0px; width:166px; height:75px; font-size: 30px; padding-bottom:20px; padding-right:20px; border-bottom: 2px solid #ADB5C1;[/newclass]

[newclass=".ZYTitleBox"]text-transform: uppercase; color: #686C73; font-family:voces; font-size:30px; width:166px; height:75px; overflow:auto;[/newclass]

[newclass=".ZYTagBox"]margin-top: 10px; padding-right: 10px; width:156px; height: 35px; overflow: auto; line-height: 2;[/newclass]

[newclass=".ZYTag a.hashtag"]border: 1px solid #ADB5C1; border-radius: 5px; padding:3px; margin-right: 10px; background-color:#EBEEEF; text-transform: uppercase; color: #ADB5C1; font-family:voces; font-size:10px;[/newclass]

[newclass=".ZYTagBox::-webkit-scrollbar"]width: 3px;[/newclass]

[newclass=".ZYTagBox::-webkit-scrollbar-thumb"]background-color: #686C73;[/newclass]

[newclass=".ZYTitleBox::-webkit-scrollbar"]width: 0px;[/newclass]
[newclass=".ZYBox2::-webkit-scrollbar"]width: 0px;[/newclass]
[newclass=".ZYTextBox::-webkit-scrollbar"]width: 0px;[/newclass]

[newclass=".ZYColor"]width: max-content; border: 2px solid; font-size:6px; font-family:voces; color: #686C73; padding-top:2px; padding-bottom:2px; padding-left:10px; padding-right:10px; border-left: 50px solid; transition: 0.6s ease; margin-bottom:10px;[/newclass]

[newclass=".ZYColor:nth-of-type(1):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYColor:nth-of-type(2):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYColor:nth-of-type(3):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYColor:nth-of-type(4):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYTextBackground"]margin-top:20px; z-index:2; width: 315px; height:119px; background-color: #ADB5C1; padding-top:25px; padding-bottom:25px; padding-left:35px; padding-right:30px;[/newclass]

[newclass=".ZYTextBox"]border-left: 7px solid #FFFFFF; width: 280px; height:114px; padding-top:5px; padding-left: 25px; color:white; overflow: auto; text-align:justify; font-family:voces; font-size:9px;[/newclass]

[newclass=".ZYTextBoxList"]list-style-type: '- '; margin-bottom:6px;[/newclass]

[newclass=".ZYBackground2"]margin-top:100px; position:absolute; z-index:1; width: 420px; height:250px; background-color: #EBEEEF;[/newclass]

[googlefont=Fira+Sans:100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic]

[attr="class","lover"]
[attr="class","loverFlowers"]



I won't give up 'cause there will be a day...


We'll meet again



[attr="class","loverTag"]Dear Lady Love

[attr="class","loverImg"]

[attr="class","loverText"]
❛❛


You are a captive audience while sitting on the
toilet, pet me catasstrophe or you are a captive
audience while sitting on the toilet, pet me put toy mouse in food bowl run out of litter box at full speed it's 3am, time to create some chaos , munch, munch, chomp, chomp so snob you for another person.
[break][break]
Kitten is playing with dead mouse lick yarn hanging out of own butt lick left leg for ninety minutes, still dirty pelt around the house and up and down stairs chasing phantoms ignore the squirrels, you'll never catch them anyway.
[break][break]
Grass smells good.
[break][break]
Lay on arms while you're using the keyboard i heard this rumor where the humans are our owners, pfft, what do they know?!. Somehow manage to catch a bird but have no idea what to do next, so play with it until it dies of shock eat an easter feather as if it were a bird then burp victoriously, but tender.








[newclass=".lover"]--black1: #2A2A2A; --black2: #1D1D1D; --pink2: #FFBEBE; --pink3: #946D6D;[/newclass]
[newclass=".lover"]width: 500px; box-sizing: border-box; padding: 30px; margin: 25px auto; background-color: var(--black1); border-radius: 10px; display: flex; flex-wrap: wrap; position: relative; min-height: 200px;[/newclass]
[newclass=".loverTag"]border: 1px solid var(--black1); max-width: calc(100% - 60px); word-wrap: break-word; background: radial-gradient(50% 50% at 50% 50%, #1D1D1D 0%, rgba(29, 29, 29, 0.87) 58.67%, rgba(29, 29, 29, 0) 100%);; padding: 20px 50px 20px 50px; height: max-content; margin-top: 165px; margin-bottom: 6px; z-index:3; font-family: 'Fira Sans'; font-style: normal; font-weight: 300; font-size: 11px; line-height: 7px; text-align: center; letter-spacing: 0.2em; color: var(--pink3); text-transform: uppercase;[/newclass]
[newclass=".loverTag > a"]font-style: italic; text-decoration: none; color: var(--pink2); text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.5); z-index:3;[/newclass]
[newclass=".loverImg"]width: 70%; height: 250px; border-radius: 0px 10px 0px 0px; background: url("https://media.discordapp.net/attachments/801893735436779567/990055072681574440/unknown.png"); background-size: cover; filter: saturate(50%) brightness(50%); margin: -30px 0px 0px 120px; position: absolute; box-shadow: inset 110px -80px 70px rgba(81, 81, 81, 1); z-index:0;[/newclass]
[newclass=".loverText"]align-self: end; background-color: var(--black2); border-radius: 15px; box-sizing: border-box; padding: 25px 50px 25px 45px; text-align: justify;[/newclass]
[newclass=".loverText > p"]font-family: 'Fira Sans'; font-style: normal; font-weight: 300; font-size: 11px; line-height: 16px; letter-spacing: 0.125em; color: white;[/newclass]
[newclass=".loverText > div"]font-size: 48px; letter-spacing: 0.01em; color: var(--pink3); float:left; margin: 10px 10px -20px 0px;[/newclass]
[newclass=".loverFlowers"]position: absolute; width: 500px; margin: -30px 0px 0px -30px; z-index:3; border-radius: 10px; height: 300px; overflow: hidden;[/newclass]
[newclass=".loverFlowers > img"]filter: saturate(8) contrast(1) brightness(0.2);[/newclass]
[newclass=".loverFlowers > h2"]position: absolute; top: 120px; left: 70px; font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-size: 9px; line-height: 6px; letter-spacing: 0.25em; color: #FFFFFF; text-shadow: 0px 1px 2px #000000; text-transform: uppercase;[/newclass]
[newclass=".loverFlowers > h1"]top: 140px; left: 170px; position: absolute; font-family: 'Fira Sans'; font-style: italic; font-weight: 100; font-size: 24px; line-height: 12px; letter-spacing: 0.2em; color: #FFFFFF; text-shadow: 0px 0px 4px var(--pink2); text-transform: uppercase;[/newclass]
last edit on Jun 25, 2022 13:49:56 GMT by zytl
options
quote
They Look Better In Codepen written Mar 27, 2022 18:37:34 GMT
pronounsShe/Her
75written posts
zytlearned bits
offlinecurrently
zytl
Junior Member
zytl Avatar
If you're waiting until you feel talented enough to make it, you'll never make it.
[nospaces][googlefont=Voces&display=swap]



[attr="class","ZY"]

[attr="class","ZYBackground"]

[attr="class","ZYContain1"]

[attr="class","ZYBox1"]

[attr="class","ZYTitle"]
[attr="class","ZYTitleBox"]Polygoing


[attr="class","ZYTagBox"]

[attr="class","ZYTag"] [HASH]Tracker [attr="class","ZYTag"] [HASH]Tabs[attr="class","ZYTag"] [HASH]Hover[attr="class","ZYTag"] [HASH]Jcink





[attr="class","ZYBox2"]

[attr="class","ZYColor"]#548BAA


[attr="class","ZYColor"]#2D3B69


[attr="class","ZYColor"]#303B41


[attr="class","ZYColor"]#7C9CAE








[attr="class","ZYTextBackground"]

[attr="class","ZYTextBox"]

[attr="class","ZYTextBoxList"]- Here are some stuff you should know:




[attr="class","ZYTextBoxList"]- This template auto-formats its images. I used grid but didn't bother to keep track of the number of rows this time oisdgufdkg- ANYWAYS you shouldn't need to change them anyways? Hopefully? lmao If you'd like to resize your image tho, dimensions are 250px by 250px  




[attr="class","ZYTextBoxList"]- I gave up trying to make PB version of this bc too lazy to learn BBCode input radio wheeeee




[attr="class","ZYTextBoxList"]- Please don't delete or edit the credits. Feel free to use this code as reference for learning (but WHY WOULD YOU-) or a base..etc.








[attr="class","ZYBackground2"]










[newclass=".ZY"]display:flex; justify-content:center;[/newclass]

[newclass=".ZYBackground"]width:380px; height:380px; padding: 20px; background-image: url("https://i.pinimg.com/564x/61/68/60/6168604a43a2efc5c20b06e5340cbdac.jpg"); display:flex; flex-direction:column; background-size: cover; background-position: center;[/newclass]

[newclass=".ZYContain1"]z-index:2; width: 380px; height:194px; display:flex; flex-direction: row;[/newclass]

[newclass=".ZYBox1"]width:160px; height:140px; background-color: #FFFFFF; border: solid 1px #ADB5C1; padding:25px;[/newclass]

[newclass=".ZYBox2"]z-index: 2; width: 150px; height: 100px; margin-left:20px; align-self:end; overflow:auto;[/newclass]

[newclass=".ZYTitle"]margin-top:0px; width:166px; height:75px; font-size: 30px; padding-bottom:20px; padding-right:20px; border-bottom: 2px solid #ADB5C1;[/newclass]

[newclass=".ZYTitleBox"]text-transform: uppercase; color: #686C73; font-family:voces; font-size:30px; width:166px; height:75px; overflow:auto;[/newclass]

[newclass=".ZYTagBox"]margin-top: 10px; padding-right: 10px; width:156px; height: 35px; overflow: auto; line-height: 2;[/newclass]

[newclass=".ZYTag a.hashtag"]border: 1px solid #ADB5C1; border-radius: 5px; padding:3px; margin-right: 10px; background-color:#EBEEEF; text-transform: uppercase; color: #ADB5C1; font-family:voces; font-size:10px;[/newclass]

[newclass=".ZYTagBox::-webkit-scrollbar"]width: 3px;[/newclass]

[newclass=".ZYTagBox::-webkit-scrollbar-thumb"]background-color: #686C73;[/newclass]

[newclass=".ZYTitleBox::-webkit-scrollbar"]width: 0px;[/newclass]
[newclass=".ZYBox2::-webkit-scrollbar"]width: 0px;[/newclass]
[newclass=".ZYTextBox::-webkit-scrollbar"]width: 0px;[/newclass]

[newclass=".ZYColor"]width: 40px; border: 2px solid; font-size:9px; font-family:voces; color: #686C73; padding-top:2px; padding-bottom:2px; padding-left:10px; padding-right:10px; border-left: 50px solid; transition: 0.6s ease; margin-bottom:10px;[/newclass]

[newclass=".ZYColor:nth-of-type(1):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYColor:nth-of-type(2):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYColor:nth-of-type(3):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYColor:nth-of-type(4):hover"]border-left:84px solid;[/newclass]

[newclass=".ZYTextBackground"]margin-top:20px; z-index:2; width: 315px; height:119px; background-color: #ADB5C1; padding-top:25px; padding-bottom:25px; padding-left:35px; padding-right:30px;[/newclass]

[newclass=".ZYTextBox"]border-left: 7px solid #FFFFFF; width: 280px; height:114px; padding-top:5px; padding-left: 25px; color:white; overflow: auto; text-align:justify; font-family:voces; font-size:9px;[/newclass]

[newclass=".ZYTextBoxList"]list-style-type: '- '; margin-bottom:6px;[/newclass]

[newclass=".ZYBackground2"]margin-top:100px; position:absolute; z-index:1; width: 420px; height:250px; background-color: #EBEEEF;[/newclass]




[attr="class","BUTTon"]GET CODE

[newclass=.BUTTon]padding:15px;background:linear-gradient(45deg, #548BAA, #2D3B69);margin:0px auto;color:#FFFFFF;text-align:center;width:100px;border-radius:15px;[/newclass]
last edit on Jun 24, 2022 20:38:23 GMT by zytl
Reply