I'm looking for a responsive design template where (1920px width) images will be stacked one on the top of another with a loader on the bottom

Hi everyone,
I’m looking for a responsive design template where images will be stacked one on the top of another (with no gap inbetween because they will seem as a continuous design that will never finish as you keep scrolling down). I suppose there will be an auto loader on the bottom of the screen for people to continue scrolling down. It will be more like a photographer’s portfolio site, except there will be no gap between images, and it would be graphic design images stacked on the top of each other. I think I will want all image width to be consistent with one another, so I’ll probably have them at 1920px or something similar. The newest images that I upload will always be on the top, and that will push all the rest further down.

For looking at the site on a phone, I will have a copy of each 1920px image reduced to whatever the standard pixel needs to be for phone(s) (700-750px width?) The template will be similar to how Google images keep loading once you continue scrolling down. But on Google images you click on images, while here there will be no clicking and no linking. Also, no popups, no menu ≡ for other pages either.

Under each image I should be able to type text. I should be able to modify the flush, left, centered, etc… color, font, size, link to an external site, etc. If I don’t want text under the image, then I delete the text and the image on the top should touch the following image without a gap.

And I will definitely need a one line contact form with captcha code and a send button. That line of code I will probably either always be kept on the top of the website before the first 1920 image, or always after the first image so that people wouldn’t have to scroll down to find the contact form. (But again, there will be no popup and no additional page with a contact form.)

So, basically that template will be 95%-99% pixel based, with possibility of adding text between each image.

Can you write html/css? Or do you use CMS?

Are you looking for a theme/template?

If you can write code: this shouldn’t be very difficult IMO. You just need knowledge how to work with grid layout.

https://www.w3schools.com/CSS/css_grid.asp

Greetings,

1 Like

Thanks, but for someone who’s used to write/edit code for 15 years I am totally not good at it, and I still struggle and get confused. (I am on the “right” side of the brain, not on the left. Numbers and structures are really a struggle for me.) Once you add, the “responsive” design so it will have to display properly on this and that device, then it gets way too difficult for me. If I can just design it on Photoshop and export it as a “responsive” design HTML/CSS, it will be great, but there is no really an easy way to that. So, I prefer to get a template from an expert web developer, or find a similar photographer’s template that I will start editing little by little to customize it. I will also post this on the Web Developer forums too.

haven’t read the whole post but you can use free codes to speed things up
this websites can cover the basic stuff free:


jqueryscript.net
they have a free license, so go crazy.

From the sound of things, you ought to go with a Wordpress site. That’d be my recommendation.

For an easier time, try Squarespace or Weebly. All good options.

Sorry for the late response, I just found out about both of your replies.
nikko, I can’t see how Free Frontend and jquerryscript can help with my project. I see too much code and I am not this type of designer. I like to see the design space like white canvas and start designing onto that with pixels.
grady00, I am already with BlueHost, and don’t want to be switching.
I will go ahead and design it in Photoshop, then put the whole thing on one HTML page. Then later will try to figure out how to configure it for a responsive design. Maybe I’ll post on the web forums too.

©2019 Graphic Design Forum | Contact | Legal | Twitter | Facebook