Highlighted

Need help matching layout

Contributor ,
Apr 23, 2019

Copy link to clipboard

Copied

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:
comps_home.jpg

Work page comp:
comps_work.jpg


logo / guys png:
logo-guys.png

guys only:
guys.png

Views

332

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Need help matching layout

Contributor ,
Apr 23, 2019

Copy link to clipboard

Copied

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:
comps_home.jpg

Work page comp:
comps_work.jpg


logo / guys png:
logo-guys.png

guys only:
guys.png

Views

333

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 23, 2019 0
Adobe Community Professional ,
Apr 23, 2019

Copy link to clipboard

Copied

Just a few remarks:


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 23, 2019 1
Adobe Community Professional ,
Apr 24, 2019

Copy link to clipboard

Copied

- 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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 1
Contributor ,
Apr 24, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 0
Adobe Community Professional ,
Apr 25, 2019

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2019 0