<style>
/*
NOTES, REMOVE THESE STYLE TAGS WHEN EDITING :-)
- this template works best with *perfectly squared* images (same height and width)
- feel free to frankenstein, edit and mess around with this freely!
- the only thing you CAN'T remove is the credit div. please ....
- enjoy!
*/
</style>
<div class="container">
<div class="topleft">
<img class="image" src="https://i.pinimg.com/736x/44/c7/a2/44c7a28e7a0e4c7c5cb1cdf0f3aaff51.jpg">
</div>
<div class="topright scrollbox">
<i><b>MAKE THAT FOUR</b><br> by /clue</i><br>always make your scrollboxes big and readable by multiple lines. choosing good fonts and color combinations is important! don't forget about accessiblity when designing. this is placeholder text.
</div>
<div class="bottomleft scrollbox">
<b>bold</b> <i>italic</i> <a href="link">link</a> <img src="https://64.media.tumblr.com/1284bf714e355a596acc2137032fbabc/3fb0d56c4d22b106-a8/s75x75_c1/e6672dd7e64154fdc041494ac0ab84ed2f5ae42e.gifv"><br>this template was requested by bambi! thank you :-)<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
<div id="CREDIT, DO NOT REMOVE"><b>template by <a href="https://sntry.cc/clue">/clue</a></b></div>
</div>
<div class="bottomright image">
<img class="image" src="https://i.pinimg.com/736x/dc/18/da/dc18daa52066d229b3e92d0e6ea83d49.jpg"></div>
</div>
</div>
<style>
/* ONLY TOUCH THIS IF YOU KNOW WHAT YOU'RE DOING: START */
.container {
display: grid;
grid-template-columns: 180px 180px;
grid-template-rows: 180px 180px;
gap: 10px 10px;
grid-template-areas:
"topleft topright"
"bottomleft bottomright";
}
.topleft { grid-area: topleft; }
.topright { grid-area: topright; }
.bottomleft { grid-area: bottomleft; }
.bottomright { grid-area: bottomright; }
.image {
width: 180px;
}
/* ONLY TOUCH THIS IF YOU KNOW WHAT YOU'RE DOING: END */
.scrollbox {
background-color: #efebce;
border: 4px #d7ce93 solid;
outline: 2px #a3a37f solid;