constellation
๐บ ๐๐๐๐๐ ๐๐๐บ๐
[class=container]width: 665px; height: 450px; margin: auto;[/class]
[class=left]position: absolute; width: 250px; height: 450px; background: #f3f3f3; overflow: hidden; border-radius: 6px;[/class]
[class=tabContents]position: absolute; width: 400px; height: 450px; margin-left: 265px; background-color: #f3f3f3; border-radius: 6px; animation-name: {post_id}tabenter; animation-duration: 1s; animation-fill-mode: both; transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);[/class]
[class=tabs]width: 250px; text-align: center; margin-top: -37px; transform: rotate(-7deg);[/class]
[class=tab]margin: 5px; width: 18px; height: 18px; text-align: center; border: 1px solid #262626; line-height: 18px; font-size: 11px; font-family: 'Righteous'; font-weight: bold; background: #F6F6F6; border-radius: 150px; padding: 7px; display: inline-block; color: #262626; transition: 1s;[/class]
[class=pulse]animation-name: {post_id}pulse; animation-duration: 0.5s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out;[/class]
[class=description]position: absolute; bottom: 0px; padding: 20px; width: 210px; height: 200px; letter-spacing: .5px; font-family: 'Montserrat', sans-serif; text-align: justify;[/class]
[class=chosentab]color: #800000;[/class]
[class=mainbox]padding: 20px 0 20px 20px; height: 410px; width: 380px; overflow: hidden;[/class]
[class=scroll]width: 100%; height: 100%; overflow-y: scroll; padding-right: 20px; font-family: 'Montserrat';[/class]
[class=character]width: 172.5px; height: 230px; background: #FFFFFF; display: inline-block; border-radius: 6px; overflow: hidden; margin-bottom: 10px;[/class]
[class=role]text-shadow: 0px -1px 2px #dfdfdf; width: 172.5px; text-align: center; font-size: 16px; margin-top: -24px; color: #800000; font-family: 'Montserrat'; transform: rotate(-6deg);[/class]
[class=roledesc]padding: 0px 0px 15px 11px; margin-top: 7px; width: 167.5px; height: 97px; overflow: hidden; text-align: justify; font-size: 11px;[/class]
[class=scroll2]width: 100%; height: 100%; overflow-y: scroll; padding-right: 15px; font-family: 'Montserrat';[/class]
[class=location]height: 200px; width: 360px; border-radius: 6px; background: url(https://billfish.org/wp-content/uploads/2019/08/placeholder-image.jpg); background-size: cover; background-position: 50% 50%; transition: 1s;[/class]
[class=locationborder]height: 200px; width: 360px; transition: 1px;[/class]
[class=locationdesc]margin-left: 20px; padding: 15px 0 15px 15px; width: 185px; overflow: hidden; height: 170px; opacity: 0; color: #fff; text-align: justify; transition: 1s; background-color: rgba(0,0,0,0.7); font-size: 12px; word-spacing: 3px; white-space: pre-line;[/class]
[class name="tab" state="hover"]
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
transition: 1s;
color: #800000;
animation-name: {post_id}pulse;
animation-duration: 0.5s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
[/class]
[class name=location state=hover]transition: 1s; filter: grayscale(100%);[/class]
[class name=town state=hover]opacity: 1; transition: 1s;[/class]
[class name=docks state=hover]opacity: 1; transition: 1s;[/class]
[class name=police state=hover]opacity: 1; transition: 1s;[/class]
[class name=nightclub state=hover]opacity: 1; transition: 1s;[/class]
[class name=lighthouse state=hover]opacity: 1; transition: 1s;[/class]
[class name=cabin state=hover]opacity: 1; transition: 1s;[/class]
[class name=house state=hover]opacity: 1; transition: 1s;[/class]
[class name=marina state=hover]opacity: 1; transition: 1s;[/class]
[class name=josie state=hover]opacity: 1; transition: 1s;[/class]
[class name=father state=hover]opacity: 1; transition: 1s;[/class]
[class name=mother state=hover]opacity: 1; transition: 1s;[/class]
[class name=chief state=hover]opacity: 1; transition: 1s;[/class]
[script class=tab1 on=click]
hide tabContents02
hide tabContents03
hide tabContents04
hide tabContents05
slideDown 1000 tabContents01
addClass chosentab
addClass pulse tab1
removeClass chosentab tab2
removeClass chosentab tab3
removeClass chosentab tab4
removeClass chosentab tab5
removeClass pulse tab2
removeClass pulse tab3
removeClass pulse tab4
removeClass pulse tab5
[/script]
[script class=tab2 on=click]
hide tabContents01
hide tabContents03
hide tabContents04
hide tabContents05
slideDown 1000 tabContents02
addClass chosentab
addClass pulse tab2
removeClass chosentab tab1
removeClass chosentab tab3
removeClass chosentab tab4
removeClass chosentab tab5
removeClass pulse tab1
removeClass pulse tab3
removeClass pulse tab4
removeClass pulse tab5
[/script]
[script class=tab3 on=click]
hide tabContents01
hide tabContents02
hide tabContents04
hide tabContents05
slideDown 1000 tabContents03
addClass chosentab
addClass pulse tab3
removeClass chosentab tab1
removeClass chosentab tab2
removeClass chosentab tab4
removeClass chosentab tab5
removeClass pulse tab1
removeClass pulse tab2
removeClass pulse tab4
removeClass pulse tab5
[/script]
[script class=tab4 on=click]
hide tabContents01
hide tabContents02
hide tabContents03
hide tabContents05
slideDown 1000 tabContents04
addClass chosentab
addClass pulse tab4
removeClass chosentab tab1
removeClass chosentab tab2
removeClass chosentab tab3
removeClass chosentab tab5
removeClass pulse tab1
removeClass pulse tab2
removeClass pulse tab3
removeClass pulse tab5
[/script]
[script class=tab5 on=click]
hide tabContents01
hide tabContents02
hide tabContents03
hide tabContents04
slideDown 1000 tabContents05
addClass chosentab
addClass pulse tab5
removeClass chosentab tab1
removeClass chosentab tab2
removeClass chosentab tab3
removeClass chosentab tab4
removeClass pulse tab1
removeClass pulse tab2
removeClass pulse tab3
removeClass pulse tab4
[/script]
[div class=container]
[div class=left]
[div class=tabs]
[div class="tab tab2"][/div][div class=circle][/div] [div class="tab tab3"][/div][div class=circle][/div] [div class="tab tab4"][/div][div class=circle][/div] [div class="tab tab5"][/div][/div][/div]
[div class=description][div class="tab tab1 pulse chosentab"]
[div class=circle]Veiled in Mystery!
a genre-bender, romantic mystery
a 'corrupt small town' story
Current Chapter
chapter one ;
missing person
[/div][/div]
[div class="tabContents tabContents01"][div class=mainbox][div class=scroll style="white-space: pre-line; text-align: justify; font-size: 12px; margin-left: -2px;"]missing person
The Story
Marriage isn't a ring worn or a paper signed. It is not something endured, but savoured. It is the union of two hearts beating as one, each that would sacrifice for the other's happiness and wellbeing. Marriage is the blessing we give to one another, an eternal bond of soul-mates.
After hectic days of planning, today, we finally gather to celebrate the wedding of Benjamin Hearst and Josephine Fischer. Wedding bells are tolling, guests await and Benjamin stands at the top of the alter, only to discover that there will be no vows, no ring exchange, no "you may now kiss the bride"... because Josie is nowhere to be seen.
Will these eight be able to track down one missing bride and reveal the secrets of this strange town?
A wedding awaits you in Harwood Heights, a town shrouded in fog and mysteryโฆ[/div][/div][/div]
[div class="tabContents tabContents02" style="display: none;"][div class=mainbox][div class=scroll]Main Characters
[div class=character][div class=role]the best friend.[/div]
[div class=roledesc][div class=scroll2]Clara Marie Avelino and Josie Fischer were very close friends from their college years, however, stopped talking to each other after graduation. It wasn't until Josie sent out the wedding invitations that the two got back in touch and Clara believes that Josie was rushing too quickly into the marriage. She is friendly and trusting, though can be quite assertive when people treat her or her friends poorly.[/div][/div][/div][div class=character style="margin-left: 15px;"][div class=role]the fiancรฉ.[/div]
[div class=roledesc][div class=scroll2]Benjamin Leo Hearst is the heir and eldest of two to his family name. To the dismay of his family, he was engaged to Josie Fischer, whom the rest of his family suspected was a gold digger given her working class roots. He comes off as very aloof and tends to be angered easily when things don't go his way.[/div][/div][/div]
[div class=character][div class=role]the best man.[/div]
[div class=roledesc][div class=scroll2]Rafael Emilien Armand is a defence lawyer and comes from the second richest family in Harwood Heights. The Armand family and Hearst family have always been rivals, however despite this, Rafael is still friendly with Benjamin. It was expected for Rafael to be the Benji's best man due to their history. He is a kind, flitarious soul that is often very helpful.[/div][/div][/div][div class=character style="margin-left: 15px;"][div class=role]the maid of honour.[/div]
[div class=roledesc][div class=scroll2]Gracee Mae Armand is Rafael's sister and Josie's maid of honour. Despite making everyone believe that she and Josie are good friends, the two actually do not get along for reasons unknown. Gracee is rude, condescending and hostile, always making remarks about people's status. If you ask her why she is so mean, she will answer that she is simply realistic and honest.[/div][/div][/div]
[div class=character][div class=role]the fiancรฉ's sister.[/div]
[div class=roledesc][div class=scroll2]Charlotte Anne Hearst is the younger sister of Benjamin Hearst. Unlike her parents, she was explicit and open about her contempt for her brother's fiancรฉe, whom she perceived to be a gold digger. She has a slight alcoholic problem and is highly jealous of Benjamin, given that he is loved by the people of Harwood Heights while she is seen as the "family loser". She has derogatory views towards people who have a lower social status than her family.[/div][/div][/div][div class=character style="margin-left: 15px;"][div class=role]the bride's brother.[/div]
[div class=roledesc][div class=scroll2]Lukas Fischer is the older brother of Josephine, however, this is not known as Josie never mentions him, presumably due to his criminal background. He was the only immediate family member of Josieโs to attend the wedding and wasn't very ecstatic about it considering his past with the Hearst family. Lukas is shown to be easily irritated and often angered, though this is fitting given the situations he has found himself in. Despite all that, he is protective of Josie.[/div][/div][/div]
[div class=character style="margin-bottom: -10px;"][div class=role]experienced deputy.[/div]
[div class=roledesc][div class=scroll2]Connor McCarthy is a deputy of the Harwood Heights Police Department and has been for a very long time now. He can be quite timid and obedient towards his chief, often dim-witted given that he says and does things that makes him and the rest look foolish. He is known as the Chief's pet and is partnered with Franchesca.[/div][/div][/div][div class=character style="margin-left: 15px; margin-bottom: -10px;"][div class=role]newbie deputy.[/div]
[div class=roledesc][div class=scroll2]Evelyn Rosalie Clarke has been a deputy in the Harwood Heights Police force for a month now, coming from a rather small state in the western side of the USA. She is incredibly dedicated to her work and has a strong believe in justice. She often tends to disagree with her boss due to being discriminated against by him (and many others) for being a woman on a police force filled with men.[/div][/div][/div][/div][/div][/div]
[div class="tabContents tabContents03" style="display: none;"][div class=mainbox][div class=scroll]Side Characters
[div class=location style="background: url(https://i.imgur.com/wXYyxgb.jpg); background-size: cover; background-position: 50% 50%; margin-bottom: 20px;"][div class="locationdesc josie"][div class=scroll]Josephine Fischer
Josephine Fischer is the star of the show. She is the fiancรฉe of Benjamin Hearst, though the relationship was tumultuous due to both Benjamin's family and her brother not approving of it. Though, despite this, she was very thrilled and excited for her wedding day.
Typically, she is usually very enthusiastic, upbeat and friendly. So, when it comes to the discovery that Josie is missing - everybody is shocked. Now it is down to these eight to figure out why and what happened to her.[/div][/div][/div]
[div class=location style="background: url(https://www.brownweinraub.com/wp-content/uploads/2017/09/placeholder.jpg); background-size: cover; background-position: 50% 50%; margin-bottom: 20px;"][div class="locationdesc father"][div class=scroll]The Father
Like his family, [name] cares more about his family's reputation than the well-being of others, including his son's fiancรฉe Josie, whom he looks down upon for being beneath him in social standing.
He is very influential given that he has control over many people, including the Police Chief and the District Attorney as allies. He is incredibly narcisstic and believes that his family own Harwood Heights and that everyone in the town should be grateful to him.[/div][/div][/div]
[div class=location style="background: url(https://www.brownweinraub.com/wp-content/uploads/2017/09/placeholder.jpg); background-size: cover; background-position: 50% 50%; margin-bottom: 20px;"][div class="locationdesc mother"][div class=scroll]The Mother
[Name] shares similar traits to her husband, only caring about her reputation and social status. She couldn't care less about Josephine and is only worried about the terrible reputation that she brings to the Hearst family. Despite this, she doesn't say anything for the sake of her son who is madly in love with Josie.[/div][/div][/div]
[div class=location style="background: url(https://i.imgur.com/EP2g6IH.jpg); background-size: cover; background-position: center top; margin-bottom: 20px;"][div class="locationdesc chief"][div class=scroll]Bill Perkins
Bill Perkins is the chief of Harwood Heights Police Department. He is rude, lazy and looks for any excuse to not do any police work. He treats his deputies very poorly, often yelling at them and assigning them menial tasks. It is heavily implied that he takes bribes from the Hearst family. He and [father] are old friends and it appears that Bill is corrupt given that he will only do a task with [father]โs approval.[/div][/div][/div]
More to come...
[/div][/div][/div]
[div class="tabContents tabContents04" style="display: none;"][div class=mainbox][div class=scroll]The Clues
No clues as of right now.[/div][/div][/div]
[div class="tabContents tabContents05" style="display: none;"][div class=mainbox][div class=scroll]Locations
[div class=location style="background: url(https://cdn.discordapp.com/attachments/628281887613255680/643855003500675082/image2.png); background-size: cover; background-position: 50% 50%; margin-bottom: 20px;"][div class="locationdesc town"][div class=scroll]Harwood Heights
Home to almost 7,000 people, Harwood Heights is a small, picturesque, seaside town located in Massachusetts, USA.
It was founded in the 17th century by a captain, also known as Pierce Hearst. He turned it into a town with trading connections to Europe and beyond. Harwood Heights first appeared on a map dating back to 1655. Over time, the society eventually segregated by income; the riches and poor living separately.
More recently, the Armand family moved into Harwood Heights, and the two wealthy families formed a tenuous relationship. However, despite the families becoming close enough (at least pubicly), there is often competition and tension between the two.[/div][/div][/div]
[div class=location style="background: url(https://media.discordapp.net/attachments/628281887613255680/643836003257286676/house.png); background-size: cover; background-position: 50% 50%; margin-bottom: 20px;"][div class="locationdesc house"][div class=scroll]Hearst Manor
The Hearst Manor is known to be the most expensive and largest house of all Harwood Heights. Though, of course, this is expected coming from the Hearst family. The manor was built almost three hundred years ago but it kept and upgraded whenever needed. It has, so far, housed every generation of the Hearst family.[/div][/div][/div]
[div class=location style="background: url(https://media.discordapp.net/attachments/628281887613255680/643835835900493824/docks.jpg); background-size: cover; background-position: 50% 50%; margin-bottom: 20px;"][div class="locationdesc docks"][div class=scroll]Harwood Heights Docks
Harwood Heights Docks is the least safe and picturesque part of town, referred to by many as the 'bad' neighbourhood. The docks are salt-laden and swollen with water; they house barnacle-encrusted fishing boats, and other ships that have seen better days. The only life usually seen around the docks are fishermen.[/div][/div][/div]
[div class=location style="background: url(https://media.discordapp.net/attachments/628281887613255680/643835850165190666/marina.png); background-size: cover; background-position: 50% 50%; margin-bottom: 20px;"][div class="locationdesc marina"][div class=scroll]Harwood Heights Marina
On the opposite side of the lake, from the docks, is the Harwood Heights marina specially designed for pleasure yachts and boats. Alongside this is The West Quay, Harwood Height's oldest pub. It's neither fancy nor particularly memorable; its standout feature is that it is a pub pure and simple.[/div][/div][/div]
[div class=location style="background: url(https://media.discordapp.net/attachments/628281887613255680/643835838584848390/lighthouse.jpg); background-size: cover; background-position: 50% 50%; margin-bottom: 20px;"][div class="locationdesc lighthouse"][div class=scroll]The Lighthouse
Nobody really ever sees it on anymore, but the lighthouse is an important landmark in Harwood Height. It's become a popular place for kids to hang around until they're shooed away by the police. It's a great spot for crimes to take place on the down-low, but no one has to know... Right?[/div][/div][/div]
[div class=location style="background: url(https://media.discordapp.net/attachments/628281887613255680/643835845215911939/police_station.png); background-size: cover; background-position: 50% 50%; margin-bottom: 20px;"][div class="locationdesc police"][div class=scroll]Harwood Heights Police Department
Harwood Heights Police Department is dedicated to protecting and serving the people. The small police force is rather effective at keeping crime down in the Southside where drug trafficking occurs and other illicit activities that come secretly across the Northside boundary of Harwood Heights. Despite those minimal crimes, nothing big ever happens in Harwood Heights.[/div][/div][/div]
[div class=location style="background: url(https://media.discordapp.net/attachments/628281887613255680/643835838698094603/CLUB.jpg); background-size: cover; background-position: 50% 50%; margin-bottom: 20px;"][div class="locationdesc nightclub"][div class=scroll]Lights Nightclub
A simple name for a simple establishment - a two-story nightclub with a balcony that sports a vew like no other as well as a comfortable lounge. Lights Nightclub is a great place to spend on those Friday nights when you just can't catch a break from whatever stress you have going on. With multiple drinks to choose from at the decently priced bar as well as the latest remixes of your favourite tracks, everyone's bound to have a blast at this popular hangout.[/div][/div][/div]
[div class=location style="background: url(https://cdn.discordapp.com/attachments/628281887613255680/643879323425570816/cabins.png); background-size: cover; background-position: 50% 50%;"][div class="locationdesc cabin"][div class=scroll]Hearst Cabin
Owned by the wealthiest family in Harwood Heights, the Hearst Cabin is only a short distance away from the Hearst Manor. Surrounded by nothing but trees, as of right now, the cabin is empty and has been untouched for a very long time. This is most likely due to the creepy nature of being in the forest in the middle of no where.[/div][/div][/div][/div][/div][/div]
[/div][/div]
[animation=pulse]
[keyframe=0]
transform: scale(1);
[/keyframe]
[keyframe=50]
transform: scale(1.1);
[/keyframe]
[keyframe=100]
transform: scale(1);
[/keyframe]
[/animation]
[animation=tabenter]
[keyframe=0]
transform: scale(0);
opacity: 0;
[/keyframe]
[keyframe=100]
transform: scale(1);
opacity: 1;
[/keyframe]
[/animation]
Last edited: