KPC
Kevin Powell - Community•16mo ago
Sste

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;
    
`;
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?