Skip to content

Instantly share code, notes, and snippets.

@webmandesign
Created June 15, 2015 08:13
Show Gist options
  • Save webmandesign/f399a3b67ca82329a8a4 to your computer and use it in GitHub Desktop.
Save webmandesign/f399a3b67ca82329a8a4 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="laptop-container">
<img src="http://placehold.it/640x360/3333cc/ffffff" alt="" />
</div>
// ----
// libsass (v3.2.5)
// ----
* {
box-sizing: border-box;
}
body {
text-align: center;
}
.laptop-container {
display: inline-block;
position: relative;
padding: 2px;
margin: 2%;
border: 4px solid #ccc;
border-radius: 4px;
img {
vertical-align: top;
}
&::after {
content: '';
display: block;
position: absolute;
width: 110%;
height: 20px;
left: -5%;
bottom: -20px;
background: #ccc;
border-radius: 10px;
}
}
* {
box-sizing: border-box;
}
body {
text-align: center;
}
.laptop-container {
display: inline-block;
position: relative;
padding: 2px;
margin: 2%;
border: 4px solid #ccc;
border-radius: 4px;
}
.laptop-container img {
vertical-align: top;
}
.laptop-container::after {
content: '';
display: block;
position: absolute;
width: 110%;
height: 20px;
left: -5%;
bottom: -20px;
background: #ccc;
border-radius: 10px;
}
<div class="laptop-container">
<img src="http://placehold.it/640x360/3333cc/ffffff" alt="" />
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment