How to make a responsive application without media queries on the layout of the designer?

Question

Please tell me how best to impose in this case, the honeycomb?
I used it like this, but there were identical boarders (Attached code).
In this case, everything is much harder and I have no particular idea how to do it better.
And the second question is how to correctly position these blocks, so that later not much crutches with media queries?

.benefits__wrapper { text-align: center; padding-top: 3.9881vw; padding-bottom: 15px; } .benefits__heading { margin-bottom: 6.84524vw; } .benefits__items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 759px) { .benefits__items { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (max-width: 759px) { .benefits__item { width: 40%; margin: 20px 0; } } @media screen and (max-width: 459px) { .benefits__item { width: 100%; } } .item { text-align: center; margin-right: 40px; } @media screen and (max-width: 459px) { .item { margin-right: 0; } } .item:last-child { margin-right: 0; } .item__title { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font: 1.25rem/1 "PFEncoreSansPro-Regular"; color: #868686; margin-bottom: 34px; } .item__info { font: 0.9375rem/1.125rem "PFEncoreSansPro-Thin"; color: #adadad; margin-bottom: 3.03571vw; } .hexagon { margin: 0 auto 54px; } .hexagon__icon { fill: #fff; -webkit-transition: background-color .35s; transition: background-color .35s; } .hexagon, .hexagon__item_inner { position: relative; width: 91px; height: 52px; background-color: #fe8682; -webkit-transition: background-color .35s; transition: background-color .35s; } .hexagon:before, .hexagon:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fe8682; -webkit-transition: background-color .35s; transition: background-color .35s; } .hexagon:before, .hexagon__item_inner:before { -webkit-transform: rotate(120deg); transform: rotate(120deg); } .hexagon:after, .hexagon__item_inner:after { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .hexagon__item_inner { position: absolute; left: 0; top: 0; -webkit-transform: scale(0.9); transform: scale(0.9); background-color: #fc635e; z-index: 1; } .hexagon__item_inner:before, .hexagon__item_inner:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: background-color .35s; transition: background-color .35s; background-color: #fc635e; } .hexagon__content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; z-index: 1; } .hexagon:hover, .hexagon:hover:before, .hexagon:hover:after { background-color: #fc635e; } .hexagon:hover .hexagon__item_inner, .hexagon:hover .hexagon__item_inner:before, .hexagon:hover .hexagon__item_inner:after { background-color: #fff; } .hexagon:hover .hexagon__icon { fill: #fc635e; }

 <section class="benefits"> <div class="benefits__wrapper container"> <div class="benefits__heading"> <div class="heading_usual"> <div class="heading__title uppercase">What can <div class="span heading_active">you receive?</div> </div> <div class="heading__subtitle"> Daisy is sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum </div> </div> </div> <div class="benefits__items"> <article class="benefits__item item"> <div class="hexagon"> <div class="hexagon__item_inner"></div> <div class="hexagon__content"> <svg class="hexagon__icon icon_xl"> <use xlink:href="svg/sprite.svg#rocket"></use> </svg> </div> </div> <div class="item__title uppercase">Clents</div> <div class="item__info"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean</div> </article> <article class="benefits__item item"> <div class="hexagon"> <div class="hexagon__item_inner"></div> <div class="hexagon__content"> <svg class="hexagon__icon icon_xl"> <use xlink:href="svg/sprite.svg#web-design"></use> </svg> </div> </div> <div class="item__title uppercase">branding</div> <div class="item__info"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean</div> </article> <article class="benefits__item item"> <div class="hexagon"> <div class="hexagon__item_inner"></div> <div class="hexagon__content"> <svg class="hexagon__icon icon_xl"> <use xlink:href="svg/sprite.svg#diagram"></use> </svg> </div> </div> <div class="item__title uppercase">marketing</div> <div class="item__info"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean</div> </article> <article class="benefits__item item"> <div class="hexagon"> <div class="hexagon__item_inner"></div> <div class="hexagon__content"> <svg class="hexagon__icon icon_xl"> <use xlink:href="svg/sprite.svg#speaker"></use> </svg> </div> </div> <div class="item__title uppercase">adv.</div> <div class="item__info"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean</div> </article> </div>

Save from Photohop as an image and use either background or as img
Something like this: codepen.io/topicstarter/pen/RdNRXo if you fail to finish it ... write about it
The second answer is the animation of the construction project

Accepted Answer · 2019-02-28T07:53:16

SVG solution

SVG solutions have several advantages:

Cross-browser compatibility - works in all modern browsers plus IE11 , Edge
Full adaptability - your layout will never break with any display size

Step-by-step instruction:

To obtain an accurate binding of the contours of the figures to the background image, load the image into the vector editor and assign svg values in accordance with the overall dimensions of the image.
width="1330" height="880" viewBox="0 0 1330 880"

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1330" height="880" viewBox="0 0 1330 880" preserveAspectRatio="xMinYMin meet" > <image xlink:href="https://i.stack.imgur.com/cb744.png" width="100%" height="100%" /> </svg>

In the vector editor using the tool - Рисовать кривые Безье и прямые отрезки
plotting nodal points along the contours of the red line and hexagons

Save the svg file, pick up from it the path common line and hexagons.
Add to each hexagon text that is positioned by the coordinates X, Y`
<text class="txt1" x="355" y="400" > STEP <tspan dx="0">1 </tspan></text>
Add a picture in the hexagon using the pattern

<pattern id="pattern" x="0px" y="-255px" width="341px" height="382px" patternUnits="userSpaceOnUse"> <image xlink:href="https://i.stack.imgur.com/DSbkL.jpg" width="341px" height="382px" /> </pattern>

Add red circles with a check mark, you can add icons instead, as in the sketch

<g id="crc1"> <circle r="23" fill="#FC635E"/> <text x="-15" y="15" fill="white" font-size="36" >✔</text> </g>

Below is a complete code sample, added animation of a common line

  .h1{ fill-opacity:0.6; } .h2 { fill-opacity:0.9; } .txt1 { font-size:32px; fill:#595959; text-decoration: underline; font-weight:500; } .txt2 { font-size:20px; fill:#444444; font-weight:500; } tspan { fill:#FC635E; font-weight:500; font-size:36px; }

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1330 880" > <defs> <pattern id="pattern" x="0px" y="-255px" width="341px" height="382px" patternUnits="userSpaceOnUse"> <image xlink:href="https://i.stack.imgur.com/DSbkL.jpg" width="341px" height="382px" /> </pattern> <pattern id="pattern2" x="40px" y="-380px" width="304px" height="343px" patternUnits="userSpaceOnUse"> <image xlink:href="https://i.stack.imgur.com/hZrmI.jpg" width="304px" height="343px" /> </pattern> <g id="crc1"> <circle r="23" fill="#FC635E" /> <text x="-15" y="15" fill="white" font-size="36" >&#10004;</text> </g> </defs> <image xlink:href="https://i.stack.imgur.com/LC31J.jpg" width="100%" height="100%" /> <g fill="#FEFEFE" stroke="gray" stroke-width="2"> <path id="hex_1" class="h1" d="m402.1 321 106.8 60.6v121.3l-106.8 64.6-106.8-64.6V381.7ZM731.7 381.7l104.1 60.6" /> <path id="hex_2" class="h1" d="m731.7 381.7 104.1 60.6v125.2l-104.1 64.6-106.8-64.6V442.3Z" /> <path id="hex_3" class="h2" fill-opacity="0.6" style="fill:url(#pattern2);" d="m1099.5 289.4 163.5 92.3V567.6L1099.5 658.5 940 567.6V381.7l159.5-92.3" /> <path class="h2" fill-opacity="0.9" style="fill:url(#pattern);" d="m508.9 503 160.8 94.9V782.4L508.9 876 349.4 782.4V597.9l159.5-94.9M835.8 199.7l104.1 62" class="s0"/> <path class="h1" d="m835.8 199.7 104.1 62v120l-104.1 60.6-104.1-60.6V261.7Z" class="s0"/> </g> <path id="progress" fill="none" stroke-width="4" stroke="red" stroke-dashoffset="1975" stroke-dasharray="1975" d="m295.3 381.7 106.8-60.6 106.8 60.6v121.3l116 64.6 0-125.2 106.8-60.6V261.7l104.1-62 104.1 62v120l159.5-92.3 163.5 92.3v185.9l-163.5 91" > <animate attributeName="stroke-dashoffset" dur="10s" values="1975;0" fill="freeze"/> </path> <text class="txt1" x="355" y="400" > STEP <tspan dx="0">1 </tspan></text> <text class="txt2" x="312" y="450"> Разработка проекта</text> <text class="txt2" x="300" y="490"> Согласование проекта </text> <text class="txt1" x="425" y="725" > STEP <tspan dx="0">2 </tspan></text> <text class="txt1" x="680" y="450" > STEP <tspan dx="0">3 </tspan></text> <text class="txt2" x="670" y="500"> Нулевой цикл</text> <text class="txt2" x="640" y="540"> Возведение коробки </text> <text class="txt1" x="790" y="280" > STEP <tspan dx="0">4 </tspan></text> <text class="txt2" x="750" y="330"> Монтажные работы</text> <text class="txt2" x="750" y="370"> Отделочные работы </text> <text class="txt1" x="1150" y="430" > STEP <tspan dx="0">5 </tspan></text> <use xlink:href="#crc1" x="300" y="380" /> <use xlink:href="#crc1" x="628" y="440" /> <use xlink:href="#crc1" x="735" y="255" /> <use xlink:href="#crc1" x="945" y="385" /> <use xlink:href="#crc1" x="1100" y="655" /> </svg>

The CSS solution for this tutorial topic can be found at the link pointed out by @UModeL

I just can’t understand how I can add a lot of text after STEP, because the text isn’t transferred by itself.
@ Glebrostishevsky Add other text using the <tspan> commands, as in the example below.
Or with <text> for each line but the coordinates of X Y will have to change.
Note that if this was a CSS layout, you would also have to choose the length of the phrases and there would be no autotransfer, since you do not have a rectangular shape, but a hexagon

Answer 2 · 2019-02-28T10:30:15

Animation of the project execution process

Animation script

Animation of the red line occurs throughout the entire project.
The text inside each hexagon appears sequentially, revealing the essence of the stage.
As a certain stage is completed, the red checkbox icon lights up.

It is not difficult to implement such a scenario, since all the animations will follow each other and only one animation of drawing a common line lasts for the whole animation.
This animation is implemented by changing the stroke-dashoffset from the maximum length of the 1975px line to zero.

The rest of the text appearance animations, icons, are based on a change in transparency.

Below is the complete code. Animation begins after clicking on the button - Start

 .h1 { fill-opacity:0.6; } .h2 { fill-opacity:0.9; } .txt1 { font-size:32px; fill:#595959; text-decoration: underline; font-weight:500; fill-opacity:0.2; } .txt2 { font-size:20px; fill:#444444; font-weight:500; fill-opacity:0.2; } tspan { fill:#FC635E; font-weight:500; font-size:36px; fill-opacity:1; }

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1330 880" > <defs> <pattern id="pattern" x="0px" y="-255px" width="341px" height="382px" patternUnits="userSpaceOnUse"> <image xlink:href="https://i.stack.imgur.com/DSbkL.jpg" width="341px" height="382px" /> </pattern> <pattern id="pattern2" x="40px" y="-380px" width="304px" height="343px" patternUnits="userSpaceOnUse"> <image xlink:href="https://i.stack.imgur.com/hZrmI.jpg" width="304px" height="343px" /> </pattern> <g id="crc1" > <circle r="23" fill="#FC635E" /> <text x="-15" y="15" fill="white" font-size="36" >&#10004;</text> </g> </defs> <!-- Картинка фона --> <image xlink:href="https://i.stack.imgur.com/LC31J.jpg" width="100%" height="100%" /> <!-- Блок шестиугольников --> <g fill="#FEFEFE" stroke="gray" stroke-width="2"> <path id="hex_1" class="h1" d="m402.1 321 106.8 60.6v121.3l-106.8 64.6-106.8-64.6V381.7ZM731.7 381.7l104.1 60.6" /> <path id="hex_2" class="h1" d="m731.7 381.7 104.1 60.6v125.2l-104.1 64.6-106.8-64.6V442.3Z" /> <path id="hex_3" class="h2" fill-opacity="0.6" style="fill:url(#pattern2);" d="m1099.5 289.4 163.5 92.3V567.6L1099.5 658.5 940 567.6V381.7l159.5-92.3" /> <path id="h2" class="h2" fill-opacity="0.9" style="fill:url(#pattern);" d="m508.9 503 160.8 94.9V782.4L508.9 876 349.4 782.4V597.9l159.5-94.9M835.8 199.7l104.1 62" class="s0"/> <path class="h1" d="m835.8 199.7 104.1 62v120l-104.1 60.6-104.1-60.6V261.7Z" class="s0"/> </g> <path id="progress" fill="none" stroke-width="4" stroke="#FC635E" stroke-dashoffset="1975" stroke-dasharray="1975" d="m295.3 381.7 106.8-60.6 106.8 60.6v121.3l116 64.6 0-125.2 106.8-60.6V261.7l104.1-62 104.1 62v120l159.5-92.3 163.5 92.3v185.9l-163.5 91" > <animate id="an_Line" attributeName="stroke-dashoffset" begin="btn.click" dur="20s" values="1975;0" fill="freeze"/> </path> <text class="txt1" id="s1" x="355" y="400" > STEP <tspan dx="0">1 </tspan></text> <text id="s11" class="txt2" x="312" y="450"> Разработка проекта</text> <text id="s111" class="txt2" x="300" y="490"> Согласование проекта </text> <text id="s2" class="txt1" x="425" y="725" > STEP <tspan dx="0">2 </tspan></text> <text id="s3" class="txt1" x="680" y="450" > STEP <tspan dx="0">3 </tspan></text> <text id="s33" class="txt2" x="670" y="500"> Нулевой цикл</text> <text id="s333" class="txt2" x="640" y="540"> Возведение коробки </text> <text id="s4" class="txt1" x="790" y="280" > STEP <tspan dx="0">4 </tspan></text> <text id="s44" class="txt2" x="750" y="330"> Монтажные работы</text> <text id="s444" class="txt2" x="750" y="370"> Отделочные работы </text> <text id="s5" class="txt1" x="1150" y="430" > STEP <tspan dx="0">5 </tspan></text> <!-- Блок красных иконок --> <g fill-opacity="0.2"> <use id="u1" xlink:href="#crc1" x="300" y="380" /> <use id="u3" xlink:href="#crc1" x="628" y="440" /> <use id="u4" xlink:href="#crc1" x="735" y="255" /> <use id="u5" xlink:href="#crc1" x="945" y="385" /> <use id="u55" xlink:href="#crc1" x="1100" y="655" /> </g> <!-- Анимация текста шестиугольника STEP1 --> <animate id="an_s1" xlink:href="#s1" attributeName="fill-opacity" dur="1s" begin="an_Line.begin+1s" values="0.2;1" fill="freeze" /> <animate id="an_s11" xlink:href="#s11" attributeName="fill-opacity" dur="1s" begin="an_s1.end" values="0.2;1" fill="freeze" /> <animate id="an_s111" xlink:href="#s111" attributeName="fill-opacity" dur="1s" begin="an_s11.end" values="0.2;1" fill="freeze" /> <!-- Анимация иконки шестиугольника STEP1 --> <animate id="an_u1" xlink:href="#u1" attributeName="fill-opacity" dur="1s" begin="an_s111.end" values="0.2;1" fill="freeze" /> <!-- Анимация текста шестиугольника STEP2 --> <animate id="an_s2" xlink:href="#s2" attributeName="fill-opacity" dur="1s" begin="an_s111.end" values="0.2;1" fill="freeze" /> <!-- Анимация текста шестиугольника STEP3 --> <animate id="an_s3" xlink:href="#s3" attributeName="fill-opacity" dur="1s" begin="an_s2.end" values="0.2;1" fill="freeze" /> <animate id="an_s33" xlink:href="#s33" attributeName="fill-opacity" dur="1s" begin="an_s3.end" values="0.2;1" fill="freeze" /> <animate id="an_s333" xlink:href="#s333" attributeName="fill-opacity" dur="1s" begin="an_s33.end" values="0.2;1" fill="freeze" /> <!-- Анимация иконки STEP3 --> <animate id="an_u3" xlink:href="#u3" attributeName="fill-opacity" dur="1s" begin="an_s333.end" values="0.2;1" fill="freeze" /> <!-- Анимация текста шестиугольника STEP4 --> <animate id="an_s4" xlink:href="#s4" attributeName="fill-opacity" dur="1s" begin="an_s333.end" values="0.2;1" fill="freeze" /> <animate id="an_s44" xlink:href="#s44" attributeName="fill-opacity" dur="1s" begin="an_s4.end" values="0.2;1" fill="freeze" /> <animate id="an_s444" xlink:href="#s444" attributeName="fill-opacity" dur="1s" begin="an_s44.end" values="0.2;1" fill="freeze" /> <!-- Анимация иконки STEP4 --> <animate id="an_u4" xlink:href="#u4" attributeName="fill-opacity" dur="1s" begin="an_s444.end" values="0.2;1" fill="freeze" /> <animate id="an_u5" xlink:href="#u5" attributeName="fill-opacity" dur="1s" begin="an_u4.end+1s" values="0.2;1" fill="freeze" /> <!-- Анимация текста шестиугольника STEP5 --> <animate id="an_s5" xlink:href="#s5" attributeName="fill-opacity" dur="1s" begin="an_s444.end+5s" values="0.2;1" fill="freeze" /> <!-- Анимация второй иконки после завершения рисования линии STEP5 --> <animate id="an_u55" xlink:href="#u55" attributeName="fill-opacity" dur="1s" begin="an_Line.end" values="0.2;1" fill="freeze" /> <g id="btn" transform="translate(0 -100) scale(2)"> <rect x="20" y="84" width="35" height="15" rx="5" fill="none" stroke="purple"/> <text x="28" y="95" font-size="10" fill="purple" >Start</text> </g> </svg>

How to make a responsive application without media queries on the layout of the designer?

2 answers 2

SVG solution

Animation of the project execution process

More articles: