Form by andrew-demchenk0

Made by

@andrew-demchenk0

Theme:

Light

#form

#e8e8e8

993 views

CSSAdd prefixes

1.feed-form {
2  margin-top: 36px;
3  display: flex;
4  flex-direction: column;
5  width: 300px;
6}
7
8.feed-form input {
9  height: 54px;
10  border-radius: 5px;
11  background: white;
12  margin-bottom: 15px;
13  border: none;
14  padding: 0 20px;
15  font-weight: 300;
16  font-size: 14px;
17  color: #4B4B4B;
18}
19
20.button_submit:hover, .feed-form input:hover {
21  transform: scale(1.009);
22  box-shadow: 0px 0px 3px 0px #212529;
23}
24
25.button_submit {
26  width: 100%;
27  height: 54px;
28  font-size: 14px;
29  color: white;
30  background: red;
31  border-radius: 5px;
32  border: none;
33  font-weight: 500;
34  text-transform: uppercase;
35}
36

.feed-form {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  width: 300px;
}

.feed-form input {
  height: 54px;
  border-radius: 5px;
  background: white;
  margin-bottom: 15px;
  border: none;
  padding: 0 20px;
  font-weight: 300;
  font-size: 14px;
  color: #4B4B4B;
}

.button_submit:hover, .feed-form input:hover {
  transform: scale(1.009);
  box-shadow: 0px 0px 3px 0px #212529;
}

.button_submit {
  width: 100%;
  height: 54px;
  font-size: 14px;
  color: white;
  background: red;
  border-radius: 5px;
  border: none;
  font-weight: 500;
  text-transform: uppercase;
}

HTML

1
2<section class="section_form">
3  <form id="consultation-form" class="feed-form" action="#">
4    <input required="" placeholder="Name" type="text">
5    <input name="phone" required="" placeholder="Phone number">
6    <input name="email" required="" placeholder="E-mail" type="email">
7    <button class="button_submit">ORDER</button>
8  </form>
9</section>


<section class="section_form">
  <form id="consultation-form" class="feed-form" action="#">
    <input required="" placeholder="Name" type="text">
    <input name="phone" required="" placeholder="Phone number">
    <input name="email" required="" placeholder="E-mail" type="email">
    <button class="button_submit">ORDER</button>
  </form>
</section>