Indie Website Skeleton

Main Content Area

This is where your main content will go.

/* Basic CSS Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Body Styles */ body { font-family: Arial, sans-serif; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } /* Header */ .header { background-color: #333; color: white; padding: 20px; text-align: center; } /* Sidebar */ .sidebar { background-color: #f4f4f4; padding: 15px; width: 250px; position: fixed; top: 80px; left: 0; height: 100%; overflow-y: auto; } /* Sidebar Links */ .sidebar ul { list-style-type: none; } .sidebar ul li { margin-bottom: 10px; } .sidebar ul li a { color: #333; text-decoration: none; font-weight: bold; } .sidebar ul li a:hover { text-decoration: underline; } /* Main Content */ .main-content { margin-left: 270px; padding: 20px; flex: 1; } /* Footer */ .footer { background-color: #333; color: white; text-align: center; padding: 10px; position: relative; margin-top: auto; }

Website Header

Main Content Area