What do you think about my tribute page?

Hi,

What do you think about my tribute page? Do you think there is something I could improve?

Hi
This code is more readable in the CSS tab:

div {
    background-color:#f9bea4;
    margin-left:30px;
    margin-right:30px;
    margin-bottom:30px;
    margin-top:30px;
   }
  h1 {
    text-align:center;
   }
  h3 {
    text-align:center;
   }
    h4 {
    color:pink4;
     text-align:center;
    }
  h6 {
    text-align:center;
  }
  a {
    color:#7a4848;
  }
  .thin-white-border {
    border-color:white;
    border-width:10px;
    border-style:solid;
  }

HTML codepenlinter:

  • The ‘alt’ attribute is required for img elements.
  • The p element cannot be a child of the h3 element.
  • The p element cannot be a child of the ul element.
  • The a element cannot be a child of the ul element.

At line 52

 <h3> History of roses </p></h3>

At line 73-75

<ul>
  <li></li>
  <li></li>

At line 73-85

<ul> <!-- never closed -->
  <li></li>
  <li></li>

<p>If you want to know more about the use of rose oils in skincare, check the article from<a href="http://www.huffingtonpost.com/emilie-davidson-hoyt/rose-oil-benefits_b_2633703.html"> Huffington Post.</a></p>
<p> For overall information about roses, check <a href="https://en.wikipedia.org/wiki/Rose"> Wikipedia.<a/></p>
</br></br>

<h4>"It is the time you have wasted for your rose that makes your rose so important."</h4>
<h6><em>-Antoine de Saint-Exupéry, The Little Prince</em> </h6>
</br>
</br>
</div>

Cheers and happy coding :slight_smile:

1 Like

Thanks for correction ideas. It is probably better now? By the way, does that little box (result) show what it would look like as a mobile page, on a mobile screen?

Not really (but close), you can test your pen with:

https://blog.codepen.io/2014/12/15/test-pens-browser-live-free-crossbrowsertesting-com/

Cheers and happy coding :slight_smile:

1 Like

Ok. This example page has some text under the photo, in the white area. "Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger."

How can I make the bottom area below the picture (I have also white border around the picture) longer, like in the example, and have text inside it? Adding the text is probably easy, but how to make it longer? Is it just
and then text?

edit:the line break sign is not shown in this post.

Hi,
Your code for the quote is this:

<h4>"It is the time you have wasted for your rose that makes your rose so important."</h4>
<h6><em>-Antoine de Saint-Exupéry, The Little Prince</em> </h6>

Is better use:

The example is using the class caption (Bootstrap):

Cheers and happy coding :slight_smile:

1 Like

So this blockquote shows from which site the citation is from? It doesn’t seem to work.

[quote="CoderInFreeCodeCamp, post:7, topic:34458, full:true"] So this blockquote shows from which site the citation is from? It doesn't seem to work. [/quote]

MDN documentation:

The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

The cite attribute:
https://html.spec.whatwg.org/multipage/semantics.html#attr-blockquote-cite

User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site’s use of quotations), not for readers.

Cheers and happy coding :slight_smile:

1 Like