One x One ♡ 𝗂𝗇𝗍𝗈𝗅𝖾𝗋𝖺𝖻𝗅𝖾 𝖼𝗋𝗎𝖾𝗅𝗍𝗒 ( 𝖼𝗁𝖺𝗋𝖺𝖼𝗍𝖾𝗋𝗌 )

[constellation]

[div class=container][div class=border] [div class=circle1]

[div class=circle2][/div] [div class=circle3][/div] [div class=title]intolerable cruelty[/div] [div class=names]constellation x fated[/div] [/div][/div][/div] [class=container] width: 600px; height: 400px; margin: auto; [/class] [class=border] position: absolute; width: 600px; height: 400px; [/class] [class=circle1] position: absolute; left: 0; top: 50px; height: 300px; width: 300px; border-radius: 100%; background: #b18e6d; opacity: .5; box-shadow: 0px 0px 50px 0px rgba(177,142,109,1); [/class] [class=circle2] position: absolute; right: 0; top: 50px; height: 300px; width: 300px; border-radius: 100%; background: #b18e6d; opacity: .5; box-shadow: 0px 0px 50px 0px rgba(177,142,109,1); [/class] [class=circle3] position: absolute; top: 0; left: 100px; height: 400px; width: 400px; border-radius: 100%; background: url(https://www.clairemckinneypr.com/wp-content/uploads/2018/02/iStock-695137252.jpg); background-size: cover; background-position: center; [/class] [class=title] position: absolute; bottom: 50px; width: 600px; font-family: 'Abril Fatface', sans-serif; font-size: 40px; text-transform: uppercase; color: #fafafa; font-weight: 900; text-align: center; text-shadow: 1px 1px 0px #b18e6d, -1px -1px 0 #b18e6d, -1px 1px 0 #b18e6d, 1px -1px 0 #b18e6d; [/class] [class=names] position: absolute; bottom: 30px; font-size: 15px; font-family: Manrope; color: #fafafa; text-transform: uppercase; text-align: center; width: 600px; [/class]

 

[blackout]

[class=variables] --accent: #c46251; --accent2: #a14a3b; --image: url('https://mediaslide-us.storage.googleapis.com/wilhelmina/pictures/1120/16931/large-1575585021-69eafdab68c7e6602db8bce2842455e1.jpg'); --rimage1: url('https://www.unique.dk/wp-content/uploads/2016/08/8466-768x1152.jpg'); --rimage2: url('https://s-media-cache-ak0.pinimg.com/736x/0e/13/08/0e1308775d73078e37b1aecc81485e30.jpg'); --rimage3: url('https://images.inuth.com/2017/07/6Deepika-Padukone-looks-splendid-in-this-photoshoot.jpg'); --rimage4: url('https://mediaslide-us.storage.googleapis.com/wilhelmina/pictures/1018/23991/large-1575883008-858e13a6b614ae26662b448e824145c0.jpg'); [/class] [div class=variables] [div class=bkg] [div class=circ1][/div] [div class=circ2][/div] [div class=circ3][/div] [div class=text]anya
[div class=second] lochridge [/div][/div] [div class="content content1 select"][div class=scroll] [div class=tag]name[/div] anya lochridge.

[div class=tag]nickname[/div] mainly goes by anya, although she allows some to call her 'annie'.

[div class=tag]age[/div] twenty-four.

[div class=tag]gender[/div] female.

[div class=tag]sexuality[/div] heterosexual.


[div class=tag]p.o.b.[/div] albany, new york, u.s.a.

[div class=tag]d.o.b.[/div] july seventeenth, nineteen ninety-five.

[div class=tag]ethnicity[/div] pakistani.

[div class=tag]education[/div] a degree in business administration.

[div class=tag]occupation[/div] executive assisstant to ethan locyen, begrudgingly.

[/div][/div] [div class="content content2" style="top: -540px;"][div class=scroll] [div class=tag]height[/div] 5'7

[div class=tag]weight[/div] 152 lbs

[div class=tag]body[/div] anya has a willowy figure, with long, lanky legs and narrow hips.

[div class=tag]hair[/div] a dark chocolate that hangs in loose, fluffy waves to her chest.

[div class=tag]eyes[/div] espresso, even in the sunlight.


[div class=tag]features[/div] her sharp jaw and cheekbone make anya's face rather descriptive.

[div class=tag]marks[/div] a birthmark on her left collarbone.

