🤖 Cannot save fiddle #2357
Description
Error code
ERRW:1.0:K1.0:AS
Were you logged in?
Yes
Your username (if logged in)
Niranjan 6969
Your HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyBridge Exports</title>
<link rel="stylesheet" href="style.css">
<meta name="theme-color" content="#facc15">
</head>
<body>
<!-- NAVBAR -->
<header class="navbar">
<div class="logo">SkyBridge Exports</div>
<nav>
<a href="#hero">Home</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- HERO SECTION -->
<section class="hero" id="hero">
<h1>Bridging Global Trade</h1>
<p>International Import • Export • Logistics Solutions</p>
<button>Request Quote</button>
</section>
<!-- SERVICES SECTION -->
<section class="services" id="services">
<div class="card">
<h3>Import & Export</h3>
<p>Seamless cross-border trade solutions worldwide.</p>
</div>
<div class="card">
<h3>Logistics</h3>
<p>Efficient shipping & supply chain management.</p>
</div>
<div class="card">
<h3>Consulting</h3>
<p>Strategic global trade advisory services.</p>
</div>
</section>
<!-- CONTACT SECTION -->
<section class="contact" id="contact">
<div class="contact-container">
<div class="contact-info">
<h2>Contact Us</h2>
<p>Email: <a href="mailto:niranjansonar545@gmail.com">niranjansonar545@gmail.com</a></p>
<p>Phone: <a href="tel:+918767418629">+91 8767418629</a></p>
<p>Location: Dharangaon, Maharashtra, India</p>
</div>
<form class="contact-form">
<input type="text" placeholder="Full Name" required>
<input type="email" placeholder="Email Address" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</section>
<!-- FOOTER -->
<footer>
© 2026 SkyBridge Exports. All Rights Reserved.
</footer>
<!-- JS FOR FORM -->
<script>
const form = document.querySelector(".contact-form");
form.addEventListener("submit", function(e) {
e.preventDefault();
alert("Thank you! Our team will contact you soon.");
form.reset();
});
</script>
</body>
</html>Your JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyBridge Exports</title>
<link rel="stylesheet" href="style.css">
<meta name="theme-color" content="#facc15">
</head>
<body>
<!-- NAVBAR -->
<header class="navbar">
<div class="logo">SkyBridge Exports</div>
<nav>
<a href="#hero">Home</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- HERO SECTION -->
<section class="hero" id="hero">
<h1>Bridging Global Trade</h1>
<p>International Import • Export • Logistics Solutions</p>
<button>Request Quote</button>
</section>
<!-- SERVICES SECTION -->
<section class="services" id="services">
<div class="card">
<h3>Import & Export</h3>
<p>Seamless cross-border trade solutions worldwide.</p>
</div>
<div class="card">
<h3>Logistics</h3>
<p>Efficient shipping & supply chain management.</p>
</div>
<div class="card">
<h3>Consulting</h3>
<p>Strategic global trade advisory services.</p>
</div>
</section>
<!-- CONTACT SECTION -->
<section class="contact" id="contact">
<div class="contact-container">
<div class="contact-info">
<h2>Contact Us</h2>
<p>Email: <a href="mailto:niranjansonar545@gmail.com">niranjansonar545@gmail.com</a></p>
<p>Phone: <a href="tel:+918767418629">+91 8767418629</a></p>
<p>Location: Dharangaon, Maharashtra, India</p>
</div>
<form class="contact-form">
<input type="text" placeholder="Full Name" required>
<input type="email" placeholder="Email Address" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</section>
<!-- FOOTER -->
<footer>
© 2026 SkyBridge Exports. All Rights Reserved.
</footer>
<!-- JS FOR FORM -->
<script>
const form = document.querySelector(".contact-form");
form.addEventListener("submit", function(e) {
e.preventDefault();
alert("Thank you! Our team will contact you soon.");
form.reset();
});
</script>
</body>
</html>Your CSS
/* GLOBAL */
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: #0f172a;
color: white;
}
/* NAVBAR */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 8%;
background: rgba(15, 23, 42, 0.95);
position: sticky;
top: 0;
z-index: 100;
}
.navbar nav {
display: flex;
gap: 25px;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: 500;
transition: 0.3s;
}
.navbar a:hover {
color: #facc15;
}
.logo {
font-weight: bold;
font-size: 20px;
color: #facc15;
}
/* HERO */
.hero {
text-align: center;
padding: 120px 20px;
background: linear-gradient(to right, #0f172a, #1e293b);
animation: fadeIn 1.2s ease-in-out;
}
.hero h1 {
font-size: 42px;
margin-bottom: 15px;
}
.hero p {
color: #cbd5e1;
margin-bottom: 30px;
}
button {
background: #facc15;
color: black;
padding: 12px 30px;
border: none;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: #eab308;
transform: scale(1.05);
}
/* SERVICES */
.services {
display: flex;
justify-content: center;
gap: 30px;
padding: 80px 8%;
flex-wrap: wrap;
}
.card {
background: #1e293b;
padding: 30px;
border-radius: 10px;
width: 260px;
text-align: center;
transition: 0.3s;
}
.card:hover {
transform: translateY(-8px);
}
.card h3 {
color: #facc15;
}
/* CONTACT */
.contact {
padding: 100px 8%;
background: #111827;
}
.contact-container {
display: flex;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.contact-info {
flex: 1;
min-width: 250px;
}
.contact-info h2 {
color: #facc15;
margin-bottom: 20px;
}
.contact-info p a {
color: #cbd5e1;
text-decoration: none;
transition: 0.3s;
}
.contact-info p a:hover {
color: #facc15;
}
.contact-form {
flex: 1;
min-width: 250px;
display: flex;
flex-direction: column;
gap: 15px;
}
.contact-form input,
.contact-form textarea {
padding: 12px;
border-radius: 6px;
border: none;
outline: none;
font-size: 14px;
}
.contact-form textarea {
height: 120px;
resize: none;
}
.contact-form button {
margin-top: 10px;
}
/* FOOTER */
footer {
text-align: center;
padding: 20px;
background: #0f172a;
color: #94a3b8;
}
/* ANIMATION */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* RESPONSIVE */
@media (max-width: 768px) {
.hero h1 {
font-size: 30px;
}
.navbar {
flex-direction: column;
gap: 10px;
}
.navbar nav {
flex-wrap: wrap;
justify-content: center;
}
}