ekallin/PIbd-21_Bakalskaya_E.D._INTERNET_PROGRAMMING_FRONTEND
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

первая страничка на ракте

Browse Source
This commit is contained in:
ekallin 2023-11-30 23:08:10 +04:00
parent 64c9e6260a
commit 204713ced3
3 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.jsx
View File

@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
import { Container } from 'react-bootstrap';
// import { Container } from 'react-bootstrap';
import { Outlet } from 'react-router-dom';
import './App.css';
import Footer from './components/footer/Footer.jsx';
@ -9,9 +9,9 @@ const App = ({ routes }) => {
return (
<>
<Navigation routes={routes}></Navigation>
<Container className='flex-fill d-flex justify-content-center' as="main">
<main className='w-100 flex-fill d-flex justify-content-center p-0 m-0'>
<Outlet />
</Container>
</main>
<Footer />
</>
);

79
src/pages/Index.jsx
View File

@ -13,50 +13,53 @@ import img4 from "../assets/frame4.jpg";
const Index = () => {
return (
<>
<div className="page flex-fill d-flex flex-column" id="main-page">
<div className="row flex-fill">
<div className="col d-none d-md-flex flex-column justify-content-around align-items-center">
<img src={fon} className="w-75 img-fluid rounded-5" />
<img src={img2} className="w-75 img-fluid rounded-5" />
</div>
<div className="promo-text-block col d-flex flex-column justify-content-around align-content-center">
<span className="text-center promo-top">
Кино месяца
</span>
<span className="text-center promo-middle">
Barbie
</span>
<span className="text-center promo-bottom">
Марго&nbsp;Роби и Райан&nbsp;Гослинг
</span>
</div>
<div className="col d-none d-md-flex flex-column justify-content-around align-items-center">
<img src={img3} className="w-75 img-fluid rounded-5" />
<img src={img4} className="w-75 img-fluid rounded-5" />
</div>
</div>
<div id="carouselExample" className="carousel slide d-block d-md-none">
<div className="carousel-inner">
<div className="carousel-item active">
<img src={img1} className="d-block w-100" />
<div className="main-page flex-fill d-flex justify-content-center">
<div className="page flex-fill d-flex flex-column p-0 m-0" id="main-page">
<div className="page-row d-flex flex-row flex-fill">
<div className="col d-none d-md-flex flex-column justify-content-around align-items-center">
<img src={fon} className="img-fluid w-75 rounded-5" />
<img src={img2} className=" img-fluid w-75 rounded-5" />
</div>
<div className="carousel-item active">
<img src={img2} className="d-block w-100" />
<div className="promo-text-block col d-flex flex-column justify-content-around align-content-center">
<span className="text-center promo-top">
Кино месяца
</span>
<span className="text-center promo-middle">
Barbie
</span>
<span className="text-center promo-bottom">
Марго&nbsp;Роби и Райан&nbsp;Гослинг
</span>
</div>
<div className="carousel-item active">
<img src={img3} className="d-block w-100" />
<div className="col d-none d-md-flex flex-column justify-content-around align-items-center">
<img src={img3} className=" img-fluid w-75 rounded-5" />
<img src={img4} className=" img-fluid w-75 rounded-5" />
</div>
</div>
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true" />
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true" />
<span className="visually-hidden">Next</span>
</button>
<div id="carouselExample" className="carousel slide d-block d-md-none">
<div className="carousel-inner">
<div className="carousel-item active">
<img src={img1} className="d-block w-100" />
</div>
<div className="carousel-item active">
<img src={img2} className="d-block w-100" />
</div>
<div className="carousel-item active">
<img src={img3} className="d-block w-100" />
</div>
</div>
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true" />
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true" />
<span className="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</>
);
};

9
src/pagescss/Index.css
View File

@ -22,9 +22,9 @@
font-size: 160px;
}
.page {
#main-page {
background-image: url("../assets/barbie_big.png");
/* background-position: center; */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.6);
@ -41,4 +41,9 @@
.promo-text-block .promo-middle {
font-size: min(20vw, 160px);
}
}
.img-fluid {
height: 230px;
width: 150px;
}