Помогите с прогресс баром и позиционированием элементов

Question

Не могу никак разобраться с тем, как сделать с такой же прогресс бар.

По хорошему, нужно сделать статичную страничку, как на фото примера. Если разберусь с прогресс баром, встанет вопрос по позиционированию элементов внутри окна, хочется разобраться, как сделать это более красиво и правильно.

body {
  padding: 0;
  margin: 0;
  color: black;
  font-family: 'Montserrat';
}

#target {
  margin: 100px auto;
  width: 500px;
  height: 10rem;
}

#heading {
  background-color: #5e5c5c;
  padding: 0.4rem 0 0.05rem 1rem;
  border-radius: 0.4rem 0.4rem 0 0;
}

#target-heading {
  color: #fff;
}

#main-window {
  border-radius: 0 0 0.4rem 0.4rem;
  background-color: #f1f1f1;
  height: 100%;
  width: 100%;
  margin: 0;
  padding-top: 1rem;
}

#parant-window {
  margin: auto;
  height: calc(100% - 1rem);
  width: calc(100% - 2rem);
  background-color: #fff;
  border: 1px solid lightgray;
  border-radius: 0.4rem;
  text-align: center;
}

.heading {
  font-size: 1rem;
}

#title-indicator {
  font-weight: bold;
}

#icon-importnt {
  color: rgb(85, 124, 255);
}

.footer {}

#progress-bar {
  width: 200px;
  height: 1rem;
  background-color: lightgray;
}

#progress {
  position: relative;
  height: 75%;
  width: 80%;
  top: 10%;
  left: 0.5%;
  background-color: lightgreen;
}

<section id="target">
  <div id="heading">
    <h1 class="heading" id="target-heading">Target Indicator Demo</h1>
  </div>
  <div id="main-window">
    <div id="parant-window">
      <div>
        <h2 class="heading" id="title-indicator">Reached:</h2>
        <div id="progress-bar">
          <div id="progress"></div>
        </div>
      </div>
      <h2 class="heading footer">
        <i id="icon-importnt" class="fas fa-info-circle footer"></i> 
        You need $1 more to reach your target.
      </h2>
    </div>
  </div>
</section>

Answer 1

ну как-то так)

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

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
}

.frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.frame__header {
  background-color: #333;
  border-radius: 15px 15px 0 0;
  padding: 10px 15px;
  color: #fff;
}

.frame__body {
  border: 1px solid #333;
  border-top-color: transparent;
  border-radius: 0 0 15px 15px;
  padding: 10px;
  background-color: #f2f2f2;
}

.frame__body-inner {
  padding: 10px 30px;
  background-color: #fff;
  border-radius: 15px;
  border: 1px solid #333;
}

.frame__row {
  margin-bottom: 30px;
}

.frame__row:last-of-type {
  margin-bottom: 0;
}

.frame__notify {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #7c7c7c;
}

.frame__icon {
  margin-right: 10px;
}

.frame-progress__inner {
  display: flex;
  align-items: center;
}

.frame-progress__label {
  font-weight: 700;
  margin-right: 15px;
}

.frame-progress__line {
  background-color: #f0f0f0;
  width: 100%;
  height: 20px;
  padding: 5px;
}

.frame-progress__line-thumb {
  background-color: #028ad4;
  width: 93.33%;
  height: 100%;
}

.frame-progress__target {
  background-color: #333;
  border-radius: 5px;
  color: #fff;
  padding: 5px 10px;
  text-align: center;
}

.frame-progress__target-header {
  padding: 0 5px 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #fff;
  font-size: 14px;
}

.frame-progress__target-body {
  font-weight: 700;
  font-size: 18px;
}

<div class="frame">
  <div class="frame__inner">
    <div class="frame__header">Target Indicator Demo</div>

    <div class="frame__body">
      <div class="frame__body-inner">
        <div class="frame__row">
          <div class="frame-progress">
            <div class="frame-progress__inner">
              <div class="frame-progress__label">Reached:</div>

              <div class="frame-progress__line">
                <div class="frame-progress__line-thumb"></div>
              </div>

              <div class="frame-progress__target">
                <div class="frame-progress__target-header">Target</div>

                <div class="frame-progress__target-body">$15</div>
              </div>
            </div>
          </div>
        </div>

        <div class="frame__row">
          <div class="frame__notify">
            <div class="frame__icon">!</div>

            You need $1 more to reach your target.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

body {
  padding: 0;
  margin: 0;
  color: black;
  font-family: 'Montserrat';
}

#target {
  margin: 100px auto;
  width: 500px;
  height: 10rem;
}

#heading {
  background-color: #5e5c5c;
  padding: 0.4rem 0 0.05rem 1rem;
  border-radius: 0.4rem 0.4rem 0 0;
}

#target-heading {
  color: #fff;
}

#main-window {
  border-radius: 0 0 0.4rem 0.4rem;
  background-color: #f1f1f1;
  height: 100%;
  width: 100%;
  margin: 0;
  padding-top: 1rem;
}

#parant-window {
  margin: auto;
  height: calc(100% - 1rem);
  width: calc(100% - 2rem);
  background-color: #fff;
  border: 1px solid lightgray;
  border-radius: 0.4rem;
  text-align: center;
}

.progres-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  padding: 10px;
}

.target {
  padding: 5px 10px;
  background-color: #8a888b;
  color: #fff;
}

.target h2 {
  margin: 5px;
}

.heading {
  font-size: 1rem;
}

#title-indicator {
  font-weight: bold;
}

#icon-importnt {
  color: rgb(85, 124, 255);
}

.footer {}

#progress-bar {
  width: 200px;
  height: 1rem;
  background-color: lightgray;
}

#progress {
  position: relative;
  height: 75%;
  width: 80%;
  top: 10%;
  left: 0.5%;
  background-color: lightgreen;
}

<section id="target">

  <div id="heading">
    <h1 class="heading" id="target-heading">Target Indicator Demo</h1>
  </div>
  <div id="main-window">

    <div id="parant-window">

      <div class="progres-wrap">
        <h2 class="heading" id="title-indicator">Reached:</h2>
        <div id="progress-bar">
          <div id="progress"></div>
        </div>
        <div class="target">
          <h2>target</h2>
          <div class="target__summ">15</div>
        </div>
      </div>
      <h2 class="heading footer">
        <i id="icon-importnt" class="fas fa-info-circle footer"></i> You need $1 more to reach your target.
      </h2>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Помогите с прогресс баром и позиционированием элементов

Ответы (2 шт):