c's of code

[attr="class","abc-selk-link"]
[attr="class","lnr lnr-link"]

[attr="class","abc-selk-rules"]

[attr="class","abc-selk-body"]

[attr="class","abc-selk-text"]
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

[attr="class","abc-selk-hash"]
[HASH]lorem [HASH]ipsum [HASH]dolorsitamet [HASH]morelatin [HASH]idontremember [HASH]oops

[attr="class","abc-selk-colorpickers"]

[attr="class","abc-selk-color"]

#346CA4

[attr="class","abc-selk-var"]
this template uses css variables for easier editing and is therefore incompatible with internet explorer. if you need this cross-compatibility, use a search and replace to change var(--ACCENTTAG) to the desired hex code.

[newclass=.abc-selk-contain] --abc-selk-accent:#346CA4; [/newclass]
[newclass=.abc-selk-contain] width:500px; padding:25px; border-radius:5px; background-color:#eee; display:flex; flex-flow:row wrap; justify-content:space-between; position:relative; overflow:hidden; [/newclass]
[newclass=.abc-selk-contain h1] margin:0px; width:100%; display:flex; flex-flow:row wrap; align-items:center; font:200 32px/32px Raleway; color:var(--abc-selk-accent); [/newclass]
[newclass=.abc-selk-contain h1:after] content:''; width:10px; height:1px; background-color:#ccc; flex-grow:2; margin-left:25px; [/newclass]
[newclass=.abc-selk-contain h1:before] content:'A-B-'; color:#ccc; [/newclass]
[newclass=.abc-selk-link] position:absolute; bottom:0px; right:0px; height:50px; width:50px; background-color:var(--abc-selk-accent); display:flex; align-items:center; justify-content:center; border-radius:0px; [/newclass]
[newclass=.abc-selk-link span] font-size:20px; color:#fafafa; [/newclass]
[newclass=.abc-selk-body] width:325px; border-radius:5px; color:#aaa; font:400 11px roboto; text-align:justify; margin-top:25px; [/newclass]
[newclass=.abc-selk-text] background-color:#fafafa; padding:25px; border-radius:5px; [/newclass]
[newclass=.abc-selk-hash] margin:25px 0px; text-align:left; [/newclass]
[newclass=.abc-selk-hash a] display:inline-block; height:10px; padding:5px 7px; margin:0px 3px 5px 0px; color:var(--abc-selk-accent); background-color:#ddd; border-radius:2px; text-transform:uppercase; font:600 10px/10px roboto; [/newclass]
[newclass=.abc-selk-colorpickers] width:325px; display:flex; flex-flow:row wrap; align-items:flex-start; [/newclass]
[newclass=.abc-selk-color] display:flex; flex-flow:row nowrap; width:320px; [/newclass]
[newclass=.abc-selk-color div] height:10px; display:inline-block; margin-right:5px; background-color:#346CA4; [/newclass]
[newclass=.abc-selk-color span] height:10px; width:38px; font:600 9px/10px Roboto; color:#346CA4; [/newclass]
[newclass=.abc-selk-var] width:265px; font:400 10px/13px roboto; margin-top:25px; padding-right:10px; height:25px; overflow:auto; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar] width:5px; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-thumb] background-color:#999; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-track] background-color:#ddd; border:0px; [/newclass]
[newclass=.abc-selk-rules] margin:25px 0px 0px 0px; width:150px; display:flex; justify-content:flex-start; align-self:stretch; flex-flow:column nowrap; border-right:1px solid #ddd; [/newclass]
[newclass=.abc-selk-rules h2] margin:0px; display:block; width:50px; height:50px; background-color:var(--abc-selk-accent); border-radius:5px; [/newclass]
[newclass=.abc-selk-rules img] width:100px; height:100px; border-radius:5px; [/newclass]