[nospaces][googlefont=Pacifico|Montserrat:700|Montserrat+Alternates:700]
my uploading code for over at iconic! this was posted here previously, but i'm reposting it b/c of the revamp to this thread due to my ~*~*~*new gallery code*~*~*~ (feel free to check it out.) otherwise, plz don't mind me o/.[break][break][break]
[attr="class","selk-iconic-b-dar"]
[attr="class","selk-iconic-b-li"]
[attr="class","selk-iconic-icons"]
[newclass=.selk-iconic-b-li] border: 5px solid #f1f1f1; outline: 1px solid #dadada; width: calc(500px + 2px); [/newclass]
[newclass=.selk-iconic-b-dar] border: 10px solid #e2e2e2; outline: 1px solid #dadada; width: calc(500px + 2px + 10px); margin:1px; [/newclass]
[newclass=.selk-iconic-icons] width: 500px; border: 1px solid #dadada; background-color: #eaeaea; --selk-iconic-1: #FC5C9C; --selk-iconic-2: #4E8FBD; [/newclass]
[newclass=.selk-iconic-head] display: flex; flex-flow: row wrap; align-items: center; height: 124px; padding: 25px; position: relative; overflow: hidden; border: 1px solid #f6f6f6; background-image: linear-gradient( 340deg, var(--selk-iconic-1) 0%, var(--selk-iconic-2) 75% ); [/newclass]
[newclass=.selk-iconic-img] margin: 0px 25px 0px 0px; transition: 0.25s ease; position: relative; [/newclass]
[newclass=.selk-iconic-img img] display: block; border-radius: 100%; animation: 3s selk-iconic-pulse linear infinite; padding: 10px; background-color: rgba(255, 255, 255, 0.33); border: 2px solid #fff; transition: 0.25s ease; [/newclass]
[newclass=.selk-iconic-img:hover] transform: scale(0.95); transition: 0.25s ease; [/newclass]
[newclass=.selk-iconic-name] display: flex; width: 295px; height: 124px; flex-flow: column wrap; justify-content: center; align-items: center; position: relative; [/newclass]
[newclass=.selk-iconic-name h1] margin: 0px; position: absolute; top: 0px; font: 36px/36px Pacifico; color: #fafafa; overflow: visible; letter-spacing: -2px; text-shadow: 2px 2px rgba(0, 0, 0, 0.05); [/newclass]
[newclass=.selk-iconic-name h1 a] color: #fafafa!important; font: 36px/36px Pacifico!important;[/newclass]
[newclass=.selk-iconic-name h2] position: absolute; font: 700 12px montserrat; padding: 5px 7px; margin: -3px 0px 5px 0px; border-radius: 5px; color: #fdfdfd; background-color: rgba(255, 255, 255, 0.15); text-shadow: 1px 1px rgba(0, 0, 0, 0.1); cursor: default; [/newclass]
[newclass=.selk-iconic-name h2 a] color: #fafafa!important; font: 700 12px montserrat!important;[/newclass]
[newclass=.selk-iconic-name div] display: flex; flex-flow: row wrap; justify-content: center; position: absolute; top: 82px; [/newclass]
[newclass=.selk-iconic-name span] font: 700 12px montserrat; padding: 5px 7px; margin: 0px 5px 5px 5px; border-radius: 5px; color: #fdfdfd; background-color: rgba(255, 255, 255, 0.15); text-shadow: 1px 1px rgba(0, 0, 0, 0.1); cursor: default; [/newclass]
[newclass=.selk-iconic-spin] position: absolute; top: 0px; left: 0px; width: 124px; height: 124px; border-radius: 100%; animation: 3s theworldrevolving infinite; animation-play-state: paused; [/newclass]
[newclass=.selk-iconic-icons:hover .selk-iconic-spin] animation-play-state: running; } @keyframes theworldrevolving { 0% { transform: rotate(90deg); } 100% { transform: rotate(450deg); }[/newclass]
[newclass=.selk-iconic-orbit] width: 10px; height: 10px; background-color: #fff; position: relative; top: -4px; border-radius: 100%; } @keyframes selk-iconic-pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); } 25% { -moz-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }[/newclass]
[newclass=.selk-iconic-tags] display: flex; flex-flow: row wrap; padding: 50px; position: relative; overflow: hidden; border-top: 1px solid #dadada; [/newclass]
[newclass=.selk-iconic-tags a] font: 700 13px montserrat alternates; background-color: rgba(255, 255, 255, 0.5); margin: 0px 10px 10px 0px; padding: 10px 10px; color: #7a7a7a; z-index: 1; transition: 0.25s ease; border-radius: 20px; cursor: pointer; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; [/newclass]
[newclass=.selk-iconic-tags a:nth-child(odd):hover] background-color: rgba(255, 255, 255, 0.75); color: var(--selk-iconic-2); [/newclass]
[newclass=.selk-iconic-tags a:nth-child(even):hover] background-color: rgba(255, 255, 255, 0.75); color: var(--selk-iconic-1); [/newclass]
[newclass=.selk-iconic-tags i] font-size:200px; position:absolute; bottom:-20px; right:-20px; z-index:0; background-image: linear-gradient(to top left, var(--selk-iconic-1), var(--selk-iconic-2) 66%); color: transparent; background-clip: text; -webkit-background-clip: text; opacity:.5; [/newclass]