Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- [nobr]
- [div=display: none;][font=Kristi]font call[/font][font=Averia Serif Libre]font call[/font][font=Averia Libre]font call[/font][/div]
- [div=--bgIMG: url('https://placehold.co/1200x850?text=Landscape+Ratio');
- --darkColor: rgba(0, 0, 0, 1);
- --lightColor: rgba(255, 255, 255, 1);
- --blendColor: rgba(76, 6, 47, 1);
- --glowColor: rgba(255, 231, 233, 1);
- --aFont: 'Averia Serif Libre', serif;
- --mFont: 'Averia Libre', sans-serif;
- --sFont: 'Kristi', cursive;
- display: block;
- position: relative;
- width: 100%;
- height: clamp(600px,70vh,800px);
- box-sizing: border-box;
- overflow: hidden;
- background-size: cover;
- background-position: center center;
- isolation: isolate;]
- [div=position: absolute; width: calc(100% + 30px); height: calc(100% + 30px); left: -15px; top: -15px; background-image: linear-gradient(rgba(44, 44, 44, .2), rgba(44, 44, 44, .2)), var(--bgIMG); background-size: cover; background-position: center center; filter: blur(3px);] [/div]
- [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
- [div=display: block; position: relative; width: calc(100% + 50px); padding-right: 50px; box-sizing: border-box; height: 100%; overflow-x: hidden;
- overflow-y: scroll; scroll-snap-type: both mandatory;]
- [div=display: block; position: relative; height: 100%; width: 100%; scroll-snap-align: end; scroll-snap-stop: always; box-sizing: border-box; overflow: hidden;]
- [div=position: absolute; height: 100%; background: var(--darkColor); width: 5px; left: 25%; top: 0px; mix-blend-mode: darken;] [/div]
- [div=position: absolute; left: calc(25% + 5px); width: calc(75% - 5px); top: 50%; transform: translateY(-50%);]
- [div=display: block; font-size: 4rem; text-align: right; letter-spacing: .35em; text-transform: uppercase; font-family: var(--aFont); color: var(--lightColor); text-shadow: 0px 0px 10px var(--glowColor); padding: 25% 8% .5em 8%;]{title}[/div]
- [div=font-size: .9rem; display: inline; background: var(--darkColor); color: var(--lightColor); text-transform: uppercase; padding: 1px 5px; font-family: var(--aFont);]idk you fill this[/div][br][/br]
- [div=font-size: .9rem; display: inline; background: var(--darkColor); color: var(--lightColor); text-transform: uppercase; padding: 1px 5px; font-family: var(--aFont);]just copy this code to add[/div][br][/br]
- [div=font-size: .9rem; display: inline; background: var(--darkColor); color: var(--lightColor); text-transform: uppercase; padding: 1px 5px; font-family: var(--aFont);]or you could delete a couple[/div][br][/br]
- [/div]
- [/div]
- [div=display: block; position: relative; height: 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden;]
- [div=position: absolute; width: 100px; height: 100px; top: calc(23% + 5px); right: 10%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; color: var(--darkColor); font-family: var(--aFont); font-size: 3rem; mix-blend-mode: darken;]
- 01
- [/div]
- [div=position: absolute; top: 0px; height: 100%; left: 25%; width: 65%; background: var(--darkColor); mix-blend-mode: darken; transform: translate3d(0,0,0);]
- [div=position: absolute; width: 65%; height: 5px; background: var(--lightColor); top: 23%; right: 0%;] [/div]
- [div=position: absolute; width: 100px; height: 100px; background: var(--lightColor); top: calc(23% + 5px); right: 0%;] [/div]
- [div=position: absolute; width: 60%; color: var(--blendColor); font-size: 4rem; line-height: .9; text-align: right; right: 5%; bottom: 5%; font-family: var(--aFont); text-transform: uppercase; pointer-events: none;]
- {short quote or lyric}
- [/div]
- [/div]
- [div=position: absolute; top: 60%; right: 13.25%; color: var(--glowColor); font-size: 4rem; line-height: .9; text-transform: uppercase; font-family: var(--aFont); transform: translateY(-50%);]
- story
- [/div]
- [div=transform: translate(-50%,-50%); top: 45%; left: 27%; position: absolute; pointer-events: none; font-size: 0px; box-shadow: -25px -25px var(--darkColor); width: clamp(250px,25%,375px);]
- [img]https://i.imgur.com/g8EIlzs.jpg[/img]
- you can use any vertical ratio image
- [/div]
- [div=position: absolute; z-index: 3; height: 100%; left: 50%; transform: translateX(-50%); width: clamp(250px,40%,40%); top: 0px; overflow: hidden; box-sizing: border-box;]
- [div=display: block; width: calc(100% + 50px); height: 100%; padding-left: 3px; padding-right: 50px; overflow-x: hidden; overflow-y: scroll; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]
- [div=display: block; height: 30%;][/div]
- [div=display: block; margin-bottom: .5em;]TLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque mattis aliquam. Phasellus viverra quam sed nunc scelerisque vestibulum. Proin suscipit ante quis lorem ultricies dapibus. Nulla orci dui, elementum sit amet ligula ac, gravida imperdiet purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque bibendum velit at tortor pellentesque pharetra. Sed dapibus hendrerit nisi bibendum dictum. Morbi porta aliquam convallis. Aliquam erat volutpat. Ut eu diam vitae purus efficitur imperdiet. Aliquam laoreet volutpat eros, in lacinia risus porta eu. In a tortor arcu. Nunc consectetur tincidunt tellus in sagittis. [/div]
- [div=display: block; margin-bottom: .5em;]Vivamus tempus erat nec orci blandit, molestie ultricies quam pharetra. Nunc ut nisl vulputate, fringilla dui vel, gravida leo. Integer cursus orci ut suscipit ultricies. Aliquam ac ullamcorper est. In eros purus, pretium egestas orci vitae, porttitor mattis lacus. Etiam in sapien nisi. Nulla auctor sit amet lacus rhoncus ultrices. Morbi elementum odio eu ex rutrum, at consequat leo consectetur. Aliquam velit nisi, gravida eu mauris ac, mattis cursus turpis. Duis diam nulla, imperdiet quis nisl vitae, mollis ullamcorper nulla. Ut vitae tellus in arcu ornare dignissim eget eu neque. Suspendisse elementum libero quis nunc volutpat, ut tristique justo tincidunt. Duis nec velit euismod, gravida felis sit amet, pretium dolor. Morbi consequat sollicitudin quam, a facilisis est pharetra nec. Nulla facilisi. [/div][br][/br]
- [div=display: block; margin-bottom: .5em;]Curabitur ante tortor, ornare at tellus sit amet, semper iaculis ante. Donec interdum metus in imperdiet mattis. Aliquam vitae nisl nisl. In et tempor metus. Sed at orci a lorem varius bibendum ut eget nisl. Vivamus molestie nisl nec justo cursus pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Cras lobortis risus eu odio tempus sodales. Curabitur eu blandit leo. Fusce id lobortis eros. Ut ultricies consequat sapien a ultrices. Vestibulum vitae nisl libero. Duis tincidunt lacus non sem ornare facilisis. Fusce sit amet lectus vulputate, interdum massa non, malesuada justo. Proin ac posuere lorem. [/div]
- [div=display: block; margin-bottom: .5em;]Mauris in massa volutpat, dictum erat imperdiet, tincidunt lectus. Sed dapibus lacus id massa tincidunt, quis tincidunt nibh porttitor. Donec at ante quis diam consequat convallis. Sed auctor commodo odio, eu pretium elit efficitur eu. Donec porta, sem non eleifend vehicula, lorem sem pharetra libero, id mollis tortor orci in lorem. Praesent eleifend ultricies nunc, vitae gravida leo semper at. Sed porttitor et metus at auctor. Vestibulum non tincidunt nisi, et fringilla sem. Donec sagittis a eros tristique maximus. Vestibulum pellentesque sed justo eu commodo. Aliquam ut tristique justo. Nulla pharetra diam consequat sem pulvinar facilisis. [/div]
- [div=display: block; margin-bottom: .5em;]Nulla porta lobortis commodo. Nulla feugiat, nisl sed tincidunt ornare, tortor dui imperdiet urna, id lobortis nisi urna quis nisi. In hac habitasse platea dictumst. Morbi fermentum, ipsum ac fermentum cursus, lacus lacus feugiat ipsum, in sagittis magna mauris quis odio. Donec condimentum scelerisque erat id euismod. Integer porta neque eget urna blandit porta. Integer pellentesque pharetra ante. Phasellus scelerisque, felis id consectetur tempor, dolor nunc mattis dui, nec pellentesque leo libero et nunc. Proin cursus aliquet molestie. Maecenas eu faucibus erat, ut commodo nunc. Ut turpis purus, pretium quis convallis nec, hendrerit ac justo. Praesent aliquam mollis molestie. Vivamus dapibus, enim iaculis sollicitudin laoreet, sapien velit eleifend urna, non dapibus nunc est sit amet ex. Morbi id aliquet est. Sed rutrum mollis odio. [/div]
- [div=display: block; height: 8%;][/div]
- [/div]
- [/div]
- [/div]
- [div=display: block; height: 100%; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; box-sizing: border-box; position: relative;]
- [div=display: flex; flex-flow: row nowrap; height: calc(100% - 1em); width: 100%; overflow-y: hidden; overflow-x: scroll; gap: 15px; box-sizing: border-box; padding: 5% 0px 0px 1.5em; scroll-snap-type: both proximity;]
- [div=flex: 1 0 30%; min-width: 300px; display: block; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative;]
- [div=position: absolute; display: flex; flex-flow: column nowrap; justify-content: flex-end; top: 0px; left: 0px; height: 100%; width: calc(100% - 50px); background: var(--darkColor); text-transform: uppercase; writing-mode: vertical-lr; color: var(--blendColor); font-size: 3.75rem; line-height: .9; transform: rotate(180deg); font-family: var(--aFont); pointer-events: none; text-align: right; mix-blend-mode: darken;]
- role[br][/br]name here
- [/div]
- [div=position: absolute; top: 13%; left: 30%; width: 70%; padding-top: 95%; overflow: hidden; transform: translate3d(0,0,0); max-width: 300px; box-sizing:]
- [div=position: absolute; top: -10px; left: -10px; height: calc(100% + 20px); width: calc(100% + 20px); background-image: linear-gradient(rgba(44, 44, 44, .4), rgba(44, 44, 44, .4)), url(https://placehold.co/500x750?text=Vertical+Ratio); background-position: center center; background-size: cover; filter: blur(5px);] [/div]
- [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
- [div=position: absolute; height: calc(100% - 70px); width: calc(100% - 70px); top: 23px; left: 23px; background: url(https://placehold.co/500x750?text=Vertical+Ratio) no-repeat center center/cover; box-shadow: 25px 25px 0px var(--darkColor);] [/div]
- [/div]
- [div=position: absolute; bottom: 10%; left: 12.5%; width: calc(75% - 50px); box-sizing: border-box; overflow: hidden; height: 50%;]
- [div=display: block; position: relative; width: calc(100% + 50px); height: 100%; padding-right: 50px; overflow-x: hidden; overflow-y: auto; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Integer scelerisque eros sit amet elit finibus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]aliquet[/div]. Maecenas efficitur massa diam, in congue massa aliquam at. Maecenas pretium efficitur nulla, ut faucibus mi porta sit amet. Maecenas ornare ligula vel neque mollis, tempor aliquam lacus laoreet. In hac habitasse platea dictumst. Quisque vitae ex a magna convallis ultrices vitae non turpis. Integer varius metus nec sem sodales, vulputate pulvinar mauris consectetur. Pellentesque condimentum elit eu lorem vestibulum, vitae posuere ante imperdiet.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]facilisis[/div] pulvinar eleifend. Suspendisse interdum interdum elit, et iaculis nibh sollicitudin non. Morbi vel lectus eget dolor sagittis congue. Mauris viverra blandit varius. Nulla ut cursus est. Ut ac blandit felis.
- [/div][br][/br]
- [div=display: block; margin-bottom: .5em; width: 100%]
- [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]Donec[/div] risus tortor, elementum quis dui vel, ornare rhoncus ex.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Sed nec quam a lacus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]volutpat[/div] sodales sit amet ut ligula.
- [/div]
- [div=display: block; height: 30%;][/div]
- [/div]
- [/div]
- [/div]
- [div=flex: 1 0 30%; min-width: 300px; display: block; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative;]
- [div=position: absolute; display: flex; flex-flow: column nowrap; justify-content: flex-end; top: 0px; left: 0px; height: 100%; width: calc(100% - 50px); background: var(--darkColor); text-transform: uppercase; writing-mode: vertical-lr; color: var(--blendColor); font-size: 3.75rem; line-height: .9; transform: rotate(180deg); font-family: var(--aFont); pointer-events: none; text-align: right; mix-blend-mode: darken;]
- role[br][/br]name here
- [/div]
- [div=position: absolute; top: 13%; left: 30%; width: 70%; padding-top: 95%; overflow: hidden; transform: translate3d(0,0,0); max-width: 300px; box-sizing:]
- [div=position: absolute; top: -10px; left: -10px; height: calc(100% + 20px); width: calc(100% + 20px); background-image: linear-gradient(rgba(44, 44, 44, .4), rgba(44, 44, 44, .4)), url(https://placehold.co/500x750?text=Vertical+Ratio); background-position: center center; background-size: cover; filter: blur(5px);] [/div]
- [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
- [div=position: absolute; height: calc(100% - 70px); width: calc(100% - 70px); top: 23px; left: 23px; background: url(https://placehold.co/500x750?text=Vertical+Ratio) no-repeat center center/cover; box-shadow: 25px 25px 0px var(--darkColor);] [/div]
- [/div]
- [div=position: absolute; bottom: 10%; left: 12.5%; width: calc(75% - 50px); box-sizing: border-box; overflow: hidden; height: 50%;]
- [div=display: block; position: relative; width: calc(100% + 50px); height: 100%; padding-right: 50px; overflow-x: hidden; overflow-y: auto; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Integer scelerisque eros sit amet elit finibus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]aliquet[/div]. Maecenas efficitur massa diam, in congue massa aliquam at. Maecenas pretium efficitur nulla, ut faucibus mi porta sit amet. Maecenas ornare ligula vel neque mollis, tempor aliquam lacus laoreet. In hac habitasse platea dictumst. Quisque vitae ex a magna convallis ultrices vitae non turpis. Integer varius metus nec sem sodales, vulputate pulvinar mauris consectetur. Pellentesque condimentum elit eu lorem vestibulum, vitae posuere ante imperdiet.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]facilisis[/div] pulvinar eleifend. Suspendisse interdum interdum elit, et iaculis nibh sollicitudin non. Morbi vel lectus eget dolor sagittis congue. Mauris viverra blandit varius. Nulla ut cursus est. Ut ac blandit felis.
- [/div][br][/br]
- [div=display: block; margin-bottom: .5em; width: 100%]
- [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]Donec[/div] risus tortor, elementum quis dui vel, ornare rhoncus ex.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Sed nec quam a lacus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]volutpat[/div] sodales sit amet ut ligula.
- [/div]
- [div=display: block; height: 30%;][/div]
- [/div]
- [/div]
- [/div]
- [div=flex: 1 0 30%; min-width: 300px; display: block; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative;]
- [div=position: absolute; display: flex; flex-flow: column nowrap; justify-content: flex-end; top: 0px; left: 0px; height: 100%; width: calc(100% - 50px); background: var(--darkColor); text-transform: uppercase; writing-mode: vertical-lr; color: var(--blendColor); font-size: 3.75rem; line-height: .9; transform: rotate(180deg); font-family: var(--aFont); pointer-events: none; text-align: right; mix-blend-mode: darken;]
- role[br][/br]name here
- [/div]
- [div=position: absolute; top: 13%; left: 30%; width: 70%; padding-top: 95%; overflow: hidden; transform: translate3d(0,0,0); max-width: 300px; box-sizing:]
- [div=position: absolute; top: -10px; left: -10px; height: calc(100% + 20px); width: calc(100% + 20px); background-image: linear-gradient(rgba(44, 44, 44, .4), rgba(44, 44, 44, .4)), url(https://placehold.co/500x750?text=Vertical+Ratio); background-position: center center; background-size: cover; filter: blur(5px);] [/div]
- [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
- [div=position: absolute; height: calc(100% - 70px); width: calc(100% - 70px); top: 23px; left: 23px; background: url(https://placehold.co/500x750?text=Vertical+Ratio) no-repeat center center/cover; box-shadow: 25px 25px 0px var(--darkColor);] [/div]
- [/div]
- [div=position: absolute; bottom: 10%; left: 12.5%; width: calc(75% - 50px); box-sizing: border-box; overflow: hidden; height: 50%;]
- [div=display: block; position: relative; width: calc(100% + 50px); height: 100%; padding-right: 50px; overflow-x: hidden; overflow-y: auto; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Integer scelerisque eros sit amet elit finibus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]aliquet[/div]. Maecenas efficitur massa diam, in congue massa aliquam at. Maecenas pretium efficitur nulla, ut faucibus mi porta sit amet. Maecenas ornare ligula vel neque mollis, tempor aliquam lacus laoreet. In hac habitasse platea dictumst. Quisque vitae ex a magna convallis ultrices vitae non turpis. Integer varius metus nec sem sodales, vulputate pulvinar mauris consectetur. Pellentesque condimentum elit eu lorem vestibulum, vitae posuere ante imperdiet.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]facilisis[/div] pulvinar eleifend. Suspendisse interdum interdum elit, et iaculis nibh sollicitudin non. Morbi vel lectus eget dolor sagittis congue. Mauris viverra blandit varius. Nulla ut cursus est. Ut ac blandit felis.
- [/div][br][/br]
- [div=display: block; margin-bottom: .5em; width: 100%]
- [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]Donec[/div] risus tortor, elementum quis dui vel, ornare rhoncus ex.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Sed nec quam a lacus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]volutpat[/div] sodales sit amet ut ligula.
- [/div]
- [div=display: block; height: 30%;][/div]
- [/div]
- [/div]
- [/div]
- [div=flex: 1 0 30%; min-width: 300px; display: block; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative;]
- [div=position: absolute; display: flex; flex-flow: column nowrap; justify-content: flex-end; top: 0px; left: 0px; height: 100%; width: calc(100% - 50px); background: var(--darkColor); text-transform: uppercase; writing-mode: vertical-lr; color: var(--blendColor); font-size: 3.75rem; line-height: .9; transform: rotate(180deg); font-family: var(--aFont); pointer-events: none; text-align: right; mix-blend-mode: darken;]
- role[br][/br]name here
- [/div]
- [div=position: absolute; top: 13%; left: 30%; width: 70%; padding-top: 95%; overflow: hidden; transform: translate3d(0,0,0); max-width: 300px; box-sizing:]
- [div=position: absolute; top: -10px; left: -10px; height: calc(100% + 20px); width: calc(100% + 20px); background-image: linear-gradient(rgba(44, 44, 44, .4), rgba(44, 44, 44, .4)), url(https://placehold.co/500x750?text=Vertical+Ratio); background-position: center center; background-size: cover; filter: blur(5px);] [/div]
- [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
- [div=position: absolute; height: calc(100% - 70px); width: calc(100% - 70px); top: 23px; left: 23px; background: url(https://placehold.co/500x750?text=Vertical+Ratio) no-repeat center center/cover; box-shadow: 25px 25px 0px var(--darkColor);] [/div]
- [/div]
- [div=position: absolute; bottom: 10%; left: 12.5%; width: calc(75% - 50px); box-sizing: border-box; overflow: hidden; height: 50%;]
- [div=display: block; position: relative; width: calc(100% + 50px); height: 100%; padding-right: 50px; overflow-x: hidden; overflow-y: auto; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Integer scelerisque eros sit amet elit finibus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]aliquet[/div]. Maecenas efficitur massa diam, in congue massa aliquam at. Maecenas pretium efficitur nulla, ut faucibus mi porta sit amet. Maecenas ornare ligula vel neque mollis, tempor aliquam lacus laoreet. In hac habitasse platea dictumst. Quisque vitae ex a magna convallis ultrices vitae non turpis. Integer varius metus nec sem sodales, vulputate pulvinar mauris consectetur. Pellentesque condimentum elit eu lorem vestibulum, vitae posuere ante imperdiet.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]facilisis[/div] pulvinar eleifend. Suspendisse interdum interdum elit, et iaculis nibh sollicitudin non. Morbi vel lectus eget dolor sagittis congue. Mauris viverra blandit varius. Nulla ut cursus est. Ut ac blandit felis.
- [/div][br][/br]
- [div=display: block; margin-bottom: .5em; width: 100%]
- [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]Donec[/div] risus tortor, elementum quis dui vel, ornare rhoncus ex.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Sed nec quam a lacus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]volutpat[/div] sodales sit amet ut ligula.
- [/div]
- [div=display: block; height: 30%;][/div]
- [/div]
- [/div]
- [/div]
- [div=flex: 1 0 30%; min-width: 300px; display: block; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative;]
- [div=position: absolute; display: flex; flex-flow: column nowrap; justify-content: flex-end; top: 0px; left: 0px; height: 100%; width: calc(100% - 50px); background: var(--darkColor); text-transform: uppercase; writing-mode: vertical-lr; color: var(--blendColor); font-size: 3.75rem; line-height: .9; transform: rotate(180deg); font-family: var(--aFont); pointer-events: none; text-align: right; mix-blend-mode: darken;]
- role[br][/br]name here
- [/div]
- [div=position: absolute; top: 13%; left: 30%; width: 70%; padding-top: 95%; overflow: hidden; transform: translate3d(0,0,0); max-width: 300px; box-sizing:]
- [div=position: absolute; top: -10px; left: -10px; height: calc(100% + 20px); width: calc(100% + 20px); background-image: linear-gradient(rgba(44, 44, 44, .4), rgba(44, 44, 44, .4)), url(https://placehold.co/500x750?text=Vertical+Ratio); background-position: center center; background-size: cover; filter: blur(5px);] [/div]
- [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
- [div=position: absolute; height: calc(100% - 70px); width: calc(100% - 70px); top: 23px; left: 23px; background: url(https://placehold.co/500x750?text=Vertical+Ratio) no-repeat center center/cover; box-shadow: 25px 25px 0px var(--darkColor);] [/div]
- [/div]
- [div=position: absolute; bottom: 10%; left: 12.5%; width: calc(75% - 50px); box-sizing: border-box; overflow: hidden; height: 50%;]
- [div=display: block; position: relative; width: calc(100% + 50px); height: 100%; padding-right: 50px; overflow-x: hidden; overflow-y: auto; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Integer scelerisque eros sit amet elit finibus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]aliquet[/div]. Maecenas efficitur massa diam, in congue massa aliquam at. Maecenas pretium efficitur nulla, ut faucibus mi porta sit amet. Maecenas ornare ligula vel neque mollis, tempor aliquam lacus laoreet. In hac habitasse platea dictumst. Quisque vitae ex a magna convallis ultrices vitae non turpis. Integer varius metus nec sem sodales, vulputate pulvinar mauris consectetur. Pellentesque condimentum elit eu lorem vestibulum, vitae posuere ante imperdiet.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]facilisis[/div] pulvinar eleifend. Suspendisse interdum interdum elit, et iaculis nibh sollicitudin non. Morbi vel lectus eget dolor sagittis congue. Mauris viverra blandit varius. Nulla ut cursus est. Ut ac blandit felis.
- [/div][br][/br]
- [div=display: block; margin-bottom: .5em; width: 100%]
- [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]Donec[/div] risus tortor, elementum quis dui vel, ornare rhoncus ex.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Sed nec quam a lacus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]volutpat[/div] sodales sit amet ut ligula.
- [/div]
- [div=display: block; height: 30%;][/div]
- [/div]
- [/div]
- [/div]
- [div=flex: 1 0 30%; min-width: 300px; display: block; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative;]
- [div=position: absolute; display: flex; flex-flow: column nowrap; justify-content: flex-end; top: 0px; left: 0px; height: 100%; width: calc(100% - 50px); background: var(--darkColor); text-transform: uppercase; writing-mode: vertical-lr; color: var(--blendColor); font-size: 3.75rem; line-height: .9; transform: rotate(180deg); font-family: var(--aFont); pointer-events: none; text-align: right; mix-blend-mode: darken;]
- role[br][/br]name here
- [/div]
- [div=position: absolute; top: 13%; left: 30%; width: 70%; padding-top: 95%; overflow: hidden; transform: translate3d(0,0,0); max-width: 300px; box-sizing:]
- [div=position: absolute; top: -10px; left: -10px; height: calc(100% + 20px); width: calc(100% + 20px); background-image: linear-gradient(rgba(44, 44, 44, .4), rgba(44, 44, 44, .4)), url(https://placehold.co/500x750?text=Vertical+Ratio); background-position: center center; background-size: cover; filter: blur(5px);] [/div]
- [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
- [div=position: absolute; height: calc(100% - 70px); width: calc(100% - 70px); top: 23px; left: 23px; background: url(https://placehold.co/500x750?text=Vertical+Ratio) no-repeat center center/cover; box-shadow: 25px 25px 0px var(--darkColor);] [/div]
- [/div]
- [div=position: absolute; bottom: 10%; left: 12.5%; width: calc(75% - 50px); box-sizing: border-box; overflow: hidden; height: 50%;]
- [div=display: block; position: relative; width: calc(100% + 50px); height: 100%; padding-right: 50px; overflow-x: hidden; overflow-y: auto; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Integer scelerisque eros sit amet elit finibus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]aliquet[/div]. Maecenas efficitur massa diam, in congue massa aliquam at. Maecenas pretium efficitur nulla, ut faucibus mi porta sit amet. Maecenas ornare ligula vel neque mollis, tempor aliquam lacus laoreet. In hac habitasse platea dictumst. Quisque vitae ex a magna convallis ultrices vitae non turpis. Integer varius metus nec sem sodales, vulputate pulvinar mauris consectetur. Pellentesque condimentum elit eu lorem vestibulum, vitae posuere ante imperdiet.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]facilisis[/div] pulvinar eleifend. Suspendisse interdum interdum elit, et iaculis nibh sollicitudin non. Morbi vel lectus eget dolor sagittis congue. Mauris viverra blandit varius. Nulla ut cursus est. Ut ac blandit felis.
- [/div][br][/br]
- [div=display: block; margin-bottom: .5em; width: 100%]
- [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]Donec[/div] risus tortor, elementum quis dui vel, ornare rhoncus ex.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Sed nec quam a lacus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]volutpat[/div] sodales sit amet ut ligula.
- [/div]
- [div=display: block; height: 30%;][/div]
- [/div]
- [/div]
- [/div]
- [div=flex: 1 0 30%; min-width: 300px; display: block; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative;]
- [div=position: absolute; display: flex; flex-flow: column nowrap; justify-content: flex-end; top: 0px; left: 0px; height: 100%; width: calc(100% - 50px); background: var(--darkColor); text-transform: uppercase; writing-mode: vertical-lr; color: var(--blendColor); font-size: 3.75rem; line-height: .9; transform: rotate(180deg); font-family: var(--aFont); pointer-events: none; text-align: right; mix-blend-mode: darken;]
- role[br][/br]name here
- [/div]
- [div=position: absolute; top: 13%; left: 30%; width: 70%; padding-top: 95%; overflow: hidden; transform: translate3d(0,0,0); max-width: 300px; box-sizing:]
- [div=position: absolute; top: -10px; left: -10px; height: calc(100% + 20px); width: calc(100% + 20px); background-image: linear-gradient(rgba(44, 44, 44, .4), rgba(44, 44, 44, .4)), url(https://placehold.co/500x750?text=Vertical+Ratio); background-position: center center; background-size: cover; filter: blur(5px);] [/div]
- [div=position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: url(https://i.imgur.com/UdjBt1F.png); mix-blend-mode: soft-light; opacity: .5;] [/div]
- [div=position: absolute; height: calc(100% - 70px); width: calc(100% - 70px); top: 23px; left: 23px; background: url(https://placehold.co/500x750?text=Vertical+Ratio) no-repeat center center/cover; box-shadow: 25px 25px 0px var(--darkColor);] [/div]
- [/div]
- [div=position: absolute; bottom: 10%; left: 12.5%; width: calc(75% - 50px); box-sizing: border-box; overflow: hidden; height: 50%;]
- [div=display: block; position: relative; width: calc(100% + 50px); height: 100%; padding-right: 50px; overflow-x: hidden; overflow-y: auto; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box;]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Integer scelerisque eros sit amet elit finibus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]aliquet[/div]. Maecenas efficitur massa diam, in congue massa aliquam at. Maecenas pretium efficitur nulla, ut faucibus mi porta sit amet. Maecenas ornare ligula vel neque mollis, tempor aliquam lacus laoreet. In hac habitasse platea dictumst. Quisque vitae ex a magna convallis ultrices vitae non turpis. Integer varius metus nec sem sodales, vulputate pulvinar mauris consectetur. Pellentesque condimentum elit eu lorem vestibulum, vitae posuere ante imperdiet.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]facilisis[/div] pulvinar eleifend. Suspendisse interdum interdum elit, et iaculis nibh sollicitudin non. Morbi vel lectus eget dolor sagittis congue. Mauris viverra blandit varius. Nulla ut cursus est. Ut ac blandit felis.
- [/div][br][/br]
- [div=display: block; margin-bottom: .5em; width: 100%]
- [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]Donec[/div] risus tortor, elementum quis dui vel, ornare rhoncus ex.
- [/div]
- [div=display: block; margin-bottom: .5em; width: 100%]
- Sed nec quam a lacus [div=display: inline; background: var(--blendColor); text-transform: uppercase; padding: 1px 2px;]volutpat[/div] sodales sit amet ut ligula.
- [/div]
- [div=display: block; height: 30%;][/div]
- [/div]
- [/div]
- [/div]
- [/div]
- [div=position: absolute; font-family: var(--sFont); bottom: 10%; right: 5%; text-shadow: 0px 0px 10px var(--glowColor); color: var(--lightColor);font-size: 8rem; transform: rotate(-5deg); line-height: .8; text-align: right; pointer-events: none;]Roles[/div]
- [/div]
- [div=display: flex; position: relative; flex-flow: row wrap; height: 100%; padding-right: 50px; width: calc(100% + 50px); scroll-snap-align: start; scroll-snap-stop: always; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; scroll-snap-type: both mandatory;]
- [div=flex: .75 300px; height: 100%; position: relative; overflow: hidden; scroll-snap-align: end; scroll-snap-stop: always;]
- [div=position: absolute; height: 100%; width: 5px; left: 20%; mix-blend-mode: darken; background: var(--darkColor)] [/div]
- [div=position: absolute; height: 100%; top: 0px; left: calc(20% + 5px); width: calc(80% + 25px); overflow-x: hidden; overflow-y: scroll; padding-right: 30px; box-sizing: border-box;]
- [div=display: block; height: 15%;][/div]
- [div=display: block; margin-bottom: 25px; box-sizing: border-box; padding: 15px; background: var(--darkColor); color: var(--lightColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4;]Rules I guess[/div]
- [div=display: block; margin-bottom: 25px; box-sizing: border-box; padding: 15px; background: var(--darkColor); color: var(--lightColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4;]Or whatever you want.[/div]
- [div=display: block; margin-bottom: 25px; box-sizing: border-box; padding: 15px; background: var(--darkColor); color: var(--lightColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4;]wheeee [/div]
- [div=display: block; margin-bottom: 25px; box-sizing: border-box; padding: 15px; background: var(--darkColor); color: var(--lightColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at metus bibendum, vehicula justo nec, convallis tortor.[/div]
- [div=display: block; margin-bottom: 25px; box-sizing: border-box; padding: 15px; background: var(--darkColor); color: var(--lightColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4;]Morbi porttitor et tellus eu rutrum. Aliquam arcu quam, porttitor nec nisi id, porttitor maximus velit.[/div]
- [/div]
- [/div]
- [div=flex: 1.25 300px;] [/div]
- [div=flex: 2 300px; height: 100%; position: relative; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always;]
- [div=position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; background: var(--darkColor); mix-blend-mode: darken; transform: translate3d(0,0,0);]
- [div=position: absolute; width: 65%; height: 5px; background: var(--lightColor); top: 70%; left: 0%;] [/div]
- [div=position: absolute; width: 100px; height: 100px; color: var(--lightColor); font-family: var(--aFont); top: calc(70% + 5px); left: 0%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 3rem;]03[/div]
- [div=position: absolute; width: calc(100% - 160px); top: calc(70% + 35px); left: 130px; display: flex; flex-flow: row wrap; gap: 5px; font-family: var(--aFont); text-align: center; text-transform: uppercase;]
- [div=flex: 1 auto; background-color: var(--blendColor); padding: 5px 3px; box-sizing: border-box; font-weight: bold; color: var(--darkColor);]
- [url=https://i.imgur.com/tsQ1SEd.jpg][div=display: inline-block; color: var(--darkColor);]link[/div][/url]
- [/div]
- [div=flex: 1 auto; background-color: var(--blendColor); padding: 5px 3px; box-sizing: border-box; font-weight: bold; color: var(--darkColor);]
- [url=https://i.imgur.com/tsQ1SEd.jpg][div=display: inline-block; color: var(--darkColor);]link[/div][/url]
- [/div]
- [div=flex: 1 auto; background-color: var(--blendColor); padding: 5px 3px; box-sizing: border-box; font-weight: bold; color: var(--darkColor);]
- [url=https://i.imgur.com/tsQ1SEd.jpg][div=display: inline-block; color: var(--darkColor);]link[/div][/url]
- [/div]
- [div=flex: 1 auto; background-color: var(--blendColor); padding: 5px 3px; box-sizing: border-box; font-weight: bold; color: var(--darkColor);]
- [url=https://i.imgur.com/tsQ1SEd.jpg][div=display: inline-block; color: var(--darkColor);]link[/div][/url]
- [/div]
- [/div]
- [/div]
- [div=position: absolute; height: 55%; width: 100%; overflow-x: hidden; overflow-y: scroll; left: 30px; top: 7.5%; color: var(--lightColor); text-shadow: -1px -1px 0px var(--darkColor); font-family: var(--mFont); text-align: justify; font-size: 1rem; line-height: 1.4; box-sizing: border-box; padding-right: calc(40px + 1em); padding-left: 1.5em;]
- [div=display: block; margin-bottom: .5em;]IDK what do you wanna do. I used this as a GM notes area. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at metus bibendum, vehicula justo nec, convallis tortor. Nam dui enim, sodales nec justo eget, gravida ultrices turpis. Vivamus aliquam nulla ac sapien mattis rhoncus. Praesent sollicitudin enim a pharetra sollicitudin. Vestibulum vitae lectus suscipit, faucibus massa non, cursus orci. Nulla dui nibh, mollis eu fermentum nec, pellentesque a justo. Nulla ultricies ultrices congue.[/div]
- [div=display: block; margin-bottom: .5em;] Morbi porttitor et tellus eu rutrum. Aliquam arcu quam, porttitor nec nisi id, porttitor maximus velit. Aliquam tristique ante magna, eget aliquam dui vehicula et. Curabitur pellentesque nisl erat. Nulla lacus velit, feugiat porta nunc nec, placerat euismod purus. Sed auctor vel felis fermentum ornare. Pellentesque et mi sagittis ipsum facilisis tincidunt at iaculis justo. Duis consequat iaculis pellentesque. [/div]
- [div=display: block; margin-bottom: .5em;]Quisque cursus volutpat enim nec efficitur. Sed massa libero, rutrum ac volutpat sit amet, varius id dolor. Praesent porttitor vestibulum consequat. Etiam ac ultricies felis. Nam aliquet vulputate est non dictum. Aliquam a mauris mattis, pulvinar lacus vitae, ornare est. Aliquam finibus mi eget consectetur ornare. [/div]
- [div=display: block; margin-bottom: .5em;]Vivamus sagittis scelerisque dictum. Donec vulputate risus a iaculis pellentesque. In nisi turpis, placerat a auctor nec, rutrum iaculis ex. Maecenas vitae orci felis. Donec vel interdum odio. Pellentesque rhoncus mauris a erat molestie, ut aliquet felis dictum. Nunc vel nibh eget orci tempor consequat vitae vitae sem. [/div]
- [div=display: block; margin-bottom: .5em;]Aliquam et lectus dui. Maecenas augue eros, consequat a tristique eget, sollicitudin vel velit. Nam augue dolor, imperdiet ut tincidunt eget, vehicula in justo. In gravida nibh non leo pellentesque, ut molestie dui molestie. Donec lorem libero, feugiat sed sem vel, faucibus finibus nisl. Aliquam tempor, velit vel mattis lobortis, leo ipsum cursus metus, vitae bibendum neque metus et dui. Fusce at auctor enim, a scelerisque sapien. Fusce nec interdum odio, quis faucibus libero. Mauris leo ex, laoreet non ante nec, laoreet pellentesque mi. Proin sed fermentum turpis. Donec eget fermentum felis. Donec facilisis leo dapibus efficitur pharetra. In sodales, libero vel eleifend pharetra, lorem eros faucibus nibh, vitae tempor elit arcu at quam. Maecenas sed dignissim tortor. Vivamus sed dolor pulvinar, tincidunt diam at, dictum ex. [/div]
- [/div]
- [/div]
- [/div]
- [/div]
- [div=position: absolute; z-index: 4; bottom: 0px; left: 0px; width: 100%; background: var(--darkColor); font-family: var(--aFont); text-transform: uppercase; letter-spacing: .15em; font-size: .95rem; box-sizing: border-box; text-align: right; padding: 8px 3%; mix-blend-mode: darken;]
- [url=https://i.imgur.com/tsQ1SEd.jpg][div=display: inline-block; color: var(--lightColor);]{title}[/div][/url]
- [/div]
- [div=position: absolute; z-index: 5; top: 0px; left: 0px; height: 100%; background: var(--darkColor); font-family: var(--aFont); text-transform: uppercase; writing-mode: vertical-lr; font-size: .95rem; letter-spacing: .15em; box-sizing: border-box; padding: 0px 8px 15% 8px; gap: 5px; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; mix-blend-mode: darken;]
- [url=https://i.imgur.com/tsQ1SEd.jpg][div=display: inline-block; transform: rotate(180deg); color: var(--lightColor);]link[/div][/url]
- [url=https://i.imgur.com/tsQ1SEd.jpg][div=display: inline-block; transform: rotate(180deg); color: var(--lightColor);]link[/div][/url]
- [url=https://i.imgur.com/tsQ1SEd.jpg][div=display: inline-block; transform: rotate(180deg); color: var(--lightColor);]link[/div][/url]
- [url=https://i.imgur.com/tsQ1SEd.jpg][div=display: inline-block; transform: rotate(180deg); color: var(--lightColor);]link[/div][/url]
- [/div]
- [/div]
- [/nobr]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement