Ooh tailwind is giving you some issues here I think... as i resize the screen , the input and button become all stretched out and are misaligned with the section above.

I think you're misusing section element a bit here to be honest... I would call this whole solution a section maybe but not the section within section you have here.

As already suggested, the h1 should all be in one h1 tag. You can use spans within it for styling.

And two important points around the logo: 1) It's not navigation. Even if wrapped in a link, you wouldnt normally place the logo inside a nav element. 2) It's so so so important to give the logo alt text. That's the most important thing on this whole page in fact - what is the name of the product/site. If a user can't know that, the page's purpose fails.

I'd place the email input a button inside a form element too tbh.

I hope these are helpful tips. I'm a bit tired tonight so just bashing them out - i hope I've explained ok for you.

Best of luck with it!

Hi, I'm afraid there are a lot of issues with the way you've gone about this.

One point to note is every one of those star images should have alt="" aria-hidden="true" so that screenreaders don't read out "image, star, image, star, image, star..." etc

As for the rest, take a look at these quick changes I just made in the browser to improve the desktop version. Apply each one by one and watch what happens, hopefully it will help you understand where you can make improvements:

/* main.css | https://social-proof-section-zeta-flax.vercel.app/css/main.css */

.headline {
  /* padding: 7.8rem 3rem 3rem 10.5rem; */
}

.ratings {
  /* padding-top: 8.8rem; */
  /* padding-left: 2rem; */
}

.reviews {
  /* padding-left: 10.3rem; */
  /* padding-top: 1.8rem; */
  align-items: flex-start;
}

.ratings ul li {
  /* width: 65%; */
  width: calc(100% - 6rem);
}

#container {
  /* grid-template-rows: 50% 50%; */
  /* grid-template-columns: 50% 50%; */
  /* width: 100%; */
  /* height: 100vh; */
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  padding: 2rem;
  max-width: 1440px;
  gap: 3rem 1rem;
}

.review-box {
  /* width: 28.3%; */
  /* height: 65%; */
  float: ;
  flex: 1 1 33%;
}

.review-box:nth-of-type(3) {
  margin-right: 0;
}

body {
  display: grid;
  place-content: center;
  height: ;
  min-height: 100vh;
}

Good luck

Hi

I recommend going back over this and spending more time to get it closer to the design.

Some tips to help:

• Don't use pixel values or margins to position things. Use flexbox or css grid instead
• pay attention to details like colors and border-radius
• this challenge is designed to be suited perfectly for css grid, not flexbox for the grid itself
• unless something reads as a paragraph, it shouldn't be one. use a list instead for why us list
• You've got an extra h1 being rendered at the moment (probably a typo in the h1 tag causing this). Similar the div.white has an empty paragraph being rendered straight after it
• don't use inline styles if you can style with a class
• Notice the alignment in the design. Every grid child should have consistent padding
• Use margin, not brs for vertical spacing
• let the content have a max-width not percentage width

Hope this helps

Hi Adetuyi,

This looks pretty good and you've clearly done a lot of work here, but I think you could still get it closer to the design. Really try to pay attention to small details. Like spacing, sizing of elements relative to each other, width of borders, line spacing etc.

The html needs some work still. It's not accessible at the moment because you've used non-interactive elements like divs for click events (always use interactive html elements like buttons or anchor tags).

Document semantics are also missing because most text is in spans instead of meaningful html elements. That will make it very difficult for search engines and assistive tech to traverse your site. The page also needs a h1.

Looking at the javascript, it's OK and all functions fine, but it's using old methods. Try to leverage es6 in this - const or let, arrow functions etc. See if there are ways for you to Shorten and simplify the code.

It sounds like I'm listing lots of things, but they are all pretty easy to fix and fundamental to good practice. Spend extra time giving really good attention to detail and you'll notice the difference in your projects.

Good. Luck ☺

Hi Kristian,

This looks good, well done. There is an issue on mobile landscape where the top of the card is being cut off at the top of the screen for me, and I find the card too close to the sides of the screen on mobile portrait. Adjust those if you can.

Only big issue I see with this solution is these html element choices:

<h1 class="font-bold">80K</h1>
<p class="text-sm">Followers</p>

There are two issues here

1. You should only ever have one h1 per page. This is important for how search engines crawl and index pages, as well as for assistive tech users who rely on document outlines to navigate around.

2. It doesn't make sense for these numbers to be headings. Those numbers only make sense when read along with the accompanying word, so should be in the same element as each other. You could use a paragraph, list item, maybe even a definition list or table, but it can't be the numbers as a heading. One the number and text pairs are wrapped in one semantically meaningful element, you can wrap each part in separate spans and use those to style the number and text how you want.

I hope this makes sense and is helpful to you. Best of luck with your coding