Embossed print

embossed-print.markdown

Embossed print

Based off of embossed stationary

A Pen by Laura Robertson on CodePen.

License.

index.html

<div class="container">
  <div class="circle embossed">
    <p class="embossedtext">Lorem</br>Ipsum</p>
  </div>

  <div class="content embossed">
    <p class="embossedtext">
Lorem ipsum dolor sit amet, consect adipiscing elit. Nulla placerat, arcuf sit amet interdum malesuada, nunc et nibh porta augue, non tincidunt au i metus quis neque.</br></br>Praesent sapien diam, interdum quiste pretium quis, blandit et velit. Donec in nisi quis erat varius convallis nec a felis. Integer condimentum dolor a.</p>
<p class="embossedtext icons"><i class="fa fa-twitter" aria-hidden="true"></i><i class="fa fa-facebook" aria-hidden="true"></i><i class="fa fa-pinterest-p" aria-hidden="true"></i></p>
  </div>
</div>

style.css

body {
  background: #e4e1d7;
}

.container {
  max-width: 600px;
}

p {
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: bold;
  text-align: center;
}

.embossedtext {
  color: rgba(255, 255, 255, 0.7);
  text-shadow: -2px 2px 1px rgba(0, 0, 0, 0.4);
}

.embossed {
  border: 3px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset -2px 2px 1px rgba(0, 0, 0, 0.2), -2px 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 30px auto;
}

.circle p {
  padding-top: 53px;
  padding-left: 6px;
  font-size: 30px;
}

img {
  opacity: 0.9;
  filter: grayscale(100%);
  padding-bottom: 15px;
}

.content {
  font-size: 18px;
  padding: 15px;
}

.fa {
  padding: 10px 15px 0;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />