This is a really hard question to formulate, so I've included a screenshot of a website design that I made in Pages (Mac) - I did so by using different colored blocks and stacking them on top of one another to create the desired effect that can be seen in the first screenshot.
My question is: How do I emulate this, different colored backgrounds in HTML?
I've tried coloring my padding differently with an HTML tag in CSS ( HTML
{ padding: 10%; background-color: #ebecef; }
) but I failed to fully encapsulate my dream. I've attempted to make divs (since they're 'block tags') and color them differently, but it didn't work.
High Contrast Screenshot example
High Contrast Page Description: Blue would be the base background color, Orange would be the inset/overlay, and pink would be the div navbar but its painted the same color as the inset/overlay as seen in the first picture.
To try and clarify: How would one either, go about creating blocks of a different color and transforming them into a certain position, or, creating a sort of two-tone effect for the background color that's 'inseted' into itself or overlayed (whichever's easiest or works) like seen in the picture (The grey being the base color and the white-ish color being the additional color that's been inseted/overlayed.)?
I really hope I explained that well enough, if you could help it would be greatly appreciated,
DeSept
Especially with a responive design in mind, I would do it with a grid. You just need 3 boxes and can get the title to collide with an offset or correct the padding. Just make sure to set the z-index to push it on front.
body {
background-color: lightgrey;
display: grid;
grid-template-columns: 30px 40% auto 30px;
grid-template-rows: 48px auto;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 16px;
}
#title {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
background-color: transparent;
text-align: center;
padding-top: 38px;
z-index: 1;
font-size: 20px;
}
#menu {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background-color: orange;
text-align: center;
padding-top: 16px;
}
#content {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: -1;
background-color: yellow;
min-height: 100vh;
padding: 10px 10px 10px 10px;
}
<body>
<div id="title">Title</div>
<div id="menu">Menu Link</div>
<div id="content">
<p>Random text content...</p>
</div>
</body>