Can someone help me code this for me to look exactly like the image I linked I am having issues with thing being in the right place too :

Create your html boilerplate in the index.html file.

Add a new file called styles.css and link it to the HTML file.

In the body of your HTML, use header, main, and footer tags to clearly define the different parts of the page.

Use an h1 tag for the site title and an h2 for the subtitle inside the page header.

Use nav tags inside the page header to create an accessible navigation. Follow the example in the W3C Web Accessibility Initiative (WAI) Guidelines to format your navigation:

Wrap each link in an anchor tag

Wrap each anchor tag in a list item

Wrap all of the list item tags in an unordered list tag

Place the unordered list inside the the nav tag and give it attributes for aria-label="Main Navigation" and role="navigation"

Mark up both of the blog posts using the article tag. Use this W3C WAI Guideline example, to help you structure your blog post content. Follow the pattern! Make sure there is a p tag that contains some lorem ipsum text (Remember you can create this with Emmet by typing p>lorem and pressing tab)!

Make sure your images have been added in and all have alt attributes so that they are accessible.

Inside the page footer, use the same technique you used earlier to create a semantic and accessible navigation, using a wrapping nav tag, unordered list and the aria attributes.

Add a copyright in the footer. For the symbol, use an html entity.

Make sure to add and commit your changes when you've got the html done!

Style Your Page

Use a border only on the left side of the page's html element. It should have a width of 5px and a color of lightgray.

Set the body element's min-height to be at least 100% of the viewport height. Also, use the font-family property to set the entire page to use sans-serif fonts.

Give the body a max-width of 1000px and center it on the page with the margin auto technique.

The border is too close to our text and we've got an issue with margin-collapse at the top of the page! Add padding to the header, main and footer elements of 1rem on the top and bottom and 2rem on the left and right to fix these issues.

For the h1 on the page we want the color to be tomato.

Set all of the images to have a width of 100%.

For your site navigation, you'll need to remove all of the padding on the ul elements and then set it's list-style-type to none. (It would be a good idea to use a class to style the navigation's ul so that you can still make a bulleted list on your page.) Use Flexbox to style the ul for the navigation elements. On the top navigation use the space-between rule to have the menu items spread across their container evenly. Set the color for the anchors inside the main navigation to be lightgray and the footer navigation to be tomato.

Style the title of each of your blog posts so that they are larger.

Style the 'continues...' anchor tags so that they are aligned to the right and are bold and tomato colored.

Set the margin on the bottom the article tags to be 4rem. Also, add a 1px solid border in lightgray to the bottom of each one and give each padding on the bottom of 2rem.

For the p tag inside your article, use the pseudo-element ::first-letter to style the drop cap and set it's color to lightgray.

Style the copyright so it is lightgray.

Bonus

Incorporate Google Fonts.

1//12/20 On the Street in Brooklyn ay ipan dolar sit amet oansectetur adipisicng elit. Reppollat ouicem decerunt nemo cignssmos fuga veniam imbentone eligendi magnam aperian aci mallitia If anchizecto mpeciz consequatur wm cunerat solutatitus pene.tur guas ouod quischan qua its molestias. Continues ... II/| 1/20 Vintage in Vogue elfes surt, do or st amct coneccctur adpisicing clit. Rcpcllat quidem deserurt nemo dignissimes fuge. weniam invottore eligendi magnam aperiam odit molite. cupidizte cvenict welis otticiis magi' alicuid, laton_m do or! Quasi! 'Weniam amet rerum ducimus est ea at noque a ias. Iemporibus perspicit s at imoedit woluptas aut voluptates facere totam aliquid debitis rerum, ex concequuntur, nulla cus quae corrusti opto atque ut Repelencus molerjae do orlus recusandae, itacue wol_ptatibus placeat repellat deserunt ame: eacue dignissimos, ste sapiente magnam coloremque. Fugt cum, cupiditate aliquam, mollitia quiscuam sad nulla eveniet dolcribus neque optio odic quil ld andritecto impecit concequat_r r Continues... Heme Wome-'s Men's Onthe Strect I heCatwalk AdWatch Atout lps @20 @ Valet Ind.stres, Inc