Product Landing Page Help & Feedback

Code Feedback
1

Hi guys,

I have completed my page and I am pretty happy as I have finally worked out how to use flexbox and media queries! I am just starting out so would ove some feedback bth in terms of design and code.

I was also wondering if there is a standard way to lay out the css as mine seems a little messy and illogical!

Here is my page: https://codepen.io/clare1950/pen/WNpLYWY

TIA,
Clare

2

Hey, @clare.parkes I hope you having a great time coding.

Suggestions

  • Use sites like flaticon for logo images. And site like dribbble for pics. Because you used images from google they are not showing up and it feels incontinent.

  • When the video is played it is transparent please fix it by applying proper CSS to the video tag you have not applied video tag in CSS file so.

Errors
There is only one error in the HTML code.

1 error
1 error454×588 44.2 KB

please fix this.

Feedback

  1. Background with the patterns looking stunning.

  2. The transparent color is on spot.

  3. Your website looks pretty premium.

I hope it will help you out.
happy coding :slight_smile:

3

Hi,

Thanks for taking the time to look at my project. They are my own images on my own google photos so I think I hadn’t made the images shareable but I hope they will work now. I would appreciate it if someone could tell me if they are as they do work on my devices.

I cannot work out how to make the photo and video have an opacity of 100% with the text-div background of 70%.

Can anyone help me?

https://codepen.io/clare1950/pen/WNpLYWY

4

@clare.parkes yes images are visible. Now everything looks great.
But you have not fixed the error i point outed in html on <figure>tag.

5

Hi thanks!

Yes I saw that error but I cannot see what the problem is as I have the opening and closing tags

<figure>
  <h2>About Me</h2>
  <img id="face-image" src="https://lh3.googleusercontent.com/S2ywSlpgRi-JKs7_sIzb8RTTrRxAX1YhNNaeWC5v5AqcJD1gwee4Pu3-LVSJsyeeIXZVTJC9sJwb3xxC9Fju-B9hSxugo1IuDvBpoAJNHOei4aQnrZ3cl3r9I2JLNgWsvVU3eLNy-w=w2400" alt="Photograph of Clare Parkes">
</figure>

:thinking:

6

Also fixed the opacity problem by using rgba color instead of the opacity property - if anyone is interested!

7

@clare.parkes you have closed </div> before </figure> tag

2 error
2 error951×86 3.14 KB 

</figure> should be inside the </div>
1 Like
8

Great thanks! I didn’t see that even after I looked at it so many times!

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.