[div class=tag]makeup[/div] anya prefers rather simple, natural makeup, and she often uses muted or nude colors.

[div class=tag]wardrobe[/div] other than her office-mandated blouses and skirts, anya loves flowy dresses and loose, graphic tops.

[div class=tag]faceclaim[/div] abigail culver.

[/div][/div] [div class="content content3" style="top: -740px;"][div class=scroll] [div class=tag]positive[/div] patient; humble; empathetic; focused; diligent.

[div class=tag]negative[/div] quiet; people-pleasing; submissive; gossipy.


[div class=tag]likes[/div] sour foods; cloudy skies; short nails; pretty phone cases; vacations; flying; flowers; small plants; her loft; being organized; boots; hiking; people with a good sense of humour.

[div class=tag]dislikes[/div] heavy bags; being in photos; hot weather; cleaning; work; fast food; writing papers; swimming; work trips; gloves; causing trouble; drawing attention to herself.

[div class=tag]dreams[/div] going on a month-long trip to the caribbean; quitting her job; getting another, high-ranked job with a tolerable boss; having a set future.

[div class=tag]fears[/div] being stuck in her job; becoming homeless or impoverished; not having the future she thought she would; being abandoned.

[/div][/div] [div class="content content4" style="top: -940px;"][div class=scroll] [div class=tag]childhood[/div] from her birth, anya was a dreamer. her parents had moved from pakistan to new york, and had been hard-working model citizens for their whole lives. under their influence, she quickly took on their likeness. she went through all the typical phases: wanting to be a marine biologist, nurse, the likes. in essence, she was an idealist. she had visions of her future where everything was perfect, dreams of working her favorite job and walking down the aisle in a huge white dress. her teachers knew her as impossibly diligent and friends as bubbly and light-hearted, and anya still remembers her childhood as nothing but happy.


[div class=tag]teens[/div] anya's current personality started taking form in her teen years. like almost all childhood friends, hers eventually dropped off, distanced by time and differing personalities. normally, this wouldn't be an issue, but amidst the turmoil of middle school anya struggled to remake friends and became quite a loner. the girl that was once a walking, living ball of sunshine turned into a quiet shadow of her past self, barely noticeable than more than a wallflower. her middle school years were rough, and though anya wasn't a victim of bullying, she learned that the best way to avoid any trouble was to keep her head down. to fill the void left by friends, she engrossed herself in schoolwork, quickly becoming one of the top students in the school and excelling in all her classes.

when anya entered high school, something changed. within weeks she found her 'crowd', quickly gaining a tight yet small ring of friends. despite her newfound companions, anya still remained a quiet, studious girl. with a new support system around her she fully embraced her dreams and passions, quickly turning her interest to the delicate intricacies of business. she enrolled herself in countless extra classes, shelling out extra time for advanced classes so she could get into her college of choice. her high school years flashed by, and it quickly came time to apply for colleges. the news that she'd been accepted to her first choice made her ecstatic: finally, her future was in sight, and everything seemed to be going well.


[div class=tag]adulthood[/div] anya sailed through her college years effortlessly. the work was more than she'd ever seen before, but with the knowledge that her dreams were very well in reach, anya dedicated herself to her studies completely. between her arduous study sessions she gained friends quickly, and everything was perfect. she quickly graduated, gaining the degree she'd dreamed of since college and being confident that she would be stepping into the real world fully prepared.

immediately after she was out of college, anya packed her bags and moved to new york city, buying a small but comfortable loft with the funds she'd saved from part-time jobs during her high school and college years. she knew that there would be plenty of jobs in the business in what could very possibly be the business capital of the u.s., and she applied herself to applying for jobs with just as much dedication as she studied during school. at first, prospects were unbelievably bright. there were a plethora of amazing jobs open, and anya had boundless hope that she would get one and have her dream life.

but things very quickly turned out to be much less glamorous than she had imagined.

no matter how fast she was or how sweetly she worded her resume, she was never accepted. there was always someone better than her, with more experience, just waiting to snatch up what she felt was a spot that deserved to be hers. it was only months before anya could barely afford her apartment. nothing had ever seemed so bleak, so when she finally managed to land an interview, it felt like divine intervention. she had told herself that if she didn't get this job she would have to move back to albany to her parents, which would be nothing short of a nightmare. when anya actually got the job, she had never been happier. she could climb the ranks and her proximity to the ceo put her in a perfect position to see what business was really like. at first, she put up with the torment from her new boss: surely, he was just trying to break her in. she was new, so he had to establish boundaries. right?

