[attr="class","s-contain"]
[attr="class","s-side"]
[attr="class","s-side-ani"]
[attr="class","s-body"]
[attr="class","s-body-content"]
[attr="class","s-head"]$('.selkie-coding-gallery')
[PTabbedContent]
[PTab=
[attr="class","s-tabs"]introduction
]
[attr="class","s-stats"]
[attr="class","s-stats-txt"]
hi, i'm selkie! i'm 21 and a biology major currently in my third year of college. aside from writing as a hobby, i've been working with HTML/CSS for something shy of a decade, and have been dabbling in JS as of late! i consider myself a web developer over a web designer and love conceptualizing whacky ideas and figuring out how to manipulate html/css to make them a reality. please note that templates posted in this thread are not free for use unless they are posted elsewhere on site. however, feel free to use, edit, or modify the demos as you wish!
[attr="class","s-stats-body"]
[attr="class","s-stat-entry"]
posting17
templates[attr="class","s-stat-entry"]
plotting11
templates[attr="class","s-stat-entry"]
tracking08
templates[attr="class","s-stat-entry"]
miscellaneous14
templates[/PTab={codes}]
[PTab=
[attr="class","s-tabs"]templates
]
[/PTab={codes}]
[PTab=
[attr="class","s-tabs"]challenges
]
</challenge class="abcs-of-code">
</challenge class="solo-challenges">
[/PTab={height:calc(545px - 25px); display:grid;}]
[/PTabbedContent={margin-top:25px;}]
$accent:#df6885; $sidepattern:url(https://image.ibb.co/h5t3vf/pixel-pattern.png); $bodypattern:url(https://image.ibb.co/hREb3o/08.png); [newclass=.s-contain] width:686px; height:686px; background:#fafafa; display:flex; flex-flow:row wrap; border-radius:10px; overflow:hidden; [/newclass]
[newclass=.s-side] position:relative; height:100%; width:33%; overflow:hidden; background-color: #fc5296; background-image: linear-gradient(315deg, #fc5296 0%, #f67062 74%); [/newclass]
[newclass=.s-side::before] content:''; position:absolute; bottom:-110px; right:-20px; width:200px; height:200px; transform:rotate(45deg); border-radius:20px; background-color:#fff; opacity:.5; z-index:0; [/newclass]
[newclass=.s-side::after] content:''; position:absolute; height:100%; width:100%; background:url(https://i.ibb.co/SJrqSrh/5px-grid.png); top:0px; left:0px; filter:invert(1); opacity:0.066; z-index:0; [/newclass]
[newclass=.s-side img] height:900px; position:absolute; top:-50px; left:-70px; filter:grayscale(50%) contrast(50%); opacity:.92; z-index:1; [/newclass]
[newclass=.s-side-ani] width:500px; height:500px; border-radius:100%; border:10px dotted #fafafa; opacity:.25; position:absolute; left:-5px; animation:60s s-side-ani linear infinite; } @keyframes s-side-ani { from { transform:rotate(0deg); } to { transform:rotate(-360deg); }[/newclass]
[newclass=.s-head] height:35px; font:700 30px/120% montserrat alternates; padding:25px 10px 0px 10px; color:$accent; background-image: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; color: transparent; position:relative; [/newclass]
[newclass=.s-body] width:67%; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; position:relative; z-index:0; overflow:hidden; [/newclass]
[newclass=.s-body:before] content:''; position:absolute; width:100%; height:100%; top:0px; left:0px; background:$bodypattern; opacity:0.0125; [/newclass]
[newclass=.s-body-content] z-index:1; [/newclass]
[newclass=.s-buttons] height:auto; width:calc(100% - 50px); display:flex; padding:25px; display:flex; justify-content:space-between; [/newclass]
[newclass=.s-tabs] height:11px; font:700 11px/100% roboto; text-transform:uppercase; background:#fefefe; color:#f67062; padding:10px 30px; border-radius:20px; box-shadow:2px 2px 5px rgba(0,0,0,.050); transition:.25s; cursor:pointer; } @keyframes s-tabs-ani { 0% { transform:translateY(0px); } 50% { transform:translateY(-3px); } 100% { transform:translateY(0px); }[/newclass]
[newclass=.s-tabs:hover] background:rgba(255,255,255,0.8); transform:translateY(-3px); transition:.25s; [/newclass]
[newclass=.s-stats] flex-grow:1; [/newclass]
[newclass=.s-stats-txt] background-color:#fefefe; padding:20px; margin:0px 25px; border-radius:10px; box-shadow:0px 0px 10px rgba(0,0,0,.05); font:12px/140% inconsolata; color:#555; text-align:justify; [/newclass]
[newclass=.s-stats-txt b] font:700 12px inconsolata; color:transparent; background-image: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; [/newclass]
[newclass=.s-stats-txt:before] content:"/* "; color:#ccc; [/newclass]
[newclass=.s-stats-txt:after] content:" */"; color:#ccc; [/newclass]
[newclass=.s-stats-body] display:flex; height:325px; padding:10px 50px; flex-flow:row wrap; align-items:center; justify-content:space-between; [/newclass]
[newclass=.s-stat-entry] width:150px; height:150px; background:#fefefe; border-radius:100%; box-shadow:0px 0px 10px rgba(0,0,0,.05); display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; text-transform:uppercase; position:relative; overflow:hidden; transition:.25s; cursor:default;[/newclass]
[newclass=.s-stat-entry:hover] transform:translateY(-5px); transition:.25s; [/newclass]
[newclass=.s-stat-entry div] display:block; font:700 75px/100% montserrat alternates; color:transparent; background: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; [/newclass]
[newclass=.s-stat-entry span] bottom:30px; color:#ddd; font:700 10px/100% roboto; [/newclass]
[newclass=.s-templates] max-height:calc(510px - 40px); overflow:auto; background-color:#fefefe; margin:0px 25px; border-radius:10px; border:25px solid #fefefe; box-shadow:0px 0px 10px rgba(0,0,0,.05); font:13px/140% roboto; color:#555; text-align:justify; [/newclass]
[newclass=.s-templates a] display:block; height:13px; padding:10px 0px; border-top:1px solid #eee; color:transparent!important; font:12px/13px Inconsolata; background: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; text-decoration:none; text-transform:lowercase; [/newclass]
[newclass=.s-templates a:first-child] padding-top:0px; border:0px; [/newclass]
[newclass=.s-templates i] color:#aaa; font-style:normal; [/newclass]
[newclass=.s-templates::-webkit-scrollbar] width:15px; [/newclass]
[newclass=.s-templates::-webkit-scrollbar-thumb] width:5px; background: linear-gradient(0deg, #fc5296 0%, #f67062 74%); border-radius:7px; border:7px solid #fefefe;[/newclass]
[newclass=.s-templates::-webkit-scrollbar-track] background:#e3e3e3; border:7px solid #fefefe;[/newclass]
[newclass=.s-body h1] width:100%; margin:0px 0px 4px 0px; position:relative; z-index:2; font:300 19px/100% raleway; color: #aaa; text-align:center; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; text-shadow: -1px -1px 0 #fefefe, 1px -1px 0 #fefefe, -1px 1px 0 #fefefe, 1px 1px 0 #fefefe; [/newclass]
[newclass=.s-body h1::after] content:''; width:66%; position:relative; z-index:0; height:7px; top:-10px; [/newclass]
[newclass=.s-challenges, .s-challenges-2] overflow:auto; background-color:#fefefe; margin:0px 25px; border-radius:10px; border:25px solid #fefefe; box-shadow:0px 0px 10px rgba(0,0,0,.05); font:13px/140% roboto; color:#555; text-align:justify; padding:0px 15px; [/newclass]
[newclass=.s-challenges a, .s-challenges-2 a] display:block; height:13px; padding:10px 0px; border-top:1px solid #eee; color:transparent!important; font:12px/13px Inconsolata; background: linear-gradient(90deg, #fc5296 0%, #f67062 74%); background-clip: text; -webkit-background-clip: text; text-decoration:none; text-transform:lowercase; [/newclass]
[newclass=.s-challenges a:first-child, .s-challenges-2 a:first-child] padding-top:0px; border:0px; [/newclass]
[newclass=.s-challenges i, .s-challenges-2 i] color:#aaa; font-style:normal; [/newclass]
[newclass=.s-challenges::-webkit-scrollbar, .s-challenges-2::-webkit-scrollbar] width:15px; [/newclass]
[newclass=.s-challenges::-webkit-scrollbar-thumb, .s-challenges-2::-webkit-scrollbar-thumb] width:5px; background: linear-gradient(0deg, #fc5296 0%, #f67062 74%); border-radius:7px; border:7px solid #fefefe;[/newclass]
[newclass=.s-challenges::-webkit-scrollbar-track, .s-challenges-2::-webkit-scrollbar-track] background:#e3e3e3; border:7px solid #fefefe;[/newclass]
[newclass=.s-challenges-2]grid-row-end: span 3[/newclass]
[newclass=.s-contain table.PT_table]border:0px!important;[/newclass]
[newclass=.s-contain table td]padding:0px!important;[/newclass]
[newclass=.s-contain .PT_Tabs_holder]padding:0px!important; display:flex; [/newclass]
[newclass=.s-contain .PT_table .PT_Tabs]padding:0px!important; width:100px!important;[/newclass]
[newclass=.s-contain .PT_tabs_selected]background:transparent;[/newclass]
[newclass=.s-contain .PT_tabs_selected .s-tabs]color:#fc5296; background-color:#fff; transform:translateY(-3px)[/newclass]
[newclass=.s-contain .PT_tabs_selected_hover .s-tabs]color:#fc5296; background-color:#fff; transform:translateY(-3px);[/newclass]
[newclass=.s-contain .PT_tabs_hover]background:transparent;[/newclass]
[newclass=.s-contain .PT_tabs_selected_hover]background:transparent;[/newclass]
[newclass=.s-contain .PT_Tabs_holder tbody tr]width: 410px; margin:0px 25px; display: flex; flex-flow: row wrap; justify-content: space-between;[/newclass]
[newclass=.s-contain .PT_spots]margin-top:25px;background-color:transparent;[/newclass]
