Scribd
Upload
12 views4 pages

Static Website Example with HTML/CSS

The document contains the code for a simple static website built using HTML, CSS, and JavaScript. It features a header with navigation links, a main section with a greeting and a button that displays a message when clicked, and a footer. The CSS styles the layout and appearance of the website elements.

Uploaded by

shreyash12440
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views4 pages

Static Website Example with HTML/CSS

The document contains the code for a simple static website built using HTML, CSS, and JavaScript. It features a header with navigation links, a main section with a greeting and a button that displays a message when clicked, and a footer. The CSS styles the layout and appearance of the website elements.

Uploaded by

shreyash12440
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

• Code

• HTML: [Link]
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>My Static Website</title>

<link rel="stylesheet" href="[Link]" />

</head>

<body>

<header>

<h1>Welcome to My Static Website</h1>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<main>

<section>

<h2>Hello, Dear Student!</h2>

<p>This is a sample static website built using HTML, CSS, and

JavaScript.</p>

<button onclick="showMessage()">Click Me</button>

<p id="message"></p>

</section>

</main>
<footer>

<p>© 2025 FullStackJavaSyllusSetter</p>

</footer>

<script src="[Link]"></script>

</body>

</html>

• [Link]
body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f9f9f9;

color: #333;

header {

background-color: #007acc;

color: white;

padding: 20px;

text-align: center;

nav ul {

list-style: none;

padding: 0;

display: flex;

justify-content: center;

margin-top: 10px;

nav li {

margin: 0 15px;

}
nav a {

color: white;

text-decoration: none;

font-weight: bold;

main {

padding: 20px;

text-align: center;

button {

padding: 10px 20px;

font-size: 16px;

cursor: pointer;

footer {

background-color: #eee;

text-align: center;

padding: 15px;

margin-top: 40px;

• Java Script: [Link]


function showMessage() {

const message = [Link]("message");

[Link] = "Thank you for clicking! Enjoy browsing �";

You might also like