it didn't take long for anya to realize that what she thought had been a blessing was really a curse. she had never been more miserable in her life, and every day was the same torture on loop. even so, she knew it was the curse that was keeping her alive, and she told herself that she would just have to hunker down and take it until she was promoted. but the promotion never came and anya was trapped with her boss, stuck in a trap of distress and hatred. two years later, anya is still hanging on, just wondering how long she can last before his intolerable cruelty breaks her. [/div][/div] [div class="content content5" style="top: -1140px;"][div class=scroll] [div class=columncont][div class=rimage][/div][div class=rcontent][div class=scroll] [div class=rtag]ethan loycen[/div] anya absolutely despises ethan. she sees him as the portrait of everything that's wrong with her life, and she'd do near anything to get away from him. despite not having the guts for revenge, she thinks that he doesn't deserve all he has. [/div][/div][/div] [div class=columncont][div class=rimage style="background: var(--rimage2); background-size: cover;"][/div][div class=rcontent][div class=scroll] [div class=rtag]matthew lochridge[/div] anya was always close to her father. he was the main model figure in her life, and as a successful lawyer, anya looks up to him greatly. she still calls him nearly every night.
faceclaim: avan jogia [/div][/div][/div] [div class=columncont][div class=rimage style="background: var(--rimage3); background-size: cover;"][/div][div class=rcontent][div class=scroll] [div class=rtag] corinna lochridge[/div] despite anya and her mother being close, she's not nearly as close with corinna as with matthew. corinna was much more of an enforcer of rules and morals, which greatly shaped her into who she is today, but it distanced her in anya's eyes.
faceclaim: deepika padukone [/div][/div][/div] [div class=columncont][div class=rimage style="background: var(--rimage4); background-size: cover;"][/div][div class=rcontent][div class=scroll] [div class=rtag] julia alden[/div] julia is one of anya's remaining friends from college. julia is a nurse and between shifts she'll visit anya's apartment to give her advice, have a drink with her, and just relax. anya looks up to julia as what her life could be, making it hard to cope with her sometimes.
faceclaim: anelia moor [/div][/div][/div] [/div][/div] [div class=flexbox][div class="tab tab1"][/div][div class=line][/div][div class="tab tab2"][/div][div class=line][/div][div class="tab tab3"][/div][div class=line][/div][div class="tab tab4"][/div][div class=line][/div][div class="tab tab5"][/div][/div] [/div][/div] [class=bkg] width: 450px; height: 555px; background: #ededed; margin: auto; cursor: url('http://i.imgur.com/ZOrzC.png'), auto !important; [/class] [class=circ1] background: var(--accent2); height: 200px; width: 200px; position: relative; top: 28px; left: 20px; border-radius: 100%; [/class] [class=circ2] background: var(--accent); height: 200px; width: 200px; border-radius: 100%; position: relative; top: -182px; margin: auto; [/class] [class=circ3] background: var(--image); background-size: cover; filter: saturation(80%); z-index: 10; height: 200px; width: 200px; position: relative; top: -392px; left: 230px; border-radius: 100%; border: 1px solid var(--accent); [/class] [class=text] width: max-content; height: max-content; margin: auto; text-align: center; font-family: Manrope; color: var(--accent); text-transform: uppercase; font-weight: 300; letter-spacing: 4px; line-height: 16px; font-size: 17px; position: relative; top: -360px; [/class] [class=second] color: var(--accent2); font-weight: bold; letter-spacing: 8px; [/class] [class=content] height: 200px; width: 300px; position: relative; top: -340px; margin: auto; font-family: Manrope; font-size: 12px; color: black; text-align: justify; line-height: 15px; overflow: hidden; opacity: 0; transition: all 1s; [/class] [class=tag] font: Baloo Paaji 2; font-size: 15px; color: var(--accent); font-weight: bold; text-transform: uppercase; letter-spacing: 1px; [/class] [class=flexbox] background: var(--accent); height: 40px; width: 450px; position: relative; top: -1117px; font-family: Manrope; font-size: 12px; color: white; display: flex; justify-content: space-evenly; [/class] [class=scroll] overflow-y: scroll; overflow-x: hidden; padding-right: 40px; width: 100%; height: 100%; [/class] [class=tab] height: max-content; width: max-content; font-size: 15px; position: relative; top: 7px; cursor: url('https://i.imgur.com/8akxkMH.png'), auto !important; transition: all 1s; [/class] [class=line] height: 20px; width: 1px; background: white; position: relative; top: 10px; [/class] [class=columncont] height: 100px; width: 300px; position: relative; overflow: hidden; margin-bottom: 15px; [/class] [class=rimage] height: 100px; width: 100px; background: var(--rimage1); background-size: cover; [/class] [class=rcontent] height: 100px; width: 190px; position: relative; left: 110px; top: -100px; font-family: Manrope; font-size: 12px; color: black; text-align: justify; [/class] [class=rtag] color: var(--accent); font-size: 17px; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; font-family: Baloo Paaji 2; position: sticky; top: 0px; background: #ededed; [/class] [class=select] z-index: 15; opacity: 1; [/class] [script class=tab1 on=click] addClass select content1 removeClass select content2 removeClass select content3 removeClass select content4 removeClass select content5 [/script] [script class=tab2 on=click] addClass select content2 removeClass select content1 removeClass select content3 removeClass select content4 removeClass select content5 [/script] [script class=tab3 on=click] addClass select content3 removeClass select content2 removeClass select content1 removeClass select content4 removeClass select content5 [/script] [script class=tab4 on=click] addClass select content4 removeClass select content2 removeClass select content3 removeClass select content1 removeClass select content5 [/script] [script class=tab5 on=click] addClass select content5 removeClass select content2 removeClass select content3 removeClass select content4 removeClass select content1 [/script] [class name=tab state=hover] animation: {post_id}shake 0.5s infinite; [/class] [animation=shake] [keyframe=0] transform: rotate(0deg); transform-origin: 50% 50%; [/keyframe] [keyframe=6] transform: rotate(-2deg); [/keyframe] [keyframe=12] transform: rotate(-5deg); [/keyframe] [keyframe=18] transform: rotate(-7deg); [/keyframe] [keyframe=25] transform: rotate(-10deg); [/keyframe] [keyframe=31] transform: rotate(-7deg); [/keyframe] [keyframe=37] transform: rotate(-5deg); [/keyframe] [keyframe=43] transform: rotate(-2deg); [/keyframe] [keyframe=50] transform: rotate(0deg); [/keyframe] [keyframe=56] transform: rotate(2deg); [/keyframe] [keyframe=62] transform: rotate(5deg); [/keyframe] [keyframe=68] transform: rotate(7deg); [/keyframe] [keyframe=75] transform: rotate(10deg); [/keyframe] [keyframe=81] transform: rotate(7deg); [/keyframe] [keyframe=87] transform: rotate(5deg); [/keyframe] [keyframe=93] transform: rotate(2deg); [/keyframe] [keyframe=100] transform: rotate(0deg); [/keyframe] [/animation]

 

