My first project - tribute page for Ada Lovelace

I am the kind of person that keeps on sucking in knowledge without ever going and doing some real-world projects. Well, those days finally came to an end, and I coded the tribute page. Feel free to comment and give some advice how to improve it.

Ah yes, I also have a question. I tried to separate the boxes by margins, but for some reason the dark-greyish color of the body doesn´t shine true. So I created little divs like so:

<div class="separater"></div> 

and gave those divs the dark-greyish color of the body.

So far so good, but it stopped working, when I gave the body a linear-gradient. Any ideas how to fix this?

Anyway, here is the link: https://codepen.io/MarcellaW/pen/ZEWrBRj

Thanks a lot, Marcella

P.S. I already checked it with the W3 validator. Found some minor mistakes.

1 Like

Hi Marcella,

Nice work, keep it up.

The boxes are indeed separated by the margin you applied.

The problem is not there. You applied this background: #ddd; to the main element which houses your boxes, so the dark-greyish color will not show no matter how much margin you give to the boxes.

A quick solution is to give that light-gray background to the boxes instead of the main. Once you do that get rid of the empty divs.

Let me know how it goes

1 Like

Thank you very much, aturaab40 :blush: :heart:

But, the
#main { background : #ddd; }
refers to the light grey of the boxes.

I also gave the
body {background #333; }
which refers to the dark grey background.

Still not working with margin. Very mysterious, indeed :face_with_monocle:

@Marcella no worries, it is not mysterious.

Follow these steps, strive for understanding.

  1. Comment this lines of css
/* .separater {
  height: 20px;
  background: #333;
} */

I know this is not what you want, but follow along.

  1. Now comment this one also
#main {
/*   background: #ddd; */
  margin: 50px;
  line-height: 1.2;
  text-align: justify; 
}

Do you understand so far what we are doing?

  1. We comment the .separator to remove the margins applied for the desired gaps you want.

  2. We remove the light-gray from the #main - this is the reason why you will not see the dark gray behind , because it is overshadowed by this.

  3. Now apply the light gray like this below

/* add new group styles */
header,
#tribute-info,
#links {
  background: #ddd;
}

How is it? cool. But the header has a 100px margin bottom that gives huge gap between the head and the tribute info. Set that to 20px

header {
  padding: 20px;
  margin: 20px; 
  background: transparent; 
}

If you need more clarification let me know. If it works, don’t forget to remove the empty divs in the markup.

Stay blessed.

1 Like

Ah now I got, where I went wrong :sweat_smile: Thanks a lot!!!

Your page looks good @Marcella. Some thing to revisit;

  • Don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.
1 Like

Ah really? I didn’t know. Thank you!