<div class="clearfix" id="page">
  <div class="clip_frame grpelem" id="u97">
    <img class="block" id="u97_img" src="https://flexoprint.com.ua/images/way-of-order/1.png" alt="" width="89" height="104">
  </div>
  <div class="clearfix grpelem" id="ppu185">
    <div class="clearfix colelem" id="pu185">
      <div class="transition clip_frame grpelem" id="u185">
        <img class="block" id="u185_img" src="https://flexoprint.com.ua/images/way-of-order/2.png" alt="" width="83" height="128">
      </div>
      <div class="clip_frame grpelem" id="u288">
        <img class="block" id="u288_img" src="https://flexoprint.com.ua/images/way-of-order/3.png" alt="" width="181" height="120">
      </div>
      <div class="clip_frame grpelem" id="u316">
        <img class="block" id="u316_img" src="https://flexoprint.com.ua/images/way-of-order/4.png" alt="" width="99" height="116">
      </div>
    </div>
    <div class="clearfix colelem" id="pu134">
      <div class="rounded-corners grpelem" id="u134"></div>
      <div class="rounded-corners grpelem" id="u446"></div>
      <div class="rounded-corners grpelem" id="u449">
      </div>
      <div class="rounded-corners grpelem" id="u146">
      </div>
      <div class="rounded-corners grpelem" id="u401">
      </div>
      <div class="rounded-corners grpelem" id="u540">
      </div>
      <div class="rounded-corners grpelem" id="u173">
      </div>
      <div class="rounded-corners grpelem" id="u404">
      </div>
      <div class="rounded-corners grpelem" id="u549">
      </div>
      <div class="rounded-corners grpelem" id="u176">
      </div>
      <div class="rounded-corners grpelem" id="u398">
      </div>
      <div class="rounded-corners grpelem" id="u543">
      </div>
      <div class="rounded-corners grpelem" id="u298">
      </div>
      <div class="rounded-corners grpelem" id="u407">
      </div>
      <div class="rounded-corners grpelem" id="u552">
      </div>
      <div class="rounded-corners grpelem" id="u307">
      </div>
      <div class="rounded-corners grpelem" id="u395">
      </div>
      <div class="rounded-corners grpelem" id="u546">
      </div>
      <div class="rounded-corners grpelem" id="u338">
      </div>
      <div class="clearfix grpelem" id="u344-4">
        <p>Формирование идеи</p>
      </div>
      <div class="clearfix grpelem" id="u621-4">
        <p>Изготовление печатных форм</p>
      </div>
      <div class="clearfix grpelem" id="u624-4">
        <p>Согласование технического задания</p>
      </div>
      <div class="clearfix grpelem" id="u627-4">
        <p>Разработка дизайна этикетки</p>
      </div>
      <div class="clearfix grpelem" id="u349-4">
        <p>Звонок в компанию "РИФ"</p>
      </div>
      <div class="clearfix grpelem" id="u352-4">
        <p>Просчёт заказа</p>
      </div>
      <div class="clip_frame grpelem" id="u355">
        <img class="block" id="u355_img" src="https://flexoprint.com.ua/images/way-of-order/5.png" alt="" width="123" height="142">
      </div>
      <div class="rounded-corners grpelem" id="u384">
      </div>
      <div class="rounded-corners grpelem" id="u575">
      </div>
      <div class="rounded-corners grpelem" id="u410">
      </div>
      <div class="rounded-corners grpelem" id="u443">
      </div>
      <div class="clip_frame grpelem" id="u423">
        <img class="block" id="u423_img" src="https://flexoprint.com.ua/images/way-of-order/6.png" alt="" width="177" height="142">
      </div>
      <div class="clip_frame grpelem" id="u433">
        <img class="block" id="u433_img" src="https://flexoprint.com.ua/images/way-of-order/7.png" alt="" width="135" height="108">
      </div>
      <div class="clip_frame grpelem" id="u455">
        <img class="block" id="u455_img" src="https://flexoprint.com.ua/images/way-of-order/8.png" alt="" width="235" height="103">
      </div>
      <div class="clip_frame grpelem" id="u555">
        <img class="block" id="u555_img" src="https://flexoprint.com.ua/images/way-of-order/9.png" alt="" width="125" height="138">
      </div>
      <div class="clip_frame grpelem" id="u565">
        <img class="block" id="u565_img" src="https://flexoprint.com.ua/images/way-of-order/10.png" alt="" width="181" height="95">
      </div>
    </div>
    <div class="clearfix colelem" id="pu630-4">
      <div class="clearfix grpelem" id="u630-4">
        <p>Печать этикетки и отделка</p>
      </div>
      <div class="clearfix grpelem" id="u633-4">
        <p>Упаковка заказа</p>
      </div>
      <div class="clearfix grpelem" id="u636-4">
        <p>Доставка</p>
      </div>
    </div>
  </div>
  <div class="clearfix grpelem" id="pu584">
    <div class="clip_frame grpelem" id="u584">
      <img class="block" id="u584_img" src="https://flexoprint.com.ua/images/way-of-order/11.png" alt="" width="104" height="102">
    </div>
    <div class="rounded-corners grpelem" id="u581">
    </div>
  </div>
