css double page document preview with shadow

two div elements that look like blank documents with drop shadows

HTML

<div class='document-prev-wrap'>
  <div class='doc-prev doc-1'>&nbsp;</div>
  <div class='doc-prev doc-2'>my document<br>❤</div>
</div>

CSS

.document-prev-wrap {
  position: relative;
  overflow: hidden;
  height: 280px;
}

.doc-prev {
  position: absolute;
  background: #EEE;
  box-shadow: 5px 5px 14px #0000006e;
  height: 220px;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
  text-align: center;
}

.doc-1 {
  top: 40px;
  left: 40px;
}

.doc-2 {
  top: 10px;
  left: 10px;
}
 
my document

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 152 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
Even if you fall on your face, you're still moving forward.
Victor Kiam