import React from 'react'
      import { Row, Col, Container, Image } from "react-bootstrap"
      import '__path_to_the_stylesheet__'
      import img from "__path_to_the_img_file__"
      import logo from "__path_to_the_img_file__"
      
      const Teams = () => {
        return (
          <div id="teams">
            <h1 class="display-5">Our Team</h1>
            <Container align="center">
              <hr></hr>
              {/* FIRST ROW */}
              <Row style={{ paddingTop: '3em' }}>
                <Col lg={3}>
                  <Image className='img' src={img} style={{ height: '18em', width: '16em', border: '3px solid', borderRadius: '10px' }} />
                </Col>
      
                <Col lg={3}>
                  <h4>__name_of_the_person__</h4>
                  <h5>__position__</h5>
                  <Image className='logo' src={logo} style={{ height: '4em', alignContent: 'center' }} />
                  <p style={{ paddingTop: '1em' }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat consequat lorem, ac fringilla nisi lacinia vel.</p>
                </Col>
      
                <Col lg={3}>
                  <Image src={img} style={{ height: '18em', width: '16em', border: '3px solid', borderRadius: '10px' }} />
                </Col>
      
                <Col lg={3}>
                  <h4>__name_of_the_person__</h4>
                  <h5>__position__</h5>
                  <Image className='logo' src={logo} style={{ height: '4em', alignContent: 'center' }} />
                  <p style={{ paddingTop: '1em' }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat consequat lorem, ac fringilla nisi lacinia vel.</p>
      
                </Col>
              </Row>
      
          <hr></hr>
              {/* SECOND ROW */}
              <Row style={{ paddingTop: '3em' }}>
                <Col lg={3}>
                  <Image className='img' src={img} style={{ height: '18em', width: '16em', border: '3px solid', borderRadius: '10px' }} />
                </Col>
      
                <Col lg={3}>
                  <h4>__name_of_the_person__</h4>
                  <h5>__position__</h5>
                  <Image className='logo' src={logo} style={{ height: '4em', alignContent: 'center' }} />
                  <p style={{ paddingTop: '1em' }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat consequat lorem, ac fringilla nisi lacinia vel.</p>
                </Col>
      
                <Col lg={3}>
                  <Image src={img} style={{ height: '18em', width: '16em', border: '3px solid', borderRadius: '10px' }} />
                </Col>
      
                <Col lg={3}>
                  <h4>__name_of_the_person__</h4>
                  <h5>__position__</h5>
                  <Image className='logo' src={logo} style={{ height: '4em', alignContent: 'center' }} />
                  <p style={{ paddingTop: '1em' }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat consequat lorem, ac fringilla nisi lacinia vel.</p>
      
                </Col>
              </Row>
            </Container>
          </div>
        )
      }
      
      export default Teams
      

      Javascript language logo
      your recipe card header background
      React Team Component

      Team
      Hackathon Website in React Recipes

      In this code, the Teams component creates a set of divs that will be used to display three columns of data. The first column is a row of three columsected by a solid border. The second column is a row of three columsected by a border radius of 10px. The third column is a single column.

      The team name and position are displayed in a header row, followed by the team members' images. The position column has three lines, each displaying the name, position, and image of a team member. The logo column displays the team's logo. Finally, a paragraph provides information about the team.

      Shortcut: react.create.team

      Filename pattern: *.jsx

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.