Tribute Page Help Please

1

Hi, I’m creating my tribute page and would like to ask for help.
As advised in the challenge’s instructions, I try to give it my own style, and I’m having some difficulties mostly because there are things I would like to include that were not covered in the first 106 challenges, and even if I find their codes, I can’t understand them and don’t know how to implement them.

Here's what I've done so far:

<div class="container-fluid">
    <div><h1>Name</h1>
  <h1>Kanji Name</h1>
      <h2 class="col-xs-8 col-xs-offset-2">Description</h2></div>

  <div class="text-center first-background">
<img class= “border” src="Image Link (375x470)">
  <h3>Text</h3>
    </div>

    <div class="second-background">
<h4>Biography</h4>
<ul>
      <li><strong>Year</strong> - Text</li>
  <li><strong>Year</strong> - Text</li>
<li><strong>Year</strong> - Text</li>
  <li><strong>Year</strong> - Text</li>
<li><strong>Year</strong> - Text</li>
  <li><strong>Year</strong> - Text</li>
  <li><strong>Year</strong> - Text</li>
  <li><strong>Year</strong> - Text</li></ul>
<img class= "Biography-Image" src= "Image Link (1024x722)"></div>

<div class="third-background">
    <h5>Links:</h5>
<div class="text-center">
<a href="Link"><img class= "bigger link-border" src="Image Link" alt="Name"></a>
<a href="Link"><img class= "bigger link-border" src="Image Link" alt="Name"></a>
<a href="Link"><img class= "bigger link-border" src="Image Link" alt="Name"></a>
<a href="Link"><img class= "bigger link-border" src="Image Link" alt="Name"></a>
<a href="Link"><img class= "bigger link-border" src="Image Link" alt="Name"></a>
<div>
    <h5>Learn more about this person in this <a href="Link">link</a>.</h5> </div>
</div></div>

  <footer class="text-center">
       <hr>
    <p>Written and coded by <a href="" target="_blank">My Name</a>.</p>
  </footer>  
  </div>

Body {background: Gold}

h1{color: black;
  font-family: Times New Roman;
  font-size: 100px;
  text-align: center;}

h2{color: black;
  font-family: Arial;
  text-align: center;
  border-top: solid 2px Black;
  border-right: solid 2px Black;
  border-bottom: solid 2px Black;
  border-left: solid 2px Black;
  padding: 20px;
  margin: 20px}

h3{color: aqua}

.first-background {background-color: black;
 padding-top: 16px;
 padding-bottom: 16px;
 margin-right: -16px; 
 margin-left: -16px;}

.border {
    border-color: green;
    border-width: 10px;
  border-style: solid;
border-radius: 10px;}

h4 {font-size:30px;
font-family: (not decided yet);
text-align: center}

.second-background {background-color: pink;
 padding-top: 1px;
 padding-bottom: 16px;
 margin-right: -16px; 
 margin-left: -16px;}

.Biography-Image {width:450px;}

h5 {font-size:20px;
font-family: (not decided yet);
text-align: center}

.third-background {background-color: silver;
padding-top: 1px; 
padding-bottom: 20px;
margin-left: -16px;
margin-right: -16px}

.link-border {
    border-color: red;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%}

.bigger {width:200px;height:140px}


1) I considered the challenges about a background color box (which go from “Adjust the Padding of an Element” to “Use Clockwise Notation to Specify the Margin of an Element”) and so used several background colors. I had to change the padding and margin in order to completely hide its surrounding which is gold due to the Body {background: Gold} and have each background attached to each other. However, when I reduce the size of the page, the background colors which I have put over the gold background become smaller also, and the gold background is apparent in the right side.
Is there a code to make a background color cover the whole right side, and an actual code to make a background attached to another background below or above?

2) The black background covers the <h2 class="col-xs-8 col-xs-offset-2">Description</h2> above, and only by removing the class="col-xs-8 col-xs-offset-2" which I would like to use to make the rectangle shape less wide or putting a </div> and another <div class= “container-fluid”> below can I make the black background not cover it (Can someone give me an explanation of why the black background covers it and is there another way to fix it?)

3) I would like the picture "Image Link (1024x722)" to stand next to the unordered list on the right side, and the text Biography to be on top of both at the center. What are the codes for all that?
3

Bump.
Anyone please?

4

@Zorianff9 Did @pseudop’s answer help? If not, what was it about that answer that doesn’t seem correct?

5

There was nothing that didn’t seem correct, I was just asking again because I would like to have an answer as quick as possible for I’m worried about the deadline for the February 2018 course. Although there was no answer to my questions, his answer helped a bit for I didn’t know how to put a pen in a question.

6

@Zorianff9 Oh, ok. I see what happened. I’m looking at the code now. :cloud:

Turns out, I can’t help with this right now. I think, from what I understand you’re asking, your main problem is the HTML markup and not having enough Bootstrap containers.

I think, and I’m not totally sure, that if you surround the <ul> and <img> section in a container, you’ll be able to position each container item so that they’re in a row (next to each other) instead of a column.

As for background colors, I think this is also a container issue.

Unfortunately, I haven’t done those exercises yet nor this project, so I can’t speak directly to them. However, I’ll check back with you when I do the project (probably won’t be soon) in case nobody else has helped.

7
  • The black background covers the <h2 class="col-xs-8 col-xs-offset-2">Description</h2> above
  • I would like the picture “Image Link (1024x722)” to stand next to the unordered list on the right side

most of your problems are layout/grid-related, i suggest you read Grid system. feel free to bump @Zorianff9