Put text and image side by side
Hey, I want the text to be side by side with the image aligned with the nav bar logo. But it seems like the image is taking up all the space, I didn't add a smaller width, because I want the image to be that size but with the text next to it. What should I do guys?
// Home.jsx
import React from 'react';
import { FaWhatsapp } from 'react-icons/fa';
import pessoa from '../assets/banner-pessoa.png';
import { HomeContainer, HomeContent } from '../styles/Home.style';
const Home = () => {
return (
<HomeContainer>
<HomeContent>
<div>
<h3>
Unindo tecnologia e ciência a serviço da <strong>sua beleza</strong>
</h3>
<p>
Protocolos exclusivos com equipamentos avançados de alta tecnologia e profissionais capacitados, entregando resultados excelentes em tratamentos corporais e faciais.
</p>
<div>
<button>
<FaWhatsapp />
Agendar Consulta
</button>
</div>
</div>
<img src={pessoa} alt="uma mulher" />
</HomeContent>
</HomeContainer>
);
};
export default Home;// Home.jsx
import React from 'react';
import { FaWhatsapp } from 'react-icons/fa';
import pessoa from '../assets/banner-pessoa.png';
import { HomeContainer, HomeContent } from '../styles/Home.style';
const Home = () => {
return (
<HomeContainer>
<HomeContent>
<div>
<h3>
Unindo tecnologia e ciência a serviço da <strong>sua beleza</strong>
</h3>
<p>
Protocolos exclusivos com equipamentos avançados de alta tecnologia e profissionais capacitados, entregando resultados excelentes em tratamentos corporais e faciais.
</p>
<div>
<button>
<FaWhatsapp />
Agendar Consulta
</button>
</div>
</div>
<img src={pessoa} alt="uma mulher" />
</HomeContent>
</HomeContainer>
);
};
export default Home;import styled from "styled-components";
export const HomeContainer = styled.div`
width: 100%;
height: 640px;
background-color: var(--beige-100);
display: flex;
align-items: center;
justify-content: center;
`;
export const HomeContent = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
`;import styled from "styled-components";
export const HomeContainer = styled.div`
width: 100%;
height: 640px;
background-color: var(--beige-100);
display: flex;
align-items: center;
justify-content: center;
`;
export const HomeContent = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
`;
