<head>
  <title>Список дел</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="jquery-3.4.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="fix-container">
    
    <div class="left-column">
      <h2 class="heading">Список дел:</h2>

      <div class="empty-list">
          Список пуст...
            </div>


            <div class="task-item">
              <div class="task-item__name-flex-container">
                <div class="task-item__name-container">
                  <div class="task-item__name">
                    <span id="name">Купить лошадь</span>
                  </div>

                  <button class="task-item__clear">
                    <img class="task-item__clear-img" src="img/clear-button.png" alt="close">
                  </button>

                  <button class="task-item__open">
                    <img class="task-item__open-img" src="img/arrow.png" alt="open">
                  </button>
                  </div>
              </div>

              <div class="task-item__description">
                <span id="description">По цене 300 т.р. за штуку</span>
              </div>
            </div>
    </div>

    <div class="right-column">
      <form>
        <h2 class="heading">Добавить новое дело</h2>

        <fieldset class="form-container">
          <p class="task-name__label">
            <label for="task-name__field">* Название</label>
          </p>

          <input id="task-name__field" type="text" name="task-name" required="">

          <p class="task-description__label"> 
            <label for="task-description__field">* Описание</label>
          </p>

          <textarea id="task-description__field" name="task-description__" required=""></textarea>

          <button class="add-task-button" type="button">Добавить дело</button>
        </fieldset>
      </form>
    </div>
  </div>
</body>


body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial;
  font-size: 14px;
}

body {
  background-color: #f5f5f5;
}

.fix-container {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding-top: 50px;
  width: 960px;
  height: 100%
}

.left-column {
  min-width: 470px;
}

.right-column {
  min-width: 470px;
}

.heading {
  font-style: 21px;
  font-weight: 400;
}

.form-container {
  height: 500px;
  margin: 0;
  padding: 49px 0 0 0;
  background-color: #ffffff;
  border: none;
}

#task-name__field,
#task-description__field {
  display: block;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #ebebeb;
  background-color: #f9f9f9;
}

#task-name__field {
  width: 390px;
  height: 45px;
  padding: 0 15px 0 15px;
  margin: 0 auto 28px auto;
}

#task-description__field {
  width: 390px;
  height: 230px;
  padding: 15px;
  margin: 0 auto 28px auto;
    resize: none;
  font-family: Arial;
}

.task-name__label {
  margin: 0 0 11px 40px;
}

.task-description__label {
  margin: 0 0 30px 40px;
}

.task-name__label,
.task-description__label {
  color: #8993ad;
}

.add-task-button {
  display: block;
  width: 224px;
  height: 55px;
  margin: 0 auto 30px 40px;
  color: #ffffff;
  font-size: 16px;
  background-color: #2174fd;
  border: none;
}

.task-item {
  background-color: #ffffff;
  display: none;
}

.task-item__name-flex-container {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.4);
}

.task-item__name-container {
  width: 100%
  padding: 0 20px;
}

.task-item__name {
  float: left;
  margin-left: 20px;
  font-size: 16px;
  font-weight: 400;
}

.task-item__clear,
.task-item__open {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

.task-item__clear {
  float: left;
  margin-left: 20px;
}

.task-item__open {
  float: right;
  margin-left: 280px;
}

.task-item__description {
  height: 85px;
  padding: 10px 20px;
  overflow: hidden;
  color: #8993ad;
}

.clear {
  display: none;
}

.empty-list {
  padding-top: 47px;
  font-size: 16px;
  color: #8993ad;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.