What lines of code have the error (html+css)?

Q

qwertyytrewq12020-04-16 22:42:26

css

qwertyytrewq1, 2020-04-16 22:42:26

It is necessary that the text input window and the button take on a human form.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Страница</title>
  <link rel="stylesheet" href="style.css">
</head>
<body><form action='email.php' method='post'>
    <div class="form">
    <!-- Hidden Required Fields -->
    <input type="hidden" name="project_name" value="http://site.com">
    <input type="hidden" name="admin_email" value="[email protected]">
    <input type="hidden" name="form_subject" value="Тема сообщения">
    <!-- END Hidden Required Fields -->

    <h1>Заголовок</h1>
    <input type="text" name="Сообщение" placeholder="Сообщение..."><br>
        <style>
         a {
           text-decoration: none;
           outline: none;
           display: inline-block;
           color: white;
           padding: 20px 30px;
           margin: 10px 20px;
           border-radius: 10px;
           font-family: 'Montserrat', sans-serif;
           text-transform: uppercase;
           letter-spacing: 2px;
           background-image: linear-gradient(to right, #ff8eb7 0%, #ff83ff 51%, #ff8eb7 100%);
           background-size: 200% auto;
           box-shadow: 0 0 20px rgba(0,0,0,.1);
           transition: .5s;
         }
         a:hover {background-position: right center;}
        </style>
<div style="display:flex;justify-content:center;align-items:center;">
<a href="http://site.com" class="knopka">Отправить</a>
</div>
  </form>
  
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="script.js"></script>

</body>
</html>

css

body {
  background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)), url(background.jpg);
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  font-family: sans-serif;
}

.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,.7);
}

.form h1 {
  margin: 30px 100px;
  padding: 0;
  text-align: center;
  color: #fff;
  font-size: 30px;
  text-transform: uppercase;
}

.input-form {
  margin: 15px 40px;
  text-align: center;
}

.input-form input {
  padding: 10px;
  width: 100%;
  color: #fff;
  font-size: 20px;
  background: none;
  outline: none;
  border: 1px solid #fff;
  box-sizing: border-box;
}

.input-form input[type="text"]:focus, .input-form input[type="password"]:focus {
  border: 1px solid #0fc3f5;
}

.input-form input[type="submit"] {
  margin-top: 20px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  background: #0fc3f5;
  transition: .3s;
}

.input-form input[type="submit"]:hover {
  background: #4442db;
}

.form a {
  display: block;
  padding: 0 0 30px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  transition: .3s;
}

.form a:hover {
  color: #0fc3f5;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

Ilya Morunov, 2020-04-16
@qwertyytrewq1

First, be careful. Don't mindlessly copy code. You've added styles to a selector that doesn't exist (.input-form input).
Second, don't use the br tag to wrap blocks, it's only needed to wrap text. Read about flexbox, it will be very useful for you.
Thirdly, the use of style in html is bad manners.
Fourth, don't name classes - knopka. This makes me smile))
In your example, I did not center the elements using flexbox. For input I used margin-left/right: auto, which can also align the element.
Rendered styling here