HAML
%head
%link{:href => "https://fonts.googleapis.com/css?family=Ubuntu", :rel => "stylesheet"}
%body
#position
%svg{:height => "160", :width => "140"}
%path{:d => "m 9.5 21 q 60 -20 121 0", :class => "ribbon"}
%path{:d => "M 10 20 V 100 z"}
%path{:d => "M 130 20 V 100 z"}
%path{:d => "m 10 100 q 1 30 60.5 50"}
%path{:d => "m 130 100 q -1 28 -60.5 50"}
%polygon{:points =>"10,21 130,21 10,50", :class => "ribbon"}
%text
#ups
ups
%span.reg
®
<!-- The UPS Logo is a registered trademark of United Parcel Service of America, Inc. -->
<!-- This work is purely for artistic purpose and not intended for commerical use. -->
SASS
$brown: #35261C
$gold: #ffb500
$package: #c19862
$natural: $package
$hover: $gold
*
-webkit-transition: .4s
cursor: default
body
font-family: 'Ubuntu'
font-size: 64px
background: $brown
-webkit-user-select: none
#position
background: none
width: 140px
height: 160px
text-align: center
position: absolute
margin: auto
left: 0
right: 0
top: 0
bottom: 0
zoom: 0%
#position:hover #ups
color: $hover
#ups
background: none
line-height: 26px
color: $natural
width: 120px
height: 36px
position: absolute
margin: auto
left: 0
right: 0
top: 64px
-webkit-transform: rotate(0deg)
svg
background: none
position: absolute
margin: auto
left: 0
right: 0
top: 0
bottom: 0
#position:hover path
stroke: $hover
path
stroke: $natural
stroke-width: 2px
fill: none
#position:hover .ribbon
stroke: $hover
fill: $hover
.ribbon
stroke-width: 2px
stroke: $natural
fill: $natural
#position:hover .reg
color: $hover
.reg
display: none
color: $natural
font-size: 12px
position: absolute
margin: auto
right: 20px
bottom: 10px
@media screen and (max-width: 1080px)
#position
zoom: 400%
1 Response