[constellation]

[class=border] --main-colour: #91B2BE; --accent-colour: #333; [/class]

[div class=container][div class=border] [div class=sborder1][div class=shape1][div class="tabContents tabContents1 show"][div class=mainimage]

[/div] [div class="tabContents tabContents2"][div class=header]01. BASICS[/div][div class=line][/div][div class=textbox][div class=scroll][div class=tag]full name.[/div]

ethan dean loycen.​

[div class=tag]nicknames.[/div]

He has never been fond of nicknames and with his status, would prefer to be addressed as Mr Loycen.​

[div class=tag]age.[/div]

twenty-nine.​

[div class=tag]birthdate.[/div]

april twenty-six, nineteen ninety-one.​

[div class=tag]place of birth.[/div]

new york, u.s.a.​

[div class=tag]gender.[/div]

male.​

[div class=tag]sexuality.[/div]

heterosexual.​

[div class=tag]occupation.[/div]

the CEO of Entice International.​

[/div][/div][/div] [div class="tabContents tabContents3"][div class=header]02. LOOKS[/div][div class=line][/div][div class=textbox][div class=scroll][div class=tag]height.[/div]

six foot two inches.​

[div class=tag]weight.[/div]

one hundred and seventy-seven pounds.​

[div class=tag]body.[/div]

staying fit and healthy is part of ethan's requirement of looking good. he likes to exercise, go on early morning runs every so often when he has time and works out at home.​

[div class=tag]hair.[/div]

a light golden brown, often very tousled and naturally wavy.​

[div class=tag]eyes.[/div]

a striking pale, icy blue.​

[div class=tag]marks.[/div]

