Как сделать подобную форму загрузки? Чтобы input для загрузки файла выглядит следующим образом
У меня пока получилось вот так
Что вообще не то. Помогите пожалуйста
.upload-form {
margin: auto;
max-width: 432px;
width: 100%;
height: 100%;
font-size: 16px;
display: block;
line-height: 1.5;
font-weight: normal;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
color: #333;
}
.upload-form input {
width: 100%;
margin: 2px 0;
border: 1px solid #ccc;
padding: 7px 16px;
border-radius: 4px;
outline: none;
}
.upload-form label {
margin: 0 0 2px;
font-weight: normal;
color: #525252;
}
.upload-form span {
line-height: 1.43;
margin: 2px 0;
font-size: 14px;
}
.upload-form .upload {
padding: 24px 16px 32px;
background-color: #f5f7fa;
border: solid 2px #c6dbfb;
border-radius: 4px;
align-items: center;
text-align: center;
margin-bottom: 16px;
}
<div class="wrapper">
<div class="page-header">
<h1>Загрузка презентации на сайт</h1>
</div>
<form asp-action="Upload" enctype="multipart/form-data" method="post" class="upload-form">
<p>Опубликуйте презентацию в формате ppt или pptx.</p>
<div class="upload">
<img class="center-block" src="~/images/icons/upload.svg" />
<p>Перенести вручную с компьютера в это место или</p>
<input type="file" name="file" value="file" />
</div>
<label>Email</label>
<input type="text" name="email" />
<span>Отправим ссылку на загруженную презентацию на email</span>
<button type="submit" class="ss-button ss-button-primary" value="email">Опубликовать</button>
</form>
</div>