import React from 'react'
import { Container,Row,Col} from 'reactstrap';
import {Posterdetails} from '../data/Posterdetails.js';
// import {card} from './Card.js';
import {
    Card, CardBody,
    CardTitle, CardSubtitle,CardImg,CardGroup
  } from 'reactstrap';

const Posters = () => {
   

    return (
        
        <Container >
            <Row className="row-content">
                <Col className="bg-orange round-border p-5">
                <h1 className=" text-center text-white" ><strong>Vision FTF</strong></h1>
                 <p className="text-center text-white" ><strong>A Career Guidance Startup</strong></p>
                <CardGroup className="justify-content-center">
                {Posterdetails.map((content)=> 
                    (
                    <Col lg="4" xs="12" style={{padding:"10px"}} key={content.id}>
                        <Card className="bg-orange text-center">
                            <CardImg top  src={content.img} alt="Card image cap" className="round-border"/>
                            <CardBody >
                                <CardTitle tag="h5" className="text-white">{content.title}</CardTitle>
                                <CardSubtitle tag="h6" className="mb-2">{content.description}</CardSubtitle>
                            </CardBody>
                        </Card>
                    </Col>
                    )
                )}
                </CardGroup>
                </Col>
            </Row>
        </Container>
    )
}

export default Posters