web-html5-scripts/templates-and-navigation/home-page-design/index.html
2020-05-07 20:51:13 +02:00

74 lines
3.1 KiB
HTML

<!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>