2Pac tribute page - feedback

2Pac tribute page - feedback
0.0 0

#1

Hi all,

I’ve finished building my first ever HTML/CSS page if you feel like, please give me a feedback on the coding of the page.

You can find it below:

My particular questions:
You can see that below the picture I’ve put a paragraph with a different background colour to the body element, but I had to adjust the margin manually to match the width of the picture. Is there any way to adjust that relative to the size of the picture?
At the bottom, you can see I’ve used blockquote, but at the very left of the page you can see a white line aligning with the quote, how do I get rid of that?

Thanks for your time reviewing my page!


#2

My suggestion is by putting the style in CSS.
About your question:

  1. I have used the card block to get the looks as you mentioned.
    Change this following line;
    HTML section:
    from
<h1 class="text-center">
  <strong>Tupac Amaru Shakur aka "2Pac"</strong>
</h1>
<h3 class="text-center">Rap Artist / Actor</h3>
<a href="https://upload.wikimedia.org/wikipedia/en/b/b5/Tupac_Amaru_Shakur2.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/en/b/b5/Tupac_Amaru_Shakur2.jpg" class="img-responsive">
</a>
<p class="text-center" id=par1>
  <strong>A picture of Tupac in black and white</strong>
</p>
<div style="font-size:20px">

to

<div class="text-center">
    <h1>
      <strong>Tupac Amaru Shakur aka "2Pac"</strong>
      </h1>
    <h3>Rap Artist / Actor</h3>
    </div>
    <div class="card img-fluid" style="width:352px; margin: auto;">
      <a href="https://upload.wikimedia.org/wikipedia/en/b/b5/Tupac_Amaru_Shakur2.jpg">
      <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/en/b/b5/Tupac_Amaru_Shakur2.jpg" alt="2Pac image"></a>
  <div class="card-body">
    <p class="card-text text-center" style="margin-bottom:0;"><strong>A picture of Tupac in black and white<strong></p>
  </div>
    </div>
    <div style="font-size:20px; margin-top:20px;">
  1. To remove the left border of blockquote section just add;
    CSS section:
blockquote{
  border: none;
}

#3

Brilliant! Thank you!