Need help matching layout

[TheOriginal150mph]

Rusty student here, need assistance matching HTML & CSS to my layout for a school project site. I want only simple basic HTML and CSS that a beginner can understand, not Bootstrap, etc. Pls. take a look at what I've got so far here:

http://larrysullivandesign.com/GIT480/index.html

- How to best set up the header graphics?  (logo, guys, soc. media icons + red BG color gradient)  - full size & responsive
- I want the nav below header like the comp, but struggling ATM...

- How to fill the content space with the main image (BG-main-image.jpg). Is there a better way (eg. in the html) than to make it a background image using CSS?

- How to float social media icons top right?

- How to best get 2 guys pic in header - merged or standalone?

Below are Photoshop comps I'm trying to match.

Index:

Work page comp:

logo / guys png:

guys only:

[BenPleysier]

Just a few remarks:

• Have a look at these pointers regarding headers and the role attributes: Showing results for http://larrysullivandesign.com/GIT480/index.html - Nu Html Checker
• Use the F12 key to look for other problems such as
  
• Ask one question at a time to get an answer.

[Ben M]

- How to best set up the header graphics?  (logo, guys, soc. media icons + red BG color gradient)  - full size & responsive

If you want responsive layout, you have options of using a framework like Foundation or Bootstrap, or using the CSS Grid. Then it's a matter of placing your elements within that grid and determining how you want your responsive version to render.  Based on your comps, I don't see a mobile version to comment enough on tips to render your layout.

- I want the nav below header like the comp, but struggling ATM...

Think of a grid like a table. The nav below the header is just another row of content.

- How to fill the content space with the main image (BG-main-image.jpg). Is there a better way (eg. in the html) than to make it a background image using CSS?

I would simplify your header - one transparent PNG image with a CSS gradient background to get the desired effect.

- How to float social media icons top right?

See response to the best setup for header graphics. This is determined by the code base you are choosing.

- How to best get 2 guys pic in header - merged or standalone?

See response to fill content space.

[TheOriginal150mph]

Thanks for taking the time to try to help me with this prototype comp.

Ok Ive been pounding away at it more, so I know my questions weren't very focused because I forgot some of the reasoning behind why I set up the previous site (that I'm usurping) like I did (with help from here).

If you can take a look again - http://larrysullivandesign.com/GIT480/index.html   - specifically the Media query in the CSS.

I want to swap the main car image (BG-main-image.jpg) with a small one for mobile (BG-main-mobile.jpg) below 768px. But when I uncomment the code below, and get rid of the <img src=..>  line, then the bg image gets huge and it breaks.

<main-index>

<!-- <section class="main-image"></section>-->

   <img src="images/BG-main-image.jpg" alt=""/>

</main-index>

Is there a simple fix to this code to swap in this image?

[BenPleysier · Accepted solution]

Have a look at Responsive images - Learn web development | MDN