Skip to content

Instantly share code, notes, and snippets.

@aguitech
aguitech / 3d-cutout-card.markdown
Created January 27, 2020 20:24
3D Cutout Card
@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

Cards stack/fan in CSS3 with some jQuery

Inspired by this and this Dribbble thingy I created a simple and customisable fan in HTML with some help from jQuery.

A Pen by Jermaine on CodePen.

License.

@aguitech
aguitech / index.pug
Created January 27, 2020 20:23
Information Card Slider
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'
@aguitech
aguitech / clash-of-clans-cards.markdown
Created January 27, 2020 20:23
Clash of Clans Cards
@aguitech
aguitech / index.pug
Last active January 27, 2020 20:22
Layout practice, using grid
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, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, 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&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from An
@aguitech
aguitech / index.haml
Created January 27, 2020 20:21
Pure CSS Card UI
.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
aguitech / codepenchallenge-pokemon-figures.markdown
Created January 27, 2020 20:20
#codepenchallenge: Pokemon Figures

#codepenchallenge: Pokemon Figures

abusing gradients like it's my job. (it's not.) (but it could be.)

A Pen by Clara Beyer on CodePen.

License.

@aguitech
aguitech / index.html
Created January 27, 2020 20:20
Tariff Cards
<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
@aguitech
aguitech / index.html
Created January 15, 2020 15:48
Rotate cube
<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>