Scribd
Upload
6 views1 page

Project Structure

The document outlines the structure of a simple website project, including an HTML file, CSS styles, and a JavaScript file. The HTML contains sections for home, about, services, and contact, along with a navigation menu and footer. The CSS provides global styles and responsive design, while the JavaScript enables smooth scrolling for anchor links.

Uploaded by

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

Project Structure

The document outlines the structure of a simple website project, including an HTML file, CSS styles, and a JavaScript file. The HTML contains sections for home, about, services, and contact, along with a navigation menu and footer. The CSS provides global styles and responsive design, while the JavaScript enables smooth scrolling for anchor links.

Uploaded by

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

Project Structure: project/ [Link] styles/ [Link] script.

js images/
[Link] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unique Classic Site</title> <link rel="stylesheet"
href="styles/[Link]"> </head> <body> <header> <nav> <ul> <li><a
href="#home">Home</a></li> <li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li> <li><a
href="#contact">Contact</a></li> </ul> </nav> </header> <main>
<section id="home" class="hero"> <h1>Welcome</h1> <p>A simple, classic
vibe.</p> <button>Learn More</button> </section> <section id="about">
<h2>About Us</h2> <p>Some info about us.</p> </section> <section
id="services"> <h2>Services</h2> <div class="grid"> <div
class="card">Service 1</div> <div class="card">Service 2</div> <div
class="card">Service 3</div> </div> </section> <section id="contact">
<h2>Get In Touch</h2> <form> <input type="text" placeholder="Name">
<input type="email" placeholder="Email"> <textarea
placeholder="Message"></textarea> <button>Send</button> </form>
</section> </main> <footer> <p>&copy; 2025 Unique Site</p> </footer>
<script src="[Link]"></script> </body> </html> styles/[Link] /* Global
Styles */

 {

box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-


system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; }
header { background: #333; color: #fff; padding: 1rem; text-align: center; }
header nav ul { list-style: none; display: flex; justify-content: space-around; }
header a { color: #fff; text-decoration: none; } .hero { background: linear-
gradient(to bottom, #f7f7f7, #ddd); padding: 5rem 1rem; text-align:
center; } .grid { display: grid; grid-template-columns: repeat(auto-fit,
minmax(250px, 1fr)); gap: 1rem; padding: 2rem; } .card { background: #f0f0f0;
padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
section { padding: 4rem 1rem; } footer { background: #333; color: #fff; text-
align: center; padding: 1rem; } /* Responsive */ @media (max-width: 768px)
{ .grid { grid-template-columns: 1fr; } } [Link] // Simple JS for smooth scrolling
[Link]('a[href^="#"]').forEach(anchor =>
{ [Link]('click', function (e) { [Link]();
[Link]([Link]('href')).scrollIntoView({ behavior:
'smooth' }); }); });

You might also like