homework_kyrochka/src/Components/MainContent.js

import React from "react";
import { Container, Row, Col, Card} from "react-bootstrap";
import styled from "styled-components";
import monolit from '../img/monolit.jpg'
import freedom from '../img/freeedom.jpg'
import clearSky from '../img/clear_sky.jpg'
import merk from '../img/1.jpg'
import duty from '../img/2.jpg'
import loners from '../img/3.jpg'
import background from '../img/church_place.jpg'
import textbg from '../img/bgimg.jpg'
import military from '../img/military_profile.jpeg'
import bandit from '../img/bandit_profile.jpeg'
import ecologist from '../img/ecologists_profile.jpg'
import AboutPlace from "./AboutPlace";
import TextInfo from "./TextInfo";
import Footer from "./Footer";
const Styles = styled.div`
    
    .card{
        border-radius: 4px;
        width: 18rem;
    }
     .card-body{
        background:transparent;
    }
    .card-title {
        font-family: Stalker;
        font-size: 2.25rem;

    }
    .cardStyle {
        background: url(${background}) no-repeat;
        padding-top: 2rem; 
        padding-bottom: 2rem;
        background-size: cover;
        width: 100%;
    }

    .row{
        padding-left: 15rem;
        padding-bottom: 2rem;
    }
    .textInfo{
        padding-top: 2rem;
        padding-bottom: 2rem;
        background: url(${textbg});
        background-size: cover;
        color: white;
        
    }

    @media (max-width: 1450px) {
        .row {
            padding-left: 6rem;
        }
    }
    @media (max-width: 768px) {
        .row {
            padding-left: 2rem;
        }
        .card{ 
            width: 13rem;
        }
    }
    @media (max-width: 576px) {
        .col {
            padding-bottom: 1rem;
        }
        .row {
            padding-left: 2rem;
        }
        .card {
            width: 18rem;
        }
        
    }
    
`;

export default function MainContent(){

    return(
        <>
        <Styles>
        <Container  fluid className="cardStyle">
            <Row>
                <Col>
                    <Card>
                        <Card.Img variant="top" src={loners} style={{height: '400px'}}/>
                        <Card.Body>
                            <Card.Title>Loners</Card.Title>
                            <Card.Text>
                            Loners are a nomadic semi-unified group of Stalkers who simply live off the Zone in order to earn some coin for their daily lives. 
                            Loners are neutral toward almost all other factions, but do have complications with the Military, and, to a lesser extent, the Mercenaries, and openly oppose the Bandit faction for their actions against free Stalkers. 
                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
                <Col>
                    <Card>
                        <Card.Img variant="top" src={duty} style={{height: '400px'}}/>
                        <Card.Body>
                            <Card.Title>Duty</Card.Title>
                            <Card.Text>Duty was founded by former military expedition survivors and Stalkers concerned about the looming horrors of the Zone. 
                                They are one of the largest Stalker clans in the Zone. They have a strict military code (such as no smoking, maintaining one's weapons, etc...) and operate in a military fashion, using ranks like Sergeant, Major, Captain, and General.

                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
                <Col>
                    <Card>
                        <Card.Img variant="top" src={clearSky} style={{height: '400px'}}/>
                        <Card.Body>
                            <Card.Title>ClearSky</Card.Title>
                            <Card.Text>
                            Clear Sky is the most secretive faction within the Zone. 
                            The faction was disbanded after losing the majority of their manpower during the events in S.T.A.L.K.E.R.: Clear Sky.
                            The Clear Sky faction was originally composed of former researchers of the C-Consciousness who broke away from them in order to conduct their own research on how to either destroy or contain the zone.
                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
            
            </Row>
            <Row>
            <Col>
                    <Card>
                        <Card.Img variant="top" src={merk} style={{height: '400px'}}/>
                        <Card.Body>
                            <Card.Title>Mercenaires</Card.Title>
                            <Card.Text>
                            The Mercenaries are a private military force operating within the Zone. 
                            They are professional soldiers who will do just about anything in the Zone, ranging from retrieval, assassinations, body-guarding, etc. 
                            Though, of course, it must be for the right price.
                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
                <Col>
                    <Card>
                        <Card.Img variant="top" src={monolit} style={{height: '400px'}}/>
                        <Card.Body>
                            <Card.Title>Monolit</Card.Title>
                            <Card.Text>This group displays many features of a religious sect. Its members believe in the existence of a complex alien crystal, the Monolith, located somewhere in the center of the Zone. 
                                Most stalkers treat Monolith adepts with contempt and consider them as lunatics.</Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
                <Col>
                    <Card>
                        <Card.Img variant="top" src={freedom} style={{height: '400px'}}/>
                        <Card.Body>
                            <Card.Title>Freedom</Card.Title>
                            <Card.Text>
                            Freedom is a clan of stalkers who fight for free access to the Zone, and their views are somewhat anarchistic, believing nobody can own the Zone and seeing it both as a scientific marvel and as a free life inside the Zone's borders.
                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
            </Row>
            <Row>
                <Col>
                    <Card>
                        <Card.Img variant="top" src={ecologist} style={{height: '400px'}}/>
                        <Card.Body>
                            <Card.Title> Ecologists</Card.Title>
                            <Card.Text>The Ecologists are Ukrainian scientists sent into the Zone on behalf of the government, but seem to be affiliated with outside organizations. Their main purpose is the study of all aspects of the Zone, using scientific methods to further explain what the Zone is, and its purpose. 

                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
                <Col>
                    <Card>
                        <Card.Img variant="top" src={bandit} style={{height: '400px'}}/>
                        <Card.Body>
                            <Card.Title>Bandits</Card.Title>
                            <Card.Text>The Bandits are raiders and marauders of the Zone, ranging from petty thugs and gangsters to organized crime syndicates. Apart from Freedom, which treats them with marginal contempt, everyone hates the Bandits due to their nefarious acts of robbing and exploiting honest Stalkers.

                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
                <Col>
                    <Card>
                        <Card.Img variant="top" src={military} style={{height: '400px'}}/>
                        <Card.Body>
                            <Card.Title>Military</Card.Title>
                            <Card.Text>
                            The Ukrainian military supposedly has the Zone contained in order to prevent the looting of dangerous, radioactive materials and to prevent the unauthorized entering of any individuals. They allegedly enforce this rule with a "Shoot-on-sight" declaration.
                            </Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
            
            </Row>
        </Container>
        <AboutPlace/>
        <Container className="textInfo" fluid>
            <TextInfo/>
        </Container>
        <Footer/>
        </Styles>
        </>
    );

}