Submitted about 3 years ago

Interactive-Pricing-Component HTML/CSS/JS

Thomas Sprotte•90

@JustTom77

Preview site View code

This is a solution for...Interactive pricing component

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Community feedback

Juveria Dalvi•1,375

@Juveria-DalviPosted about 3 years ago

Use main and footer tags every time you create a web page it is necessary to implement semantic tags

<body>
<main>
    <div class="title-box">
      <img src="./images/pattern-circles.svg" alt="circles" />
      <h1>Simple, traffic-based pricing</h1>
      <p>Sign-up for our 30-day trial. No credit card required.</p>
    </div>
    <div class="traffic-container">
      <div class="trial-options-box">
        <div class="views-pricing-box">
          <div class="views"><p id="views">100k Pageviews</p></div>
          <div class="price-month">
            <h1 id="price"></h1>
            <span>/month</span>
          </div>
        </div>

        <div class="slide-container slider-background" id="slide-icon">
          <input
            type="range"
            min="0"
            max="100"
            value="50"
            step="25"
            class="slider"
            id="myRange"
          />
          <div class="slide-bar" id="slide-bar"></div>
        </div>

        <div class="subscription-option">
          <p>Monthly Billing</p>
          <div class="btn-container" id="btn-container">
            <div class="btn" id="btn"></div>
          </div>
          <p>Yearly Billing</p>
          <p>25% discount</p>
          <p>-25%</p>
        </div>
      </div>

      <div class="trial-submit-box">
        <div class="infos">
          <ul>
            <li>
              <img src="./images/icon-check.svg" alt="check icon" /> Unlimited
              websites
            </li>
            <li>
              <img src="./images/icon-check.svg" alt="check icon" />100% data
              ownership
            </li>
            <li>
              <img src="./images/icon-check.svg" alt="check icon" />Email
              reports
            </li>
          </ul>
        </div>
        <div class="submit-button">
          <button>Start my trial</button>
        </div>
      </div>
    </div>
</main>
<footer>
    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Tom</a>.
    </div>
</footer>
**Script tag goes here**
</body>

Thomas Sprotte•90

@JustTom77Posted about 3 years ago

@JuveriaD Thank you, for the feedback, I'll consider this the next time!

Please log in to post a comment

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