源码链接：
「海绵宝宝主题网站」
链接：https://pan.quark.cn/s/8a43564b708d
之前代做的大作业（doge），全部放出来，放着也是吃灰~
纯搬砖，技术力很差，天天耕地，在代码的田野里，干就完了！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bikini Bottom Welcome!</title>
<link rel="stylesheet" href="css/style.css">
<style>
/* Page specific styles */
.hero {
position: relative;
height: 80vh; /* Make hero section tall */
overflow: hidden; /* Hide overflow for parallax/animations */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: var(--color-text-light);
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('img/bg.jfif'); /* Placeholder */
background-size: cover;
background-position: center;
/* Add parallax effect here later with JS or CSS */
z-index: -1; /* Send to back */
}
.hero-content h1 {
font-size: 4em; /* Large title */
margin-bottom: 0.2em;
color: var(--color-spongebob-yellow); /* Themed color */
text-shadow: 3px 3px 7px rgba(0,0,0,0.6);
}
.page-links .grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
}
.page-link-card {
text-align: center;
}
.page-link-card img {
max-height: 150px; /* Control card image size */
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}
.featured {
background-color: rgba(var(--color-sand), 0.9); /* Themed background */
padding: 20px;
border-radius: 10px;
margin-top: 40px; /* Space from section above */
}
</style>
</head>
<body>
<header class="site-header">
<div class="container">
<div class="site-title">
<h1>Bikini Bottom Fan Site</h1>
</div>
<nav class="site-nav">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="characters.html">Characters</a></li>
<li><a href="locations.html">Locations</a></li>
<li><a href="menu.html">Krusty Krab Menu</a></li>
<li><a href="gallery.html">Gallery & Fun</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="hero-background"></div>
<div class="hero-content container">
<p>Dive deep into the vibrant world of SpongeBob SquarePants and his friends.</p>
<a href="#intro" class="button">Learn More</a>
</div>
</section>
<section id="intro" class="intro container">
<h2>About the Site</h2>
<p>
This fan website is a loving tribute to everyone's favorite porous pal and the zany inhabitants of Bikini Bottom.
Explore character profiles, iconic locations, the delicious menu of the Krusty Krab, and a gallery of memorable moments.
Prepare for fun!
</p>
</section>
<section class="page-links container">
<h2>Explore Bikini Bottom</h2>
<div class="grid">
<article class="card page-link-card">
<a href="characters.html">
<img src="img/海绵宝宝.png" alt="Characters"> <h3>Meet the Residents</h3>
<p>Get to know SpongeBob, Patrick, Squidward, and more!</p>
</a>
</article>
<article class="card page-link-card">
<a href="locations.html">
<img src="img/菠萝屋.png" alt="Locations"> <h3>Explore the Locations</h3>
<p>Visit the Krusty Krab, Pineapple House, Jellyfish Fields, and beyond!</p>
</a>
</article>
<article class="card page-link-card">
<a href="menu.html">
<img src="img/蟹黄包.png" alt="Krusty Krab Menu"> <h3>See the Menu</h3>
<p>Discover the secrets of the Krabby Patty and other delights!</p>
</a>
</article>
<article class="card page-link-card">
<a href="gallery.html">
<img src="img/派大星.png" alt="Gallery and Fun"> <h3>Gallery & Fun</h3>
<p>Relive classic moments and find some fun activities!</p>
</a>
</article>
</div>
</section>
<section class="container">
<aside class="featured">
<h3>Did You Know?</h3>
<p>SpongeBob's full name is SpongeBob SquarePants, and he lives in a pineapple under the sea!</p>
</aside>
</section>
</main>
<footer class="site-footer">
<div class="container">
<p>© 2023 Bikini Bottom Fan Site. All rights reserved. SpongeBob SquarePants and all related titles, logos, and characters are trademarks of Viacom International Inc.</p>
</div>
</footer>
</body>
</html>
扫一扫
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
