I want that the texts written in <p/> tags should align in same line with <svg/> tag. But it is not working.
My attempt
My expectation
Code of my attempt:
<div >
<svg
width="374"
height="372"
viewBox="0 0 444 442"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M221.766 439.579C343.03 439.579 441.336 341.273 441.336 220.009C441.336 98.7439 343.03 0.439087 221.766 0.439087C100.501 0.439087 2.1958 98.7439 2.1958 220.009C2.1958 341.273 100.501 439.579 221.766 439.579Z"
fill="#0D0D0D"
stroke="#6B40E2"
stroke-width="0.87828"
stroke-miterlimit="10"
/>
<path
d="M221.766 393.03C317.564 393.03 395.226 315.368 395.226 219.57C395.226 123.771 317.564 46.1097 221.766 46.1097C125.966 46.1097 48.3054 123.771 48.3054 219.57C48.3054 315.368 125.966 393.03 221.766 393.03Z"
fill="#0D0D0D"
stroke="#6B40E2"
stroke-width="0.87828"
stroke-miterlimit="10"
/>
<path
d="M407.61 304.17C407.719 307.923 406.373 311.574 403.855 314.358C402.522 315.757 400.917 316.868 399.139 317.623C397.36 318.378 395.446 318.763 393.513 318.75H81.7244C79.7584 318.75 77.8115 318.361 75.9954 317.608C74.1794 316.855 72.53 315.75 71.1412 314.358C68.4971 311.646 66.9353 308.063 66.7498 304.28C66.6407 301.726 67.2493 299.192 68.5063 296.968L215.267 26.1285C216.462 23.8975 218.246 22.0377 220.426 20.7521C222.607 19.4665 225.099 18.8047 227.628 18.8389C230.206 18.8368 232.742 19.5033 234.986 20.7732C237.228 22.0432 239.105 23.8733 240.429 26.0846L374.059 245.479L405.392 296.858C406.139 298.092 406.716 299.421 407.105 300.811C407.397 301.909 407.566 303.035 407.61 304.17Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<g style="mix-blend-mode:screen">
<g style="mix-blend-mode:screen">
<path
d="M345.427 198.425L225.059 318.816H81.7467C78.4707 318.796 75.292 317.7 72.7004 315.698L286.539 101.836L345.427 198.425Z"
fill="#802FDE"
/>
</g>
</g>
<path
d="M81.7458 318.815C79.7824 318.818 77.8381 318.431 76.0251 317.678C74.2124 316.925 72.5669 315.818 71.1845 314.424C68.5233 311.715 66.9589 308.118 66.7931 304.324C66.693 301.783 67.285 299.265 68.5058 297.034L215.266 26.1944C216.454 23.9561 218.237 22.0891 220.417 20.7989C222.6 19.5088 225.094 18.8458 227.628 18.8828C230.204 18.8802 232.735 19.5466 234.975 20.8168C237.215 22.0871 239.087 23.9175 240.407 26.1285L405.414 296.858C406.751 299.048 407.506 301.542 407.61 304.104C407.724 307.855 406.369 311.504 403.833 314.27C402.509 315.676 400.91 316.791 399.134 317.546C397.358 318.304 395.443 318.684 393.513 318.662H81.7239L81.7458 318.815Z"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M402.098 315.895L376.101 339.916C373.407 342.371 369.887 343.721 366.243 343.693H55.4414C53.3998 343.699 51.3776 343.298 49.4926 342.514C47.6076 341.73 45.8978 340.577 44.4629 339.126L71.1626 314.424C72.547 315.823 74.1957 316.929 76.0127 317.685C77.8296 318.438 79.7787 318.822 81.7459 318.815H393.535C396.631 318.8 399.637 317.775 402.098 315.895Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M68.5281 296.99C67.2788 299.219 66.6708 301.748 66.7716 304.302C66.971 308.081 68.5308 311.662 71.163 314.38L44.5072 339.126C41.7404 336.309 40.107 332.574 39.9182 328.63C39.8222 326.02 40.4368 323.431 41.6967 321.143L187.996 51.0717C188.746 49.6797 189.717 48.4189 190.873 47.3393L217.528 22.7474C216.035 24.9431 214.63 27.2925 213.356 29.6858L68.5281 296.99Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M249.739 227.562L246.204 122.344L246.006 121.927L245.589 121.751H216.519L216.123 121.927L215.97 122.344L219.505 227.562L219.68 227.979L220.097 228.155H249.168L249.563 227.979L249.739 227.562Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M251.056 268.161L250.002 237.114L249.849 236.762L249.453 236.609H220.382L220.031 236.762L219.899 237.114L220.931 268.161L221.107 268.534L221.458 268.688H250.529L250.902 268.534L251.056 268.161Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M352.686 123.122C352.513 118.722 350.686 114.549 347.572 111.435C344.459 108.322 340.285 106.496 335.887 106.322L313.985 105.404L335.992 104.55C340.373 104.394 344.534 102.594 347.647 99.5084C350.758 96.423 352.596 92.2789 352.792 87.9002L353.795 65.871L354.478 87.6442C354.616 92.0683 356.426 96.2755 359.543 99.4173C362.661 102.559 366.855 104.401 371.277 104.572L393.03 105.404L371.15 106.237C366.748 106.406 362.574 108.23 359.458 111.344C356.344 114.459 354.52 118.635 354.351 123.036L353.518 144.916L352.686 123.122Z"
fill="white"
/>
<path
d="M182.704 399.885C182.591 396.829 181.33 393.928 179.174 391.765C177.018 389.601 174.126 388.331 171.077 388.211L155.895 387.64L171.252 387.047C174.284 386.928 177.16 385.675 179.313 383.534C181.467 381.393 182.739 378.519 182.88 375.482L183.582 360.095L184.043 375.219C184.141 378.29 185.397 381.211 187.56 383.389C189.722 385.567 192.628 386.843 195.693 386.959L210.787 387.552L195.605 388.123C192.555 388.248 189.664 389.517 187.505 391.68C185.347 393.843 184.079 396.741 183.955 399.797L183.385 414.987L182.704 399.885Z"
fill="white"
/>
<path
d="M48.4104 128.224L60.3407 152.115L85.3337 154.535L73.4034 130.644L48.4104 128.224Z"
fill="#3CBF77"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M61.4715 106.775L86.4647 109.195L73.4034 130.644L48.4104 128.224L61.4715 106.775Z"
fill="white"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M85.3341 154.535L98.3968 133.064L86.4651 109.195L73.4038 130.644L85.3341 154.535Z"
fill="#4FE3A3"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M407.104 300.877C405.616 301.344 404.096 301.713 402.559 301.975C400.746 302.284 398.908 302.438 397.07 302.436C390.465 302.442 384.008 300.475 378.532 296.786C373.054 293.095 368.805 287.852 366.33 281.728C363.856 275.604 363.27 268.881 364.648 262.421C366.025 255.962 369.301 250.062 374.059 245.479L405.392 296.859C406.143 298.112 406.72 299.465 407.104 300.877Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M367.099 256.018C367.099 265.862 371.007 275.303 377.965 282.266C384.924 289.228 394.363 293.141 404.206 293.148C406.275 293.152 408.339 292.974 410.376 292.621C418.129 291.317 425.27 287.584 430.768 281.961C436.263 276.337 439.834 269.114 440.962 261.332C441.116 260.212 441.226 259.136 441.292 257.907C441.292 257.27 441.292 256.633 441.292 256.018C441.303 247.807 438.589 239.821 433.576 233.317C428.563 226.811 421.533 222.154 413.588 220.073C405.644 217.99 397.235 218.603 389.675 221.814C382.115 225.026 375.836 230.654 371.82 237.816C368.691 243.371 367.064 249.644 367.099 256.018Z"
fill="#3CBF77"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M371.468 243.108C371.462 251.32 374.178 259.301 379.193 265.805C384.206 272.308 391.234 276.968 399.178 279.049C407.122 281.133 415.532 280.525 423.091 277.319C430.653 274.113 436.938 268.49 440.962 261.332C441.208 259.571 441.333 257.797 441.336 256.018C441.347 247.807 438.633 239.821 433.62 233.317C428.607 226.811 421.576 222.154 413.632 220.073C405.688 217.99 397.279 218.603 389.719 221.814C382.159 225.026 375.88 230.654 371.864 237.816C371.598 239.568 371.464 241.336 371.468 243.108Z"
fill="#4FE2A3"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M424.451 236.475C425.794 233.69 422.681 229.402 417.495 226.895C412.308 224.39 407.015 224.616 405.669 227.4C404.323 230.184 407.436 234.472 412.622 236.977C417.809 239.485 423.105 239.259 424.451 236.475Z"
fill="white"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div >
{#each OUR_GOALS as goal}
<p>{goal}</p>
{/each}
</div>
.about_ops svg {
float: left;
margin-bottom: 25px;
}
.about_ops p {
padding-left: 23px;
padding-bottom: 10px;
margin: 15px 0;
float: right;
}
I am using svelte framework. kindly provide the corrections to the code so that it can look like my expectations.
CodePudding user response：
You can reach to your goal with flexbox. wrap them with a div which has display: flex; property.
.wrapper {
display: flex;
}
.about_ops svg {
margin-bottom: 25px;
}
.about_ops p {
padding-left: 23px;
padding-bottom: 10px;
margin: 15px 0;
}<div >
<div >
<svg width="374" height="372" viewBox="0 0 444 442" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M221.766 439.579C343.03 439.579 441.336 341.273 441.336 220.009C441.336 98.7439 343.03 0.439087 221.766 0.439087C100.501 0.439087 2.1958 98.7439 2.1958 220.009C2.1958 341.273 100.501 439.579 221.766 439.579Z"
fill="#0D0D0D"
stroke="#6B40E2"
stroke-width="0.87828"
stroke-miterlimit="10"
/>
<path
d="M221.766 393.03C317.564 393.03 395.226 315.368 395.226 219.57C395.226 123.771 317.564 46.1097 221.766 46.1097C125.966 46.1097 48.3054 123.771 48.3054 219.57C48.3054 315.368 125.966 393.03 221.766 393.03Z"
fill="#0D0D0D"
stroke="#6B40E2"
stroke-width="0.87828"
stroke-miterlimit="10"
/>
<path
d="M407.61 304.17C407.719 307.923 406.373 311.574 403.855 314.358C402.522 315.757 400.917 316.868 399.139 317.623C397.36 318.378 395.446 318.763 393.513 318.75H81.7244C79.7584 318.75 77.8115 318.361 75.9954 317.608C74.1794 316.855 72.53 315.75 71.1412 314.358C68.4971 311.646 66.9353 308.063 66.7498 304.28C66.6407 301.726 67.2493 299.192 68.5063 296.968L215.267 26.1285C216.462 23.8975 218.246 22.0377 220.426 20.7521C222.607 19.4665 225.099 18.8047 227.628 18.8389C230.206 18.8368 232.742 19.5033 234.986 20.7732C237.228 22.0432 239.105 23.8733 240.429 26.0846L374.059 245.479L405.392 296.858C406.139 298.092 406.716 299.421 407.105 300.811C407.397 301.909 407.566 303.035 407.61 304.17Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<g style="mix-blend-mode:screen">
<g style="mix-blend-mode:screen">
<path
d="M345.427 198.425L225.059 318.816H81.7467C78.4707 318.796 75.292 317.7 72.7004 315.698L286.539 101.836L345.427 198.425Z"
fill="#802FDE"
/>
</g>
</g>
<path
d="M81.7458 318.815C79.7824 318.818 77.8381 318.431 76.0251 317.678C74.2124 316.925 72.5669 315.818 71.1845 314.424C68.5233 311.715 66.9589 308.118 66.7931 304.324C66.693 301.783 67.285 299.265 68.5058 297.034L215.266 26.1944C216.454 23.9561 218.237 22.0891 220.417 20.7989C222.6 19.5088 225.094 18.8458 227.628 18.8828C230.204 18.8802 232.735 19.5466 234.975 20.8168C237.215 22.0871 239.087 23.9175 240.407 26.1285L405.414 296.858C406.751 299.048 407.506 301.542 407.61 304.104C407.724 307.855 406.369 311.504 403.833 314.27C402.509 315.676 400.91 316.791 399.134 317.546C397.358 318.304 395.443 318.684 393.513 318.662H81.7239L81.7458 318.815Z"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M402.098 315.895L376.101 339.916C373.407 342.371 369.887 343.721 366.243 343.693H55.4414C53.3998 343.699 51.3776 343.298 49.4926 342.514C47.6076 341.73 45.8978 340.577 44.4629 339.126L71.1626 314.424C72.547 315.823 74.1957 316.929 76.0127 317.685C77.8296 318.438 79.7787 318.822 81.7459 318.815H393.535C396.631 318.8 399.637 317.775 402.098 315.895Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M68.5281 296.99C67.2788 299.219 66.6708 301.748 66.7716 304.302C66.971 308.081 68.5308 311.662 71.163 314.38L44.5072 339.126C41.7404 336.309 40.107 332.574 39.9182 328.63C39.8222 326.02 40.4368 323.431 41.6967 321.143L187.996 51.0717C188.746 49.6797 189.717 48.4189 190.873 47.3393L217.528 22.7474C216.035 24.9431 214.63 27.2925 213.356 29.6858L68.5281 296.99Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M249.739 227.562L246.204 122.344L246.006 121.927L245.589 121.751H216.519L216.123 121.927L215.97 122.344L219.505 227.562L219.68 227.979L220.097 228.155H249.168L249.563 227.979L249.739 227.562Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M251.056 268.161L250.002 237.114L249.849 236.762L249.453 236.609H220.382L220.031 236.762L219.899 237.114L220.931 268.161L221.107 268.534L221.458 268.688H250.529L250.902 268.534L251.056 268.161Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M352.686 123.122C352.513 118.722 350.686 114.549 347.572 111.435C344.459 108.322 340.285 106.496 335.887 106.322L313.985 105.404L335.992 104.55C340.373 104.394 344.534 102.594 347.647 99.5084C350.758 96.423 352.596 92.2789 352.792 87.9002L353.795 65.871L354.478 87.6442C354.616 92.0683 356.426 96.2755 359.543 99.4173C362.661 102.559 366.855 104.401 371.277 104.572L393.03 105.404L371.15 106.237C366.748 106.406 362.574 108.23 359.458 111.344C356.344 114.459 354.52 118.635 354.351 123.036L353.518 144.916L352.686 123.122Z"
fill="white"
/>
<path
d="M182.704 399.885C182.591 396.829 181.33 393.928 179.174 391.765C177.018 389.601 174.126 388.331 171.077 388.211L155.895 387.64L171.252 387.047C174.284 386.928 177.16 385.675 179.313 383.534C181.467 381.393 182.739 378.519 182.88 375.482L183.582 360.095L184.043 375.219C184.141 378.29 185.397 381.211 187.56 383.389C189.722 385.567 192.628 386.843 195.693 386.959L210.787 387.552L195.605 388.123C192.555 388.248 189.664 389.517 187.505 391.68C185.347 393.843 184.079 396.741 183.955 399.797L183.385 414.987L182.704 399.885Z"
fill="white"
/>
<path
d="M48.4104 128.224L60.3407 152.115L85.3337 154.535L73.4034 130.644L48.4104 128.224Z"
fill="#3CBF77"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M61.4715 106.775L86.4647 109.195L73.4034 130.644L48.4104 128.224L61.4715 106.775Z"
fill="white"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M85.3341 154.535L98.3968 133.064L86.4651 109.195L73.4038 130.644L85.3341 154.535Z"
fill="#4FE3A3"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M407.104 300.877C405.616 301.344 404.096 301.713 402.559 301.975C400.746 302.284 398.908 302.438 397.07 302.436C390.465 302.442 384.008 300.475 378.532 296.786C373.054 293.095 368.805 287.852 366.33 281.728C363.856 275.604 363.27 268.881 364.648 262.421C366.025 255.962 369.301 250.062 374.059 245.479L405.392 296.859C406.143 298.112 406.72 299.465 407.104 300.877Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M367.099 256.018C367.099 265.862 371.007 275.303 377.965 282.266C384.924 289.228 394.363 293.141 404.206 293.148C406.275 293.152 408.339 292.974 410.376 292.621C418.129 291.317 425.27 287.584 430.768 281.961C436.263 276.337 439.834 269.114 440.962 261.332C441.116 260.212 441.226 259.136 441.292 257.907C441.292 257.27 441.292 256.633 441.292 256.018C441.303 247.807 438.589 239.821 433.576 233.317C428.563 226.811 421.533 222.154 413.588 220.073C405.644 217.99 397.235 218.603 389.675 221.814C382.115 225.026 375.836 230.654 371.82 237.816C368.691 243.371 367.064 249.644 367.099 256.018Z"
fill="#3CBF77"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M371.468 243.108C371.462 251.32 374.178 259.301 379.193 265.805C384.206 272.308 391.234 276.968 399.178 279.049C407.122 281.133 415.532 280.525 423.091 277.319C430.653 274.113 436.938 268.49 440.962 261.332C441.208 259.571 441.333 257.797 441.336 256.018C441.347 247.807 438.633 239.821 433.62 233.317C428.607 226.811 421.576 222.154 413.632 220.073C405.688 217.99 397.279 218.603 389.719 221.814C382.159 225.026 375.88 230.654 371.864 237.816C371.598 239.568 371.464 241.336 371.468 243.108Z"
fill="#4FE2A3"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M424.451 236.475C425.794 233.69 422.681 229.402 417.495 226.895C412.308 224.39 407.015 224.616 405.669 227.4C404.323 230.184 407.436 234.472 412.622 236.977C417.809 239.485 423.105 239.259 424.451 236.475Z"
fill="white"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>CodePudding user response：
Can you check :
.about_ops svg {
float: left;
margin-bottom: 25px;
}
.about_ops p {
padding-left: 23px;
padding-bottom: 10px;
margin: 15px 0;
float: right;
}<div >
<svg
width="374"
height="372"
viewBox="0 0 444 442"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M221.766 439.579C343.03 439.579 441.336 341.273 441.336 220.009C441.336 98.7439 343.03 0.439087 221.766 0.439087C100.501 0.439087 2.1958 98.7439 2.1958 220.009C2.1958 341.273 100.501 439.579 221.766 439.579Z"
fill="#0D0D0D"
stroke="#6B40E2"
stroke-width="0.87828"
stroke-miterlimit="10"
/>
<path
d="M221.766 393.03C317.564 393.03 395.226 315.368 395.226 219.57C395.226 123.771 317.564 46.1097 221.766 46.1097C125.966 46.1097 48.3054 123.771 48.3054 219.57C48.3054 315.368 125.966 393.03 221.766 393.03Z"
fill="#0D0D0D"
stroke="#6B40E2"
stroke-width="0.87828"
stroke-miterlimit="10"
/>
<path
d="M407.61 304.17C407.719 307.923 406.373 311.574 403.855 314.358C402.522 315.757 400.917 316.868 399.139 317.623C397.36 318.378 395.446 318.763 393.513 318.75H81.7244C79.7584 318.75 77.8115 318.361 75.9954 317.608C74.1794 316.855 72.53 315.75 71.1412 314.358C68.4971 311.646 66.9353 308.063 66.7498 304.28C66.6407 301.726 67.2493 299.192 68.5063 296.968L215.267 26.1285C216.462 23.8975 218.246 22.0377 220.426 20.7521C222.607 19.4665 225.099 18.8047 227.628 18.8389C230.206 18.8368 232.742 19.5033 234.986 20.7732C237.228 22.0432 239.105 23.8733 240.429 26.0846L374.059 245.479L405.392 296.858C406.139 298.092 406.716 299.421 407.105 300.811C407.397 301.909 407.566 303.035 407.61 304.17Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<g style="mix-blend-mode:screen">
<g style="mix-blend-mode:screen">
<path
d="M345.427 198.425L225.059 318.816H81.7467C78.4707 318.796 75.292 317.7 72.7004 315.698L286.539 101.836L345.427 198.425Z"
fill="#802FDE"
/>
</g>
</g>
<path
d="M81.7458 318.815C79.7824 318.818 77.8381 318.431 76.0251 317.678C74.2124 316.925 72.5669 315.818 71.1845 314.424C68.5233 311.715 66.9589 308.118 66.7931 304.324C66.693 301.783 67.285 299.265 68.5058 297.034L215.266 26.1944C216.454 23.9561 218.237 22.0891 220.417 20.7989C222.6 19.5088 225.094 18.8458 227.628 18.8828C230.204 18.8802 232.735 19.5466 234.975 20.8168C237.215 22.0871 239.087 23.9175 240.407 26.1285L405.414 296.858C406.751 299.048 407.506 301.542 407.61 304.104C407.724 307.855 406.369 311.504 403.833 314.27C402.509 315.676 400.91 316.791 399.134 317.546C397.358 318.304 395.443 318.684 393.513 318.662H81.7239L81.7458 318.815Z"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M402.098 315.895L376.101 339.916C373.407 342.371 369.887 343.721 366.243 343.693H55.4414C53.3998 343.699 51.3776 343.298 49.4926 342.514C47.6076 341.73 45.8978 340.577 44.4629 339.126L71.1626 314.424C72.547 315.823 74.1957 316.929 76.0127 317.685C77.8296 318.438 79.7787 318.822 81.7459 318.815H393.535C396.631 318.8 399.637 317.775 402.098 315.895Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M68.5281 296.99C67.2788 299.219 66.6708 301.748 66.7716 304.302C66.971 308.081 68.5308 311.662 71.163 314.38L44.5072 339.126C41.7404 336.309 40.107 332.574 39.9182 328.63C39.8222 326.02 40.4368 323.431 41.6967 321.143L187.996 51.0717C188.746 49.6797 189.717 48.4189 190.873 47.3393L217.528 22.7474C216.035 24.9431 214.63 27.2925 213.356 29.6858L68.5281 296.99Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M249.739 227.562L246.204 122.344L246.006 121.927L245.589 121.751H216.519L216.123 121.927L215.97 122.344L219.505 227.562L219.68 227.979L220.097 228.155H249.168L249.563 227.979L249.739 227.562Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M251.056 268.161L250.002 237.114L249.849 236.762L249.453 236.609H220.382L220.031 236.762L219.899 237.114L220.931 268.161L221.107 268.534L221.458 268.688H250.529L250.902 268.534L251.056 268.161Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M352.686 123.122C352.513 118.722 350.686 114.549 347.572 111.435C344.459 108.322 340.285 106.496 335.887 106.322L313.985 105.404L335.992 104.55C340.373 104.394 344.534 102.594 347.647 99.5084C350.758 96.423 352.596 92.2789 352.792 87.9002L353.795 65.871L354.478 87.6442C354.616 92.0683 356.426 96.2755 359.543 99.4173C362.661 102.559 366.855 104.401 371.277 104.572L393.03 105.404L371.15 106.237C366.748 106.406 362.574 108.23 359.458 111.344C356.344 114.459 354.52 118.635 354.351 123.036L353.518 144.916L352.686 123.122Z"
fill="white"
/>
<path
d="M182.704 399.885C182.591 396.829 181.33 393.928 179.174 391.765C177.018 389.601 174.126 388.331 171.077 388.211L155.895 387.64L171.252 387.047C174.284 386.928 177.16 385.675 179.313 383.534C181.467 381.393 182.739 378.519 182.88 375.482L183.582 360.095L184.043 375.219C184.141 378.29 185.397 381.211 187.56 383.389C189.722 385.567 192.628 386.843 195.693 386.959L210.787 387.552L195.605 388.123C192.555 388.248 189.664 389.517 187.505 391.68C185.347 393.843 184.079 396.741 183.955 399.797L183.385 414.987L182.704 399.885Z"
fill="white"
/>
<path
d="M48.4104 128.224L60.3407 152.115L85.3337 154.535L73.4034 130.644L48.4104 128.224Z"
fill="#3CBF77"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M61.4715 106.775L86.4647 109.195L73.4034 130.644L48.4104 128.224L61.4715 106.775Z"
fill="white"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M85.3341 154.535L98.3968 133.064L86.4651 109.195L73.4038 130.644L85.3341 154.535Z"
fill="#4FE3A3"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M407.104 300.877C405.616 301.344 404.096 301.713 402.559 301.975C400.746 302.284 398.908 302.438 397.07 302.436C390.465 302.442 384.008 300.475 378.532 296.786C373.054 293.095 368.805 287.852 366.33 281.728C363.856 275.604 363.27 268.881 364.648 262.421C366.025 255.962 369.301 250.062 374.059 245.479L405.392 296.859C406.143 298.112 406.72 299.465 407.104 300.877Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M367.099 256.018C367.099 265.862 371.007 275.303 377.965 282.266C384.924 289.228 394.363 293.141 404.206 293.148C406.275 293.152 408.339 292.974 410.376 292.621C418.129 291.317 425.27 287.584 430.768 281.961C436.263 276.337 439.834 269.114 440.962 261.332C441.116 260.212 441.226 259.136 441.292 257.907C441.292 257.27 441.292 256.633 441.292 256.018C441.303 247.807 438.589 239.821 433.576 233.317C428.563 226.811 421.533 222.154 413.588 220.073C405.644 217.99 397.235 218.603 389.675 221.814C382.115 225.026 375.836 230.654 371.82 237.816C368.691 243.371 367.064 249.644 367.099 256.018Z"
fill="#3CBF77"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M371.468 243.108C371.462 251.32 374.178 259.301 379.193 265.805C384.206 272.308 391.234 276.968 399.178 279.049C407.122 281.133 415.532 280.525 423.091 277.319C430.653 274.113 436.938 268.49 440.962 261.332C441.208 259.571 441.333 257.797 441.336 256.018C441.347 247.807 438.633 239.821 433.62 233.317C428.607 226.811 421.576 222.154 413.632 220.073C405.688 217.99 397.279 218.603 389.719 221.814C382.159 225.026 375.88 230.654 371.864 237.816C371.598 239.568 371.464 241.336 371.468 243.108Z"
fill="#4FE2A3"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M424.451 236.475C425.794 233.69 422.681 229.402 417.495 226.895C412.308 224.39 407.015 224.616 405.669 227.4C404.323 230.184 407.436 234.472 412.622 236.977C417.809 239.485 423.105 239.259 424.451 236.475Z"
fill="white"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div >
<p>YOUR GOAL HERE</p>
<p>YOUR GOAL HERE</p>
<p>YOUR GOAL HERE</p>
</div>CodePudding user response：
I would prefer using a flex container to have that 2 columns layout.
Here I slightly changed your html to have a main container as #goals which contains only 2 main items as children with the class col containing respectively the svg element and the ordered list of goals.
I highlighted the outline of the flex items to show how they are vertically aligned relative to the container and added some further styles to better carbon copy the expected result.
You can show/hide the outline clicking on the dedicated button on top of the page.
body{
background: black;
color: white;
}
h1{
font-size: 3rem;
text-align: center;
}
.outline{
outline: solid;
}
.blue{
outline-color: blue;
}
.red{
outline-color: red;
}
/*parent flex container*/
#goals {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 5rem; /*space between columns*/
}
/*flex items (columns)*/
#goals > .col {
position: relative;
/*flex: 50%;*/ /*this will make the flex item take the whole width*/
margin: 0;
}
/*the first column is styled as flex itself to center its content*/
#goals > .col1{
display: flex;
justify-content: center;
align-items: center;
}
/*the orderered list of goals*/
ol.goals {
list-style: none;
padding-left: 2em;
}
/*each item in the list of goals*/
ol.goals > li{
border-left: solid 6px purple;
margin-bottom: 1em;
height: 3em;
padding-left: 1em;
}
/*the button join*/
#join{
margin: 1em 2em;
background: purple;
color: white;
padding: .5em 1em;
border-radius: 5px;
border: none;
box-shadow: 5px 5px 0px 0px white;
}
#goals::before,
.col::before{
position: absolute;
right: 0;
bottom: 0;
border: solid blue 5px;
background: yellow;
padding: 0 1em;
color: black;
font-weight: 600;
font-family: sans-serif;
}
#goals.outline::before{
content: '#goals';
}
.col1.outline::before{
content: '.col.col1';
}
.col2.outline::before{
content: '.col.col2';
}<h1>Our goals and mission</h1>
<div style="width:100%;text-align:center;">
<button
id="hide"
style="padding: 0.5em 1em;margin-bottom:1rem;cursor:pointer;"
onclick="document.querySelectorAll('#goals, .col').forEach( el => el.classList.toggle('outline') );">
Toggle outline</button>
</div>
<div id="goals">
<div >
<svg width="374" height="372" viewBox="0 0 444 442" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M221.766 439.579C343.03 439.579 441.336 341.273 441.336 220.009C441.336 98.7439 343.03 0.439087 221.766 0.439087C100.501 0.439087 2.1958 98.7439 2.1958 220.009C2.1958 341.273 100.501 439.579 221.766 439.579Z"
fill="#0D0D0D"
stroke="#6B40E2"
stroke-width="0.87828"
stroke-miterlimit="10"
/>
<path
d="M221.766 393.03C317.564 393.03 395.226 315.368 395.226 219.57C395.226 123.771 317.564 46.1097 221.766 46.1097C125.966 46.1097 48.3054 123.771 48.3054 219.57C48.3054 315.368 125.966 393.03 221.766 393.03Z"
fill="#0D0D0D"
stroke="#6B40E2"
stroke-width="0.87828"
stroke-miterlimit="10"
/>
<path
d="M407.61 304.17C407.719 307.923 406.373 311.574 403.855 314.358C402.522 315.757 400.917 316.868 399.139 317.623C397.36 318.378 395.446 318.763 393.513 318.75H81.7244C79.7584 318.75 77.8115 318.361 75.9954 317.608C74.1794 316.855 72.53 315.75 71.1412 314.358C68.4971 311.646 66.9353 308.063 66.7498 304.28C66.6407 301.726 67.2493 299.192 68.5063 296.968L215.267 26.1285C216.462 23.8975 218.246 22.0377 220.426 20.7521C222.607 19.4665 225.099 18.8047 227.628 18.8389C230.206 18.8368 232.742 19.5033 234.986 20.7732C237.228 22.0432 239.105 23.8733 240.429 26.0846L374.059 245.479L405.392 296.858C406.139 298.092 406.716 299.421 407.105 300.811C407.397 301.909 407.566 303.035 407.61 304.17Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<g style="mix-blend-mode:screen">
<g style="mix-blend-mode:screen">
<path
d="M345.427 198.425L225.059 318.816H81.7467C78.4707 318.796 75.292 317.7 72.7004 315.698L286.539 101.836L345.427 198.425Z"
fill="#802FDE"
/>
</g>
</g>
<path
d="M81.7458 318.815C79.7824 318.818 77.8381 318.431 76.0251 317.678C74.2124 316.925 72.5669 315.818 71.1845 314.424C68.5233 311.715 66.9589 308.118 66.7931 304.324C66.693 301.783 67.285 299.265 68.5058 297.034L215.266 26.1944C216.454 23.9561 218.237 22.0891 220.417 20.7989C222.6 19.5088 225.094 18.8458 227.628 18.8828C230.204 18.8802 232.735 19.5466 234.975 20.8168C237.215 22.0871 239.087 23.9175 240.407 26.1285L405.414 296.858C406.751 299.048 407.506 301.542 407.61 304.104C407.724 307.855 406.369 311.504 403.833 314.27C402.509 315.676 400.91 316.791 399.134 317.546C397.358 318.304 395.443 318.684 393.513 318.662H81.7239L81.7458 318.815Z"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M402.098 315.895L376.101 339.916C373.407 342.371 369.887 343.721 366.243 343.693H55.4414C53.3998 343.699 51.3776 343.298 49.4926 342.514C47.6076 341.73 45.8978 340.577 44.4629 339.126L71.1626 314.424C72.547 315.823 74.1957 316.929 76.0127 317.685C77.8296 318.438 79.7787 318.822 81.7459 318.815H393.535C396.631 318.8 399.637 317.775 402.098 315.895Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M68.5281 296.99C67.2788 299.219 66.6708 301.748 66.7716 304.302C66.971 308.081 68.5308 311.662 71.163 314.38L44.5072 339.126C41.7404 336.309 40.107 332.574 39.9182 328.63C39.8222 326.02 40.4368 323.431 41.6967 321.143L187.996 51.0717C188.746 49.6797 189.717 48.4189 190.873 47.3393L217.528 22.7474C216.035 24.9431 214.63 27.2925 213.356 29.6858L68.5281 296.99Z"
fill="#802FDE"
stroke="#020203"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M249.739 227.562L246.204 122.344L246.006 121.927L245.589 121.751H216.519L216.123 121.927L215.97 122.344L219.505 227.562L219.68 227.979L220.097 228.155H249.168L249.563 227.979L249.739 227.562Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M251.056 268.161L250.002 237.114L249.849 236.762L249.453 236.609H220.382L220.031 236.762L219.899 237.114L220.931 268.161L221.107 268.534L221.458 268.688H250.529L250.902 268.534L251.056 268.161Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M352.686 123.122C352.513 118.722 350.686 114.549 347.572 111.435C344.459 108.322 340.285 106.496 335.887 106.322L313.985 105.404L335.992 104.55C340.373 104.394 344.534 102.594 347.647 99.5084C350.758 96.423 352.596 92.2789 352.792 87.9002L353.795 65.871L354.478 87.6442C354.616 92.0683 356.426 96.2755 359.543 99.4173C362.661 102.559 366.855 104.401 371.277 104.572L393.03 105.404L371.15 106.237C366.748 106.406 362.574 108.23 359.458 111.344C356.344 114.459 354.52 118.635 354.351 123.036L353.518 144.916L352.686 123.122Z"
fill="white"
/>
<path
d="M182.704 399.885C182.591 396.829 181.33 393.928 179.174 391.765C177.018 389.601 174.126 388.331 171.077 388.211L155.895 387.64L171.252 387.047C174.284 386.928 177.16 385.675 179.313 383.534C181.467 381.393 182.739 378.519 182.88 375.482L183.582 360.095L184.043 375.219C184.141 378.29 185.397 381.211 187.56 383.389C189.722 385.567 192.628 386.843 195.693 386.959L210.787 387.552L195.605 388.123C192.555 388.248 189.664 389.517 187.505 391.68C185.347 393.843 184.079 396.741 183.955 399.797L183.385 414.987L182.704 399.885Z"
fill="white"
/>
<path
d="M48.4104 128.224L60.3407 152.115L85.3337 154.535L73.4034 130.644L48.4104 128.224Z"
fill="#3CBF77"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M61.4715 106.775L86.4647 109.195L73.4034 130.644L48.4104 128.224L61.4715 106.775Z"
fill="white"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M85.3341 154.535L98.3968 133.064L86.4651 109.195L73.4038 130.644L85.3341 154.535Z"
fill="#4FE3A3"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M407.104 300.877C405.616 301.344 404.096 301.713 402.559 301.975C400.746 302.284 398.908 302.438 397.07 302.436C390.465 302.442 384.008 300.475 378.532 296.786C373.054 293.095 368.805 287.852 366.33 281.728C363.856 275.604 363.27 268.881 364.648 262.421C366.025 255.962 369.301 250.062 374.059 245.479L405.392 296.859C406.143 298.112 406.72 299.465 407.104 300.877Z"
fill="#0D0D0D"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M367.099 256.018C367.099 265.862 371.007 275.303 377.965 282.266C384.924 289.228 394.363 293.141 404.206 293.148C406.275 293.152 408.339 292.974 410.376 292.621C418.129 291.317 425.27 287.584 430.768 281.961C436.263 276.337 439.834 269.114 440.962 261.332C441.116 260.212 441.226 259.136 441.292 257.907C441.292 257.27 441.292 256.633 441.292 256.018C441.303 247.807 438.589 239.821 433.576 233.317C428.563 226.811 421.533 222.154 413.588 220.073C405.644 217.99 397.235 218.603 389.675 221.814C382.115 225.026 375.836 230.654 371.82 237.816C368.691 243.371 367.064 249.644 367.099 256.018Z"
fill="#3CBF77"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M371.468 243.108C371.462 251.32 374.178 259.301 379.193 265.805C384.206 272.308 391.234 276.968 399.178 279.049C407.122 281.133 415.532 280.525 423.091 277.319C430.653 274.113 436.938 268.49 440.962 261.332C441.208 259.571 441.333 257.797 441.336 256.018C441.347 247.807 438.633 239.821 433.62 233.317C428.607 226.811 421.576 222.154 413.632 220.073C405.688 217.99 397.279 218.603 389.719 221.814C382.159 225.026 375.88 230.654 371.864 237.816C371.598 239.568 371.464 241.336 371.468 243.108Z"
fill="#4FE2A3"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M424.451 236.475C425.794 233.69 422.681 229.402 417.495 226.895C412.308 224.39 407.015 224.616 405.669 227.4C404.323 230.184 407.436 234.472 412.622 236.977C417.809 239.485 423.105 239.259 424.451 236.475Z"
fill="white"
stroke="#0D0D0D"
stroke-width="0.87828"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div >
<ol >
<li>Our company was founded in [...]</li>
<li>Out team is dedicated to constantly [...]</li>
<li>We prioritize the security [...]</li>
</ol>
<button id="join">Join our community</button>
</div>
</div>