Animited HomePage With BurgerMenu

Mounam Bouagal
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>
Like this project
Posted Apr 3, 2024
Animited Homepage with HTML,CSS,Javascript when you Refrech The Page you can see the animition and when you use it on smaller screen you can see the burger menu
Likes
Views