Tribute page project Rem07

Code Feedback
1

Hi I have reproduce the tribute page in my way :

https://codepen.io/Rem07/pen/GBBWvg

Can you tell me, if it’s ok ?

Thanks :slight_smile:

2

Did you build your project from the ground up without copying anything?

I’m asking the question because it seems like it is identical to FCC project.

Here are some of my suggestions:

  1. That gray on the background is a dark gray, it doesn’t look good when mixed with white, try lightening it a little bit.

  2. Try to add a margin between the last sentence of your image caption and the bottom border of the container of the image (the container with the white background).

  3. Try to put the quote inside a <blockquote></blockquote> element and then style it with CSS to make it look better. You can add a thick colorful border on the left side of the blockquote as many people do. You can also add stylish quotation marks images using ::before and ::after selectors.

3

Hi, thanks for your reply :slight_smile: no no I have not copying the original code.

I have done it in my way. I have take some code from the course, it’s maybe there where it’s identical.

Ok I have taken all of your suggestion, you can look if you want.

For the second point, the margin not worked, I just changed the padding.

I have also put inside the blockquote.

Tell me if you like it :slight_smile:

4

I didn’t receive your reply in a notification,
hopefully, I returned to this thread manually via my profile.

The notifications that I receive are when people click on the reply button under my comment.

And BTW, the design has got better now.

But here is what I was trying to explain about the blockquote:

  1. It’s not necessary to put a part of a text into a blockquote only because it contains quotation marks. It’s better to reserve the blockquote for distinctive, clear, unique quotes that are separate from texts like the one at the end of your page.

  2. And here is an example of the blockquote that I was talking about (That design is currently a trend):

A. First, here is a screenshot of it:

blockquote

B. Here is how to make it:

blockquote {
  display: inline-block;
  font-style:italic;
  font-size: 18px;
  font-family: "Calibri", Courier;
  border-left: 3px solid red;
  padding: 15px;
  width: 50%;
}

With this CSS, margins, font, font-size, borders have been set and as you may have noticed, I used the border-left, (not border) in order to create that red line on the left side of the text.

To add that opening quotation mark, wrapping the text of your quote with a <span></span> is needed. So in HTML wrap the text of your quote in a span like the following:

<blockquote style="text-align:center;"><span>Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress. — Indian Prime Minister Manmohan Singh</span></blockquote>

And then add the following CSS to your CSS:

blockquote span::before {
  content: "\201C";
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: red;
  
  /*Positioning*/
  display: block;
  float: left;
  position: relative;
  top: -13px;
}

blockquote::after{
  content: "";
}

Now the good thing is that, if, for some reason, you want another quote to appear without that red opening quotation mark, you just have to not wrap the text of your quotation mark with a span element.

I hope this was helpful.

Good Luck.

5

pretty good for your first page.

might want to add min-width so your column doesn’t get too thin on different screen sizes.

you might even want to check out @media (media queries) next