Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

order-summary-card (FLEXBOX)

vintech05 370

@vintech05

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedbacks are greatly appreciated due to how messy my code was. also, do you guys have any idea how to solve bloated svg codes?

thanks in advance.

Community feedback

Adel 820

@Adel-Harrat

Posted

Hello, congratulations on completing this challenge! I see nothing wrong. Could you please explain more about what you meant by the term 'bloated'?

0

vintech05 370

@vintech05

Posted

@Adel-Harrat

Hello there Adel, Thanks for dropping by!

if you have taken a glance at my GitHub account you may notice it. the 'bloated code' here refers to one of the svg that has an excessive amount of lines of codes like:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="220"><defs><path id="a" d="M0 0h450v220H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#382AE1" xlink:href="#a"/><path fill="#1E1FCD" fill-rule="nonzero" d="M218.812 46v13.368h1.685v3.623h6.303v77.983l12.758 6.699v-12.891h3.046v14.545l2.984 1.543v112.908L31.9 266.214v-72.237h7.013V124.52h2.548v-9.55h3.045v9.55h14.15l-.001.014v.196c-.01 2.072-.088 19.036-.094 31.525v3.018c.003 5.998.028 10.37.094 10.445.066.075.784.104 1.747.108h.5c2.152-.008 5.071-.108 5.071-.108v36.439h5.786V76.399h7.379v-7.156h3.045V76.4h23.111v6.395h8.79v-13.55h3.045v13.55h4.314v23.771h10.353v42.63h12.18v38.692h6.384v-80.419h8.04V95.156h3.044v12.312h22.117V63.022h6.455v-3.654h25.75V46h3.046zM15.842 147.489v4.151h3.198L25.475 265.9H-8l6.445-114.259H.962v-4.151h14.88z" mask="url(#b)"/><path fill="#1E1FCD" fill-rule="nonzero" d="M422.812 82v13.368h1.685v3.623h6.303v77.983l12.758 6.699v-12.891h3.046v14.545l2.984 1.543v112.908L235.9 302.214v-72.237h7.013V160.52h2.548v-9.55h3.045v9.55h14.15l-.001.014v.196c-.01 2.072-.088 19.036-.094 31.525v3.018c.003 5.998.028 10.37.094 10.445.066.075.784.104 1.747.108h.5c2.152-.008 5.071-.108 5.071-.108v36.439h5.786V112.399h7.379v-7.156h3.045v7.156h23.111v6.395h8.79v-13.55h3.045v13.55h4.314v23.771h10.353v42.63h12.18v38.692h6.384v-80.419h8.04v-12.312h3.044v12.312h22.117V99.022h6.455v-3.654h25.75V82h3.046zm-202.97 101.489v4.151h3.198l6.435 114.259H196l6.445-114.259h2.517v-4.151h14.88z" mask="url(#b)"/><g fill-rule="nonzero" mask="url(#b)"><path fill="#FFF" d="M224.743 27.894c-.147-2.117-9.625 4.042-9.625 4.042s8.029-6.159 7.34-7.698c-.688-1.54-9.734 5.196-9.734 5.196s8.257-6.351 6.982-7.707c-1.275-1.357-10.093 5.782-10.093 5.782s8.992-7.9 5.56-8.092c-1.541-.082-13.643 8.138-26.754 18.008 3.67 4.582 7.34 9.008 11.304 13.288 4.202-4.344 7.514-7.799 7.964-8.376 1.348-1.732 14.744-.577 14.799-2.694.055-2.117-8.826-3.08-8.826-3.08s11.23-6.552 11.083-8.669z"/><path fill="#231F20" d="M199.667 51.125a.404.404 0 01-.302-.128c-3.524-3.812-7.12-8.037-11.332-13.316a.421.421 0 01-.091-.311.458.458 0 01.165-.284c9.698-7.332 24.837-18.081 27.002-18.081.485-.046.942.234 1.12.687.293.825-.734 2.346-2.083 3.877 2.514-1.677 5.028-2.97 5.817-2.126.186.2.273.471.238.742-.064.751-.917 1.833-2.055 3.033 1.725-1.017 3.34-1.787 4.083-1.594a.77.77 0 01.55.43c.45.963-1.275 2.924-3.284 4.766 2.156-1.155 4.34-2.09 5.175-1.668a.834.834 0 01.468.715c.137 1.98-7.157 6.561-10.286 8.43 2.863.395 8.01 1.375 7.964 3.355 0 1.439-3.037 1.677-7.945 1.933-2.863.156-6.423.349-6.937 1.008-.514.66-3.028 3.281-7.991 8.413a.45.45 0 01-.276.12zM188.96 37.498c3.955 4.949 7.34 8.972 10.717 12.6 5.817-6.01 7.34-7.679 7.624-8.018.697-.916 3.322-1.1 7.551-1.329 2.496-.137 7.139-.384 7.157-1.118 0-1.072-4.367-2.208-8.45-2.657a.413.413 0 01-.358-.33.421.421 0 01.192-.45c5.441-3.152 11.01-7.11 10.937-8.247-.569-.394-4.68 1.613-8.982 4.408a.422.422 0 01-.477-.687c4.138-3.171 7.496-6.534 7.184-7.194-.615-.303-4.799 2.144-9.093 5.36a.422.422 0 01-.514-.668c2.634-2.034 6.845-5.728 6.955-6.983v-.1c-.514-.57-5.074 2.208-9.551 5.818a.432.432 0 01-.587-.064.403.403 0 010-.577c3.202-2.823 6.477-6.415 6.184-7.23 0-.083-.211-.12-.376-.129-1.257-.064-11.543 6.653-26.113 17.595z"/><path fill="#231F20" d="M153.058 68.876c-2.698 8.514 13.597 47.837 13.597 47.837l20.186-24.917c-.45-.77-10.653-18.493-10.653-18.493s15.057-13.92 23.452-22.59c-3.945-4.28-7.67-8.743-11.304-13.288-16.111 12.133-33.792 26.76-35.278 31.451z"/><path fill="#231F20" d="M166.655 117.117h-.1a.394.394 0 01-.313-.248c-.67-1.604-16.322-39.543-13.606-48.103 1.532-4.83 19.268-19.52 35.443-31.653a.404.404 0 01.56.064c4.193 5.26 7.78 9.476 11.295 13.27.14.157.14.393 0 .55-7.735 7.991-21.287 20.583-23.241 22.388a54892.79 54892.79 0 0010.505 18.218c.09.14.09.32 0 .459l-20.185 24.908a.404.404 0 01-.358.147zm21.635-79.133c-15.23 11.473-33.379 26.393-34.865 31.011-2.44 7.698 11.258 41.853 13.322 46.93l19.617-24.166-10.506-18.255a.421.421 0 01.083-.504c.146-.137 14.827-13.746 23.176-22.296-3.376-3.666-6.826-7.716-10.827-12.72z"/><path fill="#FFF" d="M201.044 109.529c1.651 11.418 9.257 21.077 17.515 29.902 4.945 5.242 11.01 10.576 18.25 10.237 3.458-.174 6.706-1.66 9.725-3.345a73.677 73.677 0 0019.974-16.212 4.476 4.476 0 01-4.468-3.995 8.854 8.854 0 009.175-1.027c5.615-4.453 2.89-8.385-1.404-11.702a51.724 51.724 0 01-15.551-19.62c-5.359-11.97-16.002-27.96-31.765-24.313-15.157 3.5-19.268 17.082-21.36 30.553a31.9 31.9 0 00-.091 9.522z"/><path fill="#231F20" d="M236.13 150.098c-7.111 0-13.02-5.223-17.874-10.383-7.753-8.247-15.91-18.264-17.625-30.122a32.412 32.412 0 01.064-9.696c.918-5.773 2.376-13.169 5.835-19.162a23.56 23.56 0 0115.837-11.74c7.193-1.658 20.937-.678 32.25 24.551a51.119 51.119 0 0015.424 19.465c3.211 2.483 4.716 4.665 4.734 6.882 0 1.833-1.11 3.72-3.33 5.499a9.276 9.276 0 01-8.854 1.384 4.12 4.12 0 003.899 2.886.413.413 0 01.395.239.403.403 0 01-.065.449 73.292 73.292 0 01-20.084 16.358c-2.835 1.576-6.24 3.216-9.91 3.39h-.697zm-9.295-80.773c-1.439 0-2.873.164-4.276.486-14.89 3.446-18.91 16.55-21.038 30.242a31.616 31.616 0 00-.064 9.439c1.679 11.638 9.744 21.536 17.432 29.674 4.882 5.186 10.818 10.447 17.92 10.08 3.495-.165 6.789-1.76 9.542-3.29a72.532 72.532 0 0019.267-15.533 4.924 4.924 0 01-4.018-4.316.403.403 0 01.183-.376.395.395 0 01.413 0 8.431 8.431 0 008.707-.972c2.01-1.603 3.028-3.225 3.01-4.83 0-1.905-1.45-3.94-4.404-6.222a52.017 52.017 0 01-15.672-19.776c-9.074-20.308-19.662-24.606-27.002-24.606z"/><path fill="#FFF" d="M305.851 145.37c-.642 2.538-11.184 21.343-11.184 21.343l13.763 7.432s12.45-20.84 13.514-22.223c1.065-1.384 10.093-13.398 11.323-17.613 1.23-4.216-7.45-7.332-11.01-6.993-3.56.34-15.763 15.515-16.406 18.054z"/><path fill="#231F20" d="M308.411 174.567a.361.361 0 01-.193-.055l-13.762-7.432a.403.403 0 01-.202-.257.394.394 0 010-.32c3.67-6.48 10.634-19.246 11.139-21.234.679-2.694 13.02-18.044 16.744-18.328 2.707-.23 8.35 1.41 10.616 4.15a3.598 3.598 0 01.844 3.373c-1.312 4.582-11.295 17.632-11.386 17.76-1.046 1.348-13.369 21.994-13.497 22.178a.395.395 0 01-.303.165zm-13.166-8.028l13.02 7.047c1.678-2.813 12.33-20.62 13.33-21.92 2.102-2.75 10.149-13.637 11.25-17.477a2.747 2.747 0 00-.689-2.611c-2.064-2.502-7.431-4.06-9.89-3.85-3.358.294-15.451 15.58-16.011 17.742-.606 2.392-9.487 18.347-11.01 21.069z"/><path fill="#231F20" d="M301.897 153.498l-12.295 14.975-26.516-17.751-11.295 21.004s37.554 28.161 42.876 25.467c5.321-2.694 21.442-35.924 21.442-35.924l-14.212-7.77z"/><path fill="#231F20" d="M293.814 197.761c-7.744 0-38.6-22.965-42.27-25.714a.412.412 0 01-.11-.514l11.294-21.004a.404.404 0 01.578-.147l26.195 17.55 12.066-14.663a.395.395 0 01.504-.1l14.258 7.77a.412.412 0 01.165.532c-.66 1.366-16.267 33.385-21.662 36.107-.32.141-.67.204-1.018.183zm-41.509-26.154c10.607 7.927 38.031 27.327 42.206 25.229 4.853-2.466 19.387-31.855 21.103-35.392l-13.616-7.433-12.084 14.718a.386.386 0 01-.532.083l-26.158-17.513-10.919 20.308zM313.155 116.878l-.12 36.62h17.351v-36.62z"/><path fill="#231F20" d="M330.386 153.938h-17.35a.404.404 0 01-.404-.412l.11-36.657a.413.413 0 01.413-.403h17.23c.224 0 .404.18.404.403v36.657a.403.403 0 01-.403.412zm-16.938-.806h16.516v-35.85H313.54l-.092 35.85z"/><path fill="#FFF" d="M314.916 120.113l-.091 28.776h13.781v-28.776z"/><path fill="#231F20" d="M328.606 149.301h-13.763a.404.404 0 01-.294-.119.403.403 0 01-.119-.302l.083-28.767a.422.422 0 01.422-.412h13.689c.228 0 .413.184.413.412v28.776a.413.413 0 01-.431.412zm-13.36-.861h12.938v-27.905h-12.846l-.091 27.905z"/><path fill="#FFF" d="M305.099 147.276s-2.587-12.335 1.294-14.269c3.88-1.933 17.221-4.197 15.157-1.173s-9.294 4.894-9.294 4.894 1.486 4.316-.147 7.377"/><path fill="#231F20" d="M305.099 147.688a.404.404 0 01-.404-.33c-.11-.513-2.615-12.674 1.514-14.727 3.35-1.658 14.157-3.794 15.735-1.997a1.09 1.09 0 01-.055 1.438c-1.835 2.75-7.496 4.49-9.11 4.95.339 1.2 1.11 4.636-.303 7.33a.422.422 0 01-.57.165.43.43 0 01-.173-.568c1.532-2.859.137-6.992.119-7.038a.412.412 0 010-.33.44.44 0 01.266-.21c.073 0 7.101-1.833 9.056-4.72.137-.202.174-.348.11-.422-.991-1.136-11.01.367-14.735 2.2-2.946 1.466-1.762 10.456-1.065 13.801a.412.412 0 01-.32.495l-.065-.037z"/><path fill="#75ECCA" d="M209.173 123.32l-22.855-39.185-25.69 28.491 9.541 20.546s-14.68 34.705-14.68 102.73c0 0 78.154-.339 97.825-.339l-25.69-39.91s6.423-18.493 9.735-23.112l19.13 10.402 22.37-30.434-69.686-29.188z"/><path fill="#231F20" d="M208.843 160.674c12.615 7.331 15.597-22.47 16.157-28.922.256-1.775.15-3.583-.312-5.316-.725-2.199-2.422-3.903-4.12-5.498-2.027-1.833-4.367-3.757-7.129-3.876a8.26 8.26 0 00-6.578 3.436 20.15 20.15 0 00-3.156 6.983c-2.973 10.365-2.863 21.307 2.871 30.728a6.591 6.591 0 001.991 2.263l.276.202z"/><path fill="#231F20" d="M212.614 162.232a7.934 7.934 0 01-3.973-1.21l-.285-.174a6.903 6.903 0 01-2.12-2.401c-5.256-8.642-6.266-19.373-2.917-31.048a20.562 20.562 0 013.22-7.12 8.6 8.6 0 016.919-3.593c2.826.119 5.22 1.988 7.34 3.986 1.725 1.586 3.468 3.336 4.23 5.636.473 1.793.586 3.662.33 5.499-.853 9.613-3.303 26.264-10.093 29.774a5.725 5.725 0 01-2.651.65zm.568-44.74a7.875 7.875 0 00-6.01 3.281 19.801 19.801 0 00-3.073 6.846c-3.294 11.455-2.312 21.994 2.826 30.406a6.17 6.17 0 001.835 2.136l.266.155c2.184 1.274 4.11 1.448 5.881.532 4.716-2.438 8.258-13.05 9.671-29.133a13.135 13.135 0 00-.294-5.16c-.697-2.116-2.358-3.775-4.01-5.296-2.054-1.888-4.302-3.666-6.871-3.767h-.22zm33.306-12.701c1.165 4.224-.743 9.604-3.606 12.729-1.908 2.062-6.092 2.612-6.936-.743a17 17 0 012.174-13.04c1.835-3.015 5.35-4.738 7.607-.862.335.603.591 1.247.761 1.916z"/><path fill="#231F20" d="M239.084 119.582a4.414 4.414 0 01-1.046-.12 3.393 3.393 0 01-2.487-2.593 17.477 17.477 0 012.184-13.334c1.285-2.062 3.101-3.308 4.799-3.299.963 0 2.349.45 3.505 2.447.364.63.648 1.305.844 2.007 1.266 4.582-.918 10.08-3.67 13.105a5.729 5.729 0 01-4.13 1.787zm3.404-18.54c-1.395 0-2.945 1.11-4.065 2.906a16.634 16.634 0 00-2.083 12.729c.19.978.93 1.758 1.9 1.997a4.765 4.765 0 004.34-1.43c2.587-2.803 4.697-8.091 3.523-12.343a7.711 7.711 0 00-.762-1.833c-.78-1.338-1.725-2.025-2.816-2.035l-.037.01z"/><path fill="#FFF" d="M226.808 123.696c-1.836 7.03-3.67 23.04-15.369 14.663a14.835 14.835 0 01-3.101-3.317c-5.762-7.67-4.12-12.51-1.138-20.931 1.285-3.666 2.395-7.332 3.67-10.997 1.276-3.666 3.377-7.112 5.12-10.585-.064.12 5.734.916 11.533-1.714 5.799-2.63 10.597-5.36 10.597-5.36 1.57 2.345 3.267 4.123 4.102 6.91.77 2.702.992 5.53.651 8.32-.734 6.846-3.477 14.25-6.588 20.363-3.11 6.112-9.477 2.648-9.477 2.648z"/><path fill="#231F20" d="M217.348 141.172c-1.835 0-3.881-.824-6.157-2.456a15.32 15.32 0 01-3.193-3.409c-5.936-7.908-4.147-12.958-1.192-21.315.614-1.76 1.202-3.565 1.77-5.307.615-1.878 1.248-3.812 1.927-5.709a60.45 60.45 0 013.624-7.725c.514-.972 1.028-1.943 1.514-2.914a.413.413 0 01.56-.184 21.125 21.125 0 0011.148-1.723 155.555 155.555 0 0010.56-5.351.432.432 0 01.56.137c.395.587.79 1.136 1.184 1.677a17.241 17.241 0 012.972 5.334c.783 2.76 1.01 5.647.67 8.495-.67 6.13-3.018 13.416-6.633 20.5a6.695 6.695 0 01-3.973 3.602 8.515 8.515 0 01-5.625-.504 96.92 96.92 0 00-.568 2.391c-1.212 5.251-2.863 12.455-7.24 14.104a5.51 5.51 0 01-1.908.357zm-1.101-48.176c-.44.917-.918 1.76-1.376 2.64a60.01 60.01 0 00-3.579 7.624c-.67 1.833-1.302 3.813-1.917 5.682-.615 1.87-1.156 3.556-1.78 5.324-2.964 8.377-4.588 12.986 1.082 20.537a14.55 14.55 0 003.01 3.235c2.88 2.071 5.34 2.75 7.34 1.998 3.954-1.494 5.505-8.43 6.716-13.499.248-1.063.468-2.062.698-2.914a.43.43 0 01.605-.266 8.01 8.01 0 005.505.67 5.842 5.842 0 003.46-3.172c3.568-7 5.899-14.186 6.55-20.216a20.66 20.66 0 00-.642-8.156 16.573 16.573 0 00-2.881-5.086c-.33-.449-.67-.916-.99-1.384a164.07 164.07 0 01-10.295 5.187 22.044 22.044 0 01-11.506 1.796z"/><path fill="#231F20" d="M224.88 130.496s-5.679-1.292-8.257-6.011c-2.578-4.72-1.018-8.34-1.018-8.34s4.954 5.728 11.22 7.579l-1.944 6.772z"/><path fill="#231F20" d="M224.88 130.9h-.091c-.239-.056-5.89-1.384-8.533-6.205-2.642-4.82-1.11-8.54-1.046-8.697a.404.404 0 01.312-.238.422.422 0 01.367.129c0 .055 4.964 5.663 11.01 7.46a.404.404 0 01.276.503l-1.9 6.754a.404.404 0 01-.394.293zm-9.12-13.958a10.217 10.217 0 001.203 7.332c2.1 3.83 6.358 5.333 7.633 5.709l1.716-6.003c-5.074-1.622-9.184-5.599-10.551-7.038zm12.598-4.792a7.64 7.64 0 01-3.275-1.027.406.406 0 11.403-.705c.707.403 2.753 1.32 3.67.723.597-.384-.055-4.15-1.431-8.247a.406.406 0 11.77-.257c.827 2.447 2.579 8.248 1.093 9.164-.369.23-.795.351-1.23.349z"/><path fill="#231F20" d="M226.68 117.117a6.135 6.135 0 01-2.753-.605c-2.294-1.137-3.67-3.803-4.148-7.927a.413.413 0 01.358-.45.404.404 0 01.45.358c.431 3.83 1.67 6.287 3.67 7.331 3.055 1.512 6.955-.779 6.991-.797a.404.404 0 01.56.138.412.412 0 01-.138.559 11.02 11.02 0 01-4.99 1.393zm.43-18.292a.404.404 0 01-.403-.376c-.065-.916-.33-1.475-.808-1.714-.917-.476-2.633.385-3.202.761a.407.407 0 01-.45-.678c.101-.064 2.45-1.586 4.01-.807a2.611 2.611 0 011.257 2.383.403.403 0 01-.376.43h-.028zm10.176 4.545a.404.404 0 01-.404-.366s-.184-2.016-1.33-2.75c-.991-.65-2.148.834-2.157.853a.404.404 0 01-.569.073.403.403 0 01-.082-.568c.56-.733 1.954-1.888 3.257-1.036 1.477.972 1.68 3.281 1.688 3.373a.403.403 0 01-.367.44l-.036-.019zm-32.27-2.217a8.138 8.138 0 00.735 4.26c1.302 2.411 4.514 3.392 7.138 2.613 6.854-2.026 10.148-15.048 4.964-20.162-4.817-4.747-10.286 2.75-11.414 7.176-.523 2.08-1.349 4.005-1.422 6.113z"/><path fill="#231F20" d="M211.054 108.695a6.424 6.424 0 01-5.661-3.089 8.34 8.34 0 01-.78-4.472c.126-1.534.434-3.047.917-4.509.166-.559.33-1.118.477-1.677.799-3.079 3.762-7.853 7.258-8.816a4.83 4.83 0 014.835 1.448c2.505 2.466 3.322 6.929 2.138 11.648-1.183 4.72-3.964 8.248-7.267 9.164a7.137 7.137 0 01-1.917.303zm-5.634-7.524a7.653 7.653 0 00.688 4.06 5.83 5.83 0 006.67 2.41c3.038-.917 5.607-4.197 6.708-8.605 1.1-4.408.376-8.615-1.918-10.878a4.03 4.03 0 00-4.055-1.256c-3.156.917-5.955 5.435-6.689 8.248a59.1 59.1 0 01-.477 1.705 18.63 18.63 0 00-.918 4.316h-.009z"/><path fill="#231F20" d="M243.12 109.208a.918.918 0 01-.788-1.393c.1-.165 10.276-16.88 12.02-27.3.632-3.776-1.047-7.606-4.726-10.805-5.028-4.362-12.533-6.314-17.846-4.637-9.45 2.988-14.478 24.743-14.533 24.927a.918.918 0 01-1.79-.403c.212-.917 5.322-22.975 15.773-26.274 5.973-1.879 14.029.174 19.598 5.003 4.184 3.666 6.083 8.065 5.34 12.491-1.835 10.777-11.845 27.254-12.267 27.951a.918.918 0 01-.78.44z"/><path fill="#231F20" d="M292.868 239a31.312 31.312 0 01-9.68-1.567 31.764 31.764 0 01-10.156-5.902c-5.092-4.115-9.579-9.027-13.919-13.746-2.752-3.015-5.597-6.13-8.57-9.008-9.312-9.018-18.56-13.82-27.525-14.26-12.056-.605-22.745 6.278-32.489 13.801-.917.733-1.908 1.494-2.881 2.264-7.881 6.24-16.818 13.306-27.828 11.648-7.505-1.128-13.332-6.296-16.892-10.43-8.762-10.18-12.845-24.743-10.817-38.865 2.147-15.212 10.634-25.934 25.232-31.873 12.083-4.911 23.488-11.785 34.526-18.429l.091-.045c6.836-4.124 14.093-9.403 16.048-17.32a.471.471 0 01.917.22c-2.037 8.247-9.469 13.663-16.47 17.878l-.082.055c-11.065 6.663-22.506 13.554-34.654 18.494-14.277 5.8-22.571 16.275-24.672 31.158-1.964 13.856 2 28.106 10.57 38.086 3.459 4.023 9.101 9.045 16.331 10.127 10.616 1.603 19.011-5.04 27.122-11.456l2.89-2.272c9.891-7.634 20.745-14.617 33.095-13.994 9.175.458 18.625 5.343 28.103 14.516 2.991 2.905 5.845 6.03 8.607 9.054 4.312 4.729 8.771 9.614 13.817 13.682a30.956 30.956 0 009.854 5.746c12.396 3.996 24.773.064 36.875-11.693 17.956-17.485 28.076-43.988 27.755-72.8-.147-13.453-2.66-23.965-7.689-32.148-2.027-3.309-4.587-6.993-8.753-8.835-2.128-.916-7.12-1.264-9.046 1.44-.734 1.035-.808 2.254-.918 3.802 0 .67-.092 1.42-.193 2.236a.463.463 0 01-.917-.119c.11-.788.147-1.493.193-2.172.1-1.63.192-3.033 1.082-4.28 2.239-3.143 7.726-2.813 10.166-1.74 4.441 1.942 7.056 5.764 9.175 9.164 5.12 8.33 7.67 18.997 7.827 32.624.32 29.032-9.891 55.81-28.03 73.46-9.194 8.99-18.617 13.49-28.095 13.499zM204.172 37.022a.477.477 0 01-.348-.156.467.467 0 010-.65c2.018-1.751 4.019-2.52 5.954-2.301a6.424 6.424 0 014.166 2.374c.145.206.1.49-.1.641a.46.46 0 01-.643-.1 5.58 5.58 0 00-3.523-2.026c-1.67-.193-3.432.513-5.249 2.09a.45.45 0 01-.257.128z"/><path fill="#231F20" d="M231.505 185.39a.478.478 0 01-.192 0 .43.43 0 01-.184-.569l11.579-23.185a.417.417 0 01.743.376l-11.57 23.148a.413.413 0 01-.376.23zm-21.57 4.518c-13.259 0-28.838-4.29-29.7-4.528a.422.422 0 11.22-.806c.284.073 28.103 7.744 40.967 2.84.218-.08.46.031.541.248a.403.403 0 01-.239.532 34.077 34.077 0 01-11.79 1.714zM320.403 114.312h2v2.969h-2z"/><path fill="#231F20" d="M322.403 117.685h-2a.413.413 0 01-.413-.404v-2.969a.403.403 0 01.413-.403h2c.223 0 .404.18.404.403v2.97a.403.403 0 01-.404.403zm-1.596-.816H322v-2.153h-1.193v2.153z"/><path fill="#FFF" d="M213.026 105.661l-.66-.641a13.34 13.34 0 002.358-15.763l.789-.467a14.283 14.283 0 01-2.487 16.871zm30.278 12.024l-.853-.34c2.68-6.9 2-11.995 2-12.041l.918-.128c.018.192.706 5.36-2.065 12.509zM169.236 79.78l6.647-6.787.655.64-6.646 6.788zM289.407 168.901l.403-.823 7.062 3.453-.403.824z"/><path fill="#CD7DF3" d="M53.797 105.082c-.386-.091-.799-.155-1.175-.284a3.503 3.503 0 01-2.514-2.392 3.662 3.662 0 01.55-2.978 6.67 6.67 0 014.423-2.896c1.184-.266 1.716-.201 3.597.257V74.72l21.727-4.343v26.988a4.58 4.58 0 01-1.606 3.666 6.777 6.777 0 01-6.634 1.631 3.366 3.366 0 01-2.514-2.383 3.552 3.552 0 01.542-2.969 6.616 6.616 0 014.44-2.896 6.301 6.301 0 013.56.257V79.496l-1.541.302a5773.252 5773.252 0 01-15.479 3.089c-.284.055-.33.165-.33.421v16.093a4.92 4.92 0 01-2.12 4.206 7.271 7.271 0 01-3.467 1.411 1.58 1.58 0 00-.193.064h-1.266zm343.808 63.248v-.523a2.802 2.802 0 00-.523-1.328 5.832 5.832 0 00-1.77-1.677 6.528 6.528 0 00-2.303-.917c-.521-.1-1.057-.1-1.578 0h-.138a1.108 1.108 0 010-.183c.092-.358.183-.706.284-1.045l1.835-6.415c.67-2.328 1.35-4.655 2.019-6.983v-.137l-.642-.055a11.426 11.426 0 00-5.13.916 7.402 7.402 0 00-3.587 3.143c-.23.404-.403.834-.596 1.265-.129.275-.23.568-.349.852a.467.467 0 000 .12l.23-.138c.728-.478 1.492-.9 2.284-1.265a8.156 8.156 0 013.9-.696 7.136 7.136 0 011.688.376.76.76 0 000 .137c-1.113 3.861-2.217 7.72-3.312 11.574a.53.53 0 000 .211c.078.682.367 1.322.825 1.833a6.045 6.045 0 002.147 1.659l.716.311.66.193h.184a4.18 4.18 0 001.652 0c.459-.065.879-.293 1.183-.642.1-.139.191-.282.276-.43l.045-.156zm-326.47 9.016c0-.22 0-.45.102-.67.16-.604.477-1.157.917-1.603a7.68 7.68 0 012.624-1.787 8.413 8.413 0 013.138-.706 5.511 5.511 0 012.028.321l.174.064c.005-.079.005-.159 0-.238 0-.467-.092-.916-.147-1.393-.348-2.89-.7-5.77-1.055-8.642-.385-3.134-.78-6.259-1.165-9.384v-.183c.284 0 .569 0 .835.064 2.281.227 4.479.977 6.423 2.19a9.643 9.643 0 013.954 4.766c.2.57.369 1.152.505 1.74.11.386.183.78.275 1.174a.293.293 0 010 .156l-.266-.23a22.815 22.815 0 00-2.68-2.089 10.44 10.44 0 00-4.853-1.677 9.241 9.241 0 00-2.248.128c.005.058.005.117 0 .175.612 5.18 1.239 10.373 1.881 15.579a.65.65 0 010 .265 4.316 4.316 0 01-1.44 2.227 7.71 7.71 0 01-3.102 1.686c-.32.101-.651.175-.972.257l-.918.11H75a5.4 5.4 0 01-2.13-.293 2.44 2.44 0 01-1.375-1.054 4.634 4.634 0 01-.276-.614l-.082-.34zm219.697-81.28c.119-.238.22-.485.357-.705a4.393 4.393 0 011.689-1.457 9.276 9.276 0 013.67-.99 10.104 10.104 0 013.817.43 6.36 6.36 0 012.165 1.165l.174.137a1.63 1.63 0 00.11-.266c.138-.54.266-1.081.386-1.631l2.202-10.172c.789-3.666 1.575-7.35 2.358-11.052l.046-.22c.32.137.624.256.917.394a17.815 17.815 0 016.368 4.985 11.484 11.484 0 012.605 6.937c0 .72-.036 1.439-.11 2.154 0 .486-.1.916-.156 1.439a.394.394 0 01-.055.165l-.22-.358a26.572 26.572 0 00-2.202-3.4 12.402 12.402 0 00-4.826-3.803 10.543 10.543 0 00-2.587-.724h-.065a1.42 1.42 0 01-.046.211l-3.963 18.274a.916.916 0 01-.12.302 5.192 5.192 0 01-2.495 1.952 9.396 9.396 0 01-4.166.687c-.403 0-.798-.055-1.202-.091l-1.055-.22-.174-.074a6.425 6.425 0 01-2.285-1.164 3.033 3.033 0 01-1.147-1.732 7.58 7.58 0 01-.064-.797l.074-.376z"/><path fill="#698DFF" d="M38.092 50.8c-4.725 0-4.734 7.331 0 7.331 4.735 0 4.735-7.33 0-7.33zm357 8c-4.725 0-4.734 7.331 0 7.331 4.735 0 4.735-7.33 0-7.33zm-60.38-16.883a1.933 1.933 0 00-.467-.806l-.376-.284a1.837 1.837 0 00-.918-.257h-.514a1.34 1.34 0 00-.706.165c-.23.07-.435.2-.596.376a1.43 1.43 0 00-.377.586c-.115.217-.169.461-.156.706l.065.495c.086.304.247.58.468.806l.376.285c.279.161.595.246.917.247h.514c.245.014.49-.04.707-.156.226-.075.43-.204.596-.376a2.07 2.07 0 00.532-1.3c-.018-.157-.046-.322-.064-.487zm-219.15-8.568c-2.955 0-2.964 4.582 0 4.582 2.963 0 2.954-4.582 0-4.582zm264.333 44.49c-2.955 0-2.955 4.583 0 4.583 2.954 0 2.954-4.582 0-4.582z"/></g></g></svg>

it's the one that I inserted into hero-img class, do you know how to minimize this?

0
Adel 820

@Adel-Harrat

Posted

@vintech05

I'm using react js (JS Library), so I put svg code like this in a seperate file and import it,

import logo from "./assets/logo.svg";

function App() {
return {
<img src={logo} alt="logo goes here" />
}
}

if you're using html, I don't know how to do the same (probably there's isn't a way)

Happy coding,

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord