Breaking News: Grepper is joining You.com. Read the official announcement!

set this part as 50% of page and make it a slider with background image and text with 2seconds interval auto slide

Lovely Lizard answered on June 22, 2023 Popularity 1/10 Helpfulness 1/10

answer set this part as 50% of page and make it a slider with background image and text with 2seconds interval auto slide

set this part as 50% of page and make it a slider with background image and text with 2seconds interval auto slide

Comment

import React from 'react';
import {
  Box,
  Container,
  Flex,
  Text,
  Button,
  IconButton,
  Input,
  Checkbox,
} from '@chakra-ui/react';
import { FaFacebookF, FaTwitter, FaLinkedinIn, FaGoogle } from 'react-icons/fa';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import "../App.css"

function Login() {
  return (
    <Box bg="primary">
      <Container
        p={3}
        my={5}
        height="calc(100% - 73px)"
        className="h-custom"
        maxW="container.xl"
      >
        <Flex direction={['column', 'row']}>
          <Box flex={['none', '10']} md="6">
            <Carousel
              showStatus={false}
              showThumbs={false}
              infiniteLoop
              autoPlay
              interval={2000}
            >
              <div>
                <img src="https://example.com/image1.jpg" alt="Slider Image 1" />
                <p className="legend">Slide 1</p>
              </div>
              <div>
                <img src="https://example.com/image2.jpg" alt="Slider Image 2" />
                <p className="legend">Slide 2</p>
              </div>
              <div>
                <img src="https://example.com/image3.jpg" alt="Slider Image 3" />
                <p className="legend">Slide 3</p>
              </div>
            </Carousel>
          </Box>
          <Box col="4" md="6">
            <Flex direction="column" align="center" justify="center" h="100%">
              <Box col="10" md="6">
                <Image
                  src="https://app.salescaptain.com/static/media/loginLogo.3814067f45867b0a416c.png"
                  alt="SalesCaptain Logo"
                  className="circle-image"
                />
              </Box>
              <Flex align="center" justify="center">
                <Text className="lead fw-normal mb-0 me-3">Sign in with</Text>
                <IconButton
                  icon={<FaFacebookF />}
                  aria-label="Sign in with Facebook"
                  size="md"
                  className="me-2"
                />
                <IconButton
                  icon={<FaTwitter />}
                  aria-label="Sign in with Twitter"
                  size="md"
                  className="me-2"
                />
                <IconButton
                  icon={<FaLinkedinIn />}
                  aria-label="Sign in with LinkedIn"
                  size="md"
                  className="me-2"
                />
              </Flex>
              <Flex align="center" my={4}>
                <Text className="text-center fw-bold mx-3 mb-0">Or</Text>
              </Flex>
              <Input
                variant="outline"
                mb={4}
                placeholder="Email address"
                size="lg"
              />
              <Input
                variant="outline"
                mb={4}
                placeholder="Password"
                type="password"
                size="lg"
              />
              <Flex justify="space-between" mb={4}>
                <Checkbox flexShrink={0} value="" id="flexCheckDefault" />
                <Text>
                  <a href="#!">Forgot password?</a>
                </Text>
              </Flex>
              <Flex direction="column" align="center" mt={4} pt={2}>
                <Button className="mb-0 px-5" size="lg">
                  Login
                </Button>
                <Text className="small fw-bold mt-2 pt-1 mb-2">
                  Don't have an account?{' '}
                  <a href="#!" className="link-danger">
                    Register
                  </a>
                </Text>
              </Flex>
            </Flex>
          </Box>
        </Flex>
        <Flex
          direction={{ base: 'column', md: 'row' }}
          align="center"
          justify="space-between"
          py={4}
          px={{ base: 4, xl: 5 }}
          bg="primary"
          color="white"
        >
          <Text mb={{ base: 3, md: 0 }}>
            &copy; 2020. All rights reserved.
          </Text>
          <Flex>
            <IconButton
              icon={<FaFacebookF />}
              aria-label="Facebook"
              color="white"
              size="md"
              mx={3}
            />
            <IconButton
              icon={<FaTwitter />}
              aria-label="Twitter"
              color="white"
              size="md"
              mx={3}
            />
            <IconButton
              icon={<FaGoogle />}
              aria-label="Google"
              color="white"
              size="md"
              mx={3}
            />
            <IconButton
              icon={<FaLinkedinIn />}
              aria-label="LinkedIn"
              color="white"
              size="md"
              mx={3}
            />
          </Flex>
        </Flex>
      </Container>
    </Box>
  );
}

export default Login;

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: chat.openai.com

Tags: auto background-image set slide slider text this whatever

Link to this answer
Share Copy Link

Contributed on Jun 22 2023

Lovely Lizard

0 Answers Avg Quality 2/10

set this part as 50% of page and make it a slider with background image and text with 2seconds interval auto slide

Contents

More Related Answers

set this part as 50% of page and make it a slider with background image and text with 2seconds interval auto slide

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.