Пишем код HTML:
Остальную часть кода можно будет забрать в архиве, итоговый результат будет такой:
HTML:
<div class="container">
<div class="machine">
<div class="gear gear1"></div>
<div class="gear gear2"></div>
</div>
<button>New Quote</button>
<div class="lightbulb">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path class="lb-head" d="M400,172.9C400,95.1,333.9,32,256,32c-77.9,0-144,63.1-144,141c0,31,13.2,59,30.2,83h-0.3c10.9,15,21.4,27.7,31.5,45
c22,37.8,18.6,74.3,18.7,81.6v1.4h32V256l-32-64h16.6l31.4,64v128h32V256l31.4-64H320l-32,64v128h32v-1.4
c0-8.9-3.6-43.8,18.4-81.6c10.1-17.3,20.6-30,31.5-45h-0.1C386.8,232,400,204,400,172.9z"/>
</g>
<rect x="224" y="464" width="64" height="16"/>
<rect x="208" y="432" width="96" height="16"/>
<rect x="208" y="400" width="96" height="16"/>
</g>
</svg>
</div>
<svg class="line l1" height="0" width="20">
<line x1="10" y1="0" x2="10" y2="120" style="stroke:white;stroke-width:2"/>
</svg>
<svg class="line l2" height="20" width="0">
<line x1="10" y1="10" x2="350" y2="10" style="stroke: white;stroke-width:2"/>
<circle id="c5" cx="340" cy="10" r="7" fill="white" />
</svg>
<svg class="stopper" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 600 600" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
<path d="M256,32c-88.004,0-160,70.557-160,156.801C96,306.4,256,480,256,480s160-173.6,160-291.199C416,102.557,344.004,32,256,32z
M256,244.801c-31.996,0-57.144-24.645-57.144-56c0-31.357,25.147-56,57.144-56s57.144,24.643,57.144,56
C313.144,220.156,287.996,244.801,256,244.801z"/>
</g>
</svg>
<div class="cards">
<div class="card card2">
<div class="pin"></div>
</div>
<div class="card card1">
<div class="pin"></div>
<h1>Random quote machine</h1>
</div>
</div>
<div>