Viewfinder.Code.Ver02

[comment]
Designed and coded by Nano.
Please do not remove the credits or claim the code as your own work.

[font=Poppins].[/font]
[font=Roboto Slab].[/font]
[font=Roboto].[/font]
[/comment][comment]

// accents
in the original code:
color01 = pink
color02 = blue
color03 = yellow
color04 = white //

[/comment][border=0; padding: 0;
     --color01: #fe42ad;
     --color02: #51f1e3;
     --color03: #ffde7d;
     --color04: #ffffff;
][border=0; margin: 50px auto; padding: 0; width: 100%; max-width: 600px; overflow: hidden; position: relative; font-size: initial;][comment]

// title + full name //

[/comment][border=0; padding: 25px 15px; width: calc(100% - 30px); background: var(--color01);][border=0; padding: 0; font-family: 'Roboto Slab', serif; color: var(--color02); line-height: 100%; font-size: 1.0em; text-align: right; text-transform: uppercase;]SomeTitle[/border][border=0; padding: 0; font-family: 'Poppins', sans-serif; color: var(--color03); line-height: 100%; font-size: 2.0em; font-weight: 700; text-align: right; text-transform: uppercase;]First Lastname[/border][/border][comment]

// main image //

[/comment][border=0; padding: 0; width: 100%; height: 300px; background: url('https://i.imgur.com/DFWM4iB.jpg') center/cover no-repeat;][/border][comment]

// black bar //

[/comment][border=0; padding: 0; width: 100%; height: 15px; background: var(--color01);][/border][comment]

// start of content section //

[/comment][border=0; padding: 20px; width: calc(100% - 40px); background: var(--color03);][comment]

// proficon (emote/icon/w.e. you want) + quote box (try to keep it relatively short)

[/comment][border=0; display: flex; flex-flow: row wrap; margin-left: -20px; padding: 0; width: calc(100% + 20px);][border=0; margin-left: 20px; margin-bottom: 20px; padding: 15px; width: calc(100% - 30px); min-width: 100px; flex: 1; background: var(--color04); pointer-events: none;][border=0; padding: 0; padding-top: 100%; width: 100%; background: url('https://i.imgur.com/7XDRUxn.jpg') center/cover no-repeat;][/border][/border][border=0; margin-left: 20px; margin-bottom: 20px; padding: 15px; width: calc(100% - 30px); min-width: 150px; height: 100px; flex: 4; background: var(--color04);][border=0; display: flex; align-items: center; justify-content: center; padding: 0; width: 100%; height: 100px; overflow: hidden;][border=0; padding: 0; font-family: 'Roboto', sans-serif; color:  var(--color02); line-height: 115%; font-size: 0.8em; text-align: justify; text-transform: uppercase;]as I continue to bloom in that artificial flower garden[/border][/border][/border][/border][comment]

// end of proficon // start of IC text //

[/comment][border=2px solid var(--color04); box-sizing: border-box; padding: 10px; width: 100%; position: relative;][border=0; top: -3px; left: 25px; right: 25px; padding: 0; width: calc(100% - 50px); height: 4px; background: var(--color03); position: absolute;][/border][border=0; bottom: -3px; left: 25px; right: 25px; padding: 0; width: calc(100% - 50px); height: 4px; background: var(--color03); position: absolute;][/border][border=0; padding: 0; font-family: 'Roboto', sans-serif; color: var(--color04); line-height: 125%; font-size: 0.9em; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique tellus id arcu dictum, vitae porttitor metus sollicitudin. Pellentesque vel finibus ligula. Nunc augue leo, ornare id libero eu, dapibus tempus massa. Nulla risus augue, molestie non placerat vel, sagittis vel sem. Vestibulum dapibus finibus nunc, id accumsan lectus iaculis non. Ut lacus turpis, semper et sem vel, tincidunt scelerisque nunc. Maecenas eleifend finibus dictum. Maecenas at cursus augue. Suspendisse dignissim, nunc eu accumsan tempor, leo urna lacinia nisl, sit amet congue velit purus quis ligula. Vestibulum sit amet eros quam. Cras felis nisi, facilisis quis fermentum eu, aliquam vitae ex. Fusce ut pharetra leo. Integer varius auctor enim, nec varius neque luctus ac.

[border=0; display: inline; padding: 0; color: var(--color01);]"Etiam nec mauris at eros rhoncus pulvinar."[/border] Vestibulum elit turpis, gravida vitae interdum vitae, feugiat sit amet justo. Etiam vehicula, eros vulputate volutpat suscipit, felis risus sagittis justo, non scelerisque erat eros id tellus. Nam sed tempus mi, ut finibus ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque vestibulum orci vitae ipsum cursus, a consequat purus pharetra. Quisque vehicula condimentum quam, quis vulputate ante mattis in. In posuere lectus at pulvinar rutrum. Vivamus in ante in lacus pellentesque imperdiet. Integer vulputate urna eros, a aliquet urna rhoncus vitae. Duis venenatis metus felis, sit amet commodo est euismod quis. Donec sodales orci at nisi aliquet, ut pulvinar erat gravida. In condimentum imperdiet neque, sit amet suscipit enim luctus at. Morbi viverra tellus non nibh pulvinar scelerisque.

Nullam fermentum fermentum leo quis tempor. Curabitur porta tortor ut sem blandit mollis. Morbi pellentesque felis at tempor aliquet. Proin quis ornare sapien. Maecenas a libero aliquet, sollicitudin risus a, iaculis justo. Mauris rhoncus semper blandit. Integer vehicula at lectus nec condimentum. Mauris porta at odio a maximus. Integer nunc velit, bibendum eu interdum ut, condimentum a neque. Mauris nec elit porta, ultricies mi sed, vulputate ligula.[comment]

Tags: [USER=20950]@Nano[/USER] @ anyone else

[/comment][/border][/border][/border][comment]

// end of contents // black bar + visible credit (please don't remove)

[/comment][border=0; padding: 15px 0; width: 100%; background: var(--color01); color: var(--color04); font-size: 0.6em; text-align: center; text-transform: uppercase;]Code By Nano[comment][USER=20950]@Nano[/USER] [/comment][/border][/border][/border]