В каких строках кода ошибка (html+css)?

Question

qwertyytrewq1 @qwertyytrewq1

HTML
CSS

В каких строках кода ошибка (html+css)?

Необходимо, чтобы окно ввода текста и кнопка приобрели человеческий вид.

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@gmail.com">
		<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;
}

Вопрос задан более трёх лет назад
107 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Решения вопроса 1

3 комментария

qwertyytrewq1 @qwertyytrewq1 Автор вопроса

Благодарю за ответ, учту.

Написано более трёх лет назад

qwertyytrewq1 @qwertyytrewq1 Автор вопроса

Правда сейчас другая проблемка )) Сценарий по отправке сообщений не работает

$(document).ready(function() {

	//E-mail Ajax Send
	$("form").submit(function() { //Change
		var th = $(this);
		$.ajax({
			type: "POST",
			url: "mail.php", //Change
			data: th.serialize()
		}).done(function() {
			alert("Obecnie prowadzimy konserwację strony. Spróbuj ponownie później.");
			setTimeout(function() {
				// Done Functions
				th.trigger("reset");
			}, 1000);
		});
		return false;
	});

});

<?php

$method = $_SERVER['REQUEST_METHOD'];

//Script Foreach
$c = true;
if ( $method === 'POST' ) {

	$project_name = $modx->getOption('site_name');
	$admin_email  = $modx->getOption('emailsender');
	$form_subject = "Заявка с сайта " . $modx->getOption('site_name') . "";

	foreach ( $_POST as $key => $value ) {
		if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
			$message .= "
			" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
				<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
				<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
			</tr>
			";
		}
	}
} else if ( $method === 'GET' ) {

	$project_name = trim($_GET["project_name"]);
	$admin_email  = trim($_GET["admin_email"]);
	$form_subject = trim($_GET["form_subject"]);

	foreach ( $_GET as $key => $value ) {
		if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
			$message .= "
			" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
				<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
				<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
			</tr>
			";
		}
	}
}

$message = "<table style='width: 100%;'>$message</table>";

function adopt($text) {
	return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );

<?php

$method = $_SERVER['REQUEST_METHOD'];

//Script Foreach
$c = true;
if ( $method === 'POST' ) {

	$project_name = trim($_POST["project_name"]);
	$admin_email  = trim($_POST["admin_email"]);
	$form_subject = trim($_POST["form_subject"]);

	foreach ( $_POST as $key => $value ) {
		if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
			$message .= "
			" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
				<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
				<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
			</tr>
			";
		}
	}
} else if ( $method === 'GET' ) {

	$project_name = trim($_GET["project_name"]);
	$admin_email  = trim($_GET["admin_email"]);
	$form_subject = trim($_GET["form_subject"]);

	foreach ( $_GET as $key => $value ) {
		if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
			$message .= "
			" . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
				<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
				<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
			</tr>
			";
		}
	}
}

$message = "<table style='width: 100%;'>$message</table>";

function adopt($text) {
	return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );

Написано более трёх лет назад

Илья Морунов @Chrissik

qwertyytrewq1, Это лучше отдельным постом

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 1 подписчик
- 15 минут назад
- 34 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- час назад
- 23 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 13 часов назад
- 99 просмотров
2

ответа
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 19 часов назад
- 92 просмотра
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 22 часа назад
- 110 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 81 просмотр
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- вчера
- 76 просмотров
1

ответ
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- вчера
- 72 просмотра
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- 30 апр.
- 89 просмотров
1

ответ
CSS

Простой
Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?
- 4 подписчика
- 30 апр.
- 1102 просмотра
2

ответа
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать контент план на месяц для Тг канала по обучению испанскому

02 мая 2024, в 12:23

2000 руб./за проект

Написать бэк часть (API Эквайринг Тинькофф, VK API, API Cloudpayments)

28 апр. 2024, в 13:02

500000 руб./за проект

Создать простой зеро блок на тильда или html блок

02 мая 2024, в 11:31

500 руб./за проект

Приведите скрин, пожалуйста, и напишите, что для вас значит «человеческий вид»
В каких строках кода ошибка (html+css)?

Это показывают редакторы кода и валидатор. Если вы сами не в состоянии посчитать открывающие и закрывающие теги.
Использовать экспертов лучше в более интересных целях.

Answer 1 · 2020-04-16 23:23:06

Во-первых, будьте внимательнее. Не копируйте бездумно код. Вы добавили стили к несуществующему селектору (.input-form input).
Во-вторых, не используйте тег br для переноса блоков, он нужен лишь для переноса текста. Почитайте про flexbox, очень полезно Вам будет.
В-третьих, использование style в html - моветон.
В-четвертых, не называйте классы - knopka. Это заставляет улыбаться))

В Вашем примере я не центровал элементами средствами flexbox. Для input использовал margin-left/right: auto, что так же может выравнить элемент.

Отобразил стилизацию здесь

В каких строках кода ошибка (html+css)?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт