当我单击 Burger_btn 时，它会转换为 cross_btn 但列表菜单未显示我尝试通过将 console.log() 语句放在两个函数的开头和结尾进行调试，但 console.log() 语句打印在控制台正确无任何错误...
main.html:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/344e33a3ea.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="main.css">
<link rel="icon" href="/logo/favicon.png">
<title>PortFolio Website</title>
</head>
<body>
<div class="header white" id="header">
<div class="logo">
<a href="#"><img src="/logo/logo 1.png" alt="logo"></a>
</div>
<div class="list">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Contact</a></li>
</ul>
<i id="burger" class="fa-solid fa-bars"></i>
<i id="cross" class="fa-solid fa-xmark"></i>
</div>
</div>
<div class="body1 white">
<div class="lbody">
<h2>I am Aditya</h2>
<h1>Sound Engineer +<br>Video Editor</h1>
<p>Crafting compelling narratives through seamless fusion of visuals and sound, while crafting words that captivate and convert. I bring stories to life, igniting emotions and driving action.</p>
<button>HIRE ME</button>
</div>
<div class="rbody">
<img src="#" alt="myface">
</div>
<div class="lower">
<div>
<p>2</p>
<p>Years of Experience</p>
</div>
<div>
<p>12+</p>
<p>Projects Completed</p>
</div>
<div>
<p>5+</p>
<p>Happy Clients</p>
</div>
<div>
<p>4.9</p>
<p>Star Reviews</p>
</div>
</div>
</div>
<div class="body2 black">
<div class="lbody">
<h2>Our Services</h2>
<h1>What We Do?</h1>
<hr>
<p>From crafting capativating visuals to engineering immersive soundscapes, we bring stories to life. With precision editing, audio mastery, and compelling copy, we elevate brands and captivate audiences.</p>
<p>View All Services</p>
</div>
<div class="rbody">
<div class="skill">
<img src="#" alt="#">
<h3>Video Editing</h3>
<p>Ignite emotion and leave a lasting impression with our tailored video editing services, where every frame tells a story worth remembering.</p>
</div>
<div class="skill">
<img src="#" alt="#">
<h3>Sound Design</h3>
<p>Experience the difference of superior sound design where every note, every beat, and every sound is crafted with passion and expertise to captivate and inspire.</p>
</div>
<div class="skill">
<img src="#" alt="#">
<h3>Copy Writting</h3>
<p>Unleash your brand's narrative with our precision-crafted copywritting, ensuring every word speaks volumes with clarity and conviction</p>
</div>
<div class="skill">
<img src="#" alt="#">
<h3>Motion Graphic</h3>
<p>Unlock the power of dynamic visuals with our premium motion graphics services, setting your brand apart with style and sophistication.</p>
</div>
</div>
<div class="lower">
<h2>My Skills</h2>
<p>Crafting visual symphonies and sculpting auditory landscapes, we blend pixels and soundwaves into stories that captivate hearts and minds. Where creativity meets precision, every frame resonates with emotion, breathing life into narratives that linger long after screen fades.</p>
<div class="softwares">
<div>
<div>
<img src="#" alt="Photo Shop" class="software">
<p>93%</p>
</div>
<p>PhotoShop</p>
</div>
<div>
<div>
<img src="#" alt="After Effects" class="software">
<p>78%</p>
</div>
<p>AfterEffects</p>
</div>
<div>
<div>
<img src="#" alt="Premier Pro" class="software">
<p>97%</p>
</div>
<p>Premier Pro</p>
</div>
<div>
<div>
<img src="#" alt="Illustrator" class="software">
<p>89%</p>
</div>
<p>Illustrator</p>
</div>
<div>
<div>
<img src="#" alt="Canva" class="software">
<p>78%</p>
</div>
<p>Canva</p>
</div>
<div>
<div>
<img src="#" alt="ChatGPT" class="software">
<p>91%</p>
</div>
<p>ChatGPT</p>
</div>
</div>
</div>
</div>
<div class="body3 white">
<h2>My Recent Works</h2>
<p>Crafting visual narratives, pixel by pixel, to bring stories to life. Elevating moments into mesmerizing experiences through the lens of editing.</p>
<div class="work">
<ul>
<li><a href="#">All</a></li>
<li><a href="#">Best</a></li>
<li><a href="#">Long</a></li>
<li><a href="#">Shorts</a></li>
<li><a href="#">Mine</a></li>
</ul>
<div class="collage">
<img src="#" alt="work">
<img src="#" alt="work">
<img src="#" alt="work">
<img src="#" alt="work">
<img src="#" alt="work">
<img src="#" alt="work">
<img src="#" alt="work">
<img src="#" alt="work">
<img src="#" alt="work">
</div>
</div>
</div>
<div class="body4 black">
<div class="upper">
<h2>Recent Blogs</h2>
<p>Join us on a voyage through the art and science of video editing, as we share our latest insights and discoveries.</p>
<div class="blogs">
<div class="blog">
<div class="rUp">
</div>
<div class="down">
<p>#</p>
<p>#</p>
</div>
</div>
<div class="blog">
<div class="rUp">
</div>
<div class="down">
<p>#</p>
<p>#</p>
</div>
</div>
<div class="blog">
<div class="rUp">
</div>
<div class="down">
<p>#</p>
<p>#</p>
</div>
</div>
</div>
</div>
<div class="lower">
<h2>My Client's Stories</h2>
<p>Join me on a journey through the narratives of my clients, where each project is a chapter in the story of collaboration and innovation.</p>
<div class="review">
<h5>Name</h5>
<img src="#" alt="photo">
<img src="#" alt="design">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quo eligendi tempora quos consequatur voluptatum corrupti ullam beatae eos. Sequi saepe labore sunt deserunt animi debitis expedita tenetur neque blanditiis.</p>
</div>
<div class="review">
<h5>Name</h5>
<img src="#" alt="photo">
<img src="#" alt="design">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quo eligendi tempora quos consequatur voluptatum corrupti ullam beatae eos. Sequi saepe labore sunt deserunt animi debitis expedita tenetur neque blanditiis.</p>
</div>
</div>
</div>
<div class="roller">
<img src="#" alt="image">
<img src="#" alt="image">
<img src="#" alt="image">
</div>
<div class="body5 white">
<h2>Get In Touch</h2>
<p>Let's start a conversation and turn your vision into reality. Reach out today and let's create something extraordinary together.</p>
<div class="left">
<h3>DROP A LINE</h3>
<form action="#">
<label for="name">Your Name</label>
<br>
<input type="text" id="name">
<br>
<label for="email">Email</label>
<br>
<input type="email" id="email">
<br>
<label for="subject">Subject</label>
<br>
<input type="text" id="subject">
<br>
<label for="message">Message</label>
<br>
<textarea name="message" id="message" cols="30" rows="3"></textarea>
<input type="submit" value="Send Message">
</form>
</div>
<div class="right">
<h3>Hire Me</h3>
<p>+91-7309566251</p>
<p>[email protected]</p>
<button>DOWNLOAD RESUME</button>
<div class="social">
<img src="#" alt="twitter">
<img src="#" alt="linkedin">
<img src="#" alt="instagram">
<img src="#" alt="facebook">
</div>
</div>
</div>
<div class="footer black">
<p>Copyright @2024 All rights reserved | This website is made with 💓 by clip_craftsman</p>
</div>
</body>
<script src="main.js"></script>
</html>
main.css:-
*{
margin:0;
padding:0;
font-family:'Poppins',Arial, Courier, monospace;
}
:root{
--blackish:#1f2833;
--creamish:#fffdd0;
}
.open {
display:block;
position: absolute;
background-color: var(--blackish);
color: var(--creamish);
width: 100%;
height: 25rem;
text-align: center;
font-size: 5rem;
/* padding: 2rem 0rem 0rem 0rem;
margin: -1rem 0rem 0rem -10.5rem; */
}
.white{
background-color:var(--creamish);
color:var(--blackish);
}
.black{
background-color:var(--blackish);
color:var(--creamish);
}
.header{
padding:0.25rem 1.5rem;
top:0;
left:0;
width:100%;
display:flex;
position:sticky;
z-index:999;
}
.logo{
width:40%;
}
.logo img{
height:3.2rem;
width:auto;
}
.header ul{
list-style:none;
display:flex;
width:60%;
}
.list i{
display:none;
margin:0.4rem 0rem 0rem 8.5rem;
font-size:2rem;
color:var(--blackish);
cursor:pointer;
}
.header li{
margin:0.6rem 0rem 0rem 3rem;
font-size:1.2rem;
}
.header li a{
text-decoration: none;
color:var(--blackish);
transition: font-weight 0.75s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.header li a:hover{
font-weight: 600;
}
@media only screen and (max-width:360px){
.header ul{
display:none;
}
.list #burger{
display:block;
}
}
main.js:-
document.addEventListener("DOMContentLoaded", function() {
const burger_btn=document.querySelector("#burger");
const cross_btn=document.querySelector("#cross");
const list=document.querySelector(".header ul");
burger_btn.addEventListener('click',show);
cross_btn.addEventListener('click',hide);
function show(){
burger_btn.style.display="none";
cross_btn.style.display="block";
list.classList.add("open");
}
function hide(){
burger_btn.style.display="block";
cross_btn.style.display="none";
list.classList.remove("open");
}
});