Tribute page - how to split into 3 horizontal sections?

HTML-CSS
1

Hi, I’m busy with the “Responsive Web Design Projects - Build a Tribute Page”

I’m using https://codepen.io/freeCodeCamp/pen/zNqgVx as my base.

I’m making a tribute page on the work of a Russian composer. I would like to make the background of the page split into 3 horizontal sections - so that it resembles the Russian tri coloured flag once I fill in the colours. How can I go about adding in the 3 separate sections?

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:

2

The CSS code will be

html {
  height: 100%;
  width: 100%;
}

body {
  display: table;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.row {
  display: table-row;
  height: 20mm; /* adjust as needed for size */
}

.row:nth-child(1) {
  background-color: #eee;
}

.row:nth-child(2) {
  background-color: #ddd;
}
.row:nth-child(3) {
  background-color: #aaa;
}

and then the HTML

<div class="row">
  row 1
  <br>
  lorem ipsum
</div>

<div class="row">
  row 2 
  <br>
  lorem ipsum
</div>

<div class="row"> 
  row 3
  <br>
  lorem ipsum
</div> ```

Which should give you 3 horizontal sections and you can color as needed
1 Like
3

Thank you so much, I get it now - the comments were very useful to me.

1 Like
4

Glad to have helped, keep up the work :smile: