How do you make a round block of lace using bootstrap?
-
How do you use bootstrap?
That's what I did:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Document</title> <style> #containeer{ width: 600px; } </style> </head> <body> <div id="containeer" class="d-flex flex-column bg-secondary text-white align-items-center justify-content-center"> <img src="https://cdn-icons.flaticon.com/png/512/3177/premium/3177440.png?token=exp=1636972015~hmac=9ac5a42e2eb885104540cab2814c8530" alt="image" style="width:100px;"> <h1>Vadim</h1> <p>on AD'S BOARD since December 2018</p> <div id="button" class="mb-1 d-flex p-2 border border-info justify-content-center align-items-center"> <p class="text-info">Seller's other ads</p> </div> </div> </body> </html>
-
As I realized, the main difficulties in breaking the round block of the lone with a closed line.
Think about the use of SVG.
The lone is painted in a vector editor, it's much easier than getting the curves of the CSS.SVG is just created for the vector graph. You'll have a figure that looks the same in all the browsers, and the wool won't break in any gadget and any resolution of the screen.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="430" height="300" viewBox="0 0 430 300" > <!-- фон --> <g> <rect x="0" y="60" width="430" height="240" fill="#E5E6E8"/> <!-- Белый фон внутри лого --> <circle cx="215.3" cy="69.3" r="53.5" fill="#fff"/> </g> <!-- Жёлтый сектор --> <path d="M175.7 106.3c6.6-7 14.1-11.7 22.5-14.8a51 51 0 0 1 38.7 1.8c6.2 3.7 19.4 11.8 14.6 16.1a42.2 42.2 0 0 1-13.5 8.4 64 64 0 0 1-18.7 4.7c-5.4.5-11 .3-16.4-1a61.8 61.8 0 0 1-19.3-8c-3-2-5.4-3-7.9-7.2z" id="path825" fill="#F1CD25"/> <!-- Обводка лого --> <path id="logo_zig" d="M167.2 94.7s-10.1-21.9-3.6-41a57.3 57.3 0 0 1 34-34.3 49.5 49.5 0 0 1 38.2 1.9 60.7 60.7 0 0 1 31.5 36.9 57 57 0 0 1-8.6 42.9 48 48 0 0 1-24.8 18 62 62 0 0 1-34.6 1.3c-8.8-2.2-17-7.2-23.6-13.6-2.7-2.7 18-14.1 28.6-16.9a53.8 53.8 0 0 1 26.1 1 72.8 72.8 0 0 1 14.6 7.3" fill="none" stroke="#4C535C" stroke-width="5" stroke-linecap="round" stroke-linejoin="miter" /> <!-- Серый круг (голова) --> <circle id="path823" cx="215.3" cy="57.5" r="20" fill="#D7DCE1"/> </svg>If you want, you can animate the lone.
