initial landing page design #1
Conversation
| height: 100%; | ||
| background-image: url('./hackerWaterfall.png'); | ||
| opacity: 0.2; | ||
| z-index: 0; /* Ensure the background layer is behind content */ |
There was a problem hiding this comment.
Instead of setting z-index to 0 (and then setting everything everywhere else to 1) you can set it here to -1. This is only ok since this is just a background. This helps you avoid setting every other element's z-index to 1 (note: the default value for z-index is 0).
|
|
||
|
|
||
| .center-grid-container { | ||
| display: grid; |
There was a problem hiding this comment.
I'm a fan of using flex to just center elements over grid... but this works
| <div class="grid-fill-item"></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> |
There was a problem hiding this comment.
This is unavoidable I guess, since you want the grid layout...
Not sure if adding a dummy class called like 'bg-transparent' or something to each blank div adds readability or adds dead code (probably the latter)
| <p class="username">login><span>_</span></p> | ||
| </div> | ||
| <div"> | ||
| <p class="headingStuff">CMS PORTAL</p> |
There was a problem hiding this comment.
should be a h1 -- using the right semantic HTML tags help code readability and SEO
| height: auto; /* Maintain aspect ratio */ | ||
| fill: white; /* Set fill color to white */ | ||
| z-index: 2; | ||
| position: absolute; |
There was a problem hiding this comment.
Try to avoid over-relying on position: absolute for positioning... you can think of position: absolute is an "escape" from the standard object-flow which is generally expected and to be only used where an element must be positioned in a absolute position relative to something else.
Position absolute also breaks down quickly when you try to code for responsiveness; once you resize the browser window, weird stuff may start happening (but obviously that's not a present concern).
| text-align: right; | ||
| vertical-align: text-top; | ||
| font-size: 26px; | ||
| position: relative; |
There was a problem hiding this comment.
Try not to force position with position:relative. Mess around with padding, gap and margin instead.
The main use case of position:relative is just on parents of position:absolute elements... honestly don't see it used much else.
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
| } | ||
|
|
||
|
|
||
| span{ |
There was a problem hiding this comment.
In a larger project you would use a classname instead of affecting spans everywhere with this
No description provided.