</div>
body {
  font-family: 'Open Sans', sans-serif;
  text-align: left;
  font-size: 14px;
  line-height: 17px;
  word-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  position: relative;
  min-width: 1240px;
  padding-bottom: 84px;
}
.normal_text {
  color: #000000;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 17px;
  text-align: left;
  vertical-align: 0px;
  padding: 0px;
}
.clearfix:after {
  content: "\0020";
  visibility: hidden;
  display: block;
  height: 0px;
  clear: both;
}
img.block {
  display: block;
}
.grpelem {
  display: inline;
  float: left;
}
#page {
  z-index: 1;
  width: 1240px;
  min-height: 678px;
  padding-bottom: 62px;
  margin-left: auto;
  margin-right: auto;
}
#u97 {
  z-index: 4;
  width: 89px;
  background-color: transparent;
  position: relative;
  margin-right: -10000px;
  margin-top: 198px;
  left: 163px;
}
#ppu185 {
  z-index: 0;
  width: 0.01px;
  margin-right: -10000px;
  margin-top: 107px;
  margin-left: 258px;
}
#pu185 {
  z-index: 18;
  width: 0.01px;
  margin-left: 74px;
}
#u185 {
  z-index: 18;
  width: 83px;
  position: relative;
  margin-right: -10000px;
}
#u288 {
  z-index: 20;
  width: 181px;
  position: relative;
  margin-right: -10000px;
  margin-top: 8px;
  left: 136px;
}
#u316 {
  z-index: 29;
  width: 99px;
  position: relative;
  margin-right: -10000px;
  margin-top: 12px;
  left: 452px;
}
#pu134 {
  z-index: 6;
  width: 0.01px;
  margin-top: 5px;
}
#u134 {
  z-index: 6;
  width: 100px;
  height: 20px;
  background-color: #999999;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
}
#u446 {
  z-index: 7;
  width: 80px;
  height: 20px;
  background-color: #999999;
  border-radius: 0px 10px 10px 0px;
  position: relative;
  margin-right: -10000px;
  margin-top: 265px;
  left: 20px;
}
#u449 {
  z-index: 8;
  width: 113px;
  height: 20px;
  background-color: #999999;
  border-radius: 0px 10px 10px 0px;
  position: relative;
  margin-right: -10000px;
  margin-top: 530px;
  left: 20px;
}
#u146 {
  z-index: 9;
  width: 20px;
  height: 20px;
  background-color: #5f5b74;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  left: 105px;
}
#u401 {
  z-index: 10;
  width: 20px;
  height: 20px;
  background-color: #5f5b74;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 265px;
  left: 105px;
}
#u540 {
  z-index: 11;
  width: 20px;
  height: 20px;
  background-color: #5f5b74;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 530px;
  left: 138px;
}
#u173 {
  z-index: 12;
  width: 200px;
  height: 20px;
  background-color: #999999;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  left: 130px;
}
#u404 {
  z-index: 13;
  width: 200px;
  height: 20px;
  background-color: #999999;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 265px;
  left: 130px;
}
#u549 {
  z-index: 14;
  width: 197px;
  height: 20px;
  background-color: #999999;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 530px;
  left: 163px;
}
#u176 {
  z-index: 15;
  width: 20px;
  height: 20px;
  background-color: #5f5b74;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  left: 335px;
}
#u398 {
  z-index: 16;
  width: 20px;
  height: 20px;
  background-color: #5f5b74;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 265px;
  left: 335px;
}
#u543 {
  z-index: 17;
  width: 20px;
  height: 20px;
  background-color: #5f5b74;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 530px;
  left: 365px;
}
#u298 {
  z-index: 22;
  width: 200px;
  height: 20px;
  background-color: #999999;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  left: 360px;
}
#u407 {
  z-index: 23;
  width: 200px;
  height: 20px;
  background-color: #999999;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 265px;
  left: 360px;
}
#u552 {
  z-index: 24;
  width: 170px;
  height: 20px;
  background-color: #999999;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 530px;
  left: 390px;
}
#u307 {
  z-index: 25;
  width: 20px;
  height: 20px;
  background-color: #5f5b74;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  left: 565px;
}
#u395 {
  z-index: 26;
  width: 20px;
  height: 20px;
  background-color: #5f5b74;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 265px;
  left: 565px;
}
#u546 {
  z-index: 27;
  width: 20px;
  height: 20px;
  background-color: #5f5b74;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 530px;
  left: 565px;
}
#u338 {
  z-index: 31;
  width: 100px;
  height: 20px;
  background-color: #999999;
  border-radius: 10px 0px 0px 10px;
  position: relative;
  margin-right: -10000px;
  left: 590px;
}
#u344-4 {
  z-index: 32;
  width: 118px;
  min-height: 35px;
  background-color: transparent;
  text-align: center;
  font-weight: 600;
  position: relative;
  margin-right: -10000px;
  margin-top: 25px;
  left: 56px;
}
#u621-4 {
  z-index: 36;
  width: 118px;
  min-height: 35px;
  text-align: center;
  font-weight: 600;
  position: relative;
  margin-right: -10000px;
  margin-top: 290px;
  left: 56px;
}
#u624-4 {
  z-index: 52;
  width: 118px;
  min-height: 35px;
  text-align: center;
  font-weight: 600;
  position: relative;
  margin-right: -10000px;
  margin-top: 290px;
  left: 286px;
}
#u627-4 {
  z-index: 56;
  width: 118px;
  min-height: 35px;
  text-align: center;
  font-weight: 600;
  position: relative;
  margin-right: -10000px;
  margin-top: 290px;
  left: 516px;
}
#u349-4 {
  z-index: 60;
  width: 148px;
  min-height: 35px;
  text-align: center;
  font-weight: 600;
  position: relative;
  margin-right: -10000px;
  margin-top: 25px;
  left: 271px;
}
#u352-4 {
  z-index: 64;
  width: 92px;
  min-height: 35px;
  text-align: center;
  font-weight: 600;
  position: relative;
  margin-right: -10000px;
  margin-top: 25px;
  left: 529px;
}
#u355 {
  z-index: 68;
  width: 123px;
  position: relative;
  margin-right: -10000px;
  margin-top: 118px;
  left: 54px;
}
#u384 {
  z-index: 70;
  width: 100px;
  height: 20px;
  background-color: #999999;
  border-radius: 10px 0px 0px 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 265px;
  left: 590px;
}
#u575 {
  z-index: 71;
  width: 120px;
  height: 20px;
  background-color: #999999;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 530px;
  left: 590px;
}
#u410 {
  z-index: 72;
  width: 20px;
  height: 285px;
  background-color: #999999;
  border-radius: 0px 20px 20px 0px;
  position: relative;
  margin-right: -10000px;
  left: 690px;
}
#u443 {
  z-index: 73;
  width: 20px;
  height: 285px;
  background-color: #999999;
  border-radius: 20px 0px 0px 20px;
  position: relative;
  margin-right: -10000px;
  margin-top: 265px;
}
#u423 {
  z-index: 74;
  width: 177px;
  
  position: relative;
  margin-right: -10000px;
  margin-top: 118px;
  left: 257px;
}
#u433 {
  z-index: 76;
  width: 135px;
  position: relative;
  margin-right: -10000px;
  margin-top: 152px;
  left: 508px;
}
#u455 {
  z-index: 78;
  width: 235px;
  position: relative;
  margin-right: -10000px;
  margin-top: 422px;
  left: 30px;
}
#u555 {
  z-index: 80;
  width: 125px;
  position: relative;
  margin-right: -10000px;
  margin-top: 387px;
  left: 312px;
}
#u565 {
  z-index: 82;
  width: 181px;
  position: relative;
  margin-right: -10000px;
  margin-top: 430px;
  left: 485px;
}
#pu630-4 {
  z-index: 40;
  width: 0.01px;
  margin-left: 89px;
  margin-top: 5px;
}
#u630-4 {
  z-index: 40;
  width: 118px;
  min-height: 35px;
  text-align: center;
  font-weight: 600;
  position: relative;
  margin-right: -10000px;
}
#u633-4 {
  z-index: 48;
  width: 118px;
  min-height: 18px;
  text-align: center;
  font-weight: 600;
  position: relative;
  margin-right: -10000px;
  left: 227px;
}
#u636-4 {
  z-index: 44;
  width: 118px;
  min-height: 35px;
  text-align: center;
  font-weight: 600;
  position: relative;
  margin-right: -10000px;
  left: 428px;
}
#pu584 {
  z-index: 2;
  width: 0.01px;
  margin-right: -10000px;
  margin-top: 765px;
  margin-left: 973px;
}
#u584 {
  z-index: 2;
  width: 104px;
  position: relative;
  margin-right: -10000px;
}
#u581 {
  z-index: 28;
  width: 20px;
  height: 20px;
  background-color: #5f5b74;
  border-radius: 10px;
  position: relative;
  margin-right: -10000px;
  margin-top: 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.