DEV Community

Cover image for Challenge-1 Frontendmentor.io
Rhythm Saha
Rhythm Saha

Posted on

Challenge-1 Frontendmentor.io

I've just completed a front-end coding challenge from @frontendmentor πŸŽ‰

Click here to see live url
Github repo
You can see my solution here

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

here's how my html code looks like

<!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>

Enter fullscreen mode Exit fullscreen mode

CSS code

: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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Any suggestions on how I can improve are welcome!

Discussion (0)