1

Я пытаюсь сверстать html страничку. Я хочу чтобы нижняя кнопка брала свойства у верхней кнопки, но была шире и по центру. При этом я хочу чтобы поля ввода были по центру на картинке картинке. Что я делаю не так?

body {
  font-family: 'Ubuntu', sans-serif;
  color: #201b2d;
  font-size: 15px;
  padding: 0;
  margin: 0;
}

div,
p,
input,
button,
form,
span,
a,
ul,
li {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
}

.container {
  width: 1170px;
  margin: 0 auto;
}

.btn {
  font-family: 'Montserrat', sans-serif;
  background: #ffd429;
  color: #2e2a1b;
  display: block;
  width: 225px;
  padding: 20px 0;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease;
}

.btn:hover {
  background: #ecce56;
}

.forms {
  padding: 110px 0;
  background: #ecf3f8;
  text-align: center;
}

.input {
  margin-bottom: 20px;
  width: 345px;
  height: 50px;
  padding-left: 50px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  border: 1px solid #bbbbbb;
  width: 100%;
}

.form {
  /*margin: 0;*/
  width: 340px;
  margin: 0 auto;
  /*	display: flex;
		flex-direction: column;
		align-items: center;*/
}

.btn1 {
  width: 100%;
  /*margin: 0 35%;*/
}
<header id="header" class="header">
  <div class="container">


    <a href="#" class="btn">Двигаться к мечте!</a>

  </div>
</header>
<section id="forms" class="forms">
  <div class="container">
    <!-- <div class="mail"> -->
    <h2>Форма заказа билета в будудщее
    </h2>
    <form action="#">
      <input type="name" placeholder="Имя" name="name" class="input" required>
      <!-- <br> -->
      <input type="e-mail" placeholder="E-mail" name="e-mail" class="input" required>
      <!-- <br> -->
      <input type="phone" placeholder="Телефон" name="phone" class="input" required>
      <!-- <br> -->
      <input type="fly" placeholder="Куда я полечу в ближайшее время?" name="fly" class="input" required>
      <!-- 	<div class="button">  -->
      <button type="submit" class="btn" class="btn1">Двигаться к мечте!>
					</button>
      <!-- 	</div>  -->
    </form>
    <!-- <div class="button">  
					<button type="submit" class="btn1">Двигаться к мечте!>
					</button>
				</div>  -->
    <!-- </div> -->
  </div>
</section>

1
  • Это чтобы цвет, текст остались как у верхней и не пришлось прописывать кнопку заново, а просто прописать новую ширину кнопки и центрировать ее.
    – user382744
    13 апр 2020 в 15:33

1 ответ 1

3

Вы 2 раза прописали class для второй кнопки, также стоит добавить border:none. Перед form в стилях уберите точку, это не класс. Или в html добавьте класс form собственно к самой форме form. Ну и еще я убрал container в форме, так как у вас уже сам весь контент + форма в контейнере

body {
  font-family: 'Ubuntu', sans-serif;
  color: #201b2d;
  font-size: 15px;
  padding: 0;
  margin: 0;
}

div,
p,
input,
button,
form,
span,
a,
ul,
li {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
}

.container {
  width: 1170px;
  margin: 0 auto;
}

.btn {
  font-family: 'Montserrat', sans-serif;
  background: #ffd429;
  color: #2e2a1b;
  display: block;
  width: 225px;
  padding: 20px 0;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease;
  border: none;
}

.btn:hover {
  background: #ecce56;
}

.forms {
  padding: 110px 0;
  background: #ecf3f8;
  text-align: center;

}

.input {
  margin-bottom: 20px;
  width: 345px;
  height: 50px;
  padding-left: 50px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  border: 1px solid #bbbbbb;
  width: 100%;
}

form {
  /*margin: 0;*/
  width: 340px;
  margin: 20px auto 0;
  /*	display: flex;
		flex-direction: column;
		align-items: center;*/
}

.btn1 {
  width: 100%;
  /*margin: 0 35%;*/
  
}
<header id="header" class="header">
  <div class="container">


    <a href="#" class="btn">Двигаться к мечте!</a>

  </div>
</header>
<section id="forms" class="forms">
    <!-- <div class="mail"> -->
    <h2>Форма заказа билета в будудщее
    </h2>
    <form action="#">
      <input type="name" placeholder="Имя" name="name" class="input" required>
      <!-- <br> -->
      <input type="e-mail" placeholder="E-mail" name="e-mail" class="input" required>
      <!-- <br> -->
      <input type="phone" placeholder="Телефон" name="phone" class="input" required>
      <!-- <br> -->
      <input type="fly" placeholder="Куда я полечу в ближайшее время?" name="fly" class="input" required>
      <!-- 	<div class="button">  -->
      <button type="submit" class="btn btn1">Двигаться к мечте!
					</button>
      <!-- 	</div>  -->
    </form>
    <!-- <div class="button">  
					<button type="submit" class="btn1">Двигаться к мечте!>
					</button>
				</div>  -->
    <!-- </div> -->

</section>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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