Challenge-1 Frontendmentor.io
Tags: frontend, css, html, challenge
Published: 2022-05-25 09:46:23

## I've just completed a front-end coding challenge from @frontendmentor 🎉

Click here to see [live url](https://rhythmsaha.github.io/FE-order-summary-page-design/)
Github [repo](https://github.com/rhythmsaha/FE-order-summary-page-design)
You can see my solution [here](https://www.frontendmentor.io/solutions/ordersummarypagedesignwithhtmlcss-FNHS-a_aG)

i've used only HTML and CSS to complete this challenge

here's how my html code looks like

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap"
      rel="stylesheet"
    />
    <title>Frontend Mentor | Order summary card</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  </head>

  <body>
    <main>
      <section class="container">
        <div>
          <img
            src="./images/illustration-hero.svg"
            class="hero"
            alt="dancing with music"
          />
        </div>
        <h1 class="heading">Order Summary</h1>
        <div class="description">
          You can now listen to millions of songs, audiobooks, and podcasts on
          any device anywhere you like!
        </div>
        <div class="price_container">
          <div class="pricing">
            <span class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
                <g fill="none" fill-rule="evenodd">
                  <circle cx="24" cy="24" r="24" fill="#DFE6FB" />
                  <path
                    fill="#717FA6"
                    fill-rule="nonzero"
                    d="M32.574 15.198a.81.81 0 00-.646-.19L20.581 16.63a.81.81 0 00-.696.803V26.934a3.232 3.232 0 00-1.632-.44A3.257 3.257 0 0015 29.747 3.257 3.257 0 0018.253 33a3.257 3.257 0 003.253-3.253v-8.37l9.726-1.39v5.327a3.232 3.232 0 00-1.631-.441 3.257 3.257 0 00-3.254 3.253 3.257 3.257 0 003.254 3.253 3.257 3.257 0 003.253-3.253V15.81a.81.81 0 00-.28-.613z"
                  />
                </g>
              </svg>
            </span>
            <div>
              <h2>Annual Plan</h2>
              <div>$59.99/year</div>
            </div>
          </div>
          <button class="change_button">Change</button>
        </div>

        <div class="actions">
          <button class="proceed">Proceed to Payment</button>

          <button class="cancel">Cancel Order</button>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div>
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
          >Frontend Mentor</a
        >. Coded by <a href="#">Rhythm Saha</a>.
      </div>
    </footer>
  </body>
</html>

```

CSS code

```css
:root {
    --Pale-blue: hsl(225, 100%, 94%);
    --Bright-blue: hsl(245, 75%, 52%);
    --Very-pale-blue: hsl(225, 100%, 98%);
    --Desaturated-blue: hsl(224, 23%, 55%);
    --Dark-blue: hsl(223, 47%, 23%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url(./images//pattern-background-desktop.svg);
    background-size: contain;
    background-position: fixed;
    background-repeat: no-repeat;
    background-color: var(--Pale-blue);
    font-family: "Red Hat Display", sans-serif;
}

main {
    min-height: calc(100vh - 100px - 10vh);
}

@media only screen and (max-width: 375px) {
    body {
        background-image: url(./images//pattern-background-mobile.svg);
        background-size: auto;
    }
}

.container {
    width: 90%;
    background: white;
    margin: 10vh auto 0;
    max-width: 500px;
    border-radius: 2rem;
    padding-bottom: 1rem;
    box-shadow: hsla(224, 23%, 55%, 0.301) 0px 7px 29px 0px;
}

.hero {
    width: 100%;
    border-radius: 2rem 2rem 0 0;
    margin-bottom: 1rem;
    overflow: hidden;
}

.heading {
    text-align: center;
    color: hsl(223, 47%, 23%);
    margin: 2rem 0;
    font-weight: 900;
    font-size: 1.8rem;
}

@media only screen and (max-width: 375px) {
    .heading {
        text-align: center;
        color: hsl(223, 47%, 23%);
        margin: 1.5rem 0;
        font-weight: 900;
        font-size: 1.3rem;
    }
}

.description {
    width: 80%;
    text-align: center;
    margin: auto;
    font-size: 1.2rem;
    color: hsl(224, 23%, 55%);
    padding: 0 1rem;
    line-height: 1.6rem;
}

@media only screen and (max-width: 375px) {
    .description {
        padding: 0;
        font-size: 1rem;
    }
}

.price_container {
    width: 80%;
    margin: 1.5rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--Very-pale-blue);
    padding: 1.3rem;
    border-radius: 1rem;
    transition: all 250ms;
}

.pricing {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    color: var(--Desaturated-blue);
}

.pricing h2 {
    font-weight: 900;
    color: var(--Dark-blue);
    margin-bottom: 3px;
    font-size: 1rem;
}

@media screen and (max-width: 375px) {
    .price_container {
        width: 85%;
        margin: 1.5rem auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--Very-pale-blue);
        padding: 1rem;
        border-radius: 1rem;
    }
}

.change_button {
    border: none;
    outline: none;
    background: none;
    color: var(--Bright-blue);
    text-decoration: underline;
    font-size: 1rem;
    transition: all 250ms;
    font-weight: 700;
}

.change_button:hover {
    text-decoration: none;
    color: hsl(245, 82%, 68%);
    cursor: pointer;
}

@media screen and (max-width: 375px) {
    .change_button {
        font-size: 14px;
        font-weight: 700;
    }
}

.actions {
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    width: 80%;
    gap: 2rem;
}
.proceed {
    border: none;
    outline: none;
    width: 100%;
    color: white;
    background: var(--Bright-blue);
    padding: 1rem 0;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 10px;
    transition: all 250ms;
    box-shadow: hsla(245, 75%, 52%, 0.45) 0px 7px 32px 0px;
}

.proceed:hover {
    background-color: hsl(245, 82%, 68%);
    cursor: pointer;
}

.cancel {
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 700;
    color: var(--Desaturated-blue);
    transition: all 250ms;
}

.cancel:hover {
    color: var(--Dark-blue);
    cursor: pointer;
}

footer {
    color: var(--Dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.footer a:visited {
    color: var(--Bright-blue);
}

.footer a {
    color: var(--Bright-blue);
}

@media screen and (max-width: 375px) {
    .footer {
        padding: 0 2rem;
        text-align: center;
    }
}
```

Any suggestions on how I can improve are welcome!