no significant marks on him, besides minimal childhood scars. he has no tattoos or piercings.​

[div class=tag]wardrobe.[/div]

ethan always tries to dress his best, it's merely a personal preference. button-downs, suits, anything classy and expensive that permits to the weather during the day at work, sweaters and jeans at home. he's often in the spotlight and is noticed by many, so looking nice is a priority. only those that work close to him, such as his executive assistant, knows that ethan wears glasses. he only ever does when he's in his office, though.​

[/div][/div][/div] [div class="tabContents tabContents4"][div class=header]03. PERSONA[/div][div class=line][/div][div class=textbox][div class=scroll][div class=tag]personality.[/div]

A complex being with layers upon layers of personality, Ethan can often be found in a pissed off mood because of one thing or another, and it's really not hard to get on his nerves, hence why he is known as the A+ asshole boss that he is. His moody demeanour doesn't make Ethan an inherently mean person, however, and he is still capable of emotions that aren't so negative, it's just rare for the man to go a day without giving out a few glares and eye rolls. When first meeting Ethan, the immediate thing you will realise is just how sarcastic he is. His sense of humour is incredibly dry and he tends to deadpan a lot, which is not to everyone's taste. Ethan genuinely doesn't mean to come across as somewhat unapproachable, but his sarcastic ways certainly don't help him much. People often think he's just being rude, not aware Ethan is trying to joke around with them, in his very own bizarre way. This has only fuelled his belief that people just don't really like him, and therefore he has become more standoffish and icy. Ethan really has no understanding or value for decisions made on personal feelings. He strives constantly to achieve logical conclusions to problems and doesn't understand the importance of applying emotions to decisions. For this reason, he is usually not in-tune with how people are feeling and is not naturally equipped to meet the emotional needs of others. Since his feelings are his least developed trait, he may have difficulty giving the warmth and support that is necessary when it comes to intimate relationships.​

[div class=tag]likes.[/div]

