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
React Team Component
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