It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 30 March 2021
To differentiate your website from other websites, you must use special styles for different sections of the site. The following code provides a special style for displaying your texts and headlines. Old movie playback style is located in the background of your text in a HTML page, which makes it nostalgic.
<!-- this script is provided by http://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
.main-content {
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
height: 100vh;
background: linear-gradient(to right, rgba(36,31,31,1) 0%, rgba(36,31,31,1) 32%, rgba(74,71,70,1) 100%);
color: #fff;
text-align: center;
}
.vignette {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 150px 20px black;
mix-blend-mode: multiply;
-webkit-animation: vignette-anim 3s infinite; /* Safari 4+ */
-moz-animation: vignette-anim 3s infinite; /* Fx 5+ */
-o-animation: vignette-anim 3s infinite; /* Opera 12+ */
animation: vignette-anim 3s infinite; /* IE 10+, Fx 29+ */
}
.noise {
z-index: 100;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: .15;
}
.line {
position: absolute;
height: 100%;
width: 1px;
opacity: 0.1;
background-color: #000;
}
.titleCont {
position: relative;
}
.main-title {
padding: .3em 1em .25em;
font-weight: 400;
font-size: 40px;
color: white;
font-family: 'Bellefair', serif;
position: relative;
line-height: 1.3;
white-spacing:
}
.overTitle {
position: absolute;
top: 0;
left: 0;
}
.dot {
width: 3px;
height: 2px;
background-color: white;
position: absolute;
opacity: 0.3;
}
@-webkit-keyframes vignette-anim {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@-moz-keyframes vignette-anim {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@-o-keyframes vignette-anim {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@keyframes vignette-anim {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
</style>
<link href="https://fonts.googleapis.com/css?family=Bellefair" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<main role="main" class="main-content" id="main-content">
<div class="titleCont">
<h1 class="main-title" id="main-title">
"Here, in the forest,<br><span style="padding-left:100px">dark and deep,</span><br>
<span style="padding-right:110px">I offer you,</span><br><span style="padding-left:-20px">eternal sleep."</span>
</h1>
</div>
<canvas id="noise" class="noise"></canvas>
<div class="vignette"></div>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src='https://www.htmlbestcodes.com/files/movie1.js'></script>
<script src='https://www.htmlbestcodes.com/files/movie2.js'></script><a target='_blank' href='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!