Первая загрузочка

This commit is contained in:
Vsevo;od 2023-07-28 23:48:22 +03:00
parent 8ca749bfd5
commit b636bf7ced
18 changed files with 298 additions and 0 deletions

3
src/.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"compile-hero.disable-compile-files-on-did-save-code": false
}

6
src/css/bootstrap-grid.min.css vendored Normal file

File diff suppressed because one or more lines are too long

6
src/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

1
src/css/style.css Normal file
View File

@ -0,0 +1 @@
*{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{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{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;bottom:30px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}/*# sourceMappingURL=style.css.map */

1
src/css/style.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["../sass/style.sass","../sass/_general.sass"],"names":[],"mappings":"AACA,EACI,+BAAA,CCFJ,OACI,iBAAA,CACA,WAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CACA,yBAAA,CAAA,oBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,qBAAA,CACJ,MACI,WAAA,CACA,WAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,qBAAA,CAAA,kBAAA,CAAA,oBAAA,CACA,yBAAA,CAAA,oBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,gBAAA,CACA,WACI,UAAA,CACA,WAAA,CACJ,mBACI,gBAAA,CACA,wBACI,aAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CAER,gBACI,aAAA,CACA,iBAAA,CACA,SAAA,CACA,QAAA,CACA,kCAAA,CAAA,0BAAA,CACA,WAAA,CACA,UAAA,CACA,wBAAA,CACA,iBAAA,CACA,qBACI,aAAA,CACA,UAAA,CACA,UAAA,CACA,qBAAA,CACA,oBAAA,CACA,kCACI,eAAA,CACJ,kCACI,kBAAA,CACR,uBACI,yBAAA,CAAA,iBAAA,CAGI,yCACI,eAAA,CACA,iDAAA,CAAA,yCAAA,CACJ,yCACI,YAAA,CACJ,yCACI,eAAA,CACA,gDAAA,CAAA,wCAAA,CACpB,cACI,aAAA,CACA,WAAA,CACA,iBAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,iBAAA,CACA,WAAA,CACA,WAAA,CACA,wBAAA,CACA,kBAAA,CACA,UAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,mBACI,eAAA,CACA,WAAA,CACA,gBAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,UAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACR,UACI,gBAAA,CACA,qBAAA,CACA,8FAAA,CAAA,kEAAA,CACA,sBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,iBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,WAAA,CACA,kBAAA,CACJ,gBACI,iBAAA,CACA,WAAA,CACA,kBAAA,CACA,aAAA,CACA,UAAA,CACA,UAAA,CACA,sBACI,YAAA,CACA,qBAAA,CAER,iBACI,WAAA,CACA,UAAA,CACA,iBAAA,CACA,UAAA,CACJ,eACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,yBAAA,CAAA,oBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,gBAAA,CACA,YAAA,CACA,WAAA,CACA,qBAAA,CACA,kBAAA,CAGA,oBACI,aAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,yBACI,aAAA,CACA,iBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CAEZ,eACI,YAAA,CACA,WAAA,CACJ,eACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,iBAAA,CACA,WAAA,CACA,QAAA,CACA,kCAAA,CAAA,0BAAA","file":"style.css"}

BIN
src/img/icons/kubgu.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/img/icons/ufu.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src/img/icons/vshe.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/img/logo/logoPayDay.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

10
src/img/logo/search.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="35" height="36" viewBox="0 0 35 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="fluent-mdl2:zoom" clip-path="url(#clip0_1_33)">
<path id="Vector" d="M34.8925 34.7695C34.8925 35.0977 34.7967 35.3848 34.6052 35.6309C34.4137 35.877 34.149 36 33.8111 36C33.5183 36 33.2648 35.8887 33.0508 35.666L19.7874 21.8848C18.7061 22.8105 17.5233 23.5195 16.2392 24.0117C14.9551 24.5039 13.6035 24.75 12.1842 24.75C11.0916 24.75 10.0384 24.6035 9.02462 24.3105C8.01086 24.0176 7.06468 23.6016 6.18609 23.0625C5.30749 22.5234 4.50775 21.8789 3.78685 21.1289C3.06595 20.3789 2.4408 19.541 1.91139 18.6152C1.38198 17.6895 0.982106 16.7051 0.711769 15.6621C0.441432 14.6191 0.300632 13.5234 0.289368 12.375C0.289368 11.2383 0.430168 10.1426 0.711769 9.08789C0.99337 8.0332 1.39324 7.04883 1.91139 6.13477C2.42953 5.2207 3.04906 4.38867 3.76995 3.63867C4.49085 2.88867 5.29623 2.23828 6.18609 1.6875C7.07595 1.13672 8.02213 0.720703 9.02462 0.439453C10.0271 0.158203 11.0803 0.0117188 12.1842 0C13.2768 0 14.33 0.146484 15.3437 0.439453C16.3575 0.732422 17.3037 1.14844 18.1823 1.6875C19.0609 2.22656 19.8606 2.87109 20.5815 3.62109C21.3024 4.37109 21.9276 5.20898 22.457 6.13477C22.9864 7.06055 23.3863 8.04492 23.6566 9.08789C23.9269 10.1309 24.0677 11.2266 24.079 12.375C24.079 13.8398 23.8425 15.2402 23.3694 16.5762C22.8963 17.9121 22.2148 19.1484 21.3249 20.2852L22.288 21.2871C22.7611 21.7793 23.3356 22.3652 24.0114 23.0449C24.6873 23.7246 25.4194 24.4688 26.2079 25.2773C26.9964 26.0859 27.7961 26.9121 28.6071 27.7559C29.4182 28.5996 30.201 29.4199 30.9557 30.2168C31.7104 31.0137 32.3806 31.7344 32.9663 32.3789C33.5521 33.0234 34.0195 33.5566 34.3687 33.9785C34.7179 34.4004 34.8925 34.6641 34.8925 34.7695ZM12.1842 22.5C13.5246 22.5 14.7862 22.2363 15.9689 21.709C17.1516 21.1816 18.1823 20.4551 19.0609 19.5293C19.9395 18.6035 20.6322 17.5313 21.1391 16.3125C21.646 15.0937 21.905 13.7812 21.9163 12.375C21.9163 10.9805 21.6629 9.66797 21.156 8.4375C20.6491 7.20703 19.9507 6.13477 19.0609 5.2207C18.171 4.30664 17.1404 3.58594 15.9689 3.05859C14.7974 2.53125 13.5359 2.26172 12.1842 2.25C10.8438 2.25 9.58219 2.51367 8.39947 3.04102C7.21675 3.56836 6.18609 4.29492 5.30749 5.2207C4.4289 6.14648 3.73616 7.21875 3.22928 8.4375C2.7224 9.65625 2.46333 10.9688 2.45206 12.375C2.45206 13.7695 2.7055 15.082 3.21238 16.3125C3.71927 17.543 4.41764 18.6152 5.30749 19.5293C6.19735 20.4434 7.22801 21.1641 8.39947 21.6914C9.57093 22.2188 10.8325 22.4883 12.1842 22.5Z" fill="#03D764"/>
</g>
<defs>
<clipPath id="clip0_1_33">
<rect width="34.6031" height="36" fill="white" transform="translate(0.289368)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

55
src/index.html Normal file
View File

@ -0,0 +1,55 @@
<!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="universe">
<div class="container container_flex">
<div class="row">
<div class="universe_input_block col-md-12"><input type="text" class="universe_input" placeholder="Введите название вуза или суза..."><img src="/img/logo/search.svg" alt="search" class="universe_search"></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 class="universe_slid">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</section>
<script src="js/script.js"></script>
</body>
</html>

8
src/js/script.js Normal file
View File

@ -0,0 +1,8 @@
const menuActive = document.querySelector('.menu');
const hamburgerActive = document.querySelector('.hamburger');
console.log(menuActive);
hamburgerActive.addEventListener('click', el => {
el.currentTarget.classList.toggle('hamburger_active');
menuActive.classList.toggle('menu_active');
})

40
src/package-lock.json generated Normal file
View File

@ -0,0 +1,40 @@
{
"name": "secondProjectBootstrap",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"bootstrap": "^5.3.0"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/bootstrap": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz",
"integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.7"
}
}
}
}

