diff --git a/static/css/about.css b/static/css/about.css index 9fdfcdf..dd74b49 100644 --- a/static/css/about.css +++ b/static/css/about.css @@ -90,6 +90,34 @@ font-family: archivo-black; color: #403e41; } +.about-content .scene-container { + overflow: hidden; + width: 37%; + background-color: #f0f0f0; + min-height: 50vh; +} +@media screen and (max-width: 1023px) { + .about-content .scene-container { + width: 100%; + } +} +.about-content object { + overflow-x: hidden; + display: none; + width: 100%; + height: 100%; +} +.about-content object.active { + display: block; +} +.about-content iframe { + display: none; +} +@media screen and (max-width: 1024px) { + .about-content iframe.active { + display: block; + } +} .about-content figure { width: 37%; align-self: center; diff --git a/static/css/home.css b/static/css/home.css index b230927..03d9174 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -107,8 +107,8 @@ section .description p { #home .description { overflow-x: hidden; } -#home .description p, -#home .description button { +#home .description button, +#home .description p { position: relative; left: 0; opacity: 1; @@ -134,9 +134,9 @@ section .description p { #home .description button { transition-delay: 1000ms; } +#home .description.hide button, #home .description.hide h3, -#home .description.hide p, -#home .description.hide button { +#home .description.hide p { left: 10%; opacity: 0; } @@ -152,8 +152,7 @@ section .description p { @media screen and (max-width: 1024px) { #home button { display: block; - margin: 0 auto; - margin-bottom: 40px; + margin: 0 auto 40px; } } #home button .fas { @@ -167,19 +166,19 @@ section .description p { left: 10px; } -#home, -#about { +#about, +#home { position: relative; } @media screen and (max-width: 1024px) { - #home, -#about { + #about, +#home { padding-top: 100px; } } @media screen and (max-width: 1024px) { - #home h3, -#about h3 { + #about h3, +#home h3 { position: absolute; top: 35px; left: 50%; @@ -397,8 +396,8 @@ section .description p { height: 140px; overflow: hidden; } -#branches .owl-branches .owl-item-branches .description .person-name, -#branches .owl-branches .owl-item-branches .description .person-info { +#branches .owl-branches .owl-item-branches .description .person-info, +#branches .owl-branches .owl-item-branches .description .person-name { font-size: 14px; font-weight: bold; } @@ -590,8 +589,8 @@ section .description p { font-weight: bold; font-size: 16px; } -#contact .inner-container .description-container li address, -#contact .inner-container .description-container li .contact-content { +#contact .inner-container .description-container li .contact-content, +#contact .inner-container .description-container li address { width: 70%; } #contact .inner-container .description-container li .contact-content { @@ -654,13 +653,14 @@ section .description p { color: white; text-decoration: underline; font-size: 14px; - margin: 0 0 10px 0; + margin: 0 0 10px; } .toast ul li.highlight { animation: glow 1.5s infinite linear; font-weight: 600; font-size: 16px; } + @keyframes glow { 0% { color: white; diff --git a/static/css/loans.css b/static/css/loans.css index 663b1b3..543944c 100644 --- a/static/css/loans.css +++ b/static/css/loans.css @@ -69,11 +69,6 @@ .service-content object.active { display: block; } -@media screen and (max-width: 1024px) { - .service-content object.active { - display: none; - } -} .service-content iframe { display: none; } diff --git a/static/files/board_of_dir_2020.pdf b/static/files/board_of_dir_2020.pdf new file mode 100644 index 0000000..4fa2652 Binary files /dev/null and b/static/files/board_of_dir_2020.pdf differ diff --git a/static/scss/about.scss b/static/scss/about.scss index 24719f4..2c05ff6 100644 --- a/static/scss/about.scss +++ b/static/scss/about.scss @@ -54,7 +54,7 @@ @media screen and (max-width: 1024px) { width: 100%; } - + p { width: 100%; } @@ -68,7 +68,39 @@ font-size: $heading_size; font-family: archivo-black; color: $dark_brown; - } + } + } + } + + .scene-container { + overflow: hidden; + width: 37%; + background-color: $lightest_gray; + min-height: 50vh; + + @media screen and (max-width: 1023px) { + width: 100%; + } + } + + object { + overflow-x: hidden; + display: none; + width: 100%; + height: 100%; + + &.active { + display: block; + } + } + + iframe { + display: none; + + @media screen and (max-width: 1024px) { + &.active { + display: block; + } } } @@ -172,7 +204,7 @@ margin: 20px auto; text-align: center; padding: 20px 0; - + i { font-size: 16px; padding: 0 10px; @@ -180,4 +212,4 @@ cursor: pointer; } } -} \ No newline at end of file +} diff --git a/static/scss/home.scss b/static/scss/home.scss index e40ad5c..cf431b5 100644 --- a/static/scss/home.scss +++ b/static/scss/home.scss @@ -2,711 +2,690 @@ @import 'custom_fonts'; .temp-intro { - display: none; + display: none; } section { - - h3 { - font-size: $heading_size; - font-family: 'Archivo Black', sans-serif; - line-height: 1.2; - color: $dark_brown; - - @media screen and (max-width: 1024px) { - text-align: center; - } - - mark { - color: $blue; - } - } - - p { - color: $dark_gray; - font-size: $paragraph_size; - letter-spacing: 0.8px; - } - - figure { - width: 50%; - - img { - width: 100%; - height: 100%; - } - } - - .description { - width: 50%; - align-self: center; - - @media screen and (max-width: 1024px) { - width: 100%; - } - - p { - line-height: 1.8; - } - } + h3 { + font-size: $heading_size; + font-family: 'Archivo Black', sans-serif; + line-height: 1.2; + color: $dark_brown; + @media screen and (max-width: 1024px) { + text-align: center; + } + + mark { + color: $blue; + } + } + + p { + color: $dark_gray; + font-size: $paragraph_size; + letter-spacing: 0.8px; + } + + figure { + width: 50%; + + img { + width: 100%; + height: 100%; + } + } + + .description { + width: 50%; + align-self: center; + @media screen and (max-width: 1024px) { + width: 100%; + } + + p { + line-height: 1.8; + } + } } #home { - box-shadow: 0 8px 20px -6px $gray; - display: flex; - height: 80vh; - - @media screen and (max-width: 1024px) { - flex-direction: column; - } - - p { - padding: 30px 0; - width: 75%; - - @media screen and (max-width: 1024px) { - margin: 0 auto; - } - } - - figure { - opacity: 1; - transition: opacity 500ms ease; - text-align: center; - align-self: flex-end; - - @media screen and (max-width: 1024px) { - width: 100%; - margin-top: 30px; - } - - &.hide { - opacity: 0; - } - - img { - width: 90%; - } - } - - .description { - overflow-x: hidden; - - p, - button { - position: relative; - left: 0; - opacity: 1; - transition: left 500ms ease, opacity 500ms ease; - } - - h3 { - opacity: 1; - left: 0; - position: relative; - transition: left 500ms ease, opacity 500ms ease; - - @media screen and (max-width: 1024px) { - position: absolute; - left: 50%; - width: 100%; - transform: translateX(-50%); - } - } - - p { - transition-delay: 500ms; - } - - button { - transition-delay: 1000ms; - } - - - &.hide { - - h3, - p, - button { - left: 10%; - opacity: 0; - } - } - } - - button { - border: none; - background-color: $blue; - color: white; - padding: 20px 30px; - outline: none; - font-size: $paragraph_size; - cursor: pointer; - - @media screen and (max-width: 1024px) { - display: block; - margin: 0 auto; - margin-bottom: 40px; - } - - .fas { - padding-left: 12px; - font-size: 14px; - position: relative; - left: 0; - transition: left 500ms ease; - } - - &:hover { - - .fas { - left: 10px; - } - } - } + box-shadow: 0 8px 20px -6px $gray; + display: flex; + height: 80vh; + @media screen and (max-width: 1024px) { + flex-direction: column; + } + + p { + padding: 30px 0; + width: 75%; + @media screen and (max-width: 1024px) { + margin: 0 auto; + } + } + + figure { + opacity: 1; + transition: opacity 500ms ease; + text-align: center; + align-self: flex-end; + @media screen and (max-width: 1024px) { + width: 100%; + margin-top: 30px; + } + + &.hide { + opacity: 0; + } + + img { + width: 90%; + } + } + + .description { + overflow-x: hidden; + + button, + p { + position: relative; + left: 0; + opacity: 1; + transition: left 500ms ease, opacity 500ms ease; + } + + h3 { + opacity: 1; + left: 0; + position: relative; + transition: left 500ms ease, opacity 500ms ease; + @media screen and (max-width: 1024px) { + position: absolute; + left: 50%; + width: 100%; + transform: translateX(-50%); + } + } + + p { + transition-delay: 500ms; + } + + button { + transition-delay: 1000ms; + } + + &.hide { + button, + h3, + p { + left: 10%; + opacity: 0; + } + } + } + + button { + border: none; + background-color: $blue; + color: white; + padding: 20px 30px; + outline: none; + font-size: $paragraph_size; + cursor: pointer; + @media screen and (max-width: 1024px) { + display: block; + margin: 0 auto 40px; + } + + .fas { + padding-left: 12px; + font-size: 14px; + position: relative; + left: 0; + transition: left 500ms ease; + } + + &:hover { + .fas { + left: 10px; + } + } + } } -#home, -#about { - position: relative; - - @media screen and (max-width: 1024px) { - padding-top: 100px; - } - - h3 { - - @media screen and (max-width: 1024px) { - position: absolute; - top: 35px; - left: 50%; - transform: translateX(-50%); - width: 100%; - } - } +#about, +#home { + position: relative; + @media screen and (max-width: 1024px) { + padding-top: 100px; + } + + h3 { + @media screen and (max-width: 1024px) { + position: absolute; + top: 35px; + left: 50%; + transform: translateX(-50%); + width: 100%; + } + } } #about { - background-color: $lightest_gray; - display: block; - margin-bottom: 225px; - - @media screen and (max-width: 1024px) { - margin-bottom: 50px; - } - - .wrapper { - width: 85%; - margin: 0 auto; - display: flex; - justify-content: space-around; - - @media screen and (max-width: 1024px) { - flex-direction: column-reverse; - padding-bottom: 30px; - } - - a { - display: inline-block; - margin: 10px 0; - - button { - color: white; - padding: 10px 15px; - background-color: $blue; - border: none; - font-size: 16px; - cursor: pointer; - outline: none; - transition: background-color 500ms ease; - - &:hover { - background-color: $dark_brown; - } - } - } - } - - figure { - width: 35%; - position: relative; - left: 6%; - opacity: 0; - transition: left 1000ms ease, opacity 1000ms ease; - - &.show { - left: 0; - opacity: 1; - } - - @media screen and (max-width: 1024px) { - width: 100%; - display: block; - margin: 0 auto; - } - - img { - transform: scale(1.3); - top: 25%; - position: relative; - width: 100%; - - @media screen and (max-width: 1024px) { - transform: scale(1); - } - } - } - - .description { - opacity: 0; - transition: opacity 1000ms ease; - width: 55%; - - @media screen and (max-width: 1024px) { - width: 100%; - } - - &.show { - opacity: 1; - } - } - - p { - padding: 14px 0; - - // &:nth-of-type(1) { - // font-style: italic; - // font-weight: bold; - // color: black; - // } - } + background-color: $lightest_gray; + display: block; + margin-bottom: 225px; + @media screen and (max-width: 1024px) { + margin-bottom: 50px; + } + + .wrapper { + width: 85%; + margin: 0 auto; + display: flex; + justify-content: space-around; + @media screen and (max-width: 1024px) { + flex-direction: column-reverse; + padding-bottom: 30px; + } + + a { + display: inline-block; + margin: 10px 0; + + button { + color: white; + padding: 10px 15px; + background-color: $blue; + border: none; + font-size: 16px; + cursor: pointer; + outline: none; + transition: background-color 500ms ease; + + &:hover { + background-color: $dark_brown; + } + } + } + } + + figure { + width: 35%; + position: relative; + left: 6%; + opacity: 0; + transition: left 1000ms ease, opacity 1000ms ease; + + &.show { + left: 0; + opacity: 1; + } + @media screen and (max-width: 1024px) { + width: 100%; + display: block; + margin: 0 auto; + } + + img { + transform: scale(1.3); + top: 25%; + position: relative; + width: 100%; + @media screen and (max-width: 1024px) { + transform: scale(1); + } + } + } + + .description { + opacity: 0; + transition: opacity 1000ms ease; + width: 55%; + @media screen and (max-width: 1024px) { + width: 100%; + } + + &.show { + opacity: 1; + } + } + + p { + padding: 14px 0; + // &:nth-of-type(1) { + // font-style: italic; + // font-weight: bold; + // color: black; + // } + } } #service { - display: block; - - h3 { - text-align: center; - } - - p { - width: 50%; - margin: 0 auto; - text-align: center; - padding: 20px 0 40px; - line-height: 1.8; - - @media screen and (max-width: 1024px) { - width: 90%; - } - } - - .owl-service { - width: 82%; - margin: 30px auto 0; - display: block; - - @media screen and (max-width: 1024px) { - width: 100%; - } - - li { - list-style: none; - background-color: $lightest_gray; - width: 90%; - margin: 0 auto; - - .inner-contents { - padding-top: 20px; - - img { - width: 60px; - height: 60px; - display: block; - margin: 0 auto; - padding-top: 20px; - } - - p { - width: 90%; - margin: 0 auto; - font-size: 14px; - height: 20vh; - } - - .title { - text-align: center; - padding-top: 20px; - color: $dark_brown; - font-size: $other_size; - font-weight: bold; - } - } - } - } - - .service-carousel-btn { - margin: 20px auto; - text-align: center; - padding: 20px 0; - - i { - font-size: 16px; - padding: 0 10px; - color: $blue; - cursor: pointer; - } - } + display: block; + + h3 { + text-align: center; + } + + p { + width: 50%; + margin: 0 auto; + text-align: center; + padding: 20px 0 40px; + line-height: 1.8; + @media screen and (max-width: 1024px) { + width: 90%; + } + } + + .owl-service { + width: 82%; + margin: 30px auto 0; + display: block; + @media screen and (max-width: 1024px) { + width: 100%; + } + + li { + list-style: none; + background-color: $lightest_gray; + width: 90%; + margin: 0 auto; + + .inner-contents { + padding-top: 20px; + + img { + width: 60px; + height: 60px; + display: block; + margin: 0 auto; + padding-top: 20px; + } + + p { + width: 90%; + margin: 0 auto; + font-size: 14px; + height: 20vh; + } + + .title { + text-align: center; + padding-top: 20px; + color: $dark_brown; + font-size: $other_size; + font-weight: bold; + } + } + } + } + + .service-carousel-btn { + margin: 20px auto; + text-align: center; + padding: 20px 0; + + i { + font-size: 16px; + padding: 0 10px; + color: $blue; + cursor: pointer; + } + } } #branches { - background-color: $lightest_gray; - padding: 20px 0; - - h3 { - text-align: center; - padding: 20px 0; - } - - p { - text-align: center; - width: 50%; - margin: 0 auto; - - @media screen and (max-width: 1024px) { - width: 90%; - } - } - - .owl-branches { - width: 80%; - margin: 0 auto; - height: 55vh; - - @media screen and (max-width: 1024px) { - width: 100%; - } - - .owl-item-branches { - width: 97%; - background-color: white; - margin: 50px 0; - - @media screen and (max-width: 1024px) { - width: 90%; - margin: 50px auto; - } - - figure { - width: 100%; - height: 90%; - - img { - width: 100%; - height: 35vh; - object-fit: cover; - } - } - - .description { - margin: 0 20px; - padding: 10px 0; - width: 90%; - height: 140px; - overflow: hidden; - - .person-name, - .person-info { - font-size: $other_size; - font-weight: bold; - } - - .person-info { - padding: 2px 0; - color: $dark_gray; - } - - .person-name { - color: $blue; - text-transform: uppercase; - } - - } - } - } - - .branches-carousel-btn { - text-align: center; - padding-bottom: 30px; - position: relative; - z-index: 2; - padding-top: 85px; - - i { - padding: 10px; - background-color: $light_gray; - color: $brown; - margin: 0 0 0 12px; - cursor: pointer; - - @media screen and (max-width: 1024px) { - margin: 50px 0 0 12px; - } - } - } + background-color: $lightest_gray; + padding: 20px 0; + + h3 { + text-align: center; + padding: 20px 0; + } + + p { + text-align: center; + width: 50%; + margin: 0 auto; + @media screen and (max-width: 1024px) { + width: 90%; + } + } + + .owl-branches { + width: 80%; + margin: 0 auto; + height: 55vh; + @media screen and (max-width: 1024px) { + width: 100%; + } + + .owl-item-branches { + width: 97%; + background-color: white; + margin: 50px 0; + @media screen and (max-width: 1024px) { + width: 90%; + margin: 50px auto; + } + + figure { + width: 100%; + height: 90%; + + img { + width: 100%; + height: 35vh; + object-fit: cover; + } + } + + .description { + margin: 0 20px; + padding: 10px 0; + width: 90%; + height: 140px; + overflow: hidden; + + .person-info, + .person-name { + font-size: $other_size; + font-weight: bold; + } + + .person-info { + padding: 2px 0; + color: $dark_gray; + } + + .person-name { + color: $blue; + text-transform: uppercase; + } + } + } + } + + .branches-carousel-btn { + text-align: center; + padding-bottom: 30px; + position: relative; + z-index: 2; + padding-top: 85px; + + i { + padding: 10px; + background-color: $light_gray; + color: $brown; + margin: 0 0 0 12px; + cursor: pointer; + @media screen and (max-width: 1024px) { + margin: 50px 0 0 12px; + } + } + } } #enquiry { - background: linear-gradient($blue, $dark_blue); - - h3 { - text-align: center; - color: white; - padding: 60px 0 30px; - } - - p { - width: 50%; - margin: 0 auto; - text-align: center; - color: $white_shade; - line-height: 1.8; - - @media screen and (max-width: 1024px) { - width: 90%; - } - } - - form { - - fieldset { - border: none; - width: 35%; - margin: 0 auto; - padding: 30px 0; - - @media screen and (max-width: 1024px) { - width: 90%; - } - - input { - background-color: transparent; - border: 2px solid white; - padding: 8px 18px; - clear: both; - width: 48%; - margin: 10px 0; - - &:nth-child(even) { - float: right; - } - } - - ::-webkit-input-placeholder { - color: $white_shade; - - @media screen and (max-width: 1024px) { - padding-left: 13px; - } - } - - ::-moz-placeholder { - color: $white_shade; - - @media screen and (max-width: 1024px) { - padding-left: 13px; - } - } - - :-ms-input-placeholder { - color: $white_shade; - - @media screen and (max-width: 1024px) { - padding-left: 13px; - } - } - - :-moz-placeholder { - color: $white_shade; - - @media screen and (max-width: 1024px) { - padding-left: 13px; - } - } - - textarea { - background-color: transparent; - border: 2px solid white; - width: 100%; - padding: 8px; - font-family: open-sans; - } - - button { - display: block; - margin: 20px auto; - padding: 8px 18px; - width: 40%; - background-color: transparent; - border: none; - border: 2px solid white; - color: white; - font-size: $other_size; - } - } - } + background: linear-gradient($blue, $dark_blue); + + h3 { + text-align: center; + color: white; + padding: 60px 0 30px; + } + + p { + width: 50%; + margin: 0 auto; + text-align: center; + color: $white_shade; + line-height: 1.8; + @media screen and (max-width: 1024px) { + width: 90%; + } + } + + form { + fieldset { + border: none; + width: 35%; + margin: 0 auto; + padding: 30px 0; + @media screen and (max-width: 1024px) { + width: 90%; + } + + input { + background-color: transparent; + border: 2px solid white; + padding: 8px 18px; + clear: both; + width: 48%; + margin: 10px 0; + + &:nth-child(even) { + float: right; + } + } + + ::-webkit-input-placeholder { + color: $white_shade; + @media screen and (max-width: 1024px) { + padding-left: 13px; + } + } + + ::-moz-placeholder { + color: $white_shade; + @media screen and (max-width: 1024px) { + padding-left: 13px; + } + } + + :-ms-input-placeholder { + color: $white_shade; + @media screen and (max-width: 1024px) { + padding-left: 13px; + } + } + + :-moz-placeholder { + color: $white_shade; + @media screen and (max-width: 1024px) { + padding-left: 13px; + } + } + + textarea { + background-color: transparent; + border: 2px solid white; + width: 100%; + padding: 8px; + font-family: open-sans; + } + + button { + display: block; + margin: 20px auto; + padding: 8px 18px; + width: 40%; + background-color: transparent; + border: none; + border: 2px solid white; + color: white; + font-size: $other_size; + } + } + } } #contact { - padding: 30px 0; - - h3 { - text-align: center; - padding: 10px 0 20px; - } - - p { - width: 50%; - margin: 0 auto; - text-align: center; - line-height: 1.8; - - @media screen and (max-width: 1024px) { - width: 90%; - } - } - - .inner-container { - display: flex; - width: 80%; - margin: 40px auto; - padding: 20px 0; - justify-content: space-between; - - @media screen and (max-width: 1024px) { - flex-direction: column; - width: 90%; - } - - figure { - width: 60%; - - @media screen and (max-width: 1024px) { - width: 100%; - } - } - - .description-container { - width: 30%; - - @media screen and (max-width: 1024px) { - width: 100%; - } - - li { - display: flex; - justify-content: space-evenly; - padding: 15px 0; - - &:last-child { - a { - color: $blue; - } - } - - address { - font-size: $paragraph_size; - color: $brown; - font-family: open-sans; - font-style: normal; - line-height: 1.8; - } - - label { - color: $brown; - font-weight: bold; - font-size: $paragraph_size; - } - - address, - .contact-content { - width: 70%; - } - - .contact-content { - display: flex; - font-size: $paragraph_size; - - li { - color: $brown; - padding: 0 15px 0 0; - - i { - font-size: 18px; - } - } - } - } - } - } + padding: 30px 0; + + h3 { + text-align: center; + padding: 10px 0 20px; + } + + p { + width: 50%; + margin: 0 auto; + text-align: center; + line-height: 1.8; + @media screen and (max-width: 1024px) { + width: 90%; + } + } + + .inner-container { + display: flex; + width: 80%; + margin: 40px auto; + padding: 20px 0; + justify-content: space-between; + @media screen and (max-width: 1024px) { + flex-direction: column; + width: 90%; + } + + figure { + width: 60%; + @media screen and (max-width: 1024px) { + width: 100%; + } + } + + .description-container { + width: 30%; + @media screen and (max-width: 1024px) { + width: 100%; + } + + li { + display: flex; + justify-content: space-evenly; + padding: 15px 0; + + &:last-child { + a { + color: $blue; + } + } + + address { + font-size: $paragraph_size; + color: $brown; + font-family: open-sans; + font-style: normal; + line-height: 1.8; + } + + label { + color: $brown; + font-weight: bold; + font-size: $paragraph_size; + } + + .contact-content, + address { + width: 70%; + } + + .contact-content { + display: flex; + font-size: $paragraph_size; + + li { + color: $brown; + padding: 0 15px 0 0; + + i { + font-size: 18px; + } + } + } + } + } + } } - .toast { - position: fixed; - bottom: 0; - right: 0; - background-color: #403e41; - z-index: 10; - width: 300px; - height: 200px; - padding: 10px; - transition: transform 500ms ease; - overflow: auto; - - &.hide { - transform: translateY(145px); - - .close-toast { - transform: rotate(180deg); - } - } - - header { - font-size: 16px; - letter-spacing: 1px; - font-weight: bold; - padding: 10px 0; - text-align: center; - color: white; - } - - .close-toast { - position: absolute;; - top: 20px; - left: 10px; - color: white; - font-size: 30px; - cursor: pointer; - display: flex; - transition: tranform 500ms ease; - - - img { - width: 20px; - height: 20px; - } - } - - ul { - width: 80%; - margin: 0 auto; - - li { - color: white; - text-decoration: underline; - font-size: 14px; - margin: 0 0 10px 0; - } - } + position: fixed; + bottom: 0; + right: 0; + background-color: #403e41; + z-index: 10; + width: 300px; + height: 400px; + padding: 10px; + transition: transform 500ms ease; + overflow: auto; + + &.hide { + transform: translateY(345px); + + .close-toast { + transform: rotate(180deg); + } + } + + header { + font-size: 16px; + letter-spacing: 1px; + font-weight: bold; + padding: 10px 0; + text-align: center; + color: white; + } + + .close-toast { + position: absolute; + top: 20px; + left: 10px; + color: white; + font-size: 30px; + cursor: pointer; + display: flex; + transition: tranform 500ms ease; + + img { + width: 20px; + height: 20px; + } + } + + ul { + width: 80%; + margin: 0 auto; + + li { + color: white; + text-decoration: underline; + font-size: 14px; + margin: 0 0 10px; + + &.highlight { + animation: glow 1.5s infinite linear; + font-weight: 600; + font-size: 16px; + } + } + } +} +@keyframes glow { + 0% { + color: white; + } + + 50% { + color: #28aae2; + } + + 100% { + color: white; + } } diff --git a/static/scss/loans.scss b/static/scss/loans.scss index 61eabd2..a9ccc0d 100644 --- a/static/scss/loans.scss +++ b/static/scss/loans.scss @@ -48,10 +48,6 @@ &.active { display: block; - - @media screen and (max-width: 1024px) { - display: none; - } } } @@ -87,4 +83,4 @@ } } } -} \ No newline at end of file +} diff --git a/templates/about.html b/templates/about.html index 6ec6f81..2cfb5ef 100644 --- a/templates/about.html +++ b/templates/about.html @@ -11,9 +11,11 @@
-
- -
+
+ + + +
About BCB

Brief History

diff --git a/templates/deposit.html b/templates/deposit.html index 4b56ff0..d9aea78 100644 --- a/templates/deposit.html +++ b/templates/deposit.html @@ -23,4 +23,4 @@ {% block scripts %} -{% endblock scripts %} \ No newline at end of file +{% endblock scripts %} diff --git a/templates/loans.html b/templates/loans.html index d00be40..bccde60 100644 --- a/templates/loans.html +++ b/templates/loans.html @@ -47,4 +47,4 @@ {% block scripts %} -{% endblock scripts %} \ No newline at end of file +{% endblock scripts %}