MEMORYCATCHER. || made by phnx.

[border=0px; padding:20px; width: 100%; height:auto; line-height:0px; display:flex;

/* code requested & designed by minajesty on rpnation */
/* this code was made by phnx. please do not redistribute or claim as your own! */

/* fonts used: Shrikhand */

/* variables */

--background:#1c1c1c;
--text:#fff;
--border:#fff;
--photobackground:#ebebeb;
--tape:#ded9bd;

--photo1: url('https://i.pinimg.com/564x/43/62/b7/4362b7abe746818097f5869fbb0d9b7a.jpg');
--photo2: url('https://i.pinimg.com/236x/d8/0a/71/d80a7105dbc359adf3a925c06d76394c.jpg');]

[comment] // MAIN BOX // [/comment]
[border=0px; padding:0px; width:630px; height:400px; background-color:var(--background); margin:auto; display:flex; flex-flow:column nowrap;]
[border=0px; padding:0px; width:90%; height:90%; margin:auto; display:flex; flex-flow:column nowrap;]

[comment] || NAME || [/comment]
[border=0px; padding:0px; padding-top:20px; width:100%; height:17%; text-transform:uppercase; font-size:40px; font-weight:100; letter-spacing:5px;][font='Shrikhand']* name here![/font][/border]

[comment] || QUOTE || [/comment]
[border=0px; padding:10px; width:100%; height:8%; background-color:var(--border); border-radius:2px; color:var(--background); font-size:16px; font-weight:400; line-height:10px; text-transform:uppercase; box-sizing:border-box;][font='Shrikhand']" this is a quote. try to keep it short so it fits! "[/font][/border]


[comment] || PHOTOS + SCROLL || [/comment]
[border=0px; padding:0px; width:100%; height:78%; margin-left:15px;]
[border=0px; padding:0px; width:100%; height:95%; margin-top:3%; display: flex; flex-flow:row nowrap;]

[comment] ~ PHOTOS ~ [/comment]
[border=0px; padding:0px; width:58%; height:100%; display:flex; flex-flow: row nowrap;]

[comment] { PHOTO ONE } [/comment]
[border=0px; padding:0px; width:170px; height:190px; background-color:var(--photobackground); margin-top:60px; margin-left:-10px; transform:rotate(-7deg); z-index:2; box-shadow: 5px 5px 5px rgba(55, 55, 55, .2);]
[border=0px; padding:0px; width:140px; height:120px; background-color:var(--tape); clip-path:polygon(0 73%, 100% 74%, 83% 100%, 7% 100%); opacity:.9; margin:auto; margin-top:-105px; z-index:3;][/border][border=0px; padding:0px; width:150px; height:150px; background:var(--photo1); background-size:cover;margin:auto; z-index:1; margin-top:-5px;][/border][/border]

[comment] { PHOTO TWO } [/comment]
[border=0px; padding:0px; width:170px; height:190px; background-color:var(--photobackground); margin-top:30px; margin-left:-20px; transform:rotate(5deg); z-index:1; box-shadow: 5px 5px 5px rgba(55, 55, 55, .2);]
[border=0px; padding:0px; width:130px; height:100px; background-color:var(--tape); clip-path:polygon(0 70%, 100% 69%, 96% 100%, 13% 100%); opacity:.9; margin:auto; margin-top:-80px;][/border][border=0px; padding:0px; width:150px; height:150px; background:var(--photo2); background-size:cover; margin:auto; z-index:1; margin-top:-10px;][/border][/border]
[/border]

[comment] ~ SCROLL ~ [/comment]
[border=0px; padding:0px; width:42%; height:100%;][border=0px; padding:0px; width:100%; height:85%; margin-left:10px; margin-top:16px; border-left:2px solid var(--border);]
[border=0px; padding:0px; width:90%; height:113%; margin:auto; margin-left:15px; margin-top:-21px;][border=0px; padding:0px; width:100%; height:103%; overflow:hidden;][border=0px; padding:0px; width:108%; box-sizing:border-box; padding-right:30px; height:85%; font-weight:400; font-size:15px; pointer-events:auto; margin:auto; overflow-y:scroll; color:white; margin-top:20px; line-height:22px; padding-top:0px; text-align:justify; hyphens:auto; -webkit-hyphens:auto; word-spacing:-0.05em; text-size:20px; font-weight:700; font-family:serif;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus consectetur mi a lacinia. Nam ultricies nisi a nisl dapibus ullamcorper. Praesent tempus nulla nec mauris ultrices, ac consequat justo euismod. Ut eu volutpat velit. Vestibulum elementum sem sit amet tellus imperdiet ullamcorper. Praesent eget laoreet magna. Integer quis neque eu justo varius convallis. Etiam imperdiet tortor ac facilisis pretium. Suspendisse rutrum pharetra risus at venenatis. Donec vitae mi eget urna pellentesque tristique. Ut dapibus nisl sit amet sapien ultricies, ullamcorper rhoncus tellus rutrum. Maecenas sed scelerisque ipsum, vitae scelerisque diam. Nam nec velit odio.

Etiam ac ultrices sem, et ultricies urna. Donec ante nisl, imperdiet quis augue ut, rhoncus rhoncus urna. Donec faucibus ligula id bibendum lobortis. Cras euismod justo et orci dictum, in bibendum turpis dapibus. Donec vitae cursus purus. Sed sit amet fermentum sem. Cras viverra nec nulla vitae aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc at nisi bibendum, aliquam nunc quis, mollis velit. Etiam eu metus at metus egestas venenatis vel ac urna. Pellentesque maximus nisl vitae neque molestie, a facilisis risus consequat. Etiam semper non purus sit amet fermentum.

Duis odio nisi, porta vitae ligula nec, egestas varius velit. Morbi dictum rhoncus neque non posuere. Suspendisse sed nisl ut enim blandit sodales at sed massa. Nunc quis massa non sem ullamcorper dignissim ac id dui. Fusce euismod augue sit amet lacus vulputate, sed viverra orci varius. Fusce gravida suscipit sapien, vitae convallis elit vestibulum at. Nunc vel dictum magna, a commodo leo. Aliquam urna dolor, ullamcorper hendrerit enim eu, pharetra lobortis velit. Quisque ut velit diam. Nunc et ullamcorper eros.
[/border][/border][/border][/border]
[comment] ~ SCROLL  END ~ [/comment]

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

[border=0px; padding:0px; width:auto; height:auto; color:var(--text); font-size:11px; position:absolute; margin-left:540px; font-weight:300; margin-top:385px;]coded by phnx.[/border][/border][/border]