A Pen by Dannie Vinther on CodePen.
aguitech
aguitech
/ cards-stack-fan-in-css3-with-some-jquery.markdown
Created
January 27, 2020 20:23
Cards stack/fan in CSS3 with some jQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div(class='card') | |
| div(class='products') | |
| div(class='product active' | |
| product-id='1' | |
| product-color='#D18B49') | |
| div(class='thumbnail') | |
| img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/Stag.svg') | |
| h1(class='title') The Magnificent Stag | |
| p(class='description') Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. | |
| div(class='product' |
Based on this dribbble shot: https://dribbble.com/shots/2432743-Clash-Cards-Preview
A Pen by Andre Madarang on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| section | |
| h1 Nature | |
| .content | |
| p Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, laborum suscipit doloremque, expedita voluptatum maiores corporis modi assumenda esse consectetur error nulla, vero alias. | |
| a(href="") Learn more | |
| .img | |
| img(src='https://images.unsplash.com/photo-1445966275305-9806327ea2b5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=14a02fab1200216368d682ecaa91e540') | |
| <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px;" href="https://unsplash.com/@andersjilden?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from An |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .card | |
| %input#rad1{:checked => "checked", :name => "rad", :type => "radio"}/ | |
| %div{:for => "rad1"} | |
| %h1 1 | |
| .btn | |
| %input#rad2{:name => "rad", :type => "radio"}/ | |
| %div{:for => "rad2"} | |
| %h1 2 | |
| .btn | |
| %input#rad3{:name => "rad", :type => "radio"}/ |
aguitech
/ codepenchallenge-pokemon-figures.markdown
Created
January 27, 2020 20:20
#codepenchallenge: Pokemon Figures
abusing gradients like it's my job. (it's not.) (but it could be.)
A Pen by Clara Beyer on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="tariffCards"> | |
| <div class="economy"> | |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACUCAYAAABxydDpAAAAAXNSR0IArs4c6QAAQABJREFUeAHtvXmQJcl931fnu/q9Pqfn2J3dHSwu4hDIhYiDByzSBElRNGmKB0RQohniYYcF03bIEf6Xpv2vIxgKRVhShOwQI0wqZPEQiQApkLhJACRAgLiWOBbYe3dmp2emj3fXq8Of7y8ru9/0dvdMz/QMFsupmdeVlZVXZX7z+/vlL7OywuBv0VFVVXi3HzcMw+pu5/lSyO+uV/TdfOhvBpBu5vn+NoDtZQeslyqYDgPcyxVkLwtgnSSYfv3Xf/1YdfJrv/ZrJyLqXm4AO1YlHtbrvln+twOo4wLouM94O4B7OYDsWw5YtwqmmwHSo48+avWxsbGxWy/9fn/XLXD1er1dhlpfX6/e8IY37F4fBb5bAdq3MsCuq7SjKuabfe9WAHUUmDyI/HN5MAlIk8nD4eu5MZgOwnE+po4uWLB28oKB6Olmt2q1Vqpe72t2LYD5dHS+Edj+NoDsJQ2skwTTfiB5IHhAbWysRw8CpK3JVpSVp8LerBXNqmmYl7PwweVuuLC4ED727LUiDZtVI9qu+ulS2Uw2qmeTdrW0dLn0TLYfZEcB7eUMsJcksE4KUEeByTHTJJxOHwzPw0r9rBf1Zv1oXLSjtIjiZtmIXvF3v739sz/y7n/WDtrfmyZpmlfZ5z7zpY//i9/+vd+8vBAvFuN4Wk4aVdGIrlTLreXSMdnjxl4PP/xw6cE7fz6MzY4Lspe6mHxJAeu4gDpM1B0EKDGT15cmk0m4PlyP+lk/mhVrYa9oRWkexXERxuNOEP/yz73nTa996JW/mqTN/zIfFFerLHgojoJn025chnG0Ph1PPnVp8+l//a//w298aHQlm83ismjH47Kf9oDjlWoDkDWbTyMuW4jLXn |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="scene"> | |
| <div class="cube"> | |
| <div class="cube__face cube__face--front">front</div> | |
| <div class="cube__face cube__face--back">back</div> | |
| <div class="cube__face cube__face--right">right</div> | |
| <div class="cube__face cube__face--left">left</div> | |
| <div class="cube__face cube__face--top">top</div> | |
| <div class="cube__face cube__face--bottom">bottom</div> | |
| </div> | |
| </div> |