PAYDAY/PaydayFrontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Третья секция

Browse Source
This commit is contained in:
Vsevo;od 2023-07-29 14:36:02 +03:00
parent 09b1ab6237
commit ef8db98184
7 changed files with 369 additions and 374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

336
src/css/style.css
View File

File diff suppressed because one or more lines are too long

2
src/css/style.css.map
View File

File diff suppressed because one or more lines are too long

BIN
src/img/icons/alpha.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

133
src/index.html
View File

@ -22,38 +22,133 @@
<img src="/img/logo/logoPayDay.png" alt="logo" class="menu_logo"> <img src="/img/logo/logoPayDay.png" alt="logo" class="menu_logo">
<div class="menu_project_name menu_project_name_text">Имя проекта</div> <div class="menu_project_name menu_project_name_text">Имя проекта</div>
</div> </div>
<button class="header_login"> <!-- <button class="header_login">
Вход через <span class="header_login_text">ЕСИА</span> Вход через <span class="header_login_text">ЕСИА</span>
</button> </button> -->
</header> </header>
<div class="fixed"></div>
<section class="navigation"> <section class="navigation">
<div class="container container_flex"> <div class="container container_flex">
<div class="row"> <div class="navigation_fixed"></div>
<div class="navigation_input_block col-md-12"><input type="text" class="navigation_input" placeholder="Введите код или название направления"><img src="/img/logo/search.svg" alt="search" class="navigation_search"></div> <div class="navigation_banks" id="navigation">
</div> <div class="navigation_banks_univer ">СпбГУ</div>
<div class="row row-cols-lg-1 g-5 g-lg-3"> <div class="navigation_banks_speciality ">09.03.04 - Программная инженерия</div>
<div class="col-md-12"> <div class="navigation_banks_sort navigation_banks_sort_hamburger">
<div class="navigation_info navigation_info_text p-3">09.03.04 - Программная инженерия <span class="navigation_cost">От 5600 в мес.</span> 10+ Банков</div> <span></span>
<span></span>
<span></span>
</div>
</div> </div>
<div class="col-md-12"> <div class="row row-cols-lg-10 g-5 g-lg-3">
<div class="navigation_info navigation_info_text p-3">09.03.04 - Программная инженерия <span class="navigation_cost">От 5600 в мес.</span> 10+ Банков</div> <div class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
</div>
<div class="navigation_credit">
<span class="navigation_credit_cost">10000 рублей/мес</span>
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div> </div>
<div class="col-md-12"> <div class="col-12 navigation_card navigation_bank_text">
<div class="navigation_info navigation_info_text p-3">09.03.04 - Программная инженерия <span class="navigation_cost">От 5600 в мес.</span> 10+ Банков</div> <div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
</div>
<div class="navigation_credit">
<span class="navigation_credit_cost">10000 рублей/мес</span>
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div> </div>
<div class="col-md-12"> <div class="col-12 navigation_card navigation_bank_text">
<div class="navigation_info navigation_info_text p-3">09.03.04 - Программная инженерия <span class="navigation_cost">От 5600 в мес.</span> 10+ Банков</div> <div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
</div>
<div class="navigation_credit">
<span class="navigation_credit_cost">10000 рублей/мес</span>
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
</div>
<div class="navigation_credit">
<span class="navigation_credit_cost">10000 рублей/мес</span>
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
</div>
<div class="navigation_credit">
<span class="navigation_credit_cost">10000 рублей/мес</span>
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
</div>
<div class="navigation_credit">
<span class="navigation_credit_cost">10000 рублей/мес</span>
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
</div>
<div class="navigation_credit">
<span class="navigation_credit_cost">10000 рублей/мес</span>
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
</div>
<div class="navigation_credit">
<span class="navigation_credit_cost">10000 рублей/мес</span>
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div>
<div class="col-12 navigation_card navigation_bank_text">
<div class="navigation_bank">
<img src="./img/icons/alpha.png" alt="navigation" class="navigation_icon">
Альфа Банк <span>на 15 лет</span>
</div>
<div class="navigation_credit">
<span class="navigation_credit_cost">10000 рублей/мес</span>
<span class="navigation_credit_prosent">6% в год</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="navigation_slid"> <div class="navigation_choise">
<span class="navigation_slid_disable"></span> <div class="navigation_slid">
<span class="navigation_slid_active"></span> <span class="navigation_slid_disable"></span>
<span class="navigation_slid_disable"></span> <span class="navigation_slid_active"></span>
<span class="navigation_slid_disable"></span> <span class="navigation_slid_disable"></span>
<span class="navigation_slid_disable"></span>
</div>
</div> </div>
</section> </section>
<footer>
<span>Copyrited By PayDay</span>
</footer>
<script src="js/script.js"></script> <script src="js/script.js"></script>
</body> </body>
</html> </html>

