Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<doctype html></doctype>\n<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM\" crossorigin=\"anonymous\"></script>\n<div class=\"row\">\n <div class=\"col-sm-3\">\n <div class=\"card\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">Special title treatment</h5>\n <p class=\"card-text\">With supporting text below as a natural lead-in to additional content.</p>\n <a href=\"#\" class=\"btn btn-primary\">Go somewhere</a>\n </div>\n </div>\n </div>\n <div class=\"col-sm-3\">\n <div class=\"card\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">Special title treatment</h5>\n <p class=\"card-text\">With supporting text below as a natural lead-in to additional content.</p>\n <a href=\"#\" class=\"btn btn-primary\">Go somewhere</a>\n </div>\n </div>\n </div>\n <div class=\"col-sm-3\">\n <div class=\"card\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">Special title treatment</h5>\n <p class=\"card-text\">With supporting text below as a natural lead-in to additional content.</p>\n <a href=\"#\" class=\"btn btn-primary\">Go somewhere</a>\n </div>\n </div>\n </div>\n <div class=\"col-sm-3\">\n <div class=\"card\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">Special title treatment</h5>\n <p class=\"card-text\">With supporting text below as a natural lead-in to additional content.</p>\n <a href=\"#\" class=\"btn btn-primary\">Go somewhere</a>\n </div>\n </div>\n </div>\n</div>","javascript":"","css":"<div class=\"demo-1\">\r\n<h3>Lorem ipsum...</h3>\r\n</div>","javascript":"","css":"body {\r\n padding-top: 25px; \r\n}\r\n\r\n.demo-1 {\r\n height: 60px; \r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.demo-1 h3 {\r\n font-size: 5em;\r\n color: #e91e63;\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n margin: 0;\r\n line-height: 50px;\r\n text-align: center;\r\n /* Starting position */\r\n -moz-transform:translateX(100%);\r\n -webkit-transform:translateX(100%); \r\n transform:translateX(100%);\r\n /* Apply animation to this element */ \r\n -moz-animation: demo-1 15s linear infinite;\r\n -webkit-animation: demo-1 15s linear infinite;\r\n animation: demo-1 15s linear infinite;\r\n}\r\n/* Move it (define the animation) */\r\n@-moz-keyframes demo-1 {\r\n 0% { -moz-transform: translateX(100%); }\r\n 100% { -moz-transform: translateX(-100%); }\r\n}\r\n@-webkit-keyframes demo-1 {\r\n 0% { -webkit-transform: translateX(100%); }\r\n 100% { -webkit-transform: translateX(-100%); }\r\n}\r\n@keyframes demo-1 {\r\n 0% { \r\n -moz-transform: translateX(100%); /* Firefox bug fix */\r\n -webkit-transform: translateX(100%); /* Firefox bug fix */\r\n transform: translateX(100%); \r\n }\r\n 100% { \r\n -moz-transform: translateX(-100%); /* Firefox bug fix */\r\n -webkit-transform: translateX(-100%); /* Firefox bug fix */\r\n transform: translateX(-100%); \r\n }\r\n}"}