<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Business Website</title>
<link
href="[Link]
rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
background:#0f172a;
color:white;
scroll-behavior:smooth;
}
/* NAVBAR */
nav{
display:flex;
justify-content:space-between;
padding:20px 60px;
background:#020617;
position:sticky;
top:0;
}
nav a{
color:white;
text-decoration:none;
margin:0 10px;
}
/* HERO */
.hero{
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
background:linear-gradient(120deg,#2563eb,#9333ea);
}
.hero h1{
font-size:50px;
margin-bottom:20px;
}
.hero button{
padding:12px 30px;
border:none;
border-radius:30px;
cursor:pointer;
background:white;
color:black;
transition:0.3s;
}
.hero button:hover{
transform:scale(1.1);
}
/* SECTION */
section{
padding:80px 60px;
text-align:center;
}
/* CARDS */
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:30px;
}
.card{
background:#1e293b;
padding:30px;
border-radius:15px;
transition:0.3s;
}
.card:hover{
transform:translateY(-10px);
}
/* GALLERY */
.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:10px;
margin-top:30px;
}
.gallery img{
width:100%;
border-radius:10px;
}
/* CHATBOT */
#chatbot{
position:fixed;
bottom:20px;
right:20px;
background:#2563eb;
padding:15px 20px;
border-radius:50px;
cursor:pointer;
}
#chatbox{
display:none;
position:fixed;
bottom:80px;
right:20px;
width:250px;
background:white;
color:black;
padding:15px;
border-radius:10px;
}
</style>
</head>
<body>
<nav>
<h2>MySite</h2>
<div>
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#gallery">Gallery</a>
</div>
</nav>
<section class="hero" id="home">
<h1>Build Amazing Websites</h1>
<p>Modern design with animation</p>
<button onclick="scrollToServices()">Explore</button>
</section>
<section id="services">
<h2>Our Services</h2>
<div class="cards">
<div class="card">
<h3>Website Design</h3>
<p>Modern responsive websites.</p>
</div>
<div class="card">
<h3>SEO</h3>
<p>Rank your business on Google.</p>
</div>
<div class="card">
<h3>Marketing</h3>
<p>Grow your online presence.</p>
</div>
</div>
</section>
<section id="gallery">
<h2>Gallery</h2>
<div class="gallery">
<img src="[Link]
<img src="[Link]
<img src="[Link]
<img src="[Link]
</div>
</section>
<div id="chatbot" onclick="toggleChat()">Chat</div>
<div id="chatbox">
<p><b>Chatbot:</b> Hello! How can I help?</p>
<input type="text" id="userInput" placeholder="Type..." style="width:100%;margin-top:10px">
<button onclick="reply()">Send</button>
<p id="botReply"></p>
</div>
<script>
function scrollToServices(){
[Link]("services").scrollIntoView({behavior:"smooth"})
}
function toggleChat(){
let box=[Link]("chatbox")
[Link]=[Link]==="block"?"none":"block"
}
function reply(){
let input=[Link]("userInput").value
let reply=""
if([Link]("price")){
reply="Website price starts from $50"
}
else if([Link]("hello")){
reply="Hello! Welcome to our website."
}
else{
reply="Please contact us for more info."
}
[Link]("botReply").innerText=reply
</script>
</body>
</html>