Show DevBest Sleek Website Edit

[Enlighten]

Well, recently a user on DevBest named Stallone, released a Sleek design. I decided since I am trying to learn how to code HTML and CSS, I need to learn how to edit it at least. So the layout credit goes to him.
Here's what I did.

Any suggestions to this, just give me some feedback and I'd try my best to add it or ask for help to add it.
Thanks!

 

[Snappy]

Well, recently a user on DevBest named Stallone, released a Sleek design. I decided since I am trying to learn how to code HTML and CSS, I need to learn how to edit it at least. So the layout credit goes to him.
Here's what I did.

Any suggestions to this, just give me some feedback and I'd try my best to add it or ask for help to add it.
Thanks!

Looks pretty similar to my edit.
I like it

 

[Enlighten]

Looks pretty similar to my edit.
I like it

Thanks man! Post yours?

 

[Snappy]

Thanks man! Post yours?

Yeah I will just its on my other PC atm.

 

[Sysode]

Looks pretty similar to my edit.
I like it

All the "edits" look similar because you're all just doing some cosmetic changes, no structure changes and so on.. Which is fine, it can help you learn.

As for this edit, I'd get away from adding/using the opacity in CSS as every child element of that div then carries the opacity, hence why even the text looks see-through for the content. You can achieve normal opacity text and a slightly transparent background by using rgba(); as a background color. An example:

.box {background: rgba(255,255,255,0.7)

The following code will get the background a white color with a transparency of 0.7 - as apposed to you setting this in your css:

.box {opacity:0.7)

The above are just examples to show you what I mean, hope that helps. Other than that, it's not bad - although I'd maybe alter the active "Home" button as the text visibility isn't too great. Keep working on it and keep us updated?

 

[Enlighten]

Keep working on it and keep us updated?

Thank you. Quick question: I'm trying to make these horizontal lines a solid black color. In the CSS sheet, I've added

.container hl{
background-color: black
}

And it's giving me this.

 

[Sysode]

Thank you. Quick question: I'm trying to make these horizontal lines a solid black color. In the CSS sheet, I've added

.container hl{
background-color: black
}

And it's giving me this.

Use border:

So something like: border:1px solid #000

 

[Enlighten]

Use border:

So something like: border:1px solid #000

Thanks! It worked. Plus I was being idiotic and did hl instead of hr.

 

[Snappy]

Thank you. Quick question: I'm trying to make these horizontal lines a solid black color. In the CSS sheet, I've added

.container hl{
background-color: black
}

And it's giving me this.

Just one for the future remember to end with ;

 

[marles]

A great design.. What is it based off?

 

[Enlighten]

A great design.. What is it based off?

Well, I used a guy's named Stallone's layout and I used a wallpaper from wallhaven, I believe it's called and then edited it using CSS and HTML. Also, then I changed opacity. Still working on the site though. Thanks man!