Currently, I am in the process of constructing a homepage that requires the display of an image alongside text, paragraphs, buttons, and icons. Here is my goal:
https://i.sstatic.net/ib6Xq.png
However, this is what I have managed to accomplish so far:
https://i.sstatic.net/IBH12.png
A few days back, I had successfully implemented this design. However, due to the complexity of the layout and CSS involved, it led to a complete mess on my page. To avoid any further complications, I decided to start from scratch by adding text first, then replacing it with content, ensuring everything fits together seamlessly.
You can see that the placement of text, titles, icons, and buttons is all disjointed from the image. It seems like using a div with the image as a background might be necessary.
In the past, I've experienced situations where the positioning of elements such as text and buttons on top of images would shift unpredictably, potentially influenced by other elements.
Below is the code snippet:
import React from 'react';
import VillageBanner from '../assets/images/village-banner-icon.png';
import DiscoverImage from '../assets/images/discover-home.jpg';
import WhiteButton from '../components/materialdesign/WhiteButton';
import BlueButton from '../components/materialdesign/BlueButton';
import HomeCarousel from '../components/HomeCarousel';
import Slider from '../components/materialdesign/VillageSlider';
import TextContents from '../assets/translations/TextContents';
import './Home.css';
class Home extends React.Component {
render() {
const TheWorldIsYours =
<div className="home-full-section">
<div>
<img
src= { DiscoverImage }
className= "home-discover-background"
alt="Village"
/>
</div>
<div>
<div className="home-discover-text-container">
<h1>{TextContents.ThinkOfUs}</h1>
<p>{TextContents.TheWorldIsYours}</p>
<div className="button-discover">
<WhiteButton textSize="14" link_href="/discover" text={TextContents.DiscoverBtn} />
</div>
</div>
<div>
<img
src= { VillageBanner }
className = "home-discover-banner"
alt="Village"
/>
</div>
</div>
</div>;
const CuratedLearning =
<div className="home-section">
<h1>{TextContents.CuratedTitle}</h1>
<p>{TextContents.CuratedDesc}</p>
<BlueButton textSize="14" link_href="/hereisthemission" text={TextContents.HereIsBtn} />
</div>;
const WhatsTrending =
<div className="home-section">
<h1>{TextContents.TrendTitle}</h1>
</div>
const WhatsNearby =
<div className="home-section">
<h1>{TextContents.NearbyTitle}</h1>
</div>
return (
<div className="home-container">
<div>
{TheWorldIsYours}
</div>
<div>
{CuratedLearning}
</div>
<div>
{WhatsTrending}
<div>
<HomeCarousel />
</div>
</div>
<div className="add-space">
{WhatsNearby}
<div>
<Slider />
</div>
</div>
</div>
);
}
}
export default Home;
As for the accompanying CSS:
.home-discover-container{
width: 100%;
height: auto;
border-radius: 21.5px;
}
.home-discover-background {
width: 100%;
height: auto;
border-radius: 21.5px;
}
/* More CSS styles here... */
.button-curated {
position: absolute;
text-align: left;
top: 32%;
}
Therefore, my objective is to present the image, title, text, icon, and button as a cohesive unit ensuring the overall design remains intact. For responsiveness, minor design adjustments may need to be made, such as font changes, to maintain visual appeal across different devices.
Thank you for your assistance.