Mr.Sushi
KPCKevin Powell - Community
•Created by Mr.Sushi on 8/9/2023 in #front-end
Image in flexbox.
In the Hero section I would like to align the Image with the bottom of the container (border-bottom is the indication). And possibly make it responsive. I have tried align-items: flex-end but there is a little gap in-between the border and the bottom of the Image.
Please help me to figure out what can be the solution 🙂
https://codepen.io/MrSushi22/pen/Rwqmgea
```js
import Image from "next/image";
const Hero = () => {
return (
<div className="flex-hero">
<div className="left-column-hero">
<div className="hero-text">
<h1>Hej my name is Name</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque laudantium tenetur molestiae necessitatibus, molestias veniam tempora. Reprehenderit sit culpa, perspiciatis officia commodi cupiditate ipsam sunt magnam, distinctio, atque alias velit.
</p>
</div>
</div>
<div className="right-column-hero">
<Image src="/hero.jpg" className="profile-img" width={400} height={400} alt="Profile Picture" />
</div>
</div>
)
}
export default Hero;
4 replies
KPCKevin Powell - Community
•Created by Mr.Sushi on 8/3/2023 in #front-end
Creating two row with grid!
15 replies