<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Home Page Design</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css'><link rel="stylesheet" href="./style.css"> </head> <body> <div class="main"> <div class="main-header"> <div class="nav-button but-hol"> <span class="nos"></span> <span class="ncs"></span> <span class="nbs"></span><div class="menu-button-text">Menu</div></div> <div class="header-social"> <ul> <li><a target="_blank" href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a target="_blank" href="#"><i class="fab fa-twitter"></i></a></li> <li><a target="_blank" href="#"><i class="fab fa-dribbble"></i></a></li> <li><a target="_blank" href="#"><i class="fab fa-instagram"></i></a></li> </ul> </div> <div class="folio-btn"> <a class="folio-btn-item ajax" href="#" target="_blank"><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span><span class="folio-btn-dot"></span></a> </div> </div> <div id="wrapper"> <div class="content-holder"> <div class="hero-wrap fl-wrap full-height scroll-con-sec"> <div class="impulse-wrap"> <div class="mm-par-wrap"> <div class="mm-parallax" data-tilt data-tilt-max="4" > <div class="overlay"></div> <div class="bg" data-bg="https://images.unsplash.com/photo-1499018658500-b21c72d7172b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" style="background-image: url(https://images.unsplash.com/photo-1499018658500-b21c72d7172b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);"> </div> <div class="hero-wrap-item fl-wrap"> <div class="container"><div class="fl-wrap section-entry hiddec-anim" style="opacity: 1; "> <h1 class="BoardName">Welcome to My Page</h1> </div></div></div> </div> </div> </div> <div class="hero-corner hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div> <div class="hero-corner2 hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div> <div class="hero-corner3 hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div> <div class="hero-corner4 hiddec-anim" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"></div> </div> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script> </body> </html>