5
src/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"dependencies": {
"bootstrap": "^5.3.0"
}
}

147
src/sass/_general.sass Normal file
View File

@ -0,0 +1,147 @@
header
position: relative
height: 83px
display: flex
justify-content: space-between
align-content: center
align-items: center
background-color: #fff
.menu
width: 435px
height: 58px
display: flex
justify-content: left
align-content: center
align-items: center
margin-left: 88px
&_logo
width: 40px
height: 52px
&_project_name
margin-left: 20px
&_text
color: #20D37D
font-size: 48px
font-style: normal
font-weight: 500
&_hamburger
display: block
position: absolute
left: 50px
top: 17px
transform: translateX(-50%)
height: 50px
width: 50px
background-color: #20D37D
border-radius: 9px
span
display: block
height: 5px
width: 32px
background-color: #fff
margin: 0 9px 6px 9px
&:nth-child(1)
margin-top: 12px
&:nth-child(3)
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)
.header_login
display: block
height: 100%
padding-left: 19px
display: flex
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
&_text
padding-top: 6px
height: 100%
margin-left: 10px
display: flex
align-items: center
color: #000
font-size: 22px
font-style: normal
font-weight: 500
.universe
min-height: 640px
padding: 22px 0 30px 0
background: linear-gradient(0deg, #ECECEC 0%, #ECECEC 100%), #E8E8E8
&_input_block
display: flex
position: relative
justify-content: center
align-items: center
height: 50px
margin-bottom: 25px
&_input
padding-left: 20px
height: 100%
border-radius: 40px
display: block
width: 100%
border: 0px
&:focus
outline: none
border: 1px solid grey
&_search
height: 35px
width: 35px
position: absolute
right: 30px
&_card
display: flex
flex-direction: column
justify-content: center
align-content: center
align-items: center
margin-left: 30px
height: 205px
width: 205px
background-color: #fff
border-radius: 44px
&_text
color: #2A2A2A
font-size: 24px
font-style: normal
font-weight: 500
span
color: #50D400
font-family: Inter
font-size: 16px
font-style: normal
font-weight: 500
line-height: normal
&_icon
height: 130px
width: 130px
&_slid
display: flex
position: absolute
bottom: 30px
left: 50%
transform: translateX(-50%)

8
src/sass/_media.sass Normal file
View File

@ -0,0 +1,8 @@
@media (max-width:1200px)
@media (max-width: 991px)
@media (max-width: 767px)

0
src/sass/_mixins.sass Normal file
View File

8
src/sass/style.sass Normal file
View File

@ -0,0 +1,8 @@
*
font-family: 'Roboto', sans-serif
@import "mixins"
@import "general"
@import "media"