Placer 2 éléments de sections côte à côte
Bonjour,
Je vous soumets un problème d'intégration.
Je suis parti de cette maquette Photoshop pour tenter de la convertir en page web via HTML5, CSS3 et Bootstrap.
La maquette est visible sur la page que j'ai indiquée, en face du texte "‘Take’ Free PSD / ‘Take’ a free mobile app landing page PSD template is a free one pager designed to Twitter’s bootstrap grid. Take is a fictitious mobile app designed for taking amazing photos and photo effects."
Elle commence par une photo occupant la largeur de l'écran (la photo du(de la) randonneur(se)). Sur cette photo il y a un titre ("Picture perfect") et un paragraphe. En dessous de cette photo il y a un titre ("Start something new") puis plusieurs paragraphes, sur fond blanc, puis encore d'autres éléments...
Mon problème ici, c'est que y a la photo de smartphone qui est "à cheval" entre 2 sections. J'ai défini en effet la surface couverte par la photo et le smartphone comme étant le header de la page, puis j'ai défini la zone en dessous comme étant une section. Mais forcément, sur ma page web, le bas de ma photo de smartphone, qui appartient au header, est toujours au dessus du titre "Start something new", qui fait partie de la section suivante.
Vous feriez comment, vous, pour convertir la maquette en site web et avoir le titre à la même hauteur que le bas de l'image?
Perso, pour satisfaire à cette exigence, j'ai éventuellement une solution en coupant la photo du smartphone en 2 parties (une partie haute intégrée à la section 1 (le header) et une partie basse intégrée à la section 2). Mais c'est peut-être du bricolage?
Est-ce que vous verriez une solution de votre côté pour éviter de découper l'image mais réussir donc tout de même à mettre à la même hauteur le titre "Start something new" et le bas de l'image de smartphone?
Merci
Répondre avec citation
Partager