10
src/index1.html
View File

@ -40,6 +40,16 @@
ЮФУ <span>от 135т руб</span></div> ЮФУ <span>от 135т руб</span></div>
<div class="col-2 universe_card universe_card_text"><img src="./img/icons/ufu.jpg" alt="universe" class="universe_icon"> <div class="col-2 universe_card universe_card_text"><img src="./img/icons/ufu.jpg" alt="universe" class="universe_icon">
ЮФУ <span>от 135т руб</span></div> ЮФУ <span>от 135т руб</span></div>
<div class="col-2 universe_card universe_card_text"><img src="./img/icons/ufu.jpg" alt="universe" class="universe_icon">
ЮФУ <span>от 135т руб</span></div>
<div class="col-2 universe_card universe_card_text"><img src="./img/icons/kubgu.jpg" alt="universe" class="universe_icon">
КубГУ <span>от 135т руб</span></div>
<div class="col-2 universe_card universe_card_text"><img src="./img/icons/vshe.png" alt="universe" class="universe_icon">
ВШЭ <span>от 135т руб</span></div>
<div class="col-2 universe_card universe_card_text"><img src="./img/icons/ufu.jpg" alt="universe" class="universe_icon">
ЮФУ <span>от 135т руб</span></div>
<div class="col-2 universe_card universe_card_text"><img src="./img/icons/ufu.jpg" alt="universe" class="universe_icon">
ЮФУ <span>от 135т руб</span></div>
</div> </div>
</div> </div>

59
src/index2.html Normal file
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/bootstrap-grid.min.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<title>PayDay</title>
</head>
<body>
<header>
<div class="menu">
<div class="menu_hamburger">
<span></span>
<span></span>
<span></span>
</div>
<img src="/img/logo/logoPayDay.png" alt="logo" class="menu_logo">
<div class="menu_project_name menu_project_name_text">Имя проекта</div>
</div>
<button class="header_login">
Вход через <span class="header_login_text">ЕСИА</span>
</button>
</header>
<section class="navigation">
<div class="container container_flex">
<div class="row">
<div class="navigation_input_block col-md-12"><input type="text" class="navigation_input" placeholder="Введите код или название направления"><img src="/img/logo/search.svg" alt="search" class="navigation_search"></div>
</div>
<div class="row row-cols-lg-1 g-5 g-lg-3">
<div class="col-md-12">
<div class="navigation_info navigation_info_text p-3">09.03.04 - Программная инженерия <span class="navigation_cost">От 5600 в мес.</span> 10+ Банков</div>
</div>
<div class="col-md-12">
<div class="navigation_info navigation_info_text p-3">09.03.04 - Программная инженерия <span class="navigation_cost">От 5600 в мес.</span> 10+ Банков</div>
</div>
<div class="col-md-12">
<div class="navigation_info navigation_info_text p-3">09.03.04 - Программная инженерия <span class="navigation_cost">От 5600 в мес.</span> 10+ Банков</div>
</div>
<div class="col-md-12">
<div class="navigation_info navigation_info_text p-3">09.03.04 - Программная инженерия <span class="navigation_cost">От 5600 в мес.</span> 10+ Банков</div>
</div>
</div>
</div>
<div class="navigation_slid">
<span class="navigation_slid_disable"></span>
<span class="navigation_slid_active"></span>
<span class="navigation_slid_disable"></span>
<span class="navigation_slid_disable"></span>
</div>
</section>
<script src="js/script.js"></script>
</body>
</html>

203
src/sass/_general.sass
View File

