After browsing codepen, I saw someone make a simple profile card, and I thought it would be a fun thing to create.
A Pen by Benjamin Lannon on CodePen.
.card | |
.header | |
img(src="http://gravatar.com/avatar/7959246973e7d9660553f38c7ce04874?s=80") | |
h3 Benjamin Lannon | |
p College Student with a passion for technology and literature | |
ul | |
li | |
a(href="https://github.com/lannonbr") | |
i(class="fa fa-github fa-4x") | |
li | |
a(href="https://twitter.com/lannonbr") | |
i(class="fa fa-twitter fa-4x") | |
li | |
a(href="http://codepen.io/lannonbr") | |
i(class="fa fa-codepen fa-4x") |
After browsing codepen, I saw someone make a simple profile card, and I thought it would be a fun thing to create.
A Pen by Benjamin Lannon on CodePen.
@import "bourbon"; | |
$color: #8c489f; | |
body { | |
background-image: url("https://images.unsplash.com/photo-1447877015176-3099cb49cd6a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c370c77fd779afe99eb0ff05fe9f0907"); | |
background-repeat: no-repeat; | |
height: 100vh; | |
background-size: 100%; | |
color: $color; | |
font-family: "Roboto Light"; | |
font-size: 16px; | |
} | |
ul { | |
margin-top: 2rem; | |
@include clearfix; | |
li { | |
float: left; | |
padding: 25px 50px; | |
a { color: $color; } | |
} | |
} | |
.card { | |
background: #f1f0ff; | |
@include size(480px 300px); | |
border-radius: 30px; | |
border: 5px solid #c3c3e5; | |
padding: 10px; | |
box-shadow: 0px 0px 100px 10px #c3c3e5; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin-left: -240px; | |
margin-top: -150px; | |
.header { | |
@include clearfix; | |
margin-bottom: 30px; | |
img { | |
float: left; | |
border: 3px solid $color; | |
border-radius: 50px; | |
transform: translate(00px, 0px); | |
} | |
h3 { | |
font-size: 2.75em; | |
float: left; | |
margin-left: 1.5rem; | |
line-height: 2em; | |
} | |
} | |
p { | |
font-size: 1em; | |
padding: 0px 25px; | |
} | |
} |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> |