Animited HomePage With BurgerMenu

Web Designer

Fullstack Engineer

Web Developer

ExpressJS

HTML5

Node.js

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Homepage</title>

<style>

body {

  font-family: Arial, sans-serif;

  margin: 0;

  padding: 0;

  background-color: #f5f5f5;

}

html {

  height: 100%;

  width: 100%;

}

.header {

  background: linear-gradient(45deg, #4CAF50, #2196F3);

  color: white;

  padding: 20px;

  text-align: center;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  transition: all 0.3s ease-in-out;

}



.header:hover {

  background: linear-gradient(45deg, #2196F3, #4CAF50);

}



.navbar {

  background-color: transparent;

  overflow: hidden;

}



.navbar a {

  float: right; /* Change to float right */

  display: block;

  color: black;

  text-align: right;

  padding: 14px 20px;

  text-decoration: none;

  transition: background-color 0.3s;

}



.navbar a:hover {

  background-color: #ddd;

  border-radius: 10px;

  color: black;

}



.section {

  text-align: center;

  padding: 40px;

}



.intro {

  background-color: white;

  border-radius: 10px;

  padding: 40px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  animation: appear 1s forwards; /* Add animation */

  opacity: 0; /* Initially hidden */

}



.intro h2 {

  font-size: 36px;

  margin-bottom: 20px;

}



.intro p {

  font-size: 18px;

  color: #666;

}



.intros {

  background-color: white;

  border-radius: 10px;

  padding: 40px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}



/* Burger menu styles */

.burger-menu {

  display: none;

  cursor: pointer;

}



.burger-menu span {

  display: block;

  width: 30px;

  height: 4px;

  background-color: #161a22;

  margin-bottom: 6px;

  transition: all 0.3s ease;

}



.change .bar1 {

  transform: rotate(-45deg) translate(-5px, 6px);

}



.change .bar2 {

  opacity: 0;

}



.change .bar3 {

  transform: rotate(45deg) translate(-5px, -6px);

}



@media screen and (max-width: 600px) {

  .navbar {

    display: none;

    position: absolute;

    top: 80px;

    width: 100%;

    text-align: center;

    background-color: #333;

    z-index: 9999;

  }



  .navbar.active {

    display: block;

  }



  .navbar a {

    display: block;

    padding: 20px;

    color: #fff;

  }



  .burger-menu {

    display: block;

  }

}



@keyframes appear {

  from {

    opacity: 0;

    transform: translateY(-50%);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.right-center {

  text-align: left;

  margin: 0 auto; /* This centers the paragraph horizontally */

}

</style>

</head>

<body>



<div class="intros">

  <div class="burger-menu" onclick="toggleNavbar()">

    <span class="bar1"></span>

    <span class="bar2"></span>

    <span class="bar3"></span>

  </div>

  <div class="navbar" id="navbar">



		<a href="/logout">LOGOUT</a>

		<a href="/account/my">Username</a>

		<a href="/support">SUPPORT</a>

        <a href="/trading">START TRADING</a>

        <p class="right-center" style="color: black;font-size: xx-large">STORM</p>



  </div>

</div>



<div class="section">

  <div class="intro" id="animatedSection">

    <h2>Welcome To STORM</h2>

    <p>Top service to earn money, and ProBot Credits.</p>

  </div>

</div>



<script>

function toggleNavbar() {

  var navbar = document.getElementById("navbar");

  navbar.classList.toggle("active");

  var burger = document.querySelector(".burger-menu");

  burger.classList.toggle("change");

}



document.querySelector('.navbar a[href="#"]').onclick = function() {

  var section = document.getElementById("animatedSection");

  section.style.display = "block";

  return false;

};

</script>



</body>

</html>