[div=width: 900px;margin: auto;text-align: center; font-family: fantasy;font-size: 8px;letter-spacing: 3px;word-spacing: -0.2px;color: #ffffff;] code by Cinderhella[/div]
[div=max-height: 700px; display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;][div= width: 275px;
justify-content: center;][div=
height: 60%;
width: 90%;
border-radius:120px;
box-shadow: 0px 3px 9px 1px rgba(0, 10, 20, 0.2);][div= align-self: center; overflow: hidden;background: white; height: 600px;
width: auto; border-radius:120px;
padding-bottom: 13px*1.6;][div=height: 300px; overflow: hidden;][img]https://www.rpnation.com/proxy.php?image=https%3A%2F%2Fi.pinimg.com%2F736x%2F37%2Fd3%2Fe6%2F37d3e6ab96ed0c8fa192779eaceda072.jpg&hash=bb5355c55a6a41cf3f23de853d473d9a[/img][/div][div=box-sizing: border-box;
margin: 13px;
text-align: justify;
font-size: 10pt;
font-family: times new roman;
letter-spacing: 0px;
line-height: 90%;
color: black;][div=
color: black;
font-family: trattatello;
font-size: 26px;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0.85;
padding: 10px;
margin-top: 15px;
margin-bottom: 15px;] lorem ipsum[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor vitae purus faucibus ornare suspendisse sed nisi. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu.[/div][/div][/div][/div][div= width: 275px;
justify-content: center;][div=
height: 60%;
width: 90%;
border-radius:120px;
box-shadow: 0px 3px 9px 1px rgba(0, 10, 20, 0.2);][div= align-self: center; overflow: hidden;background: white; height: 600px;
width: auto; border-radius:120px;
padding-bottom: 13px*1.6;][div=height: 300px; overflow: hidden;][img]https://i.pinimg.com/736x/86/f5/64/86f564486688a9abc3117d4ae17a5c95.jpg[/img][/div][div=box-sizing: border-box;
margin: 13px;
text-align: justify;
font-size: 10pt;
font-family: times new roman;
letter-spacing: 0px;
line-height: 90%;
color: black;][div=
color: black;
font-family: trattatello;
font-size: 26px;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0.85;
padding: 10px;
margin-top: 15px;
margin-bottom: 15px;] lorem ipsum[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor vitae purus faucibus ornare suspendisse sed nisi. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu. .[/div][/div][/div][/div][div= width: 275px;
justify-content: center;][div=
height: 60%;
width: 90%;
border-radius:120px;
box-shadow: 0px 3px 9px 1px rgba(0, 10, 20, 0.2);][div= align-self: center; overflow: hidden;background: white; height: 600px;
width: auto; border-radius:120px;
padding-bottom: 13px*1.6;][img]https://i.pinimg.com/736x/58/7c/0d/587c0de87e44468b9e30245ba22bd316.jpg[/img][div=box-sizing: border-box;
margin: 13px;
text-align: justify;
font-size: 10pt;
font-family: times new roman;
letter-spacing: 0px;
line-height: 90%;
color: black;][div=
color: black;
font-family: trattatello;
font-size: 26px;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0.85;
padding: 10px;
margin-top: 15px;
margin-bottom: 15px;] lorem ipsum[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor vitae purus faucibus ornare suspendisse sed nisi. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu. .[/div][/div][/div][/div][div= width: 275px;
justify-content: center;][div=
height: 60%;
width: 90%;
border-radius:120px;
box-shadow: 0px 3px 9px 1px rgba(0, 10, 20, 0.2);][div= align-self: center; overflow: hidden;background: white; height: 600px;
width: auto; border-radius:120px;][div=height: 315px; overflow: hidden;][img width="350px"]https://i.pinimg.com/736x/1f/32/b8/1f32b86a36f493072f3ba9df9e742dce.jpg[/img][/div][div=box-sizing: border-box;
margin: 13px;
text-align: justify;
font-size: 10pt;
font-family: times new roman;
letter-spacing: 0px;
line-height: 90%;
color: black;][div=
color: black;
font-family: trattatello;
font-size: 26px;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0.85;
padding: 10px;
margin-top: 15px;
margin-bottom: 15px;] lorem ipsum[/div]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tortor vitae purus faucibus ornare suspendisse sed nisi. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget arcu. .[/div][/div][/div][/div][/div][div=max-width: 1000px;margin: auto;][div=box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px 0px, rgba(0, 0, 0, 0.09) 0px 4px 2px 0px, rgba(0, 0, 0, 0.09) 0px 8px 4px 0px, rgba(0, 0, 0, 0.09) 0px 16px 8px 0px, rgba(0, 0, 0, 0.09) 0px 32px 16px 0px;
background-repeat: no-repeat;
background-attachment: fixed;
background: url(https://i.pinimg.com/736x/d4/f3/ab/d4f3ab232f51cfd6bc8fc09a63015517.jpg) center/cover;
display: flex;
width: 100%;height: 380px;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 10pt;
color: #fff;] [div=height: 30px;][div=
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
font-family: anton; font-size: 80px; letter-spacing: 1px; line-height: 60%; margin: auto;height: 30px;]cinderhella[/div][/div]
[div=
font-style: normal;
padding: 0.2em 0.3em;
border-radius: 0.2em;
position: relative;
background: white;
font-family: times new roman;
letter-spacing: 0px; width: 400px;
transform: skewX(-10deg);
display: inline-block;
text-align: center;
color: #000;] 21plus - 300 to 500 words - GMT 7 - I play females x any [/div][/div][/div]
[div=max-width: 1000px;margin: auto;][div=box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px 0px, rgba(0, 0, 0, 0.09) 0px 4px 2px 0px, rgba(0, 0, 0, 0.09) 0px 8px 4px 0px, rgba(0, 0, 0, 0.09) 0px 16px 8px 0px, rgba(0, 0, 0, 0.09) 0px 32px 16px 0px;
background-repeat: no-repeat;
background-attachment: fixed;
background: url(https://i.ibb.co/wZcVYgRX/9944fe69c9ae0d48f50509f4cac36619.jpg);
filter: saturation(0);
background-size: center;
background-position: 0px -270px;
display: flex;
height: 350px;
opacity: 80%;
flex-direction: column;
font-family: "TSTAR Mono Round W00 Regular", sans-serif;
font-size: 10pt;
color: #fff;][div=height: 350px;][div=width:970px;margin:auto;margin-top: 0px;][div=
padding: 20px 20px 20px 20px;
display: flex;
align-items: center;margin:Auto;][div=position: relative;
max-width: 270px;
height: 150px;
text-align: justify; text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);][div=padding: 10px;
font-family=anton; font-size: 80px;line-height:50%;] ground control [/div]
[div=font-family: times new roman; font-size:11pt; letter-spacing: 4px; width: 200px; margin: auto;line-height: 40%;]writing sample[/div][/div][div=width: auto;][div=
width: 650px;
height: 280px;
border: 15px solid black;][div=overflow-y: scroll; overflow-x: hidden;
font-size: 13px;
letter-spacing: 0px;
word-spacing: 2px;
color: white;
height: 240px;
padding: 15px;
text-align: justify;]Watching Proteus both through the goggles, and alongside the screen they shared, Josie learned that the bullet was the most significant item in the box. Curious and curiouser did the mystery become as she watched him scan through the relics.
The wallet, once an old world necessity for identification and financial power, no longer had a purpose in the new world. No one collected cards anymore. No one cared who you were. Money, credit, memberships, were all systems of the past. His past, but nonetheless, passed. Josephine had tried to figure out what some of the cards were for, but came up empty handed. Most of them appeared to be for someone else, or even more confusing - erased - as if their self-destruction was inevitable. Protocol, even. Josephine concluded that he, or someone, did not want the information to be known. What was he hiding? Or who?
“I was hoping you carried one of those cards that says who you are and where you’re from, but you only had these ID’s of people who …. Didn’t look like you. Err, the you before before I had to, you know.”
The ring, branded with it’s unfamiliar crest, suggested loyalty or allegiance to a group Josephine could not place in her research. Not military. Not government. Not any old world agency, system or otherwise that she could find. She was hoping his memory would flicker across the screen, but nothing sparked aside from the one hand she couldn’t get right. His left, as it were. That was also the hand she found the ring on.
“I’m going to fix your hand as soon as I can. I promise.”
The money, as recognizable as it was, raised more questions than answers. Even Josie knew a buck twenty-five wasn’t buying you shit in the old world. Certainly not enough to put gas in the car he drove. A Volkswagen, according to his identification on her screen. Hmm. Josie’s memory this time flickered.
There was one in the scrapyard not far from where she found his body.
“I was hoping you weren’t going to ask me that…” the green haired woman shifted somewhat uncomfortably on the floor, legs to chest and resting her chin upon her knees. She watched him watching her through the screen, and was comforted by the fact that UNKNOWN LIFE FORM was now replaced by ‘Josie’.
“I… I don’t know who you are.” She answered honestly, brow furrowing with her own disappointment. Maybe even a bit of defeat, too. Josie hated not knowing things. She wished she could tell him everything he wanted to know. Old world or new world. Him or her. The only answer she had for now was who he was to her. “So I called you Proteus, because...”
The screen they shared pulled up a page about a Greek God known for his ability to change shape.
“I wish I could tell you more about yourself, but I only know how to build robots and find things. I want to help you, and I think I can. There is a Volkswagen in the scrapyard that might have been yours. Do you want to see if we can find it? Maybe the fob still works.”[/div][/div][/div][/div][/div][/div][/div][/div]
this is an amazing code! If these are usuable by the public, did you put credit within the code [other than the title looking part] using your user/name, or do you prefer not to?
Thank you! You don't need to credit but If you would like to, you can add:
[div=margin: auto;width: 200px;][div=text-align: justify; font-family: fantasy;font-size: 7px;letter-spacing: 3px;word-spacing: -0.2px;color: #ffffff;] code by Cinderhella[/div][/div][div=
width:480px;
height: 600px;
background-color:#121212;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
background: url(https://i.pinimg.com/736x/34/b7/65/34b765ad79ad6bb13acd31c80146e8da.jpg) center/cover, url(https://i.gifer.com/GuDr.gif) no-repeat center; display: block; transform; z-index: 1;
background-blend-mode: exclusion; /*change the background layer filter */
filter: contrast(100%) brightness(70%);
padding:10px;][div="margin-top: 15px;
width:475px;
height: 550px;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
border:3px double #8c4647;
blackground-blend-mode: exclusion; /*change the background layer filter */"][div=
margin-top: 330px;"][div=padding: 30px;
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@900&display=swap");][div=
color: #fff; font-size: 20px;
text-transform: uppercase;
letter-spacing: 0;
scale: 1.6;
inset-block-start: -0.45em;
transform: rotateX(-8deg);
display: block;
content: attr(arial-label);
filter: blur(1px) contrast(3);
text-shadow: 0px 3px 9px #e46e6e, 0px 8px 12px #9e7639;
mix-blend-mode: hard-light;][div=
display: grid;
place-items: center;
background: linear-gradient(
180deg,
rgba(5, 5, 5, 1) 30%,
rgba(41, 14, 14, 1) 70%;
width: 100vw;
height: 100vh;
overflow: hidden;
font-family: "Onest", sans-serif;
display: block;
inset: 0;
width: 100%;
height: 100%;
background: transparent url("https://assets.codepen.io/108082/Noise.png") 0 0;
background-size: 320px 320px;] TITLE HERE [/div] [/div][div=margin-left: -10px;
margin-top: 0px; padding: 5px;
height: 130px;
overflow: hidden;][div=
width: 450px;
backdrop-filter: blur(7px);
height: 100%;
margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;][div=width: 400px; font-size:13px;
color:#fff;
line-height:150%;
font-family: calibri;text-wrap: pretty;
text-align:justify;padding: 10px;]Donec efficitur finibus facilisis. Morbi in tempus enim. Pellentesque sit amet enim bibendum nulla porta tincidunt. Donec tincidunt at orci porttitor feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fermentum orci ac lorem faucibus placerat. Aliquam hendrerit facilisis sagittis. Nam elementum faucibus neque, eu porta turpis posuere quis. Proin in elit ut mi malesuada scelerisque eget ac lectus. Nunc id faucibus neque. Phasellus vitae viverra diam, sit amet porta tellus. Nullam vel sapien eu nisi lacinia aliquet. Morbi consequat cursus suscipit. Sed volutpat odio nec lectus posuere, id pretium sapien cursus.
Proin in elit ut mi malesuada scelerisque eget ac lectus. Nunc id faucibus neque. Phasellus vitae viverra diam, sit amet porta tellus. Nullam vel sapien eu nisi lacinia aliquet. Morbi consequat cursus suscipit. Sed volutpat odio nec lectus posuere, id pretium sapien cursus.[/div][/div][/div][/div][/div][/div][/div][div=
width: 765px;margin: auto;][div=
filter: brightness(80%) contrast(130%);
background: url(https://i.pinimg.com/originals/9a/e1/3e/9ae13e5ddacb054aa2eb3098af53850f.gif) center/cover;
height: 150px;
max-width: 765px;
padding: 20px;]
[/div]
[div=
max-width: 755px;][div=width: 220px;
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-column-gap: 10px;][div=
filter: brightness(90%) contrast(170%) saturation(180%);][div=
width: 185px;
height: 185px;
background: url(https://i.pinimg.com/736x/d6/06/1b/d6061b44c0f91fc1691ad40cc8efed66.jpg); /* Change profile image */
background-size: cover;box-shadow: 5.0px 9.9px 9.9px hsl(0deg 0% 0% / 0.35);]
[/div]
[div=
width: 170px;
font-size: 8pt;
color: white;
font-family:optima;
text-align: justify;
text-justify: inter-word;
letter-spacing: 0px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna ante, ultricies imperdiet nulla vitae, tempor ultricies sapien. Maecenas molestie hendrerit nulla ut pellentesque. Suspendisse potenti. Nulla at volutpat libero. Aenean vestibulum sagittis pharetra. [/div][/div][div=
margin-top: -10px;
background: #fff;
width: 569px;
display: grid;
grid:"sidebar body" 1fr / auto 1fr;
gap: 20px;] [div=overflow: hidden;
width:260px;
padding: 15px;][div=
max-width: 765px;
font-size: 8pt;
color: #000;
font-family:optima;
text-align: justify;
text-justify: inter-word;margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
height: 280px;
letter-spacing: 0px;][div=
font-family: futura;
size: 20pt;
letter-spacing: 2px;
border-bottom: 1px solid;
text-align: right;] FANDOM [/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna ante, ultricies imperdiet nulla vitae, tempor ultricies sapien. Maecenas molestie hendrerit nulla ut pellentesque. Suspendisse potenti. Nulla at volutpat libero. Aenean vestibulum sagittis pharetra. Quisque fringilla commodo hendrerit. Donec a mauris lectus. Donec sodales ante eget ornare commodo. Duis dolor leo, feugiat at massa sed, rhoncus vehicula nulla. Vivamus ut risus non turpis tempus blandit in non tellus. Proin vitae ex quam. Maecenas lacus tellus, vulputate non velit et, faucibus auctor diam. Suspendisse sit amet dui et velit egestas tristique. Pellentesque posuere orci in est lacinia lobortis.
[div=
font-family: futura;
size: 20pt;
letter-spacing: 2px;
border-bottom: 1px solid;
text-align: right;] WORD BANK / INSPO [/div]
Duis in luctus ipsum. Fusce malesuada turpis non quam sollicitudin congue. Fusce quis molestie arcu, ac volutpat mauris. Fusce placerat, ipsum vel aliquam ultrices, ante metus blandit dolor, at accumsan mauris est vel nisi. Pellentesque in scelerisque lacus, at placerat neque. Mauris ut tempus dui. Fusce bibendum porttitor diam eu fringilla. Praesent in nibh mi. Etiam semper hendrerit iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas dapibus eu augue eu dictum. Duis sit amet mollis lectus. Curabitur justo dolor, tincidunt et nisl quis, volutpat placerat neque. Morbi pulvinar arcu lectus, eu ultrices libero accumsan nec. Phasellus ullamcorper erat vel commodo rhoncus.[/div][/div][div=
grid-area: sidebar;][div=
width: 250px;
grid-area: 0px;] [div=overflow: hidden;
width:250px;
padding: 15px;][div=
max-width: 765px;
font-size: 8pt;
color: #000;
font-family:optima;
text-align: justify;
text-justify: inter-word;margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
height: 280px;
letter-spacing: 0px;][div=
font-family: futura;
size: 20pt;
letter-spacing: 2px;] ABOUT ME AS A WRITER [/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna ante, ultricies imperdiet nulla vitae, tempor ultricies sapien. Maecenas molestie hendrerit nulla ut pellentesque. Suspendisse potenti. Nulla at volutpat libero. Aenean vestibulum sagittis pharetra. Quisque fringilla commodo hendrerit. Donec a mauris lectus. Donec sodales ante eget ornare commodo. Duis dolor leo, feugiat at massa sed, rhoncus vehicula nulla. Vivamus ut risus non turpis tempus blandit in non tellus. Proin vitae ex quam. Maecenas lacus tellus, vulputate non velit et, faucibus auctor diam. Suspendisse sit amet dui et velit egestas tristique. Pellentesque posuere orci in est lacinia lobortis.
[div=
font-family: futura;
size: 20pt;
letter-spacing: 2px;] WHAT I AM LOOKING FOR [/div]
Duis in luctus ipsum. Fusce malesuada turpis non quam sollicitudin congue. Fusce quis molestie arcu, ac volutpat mauris. Fusce placerat, ipsum vel aliquam ultrices, ante metus blandit dolor, at accumsan mauris est vel nisi. Pellentesque in scelerisque lacus, at placerat neque. Mauris ut tempus dui. Fusce bibendum porttitor diam eu fringilla. Praesent in nibh mi. Etiam semper hendrerit iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas dapibus eu augue eu dictum. Duis sit amet mollis lectus. Curabitur justo dolor, tincidunt et nisl quis, volutpat placerat neque. Morbi pulvinar arcu lectus, eu ultrices libero accumsan nec. Phasellus ullamcorper erat vel commodo rhoncus.[/div] [/div][/div][/div][/div][/div][/div]
[div=
background-image: url(https://i.pinimg.com/originals/a0/07/cb/a007cb58f10c80d6ac1df076c18ef143.gif); /* Change the plot banner gif */
background-repeat:no-repeat;
background-position: right top;
background-size: cover;
width: 96%;
background-attachment: absolute;
padding:15px;][div=
height: 100%;
font-size: 40pt;
position: relative;
display: block;
padding: 15px;letter-spacing: 2px;
text-transform: uppercase;] [accordion=100%]
{slide=Click Here|center}[div=background: #fff;
opacity: 100%;height: 100%;][div=
height: 100%;
padding: 15px;
font-size: 10pt;
color: #000;
text-transform: none;
font-family: calibri;
text-align: justify;
text-justify: inter-word;
letter-spacing: 0px;][div=width: 190px;
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-column-gap: 15px;
font-size: 10pt;
color: #000;
line-height: 99%;
font-family: calibri;
text-align: justify;
text-justify: inter-word;
letter-spacing: 0px;][div=width: 263px;text-align: justify;][div=
font-variant: small-caps;
font-weight: bold;
font-size: 34px;
line-height: 86%;
letter-spacing: -1.4px;
font-family: optima;]PLOT 1[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna ante, ultricies imperdiet nulla vitae, tempor ultricies sapien. Maecenas molestie hendrerit nulla ut pellentesque. Suspendisse potenti. Nulla at volutpat libero. Aenean vestibulum sagittis pharetra.
Quisque fringilla commodo hendrerit. Donec a mauris lectus. Donec sodales ante eget ornare commodo.[/div][div=
mix-blend-mode: multiply;
filter: brightness(90%) contrast(170%) saturation(180%);][div=
width: 185px;
height: 185px;
background: url(https://i.pinimg.com/736x/a4/b0/4c/a4b04caad137217e488002c5a755383f.jpg); /* Change image on left */
background-size: cover;box-shadow: 5.0px 9.9px 9.9px hsl(0deg 0% 0% / 0.35);]
[/div][/div][div=
mix-blend-mode: multiply;
filter: brightness(90%) contrast(170%) saturation(180%);][div=
width: 185px;
height: 185px;
background: url(https://i.pinimg.com/736x/21/79/43/2179435091beb92d1b16bcba39c31154.jpg); /* Change image on right */
background-size: cover;box-shadow: 5.0px 9.9px 9.9px hsl(0deg 0% 0% / 0.35);]
[/div][/div] [/div][/div][/div]{/slide}[/accordion][/div][/div][/div]
Absolutely! My code is a mess so just let me know if you run into any problems or have a question.
[div=
margin-left: 30px;
font-family: futura;
color: #fff;
font-size: 40px;
letter-spacing: 3px;
font-style: oblique;
text-shadow: -4px 3px 0 #d51608, -14px 7px 0 #0a0e27;] TITLE HERE ADJUST LETTERSPACING AS NECESSARY [/div][div=
padding: 15px;
width: 100%;
display: flex;
gap: 8px;][div=width: auto;
background-color: #000;
border-radius: 4px;][div=
width: 200px;
height: 200px;
background: url(https://i.pinimg.com/736x/d5/a5/68/d5a5685a3f1c24b2d9dbc9ff453ba261.jpg) center top;
background-size: contain;
clip-path: inset(10px 10px 10px 10px);
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;]
[/div][/div]
[div=width: auto;
background-color: #000;
border-radius: 4px;][div=
width: 200px;
height: 200px;
background: url(https://i.pinimg.com/736x/28/17/be/2817be860c7543388785e5284fa11290.jpg) center top;
background-size: contain;
clip-path: inset(10px 10px 10px 10px);
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;]
[/div][/div]
[div=flex-grow: 1;margin-left: auto;][div=max-width: 730px;
padding: 10px;][div=
font-family: futura;
color: #fff;
font-size: 28px;
letter-spacing: -1.6px;
font-style: oblique;
border-bottom: 1px solid #fff;]TITLE HEADER[/div]
[div=
color: white;
font-family: optima;
font-size: 10pt;
letter-spacing: -0.5px;
word-spacing: 1.6px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget quam ac ipsum molestie aliquam. Sed blandit leo dui, ac sollicitudin orci molestie nec. Aenean faucibus, eros id vulputate tristique, tortor lectus mattis arcu, a dapibus libero velit vitae nunc. In hac habitasse platea dictumst. Aliquam at ipsum quis erat eleifend convallis. Pellentesque leo eros, sagittis eu dolor sit amet, dignissim posuere orci. Aliquam sit amet congue sapien. Fusce fermentum erat sit amet magna blandit gravida. Nam et ligula tincidunt, adipiscing dolor nec, dignissim metus. Nam lorem massa, tempor nec semper ac, imperdiet sit amet libero. In fermentum arcu non purus cursus, at auctor tortor blandit. Duis vel arcu a massa auctor mattis.[/div][/div][/div][/div][div=
display: flex;
gap: 8px;
flex-direction: row;
height: 220px;align-items: center;][div=width: 200px;
background-color: #000;
border-radius: 4px;][div=
width: 200px;
height: 200px;
background: url(https://i.pinimg.com/736x/21/24/3e/21243eda50d3a7a7279bb4ccba3fc89a.jpg) center top;
background-size: contain;
clip-path: inset(10px 10px 10px 10px);]
[/div][/div]
[div=width: 200px;
background-color: #000;
border-radius: 4px;][div=
width: 200px;
height: 200px;
background: url(https://i.pinimg.com/736x/33/36/27/33362749d3a37e41c060d57494694ff3.jpg) center top;
background-size: contain;
clip-path: inset(10px 10px 10px 10px);]
[/div][/div]
[div=width: auto;
background-color: #000;
border-radius: 4px;][div=
width: 200px;
height: 200px;
overflow: hidden;
object-fit: cover;
clip-path: inset(10px 10px 10px 10px);]https://youtu.be/TXMt5ajaEd8?si=VB-FMcb0Zuj0qoIs[div=
font-family: Gadget, sans-serif;
width: 220px;
font-size: 18px;
letter-spacing: -1.9px;
line-height: 80%;
word-spacing: -1px;
text-align: justify;
color: #d51608;]Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper[/div][/div][/div]
[div=flex-grow: 1;margin-left: auto;padding-right: 5px;
padding: 10px;][div=
text-align: right;
font-family: futura;
color: #fff;
font-size: 28px;
letter-spacing: -1.6px;
border-bottom: 1px solid #fff;]SECONDARY HEADER[/div]
[div=
color: white;
font-family: optima;
font-size: 10pt;
letter-spacing: -0.5px;
word-spacing: 1.6px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget quam ac ipsum molestie aliquam. Sed blandit leo dui, ac sollicitudin orci molestie nec. Aenean faucibus, eros id vulputate tristique, tortor lectus mattis arcu, a dapibus libero velit vitae nunc. In hac habitasse platea dictumst. Aliquam at ipsum quis erat eleifend convallis. Pellentesque leo eros, sagittis eu dolor sit amet, dignissim posuere orci. Aliquam sit amet congue sapien. Fusce fermentum erat sit amet magna blandit gravida. Nam et ligula tincidunt, adipiscing dolor nec, dignissim metus. Nam lorem massa, tempor nec semper ac, imperdiet sit amet libero. In fermentum arcu non purus cursus, at auctor tortor blandit. Duis vel arcu a massa auctor mattis.[/div][/div][/div][div=
margin-left: 30px;
font-family: futura;
color: #fff;
font-size: 40px;
letter-spacing: 3px;
font-style: oblique;
text-shadow: -4px 3px 0 #d51608, -14px 7px 0 #0a0e27;] TITLE HERE ADJUST LETTERSPACING AS NECESSARY [/div][div=
padding: 15px;
width: 100%;
display: flex;
gap: 8px;][div=width: auto;
background-color: #000;
border-radius: 4px;][div=
width: 200px;
height: 200px;
background: url(https://i.pinimg.com/736x/d5/a5/68/d5a5685a3f1c24b2d9dbc9ff453ba261.jpg) center top;
background-size: contain;
clip-path: inset(10px 10px 10px 10px);
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;]
[/div][/div]
[div=width: auto;
background-color: #000;
border-radius: 4px;][div=
width: 200px;
height: 200px;
background: url(https://i.pinimg.com/736x/28/17/be/2817be860c7543388785e5284fa11290.jpg) center top;
background-size: contain;
clip-path: inset(10px 10px 10px 10px);
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;]
[/div][/div]
[div=flex-grow: 1;margin-left: auto;][div=max-width: 730px;
border-radius: 10px 3px 0px 8px;
border: 3px inset #000000;
padding: 10px;][div=
font-family: futura;
color: #fff;
font-size: 28px;
letter-spacing: -1.6px;
font-style: oblique;
border-bottom: 1px solid #fff;]TITLE HEADER[/div]
[div=
color: white;
font-family: optima;
font-size: 10pt;
letter-spacing: -0.5px;
word-spacing: 1.6px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget quam ac ipsum molestie aliquam. Sed blandit leo dui, ac sollicitudin orci molestie nec. Aenean faucibus, eros id vulputate tristique, tortor lectus mattis arcu, a dapibus libero velit vitae nunc. In hac habitasse platea dictumst. Aliquam at ipsum quis erat eleifend convallis. Pellentesque leo eros, sagittis eu dolor sit amet, dignissim posuere orci. Aliquam sit amet congue sapien. Fusce fermentum erat sit amet magna blandit gravida. Nam et ligula tincidunt, adipiscing dolor nec, dignissim metus. Nam lorem massa, tempor nec semper ac, imperdiet sit amet libero. In fermentum arcu non purus cursus, at auctor tortor blandit. Duis vel arcu a massa auctor mattis.[/div][/div][/div][/div][div=
display: flex;
gap: 8px;
flex-direction: row;
height: 220px;align-items: center;][div=width: 200px;
background-color: #000;
border-radius: 4px;][div=
width: 200px;
height: 200px;
background: url(https://i.pinimg.com/736x/21/24/3e/21243eda50d3a7a7279bb4ccba3fc89a.jpg) center top;
background-size: contain;
clip-path: inset(10px 10px 10px 10px);]
[/div][/div]
[div=width: 200px;
background-color: #000;
border-radius: 4px;][div=
width: 200px;
height: 200px;
background: url(https://i.pinimg.com/736x/33/36/27/33362749d3a37e41c060d57494694ff3.jpg) center top;
background-size: contain;
clip-path: inset(10px 10px 10px 10px);]
[/div][/div]
[div=width: auto;
background-color: #000;
border-radius: 4px;][div=
width: 200px;
height: 200px;
overflow: hidden;
object-fit: cover;
clip-path: inset(10px 10px 10px 10px);]https://youtu.be/TXMt5ajaEd8?si=VB-FMcb0Zuj0qoIs[div=
font-family: Gadget, sans-serif;
width: 220px;
font-size: 18px;
letter-spacing: -1.9px;
line-height: 80%;
word-spacing: -1px;
text-align: justify;
color: #d51608;]Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper Endless Sleeper[/div][/div][/div]
[div=flex-grow: 1;margin-left: auto;padding-right: 5px;
border-radius: 10px 3px 0px 8px;
border: 3px inset #000;
padding: 10px;][div=
text-align: right;
font-family: futura;
color: #fff;
font-size: 28px;
letter-spacing: -1.6px;
border-bottom: 1px solid #fff;]SECONDARY HEADER[/div]
[div=
color: white;
font-family: optima;
font-size: 10pt;
letter-spacing: -0.5px;
word-spacing: 1.6px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget quam ac ipsum molestie aliquam. Sed blandit leo dui, ac sollicitudin orci molestie nec. Aenean faucibus, eros id vulputate tristique, tortor lectus mattis arcu, a dapibus libero velit vitae nunc. In hac habitasse platea dictumst. Aliquam at ipsum quis erat eleifend convallis. Pellentesque leo eros, sagittis eu dolor sit amet, dignissim posuere orci. Aliquam sit amet congue sapien. Fusce fermentum erat sit amet magna blandit gravida. Nam et ligula tincidunt, adipiscing dolor nec, dignissim metus. Nam lorem massa, tempor nec semper ac, imperdiet sit amet libero. In fermentum arcu non purus cursus, at auctor tortor blandit. Duis vel arcu a massa auctor mattis.[/div][/div][/div]
[div= box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
margin: auto; width: 860px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
height: 600px;][div=
position: absolute;
width: 400px;
height: 590px;
background: #00e1fa;mix-blend-mode: difference;][div=
width: 400px;
height: 620px;
filter: saturation(160%) contrast(90%);][img]https://i.pinimg.com/736x/f3/0e/73/f30e7368ffd106e69afbb86a7cbd8faf.jpg[/img][/div][/div][div=width: 100%; padding: 15px;][div=width: 220px;mix-blend-mode: hard-light;font-size: 40pt;font-family: futura, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
font-weight: 800;font-style: oblique;letter-spacing: -2px; line-height: 80%;text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);] QUIRKY TEXT HERE [/div][/div] [div=
border-image: url(https://i.pinimg.com/originals/76/8c/82/768c825969429af08dcd51be1c67a97d.gif)
20 / 10px;][div=padding: 10px;][div=height: 540px; width: 400px; background-color: #fff; padding: 20px;overflow: hidden; width: 400px;][div=font-size: 40pt; color: #000; font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;letter-spacing: -4px;line-height: 70% text-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); border-bottom: 1px solid #000;] HEADLINE HERE[/div]
[div=
font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; color: black; font-size: 10pt; text-align: justify; width: 400px;margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
height: 440px;
color: #000;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada sapien ut ex consequat congue. Vestibulum nibh felis, tempor sit amet lorem in, mollis pellentesque mi. Aliquam non mi non nisi tincidunt tincidunt sit amet non libero. Nunc luctus suscipit efficitur. Donec iaculis est risus, quis elementum risus blandit vitae. Vestibulum vulputate massa nec nulla vestibulum sodales. Duis vehicula nulla ut eleifend facilisis. Integer sed sagittis sem. Proin eleifend pellentesque ipsum, quis ullamcorper tortor tempor vel. Curabitur tincidunt mollis magna. Morbi suscipit nibh sem, quis semper eros pulvinar et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ultricies, tellus sit amet malesuada convallis, lectus mauris pellentesque metus, ut egestas tortor orci a elit.
Fusce non fermentum massa. Fusce ac elit felis. Maecenas neque arcu, porta at velit id, mollis cursus risus. Vivamus sed mattis tellus. Pellentesque sagittis arcu in neque blandit scelerisque. Donec at est eu velit euismod auctor. Suspendisse consequat lectus quis nibh vestibulum lacinia. Vestibulum pharetra neque quam, ac dapibus libero feugiat maximus. Mauris et est justo. Morbi eget urna placerat, porttitor magna at, varius elit. Ut ut mauris eget ipsum ultrices ultrices.
Quisque interdum eget nisi pulvinar lacinia. Duis sollicitudin urna eros, et tempor mauris rhoncus at. Pellentesque laoreet elit ante, congue elementum turpis accumsan vel. Duis id dignissim massa. Maecenas eu mi et justo commodo tincidunt eget eget tellus. Pellentesque ornare augue et viverra laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras euismod mi eget leo aliquet, sit amet aliquam nunc imperdiet. Mauris ac lorem nulla. Integer pulvinar mollis porttitor. Phasellus risus ex, hendrerit eget varius eu, facilisis quis ligula. Nunc elementum lectus laoreet velit tempus, eu auctor risus euismod. Aliquam ipsum felis, ultrices eu eros et, rhoncus feugiat nibh. Morbi urna dui, pellentesque nec dapibus in, convallis vitae neque. Proin dui tellus, dignissim blandit efficitur sed, tincidunt vel sapien.
Nunc luctus suscipit efficitur. Donec iaculis est risus, quis elementum risus blandit vitae. Vestibulum vulputate massa nec nulla vestibulum sodales. Duis vehicula nulla ut eleifend facilisis. Integer sed sagittis sem. Proin eleifend pellentesque ipsum, quis ullamcorper tortor tempor vel. Curabitur tincidunt mollis magna. Morbi suscipit nibh sem, quis semper eros pulvinar et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ultricies, tellus sit amet malesuada convallis, lectus mauris pellentesque metus, ut egestas tortor orci a elit.
Fusce non fermentum massa. Fusce ac elit felis. Maecenas neque arcu, porta at velit id, mollis cursus risus. Vivamus sed mattis tellus. Pellentesque sagittis arcu in neque blandit scelerisque. Donec at est eu velit euismod auctor. Suspendisse consequat lectus quis nibh vestibulum lacinia. [/div][/div][/div][/div][/div][div=width: 900px;
height: 100%;
margin: auto;][div=display:flex;
height: 500px;
background: #000;
width: 920px;
border-bottom: 3px #000 solid;
border-top: 3px #000 solid;][div=
position: relative;
mask-image: radial-gradient(circle, black 10%, rgba(0, 0, 0, 0.5) 80%);][div= -webkit-mask-image: -webkit-gradient(
linear, left top, right bottom,
color-stop(0.60, rgba(0,0,0,1)),
color-stop(0.35, rgba(0,0,0,1)),
color-stop(0.90, rgba(0,0,0,0)),
color-stop(0.95, rgba(0,0,0,0)),
color-stop(1.00, rgba(0,0,0,0)));
height: 500px;
width: 400px;
background:url(https://i.pinimg.com/736x/42/f4/f1/42f4f1fa3e52ae28d20e692c4020d03d.jpg) center, url(https://media.tenor.com/BDbaZNk-EcgAAAAj/smoke.gif) center;
background-size: cover;
background-repeat: no-repeat;
background-blend-mode: luminosity;]
[/div][/div]
[div=height: 100%; width: 520px;
background: url(https://64.media.tumblr.com/5d1fc34a1c44ce114ae83353bcfce5a6/tumblr_pmd6e6Ol7y1runoqyo1_540.gif) center/cover;
mix-blend-mode: exclusion;][div=width: 600px;height: 400px;margin: 15px;][div=
width: 670px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;]
[div=height: 120px;width: 300px; margin: auto;position: absolute;
height: 340px;][div=font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif; font-size: 50pt; color: #fff; text-align: justify; line-height: 95%;letter-spacing: -1px;text-shadow: 3px 9px 11px rgba(66, 68, 90, 1);]HEADING [/div] [div=
margin-left: -20px;
margin-top: -10px;
padding-right: 15px;
width: 320px;
border-right: 1px solid #fff;overflow: hidden;
height: 400px;][div=font-weight: 0;font-family: avenir; font-size: 9pt; text-align: justify; padding: 20px;margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
height: 350px;
width: 300px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada sapien ut ex consequat congue. Vestibulum nibh felis, tempor sit amet lorem in, mollis pellentesque mi. Aliquam non mi non nisi tincidunt tincidunt sit amet non libero. Nunc luctus suscipit efficitur. Donec iaculis est risus, quis elementum risus blandit vitae. Vestibulum vulputate massa nec nulla vestibulum sodales. Duis vehicula nulla ut eleifend facilisis. Integer sed sagittis sem. Proin eleifend pellentesque ipsum, quis ullamcorper tortor tempor vel. Curabitur tincidunt mollis magna. Morbi suscipit nibh sem, quis semper eros pulvinar et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ultricies, tellus sit amet malesuada convallis, lectus mauris pellentesque metus, ut egestas tortor orci a elit.
Aliquam non mi non nisi tincidunt tincidunt sit amet non libero. Nunc luctus suscipit efficitur. Donec iaculis est risus, quis elementum risus blandit vitae. Vestibulum vulputate massa nec nulla vestibulum sodales. Duis vehicula nulla ut eleifend facilisis. Integer sed sagittis sem. Proin eleifend pellentesque ipsum, quis ullamcorper tortor tempor vel. Curabitur tincidunt mollis magna. Morbi suscipit nibh sem, quis semper eros pulvinar et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ultricies, tellus sit amet malesuada convallis, lectus mauris pellentesque metus, ut egestas tortor orci a elit.[/div][/div][/div][div=margin-top: 80px;][div=width: 150px; height: 350px; margin:0px; color: #f9f9f9;text-shadow: -3px -7px 28px rgba(66, 68, 90, 1);][fa]fa-solid fa-user fa-1x[/fa][div=
font-size: 14pt;
font-weight: 500;
font-family: futura;line-height: 95%;letter-spacing: 3px;]USER TAGS [/div][div=
font-weight: 0;font-family: avenir; font-size: 9pt; text-align: justify; letter-spacing: 1px;]username username username [/div]
[div=
font-size: 14pt;
font-weight: 500;
font-family: futura;
line-height: 95%;letter-spacing: 1px; margin: 5px;] [fa]fa-solid fa-headphones fa-1x fa-beat[/fa] SOUNDTRACK[/div][div=width: auto;
width: 145px;
height: 75px;
background-color: #000;
border-radius: 1px;][div=
width:145px;
height: 70px;
overflow: hidden;
object-fit: contain;
clip-path: inset(2px 2px 2px 2px);
text-shadow: -3px -7px 28px rgba(66, 68, 90, 1);]https://youtu.be/TXMt5ajaEd8?si=VB-FMcb0Zuj0qoIs[/div][/div]
[fa]fa-solid fa-location-dot fa-2x fa-bounce[/fa][div=
font-size: 14pt;
font-weight: 500;
font-family: futura;
line-height: 95%;letter-spacing: 3px;]LOCATION [/div][div=
font-weight: 0;font-family: avenir; font-size: 9pt; text-align: justify; letter-spacing: 1px;]x, y @ place [/div][/div][/div] [/div][/div][/div][/div][/div][div=width: 900px;
height: 100%;
margin: auto;][div=display:flex;
height: 500px;
background: #fa161b;
width: 920px;
box-shadow: inset 10px 0px 10px rgba(0,0,0,0.5);
border-bottom: 3px #000 solid;
border-top: 3px #000 solid;][div=
position: relative;
mask-image: radial-gradient(circle, black 80%, rgba(0, 0, 0, 0.5) 50%);][div= -webkit-mask-image: -webkit-gradient(
linear, left top, right bottom,
color-stop(0.60, rgba(0,0,0,1)),
color-stop(0.35, rgba(0,0,0,1)),
color-stop(0.90, rgba(0,0,0,0)),
color-stop(0.95, rgba(0,0,0,0)),
color-stop(1.00, rgba(0,0,0,0)));
height: 500px;
width: 400px;
background:url(https://i.pinimg.com/736x/42/f4/f1/42f4f1fa3e52ae28d20e692c4020d03d.jpg) center, url(https://media.tenor.com/BDbaZNk-EcgAAAAj/smoke.gif) center;
background-size: cover;
background-repeat: no-repeat;
background-blend-mode: luminosity;]
[/div][/div][div=width: 600px;height: 400px;margin: 20px;][div=
width: 670px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;]
[div=height: 120px;width: 300px; margin: auto;position: absolute;
height: 340px;][div=font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif; font-size: 50pt; color: #fff; text-align: justify; line-height: 95%;letter-spacing: -1px;text-shadow: 3px 9px 11px rgba(66, 68, 90, 1);]HEADING [/div] [div=
margin-left: -20px;
margin-top: -10px;
padding-right: 15px;
width: 320px;
border-right: 1px solid #fff;overflow: hidden;
height: 400px;][div=font-weight: 0;font-family: avenir; font-size: 9pt; text-align: justify; padding: 20px;margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
height: 350px;
width: 300px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada sapien ut ex consequat congue. Vestibulum nibh felis, tempor sit amet lorem in, mollis pellentesque mi. Aliquam non mi non nisi tincidunt tincidunt sit amet non libero. Nunc luctus suscipit efficitur. Donec iaculis est risus, quis elementum risus blandit vitae. Vestibulum vulputate massa nec nulla vestibulum sodales. Duis vehicula nulla ut eleifend facilisis. Integer sed sagittis sem. Proin eleifend pellentesque ipsum, quis ullamcorper tortor tempor vel. Curabitur tincidunt mollis magna. Morbi suscipit nibh sem, quis semper eros pulvinar et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ultricies, tellus sit amet malesuada convallis, lectus mauris pellentesque metus, ut egestas tortor orci a elit.
Aliquam non mi non nisi tincidunt tincidunt sit amet non libero. Nunc luctus suscipit efficitur. Donec iaculis est risus, quis elementum risus blandit vitae. Vestibulum vulputate massa nec nulla vestibulum sodales. Duis vehicula nulla ut eleifend facilisis. Integer sed sagittis sem. Proin eleifend pellentesque ipsum, quis ullamcorper tortor tempor vel. Curabitur tincidunt mollis magna. Morbi suscipit nibh sem, quis semper eros pulvinar et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ultricies, tellus sit amet malesuada convallis, lectus mauris pellentesque metus, ut egestas tortor orci a elit.[/div][/div][/div][div=margin-top: 80px;][div=width: 150px; height: 350px; margin:0px; color: #f9f9f9;text-shadow: -3px -7px 28px rgba(66, 68, 90, 1);][fa]fa-solid fa-user fa-1x[/fa][div=
font-size: 14pt;
font-weight: 500;
font-family: futura;line-height: 95%;letter-spacing: 3px;]USER TAGS [/div][div=
font-weight: 0;font-family: avenir; font-size: 9pt; text-align: justify; letter-spacing: 1px;]username username username [/div]
[div=
font-size: 14pt;
font-weight: 500;
font-family: futura;
line-height: 95%;letter-spacing: 1px; margin: 5px;] [fa]fa-solid fa-headphones fa-1x fa-beat[/fa] SOUNDTRACK[/div][div=width: auto;
width: 145px;
height: 75px;
background-color: #000;
border-radius: 1px;][div=
width:145px;
height: 70px;
overflow: hidden;
object-fit: contain;
clip-path: inset(2px 2px 2px 2px);
text-shadow: -3px -7px 28px rgba(66, 68, 90, 1);]https://youtu.be/TXMt5ajaEd8?si=VB-FMcb0Zuj0qoIs[/div][/div]
[fa]fa-solid fa-location-dot fa-2x fa-bounce[/fa][div=
font-size: 14pt;
font-weight: 500;
font-family: futura;
line-height: 95%;letter-spacing: 3px;]LOCATION [/div][div=
font-weight: 0;font-family: avenir; font-size: 9pt; text-align: justify; letter-spacing: 1px;]x, y @ place [/div][/div] [/div][/div][/div][/div][/div][div=height: 100%;
overflow: hidden;][div=margin:auto;
width: 700px;
height: 525px;
background: #dadade;box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
display: flex;][div=width: 850px;
overflow: hidden;
height: 700px;][div=
height: 5px;
padding: 20px;
font-family: Anton;
font-style: oblique 10deg;
font-size: 35px;
letter-spacing: 1.4px;
word-spacing: -1.2px;
line-height: 70%;
font-weight: 900;
color: black;]History[/div][div=;margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;][div=
display: block;
font: 10px/9px Didact Gothic;
color: black;
letter-spacing: -.1px;
text-align: justify; display: flex;width: 245px; height: 90px; padding: 20px 20px 20px 35px;][div=height: auto;
align-items: center;position: relative;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique vulputate massa, quis suscipit mi interdum et. Quisque ut rhoncus orci. Nulla sagittis accumsan mi, non aliquam purus tincidunt a. Sed malesuada finibus orci, eleifend ultrices nibh vulputate vel. Cras at ante at enim faucibus lacinia. Suspendisse potenti. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin urna erat, ultricies sit amet egestas non, blandit eu arcu. Suspendisse volutpat odio efficitur, mattis justo pretium, dictum enim. In eu turpis metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus iaculis ex felis, non tristique metus fringilla ut. Vivamus vel ante nunc. Quisque porta rhoncus ultricies. Nulla eget elementum dolor, vel molestie quam. Cras quis eros accumsan, ultricies risus a, sodales sapien. Fusce in pharetra metus. Fusce id pellentesque libero. Vivamus nulla odio, tincidunt eget condimentum sed, tristique quis ligula. Vivamus sagittis feugiat ipsum ut interdum. Maecenas ut nunc pharetra mauris scelerisque tristique. Sed finibus magna condimentum erat congue ultricies.
Nullam efficitur tincidunt turpis a iaculis. Maecenas imperdiet est eu augue maximus dictum. Nunc ut massa eu diam molestie lobortis in in massa. Nullam nec sapien id sapien imperdiet fringilla ultricies ut tortor. Donec euismod nulla et velit pellentesque, id aliquet erat hendrerit. Curabitur efficitur ipsum ut accumsan maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce semper id lacus sit amet faucibus. Cras bibendum massa ante, interdum dictum mi rhoncus sit amet. Quisque et urna semper, consectetur velit in, gravida ligula. Mauris ac ante vestibulum mi blandit lacinia. Curabitur bibendum ante sed arcu mattis consectetur.[/div][/div][/div]
[div= padding: 20px;border-image: conic-gradient(#c91708 0 0) fill 0//9999px;
clip-path:
polygon(
-9999px calc(tan(3deg) * 9999px),
9999px calc(tan(3deg) * -9999px),
calc(100% + 9999px) calc(100% - tan(3deg) * 9999px),
calc(100% - 9999px) calc(100% + tan(3deg) * 9999px));
width: 300px;
height: 100px;][div=font-family: Anton;
font-size: 35px;
font-style: oblique 10deg;
letter-spacing: 1.4px;
word-spacing: -1.2px;
line-height: 70%;
font-weight: 900;
color: black;
width: 400px;]Profile[div=
font: Didact Gothic;
font-size: 12pt;
color: black;
line-height: 90%;
letter-spacing: -.1px;
word-spacing: -1px;
text-align: justify;
padding: 10px 10px 10px 10px;][div=margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
height: 400px;
width: 200px;
font-style: oblique;
font-weight: 600;
letter-spacing: 2px;][div=
width: 250px;
column-count: 2;
-moz-column-count: 2;
column-gap: 15px;
height: 270px;] Name:
Alias:
Gender:
Age:
Occupation:
[div=font-style: none; font-weight: normal;]First Last
Nickname
F/M/NB
XX
XXXXXXXXX[/div][/div][/div][/div][/div][/div]
[div=width: 850px;
overflow: hidden;
height: 240px;][div=
width: 450px;
height: 20px;][div=
padding: 15px;
width:210px;
float: left;
font-family: Anton;
font-style: oblique 10deg;
font-size: 35px;
letter-spacing: 1.4px;
word-spacing: -1.2px;
line-height: 70%;
font-weight: 900;
color: black;
height: 20px;]Present Day[/div][div=
display: flex;width: 385px; height: 180px; padding: 20px 50px 20px 35px;][div=
height: 150px;
width: 250px;
position: relative;
overflow: hidden;margin-top: -25px;][div=margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;][div=
display: block;
font: 10px/9px Didact Gothic;
color: black;
letter-spacing: -.1px;
text-align: justify; display: flex;width: 245px; height: 130px;][div=height: auto;
align-items: center;position: relative;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique vulputate massa, quis suscipit mi interdum et. Quisque ut rhoncus orci. Nulla sagittis accumsan mi, non aliquam purus tincidunt a. Sed malesuada finibus orci, eleifend ultrices nibh vulputate vel. Cras at ante at enim faucibus lacinia. Suspendisse potenti. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin urna erat, ultricies sit amet egestas non, blandit eu arcu. Suspendisse volutpat odio efficitur, mattis justo pretium, dictum enim. In eu turpis metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus iaculis ex felis, non tristique metus fringilla ut. Vivamus vel ante nunc. Quisque porta rhoncus ultricies. Nulla eget elementum dolor, vel molestie quam. Cras quis eros accumsan, ultricies risus a, sodales sapien. Fusce in pharetra metus. Fusce id pellentesque libero. Vivamus nulla odio, tincidunt eget condimentum sed, tristique quis ligula. Vivamus sagittis feugiat ipsum ut interdum. Maecenas ut nunc pharetra mauris scelerisque tristique. Sed finibus magna condimentum erat congue ultricies.
Nullam efficitur tincidunt turpis a iaculis. Maecenas imperdiet est eu augue maximus dictum. Nunc ut massa eu diam molestie lobortis in in massa. Nullam nec sapien id sapien imperdiet fringilla ultricies ut tortor. Donec euismod nulla et velit pellentesque, id aliquet erat hendrerit. Curabitur efficitur ipsum ut accumsan maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce semper id lacus sit amet faucibus. Cras bibendum massa ante, interdum dictum mi rhoncus sit amet. Quisque et urna semper, consectetur velit in, gravida ligula. Mauris ac ante vestibulum mi blandit lacinia. Curabitur bibendum ante sed arcu mattis consectetur.[/div][/div][/div][/div][/div][/div][/div][/div]
[div=width: 295px;
height: 100%;
margin: auto;][div=
width: 350px;
height: 410px;
background-image:url(https://i.pinimg.com/736x/53/03/b6/5303b62d6063054000bb5d2cf15baef2.jpg), url(https://i.imgur.com/7dDdycs.gif);
background-repeat: no-repeat;
background-blend-mode: darken;
background-size: contain;
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;]
[/div][div=margin-top: -7px;height: 70px;][div=font-family: Bodoni Moda;
font-size: 35px;
letter-spacing: 1.4px;
word-spacing: -1.2px;
font-weight: 500;
font-style: oblique;
color: black;] FIRST NAME[/div][div=font-family: Bodoni Moda;
font-size: 47px;
letter-spacing: 2.4px;
word-spacing: -1.2px;
font-weight: 400;
text-decoration: overline;
font-style: oblique;
line-height: 80%;
color: black;
text-align: right;] LAST NAME[/div][/div]
[div=padding: 10px; color: black; text-align: center; font: bold 10px/70% 'Times', sans-serif; letter-spacing: 1px;][color=black] ♫ ▶ song title - band[/color][/div][/div][div=width: 75px;
height: 525px;
background:url(https://i.pinimg.com/736x/53/03/b6/5303b62d6063054000bb5d2cf15baef2.jpg) center/cover;
filter: saturate(150%) contrast(120%); brightness(90%);]
[/div][div=width: 170px;background-position: right 145% bottom 45%;
height: 525px;background:url(https://i.pinimg.com/736x/53/03/b6/5303b62d6063054000bb5d2cf15baef2.jpg) center/cover;
filter: grayscale(100%) contrast(140%);]
[/div][/div][/div]mix-blend-mode and filter (hue-rotate) for different color combos
[div=width: 500px;
margin: auto;] [div=box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
filter: hue-rotate(320deg) invert(0%) opacity(100%) saturate(100%) contrast(85%) brightness(110%);
mix-blend-mode: hard-light;
width:410px;
height:610px;
background:#000;
box-shadow:0 0 5px 0 rgba(0,0,0,.5);
display:grid;
grid-template-columns:1fr 1fr;
grid-gap:10px;
padding:10px;
position:relative;
border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;
top:30%; left:25%;
background: url(https://www.icegif.com/wp-content/uploads/2021/10/icegif-1634.gif);] [div=
background:#000;
height:300px;
width:200px;
background-repeat:no-repeat;
background:url(https://i.pinimg.com/736x/0f/1f/c0/0f1fc029145fbd9b6d839bc471eb9839.jpg) center/cover;]
[/div][div=
background:#e0e0e0;
height:300px;
width:200px;
background-repeat:no-repeat;
background:url(https://i.pinimg.com/736x/2f/8d/6c/2f8d6ced32a153d4186c64232b6fe9b1.jpg) center/cover;]
[/div][div=
background:#e0e0e0;
height:300px;
width:200px;
background-repeat:no-repeat;
background:url(https://i.pinimg.com/736x/4d/ad/e5/4dade5bf7d0dbfae7ed849c4a970ab8b.jpg) center/cover;]
[/div][div=
background:#e0e0e0;
height:300px;
width:200px;
background-repeat:no-repeat;
background:url(https://i.pinimg.com/736x/df/31/36/df3136afbcc9325c7287914a40bcee6b.jpg) center/cover;]
[/div][div=
height:200px;
width:200px;
position:absolute;
top:30%; left:25%;
border-radius: 50%;
background: url(https://www.icegif.com/wp-content/uploads/2021/10/icegif-1634.gif);
padding: 8px;][div=width: 200px; height: 200px; overflow: hidden; border-radius: 50%; top:50%; left:50%;background-size: cover;] [IMG]https://i.pinimg.com/736x/fa/91/4d/fa914d9b09ac3eafa72af2b7388f6741.jpg[/IMG][/div][/div][/div][/div][/div]
