Cradle.of.Desire.IC.Post

[comment]
Designed and coded by [USER=20950]@Nano[/USER].

Please do not remove the credits or claim the code as your own work.

If you found this code outside of my public workshop, please don't use it.
I'd greatly appreciate it if you used the version of the code in that thread.
If this code is not in the thread, that means I currently DO NOT wish for it to be used by other people.

[font=Fleur De Leah]cursive[/font]
[font=Nunito]sans-serif[/font]

[/comment][div=

/* <--------------------------------- general accents ---------------------------------> */

/* colors */
--Color01: #ccb4d3;
--Color02: #acc8f4;
--Color03: #faf1ab;
--Black: #555555;
--White: #fefefe;

/* fonts */
--TitleSize: 6.0em;
--HeaderFont: 'Fleur De Leah', cursive;
--HeaderSize: 3.5em;
--BodyFont: 'Nunito', sans-serif;
--BodySize: .9em;

/* <--------------------------------- images ---------------------------------> */
--mainIMG: url('https://i.imgur.com/kTfIaHV.png') center/auto 100% no-repeat;
--backgroundIMG: url('https://i.imgur.com/rDJ2piR.jpg') repeat;
--Constellation: url('https://i.imgur.com/VAbvfML.png') right bottom/contain no-repeat;

/* <--------------------------------- shell (don't touch) ---------------------------------> */

margin: 0 auto;
width: 100%;
min-width: 300px;
background: var(--backgroundIMG);
font-size: initial;
overflow: hidden;
position: relative;][comment]

---------- start of background ---------- >

[/comment][div=border-radius: 50%; width: 600px; aspect-ratio: 1; background-image: linear-gradient(145deg, var(--Color01), var(--Color02)); position: absolute; left: 50%; top: 100px; transform: translateX(-50%);][/div][div=width: 100%; background: var(--mainIMG); height: 600px; position: absolute; top: -50px;][/div][comment]

< ---------- end of background ----------

[/comment][comment]

---------- start of title wrapper ---------- >

[/comment][div=margin: 0 auto; width: 90%; height: 550px; display: flex; justify-content: center; align-items: center; position: relative;][div=font-size: initial; position: relative;][comment]

-------------------- start of main title -------------------- >

[/comment][div=font-family: var(--HeaderFont); font-size: var(--TitleSize); line-height: 50%; color: var(--White); text-transform: lowercase; -webkit-text-stroke: 1px var(--Black); text-stroke: 1px var(--Black);




/* title here -> */]Cradle of Desire[/div][comment]

< -------------------- end of main title --------------------

[/comment][comment]

-------------------- start of sub title -------------------- >

[/comment][div=padding: 4px 7px; font-family: var(--BodyFont); font-size: var(--BodySize); line-height: 100%; color: var(--Black); text-transform: uppercase; background: var(--Color03); position: absolute; right: 5px; bottom: -27px;




/* subtitle here -> */]Scene 001[/div][comment]

< -------------------- end of sub title --------------------

[/comment][/div][/div][comment]

< ---------- end of title wrapper ----------

[/comment][comment]

---------- start of post content box ---------- >

[/comment][div=margin: -125px auto 75px; border-radius: 10px; width: 100%; max-width: 700px; background: var(--Color03); position: relative;][div=margin-left: 7px; padding: min(10%, 50px); border-radius: 10px; width: calc(100% - 7px); background: var(--White); font-family: var(--BodyFont); font-size: var(--BodySize); line-height: 150%; color: var(--Black); text-align: justify; position: relative; overflow: hidden; box-sizing: border-box;




/* write text here -> */]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae tellus neque. Curabitur a felis placerat, dapibus libero in, sodales tellus. Nulla facilisi. Nullam non purus eu justo fermentum ornare at eu eros. Quisque aliquet justo ut dui ornare mollis. [div=display: inline; color: var(--Color01); font-weight: 700;]"Nullam at congue lacus, et ornare ante. Cras dignissim eros nec ex gravida, sed consectetur augue imperdiet."[/div] Nulla faucibus dui at metus lobortis, quis molestie ligula lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at placerat mauris. Nam at placerat elit. Phasellus nisl erat, cursus sed erat at, porttitor malesuada dolor. Etiam placerat sagittis dolor, quis posuere ipsum venenatis a. Pellentesque ut lectus nec mi tincidunt pulvinar. Duis at sollicitudin eros.

Fusce gravida at mauris non sollicitudin. Nullam eu odio at eros auctor mollis vitae sed dui. Sed bibendum diam quis augue gravida, nec placerat ligula gravida. Nulla eget ipsum nec arcu mollis consectetur vitae et nulla. Cras suscipit, odio vel laoreet gravida, sem arcu dapibus nulla, sit amet tristique nulla mi et lorem. Donec vitae lectus sapien. Fusce vehicula eu erat efficitur facilisis. Aliquam euismod lobortis turpis, non luctus nulla malesuada eget. Nunc accumsan pellentesque sapien, et varius ex molestie a. Quisque vel ornare neque. Nam sapien urna, placerat sed nulla accumsan, sodales euismod lacus. Nam laoreet, ipsum pretium sollicitudin volutpat, nisl nibh posuere est, eget fermentum sapien turpis nec dui. Quisque et sapien dictum est facilisis iaculis id nec nulla.[comment]

-------------------- start of decor -------------------- >

[/comment][div=background: var(--Constellation); opacity: .05; width: 75%; aspect-ratio: 2/1; position: absolute; bottom: -25px; right: -15px;][/div][comment]

< -------------------- end of decor --------------------

[/comment][/div][/div][comment]

< ---------- end of post content box ----------

[/comment][/div][comment]

---------- start of credits ---------- >

[/comment][border=0; padding: 0; margin-top: 5px; width: 100%; font-family: var(--mainfont); font-size: .6em; line-height: 100%; text-align: center; text-transform: uppercase; opacity: .6;]Code by Nano[comment][USER=20950]@Nano[/USER][/comment][/border][comment]

< ---------- end of credits ----------

[/comment]