@ -1,11 +1,18 @@
header header
position: relative z-index: 1
height: 83px position: fixed
top: 0px
width: 100%
height: 70px
display: flex display: flex
justify-content: space-between justify-content: space-between
align-content: center align-content: center
align-items: center align-items: center
background-color: #fff background-color: #fff
.fixed
width: 100px
background-color: #fff
height: 70px
.menu .menu
width: 435px width: 435px
height: 58px height: 58px
@ -116,7 +123,7 @@ header
justify-content: center justify-content: center
align-content: center align-content: center
align-items: center align-items: center
margin-left: 30px margin: 0 30px 20px 0
height: 205px height: 205px
width: 205px width: 205px
background-color: #fff background-color: #fff
@ -130,11 +137,9 @@ header
font-weight: 500 font-weight: 500
span span
color: #50D400 color: #50D400
font-family: Inter
font-size: 16px font-size: 16px
font-style: normal font-style: normal
font-weight: 500 font-weight: 500
line-height: normal
&_icon &_icon
height: 130px height: 130px
@ -160,9 +165,9 @@ header
background-color: #AEAEAE background-color: #AEAEAE
.navigation .navigation
background: linear-gradient(0deg, #ECECEC 0%, #ECECEC 100%), #E8E8E8 background: linear-gradient(0deg, #ECECEC 0%, #ECECEC 100%), #E8E8E8
position: relative min-height: 660px
min-height: 640px
padding: 22px 0 30px 0 padding: 22px 0 30px 0
margin-top: 72px
&_input_block &_input_block
display: flex display: flex
position: relative position: relative
@ -181,7 +186,89 @@ header
&:focus &:focus
outline: none outline: none
border: 1px solid grey border: 1px solid grey
&_fixed
background: linear-gradient(0deg, rgb(236, 236, 236) 0%, rgb(236, 236, 236) 100%), rgb(232, 232, 232)
height: 80px
width: 100%
position: absolute
top: 65px
#navigation
height: 70px
padding-top: 15px
top: 66px
width: 90%
left: 5%
&_banks
background: linear-gradient(0deg, #ECECEC 0%, #ECECEC 100%), #E8E8E8
position: fixed
top: 60px
display: flex
justify-content: space-between
height: 56px
margin-bottom: 10px
&_univer
width: 12%
display: flex
align-items: center
justify-content: center
border-radius: 50px
background-color: #fff
color: #20D37D
font-size: 22px
font-style: normal
font-weight: 500
&_speciality
width: 82%
margin-left: 10px
display: flex
align-items: center
justify-content: center
border-radius: 50px
background-color: #fff
color: #20D37D
font-size: 20px
font-style: normal
font-weight: 500
&_sort
width: 57px
margin-left: 10px
display: flex
align-items: center
justify-content: center
border-radius: 50%
background-color: #fff
&_hamburger
display: flex
align-items: center
justify-content: center
flex-direction: column
background-color: #fff
span
border-radius: 6px
display: block
height: 5px
width: 27px
background-color: #20D37D
margin: 0 9px 6px 9px
&:nth-child(1)
margin-top: 12px
&:nth-child(2)
width: 19px
&:nth-child(3)
width: 11px
margin-bottom: 12px
&_active
transition: 0.8 all
span
&:nth-child(1)
margin-top: 12px
transform: translateY(12px) rotate(-45deg)
&:nth-child(2)
display: none
&:nth-child(3)
margin-top: 12px
transform: translateY(-5px) rotate(45deg)
&_search &_search
height: 35px height: 35px
width: 35px width: 35px
@ -200,6 +287,10 @@ header
font-size: 20px font-size: 20px
font-style: normal font-style: normal
font-weight: 500 font-weight: 500
.container_flex
display: flex
justify-content: center
align-items: center
&_cost &_cost
position: absolute position: absolute
right: 150px right: 150px
@ -207,23 +298,97 @@ header
font-size: 20px font-size: 20px
font-style: normal font-style: normal
font-weight: 500 font-weight: 500
&_card
display: flex
flex-direction: column
justify-content: center
align-content: center
align-items: center
margin-left: 30px
height: 60px
width: 880px
background-color: #fff
border-radius: 44px
&_text
color: #2A2A2A
font-size: 24px
font-style: normal
font-weight: 500
span
color: #50D400
font-size: 16px
font-style: normal
font-weight: 500
&_bank_text
margin: 0 0 6px 0
flex-direction: row
justify-content: space-between
color: #2A2A2A
font-size: 24px
font-style: normal
font-weight: 500
&_slid &_slid
height: 18px
width: 112px
display: flex display: flex
position: absolute justify-content: center
bottom: 30px height: 14px
left: 50% width: 80px
transform: translateX(-50%)
&_active &_active
width: 20px width: 14px
margin-right: 8px margin-right: 6px
border-radius: 50% border-radius: 50%
background-color: #fff background-color: #fff
&_disable &_disable
span span
width: 20px width: 14px
margin-right: 8px margin-right: 6px
border-radius: 50% border-radius: 50%
background-color: #AEAEAE background-color: #AEAEAE
&_bank
display: flex
justify-content: space-between
align-items: center
&_icon
height: 45px
width: 45px
&_credit
display: flex
justify-content: space-between
align-items: center
width: 380px
height: 25px
padding-right: 30px
&_prosent
padding-left: 33px
color: #20D37D
font-size: 20px
font-style: normal
font-weight: 500
&_choise
position: fixed
background: linear-gradient(0deg, #ECECEC 0%, #ECECEC 100%), #E8E8E8
display: flex
justify-content: center
align-items: center
height: 50px
width: 100%
bottom: 50px
footer
width: 100%
bottom: 0px
position: fixed
background-color: #fff
height: 50px
display: flex
justify-content: center
align-items: center
align-content: center
span
width: 200px
color: #20d37d
font-size: 20px
font-style: normal
font-weight: 500