Skip to content
Submitted 5 months ago

Order-Summary-Component

Tuğçe Kızıldağ•290
@tugcekizildg
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Lauris•200
    @EdanriellPosted 5 months ago

    Not bad. Styles are little bit of, but that's kinda ok.

    But what is definitely bad is your html structure, it's bizarre. Let's take a look at it.

    <body>
  <div class="card-wrapper">
    <main>
      <section class="hero-section">
        <img src="images/illustration-hero.svg" alt="a girl listening music on her phone and dancing">
        <h1>Order Summary</h1>
        <p> You can now listen to millions of songs, audiobooks, and podcasts on any
          device anywhere you like!</p>
      </section>
      <section class="payment-section">
        <div class="payment-info">
          <img src="images/icon-music.svg" alt="music icon">
          <div class="payment-info-text">
            <h2>Annual Plan</h2>
            <p class="price">$59.99/year</p>
          </div>
        </div>
        <a href="#" class="link">Change</a>
      </section>
      <div class="btn-wrapper">
        <button class="primary-btn">
          Proceed to Payment
        </button>
        <button class="secondary-btn">Cancel Order </button>
      </div>
    </main>
  </div>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="https://github.com/tugcekizildg/Order-Summary-Component-Challenge">Tuğçe KIZILDAĞ</a>.
  </div>
</body>

    Here we can see a lot of mistakes, a lot. Firstly your usage of main tag. In main we put individual sections of your website, they are isolated. Also as a rule of thumb our body should contain header, footer if they are present in design. Also main can contain some decorative stuff. For example:

    <body>
<header>If we have one</header>
<main class="main">
	<svg class="wave wave--size--small" height="190" preserveAspectRatio="none" viewBox="0 0 375 190" width="375" xmlns="http://www.w3.org/2000/svg">
		<path clip-rule="evenodd" d="M-131.808 155.366C-131.808 155.366 13.7308 232.634 189.812 155.366C365.894 78.0977 507.46 155.366 507.46 155.366V0H-131.808V155.366Z" fill="#D6E1FF" fill-rule="evenodd" />
	</svg>
	<svg class="wave wave--size--large" fill="none" height="428" preserveAspectRatio="none" viewBox="0 0 1440 428" width="1440" xmlns="http://www.w3.org/2000/svg">
		<path clip-rule="evenodd" d="M0 349.974C0 349.974 327.837 524.026 724.475 349.974C1121.11 175.921 1440 349.974 1440 349.974V0H0V349.974Z" fill="#D6E1FF" fill-rule="evenodd" />
	</svg>
	<h1 class="visually-hidden">Order summary component</h1>
	<article>Order summary component goes here</article>
</main>
<footer>If we have one</footer>
</body>

    Also your usage of section tag is wrong. We use section tag for those components of our page that are contextualy binded to our webpage. Meaning if we put our section in another webpage it will loose it's meaning, it is not independent. So for things that are not bound to the context of our page, which are independent often reusable, like product cards, or for example blog posts, comments and etc. You use article tag. Also there is aside, which is often, unfortunetly misused. We often use aside tag in section or article, which extends it in some or other way, it adds more context, meaning and information. Tag aside is often used for drawers, side menus you name it, as a result tag is not used properly and we break the rules of semantic html.

    Next problem, usage of h1. h1 tag can't contain the name of your card, it's clearly h2. Your h2 also used wrong, you used it for text Annual plan, however it is clearly just a text, so you should use p tag instead.

    Next, why do you used button element for clearly a links ? Remember we use buttons for actions some sort, links for traveling to some where or getting something. For example when we click on Proceed to payment we travel to another page. So it is a link !

    So with this all being sad your html structure must look something like this:

    <body>
