.island.card.card--medium
.splash.card.trump--person
h2 FirstName LastName
h3.ui-header.trump--color-red Phone
p.ui-subheader.trump--color-silver 203 505-5555
View Compiled
red = rgba(221, 85, 85, 1)
silver = rgba(125,125,125,1)
html
font-family sans-serif
-ms-text-size-adjust 100%
-webkit-text-size-adjust 100%
box-sizing border-box
html
*
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
*,
*:before,
*:after
box-sizing inherit
:focus
outline none
:mos-focus-inner
border 0
html,
body,
section
margin 0
padding 0
height 100%
width 100%
body
background #EBEBEB
button
background none
border 0
h2
position absolute
bottom 0
color #fff
padding 0 15px
h3,
p
padding .3em 15px
.island
box-shadow 0 -1px 15px 0 rgba(0,0,0,0.25)
.btn
height 2.5em
width 11.25em
display block
&:hover
background darken(red, 3%)
.card
margin 2% auto
border-radius 3px
background #f9f9f9
&--medium
height 300px
max-width 260px
width 100%
.oval
border-radius 100%
.splash
position relative
background-position top center
background-repeat no-repeat
background-size cover
&:before
content ""
display block
position absolute
top 0
right 0
bottom 0
left 0
pointer-events none
background rgba(0,0,0,0.25)
.ui-header
margin-top 1.5em
margin-bottom .5rem
.ui-subheader
font-size .85em
margin-top 0
margin-bottom 1.875em
.trump
&--person
background-image url('https://unsplash.imgix.net/reserve/UJO0jYLtRte4qpyA37Xu_9X6A7388.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050')
max-height 12em
height 100%
width 100%
border-bottom-left-radius 0
border-bottom-right-radius 0
&--color
&-red
color red
&-silver
color silver
&--bg
&-red
background red
color #fff
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.