Background image zoom effect.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "montserrat",sans-serif;
}
.landing-page{
width: 100%;
height: 100vh;
background: #000;
position: relative;
overflow: hidden;
}
.landing-page::after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(bg.jpg) no-repeat;
background-size: cover;
opacity: .3;
animation: anim 25s linear infinite;
}
@keyframes anim {
50%{
transform: scale(2);
}
100%{
transform: scale(1);
}
}
.page-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
width: 100%;
max-width: 800px;
text-align: center;
padding: 0 40px;
box-sizing: border-box;
}
.page-content h1{
color: #ff7979;
text-transform: uppercase;
font-size: 50px;
font-weight: 900;
margin-bottom: 20px;
}
.page-content p{
color: #fff;
margin-bottom: 20px;
}
.page-content a{
display: inline-block;
text-decoration: none;
color: #ff7979;
border: 2px solid #ff7979;
text-transform: uppercase;
padding: 10px 20px;
transition: 0.4s linear;
}
.page-content a:hover{
color: #fff;
background: #ff7979;
}
.text{
padding: 10px;
text-align: justify;
}
.text div{
margin-bottom: 6px;
}
</style>
</head>
<body>
<div class="landing-page">
<div class="page-content">
<h1>Full Landing Page</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia illo facilis non mollitia eos fuga quas asperiores modi adipisci cupiditate odit rem reiciendis, natus aspernatur.
</p>
<a href="#">Get Started</a>
</div>
</div>
<div class="text">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quae minus veniam numquam, ea perferendis ratione quaerat! Iusto vitae corporis officiis distinctio saepe reiciendis tenetur earum, qui ex, necessitatibus veritatis.</div>
<div>Eveniet vel blanditiis maxime consectetur iste voluptatibus autem quasi suscipit pariatur doloremque hic sequi ab quidem necessitatibus laboriosam eius tempora cumque aliquid sint, expedita vero rem perferendis quos. Laudantium, facere.</div>
<div>Repellendus, amet. Expedita veritatis hic nostrum accusantium ad voluptatem earum debitis quod laborum, consequatur, beatae, illo blanditiis incidunt dignissimos et laudantium dicta ullam. Et cumque molestias necessitatibus corrupti, blanditiis accusamus.</div>
<div>Quam voluptatum quae quidem commodi nisi. Animi facilis adipisci nulla quas, quis, non culpa harum deserunt quisquam accusantium sed asperiores architecto error incidunt eveniet fugit, nemo quo aliquam enim? Placeat!</div>
<div>Quaerat deserunt enim eum, sequi voluptatibus quae, ipsam sapiente repudiandae laboriosam consequuntur vel deleniti dicta dolorem quidem fuga voluptatum. Necessitatibus labore minus nihil! Perspiciatis nihil aspernatur sunt sequi ea, quo.</div>
<div>Ducimus commodi mollitia aliquid deserunt quo quod earum, aut explicabo numquam dolore reiciendis voluptatibus voluptates facere a iure itaque nobis, corrupti accusamus neque fugiat voluptatum! Dolor error nostrum repellat minima!</div>
<div>Sunt iure voluptates, animi non provident optio soluta hic obcaecati repudiandae distinctio ratione quasi suscipit nisi laboriosam quibusdam nesciunt, repellat iusto quam deleniti dolores neque quo recusandae quis. Pariatur, quis.</div>
<div>Laboriosam expedita facilis in non nulla corrupti aperiam autem id quam tempora quibusdam illo ex voluptatum minima qui odit, harum numquam impedit, atque laborum mollitia distinctio neque. Doloremque, consequatur quod!</div>
<div>Eos aut aspernatur fugit, quaerat asperiores assumenda eum. Accusamus voluptas voluptatem ut nisi voluptatum, placeat iste in. Deleniti officiis sint repellat ad, distinctio qui omnis ullam. Id sapiente modi optio?</div>
<div>Accusamus praesentium fugit consequatur ullam laboriosam ex iste, molestias, fugiat quia. Reiciendis animi deserunt atque nesciunt quaerat harum, doloribus in maxime accusamus quisquam repellat dolore, iure facilis eos provident alias.</div>
</div>
</body>
</html>
