MY RP Resources
Home
PAGE TITLE
<lj-raw>CUT TAG LINK HERE <span style="display:none;"><lj-cut></span><br> <center> <table style="font-family: verdana; font-size: 9px; line-height: 16px; color: #363636; letter-spacing: .5px; text-align: justify;"><tr> <td valign="top" style="width: 200px;"> <center> <img src="https://via.placeholder.com/250x300" style="width: 80px; background-color: rgba(189,189,189,.2); padding: 2px; border: 1px solid rgba(189,189,189,.5);"> <img src="https://via.placeholder.com/250x300" style="width: 80px; background-color: rgba(189,189,189,.2); padding: 2px; border: 1px solid rgba(189,189,189,.5);"> </center> <div style="padding: 10px;"> text1<br> </div> <div style="padding: 5px; background-color: rgba(189,189,189,.1); border: 1px solid rgba(189,189,189,.5); box-shadow: 0px 0px 2px rgba(189,189,189,.4);"> <b><i>lorem1</i></b> ☆ ☆ suspendisse interdum consectetur libero id faucibus nisl. mauris cursus mattis molestie a iaculis at. laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. </div> <div style="padding: 10px;"> text2 </div> <center> <img src="https://via.placeholder.com/400x250" style="width: 180px; padding: 2px; border: 1px solid rgba(189,189,189,.4); background-color: rgba(189,189,189,.2);"> </center> <div style="padding: 10px;"> ☆☆☆ sollicitudin nibh sit amet commodo nulla. donec enim diam vulputate ut pharetra. </div> </td><td valign="middle" style="width: 250px; padding-left: 15px;"> <b style="display: block; letter-spacing: 5px; box-shadow: inset 0px -5px rgba(189,189,189,.2); text-shadow: 2px 2px rgba(189,189,189,.5); text-align: center;"><i>title1</i></b> <span style="display: block; padding: 10px;"> <b style="color: rgba(189,189,189,1);">❝</b> viverra tellus in hac habitasse. urna id volutpat lacus laoreet non curabitur gravida.<br><br> <b style="color: rgba(189,189,189,1);">❝</b> <span style="background-color: rgba(189,189,189,.2); color: #111;">viverra tellus in hac habitasse.</span><br><br> <b style="color: rgba(189,189,189,1);">❝</b> viverra tellus in hac habitasse. urna id volutpat lacus laoreet non curabitur gravida. </span> <Br> <b style="display: block; letter-spacing: 5px; box-shadow: inset 0px -5px rgba(189,189,189,.2); text-shadow: 2px 2px rgba(189,189,189,.5); text-align: center;"><i>title2</i></b> <span style="display: block; padding: 10px;"> <span style="color: rgba(189,189,189,1);">☆</span> <i>artist</i> <a href="LINK" style="color: #111; border-bottom: 2px solid rgba(189,189,189,1);">song</a><br> </span> <Br> <b style="display: block; letter-spacing: 5px; box-shadow: inset 0px -5px rgba(189,189,189,.2); text-shadow: 2px 2px rgba(189,189,189,.5); text-align: center;"><i>title3</i></b> <span style="display: block; padding: 10px;"> suspendisse interdum consectetur libero id faucibus nisl. laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. mauris cursus mattis molestie a iaculis at. laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. </span> </td> <td valign="top" style="width: 200px; padding-left: 20px;"> <center> <img src="https://via.placeholder.com/100x150" style="width: 80px; background: rgba(189,189,189,.2); padding: 3px; border: 1px solid rgba(189,189,189,.5); margin-right: 10px;" align="left"> <br /> ☆ ☆ ☆ <br /> suspendisse interdum consectetur libero id faucibus nisl. mauris cursus <br /> ☆ ☆ ☆ </center> <br /> <div style="display: block; padding: 5px; background: rgba(189,189,189,.1); border: 1px solid rgba(189,189,189,.5); box-shadow: 0px 0px 2px 0px rgba(189,189,189,.4);"> lorem2 ☆ ☆ suspendisse interdum consectetur libero id faucibus nisl. mauris cursus mattis </div> <div style="padding: 15px;"> sollicitudin nibh sit amet commodo nulla. donec enim diam vulputate ut pharetra. laoreet suspendisse laoreet interdum consectetur. interdum consect libero. </div> <center> <img src="https://via.placeholder.com/100x150" style="width: 80px; background-color: rgba(189,189,189,.2); padding: 3px; border: 1px solid rgba(189,189,189,.5); margin-left: 10px;" align="right"> <br /> ☆ ☆ ☆ <br /> suspendisse interdum consectetur libero id faucibus nisl. mauris cursus <br /> ☆ ☆ ☆ </center> </td> </tr></table></center></lj-raw>
<lj-raw>CUT TAG LINK HERE <span style="display:none;"><lj-cut></span> <center> <table style="width: 580px; font-family: verdana; text-transform: lowercase; font-size: 9px; line-height: 16px; letter-spacing: .5px; color: #363636; text-align: justify;"> <tr> <td valign="top" style="width: 140px;"> <img src="https://via.placeholder.com/250x300" style="width: 140px; height: auto; padding: 2px; border: 1px solid rgba(189,189,189,.5); border-radius: 3px;"> <br /><br /> <i style="color: rgba(189,189,189,1);">lorem1</i> ipsum dolor sit amet, consectetur adipiscing. sed consequat volutpat est, nec efficitur nunc porttitor a. mauris at tincidunt purus, nec finibus magna. <br /><br /> <div style="height: 1px; background: linear-gradient(to right, rgba(189,189,189,.3), rgba(189,189,189,.6), rgba(189,189,189,.9));"></div> <br /> <b style="color: #111; text-shadow: 2px 2px rgba(189,189,189,.5);">★</b> thing1 <br /> <b style="color: #111; text-shadow: 2px 2px rgba(189,189,189,.5);">★</b> thing2 <br /> </td><td valign="top" style="width: 300px; padding-left: 20px;"> <span style="padding: 10px;"> <b style="display: block; text-align: right; letter-spacing: 5px; font-size: 8px; text-shadow: 2px 2px rgba(189,189,189,.5); ">title1</b> <div style="height: 1px; background: linear-gradient(to right, rgba(189,189,189,.3), rgba(189,189,189,.6), rgba(189,189,189,.9));"></div> <br /> lorem ipsum dolor sit amet, consectetur adipiscing elit. sed consequat volutpat est, nec efficitur nunc porttitor a. mauris at tincidunt purus. <br /><br /> <center> <img src="https://via.placeholder.com/250x250" style="width: 100px; padding: 2px; border: 1px solid rgba(189,189,189,.5); border-radius: 3px;"> <img src="https://via.placeholder.com/250x250" style="width: 100px; padding: 2px; border: 1px solid rgba(189,189,189,.5); border-radius: 3px;"> </center> <br /> lorem ipsum dolor sit amet, consectetur adipiscing elit. sed consequat volutpat est, nec efficitur nunc porttitor a. mauris at tincidunt purus. <br /><br /> <b style="display: block; text-align: right; letter-spacing: 5px; font-size: 8px; text-shadow: 2px 2px rgba(189,189,189,.5);">title2</b> <div style="height: 1px; background: linear-gradient(to right, rgba(189,189,189,.3), rgba(189,189,189,.6), rgba(189,189,189,.9));"></div> <br /><b style="color: #111; text-shadow: 2px 2px rgba(189,189,189,.5);">★</b> lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><b style="color: #111; text-shadow: 2px 2px rgba(189,189,189,.5);">★</b> mauris at tincidunt purus. lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </td><td valign="top" style="width: 120px; padding-left: 20px;"> <img src="https://via.placeholder.com/250x200" style="width: 120px; height: auto; padding: 2px; border: 1px solid rgba(189,189,189,.5); border-radius: 3px;"> <br /><br /> <div style="height: 1px; background: linear-gradient(to right, rgba(189,189,189,.3), rgba(189,189,189,.6), rgba(189,189,189,.9));"></div> <br /> <b style="color: #111; text-shadow: 2px 2px rgba(189,189,189,.5);">→</b> <a href="LINK" style="color: #111">link</a><br /> <b style="color: #111; text-shadow: 2px 2px rgba(189,189,189,.5);">→</b> <a href="LINK" style="color: #111">link</a><br /> <br /> <div style="height: 1px; background: linear-gradient(to right, rgba(189,189,189,.3), rgba(189,189,189,.6), rgba(189,189,189,.9));"></div> <br /> <center> <img src="https://via.placeholder.com/250x300" style="width: 55px; height: auto; padding: 2px; border: 1px solid rgba(189,189,189,.5); border-radius: 3px;"> <img src="https://via.placeholder.com/250x300" style="width: 55px; height: auto; padding: 2px; border: 1px solid rgba(189,189,189,.5); border-radius: 3px;"> </center> <br /> <div style="height: 1px; background: linear-gradient(to right, rgba(189,189,189,.3), rgba(189,189,189,.6), rgba(189,189,189,.9));"></div> <br /> <i style="color: #111; text-shadow: 2px 2px rgba(189,189,189,.5);">lorem2</i></font> conseq uat volu tpat est, nec efficitur nunc porttitor a. mauris at tincidunt purus </td></tr></table> </center> </lj-raw>
<lj-raw>CUT TAG LINK HERE <div style="display:none;"><lj-cut></div> <center> <div style="display: flex; width: 510px; font-family: verdana; text-transform: lowercase; font-size: 9px; line-height: 15pt; letter-spacing: .5px; color: #363636; text-align: justify;"> <div style="display: block; width: 240px;"> <img src="https://via.placeholder.com/250x80" style="width: 232px; padding: 3px; border: 1px solid rgba(189,189,189,.8); background: #FFF; box-shadow: 2px 2px rgba(189,189,189,.3);"> <br /><br /> <img src="https://via.placeholder.com/250x80" style="width: 232px; padding: 3px; border: 1px solid rgba(189,189,189,.8); background: #FFF; box-shadow: 2px 2px rgba(189,189,189,.3);"> <span style="display: block; padding: 10px;"> Suspendisse interdum consectetur <span style="color: rgba(189,189,189,.8);">libero id faucibus nisl</span>. Mauris cursus mattis molestie a iaculis at. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. </span> <span style="display: block; padding: 10px; border: 1px solid rgba(189,189,189,.4); background: rgba(189,189,189,.1); text-align: center;"> <a href="link" style="border-bottom: 1px solid rgba(189,189,189,.8); text-decoration: none; color: #111; font-size: 6px; text-transform: uppercase;"><b><i>link</i></b></a> <small>♡</small> something <br> <a href="link" style="border-bottom: 1px solid rgba(189,189,189,.8); text-decoration: none; color: #111; font-size: 6px; text-transform: uppercase;"><b><i>link</i></b></a> <small>♡</small> something <br> <a href="link" style="border-bottom: 1px solid rgba(189,189,189,.8); text-decoration: none; color: #111; font-size: 6px; text-transform: uppercase;"><b><i>link</i></b></a> <small>♡</small> something <br> </span> </div> <div style="display: block; width: 250px; margin-left: 20px;"> <span style="display: block; padding: 10px;"> Lorem <span style="border-bottom: 1px solid rgba(189,189,189,.8);">ipsum dolor sit amet</span>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sollicitudin nibh sit amet commodo nulla. </span> <span style="display: block; padding: 5px; border: 1px solid rgba(189,189,189,.4); background: rgba(189,189,189,.2); text-align: center;"> <a href="link" style="border-bottom: 1px solid #F2E2CD; text-decoration: none; color: #111; font-size: 6px; text-transform: uppercase;"><b><i>link</i></b></a> <small>♡</small> something <br> <a href="link" style="border-bottom: 1px solid #F2E2CD; text-decoration: none; color: #111; font-size: 6px; text-transform: uppercase;"><b><i>link</i></b></a> <small>♡</small> something <br> </span> <br /> <center> <img src="https://via.placeholder.com/250x250" style="width: 100px; padding: 3px; border: 1px solid rgba(189,189,189,.8); background: #FFF; box-shadow: 2px 2px rgba(189,189,189,.3);"><img src="https://via.placeholder.com/250x250" style="width: 100px; padding: 3px; border: 1px solid rgba(189,189,189,.8); background: #FFF; box-shadow: 2px 2px rgba(189,189,189,.3); margin-left: 10px;"> </center> <br /> <span style="display: block; color: rgba(189,189,189,.9);"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sollicitudin nibh sit amet commodo nulla. </span> </div> </div> </center> </lj-raw>
<lj-raw>CUT TAG LINK HERE <span style="display:none;"><lj-cut></span><br> <center><div style="display: flex; width: 740px; font-family: verdana; font-size: 9px; line-height: 15px; letter-spacing: .5px; color: #363636;"> <div style="width: 140px; display: flex; height: auto; justify-content: center; align-items: center; text-align: justify;"> <span style="display: block;"> suspen disse interdum conse ctetur libero id fauc ibus nisl. laoreet <i style="color: rgba(189,189,189,1);">suspen disse interdum consect etur</i> libero id faucibus nisl tincidunt. <br /><br /> <center> <span style="display: block; width: 130px; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); padding: 5px; text-align: justify;"> <i style="color: #111; border-bottom: 1px solid rgba(189,189,189,1);">lorem ipsum dolor sit amet?</i> consectetur libero id faucibus, mauris at tincidunt purus. </span> </center> <br /> mauris cur sus <i style="color: rgba(189,189,189,1);">mat tis</i> moles tie a iacul is at. <br /><br /> ♡ <a href="LINK HERE" style="text-decoration: none; color: #111; box-shadow: inset 0px -4px 0px 0px rgba(189,189,189,.5);">moles tie a iacul is at</a> </span> </div> <div style="width: 200px; padding-left: 20px;"> <img src="https://via.placeholder.com/350x220" style="width: 194px; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); margin-bottom: 5px; outline: 1px solid rgba(255,255,255,.5); outline-offset: -6px; padding: 2px;"> <b style="display: block; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); font-size: 7px; text-transform: uppercase;"><i>caption 1</i></B> <br /> <img src="https://via.placeholder.com/350x220" style="width: 194px; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); margin-bottom: 5px; outline: 1px solid rgba(255,255,255,.6); outline-offset: -6px; padding: 2px;"> <b style="display: block; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); font-size: 7px; text-transform: uppercase;"><i>caption 3</i></B> </div> <div style="width: 200px; padding-left: 12px;"> <img src="https://via.placeholder.com/350x220" style="width: 194px; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); margin-bottom: 5px; outline: 1px solid rgba(255,255,255,.6); outline-offset: -6px; padding: 2px;"> <b style="display: block; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); font-size: 7px; text-transform: uppercase;"><i>caption 2</i></B> <br /> <img src="https://via.placeholder.com/350x220" style="width: 194px; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); margin-bottom: 5px; outline: 1px solid rgba(255,255,255,.6); outline-offset: -6px; padding: 2px;"> <b style="display: block; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); font-size: 7px; text-transform: uppercase;"><i>caption 4</i></B> </div> <div style="width: 140px; padding-left: 20px; display: flex; height: auto; justify-content: center; align-items: center; text-align: justify;"> <div style="display: block;"> <center> <span style="display: block; width: 140px; font-size: 7.5px; padding: 5px; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); text-align: justify;"> suspen disse interdum conse ctetur libero id fauc ibus nisl. mauris cur sus mat tis moles. </span> <br> <span style="display: block; width: 140px; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); padding: 5px;"> artist<br> <a href="LINK" style="color: #111; border-bottom: 1px solid rgba(189,189,189,1);">song/album</a> </span> <Br> <span style="display: block; width: 140px; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); padding: 5px;"> artist<br> <a href="LINK" style="color: #111; border-bottom: 1px solid rgba(189,189,189,1);">song/album</a> </span> <Br> <span style="display: block; width: 140px; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); padding: 5px;"> artist<br> <a href="LINK" style="color: #111; border-bottom: 1px solid rgba(189,189,189,1);">song/album</a> </span> <Br> <span style="display: block; width: 140px; background: rgba(189,189,189,.2); border: 1px solid rgba(189,189,189,1); padding: 5px;"> artist<br> <a href="LINK" style="color: #111; border-bottom: 1px solid rgba(189,189,189,1);">song/album</a> </span> </div> </div> </center></lj-raw>
<lj-raw><div id="container" style="display:flex;flex-wrap:wrap;max-width:600px;margin:0 auto;font-family:arial,sans-serif;font-size:10px;text-align:justify;line-height:1.7;color:#A0A0A0"> <div style="width: 100%; height:550px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas: 'one two four four six six' 'one three three five six six';grid-gap:2px;"> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:one;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:two;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:three;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:four;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:five;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:six;"></div> </div> </div> </lj-raw>
<lj-raw><div id="container" style="display:flex;flex-wrap:wrap;max-width:600px;margin:0 auto;font-family:arial,sans-serif;font-size:10px;text-align:justify;line-height:1.7;color:#A0A0A0"> <div style="width: 50%; height:425px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas: 'one two four four' 'one three three five';grid-gap:2px;"> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:one;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:two;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:three;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:four;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:five;"></div> </div> <div style="width: 40%; padding:15px;border:1px solid rgba(0,0,0,0.2);background:rgba(255,255,255,0.2);margin:1%;text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut erat sapien. Integer fringilla nunc vitae risus eleifend, sed suscipit leo semper. Fusce lobortis risus eget nibh efficitur ornare. Nunc porttitor egestas urna nec blandit. In ut venenatis velit, sed ornare justo. Proin varius non risus sed porttitor. Vestibulum cursus pulvinar nisl at blandit. Etiam ut turpis vel tortor ornare laoreet. Nullam dignissim ligula ante, accumsan sagittis diam venenatis nec. <br><br> Morbi sit amet nisi tincidunt, feugiat sapien vel, viverra lectus. Mauris vel mattis turpis. Nulla facilisi. Donec non elit sit amet ex ultrices varius vel ac libero. Vestibulum erat orci, pulvinar sit amet nunc id, ultrices rutrum arcu. Nulla erat ligula, scelerisque et ex vel, posuere malesuada eros. Maecenas pellentesque sem eu urna luctus, a pulvinar metus bibendum. Aliquam arcu dui, blandit quis nibh sed, facilisis lacinia nulla. In eget ante et ligula aliquam luctus sit amet elementum orci. Vestibulum maximus placerat nulla, ut placerat felis venenatis et. Etiam condimentum blandit ante. </div> <div style="width: 50%; padding:15px;border:1px solid rgba(0,0,0,0.2);background:rgba(255,255,255,0.2);margin:1%;text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut erat sapien. Integer fringilla nunc vitae risus eleifend, sed suscipit leo semper. Fusce lobortis risus eget nibh efficitur ornare. Nunc porttitor egestas urna nec blandit. In ut venenatis velit, sed ornare justo. Proin varius non risus sed porttitor. Vestibulum cursus pulvinar nisl at blandit. Etiam ut turpis vel tortor ornare laoreet. Nullam dignissim ligula ante, accumsan sagittis diam venenatis nec. <br><br> Morbi sit amet nisi tincidunt, feugiat sapien vel, viverra lectus. Mauris vel mattis turpis. Nulla facilisi. Donec non elit sit amet ex ultrices varius vel ac libero. Vestibulum erat orci, pulvinar sit amet nunc id, ultrices rutrum arcu. Nulla erat ligula, scelerisque et ex vel, posuere malesuada eros. Maecenas pellentesque sem eu urna luctus, a pulvinar metus bibendum. Aliquam arcu dui, blandit quis nibh sed, facilisis lacinia nulla. In eget ante et ligula aliquam luctus sit amet elementum orci. Vestibulum maximus placerat nulla, ut placerat felis venenatis et. Etiam condimentum blandit ante. </div> <div style="width: 40%; height:300px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas: 'one one three three' 'one one two four';grid-gap:2px;"> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:one;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:two;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:three;"></div> <div style="background:#ddd url(https://i.imgur.com/kzZtrtW.jpg)center;background-size:cover;grid-area:four;"></div> </div> </div></lj-raw>
Square:
<div style="width:500px;height:600px;margin:10px auto;background:#fff;padding:0.5%;border:1px solid #ddd;display:flex;flex-wrap:wrap;"> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT WIDTHS AND HEIGHTS--> <div style="background:#ddd url(URL1)center;background-size:cover;width:40%;height:53%;margin:0.5%;"></div> <div style="background:#ddd url(URL2)center;background-size:cover;width:58%;height:53%;margin:0.5%;"></div> <div style="background:#ddd url(URL3)center;background-size:cover;width:40%;height:45%;margin:0.5%;"></div> <div style="background:#ddd url(URL4)center;background-size:cover;width:58%;height:45%;margin:0.5%;"></div> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT POSITIONING OF ICON--> <img src="ICONHERE" style="background:#fff;padding:1%;width:100px;height:100px;position:relative!important;left:30%;bottom:55%;"> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:2px;font-size:9px;">© TESSISAMESS</a></center>
Circle:
<div style="width:500px;height:600px;margin:10px auto;background:#fff;padding:0.5%;border:1px solid #ddd;display:flex;flex-wrap:wrap;"> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT WIDTHS AND HEIGHTS--> <div style="background:#ddd url(URL1)center;background-size:cover;width:58%;height:53%;margin:0.5%;"></div> <div style="background:#ddd url(URL2)center;background-size:cover;width:40%;height:53%;margin:0.5%;"></div> <div style="background:#ddd url(URL3)center;background-size:cover;width:40%;height:45%;margin:0.5%;"></div> <div style="background:#ddd url(URL4)center;background-size:cover;width:58%;height:45%;margin:0.5%;"></div> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT POSITIONING OF ICON--> <img src="ICONHERE" style="background:#fff;padding:1%;width:100px;height:100px;border-radius:130px;position:relative!important;left:38.8%;bottom:56%;"> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:2px;font-size:9px;">© TESSISAMESS</a></center>
Diamond:
<div style="width:400px;height:400px;margin:10px auto;background:#fff;padding:0.5%;border:1px solid #ddd;display:flex;flex-wrap:wrap;"> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT WIDTHS AND HEIGHTS--> <div style="background:#ddd url(URL1)center;background-size:cover;width:49%;height:56%;margin:0.5%;"></div> <div style="background:#ddd url(URL2)center;background-size:cover;width:49%;height:56%;margin:0.5%;"></div> <div style="background:#ddd url(URL3)center;background-size:cover;width:49%;height:42%;margin:0.5%;"></div> <div style="background:#ddd url(URL4)center;background-size:cover;width:49%;height:42%;margin:0.5%;"></div> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT POSITIONING OF ICON--> <div style="position:relative!important;left:36.2%;bottom:55%;"> <div style="transform-origin:50% 50%;overflow:hidden;width:110px;height:110px;transform:rotate(45deg) translateY(-25px) translateX(-25px);"><div style="transform-origin:50% 50%;overflow:hidden;width:100px;height:100px;width:180px;height:180px;transform:rotate(-45deg);background:#fff;background-size:110px;"></div></div> <div style="transform-origin:50% 50%;overflow:hidden;width:100px;height:100px;transform:rotate(45deg) translateY(-25px) translateX(-25px);margin:-105px 0 0 5px;"><div style="transform-origin:50% 50%;overflow:hidden;width:100px;height:100px;width:180px;height:180px;transform:rotate(-45deg);background:#ddd url(ICONHERE)center top;background-size:110px;"></div></div> </div> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:2px;font-size:9px;">© TESSISAMESS</a></center>
<lj-raw><div style="max-width:650px;margin:0 auto;border:1px solid #eee;"> <div style="background:#fff;height:550px;padding:10px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);grid-template-areas:'one one one two two two three three' 'one one one two two two three three' 'one one one four four five-one three three' 'seven seven seven four four five-two six six' 'seven seven seven four four five-three six six' 'seven seven seven eight eight eight nine nine' 'seven seven seven eight eight eight nine nine' 'ten ten ten ten ten ten nine nine';grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five-one;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five-two;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five-three;"></div> <div style="background:#eee url(IMG6)center;background-size:cover;grid-area:six;"></div> <div style="background:#eee url(IMG7)center;background-size:cover;grid-area:seven;"></div> <div style="background:#eee url(IMG8)center;background-size:cover;grid-area:eight;"></div> <div style="background:#eee url(IMG9)center;background-size:cover;grid-area:nine;"></div> <div style="background:#eee url(IMG10)center;background-size:cover;grid-area:ten;"></div> </div> </div></lj-raw>
<lj-raw><div style="max-width:600px;margin:0 auto;"> <div style="height:840px;padding:10px;display:grid;grid-template-columns:repeat(13,1fr);grid-template-rows:repeat(15,1fr);grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:8;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;grid-column-start:2;grid-column-end:9;grid-row-start:1;grid-row-end:8;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;grid-column-start:9;grid-column-end:13;grid-row-start:1;grid-row-end:5;"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;grid-column-start:9;grid-column-end:13;grid-row-start:5;grid-row-end:8;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five;grid-column-start:13;grid-column-end:14;grid-row-start:1;grid-row-end:6;"></div> <div style="background:#eee url(IMG6)center;background-size:cover;grid-area:six;grid-column-start:13;grid-column-end:14;grid-row-start:6;grid-row-end:12;"></div> <div style="background:#eee url(IMG7)center;background-size:cover;grid-area:seven;grid-column-start:1;grid-column-end:2;grid-row-start:8;grid-row-end:16;"></div> <div style="background:#eee url(IMG8)center;background-size:cover;grid-area:eight;grid-column-start:2;grid-column-end:7;grid-row-start:8;grid-row-end:12;"></div> <div style="background:#eee url(IMG9)center;background-size:cover;grid-area:nine;grid-column-start:7;grid-column-end:13;grid-row-start:8;grid-row-end:12;"></div> <div style="background:#eee url(IMG10)center;background-size:cover;grid-area:ten;grid-column-start:2;grid-column-end:11;grid-row-start:12;grid-row-end:16;"></div> <div style="background:#eee url(IMG11)center;background-size:cover;grid-area:eleven;grid-column-start:11;grid-column-end:14;grid-row-start:12;grid-row-end:16;"></div> </div> </div></lj-raw>
<lj-raw><div style="max-width:600px;margin:0 auto;"> <div style="height:840px;padding:10px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(10,1fr);;grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;grid-column-start:1;grid-column-end:4;grid-row-start:1;grid-row-end:5;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;grid-column-start:4;grid-column-end:6;grid-row-start:1;grid-row-end:3;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;grid-column-start:4;grid-column-end:6;grid-row-start:3;grid-row-end:6;"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;grid-column-start:1;grid-column-end:4;grid-row-start:5;grid-row-end:10;"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five;grid-column-start:4;grid-column-end:6;grid-row-start:6;grid-row-end:10;"></div> <div style="background:#eee url(IMG6)center;background-size:cover;grid-area:six;grid-column-start:1;grid-column-end:6;grid-row-start:10;grid-row-end:11;"></div> </div> </div></lj-raw>
VERTICAL:
<div style="box-sizing: border-box; display: grid; grid-template-columns: 50% auto; grid-template-rows: 25% auto auto auto; grid-template-areas: 'red orange' 'red yellow' 'green yellow' 'green blue'; grid-gap: 5px; width: 500px; height: 700px; background-color: #fff; margin: 2em auto; padding: 5px; "> <div style="box-sizing: inherit; grid-area: red; background: red url(IMGURL) center; background-size: cover;"> <img src="IMGURL" style="background: purple center; width: 225px; height: 155px; object-fit: cover; transform:rotate(7deg); border: 5px #fff solid; position: relative; top: 250px; left: 75px;"> </div> <div style="box-sizing: inherit; grid-area: orange; background: orange url(IMGURL) center; background-size: cover;"> </div> <div style="box-sizing: inherit; grid-area: yellow; background: yellow url(IMGURL) center; background-size: cover;"> </div> <div style="box-sizing: inherit; grid-area: green; background: green url(IMGURL) center; background-size: cover;"> </div> <div style="box-sizing: inherit; grid-area: blue; background: blue url(IMGURL) center; background-size: cover;"> </div> </div>
LANDSCAPE:
<div style="box-sizing: border-box; display: grid; grid-template-columns: 25% 25% 25% 25%; grid-template-rows: 50% 50%; grid-template-areas: 'red orange orange yellow' 'green green blue blue'; grid-gap: 5px; width: 700px; height: 500px; background-color: #fff; margin: 2em auto; padding: 5px; "> <div style="box-sizing: inherit; grid-area: red; background: red url(IMGURL) center; background-size: cover;"> </div> <div style="box-sizing: inherit; grid-area: orange; background: orange url(IMGURL) center; background-size: cover;"> </div> <div style="box-sizing: inherit; grid-area: yellow; background: yellow url(IMGURL) center; background-size: cover;"> </div> <div style="box-sizing: inherit; grid-area: green; background: green url(IMGURL) center; background-size: cover;"> </div> <div style="box-sizing: inherit; grid-area: blue; background: blue url(IMGURL) center; background-size: cover;"> <img src="IMGURL" style="background: purple center; width: 150px; height: 200px; object-fit: cover; border: 5px #fff solid; position: relative; top: -100px; left: 0px; transform: rotate(12deg);"> </div> </div>
HTML GOES HERE
Menu
Home
Layouts
Neocities Codes
Articles
Bios
Holidays
Mod and Comm
Moodboards
Narratives
Notecards
Other
Photos
Playlists
Social Media
texts
Watch Lists
In-Entry Codes
Comments
Cut Tags
Update Templates
Userinfos
OOC posts
Lyrics
Bios
Itineraries
Playlists
Plotting
Moodboards
Scene Threads
Social Media
Toggle
