<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hpscript</title> <meta name="description" content="Hpscript provides comprehensive software services of full commitment to help you achieve your goals at any stage."> <link rel="stylesheet" type="text/css" href="css/video-styles.css"> <link rel="shortcut icon" href="favicon.ico"> </head> <body> <header id="header"> <h1>Hpscript</h1> <div id="video-area"> <video id="video" src="audio/video.mp4" webkit-playsinline playsinline muted autoplay loop></video> </div> </header> </body> </html>
@charset "utf-8";
#header {
position: relative;
height: 100vh;
}
#video-area {
position: fixed;
z-index: -1;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: hidden;
}
#video {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 177.77777778vh;
height: 56.25vw;
min-height: 100%;
min-width: 100%;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
color: #fff;
text-shadow: 0 0 15px #666;
}
a {
color: #fff;
}
よっしゃあ、次はreactやな
