HTML
<div class="container">
<div class="iphone base">
<div class="metal"></div>
<div class="face common">
<div class="smile"></div>
</div>
<div class="holder common"></div>
<div class="cord common"></div>
</div>
<div class="hdmi base">
<div class="metal">
<div class="dent"></div>
</div>
<div class="face common">
<div class="smile"></div>
</div>
<div class="facebase"></div>
<div class="holder common"></div>
<div class="cord common"></div>
</div>
<div class="vga base">
<div class="metal">
<div class="circles">
<span></span>
<span></span>
<span></span>
</div>
<div class="nubs"></div>
</div>
<div class="face common">
<div class="smile"></div>
<div class="stripes"></div>
</div>
<div class="holder">
<div class="nubs"></div>
</div>
<div class="cord"></div>
</div>
</div>
LESS
@cord-border: #45505B;
@light-gray: #DADCDF;
@gray: #A3A9AE;
@dark-gray: #899097;
@darker-gray: #6C757D;
@gold: #DAD1B2;
@dark-gold: #BCA98F;
@light-blue: #B2D7F8;
@blue: #84BEF4;
@dark-blue: #52A5EF;
.container {
width: 50%;
height: 300px;
position: fixed;
left: 50%;
bottom: 0;
transform: translate(-50%, 0%);
display: flex;
flex-direction: row;
justify-content: center;
}
.base {
width: 30%;
min-width: 165px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.iphone {
.common {
background-color: #fff;
border: 4px solid @cord-border;
margin-top: -4px;
}
.metal {
width: 40px;
height: 40px;
background-color: @light-gray;
border: 4px solid @cord-border;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
&:after {
content: " ";
display: block;
background-color: #fff;
border: 2px solid @gray;
width: 20px;
height: 8px;
margin: 5px auto 0;
}
}
.face {
width: 55px;
height: 80px;
border-radius: 8px;
position: relative;
.smile {
position: absolute;
left: 50%;
top: 25px;
transform: translate(-50%, 0%);
width: 20px;
height: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 3px solid @cord-border;
border-top: 0;
box-sizing: border-box;
&:before, &:after {
content: " ";
display: block;
width: 6px;
height: 6px;
background-color: @cord-border;
border-radius: 100%;
}
&:before {
position: absolute;
left: -12px;
bottom: 5px;
}
&:after {
position: absolute;
left: 20px;
bottom: 5px;
}
}
}
.holder {
width: 30px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.cord {
width: 20px;
height: 124px;
border-bottom: none;
}
}
.hdmi {
.common {
background-color: @dark-gray;
border: 4px solid @cord-border;
margin-top: -4px;
}
.metal {
background-color: @gold;
width: 70px;
height: 55px;
border: 4px solid @cord-border;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: relative;
.dent {
width: 40px;
height: 8px;
border-bottom: 2px solid @dark-gold;
margin: 0 auto;
&:before, &:after {
content: " ";
display: block;
width: 10px;
border-bottom: 2px solid @dark-gold;
}
&:before {
transform: translate(-8px, 5px) rotate(45deg);
}
&:after {
transform: translate(38px, 3px) rotate(315deg);
}
}
&:before, &:after {
content: " ";
display: block;
background-color: @dark-gold;
width: 12px;
height: 12px;
}
&:before {
position: absolute;
left: 12px;
top: 20px;
}
&:after {
position: absolute;
right: 12px;
top: 20px;
}
}
.face {
width: 100px;
height: 120px;
border-radius: 15px;
border-bottom: none;
position: relative;
.smile {
position: absolute;
left: 50%;
top: 35px;
transform: translate(-50%, 0%);
width: 30px;
height: 15px;
background-color: @darker-gray;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border: 3px solid @cord-border;
box-sizing: border-box;
&:before, &:after {
content: " ";
display: block;
width: 12px;
height: 12px;
background-color: @cord-border;
border-radius: 100%;
}
&:before {
position: absolute;
left: 36px;
bottom: 15px;
}
&:after {
position: absolute;
left: -24px;
bottom: 15px;
}
}
}
.facebase {
border-top: 80px solid @cord-border;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
width: 54px;
margin-top: -9px;
position: relative;
&:before {
content: " ";
display: block;
border-top: 80px solid @dark-gray;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
width: 48px;
position: absolute;
bottom: 100%;
right: -22.5px;
}
&:after {
content: " ";
display: block;
background-color: transparent;
border-bottom: 4px solid @cord-border;
border-radius: 50%;
width: 58x;
height: 4px;
margin-top: -4px;
}
}
.holder {
width: 40px;
height: 16px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.cord {
width: 20px;
height: 22px;
border-bottom: none;
}
}
.vga {
.common {
background-color: @blue;
border: 4px solid @cord-border;
margin-top: -4px;
}
.metal {
background-color: @light-gray;
width: 70px;
height: 55px;
border: 4px solid @cord-border;
border-top-left-radius: 8px;
border-top-right-radius: 9px;
position: relative;
width: 90px;
height: 30px;
.circles {
width: 70%;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
span {
display: block;
width: 9px;
height: 9px;
background-color: @gray;
border-radius: 100%;
}
}
.nubs {
position: absolute;
bottom: 0;
&:before, &:after {
content: " ";
display: block;
width: 12px;
height: 12px;
background-color: @light-gray;
border: 4px solid @cord-border;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-bottom: -4px;
}
&:before {
position: absolute;
bottom: 0;
right: 12px;
}
&:after {
position: absolute;
bottom: 0;
left: 102px;
}
}
}
.face {
width: 160px;
height: 130px;
border-radius: 12px;
position: relative;
.smile {
position: absolute;
left: 50%;
top: 35px;
transform: translate(-50%, 0%);
width: 30px;
height: 15px;
background-color: @dark-blue;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border: 3px solid @cord-border;
box-sizing: border-box;
&:before, &:after {
content: " ";
display: block;
width: 20px;
height: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 3px solid @cord-border;
border-top: 0;
box-sizing: border-box;
}
&:before {
position: absolute;
left: 42px;
bottom: 15px;
}
&:after {
position: absolute;
left: -38px;
bottom: 15px;
}
}
.stripes {
margin: 86px auto 0;
width: 80%;
height: 25px;
background-image: linear-gradient(to bottom, @dark-blue 25%, @blue 25%, @blue 50%, @dark-blue 50%, @dark-blue 75%, @blue 75%, @blue);
background-size: 20px 20px;
}
}
.holder {
border-top: 45px solid @cord-border;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 54px;
position: relative;
&:before {
content: " ";
display: block;
border-top: 45px solid @blue;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 48px;
position: absolute;
bottom: 100%;
right: -17px;
}
&:after {
content: " ";
display: block;
background-color: transparent;
border-bottom: 4px solid @cord-border;
border-radius: 50%;
width: 58x;
height: 4px;
margin-top: -4px;
}
.nubs {
position: absolute;
top: 0;
&:before, &:after {
content: " ";
display: block;
width: 22px;
height: 40px;
background-image: linear-gradient(to right, @dark-blue 25%, @blue 25%, @blue 50%, @dark-blue 50%, @dark-blue 75%, @blue 75%, @blue);
background-size: 11px 11px;
border: 4px solid @cord-border;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
margin-bottom: -4px;
}
&:before {
position: absolute;
bottom: 5px;
right: 21px;
}
&:after {
position: absolute;
bottom: 5px;
left: 75px;
}
}
}
.cord {
width: 20px;
height: 80px;
background-color: @dark-gray;
border: 4px solid @cord-border;
border-bottom: none;
margin-top: -4px;
}
}
.h1 {
font-family: Impact, Charcoal, sans-serif;
}
