d3fine
February 6, 2025 at 11:56:56 PM
Favorite Operating system:
Windows 10
A cool song you want to share:
Crime Pays: Freddie Gibbs
Your website:
d3fine.neocities.com
Love the website!
New to HTML, how did you do the bars for the headers, and a rounded square with everything in it, with a background???
Just love the website and wish I could make this.
Replied on: February 7, 2025 at 1:34:53 AM
If by the "bars" you mean the headings, then that's how you do it in css:
background: linear-gradient(
to bottom,
#777777 0%,
#616161 10%,
#232323 50%,
#000000 51%,
#000000 60%,
#1a1a1a 100%
);
As for the layout itself, I used flexbox (google it) to align the components in a column in this order:
1. Header
2. Sidebar and Main Content (wrap these together in a div with display: flex)
The Sidebar has a fixed width, while Main content has 100% width.
All of this is wrapped in a container div that has a max-height and max-width (you decide what size you want) and position: absolute (unless on mobile, where i set it back to position: static using media queries so it takes the full screen). Here's how it's set up for this website:
#websiteContainer {
max-height: 928px;
max-width: 700px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;
}
This removes position: absolute for mobile:
@media (max-width: 641px) {
position: static;
}
I have multiple widths set up for different window sizes using media queries.
You can also skip the position: absolute and max height if you want your page to be higher and not centered.
If you have more questions let me know.
Thanks for creating this little nugget of design history on the internet 