<main class="main">
	<svg class="wave wave--size--small" height="190" preserveAspectRatio="none" viewBox="0 0 375 190" width="375" xmlns="http://www.w3.org/2000/svg">
		<path clip-rule="evenodd" d="M-131.808 155.366C-131.808 155.366 13.7308 232.634 189.812 155.366C365.894 78.0977 507.46 155.366 507.46 155.366V0H-131.808V155.366Z" fill="#D6E1FF" fill-rule="evenodd" />
	</svg>
	<svg class="wave wave--size--large" fill="none" height="428" preserveAspectRatio="none" viewBox="0 0 1440 428" width="1440" xmlns="http://www.w3.org/2000/svg">
		<path clip-rule="evenodd" d="M0 349.974C0 349.974 327.837 524.026 724.475 349.974C1121.11 175.921 1440 349.974 1440 349.974V0H0V349.974Z" fill="#D6E1FF" fill-rule="evenodd" />
	</svg>
	<h1 class="visually-hidden">Order summary component</h1>
	<article class="order-summary-card">
	<header class="order-summary-card__header">
		<svg class="order-summary-card__image" fill="none" height="220" viewBox="0 0 450 220" width="450" xmlns="http://www.w3.org/2000/svg">
			<path d="M0 20C0 8.9543 8.95431 0 20 0H430C441.046 0 450 8.95431 450 20V220H0V20Z" fill="#382AE1"/>
			<mask height="220" id="mask0_0_87" maskUnits="userSpaceOnUse" style="mask-type:luminance" width="450" x="0" y="0">
				<path d="M0 20C0 8.9543 8.95431 0 20 0H430C441.046 0 450 8.95431 450 20V220H0V20Z" fill="white"/>
			</mask>
			<g mask="url(#mask0_0_87)">
				<path clip-rule="evenodd" d="M242.604 134.782V149.327L245.588 150.87V263.778L31.8997 266.214V193.977H38.9133V124.52H41.461V114.969H44.506V124.52H58.6551C58.6551 124.52 58.4419 169.475 58.6551 169.718C58.8682 169.962 65.9732 169.718 65.9732 169.718V206.157H71.7587V76.3993H79.1377V69.2435H82.1828V76.3993H105.294V82.7938H114.084V69.2435H117.129V82.7938H121.443V106.565H131.796V149.195H143.976V187.887H150.36V107.468H158.399V95.1564H161.444V107.468H183.561V63.0215H190.016V59.3675H215.767V46H218.812V59.3675H220.497V62.9911H226.8V140.974L239.559 147.673V134.782H242.604ZM15.8424 151.64H19.0396L25.4747 265.899H-8L-1.55475 151.64H0.96245V147.489H15.8424V151.64Z" fill="#1E1FCD" fill-rule="evenodd"/>
				<path clip-rule="evenodd" d="M446.604 170.782V185.327L449.588 186.87V299.778L235.9 302.214V229.977H242.913V160.52H245.461V150.969H248.506V160.52H262.655C262.655 160.52 262.442 205.475 262.655 205.718C262.868 205.962 269.973 205.718 269.973 205.718V242.157H275.759V112.399H283.138V105.243H286.183V112.399H309.294V118.794H318.084V105.243H321.129V118.794H325.443V142.565H335.796V185.195H347.976V223.887H354.36V143.468H362.399V131.156H365.444V143.468H387.561V99.0215H394.016V95.3675H419.767V82H422.812V95.3675H424.497V98.9911H430.8V176.974L443.559 183.673V170.782H446.604ZM219.842 187.64H223.04L229.475 301.899H196L202.445 187.64H204.962V183.489H219.842V187.64Z" fill="#1E1FCD" fill-rule="evenodd"/>
				<path d="M224.743 27.8941C224.596 25.7772 215.118 31.9355 215.118 31.9355C215.118 31.9355 223.146 25.7772 222.458 24.2376C221.77 22.698 212.724 29.4337 212.724 29.4337C212.724 29.4337 220.981 23.0829 219.706 21.7266C218.43 20.3703 209.613 27.5092 209.613 27.5092C209.613 27.5092 218.605 19.6097 215.173 19.4173C213.632 19.3348 201.53 27.5551 188.419 37.4249C192.089 42.007 195.759 46.4333 199.722 50.7129C203.925 46.3691 207.237 42.9142 207.686 42.3369C209.035 40.6048 222.431 41.7595 222.486 39.6426C222.541 37.5257 213.659 36.5634 213.659 36.5634C213.659 36.5634 224.89 30.0111 224.743 27.8941Z" fill="white"/>
				<path clip-rule="evenodd" d="M199.365 50.997C199.443 51.0808 199.553 51.1274 199.667 51.1253C199.77 51.1183 199.867 51.0762 199.943 51.0062C204.906 45.8742 207.42 43.2533 207.934 42.5935C208.447 41.935 211.993 41.742 214.853 41.5864L214.871 41.5854C219.779 41.3288 222.816 41.0905 222.816 39.6518C222.862 37.6723 217.715 36.6917 214.852 36.2977C217.981 34.4282 225.275 29.8461 225.137 27.8666C225.125 27.5606 224.945 27.2862 224.67 27.1518C223.835 26.7303 221.651 27.665 219.495 28.8197C221.504 26.9777 223.229 25.0166 222.779 24.0544C222.675 23.8311 222.471 23.671 222.229 23.6236C221.486 23.4312 219.871 24.201 218.146 25.2182C219.284 24.0177 220.137 22.9363 220.201 22.1849C220.236 21.9143 220.149 21.6422 219.963 21.4426C219.174 20.5995 216.66 21.8916 214.146 23.5687C215.494 22.0382 216.522 20.517 216.228 19.6922C216.051 19.2394 215.594 18.959 215.109 19.0049C212.944 19.0049 197.805 29.7545 188.107 37.0858C188.018 37.1569 187.959 37.2581 187.941 37.3699C187.929 37.4818 187.962 37.594 188.033 37.6815C192.245 42.96 195.841 47.1847 199.365 50.997ZM199.676 50.0989C196.3 46.4699 192.914 42.4468 188.96 37.4982C203.53 26.5562 213.815 19.8388 215.072 19.903C215.238 19.9121 215.449 19.9488 215.449 20.0313C215.742 20.8469 212.467 24.4392 209.265 27.2618C209.187 27.3377 209.143 27.4418 209.143 27.5505C209.143 27.6592 209.187 27.7633 209.265 27.8392C209.413 28.0121 209.67 28.0402 209.852 27.9033C214.329 24.2926 218.889 21.5159 219.403 22.0841V22.1849C219.293 23.4404 215.082 27.1335 212.448 29.168C212.263 29.3097 212.228 29.5743 212.37 29.759C212.512 29.9438 212.777 29.9787 212.962 29.8369C217.256 26.6203 221.44 24.1735 222.055 24.4759C222.367 25.1357 219.008 28.499 214.871 31.6698C214.713 31.8118 214.685 32.0489 214.806 32.2233C214.927 32.3977 215.159 32.455 215.348 32.3571C219.651 29.562 223.761 27.5551 224.33 27.9491C224.403 29.0855 218.834 33.0444 213.393 36.1969C213.24 36.2903 213.163 36.4705 213.201 36.6459C213.235 36.8219 213.38 36.9553 213.558 36.9758C217.641 37.4249 222.009 38.5612 222.009 39.6334C221.991 40.3585 217.449 40.6085 214.935 40.7469L214.852 40.7515C210.622 40.9806 207.998 41.1639 207.301 42.0803C207.017 42.4194 205.494 44.0872 199.676 50.0989Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M153.058 68.8763C150.36 77.3898 166.655 116.713 166.655 116.713L186.84 91.7959C186.391 91.0261 176.188 73.3026 176.188 73.3026C176.188 73.3026 191.244 59.3822 199.64 50.7129C195.694 46.4332 191.969 41.9703 188.336 37.4249C172.224 49.5582 154.544 64.1842 153.058 68.8763Z" fill="#231F20"/>
				<path clip-rule="evenodd" d="M166.554 117.117H166.655C166.792 117.132 166.926 117.076 167.013 116.97L187.198 92.0617C187.289 91.9223 187.289 91.7429 187.198 91.6035C186.785 90.8887 177.996 75.6486 176.693 73.3851C178.647 71.5798 192.199 58.9882 199.933 50.997C200.074 50.8405 200.074 50.6037 199.933 50.4472C196.419 46.6532 192.832 42.4377 188.639 37.1775C188.5 37.0081 188.252 36.9797 188.079 37.1133C171.903 49.2467 154.168 63.9368 152.636 68.7664C149.92 77.3257 165.572 115.265 166.242 116.869C166.294 117.002 166.413 117.096 166.554 117.117ZM153.425 68.9955C154.911 64.3767 173.059 49.4574 188.29 37.9839C192.29 42.9875 195.74 47.0381 199.117 50.7038C191.065 58.9496 177.124 71.9003 176.01 72.9352C175.969 72.9734 175.946 72.9953 175.94 73.0002C175.802 73.1305 175.769 73.3368 175.858 73.5042L186.363 91.7593L166.747 115.925C164.682 110.848 150.984 76.6934 153.425 68.9955Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M201.044 109.529C202.695 120.947 210.301 130.606 218.559 139.431C223.504 144.673 229.569 150.007 236.808 149.668C240.267 149.494 243.515 148.009 246.534 146.323C254.093 142.131 260.854 136.644 266.508 130.111C264.214 130.12 262.284 128.394 262.04 126.116C265.049 127.522 268.592 127.125 271.215 125.089C276.83 120.636 274.105 116.704 269.811 113.387C263.097 108.217 257.757 101.479 254.259 93.7662C248.901 81.7978 238.258 65.8063 222.495 69.4536C207.338 72.9544 203.227 86.5357 201.135 100.007C200.629 103.158 200.598 106.368 201.044 109.529Z" fill="white"/>
				<path clip-rule="evenodd" d="M218.256 139.715C223.11 144.875 229.019 150.098 236.129 150.098H236.827C240.497 149.924 243.901 148.284 246.736 146.708C254.35 142.49 261.151 136.95 266.82 130.35C266.932 130.227 266.957 130.049 266.884 129.901C266.814 129.748 266.658 129.654 266.49 129.662C264.7 129.648 263.124 128.482 262.59 126.776C265.584 127.865 268.927 127.342 271.444 125.392C273.665 123.614 274.775 121.726 274.775 119.893C274.757 117.676 273.252 115.494 270.041 113.011C263.376 107.887 258.079 101.202 254.617 93.5463C243.304 68.3173 229.56 67.3367 222.367 68.9955C215.623 70.4077 209.837 74.6972 206.53 80.7348C203.071 86.7281 201.612 94.1236 200.695 99.897C200.187 103.107 200.166 106.376 200.631 109.593C202.346 121.451 210.503 131.468 218.256 139.715ZM222.559 69.8111C223.962 69.4889 225.396 69.326 226.835 69.3254C234.175 69.3254 244.763 73.6234 253.837 93.9312C257.357 101.708 262.739 108.499 269.508 113.707C272.463 115.989 273.912 118.024 273.912 119.93C273.931 121.534 272.912 123.156 270.903 124.759C268.411 126.684 265.052 127.059 262.196 125.731C262.069 125.653 261.91 125.653 261.783 125.731C261.656 125.812 261.586 125.957 261.599 126.107C261.833 128.276 263.469 130.033 265.618 130.423C260.134 136.665 253.617 141.919 246.35 145.956C243.598 147.487 240.304 149.081 236.808 149.246C229.707 149.613 223.77 144.352 218.889 139.166C211.2 131.028 203.135 121.13 201.456 109.492C201.005 106.36 201.027 103.178 201.521 100.053C203.649 86.3616 207.668 73.2568 222.559 69.8111Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M305.851 145.37C305.209 147.908 294.667 166.713 294.667 166.713L308.429 174.145C308.429 174.145 320.88 153.306 321.944 151.922C323.009 150.538 332.037 138.524 333.266 134.308C334.496 130.093 325.816 126.977 322.256 127.316C318.696 127.655 306.493 142.831 305.851 145.37Z" fill="white"/>
				<path clip-rule="evenodd" d="M308.218 174.512C308.276 174.548 308.343 174.567 308.411 174.567C308.532 174.561 308.644 174.5 308.714 174.402C308.742 174.362 309.349 173.349 310.294 171.775C313.68 166.132 321.392 153.278 322.21 152.224C322.215 152.218 322.241 152.183 322.288 152.121C323.229 150.878 332.347 138.829 333.597 134.464C333.913 133.27 333.594 131.997 332.753 131.092C330.486 128.352 324.844 126.711 322.137 126.941C318.412 127.225 306.071 142.575 305.392 145.269C304.888 147.257 297.924 160.023 294.254 166.502C294.208 166.604 294.208 166.721 294.254 166.823C294.282 166.933 294.355 167.026 294.456 167.08L308.218 174.512ZM308.264 173.586L295.245 166.539C296.768 163.817 305.649 147.862 306.255 145.47C306.815 143.308 318.907 128.022 322.265 127.729C324.724 127.518 330.092 129.076 332.156 131.578C332.827 132.268 333.088 133.258 332.844 134.189C331.743 138.029 323.697 148.916 321.596 151.665C320.596 152.967 309.943 170.773 308.264 173.586Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M301.897 153.498L289.602 168.473L263.086 150.722L251.791 171.726C251.791 171.726 289.345 199.887 294.667 197.193C299.988 194.499 316.109 161.269 316.109 161.269L301.897 153.498Z" fill="#231F20"/>
				<path clip-rule="evenodd" d="M251.543 172.047C255.214 174.796 286.07 197.761 293.813 197.761C294.163 197.782 294.512 197.719 294.832 197.578C300.227 194.856 315.834 162.837 316.494 161.471C316.585 161.278 316.514 161.047 316.329 160.94L302.071 153.168C301.901 153.073 301.686 153.116 301.566 153.269L289.501 167.932L263.306 150.382C263.212 150.319 263.095 150.299 262.985 150.327C262.875 150.356 262.781 150.429 262.728 150.529L251.433 171.533C251.342 171.709 251.388 171.924 251.543 172.047ZM294.511 196.836C290.336 198.934 262.911 179.534 252.305 171.607L263.223 151.299L289.382 168.812C289.552 168.933 289.788 168.896 289.914 168.729L301.998 154.011L315.613 161.444C313.898 164.981 299.364 194.37 294.511 196.836Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M313.155 116.878L313.035 153.498H330.385V116.878H313.155Z" fill="#231F20"/>
				<path clip-rule="evenodd" d="M313.035 153.938H330.385C330.494 153.938 330.598 153.894 330.674 153.817C330.75 153.739 330.792 153.634 330.789 153.526V116.869C330.789 116.646 330.608 116.466 330.385 116.466H313.155C312.93 116.466 312.747 116.645 312.742 116.869L312.632 153.526C312.629 153.634 312.671 153.739 312.746 153.817C312.822 153.894 312.927 153.938 313.035 153.938ZM329.963 153.132H313.448L313.54 117.281H329.963V153.132Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M314.916 120.113L314.824 148.889H328.606V120.113H314.916Z" fill="white"/>
				<path clip-rule="evenodd" d="M314.843 149.301H328.605C328.718 149.306 328.828 149.265 328.909 149.187C328.991 149.109 329.037 149.001 329.037 148.889V120.113C329.037 119.885 328.852 119.701 328.624 119.701H314.935C314.705 119.701 314.517 119.884 314.512 120.113L314.43 148.88C314.425 148.993 314.469 149.102 314.549 149.182C314.627 149.26 314.733 149.303 314.843 149.301ZM328.183 148.44H315.246L315.338 120.535H328.183V148.44Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M305.099 147.276C305.099 147.276 302.511 134.941 306.392 133.007C310.274 131.074 323.614 128.81 321.55 131.834C319.485 134.858 312.255 136.728 312.255 136.728C312.255 136.728 313.742 141.044 312.109 144.105" fill="white"/>
				<path d="M305.099 147.688C304.902 147.691 304.731 147.552 304.695 147.358C304.585 146.845 302.08 134.684 306.209 132.631C309.558 130.973 320.366 128.837 321.944 130.634C322.291 131.059 322.267 131.675 321.889 132.072C320.054 134.822 314.393 136.563 312.778 137.021C313.118 138.222 313.889 141.658 312.476 144.352C312.363 144.553 312.11 144.627 311.907 144.517C311.706 144.405 311.629 144.155 311.732 143.949C313.265 141.09 311.87 136.957 311.852 136.911C311.806 136.806 311.806 136.686 311.852 136.581C311.909 136.478 312.004 136.402 312.118 136.37C312.191 136.37 319.219 134.538 321.174 131.651C321.311 131.449 321.348 131.303 321.284 131.229C320.293 130.093 310.274 131.596 306.548 133.429C303.603 134.895 304.787 143.885 305.484 147.23C305.509 147.338 305.488 147.452 305.428 147.545C305.367 147.638 305.272 147.703 305.163 147.725L305.099 147.688Z" fill="#231F20"/>
				<path d="M209.173 123.321L186.317 84.1346L160.627 112.626L170.169 133.172C170.169 133.172 155.489 167.877 155.489 235.902C155.489 235.902 233.643 235.563 253.314 235.563L227.624 195.653C227.624 195.653 234.047 177.16 237.359 172.541L256.489 182.943L278.858 152.509L209.173 123.321Z" fill="#75ECCA"/>
				<path d="M208.842 160.674C221.458 168.005 224.44 138.203 225 131.752C225.256 129.977 225.15 128.169 224.688 126.436C223.963 124.237 222.266 122.533 220.568 120.938C218.54 119.105 216.201 117.181 213.439 117.062C210.825 117.102 208.385 118.377 206.861 120.498C205.371 122.603 204.3 124.973 203.704 127.481C200.732 137.846 200.842 148.788 206.576 158.209C207.056 159.107 207.737 159.881 208.567 160.472L208.842 160.674Z" fill="#231F20"/>
				<path clip-rule="evenodd" d="M208.641 161.022C209.834 161.771 211.205 162.188 212.613 162.232C213.537 162.232 214.447 162.009 215.265 161.581C222.055 158.071 224.504 141.42 225.358 131.807C225.613 129.97 225.501 128.101 225.027 126.308C224.266 124.008 222.523 122.258 220.798 120.672C218.678 118.674 216.283 116.805 213.458 116.686C210.709 116.71 208.138 118.045 206.539 120.278C205.02 122.424 203.927 124.842 203.319 127.399C199.97 139.074 200.979 149.805 206.237 158.447C206.745 159.402 207.471 160.225 208.356 160.848L208.641 161.022ZM207.173 120.773C208.57 118.821 210.783 117.613 213.182 117.492H213.402C215.972 117.593 218.219 119.371 220.275 121.259C221.926 122.78 223.587 124.439 224.284 126.556C224.723 128.239 224.823 129.993 224.578 131.715C223.165 147.798 219.623 158.41 214.907 160.848C213.136 161.764 211.21 161.59 209.026 160.316L208.76 160.161C207.992 159.6 207.364 158.869 206.925 158.025C201.787 149.613 200.805 139.074 204.099 127.619C204.678 125.162 205.721 122.839 207.173 120.773Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M246.488 104.791C247.653 109.015 245.745 114.395 242.882 117.52C240.974 119.582 236.79 120.132 235.946 116.777C234.881 112.315 235.666 107.613 238.12 103.737C239.955 100.722 243.469 98.9989 245.726 102.875C246.062 103.478 246.318 104.122 246.488 104.791Z" fill="#231F20"/>
				<path clip-rule="evenodd" d="M238.038 119.463C238.38 119.544 238.731 119.584 239.084 119.582C240.646 119.574 242.138 118.928 243.212 117.795C245.965 114.77 248.149 109.272 246.883 104.69C246.687 103.988 246.403 103.314 246.038 102.683C244.882 100.685 243.497 100.236 242.534 100.236C240.836 100.227 239.019 101.473 237.735 103.535C235.249 107.508 234.462 112.312 235.551 116.869C235.816 118.137 236.781 119.143 238.038 119.463ZM238.423 103.948C239.542 102.151 241.093 101.043 242.488 101.043L242.524 101.033C243.616 101.043 244.561 101.73 245.341 103.068C245.673 103.644 245.929 104.26 246.103 104.901C247.277 109.153 245.167 114.441 242.579 117.245C241.471 118.429 239.836 118.968 238.24 118.674C237.271 118.435 236.529 117.655 236.34 116.677C235.294 112.326 236.045 107.739 238.423 103.948Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M226.807 123.696C224.972 130.725 223.137 146.735 211.439 138.359C210.241 137.419 209.195 136.3 208.338 135.042C202.576 127.371 204.218 122.533 207.2 114.111C208.485 110.445 209.595 106.779 210.87 103.114C212.146 99.448 214.247 96.0022 215.99 92.529C215.926 92.6482 221.724 93.4454 227.523 90.8153C233.322 88.1852 238.12 85.4543 238.12 85.4543C239.689 87.8003 241.387 89.5782 242.222 92.3641C242.992 95.0667 243.213 97.8958 242.873 100.685C242.139 107.531 239.396 114.935 236.285 121.048C233.175 127.16 226.807 123.696 226.807 123.696Z" fill="white"/>
				<path clip-rule="evenodd" d="M211.191 138.716C213.467 140.348 215.513 141.172 217.348 141.172C218 141.167 218.646 141.046 219.256 140.815C223.622 139.17 225.276 131.998 226.487 126.75L226.495 126.711C226.688 125.859 226.881 125.044 227.064 124.32C228.827 125.122 230.811 125.3 232.689 124.824C234.457 124.228 235.897 122.923 236.661 121.222C240.276 114.138 242.625 106.853 243.295 100.722C243.635 97.8737 243.408 94.9864 242.625 92.2266C241.96 90.2864 240.953 88.4802 239.653 86.8931C239.258 86.3524 238.863 85.8025 238.469 85.216C238.345 85.0341 238.104 84.9748 237.909 85.0786C237.863 85.1061 233.056 87.8186 227.349 90.4304C223.858 92.0044 220.005 92.6 216.201 92.1533C216.103 92.1025 215.988 92.0933 215.883 92.1277C215.777 92.1622 215.69 92.2374 215.641 92.3366C215.155 93.308 214.641 94.2794 214.127 95.2508C212.739 97.7375 211.528 100.319 210.503 102.976C209.824 104.873 209.191 106.807 208.576 108.685C208.544 108.786 208.511 108.887 208.478 108.988C207.94 110.635 207.385 112.334 206.806 113.992L206.801 114.004C203.849 122.354 202.065 127.403 207.998 135.307C208.882 136.6 209.959 137.75 211.191 138.716ZM215.333 94.7641C215.643 94.1857 215.953 93.6073 216.247 92.9964C220.174 93.4398 224.148 92.8194 227.752 91.2002C232.624 88.9733 236.845 86.6731 238.047 86.0133C238.368 86.4807 238.708 86.9481 239.038 87.3971C240.292 88.9087 241.268 90.6308 241.919 92.4832C242.674 95.1321 242.893 97.905 242.561 100.639C241.91 106.669 239.579 113.854 236.01 120.855C235.351 122.349 234.097 123.499 232.551 124.026C230.695 124.466 228.742 124.229 227.046 123.357C226.932 123.301 226.798 123.298 226.681 123.349C226.564 123.4 226.476 123.501 226.44 123.623C226.264 124.28 226.092 125.024 225.909 125.818C225.855 126.054 225.8 126.294 225.743 126.537C225.709 126.679 225.675 126.821 225.641 126.966C224.444 131.988 222.871 138.584 219.027 140.036C217.027 140.788 214.568 140.109 211.687 138.038C210.525 137.119 209.51 136.028 208.677 134.803C203.007 127.252 204.631 122.643 207.595 114.266C208.097 112.841 208.547 111.469 209.024 110.012C209.139 109.661 209.255 109.305 209.375 108.942C209.481 108.62 209.587 108.294 209.694 107.967C210.209 106.395 210.738 104.777 211.292 103.26C212.305 100.638 213.501 98.0904 214.871 95.6357C215.023 95.3424 215.178 95.0532 215.333 94.7641Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M224.881 130.496C224.881 130.496 219.201 129.204 216.623 124.485C214.045 119.765 215.605 116.145 215.605 116.145C215.605 116.145 220.559 121.873 226.826 123.724L224.881 130.496Z" fill="#231F20"/>
				<path clip-rule="evenodd" d="M224.789 130.899H224.881C225.063 130.902 225.225 130.782 225.275 130.606L227.174 123.852C227.206 123.749 227.194 123.637 227.142 123.543C227.091 123.448 227.003 123.378 226.899 123.348C220.853 121.552 215.889 115.944 215.889 115.889C215.795 115.789 215.658 115.741 215.522 115.76C215.384 115.78 215.266 115.87 215.21 115.998C215.146 116.154 213.613 119.875 216.256 124.695C218.898 129.516 224.55 130.844 224.789 130.899ZM216.962 124.274C215.656 122.067 215.227 119.45 215.76 116.942C217.128 118.381 221.238 122.358 226.312 123.98L224.596 129.983C223.321 129.607 219.064 128.104 216.962 124.274Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M228.358 112.15C227.202 112.06 226.082 111.709 225.082 111.123C224.887 111.012 224.82 110.764 224.931 110.569C225.042 110.374 225.291 110.306 225.486 110.417C226.193 110.821 228.239 111.737 229.156 111.141C229.753 110.757 229.101 106.99 227.725 102.894C227.654 102.681 227.769 102.451 227.982 102.381C228.195 102.31 228.425 102.425 228.496 102.637C229.321 105.084 231.074 110.885 229.587 111.801C229.219 112.031 228.792 112.152 228.358 112.15Z" fill="#231F20"/>
				<path d="M226.679 117.117C225.727 117.131 224.784 116.924 223.926 116.512C221.633 115.375 220.256 112.709 219.779 108.585C219.758 108.363 219.916 108.164 220.137 108.136C220.244 108.123 220.352 108.153 220.437 108.22C220.521 108.288 220.575 108.386 220.587 108.493C221.018 112.324 222.256 114.78 224.257 115.824C227.312 117.336 231.211 115.045 231.248 115.027C231.34 114.97 231.452 114.953 231.557 114.978C231.662 115.004 231.753 115.071 231.808 115.165C231.921 115.357 231.86 115.605 231.67 115.724C230.141 116.578 228.43 117.055 226.679 117.117Z" fill="#231F20"/>
				<path d="M227.11 98.8248C226.897 98.8253 226.721 98.661 226.706 98.4491C226.642 97.5327 226.376 96.9737 225.899 96.7354C224.981 96.2589 223.266 97.1203 222.697 97.496C222.509 97.62 222.257 97.5687 222.133 97.3815C222.008 97.1942 222.06 96.9419 222.247 96.8179C222.348 96.7537 224.697 95.2325 226.257 96.0114C227.085 96.512 227.569 97.4287 227.514 98.3941C227.521 98.5011 227.486 98.6067 227.415 98.6875C227.345 98.7684 227.245 98.8178 227.138 98.8248H227.11Z" fill="#231F20"/>
				<path d="M237.285 103.37C237.076 103.371 236.901 103.212 236.882 103.004C236.882 103.004 236.698 100.988 235.551 100.254C234.56 99.6038 233.404 101.088 233.395 101.107C233.33 101.192 233.233 101.248 233.126 101.262C233.019 101.276 232.911 101.246 232.826 101.18C232.739 101.116 232.681 101.02 232.666 100.913C232.65 100.806 232.678 100.698 232.744 100.612C233.303 99.8787 234.698 98.724 236.001 99.5763C237.478 100.548 237.68 102.857 237.689 102.949C237.699 103.056 237.666 103.162 237.597 103.245C237.528 103.328 237.429 103.379 237.322 103.389L237.285 103.37Z" fill="#231F20"/>
				<path d="M205.016 101.153C204.872 102.613 205.126 104.085 205.75 105.414C207.053 107.824 210.265 108.805 212.889 108.026C219.742 106 223.036 92.9781 217.852 87.8645C213.035 83.1174 207.567 90.6137 206.439 95.04C205.916 97.1203 205.09 99.0448 205.016 101.153Z" fill="#231F20"/>
				<path clip-rule="evenodd" d="M205.393 105.606C206.588 107.576 208.748 108.755 211.054 108.695C211.704 108.682 212.349 108.58 212.971 108.392C216.274 107.476 219.054 103.948 220.238 99.228C221.422 94.5085 220.605 90.0455 218.1 87.5804C216.89 86.2272 215.021 85.6676 213.265 86.1324C209.769 87.0947 206.806 91.8692 206.007 94.9484C205.861 95.5074 205.695 96.0664 205.53 96.6254C205.047 98.0868 204.739 99.6003 204.613 101.134C204.454 102.668 204.724 104.216 205.393 105.606ZM206.108 105.231C205.512 103.965 205.274 102.561 205.42 101.171H205.429C205.563 99.7009 205.871 98.252 206.347 96.8545L206.347 96.8545C206.512 96.2863 206.677 95.7182 206.824 95.15C207.558 92.3366 210.356 87.8186 213.513 86.9022C214.993 86.5174 216.565 87.0038 217.568 88.1577C219.862 90.4213 220.587 94.6276 219.486 99.0356C218.385 103.444 215.816 106.724 212.779 107.641C210.265 108.438 207.529 107.449 206.108 105.231Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M243.121 109.208C242.949 109.208 242.78 109.161 242.634 109.07C242.205 108.806 242.07 108.245 242.332 107.815C242.433 107.65 252.608 90.9345 254.351 80.5148C254.984 76.7392 253.305 72.9086 249.626 69.7103C244.598 65.3481 237.093 63.3962 231.78 65.0732C222.33 68.0607 217.302 89.8165 217.247 89.9997C217.133 90.489 216.646 90.7955 216.155 90.6871C215.661 90.5775 215.35 90.0898 215.458 89.5965C215.669 88.6801 220.779 66.6219 231.23 63.3228C237.203 61.4442 245.259 63.497 250.828 68.3265C255.012 71.9921 256.911 76.3909 256.168 80.8172C254.333 91.5943 244.323 108.071 243.901 108.768C243.735 109.04 243.44 109.207 243.121 109.208Z" fill="#231F20"/>
				<path d="M292.868 239C289.579 238.989 286.313 238.46 283.189 237.433C279.465 236.114 276.02 234.112 273.032 231.531C267.939 227.416 263.453 222.504 259.113 217.785C256.36 214.77 253.516 211.654 250.543 208.777C241.231 199.759 231.982 194.957 223.018 194.517C210.962 193.912 200.273 200.795 190.529 208.318C189.611 209.051 188.62 209.812 187.648 210.582C179.766 216.823 170.83 223.888 159.82 222.23C152.314 221.102 146.488 215.934 142.928 211.801C134.166 201.619 130.083 187.057 132.111 172.935C134.258 157.723 142.745 147.001 157.342 141.062C169.426 136.15 180.831 129.277 191.868 122.633L191.96 122.588C198.796 118.464 206.053 113.185 208.007 105.267C208.047 105.104 208.171 104.973 208.332 104.925C208.494 104.878 208.669 104.919 208.791 105.035C208.913 105.151 208.964 105.323 208.925 105.487C206.888 113.735 199.456 119.151 192.456 123.366L192.373 123.421C181.308 130.084 169.866 136.975 157.719 141.915C143.442 147.716 135.148 158.19 133.047 173.073C131.083 186.929 135.047 201.179 143.616 211.159C147.075 215.182 152.718 220.204 159.948 221.286C170.564 222.889 178.959 216.245 187.07 209.83L189.96 207.558C199.851 199.924 210.705 192.941 223.055 193.564C232.23 194.022 241.68 198.907 251.158 208.08C254.149 210.985 257.003 214.11 259.764 217.134C264.077 221.863 268.536 226.747 273.582 230.816C276.482 233.325 279.823 235.274 283.436 236.562C295.832 240.558 308.209 236.626 320.311 224.869C338.267 207.384 348.387 180.881 348.066 152.069C347.919 138.616 345.405 128.104 340.377 119.921C338.349 116.612 335.79 112.928 331.624 111.086C329.495 110.17 324.504 109.822 322.577 112.525C321.843 113.561 321.77 114.78 321.66 116.328C321.66 116.997 321.568 117.749 321.467 118.564C321.434 118.818 321.202 118.996 320.949 118.963C320.695 118.93 320.517 118.698 320.55 118.445C320.66 117.657 320.696 116.952 320.742 116.273C320.843 114.642 320.935 113.24 321.825 111.994C324.064 108.85 329.55 109.18 331.991 110.253C336.432 112.195 339.047 116.017 341.166 119.417C346.286 127.747 348.837 138.414 348.993 152.041C349.314 181.073 339.102 207.851 320.963 225.501C311.769 234.491 302.346 238.991 292.868 239Z" fill="#231F20"/>
				<path d="M204.172 37.0216C204.039 37.0205 203.913 36.964 203.824 36.8659C203.648 36.6846 203.648 36.3965 203.824 36.2152C205.842 34.4648 207.842 33.6951 209.778 33.915C211.422 34.1393 212.914 34.9898 213.944 36.2885C214.089 36.4946 214.044 36.7782 213.843 36.93C213.744 37.002 213.621 37.0318 213.501 37.0129C213.38 36.9939 213.272 36.9279 213.201 36.8292C212.323 35.7355 211.065 35.0124 209.677 34.8039C208.007 34.6115 206.246 35.3171 204.429 36.8934C204.36 36.963 204.27 37.0081 204.172 37.0216Z" fill="#231F20"/>
				<path d="M231.505 185.39C231.441 185.403 231.376 185.403 231.312 185.39C231.108 185.28 231.027 185.029 231.129 184.821L242.708 161.636C242.812 161.431 243.062 161.349 243.267 161.453C243.473 161.557 243.555 161.807 243.451 162.012L231.881 185.16C231.81 185.303 231.664 185.392 231.505 185.39Z" fill="#231F20"/>
				<path d="M209.934 189.908C196.676 189.908 181.097 185.619 180.234 185.38C180.072 185.358 179.937 185.244 179.888 185.088C179.84 184.931 179.886 184.761 180.008 184.651C180.129 184.541 180.303 184.511 180.455 184.574C180.739 184.647 208.558 192.318 221.422 187.415C221.639 187.335 221.881 187.445 221.963 187.662C222.004 187.764 222.002 187.879 221.957 187.979C221.912 188.079 221.828 188.157 221.724 188.194C217.926 189.453 213.935 190.033 209.934 189.908Z" fill="#231F20"/>
				<rect fill="#231F20" height="2.96919" width="2.00018" x="320.403" y="114.312"/>
				<path clip-rule="evenodd" d="M320.403 117.685H322.403C322.51 117.685 322.613 117.642 322.689 117.567C322.764 117.491 322.807 117.388 322.807 117.281V114.312C322.807 114.09 322.626 113.909 322.403 113.909H320.403C320.294 113.907 320.189 113.948 320.111 114.024C320.034 114.1 319.99 114.204 319.99 114.312V117.281C319.995 117.506 320.178 117.685 320.403 117.685ZM321.999 116.869H320.807V114.716H321.999V116.869Z" fill="#231F20" fill-rule="evenodd"/>
				<path d="M213.026 105.661L212.366 105.02C216.549 100.862 217.508 94.4554 214.724 89.2574L215.513 88.7901C218.5 94.346 217.49 101.201 213.026 105.661Z" fill="white"/>
				<path d="M243.304 117.685L242.451 117.346C245.13 110.445 244.451 105.35 244.451 105.304L245.369 105.176C245.387 105.368 246.075 110.537 243.304 117.685Z" fill="white"/>
				<path d="M169.236 79.7799L175.883 72.9932L176.538 73.634L169.891 80.4208L169.236 79.7799Z" fill="white"/>
				<path d="M289.407 168.9L289.81 168.077L296.872 171.531L296.469 172.354L289.407 168.9Z" fill="white"/>
				<path d="M53.7965 105.082C53.4112 104.991 52.9983 104.927 52.6221 104.798C51.4198 104.501 50.4641 103.591 50.1081 102.406C49.8532 101.381 50.0539 100.295 50.6586 99.4281C51.6704 97.8955 53.2704 96.8477 55.081 96.5322C56.2646 96.2665 56.7968 96.3306 58.6777 96.7888V74.7215L80.4044 70.3777V70.8726C80.4044 79.7068 80.4044 88.5319 80.4044 97.3662C80.4598 98.7692 79.868 100.12 78.7988 101.032C77.0444 102.732 74.5091 103.355 72.1651 102.663C70.9509 102.394 69.9842 101.477 69.6512 100.28C69.3813 99.2595 69.5796 98.1715 70.1925 97.3112C71.2036 95.7696 72.8134 94.7198 74.6333 94.4153C75.8198 94.156 77.0562 94.2451 78.1932 94.6719V79.496L76.6518 79.7985C71.4831 80.8371 66.3236 81.8665 61.1733 82.8868C60.8889 82.9418 60.843 83.0517 60.843 83.3083C60.843 88.6785 60.843 94.0396 60.843 99.4006C60.8976 101.071 60.0994 102.655 58.7236 103.607C57.7108 104.372 56.515 104.859 55.2554 105.018C55.1898 105.035 55.1255 105.057 55.0627 105.082H53.7965Z" fill="#CD7DF3"/>
				<path d="M397.605 168.33C397.605 168.156 397.605 167.981 397.605 167.807C397.549 167.327 397.369 166.869 397.082 166.479C396.617 165.801 396.014 165.23 395.312 164.802C394.61 164.352 393.828 164.041 393.009 163.885C392.487 163.784 391.952 163.784 391.43 163.885H391.293C391.288 163.824 391.288 163.763 391.293 163.702C391.385 163.344 391.476 162.996 391.577 162.657L393.412 156.242C394.082 153.914 394.761 151.587 395.431 149.259V149.122L394.789 149.067C393.031 148.973 391.276 149.287 389.66 149.983C388.149 150.607 386.888 151.712 386.072 153.126C385.843 153.53 385.668 153.96 385.476 154.391C385.347 154.666 385.246 154.959 385.127 155.243C385.122 155.283 385.122 155.323 385.127 155.362L385.356 155.225C386.085 154.747 386.849 154.324 387.641 153.96C388.864 153.411 390.203 153.172 391.541 153.264C392.116 153.32 392.683 153.446 393.229 153.64C393.225 153.685 393.225 153.731 393.229 153.777C392.116 157.638 391.011 161.496 389.917 165.351C389.902 165.421 389.902 165.493 389.917 165.562C389.995 166.244 390.283 166.884 390.742 167.395C391.323 168.103 392.057 168.67 392.889 169.054L393.605 169.365L394.266 169.558H394.449C394.994 169.668 395.556 169.668 396.101 169.558C396.56 169.493 396.98 169.265 397.284 168.916C397.383 168.777 397.475 168.634 397.559 168.486L397.605 168.33Z" fill="#CD7DF3"/>
				<path d="M71.1356 177.346C71.1356 177.126 71.1356 176.897 71.2365 176.677C71.3972 176.072 71.7135 175.519 72.1541 175.073C72.8945 174.301 73.7883 173.693 74.7781 173.286C75.7689 172.851 76.8344 172.612 77.916 172.58C78.6061 172.559 79.294 172.668 79.9437 172.901L80.1181 172.965C80.1226 172.886 80.1226 172.806 80.1181 172.727C80.1181 172.26 80.0263 171.811 79.9713 171.334C79.6226 168.444 79.2709 165.564 78.9161 162.692C78.5308 159.558 78.1362 156.433 77.7509 153.308V153.125C78.0353 153.125 78.3198 153.125 78.5858 153.189C80.8669 153.416 83.0647 154.166 85.0084 155.379C86.8151 156.49 88.205 158.165 88.9629 160.145C89.1631 160.715 89.3315 161.297 89.4675 161.886C89.5776 162.271 89.651 162.665 89.7428 163.059C89.7569 163.11 89.7569 163.164 89.7428 163.215L89.4767 162.986C88.6369 162.224 87.7414 161.525 86.7976 160.896C85.3449 159.942 83.6765 159.365 81.9439 159.219C81.1922 159.17 80.4373 159.213 79.696 159.347C79.7005 159.405 79.7005 159.464 79.696 159.522C80.3077 164.702 80.9347 169.895 81.5769 175.101C81.5952 175.188 81.5952 175.279 81.5769 175.366C81.3425 176.241 80.8386 177.02 80.1364 177.593C79.2473 178.387 78.1857 178.965 77.0352 179.279C76.7141 179.38 76.3838 179.454 76.0627 179.536L75.1452 179.646H74.9984C74.2763 179.692 73.5524 179.592 72.8697 179.353C72.2973 179.182 71.8076 178.807 71.4935 178.299C71.3869 178.101 71.2949 177.896 71.2182 177.685L71.1356 177.346Z" fill="#CD7DF3"/>
				<path d="M290.831 96.0664C290.951 95.8281 291.052 95.5807 291.189 95.3608C291.617 94.7381 292.199 94.2362 292.878 93.9037C294.019 93.324 295.269 92.987 296.548 92.9139C297.836 92.8121 299.131 92.9583 300.364 93.3446C301.155 93.5882 301.891 93.9835 302.53 94.5085L302.704 94.646C302.749 94.5608 302.785 94.4718 302.814 94.3802C302.952 93.8395 303.08 93.2988 303.2 92.749L305.402 82.5767C306.191 78.9111 306.977 75.2271 307.76 71.5247L307.805 71.3048C308.127 71.4423 308.429 71.5614 308.723 71.6989C311.2 72.851 313.379 74.5567 315.091 76.6842C316.702 78.6458 317.618 81.0851 317.696 83.6215C317.696 84.3407 317.659 85.0595 317.586 85.775C317.586 86.2607 317.485 86.6915 317.43 87.2138C317.424 87.2722 317.406 87.3286 317.375 87.3788L317.155 87.0214C316.509 85.8338 315.772 84.6972 314.953 83.6215C313.689 81.9694 312.029 80.6615 310.127 79.8183C309.299 79.4677 308.429 79.2244 307.539 79.0944C307.539 79.0944 307.539 79.0944 307.475 79.0944C307.465 79.1657 307.45 79.2361 307.429 79.3051L303.466 97.5785C303.444 97.6856 303.404 97.788 303.346 97.8809C302.738 98.7754 301.866 99.4579 300.851 99.8329C299.532 100.375 298.108 100.61 296.685 100.52C296.281 100.52 295.887 100.465 295.483 100.429L294.428 100.209L294.254 100.135C293.422 99.9047 292.645 99.5089 291.969 98.9714C291.395 98.5469 290.989 97.9335 290.822 97.2394C290.787 96.975 290.765 96.7088 290.758 96.4421L290.831 96.0664Z" fill="#CD7DF3"/>
				<path d="M38.0921 50.8C33.3669 50.8 33.3578 58.1314 38.0921 58.1314C42.8265 58.1314 42.8265 50.8 38.0921 50.8Z" fill="#698DFF"/>
				<path d="M395.092 58.8C390.367 58.8 390.358 66.1314 395.092 66.1314C399.827 66.1314 399.827 58.8 395.092 58.8Z" fill="#698DFF"/>
				<path d="M334.713 41.9174C334.625 41.6145 334.464 41.3377 334.245 41.111L333.869 40.8269C333.591 40.6622 333.274 40.5737 332.951 40.5703H332.437C332.191 40.5593 331.947 40.6164 331.731 40.7353C331.502 40.8042 331.295 40.9341 331.134 41.111C330.962 41.2725 330.833 41.474 330.758 41.6975C330.643 41.9141 330.589 42.1581 330.602 42.4031L330.666 42.898C330.752 43.2017 330.913 43.4789 331.134 43.7044L331.511 43.9885C331.789 44.1501 332.106 44.2354 332.428 44.236H332.942C333.187 44.2502 333.432 44.1963 333.648 44.0802C333.875 44.0052 334.079 43.8762 334.245 43.7044C334.569 43.3459 334.757 42.8856 334.777 42.4031C334.759 42.2473 334.731 42.0824 334.713 41.9174Z" fill="#698DFF"/>
				<path d="M115.561 33.3486C112.607 33.3486 112.598 37.9307 115.561 37.9307C118.525 37.9307 118.516 33.3486 115.561 33.3486Z" fill="#698DFF"/>
				<path d="M379.895 77.8396C376.94 77.8396 376.94 82.4217 379.895 82.4217C382.849 82.4217 382.849 77.8396 379.895 77.8396Z" fill="#698DFF"/>
			</g>
		</svg>
	</header>
	<div class="order-summary-card__content">
		<h2 class="order-summary-card__title">Order Summary</h2>
		<p class="order-summary-card__text">You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!</p>
		<div class="price-plan">
	<div class="price-plan__icon-wrapper">
		<svg fill="none" height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg">
			<path d="M17.5741 0.198201C17.3967 0.0442519 17.1611 -0.025006 16.9284 0.00811123L5.58095 1.62917C5.18161 1.68623 4.88503 2.02823 4.88503 2.43161V5.67376V11.9347C4.40494 11.655 3.84761 11.4939 3.25304 11.4939C1.45934 11.4939 0 12.9532 0 14.747C0 16.5407 1.4593 18 3.25301 18C5.04672 18 6.50605 16.5407 6.50605 14.747V6.37674L16.2325 4.98726V10.3136C15.7524 10.0339 15.1951 9.87282 14.6005 9.87282C12.8068 9.87282 11.3475 11.3322 11.3475 13.1259C11.3475 14.9196 12.8068 16.3789 14.6005 16.3789C16.3942 16.3789 17.8535 14.9196 17.8535 13.1259V4.05266V0.810518C17.8536 0.575533 17.7516 0.35215 17.5741 0.198201Z" fill="#717FA6" />
		</svg>
	</div>
	<dl class="price-plan__info">
		<dt class="price-plan__plan-type">Annual Plan</dt>
		<dd class="price-plan__plan-price">$59.99/year</dd>
	</dl>
	<a class="price-plan__change-plan-link" href="#">Change</a>
