Homepage Design Using HTML & CSS

Irfan Hussain
May 15, 2020
Legenddocx Creation represents you In this Video How to create Responsive Homepage Design using HTML, CSS, and some javascript.

Download Code Here



HTML:--

<html>

<head>
<meta charset="utf-8">
<title>Home Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="menu">
<ul class="menu-list" data-offset="10">
<li class="menu-list-item" data-offset="20" onclick>
Home
<span class="mask"><span>Home</span></span>
<span class="mask"><span>Home</span></span>
</li>
<li class="menu-list-item" data-offset="16" onclick>
About
<span class="mask"><span>About</span></span>
<span class="mask"><span>About</span></span>
</li>
<li class="menu-list-item" data-offset="12" onclick>
Work
<span class="mask"><span>Work</span></span>
<span class="mask"><span>Work</span></span>
</li>
<li class="menu-list-item" data-offset="8" onclick>
Contact
<span class="mask"><span>Contact</span></span>
<span class="mask"><span>Contact</span></span>
</li>
</ul>
</div>
</body>
</html>


CSS:-- 

<style>
body {
font-family: "Gilroy ExtraBold", system-ui, sans-serif;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-webkit-font-kerning: normal;
-webkit-text-size-adjust: 100%;
}

html,
body {
width: 100vw;
height: 100vh;
}

body {
background: linear-gradient(45deg, #02001f, #1f1b4e);
-webkit-transform-style: perserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(60rem);
transform: perspective(60rem);
position: fixed;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
justify-content: center;
}

.menu-list {
font-size: 4.25rem;
line-height: 1.2;
text-transform: uppercase;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
align-items: center;
-webkit-box-align: center;
-webkit-transform: rotateX(-10deg) rotateY(20deg);
transform: rotateX(-10deg) rotateY(20deg);
}

.menu-list-item {
position: relative;
color: transparent;
cursor: pointer;
}

.menu-list-item::before {
content: "";
display: block;
position: absolute;
top: 49%;
left: -10%;
right: -10%;
height: 4px;
border-radius: 4px;
margin-top: -2px;
background: cyan;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
transition: -webkit-transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
transition: transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
transition: transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98),
-webkit-transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
z-index: 1;
}

.mask {
display: block;
position: absolute;
overflow: hidden;
color: #ff2c75;
top: 0;
height: 49%;
-webkit-transition: all 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
transition: all 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

.mask span {
display: block;
}

.mask+.mask {
top: 48.9%;
height: 51.1%;
}

.mask+.mask span {
-webkit-transform: translateY(-49%);
transform: translateY(-49%);
}

.menu-list-item:hover .mask,
.menu-list-item:active .mask {
box-shadow: 1px 1px 2px 2px rgba(61, 203, 187, 0.4);
-webkit-transform: skewX(12deg) translateX(5px);
transform: skewX(12deg) translateX(5px);
}

.menu-list-item:hover .mask+.mask. .menu-list-item:active .mask+.mask {
-webkit-transform: skewX(12deg) translateX(-5px);
transform: skewX(12deg) translateX(-5px);
}

.menu-list-item:hover::before,
.menu-list-item:active::before {
-webkit-transform: scale(1);
transform: scale(1);
}

</style>


JAVASCRIPT:--

 <script>
var $menu = $('.Menu-list'),
$item = $('.Menu-list-item'),
w = $(window).width(), //window width
h = $(window).height(); //window height

 $(window).on('mousemove', function(e) {
var offsetX = 0.5 - e.pageX / w, //cursor position X
offsetY = 0.5 - e.pageY / h, //cursor position Y
dy = e.pageY - h / 2, //@h/2 = center of poster
dx = e.pageX - w / 2, //@w/2 = center of poster
theta = Math.atan2(dy, dx), //angle between cursor and center of poster in RAD
angle = theta * 180 / Math.PI - 90, //convert rad in degrees
offsetPoster = $menu.data('offset'),
transformPoster = 'translate3d(0, ' + -offsetX * offsetPoster + 'px, 0) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)'; //poster transform

 //get angle between 0-360
if (angle < 0) {
angle = angle + 360;
}

 //poster transform
$menu.css('transform', transformPoster);

 //parallax for each layer
$item.each(function() {
var $this = $(this),
offsetLayer = $this.data('offset') || 0,
transformLayer = 'translate3d(' + offsetX * offsetLayer + 'px, ' + offsetY * offsetLayer + 'px, 20px)';

 $this.css('transform', transformLayer);
});
});
</script>