1

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

.content {
  display: flex;
  margin: 0px 0px 0px 100px;
}

.whether {
  width: 190px;
  height: 450px;
  border: 3px solid rgb(22, 155, 207);
  border-radius: 6px;
}

.city p {
  padding: 30px 0px 0px 0px;
  text-align: center;
  color: rgb(47, 164, 231);
  font-size: xx-large;
}

.celsius {
  text-align: center;
  padding: 30px 0px 30px 0px;
  font-size: xxx-large;
}

.button {
  position: absolute;
  top: 44%;
  left: 10.5%;
}

.go {
  background: rgba(47, 164, 231, 0.514);
  border: none;
  width: 90px;
  height: 45px;
}

.go p {
  color: cornsilk;
}
<div class="content">
  <div class="whether">
    <div class="city">
      <p>Киев</p>
    </div>

    <hr size="2px" color="#ECECEC" width="130px">

    <div class="celsius">10 &#8451; </div>

    <hr size="2px" color="#ECECEC" width="130px">

    <div class="button">
      <button class="go"><p>GO</p></button>
    </div>
  </div>

Также я не знаю почему кнопка улетела, у меня в браузере отображается нормально: введите сюда описание изображения

Спасибо большое!

1 ответ 1

1

Вот это - порядок в коде:

div {
  width: 150px;
  height: 450px;
  padding: 0 20px;
  border: 3px solid rgb(22, 155, 207);
  border-radius: 6px;
  text-align: center;
}

div h3 {
  margin: 50px 0 50px 0;
  font-size: xx-large;
  color: rgb(47, 164, 231);
}

div p {
  padding: 40px 0;
  border-top: 2px solid lightgray;
  border-bottom: 2px solid lightgray;
  font-size: xxx-large;
}

div button {
  cursor: pointer;
  outline: none;
  border: none;
  width: 90px;
  height: 45px;
  background: rgba(47, 164, 231, 0.514);
}
<div>
  <h3>Киев</h3>
  <p>10 &#8451;</p>
  <button>GO</button>
</div>

2
  • Подскажите пожалуйста, лучше всего на каком ресурсе подтянуть верстку ? + (JS) 1 мая 2021 в 16:25
  • :))) нормально-ж дружили)) Но и вправду, не подскажешь как НАУЧИТЬСЯ) верстать ? Какой ресурс или книгу посоветовал бы ? 1 мая 2021 в 16:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.