</div>
	</div>
	<footer class="order-summary-card__footer">
		<a class="link link--type--button" href="#">Proceed to Payment</a>
		<div class="link link--type--ghost"><a href="#">Cancel Order</a></div>
	</footer>
</article>
</main>
</body>

    Also you could implement some css animations for links. Here you can see an example

    Happy coding ❤️

    Marked as helpful
    0
    Tuğçe Kızıldağ•290
    @tugcekizildgPosted 5 months ago

    Yes, thanks to you, I saw my mistakes. I'm trying to get used to semantic html. Thank you for taking the time to provide valuable information. I felt valuable when I was bombarded with so much information :) @Edanriell

    1
    Lauris•200
    @EdanriellPosted 5 months ago

    @tugcekizildg I wish you the best. When i was learrning HTML and CSS nobody told me what i was doing wrong, so i also made tons of mistakes. Without doing them, you can't grow as a specialist. Keep moving forward ! Also i strongly recommend you right now learn semantic html, here is great resource HtmlReference, also BEM methodology, and from now on try to use Vite in your projects, don't be affraid. Also start learning Js. I read this book two times, it is definitely one of the best free books about Js for sure, even though it's sometimes very hard to read. Also this book get updates regularly !

    Marked as helpful
    0
    Tuğçe Kızıldağ•290
    @tugcekizildgPosted 5 months ago

    I will look at all the things you mentioned one by one. I am grateful for your guidance and helping me to learn the situation correctly. Thank you very much for sharing this valuable information with me. @Edanriell

    0

Please log in to post a comment

Log in with GitHub

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