diff --git a/react-app/public/index.html b/react-app/public/index.html index 8fbc1e2..a69553c 100644 --- a/react-app/public/index.html +++ b/react-app/public/index.html @@ -9,7 +9,7 @@ - React App + PayDay diff --git a/react-app/src/components/app/app.js b/react-app/src/components/app/app.js index 21895aa..b383e24 100644 --- a/react-app/src/components/app/app.js +++ b/react-app/src/components/app/app.js @@ -1,6 +1,9 @@ import { Component } from "react"; import Header from "../header/header"; -import "./app.css"; +import Main from "../main/main"; +import "./css/app.css"; +import "./css/bootstrap-grid.min.css"; +import "./css/bootstrap.min.css"; class App extends Component { state = {}; @@ -9,6 +12,7 @@ class App extends Component { return (
+
); } diff --git a/react-app/src/components/app/app.css b/react-app/src/components/app/css/app.css similarity index 100% rename from react-app/src/components/app/app.css rename to react-app/src/components/app/css/app.css diff --git a/react-app/src/components/header/css/bootstrap-grid.min.css b/react-app/src/components/app/css/bootstrap-grid.min.css similarity index 100% rename from react-app/src/components/header/css/bootstrap-grid.min.css rename to react-app/src/components/app/css/bootstrap-grid.min.css diff --git a/react-app/src/components/header/css/bootstrap.min.css b/react-app/src/components/app/css/bootstrap.min.css similarity index 100% rename from react-app/src/components/header/css/bootstrap.min.css rename to react-app/src/components/app/css/bootstrap.min.css diff --git a/react-app/src/components/header/header.js b/react-app/src/components/header/header.js index ca6c9fc..df06898 100644 --- a/react-app/src/components/header/header.js +++ b/react-app/src/components/header/header.js @@ -1,8 +1,6 @@ import { Component } from "react"; import "./css/header.css"; -import "./css/bootstrap-grid.min.css"; -import "./css/bootstrap.min.css"; import logo from "./img/logo/logoPayDay.png"; diff --git a/react-app/src/components/main/css/main.css b/react-app/src/components/main/css/main.css new file mode 100644 index 0000000..f78e4dd --- /dev/null +++ b/react-app/src/components/main/css/main.css @@ -0,0 +1,46 @@ +.universe { + position: relative; + min-height: 640px; + padding: 22px 0 30px 0; + background: -webkit-gradient( + linear, + left bottom, + left top, + from(#ececec), + to(#ececec) + ), + #e8e8e8; + background: linear-gradient(0deg, #ececec 0%, #ececec 100%), #e8e8e8; +} +.universe_input_block { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 50px; + margin-bottom: 25px; +} +.universe_input { + padding-left: 20px; + height: 100%; + border-radius: 40px; + display: block; + width: 100%; + border: 0px; +} +.universe_input:focus { + outline: none; + border: 1px solid gray; +} +.universe_search { + height: 35px; + width: 35px; + position: absolute; + right: 30px; +} /*# sourceMappingURL=style.css.map */ diff --git a/react-app/src/components/main/img/search.svg b/react-app/src/components/main/img/search.svg new file mode 100644 index 0000000..c1af0b5 --- /dev/null +++ b/react-app/src/components/main/img/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/react-app/src/components/main/main.js b/react-app/src/components/main/main.js new file mode 100644 index 0000000..d90db5d --- /dev/null +++ b/react-app/src/components/main/main.js @@ -0,0 +1,44 @@ +import { Component } from "react"; + +import Slider from "../slider/slider"; +import Universe from "../universe/universe"; +import "./css/main.css"; +import searchLogo from "./img/search.svg"; + +class Main extends Component { + state = { + universeData: [], + }; + + render() { + return ( +
+
+
+
+ + search +
+ +
+ {/* Генерация университетов из списка на основе пропсов*/} + +
+
+
+ {/* Переключение активного слайдера в зависимости от секции */} + +
+ ); + } +} + +export default Main; diff --git a/react-app/src/components/slider/css/slider.css b/react-app/src/components/slider/css/slider.css new file mode 100644 index 0000000..f1afbed --- /dev/null +++ b/react-app/src/components/slider/css/slider.css @@ -0,0 +1,24 @@ +.universe_slid { + height: 18px; + width: 112px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: absolute; + bottom: 30px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} +.universe_slid_active { + width: 20px; + margin-right: 8px; + border-radius: 50%; + background-color: #fff; +} +.universe_slid_disable { + width: 20px; + margin-right: 8px; + border-radius: 50%; + background-color: #aeaeae; +} diff --git a/react-app/src/components/slider/slider.js b/react-app/src/components/slider/slider.js new file mode 100644 index 0000000..371c44c --- /dev/null +++ b/react-app/src/components/slider/slider.js @@ -0,0 +1,20 @@ +import { Component } from "react"; + +import "./css/slider.css"; + +class Slider extends Component { + state = {}; + + render() { + return ( +
+ + + + +
+ ); + } +} + +export default Slider; diff --git a/react-app/src/components/universe/css/universe.css b/react-app/src/components/universe/css/universe.css new file mode 100644 index 0000000..d73d20c --- /dev/null +++ b/react-app/src/components/universe/css/universe.css @@ -0,0 +1,40 @@ +.universe_card { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-left: 30px; + height: 205px; + width: 205px; + background-color: #fff; + border-radius: 44px; +} +.universe_card_text { + color: #2a2a2a; + font-size: 24px; + font-style: normal; + font-weight: 500; +} +.universe_card_text span { + color: #50d400; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; +} +.universe_icon { + height: 130px; + width: 130px; +} diff --git a/react-app/src/components/universe/universe.js b/react-app/src/components/universe/universe.js new file mode 100644 index 0000000..fdb87df --- /dev/null +++ b/react-app/src/components/universe/universe.js @@ -0,0 +1,20 @@ +import { Component } from "react"; + +import "./css/universe.css"; + +// import logo from "./img/logo/logoPayDay.png"; + +class Universe extends Component { + state = {}; + + render() { + return ( +
+ universe + ЮФУ от 135т руб +
+ ); + } +} + +export default Universe; diff --git a/src/css/style.css b/src/css/style.css index 18f9491..96945ec 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1 +1,235 @@ -*{font-family:"Roboto",sans-serif}header{position:relative;height:83px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff}.menu{width:435px;height:58px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:88px}.menu_logo{width:40px;height:52px}.menu_project_name{margin-left:20px}.menu_project_name_text{color:#20d37d;font-size:48px;font-style:normal;font-weight:500}.menu_hamburger{display:block;position:absolute;left:50px;top:17px;-webkit-transform:translateX(-50%);transform:translateX(-50%);height:50px;width:50px;background-color:#20d37d;border-radius:9px}.menu_hamburger span{display:block;height:5px;width:32px;background-color:#fff;margin:0 9px 6px 9px}.menu_hamburger span:nth-child(1){margin-top:12px}.menu_hamburger span:nth-child(3){margin-bottom:12px}.menu_hamburger_active{-webkit-transition:.8 all;transition:.8 all}.menu_hamburger_active span:nth-child(1){margin-top:12px;-webkit-transform:translateY(12px) rotate(-45deg);transform:translateY(12px) rotate(-45deg)}.menu_hamburger_active span:nth-child(2){display:none}.menu_hamburger_active span:nth-child(3){margin-top:12px;-webkit-transform:translateY(-5px) rotate(45deg);transform:translateY(-5px) rotate(45deg)}.header_login{display:block;height:100%;padding-left:19px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:10px;width:290px;height:71px;background-color:#43ca79;border-radius:40px;color:#fff;font-size:32px;font-style:normal;font-weight:500}.header_login_text{padding-top:6px;height:100%;margin-left:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#000;font-size:22px;font-style:normal;font-weight:500}.universe{position:relative;min-height:640px;padding:22px 0 30px 0;background:-webkit-gradient(linear, left bottom, left top, from(#ECECEC), to(#ECECEC)),#e8e8e8;background:linear-gradient(0deg, #ECECEC 0%, #ECECEC 100%),#e8e8e8}.universe_input_block{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:50px;margin-bottom:25px}.universe_input{padding-left:20px;height:100%;border-radius:40px;display:block;width:100%;border:0px}.universe_input:focus{outline:none;border:1px solid gray}.universe_search{height:35px;width:35px;position:absolute;right:30px}.universe_card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:30px;height:205px;width:205px;background-color:#fff;border-radius:44px}.universe_card_text{color:#2a2a2a;font-size:24px;font-style:normal;font-weight:500}.universe_card_text span{color:#50d400;font-family:Inter;font-size:16px;font-style:normal;font-weight:500;line-height:normal}.universe_icon{height:130px;width:130px}.universe_slid{height:18px;width:112px;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;bottom:30px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.universe_slid_active{width:20px;margin-right:8px;border-radius:50%;background-color:#fff}.universe_slid_disable{width:20px;margin-right:8px;border-radius:50%;background-color:#aeaeae}/*# sourceMappingURL=style.css.map */ \ No newline at end of file +* { + font-family: "Roboto", sans-serif; +} +header { + position: relative; + height: 83px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #fff; +} +.menu { + width: 435px; + height: 58px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: left; + -ms-flex-pack: left; + justify-content: left; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-left: 88px; +} +.menu_logo { + width: 40px; + height: 52px; +} +.menu_project_name { + margin-left: 20px; +} +.menu_project_name_text { + color: #20d37d; + font-size: 48px; + font-style: normal; + font-weight: 500; +} +.menu_hamburger { + display: block; + position: absolute; + left: 50px; + top: 17px; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + height: 50px; + width: 50px; + background-color: #20d37d; + border-radius: 9px; +} +.menu_hamburger span { + display: block; + height: 5px; + width: 32px; + background-color: #fff; + margin: 0 9px 6px 9px; +} +.menu_hamburger span:nth-child(1) { + margin-top: 12px; +} +.menu_hamburger span:nth-child(3) { + margin-bottom: 12px; +} +.menu_hamburger_active { + -webkit-transition: 0.8 all; + transition: 0.8 all; +} +.menu_hamburger_active span:nth-child(1) { + margin-top: 12px; + -webkit-transform: translateY(12px) rotate(-45deg); + transform: translateY(12px) rotate(-45deg); +} +.menu_hamburger_active span:nth-child(2) { + display: none; +} +.menu_hamburger_active span:nth-child(3) { + margin-top: 12px; + -webkit-transform: translateY(-5px) rotate(45deg); + transform: translateY(-5px) rotate(45deg); +} +.header_login { + display: block; + height: 100%; + padding-left: 19px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-right: 10px; + width: 290px; + height: 71px; + background-color: #43ca79; + border-radius: 40px; + color: #fff; + font-size: 32px; + font-style: normal; + font-weight: 500; +} +.header_login_text { + padding-top: 6px; + height: 100%; + margin-left: 10px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #000; + font-size: 22px; + font-style: normal; + font-weight: 500; +} +.universe { + position: relative; + min-height: 640px; + padding: 22px 0 30px 0; + background: -webkit-gradient( + linear, + left bottom, + left top, + from(#ececec), + to(#ececec) + ), + #e8e8e8; + background: linear-gradient(0deg, #ececec 0%, #ececec 100%), #e8e8e8; +} +.universe_input_block { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 50px; + margin-bottom: 25px; +} +.universe_input { + padding-left: 20px; + height: 100%; + border-radius: 40px; + display: block; + width: 100%; + border: 0px; +} +.universe_input:focus { + outline: none; + border: 1px solid gray; +} +.universe_search { + height: 35px; + width: 35px; + position: absolute; + right: 30px; +} +.universe_card { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-left: 30px; + height: 205px; + width: 205px; + background-color: #fff; + border-radius: 44px; +} +.universe_card_text { + color: #2a2a2a; + font-size: 24px; + font-style: normal; + font-weight: 500; +} +.universe_card_text span { + color: #50d400; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; +} +.universe_icon { + height: 130px; + width: 130px; +} +.universe_slid { + height: 18px; + width: 112px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: absolute; + bottom: 30px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} +.universe_slid_active { + width: 20px; + margin-right: 8px; + border-radius: 50%; + background-color: #fff; +} +.universe_slid_disable { + width: 20px; + margin-right: 8px; + border-radius: 50%; + background-color: #aeaeae; +} /*# sourceMappingURL=style.css.map */