coffee, the beach, politics (but doesn't engage), the sound of lightning, puzzles, hiking, museums, high places, sleep, expensive suits.​

[div class=tag]dislikes.[/div]

meetings, night time, plants, romantic movies, chocolate, being late, making promises, desperate women, the media (fake news), his many assistants that come and go.​

[div class=tag]fears.[/div]

the future and what it holds for him, depending on others and them depending on him, losing his place as number one.​

[/div][/div][/div] [div class="tabContents tabContents5"][div class=header]04. HISTORY[/div][div class=line][/div][div class=textbox][div class=scroll][div class=tag]childhood.[/div]

Ethan was born in the rather popular state of New York, his twin brother, Aiden following shortly after by just seven minutes. Their father, Matthew, was originally the first to work in the hotel industry, and although he’d never amounted to as far as his sons, he still had somewhat of a small presence. Matthew was a very reserved and closed off individual, until he met Cécile who worked alongside him and eventually managed to break through his shell, turning him into a family man. Most could only assume that is what Cécile found so enticing about him. Ethan's childhood was rather quiet, he was very wise at a young age and different from the other students at the school he attended. He preferred to observe the others, instead of involving himself, whilst his brother was the social butterfly.​

[div class=tag]teens.[/div]

High school was a different case, though. Over time, Ethan began to break out of his introverted shell, becoming rather confident and popular amongst his classmates. While he did prioritise his education, his dad motivated and pushed him along with his brother to do well, Ethan enjoyed taking part in extra-curricular activities, mainly sports. His brother at the time was completely the opposite. He preferred the arts and crafts instead and wasn’t really considered “popular”, and so the two boys struggled to get along as well as they used to. It was only evident that Ethan and Aiden were never going to get close after they graduated high school and went their own separate ways to college. During those years, they both received a phone call from the police department back home, discovering that their parents had been murdered, shot in their own home over an empty safe. The memory still sticks to Ethan, “these things happen all the time” the officer had said right after relaying the news as if he’d just given him a speeding ticket. Ethan and Aiden were never the same after that. They always handled things differently, and grief was no different. They’d failed to establish a connection during their early teenage years, and when their parents passed away, they only called each other on holidays. After a while, they stopped calling each other altogether. Although Ethan doesn’t like to admit it, he still keeps up with his brother through the press and all the budget hotel chain magazines, but that was it.​

[div class=tag]adulthood.[/div]

after finishing college, ethan was quick to open his first-ever luxury hotel with the inheritance his father had passed down to him. he quickly rose to the top of the hotel industry, opening almost fifty hotels internationally and twenty hotels in new york city. that's exactly why he knew that new york was his, and it always would be. every luxury hotel wanted his touch, and the newest listings from hilton and marriot were poor imitations. the endless parties on his yachts, the over the top parties on his rooftops had lost their appeal over the years, and the only reason he was ever seen with pretty models was to distract the media from whatever business deal he was sealing behind the scenes. ethan always kepts to himself, never made friends, and kept tabs on all his enemies. it only got him to where he was, and that's the only reason why he plans on keeping it that way.​

[/div][/div][/div] [div class="tabContents tabContents6"][div class=header]05. RELATIONS[/div][div class=line][/div][div class=textbox][div class=scroll]

MATTHEW LOYCEN

[div class=scroll]matthew was a big role model to ethan. he's almost one hundred percent sure that if not because of him, then he wouldn't be right where he is now. his father helped teach him the ways of the hospital industry and how to succeed in it during his early teenage years. ethan didn't think he'd even follow his father's path, but he did and he's gotten far.

[/div]

cécile loycen

[div class=scroll]ethan's mother was incredibly loving, and when things went south, she would always stick up for him. although ethan very rarely ever followed her advice, he never truly appreciated his mother until she passed away sadly. he doesn't really think he's going to get married, but if he does, then he hopes to find somebody with the same personality as cécile.

[/div]

AIDEN LOYCEN

[div class=scroll]although being his twin, ethan and aiden haven't spoken in almost a decade and even when they were on speaking terms, it was only for the sake of their parents. the only thing they shared in common was their similar looks, they'd never gotten along in life. the "they're twins, they'll grow out of it and become best friends" never happened and all they have to show for their relationship are old staged pictures at milestone events.

[/div]

ALEXA LOYCEN

[div class=scroll]alexa is ethan's niece, and is currently three years old. he still has yet to discover that his brother even has kids, but maybe, just maybe, they will meet someday.

[/div]

[/div][/div][/div] [/div][/div] [div class=sborder2][div class=shape2][div class=imagea][/div] [div class=imageb][/div] [div class=tabs][div class="tab tab1 chosen"][/div] [div class="tab tab2"][/div] [div class="tab tab3"][/div] [div class="tab tab4"][/div] [div class="tab tab5"][/div] [div class="tab tab6"][/div][/div] [div class=banner]ETHAN LOYCEN[/div][/div][/div] [/div][/div][/div] [class=container] width: 700px; height: 400px; margin: auto; [/class] [class=border] position: absolute; width: 700px; height: 400px; [/class] [class=sborder1] position: absolute; top: -1px; left: 124px; height: 402px; width: 452px; -webkit-clip-path: inset(0 0 0 0 round 40% 0%); clip-path: inset(0 0 0 0 round 40% 0%); background: #eee; z-index: 1; [/class] [class=sborder2] position: absolute; top: -1px; right: 124px; height: 402px; width: 452px; -webkit-clip-path: inset(0 0 0 0 round 40% 0%); clip-path: inset(0 0 0 0 round 40% 0%); background: #eee; [/class] [class=shape1] position: absolute; z-index: 1; top: 1px; left: 1px; height: 400px; width: 450px; background: #fff; -webkit-clip-path: inset(0 0 0 0 round 40% 0%); clip-path: inset(0 0 0 0 round 40% 0%); [/class] [class=shape2] position: absolute; top: 1px; right: 1px; height: 400px; width: 450px; background: var(--main-colour); background-image: url(https://www.transparenttextures.com/patterns/ag-square.png); -webkit-clip-path: inset(0 0 0 0 round 40% 0%); clip-path: inset(0 0 0 0 round 40% 0%); [/class] [class=slideright] right: -1px; transition: 1s all; [/class] [class=slideleft] left: -1px; transition: 1s all; [/class] [script class=border on=mouseenter] addClass slideleft sborder1 addClass slideright sborder2 [/script] [class=mainimage] position: absolute; top: 5px; right: 5px; height: 390px; width: 440px; background: url(https://66.media.tumblr.com/95fda2beec3b7c5a90e402568793c095/tumblr_pgarlgf9C31rs7oz5o1_640.jpg); background-size: cover; background-position: top center; -webkit-clip-path: inset(0 0 0 0 round 40% 0%); clip-path: inset(0 0 0 0 round 40% 0%); [/class] [class=imagea] position: absolute; top: 25px; right: 105px; height: 120px; width: 120px; -webkit-clip-path: inset(0 0 0 0 round 30% 5%); clip-path: inset(0 0 0 0 round 30% 5%); background: url(https://66.media.tumblr.com/6fd51052f99b2db50ecd89a66cb92fe2/tumblr_p4ken0PLur1sx1fcmo10_400.gifv); background-size: cover; background-position: center; [/class] [class=imageb] position: absolute; top: 165px; right: 105px; height: 120px; width: 120px; -webkit-clip-path: inset(0 0 0 0 round 30% 5%); clip-path: inset(0 0 0 0 round 30% 5%); background: url(https://66.media.tumblr.com/0946298e4cfc437b8795492a8e607e36/tumblr_p4ken0PLur1sx1fcmo4_400.gifv); background-size: cover; background-position: center; [/class] [class=banner] position: absolute; bottom: 45px; right: 105px; height: 40px; width: 230px; background: white; border-radius: 0 90px 5px 0; text-align: right; line-height: 40px; padding-right: 25px; font-size: 14px; color: var(--main-colour); text-transform: uppercase; letter-spacing: .5px; box-shadow: 0px 0px 50px 0px #fff; font-weight: 600; [/class] [class=tabs] position: absolute; top: 20px; right: 20px; width: 50px; height: 250px; background: transparent; display: flex; flex-direction: column; justify-content: space-evenly; border: 1px solid transparent; [/class] [class=tab] width: 35px; height: 35px; background: #fff; color: var(--main-colour); font-size: 15px; border-radius: 10px; line-height: 33px; text-align: center; transition: 0.5s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; box-shadow: 0px 0px 50px 0px #fff; [/class] [class=tabContents] position: absolute; height: 100%; width: 100%; opacity: 0; transition: all 1.5s; [/class] [class name=tab state=hover] background: var(--accent-colour); color: #fff; transition: 0.5s ease-in-out; [/class] [script class=tab1 on=click] addClass show tabContents1 addClass chosen tab1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass chosen tab2 removeClass chosen tab3 removeClass chosen tab4 removeClass chosen tab5 removeClass chosen tab6 removeClass show tabContents6 [/script] [script class=tab2 on=click] addClass show tabContents2 addClass chosen tab2 removeClass show tabContents1 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass chosen tab1 removeClass chosen tab3 removeClass chosen tab4 removeClass chosen tab5 removeClass chosen tab6 removeClass show tabContents6 [/script] [script class=tab3 on=click] addClass show tabContents3 addClass chosen tab3 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents4 removeClass show tabContents5 removeClass chosen tab1 removeClass chosen tab2 removeClass chosen tab4 removeClass chosen tab5 removeClass chosen tab6 removeClass show tabContents6 [/script] [script class=tab4 on=click] addClass show tabContents4 addClass chosen tab4 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents5 removeClass chosen tab1 removeClass chosen tab2 removeClass chosen tab3 removeClass chosen tab5 removeClass chosen tab6 removeClass show tabContents6 [/script] [script class=tab5 on=click] addClass show tabContents5 addClass chosen tab5 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass chosen tab1 removeClass chosen tab2 removeClass chosen tab3 removeClass chosen tab4 removeClass chosen tab6 removeClass show tabContents6 [/script] [script class=tab6 on=click] addClass show tabContents6 addClass chosen tab6 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass chosen tab1 removeClass chosen tab2 removeClass chosen tab3 removeClass chosen tab4 removeClass chosen tab5 [/script] [class=show] opacity: 1; transition: all 1.5s; z-index: 1; [/class] [class=scroll] width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; color: black; text-transform: lowercase; font-size: 12px; [/class] [class=textbox] font-family: Manrope; font-size: 12px; position: absolute; bottom: 25px; left: 30px; height: 250px; width: 360px; overflow-x: hidden; color: #333; white-space: pre-line; [/class] [class=line] position: absolute; width: 420px; height: 1px; background: #eee; bottom: 300px; left: 15px; [/class] [class=header] position: absolute; top: 20px; right: 20px; text-transform: uppercase; font-size: 50px; width: 400px; text-align: right; font-family: Manrope; letter-spacing: 1px; color: var(--main-colour); [/class] [class=tag] text-transform: uppercase; display: inline; font-size: 12px; letter-spacing: 1px; text-align: left; font-weight: 600; color: var(--main-colour); [/class] [class=chosen] color: white; background: #333; [/class]