crop_rotate
Run
<!DOCTYPE html> <html> <head> <style> body { background-color: #6c5ce7; color:#ffffff; } h1 { border-bottom: 2px solid #6c5ce7; } .container { color: #6c5ce7; background-color: #ffffff; padding: 15px; margin-top:10px; } button { background-color: #6c5ce7; color: #ffffff; border: 1px solid var(--purple); padding: 5px; } </style> </head> <body> <h1>Before CSS variables</h1> <div class="container"> <h2>Title Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p> <button>More</button> </div> <div class="container"> <h2>Title Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p> <button>More</button> </div> </body> </html>
PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg0KPHN0eWxlPg0KYm9keQ0Kew0KICBiYWNrZ3JvdW5kLWNvbG9yOiAjNmM1Y2U3Ow0KICBjb2xvcjojZmZmZmZmOw0KfQ0KDQpoMSANCnsNCiAgYm9yZGVyLWJvdHRvbTogMnB4IHNvbGlkICM2YzVjZTc7DQp9DQoNCi5jb250YWluZXIgew0KICBjb2xvcjogIzZjNWNlNzsNCiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsNCiAgcGFkZGluZzogMTVweDsNCiAgbWFyZ2luLXRvcDoxMHB4Ow0KfQ0KCQ0KYnV0dG9uIHsNCiAgYmFja2dyb3VuZC1jb2xvcjogIzZjNWNlNzsNCiAgY29sb3I6ICNmZmZmZmY7DQogIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLXB1cnBsZSk7DQogIHBhZGRpbmc6IDVweDsNCn0NCjwvc3R5bGU+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPiA6Oi13ZWJraXQtc2Nyb2xsYmFye3dpZHRoOjdweDtoZWlnaHQ6N3B4O306Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNre2JhY2tncm91bmQ6I2ZmZjt9Ojotd2Via2l0LXNjcm9sbGJhci10aHVtYntib3JkZXItcmFkaXVzOjVweDtiYWNrZ3JvdW5kOiMyZjQ1ZmY7fTwvc3R5bGU+PC9oZWFkPg0KPGJvZHk+DQoNCjxoMT5CZWZvcmUgQ1NTIHZhcmlhYmxlczwvaDE+DQoNCjxkaXYgY2xhc3M9ImNvbnRhaW5lciI+DQogIDxoMj5UaXRsZSBMb3JlbSBJcHN1bTwvaDI+DQogIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQuIEV0aWFtIHNlbXBlciBkaWFtIGF0IGVyYXQgcHVsdmluYXIsIGF0IHB1bHZpbmFyIGZlbGlzIGJsYW5kaXQuPC9wPg0KICA8cD5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LiBFdGlhbSBzZW1wZXIgZGlhbSBhdCBlcmF0IHB1bHZpbmFyLCBhdCBwdWx2aW5hciBmZWxpcyBibGFuZGl0LjwvcD4NCiAgPGJ1dHRvbj5Nb3JlPC9idXR0b24+DQo8L2Rpdj4NCg0KPGRpdiBjbGFzcz0iY29udGFpbmVyIj4NCiAgPGgyPlRpdGxlIExvcmVtIElwc3VtPC9oMj4NCiAgPHA+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2NpbmcgZWxpdC4gRXRpYW0gc2VtcGVyIGRpYW0gYXQgZXJhdCBwdWx2aW5hciwgYXQgcHVsdmluYXIgZmVsaXMgYmxhbmRpdC48L3A+DQogIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQuIEV0aWFtIHNlbXBlciBkaWFtIGF0IGVyYXQgcHVsdmluYXIsIGF0IHB1bHZpbmFyIGZlbGlzIGJsYW5kaXQuPC9wPg0KICA8YnV0dG9uPk1vcmU8L2J1dHRvbj4NCjwvZGl2Pg0KDQo8L2JvZHk+DQo8L2h0bWw+
