.canvas
.film.f-400
.top
.yellow
span 400
.film-part
.a
.film.f-200
.top
.yellow
span 200
.camera.side
.strap
.right
.side-part
.layer
.dots
-for(i=0;i<51;i++)
.dot
.camera
.shutter
.flash
.lens
.inner-circle
.inner-lens
.lens.behind
.front
.circ
.dots
-for(i=0;i<300;i++)
.dot
View Compiled
@import url('https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap');
:root {
--background-1: #ff9f96;
--primary-color: #591f2b;
--secondary-color: #ffe3c3;
}
body {
margin: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'DM-sans', sans-serif;
background-color: var(--secondary-color);
}
.canvas {
position: relative;
overflow: hidden;
width: 800px;
height: 600px;
background-color: var(--background-1);
border-radius: 10px;
box-shadow:
0 0.3px 2.2px rgba(0, 0, 0, 0.011),
0 0.7px 5.3px rgba(0, 0, 0, 0.016),
0 1.3px 10px rgba(0, 0, 0, 0.02),
0 2.2px 17.9px rgba(0, 0, 0, 0.024),
0 4.2px 33.4px rgba(0, 0, 0, 0.029),
0 10px 80px rgba(0, 0, 0, 0.04);
flex-shrink: 0;
&:before {
content: '';
position: absolute;
width: 600px;
height: 240px;
background-color: var(--primary-color);
left: -160px;
bottom: 0;
transform: skew(-45deg);
box-shadow: 600px 0 0 var(--secondary-color);
}
}
.film {
position: absolute;
width: 60px;
height: 100px;
background-color: #fff;
border: 8px solid var(--primary-color);
&:before {
content: '';
position: absolute;
width: 76px;
height: 20px;
border-radius: 50%;
z-index: 2;
}
}
.f-400 {
bottom: 220px;
left: 196px;
&:before {
background-color: var(--primary-color);
left: -8px;
top: -16px;
}
&:after {
content: '';
position: absolute;
width: 76px;
height: 20px;
border-radius: 50%;
background-color: #fff;
bottom: -10px;
}
.top {
width: 40px;
top: -22px;
&:before {
content: '';
position: absolute;
width: 26px;
height: 2px;
background-color: #fff;
top: 6px;
left: 6px;
border-radius: 50%;
}
}
}
.f-200 {
bottom: 144px;
left: 260px;
transform: rotate(90deg);
z-index: 3;
&:before {
border: 8px solid var(--primary-color);
background-color: #fff;
right: -8px;
top: 93px;
width: 60px;
height: 10px;
}
&:after {
content: '';
position: absolute;
width: 70px;
height: 70px;
background-color: transparent;
border-radius: 50%;
box-shadow: inset 0px 60px 0 -35px var(--primary-color);
top: -24px;
left: -2px;
z-index: 3;
}
.top {
bottom: -16px;
left: 14px;
width: 30px;
}
}
.yellow {
position: absolute;
background-color: var(--secondary-color);
transform: rotate(-90deg);
bottom: 35px;
left: -5px;
width: 100px;
z-index: 1;
text-align: center;
span {
padding-left: 30px;
font-size: 26px;
font-weight: 600;
color: var(--primary-color);
}
}
.top {
position: absolute;
height: 16px;
background-color: var(--primary-color);
left: 10px;
z-index: 4;
border-radius: 8px;
}
.film-part {
position: absolute;
width: 80px;
height: 70px;
border-radius: 10px;
background-color: var(--primary-color);
right: 100%;
bottom: 10px;
&:before {
content: '';
position: absolute;
background-color: var(--background-1);
width: 12px;
height: 12px;
border-radius: 4px;
bottom: 4px;
left: 10px;
box-shadow: 18px 0 0 var(--background-1),36px 0 0 var(--background-1),54px 0 0 var(--background-1),47px -64px 0 var(--background-1);
z-index:4;
}
}
.a {
position: absolute;
width: 30px;
height: 30px;
background-color: var(--primary-color);
top: -14px;
right: 0;
border-radius: 4px 0 0 0;
&:before {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: -5px;
bottom: 10px;
background-color: transparent;
border-radius: 50%;
box-shadow: inset -22px -15px 0 -17px var(--primary-color);
z-index: 4;
}
}
.camera {
position: absolute;
width: 260px;
height: 180px;
background-color: #fff;
border: 10px solid var(--primary-color);
border-radius: 30px;
left: 280px;
bottom: 230px;
padding: 20px 14px;
display: flex;
align-items: center;
justify-content: center;
}
.front {
width: 100%;
height: 100%;
border: 10px solid var(--primary-color);
border-radius: 16px;
}
.dots {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.dot {
width: 4px;
height: 4px;
background-color: var(--primary-color);
border-radius: 50%;
margin: 2px;
margin-left: 6px;
}
.shutter {
position: absolute;
top: -20px;
left: 20px;
width: 40px;
height: 20px;
background-color: var(--primary-color);
border-radius: 20px;
&:before {
content: '';
position: absolute;
width: 20px;
height: 4px;
border-radius: 50% / 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: #fff;
top: 6px;
left: 10px;
}
}
.circ {
position: absolute;
width: 16px;
height: 16px;
background-color: var(--primary-color);
border-radius: 50%;
top: 40px;
left: 42px;
}
.flash {
position: absolute;
width: 30px;
height: 12px;
border: 10px solid var(--primary-color);
border-radius: 20px;
right: 40px;
top: 30px;
background-color: #fff;
}
.lens {
position: absolute;
width: 80px;
height: 80px;
border: 10px solid var(--primary-color);
border-radius: 50%;
left: 70px;
background-color: #fff;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.behind {
left: 88px;
z-index: 1;
border: 12px solid var(--primary-color);
width: 76px;
height: 76px;
&:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: var(--primary-color);
right: -16px;
bottom: -6px;;
border-radius: 0 20px 20px 0;
transform: rotate(40deg);
}
}
.inner-circle {
position: relative;
width: 50px;
height: 50px;
border: 10px solid var(--primary-color);
border-radius: 50%;
overflow: hidden;
}
.inner-lens {
position: absolute;
background-color: var(--background-1);
width: 50px;
height: 50px;
border-radius: 50%;
right: -10px;
bottom: 0;
&:before, &:after {
content: '';
position: absolute;
background-color: #fff;
border-radius: 50%;
}
&:before {
width: 18px;
height: 18px;
top: 12px;
}
&:after {
width: 10px;
height: 10px;
top: 24px;
left: 20px;
}
}
.side {
left: 330px;
box-shadow: 6px 0 0 var(--primary-color);
}
.layer {
position: absolute;
height: 180px;
width: 40px;
display: flex;
flex-wrap: wrap;
right: -10px;
border: 8px solid var(--primary-color);
}
.side-part {
position: absolute;
width: 36px;
height: 22px;
border: 10px solid var(--primary-color);
border-left: none;
border-radius: 0 20px 20px 0;
right: -24px;
top: 30px;
background-color: #fff;
z-index: 1;
&:before, &:after {
content: '';
position: absolute;
background-color: var(--primary-color);
border-radius: 50%;
}
&:before {
width: 10px;
height: 10px;
top: -10px;
left: -4px;
box-shadow: 0 32px 0 var(--primary-color);
}
&:after {
width: 16px;
height: 16px;
top: 3px;
left: 14px;
}
}
.strap {
position: absolute;
width: 120px;
height: 190px;
border: 10px solid var(--primary-color);
border-top: 0;
right: -116px;
top: 42px;
border-radius: 46px 0 0 46px ;
z-index: 2;
&:before, &:after {
content: '';
position: absolute;
}
&:before {
background-color: var(--secondary-color);
bottom: -48px;
right: -40px;
width: 60px;
height: 60px;
}
&:after {
width: 100px;
height: 200px;
background-color: var(--background-1);
right: -20px;
bottom: 12px;
}
}
.right,
.right:before {
position: absolute;
border: 10px solid var(--primary-color);
width: 60px;
height: 40px;
z-index: 4;
}
.right {
border-left: 0;
bottom: -10px;
right: -4px;
border-radius: 0 30px 30px 0;
}
.right:before {
content: '';
border-right: 0;
border-top: 0;
border-radius: 0 0 0 30px;
top: -50px;
left: -35px;
}
@media screen and (max-width: 840px) {
.canvas {
transform: scale(.6);
}
}
@media screen and (max-width: 520px) {
.canvas {
transform: scale(.3);
}
}
@media screen and (max-height: 520px) {
.canvas {
transform: scale(.5);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.