Как вот в эту область вставить фотку?
Вот код(заранее предупреждаю!!! Код не первого уровня качества!!)
<!DOCTYPE html>
<!--Website created by Zhukov Misha for "Letovo"-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Parallax is cool</title>
<style>
@font-face {
font-family: 'Future';
src:url('C:/Users/Admin/Desktop/fonts/future.woff2') format('woff2')
}
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
overflow-y: scroll;
overflow-x: hidden;
font-family: 'Future', bold;
color: #fff;
}
header {
margin-top: -317px;
box-sizing: border-box;
min-height: 100vh;
padding-top: 20%;
transform-style: inherit;
width: 100vw;
}
header::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
transform-origin: center;
min-height: 100vh;
background-color: rgb(30, 30, 30);
background-repeat: no-repeat;
background-size: cover;
transition: 1s;
/* Параллакс */
transform: translateZ(-1px) scale(2);
}
header h1 {
margin-left:9vh;
margin-bottom: 500px;
font-size: 170px;
}
img{
margin-bottom: inherit;
margin-right: inherit;
margin-top: inherit;
margin-left: inherit + 100px;
}
</style>
</head>
<body>
<header id="block1">
<h1> Misha<br>Zhukov </h1>
</header>
</body>
А вот тот отрезок который можно назвать самым важным
header {
margin-top: -317px;
box-sizing: border-box;
min-height: 100vh;
padding-top: 20%;
transform-style: inherit;
width: 100vw;
}
header::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
transform-origin: center;
min-height: 100vh;
background-color: rgb(30, 30, 30);
background-repeat: no-repeat;
background-size: cover;
transition: 1s;
/* Параллакс */
transform: translateZ(-1px) scale(2);
}
header h1 {
margin-left:9vh;
margin-bottom: 500px;
font-size: 170px;
}
<header id="block1">
<h1>Misha <br> Zhukov</h1>
</header>
Когда я вставляю фотку 400 на 200 у меня либо:
Фотка между именем и фамилием, либо снизу h1
Я только изучаю фронтенд, но как это решить...
:):):)
