08. KISSING CONST. [F2U]
misschainsawktn
- Created
- 1 year, 1 month ago
- Creator
- misschainsawktn
- Favorites
- 404
Profile
08. KISSING CONSTELLATIONS [F2U]
This code was made for Coder's Quarters April 2023 challenge!
Mobile Friendly
F2U
For All Users
For Relationships
Bootstrap + accents
Tabbed Layout
Requires some HTML knowledge
I LOVE YOU LAYOUT CHALLENGES
I originally wanted to do a character code with this layout, but then I thought "huh i kinda want to remake the flaviaria ship tab" and boom this code was born. the name didnt fit th's characters limit but thats alright i love it anyway
For the information inside and some styling elements, i took some inspiration from starstruckcoder's sunsets together! i absolutely recommend you check that one out, it's a long time favorite of mine hehshfvhfvj
ALSO, there's a little bug with the tabs i dont know how to fix... basically, with them being in two different divs, you might have two active buttons at once and be unable to go back to a tab if its button is active. HOWEVER, clicking on another button of the same section should fix it! im so sorry for the inconvenience orz
Featured characters are Flaviatis and Solaria! My silly little blorbos in love...
The code is in the tabs! Favs/comments if using are very appreciated, but not strictly required! ^^
Introduction
A quote from Character 1 here...
...A quote from Character 2 here.
Write something about your characters here; this is meant as a written introduction to their relationship. Feel free to go as in-depth as you'd like, the whole box will scroll. Also, the pictures to the side are sticky, and will follow this once it gets long! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
Characters
age . gender . pronouns . species . orientation . mbti .
Write something about the character here. This is meant as a short intro, or maybe a little personality blurb, and as a place to write about the character's feelings towards the other. Feel free to write as much as you'd like! The other box's height will match, and everything will scroll together if it gets too long. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Put a quote here, whether it's about the other or about themselves.
age . gender . pronouns . species . orientation . mbti .
Write something about the character here. This is meant as a short intro, or maybe a little personality blurb, and as a place to write about the character's feelings towards the other. Feel free to write as much as you'd like! The other box's height will match, and everything will scroll together if it gets too long. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Put a quote here, whether it's about the other or about themselves.
Dynamics
First Meeting
L orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales magna nec aliquam tempor. Ut maximus libero eget nisi vulputate rhoncus. Aenean interdum nisl ut neque aliquet, vitae laoreet diam placerat. Quisque et porta orci, quis ornare nisl. Integer rhoncus at felis eu pharetra. Nulla sagittis, sem et pulvinar pretium, eros lacus accumsan arcu, vitae aliquet sapien purus eget ante. Phasellus maximus, elit egestas sodales posuere, nunc turpis efficitur turpis, id fermentum nisl sapien eget turpis. Fusce sagittis velit non interdum lacinia. Suspendisse at pellentesque ex. Aenean eu iaculis lectus. Morbi laoreet, purus in tincidunt commodo, felis elit tristique enim, sit amet egestas tortor libero a arcu. Integer quis purus quis elit lacinia rutrum. Morbi porttitor, mauris id condimentum sollicitudin, justo leo dapibus metus, vel vulputate ipsum dolor tempor quam.
Suspendisse potenti. Ut justo magna, euismod maximus gravida vitae, scelerisque et magna. Maecenas auctor accumsan viverra. Maecenas nec urna nec nulla dapibus finibus. Integer consectetur neque arcu, pellentesque gravida turpis efficitur sit amet. Vivamus mauris nisl, commodo id ligula quis, vulputate tincidunt felis. In a condimentum lectus. Cras vestibulum tellus at tellus gravida dictum. Donec eu mauris at nibh ornare fermentum. Sed in feugiat eros, sed consectetur mi. Nam at sapien vestibulum, gravida erat eu, fermentum purus.
Header
P ellentesque efficitur viverra neque ac accumsan. Curabitur bibendum ultrices augue sed vulputate. Phasellus quis erat finibus, sagittis nibh ultricies, fermentum quam. Donec sed molestie ligula. Aliquam erat volutpat. Etiam sit amet orci et dui imperdiet malesuada. Fusce non orci leo. Phasellus consectetur ut nisl id elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis vestibulum nibh, non sodales purus ornare ut. Nunc mattis vehicula convallis. Proin pharetra molestie lectus, sit amet varius urna tempor ac. Nulla facilisi. Praesent eget tortor nulla. Maecenas faucibus dictum arcu, in auctor turpis pellentesque sed.
Mauris dictum nisl non aliquet lacinia. Pellentesque aliquam mi vel ipsum consequat efficitur. Sed eu lacus nibh. Quisque blandit est at posuere pretium. Maecenas interdum finibus euismod. Proin posuere tristique sem id tincidunt. Donec rutrum, felis et faucibus convallis, ex sem consectetur velit, id mollis magna ipsum nec est. Donec tellus massa, gravida et suscipit sed, commodo eu dui. Suspendisse placerat, eros vitae mollis efficitur, nisi libero pretium neque, quis fermentum arcu leo eget ante. Nam ut feugiat neque, dictum semper elit. Morbi lobortis bibendum nisi id efficitur. Fusce fermentum magna sed risus venenatis aliquet. In volutpat erat sit amet elementum tristique.
Maecenas auctor sit amet odio quis tempus. Vivamus et ullamcorper turpis, nec pulvinar massa. Ut aliquet, ex a pharetra ultricies, magna nisl blandit enim, finibus placerat lacus lorem eu ipsum. Aliquam in lacus eleifend, fringilla neque sed, tristique ex. Suspendisse eu ex quis nisi ullamcorper aliquam vitae ac felis. Phasellus quis ligula placerat, luctus nisi quis, dignissim nisl. Proin eget mi eu elit egestas sollicitudin ac sed magna. Ut in nisl libero. Nunc malesuada tortor in semper posuere.
Present Day
N unc ultrices pulvinar quam, at scelerisque turpis pharetra vehicula. Duis odio lacus, suscipit ac tristique viverra, semper quis nunc. Sed vulputate vehicula suscipit. In sodales tortor risus, quis aliquet purus vestibulum et. Mauris sodales volutpat est, nec elementum enim imperdiet ut. Donec vulputate mauris eu arcu scelerisque finibus. Donec aliquam metus lectus, at blandit nibh consequat in.
Nullam a massa eget arcu tristique placerat. Fusce et varius nisl, et consequat purus. Suspendisse vitae viverra risus. Fusce suscipit, libero et finibus semper, mi nulla congue nibh, id condimentum libero ex a urna. Fusce sollicitudin ultrices bibendum. Cras ac ante aliquet, fringilla lacus in, tincidunt neque. Quisque metus ex, pulvinar finibus luctus in, porttitor a lacus. Etiam rhoncus tellus vel ex semper fringilla. Nulla ullamcorper felis at urna aliquet varius. Nulla blandit quam in est fringilla, vitae tincidunt tellus ullamcorper. Cras ullamcorper ornare dui. Proin venenatis ut mauris vel interdum. Morbi eget neque ante. Quisque pretium fringilla libero, id suscipit urna sollicitudin eget. Aliquam in dolor enim. Nulla dignissim mauris arcu, pharetra tincidunt mi tempor et. Vestibulum nec ipsum et quam molestie fermentum. Fusce vitae auctor nulla, at tincidunt risus. Vestibulum eleifend turpis sit amet felis placerat maximus. Vestibulum varius condimentum nisl, dignissim euismod neque dapibus vel. Quisque ultrices diam sit amet urna rhoncus gravida. Mauris venenatis vitae felis sed pharetra. Donec non sem at mauris pulvinar elementum nec ut felis. Cras at accumsan magna, eget maximus est. Nunc tincidunt mattis convallis.
Trivia
- Write some trivia here. Lorem ipsum dolor sit amet.
- Write some more trivia here. There's no limit to how many you can add.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- LDuis sollicitudin elit sed tellus blandit viverra sed eget odio.
- Donec accumsan tempor lacus, et venenatis elit feugiat non.
- Duis porta eros et velit blandit dapibus.
Tropes
- Trope Name: a small explaination here, can be removed. Lorem ipsum dolor sit amet.
- Trope Name: a small explaination here, can be removed. Lorem ipsum dolor sit amet.
- Trope Name: a small explaination here, can be removed. Lorem ipsum dolor sit amet.
Gallery
Conversations
Event Name: You can use this little section to add some context to the conversation. This is sticky and will follow the text once you scroll.
Use this section to write what the character would say. This can be a single quote or part of a conversation; the choice is yours. There's no lenght limit, it can be as long or as short as you want. Feel free to adjust the font sizing too. You can switch up the character too btw, in case your other character is the one initiating the conversation. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
This is an example response! It follows the same rules and suggestions as the bigger guy over there, so no worries about that. The only difference is the icon being on the other side! I kinda don't like how shorter text looks but whatever.
Now that you know how to use these, have fun.
Event Name: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
Nunc ultrices pulvinar quam, at scelerisque turpis pharetra vehicula. Duis odio lacus, suscipit ac tristique viverra, semper quis nunc. Sed vulputate vehicula suscipit. In sodales tortor risus, quis aliquet purus vestibulum et. Mauris sodales volutpat est, nec elementum enim imperdiet ut. Donec vulputate mauris eu arcu scelerisque finibus. Donec aliquam metus lectus, at blandit nibh consequat in.
Nullam a massa eget arcu tristique placerat. Fusce et varius nisl, et consequat purus. Suspendisse vitae viverra risus. Fusce suscipit, libero et finibus semper, mi nulla congue nibh, id condimentum libero ex a urna. Fusce sollicitudin ultrices bibendum. Cras ac ante aliquet, fringilla lacus in, tincidunt neque. Quisque metus ex, pulvinar finibus luctus in, porttitor a lacus. Etiam rhoncus tellus vel ex semper fringilla. Nulla ullamcorper felis at urna aliquet varius. Nulla blandit quam in est fringilla, vitae tincidunt tellus ullamcorper.
Cras ullamcorper ornare dui. Proin venenatis ut mauris vel interdum. Morbi eget neque ante. Quisque pretium fringilla libero, id suscipit urna sollicitudin eget. Aliquam in dolor enim. Nulla dignissim mauris arcu, pharetra tincidunt mi tempor et. Vestibulum nec ipsum et quam molestie fermentum. Fusce vitae auctor nulla, at tincidunt risus. Vestibulum eleifend turpis sit amet felis placerat maximus. Vestibulum varius condimentum nisl, dignissim euismod neque dapibus vel. Quisque ultrices diam sit amet urna rhoncus gravida. Mauris venenatis vitae felis sed pharetra. Donec non sem at mauris pulvinar elementum nec ut felis. Cras at accumsan magna, eget maximus est. Nunc tincidunt mattis convallis.
Recent Images
No images.