4月14日作業データ（パーティクルその2）

webサイト制作

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>particles.jsその2</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/particles.css">
</head>
<body>
<header>
<h1>particles-js</h1>
</header>
<div class="bg-box"></div>

<div class="particles-wrapper">
<div id="particles-js">
<div class="txt-box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias dolorem explicabo quaerat nemo ea reiciendis fuga nostrum. Excepturi in minima at eligendi possimus, libero repudiandae, voluptas, eveniet maiores repellendus deserunt!</p>
</div><!-- /.txt-box -->
</div><!-- #particles-js -->
</div><!-- /.particles-wrapper -->
<div class="bg-box"></div>
<footer></footer>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
<script src="js/particles.js"></script>
</body>
</html>


style.css

@charset "utf-8";

header{
width: 100%;
height: 100vh;
background-color: #FFF;
}
.bg-box{
width: 100%;
height: 100vh;
background: url(../img/bg-1.jpg) no-repeat center center/cover fixed;
}
.bg-box:nth-of-type(3){
background: url(../img/bg-2.jpg) no-repeat center center/cover fixed;
}
.particles-wrapper{
width: 100%;
height: 60vh;
}
#particles-js{

}
.txt-box{
position: absolute;
top: 50px;
left: 0;
right: 0;
margin: auto;
width: 50%;
background-color: rgba(255, 255, 255, 0.324);
font-size: 20px;
padding: 30px;
line-height: 2;
border-radius: 10px;
}
footer{
width: 100%;
height: 200px;
background-color: #a19653;
}