HTML
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="fix">
<header><h2>Я - сайт</h2></header>
<img alt="" id="img" src="https://pp.userapi.com/c840630/v840630533/5bbf6/GvOYPlU9HpA.jpg">
</div>
<br/><br/><br/>
<img alt="" src="http://coolwallpaper.in/wp-content/uploads/ktz/hd-wallpaper-earth-earth-hd-wallpaper-by-moerblx-d9894v0-qlWOhV-342jphv9ddgyigfky7n3ey.jpg" id="foto"/>
<div id ="head">
<p>Я - сайт</p>
</div>
<article>
tyujjn
</article>
<article>
tyujjn
</article>
</body>
</html>
CSS
*{
}
body{
background:white;
background-size:100vw 100vh;
box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5);
}
header{
box-shadow: 0px 7px 45px 30px rgba(0, 0, 0, 0.6);
color:white;
background:black;
height: 45px;
width:100%;
position:fixed;
z-index:2;
}
header:hover{
height:55px;
box-shadow: 0px 7px 45px 40pxrgba(0,0,0,0.6);
font-size:20px;
}
header h2 {
position:relative;
top:-5px;
left:5vw;
background:transparent;
}
#img {
box-shadow: 5px -5px 10px rgba(0,0,0,0.6);
border-radius:100px;
height:45px;
width:auto;
position:fixed;
top:120px ;
right:5vw;
border: 0px solid white;
border-radius:50%;
z-index:2;
}
#img:hover {
height:75px;
width:auto;
box-shadow: 10px -10px 15px rgba(0,0,0,0.6);
border-radius:100px;
top:115px ;
right:5vw;
}
#foto{
height:100vh;
width:100vw;
position:fixed;
top:-5vh;
}
#head{
color:white;
position:relative;
top:10vh;
font-size:20vh;
text-align:center;
text-shadow: 10px 10px 30px rgba(0,0,0,0.6);
font-family:algerian;
}
article{
position:relative;
top:95vh;
text-align:center;
background-color:snow;
height:125vh;
width:100vw;
box-shadow: 10px -10px 15px 10px ;
z-index:1;
}
