diff --git a/.gitignore b/.gitignore index e15fcb1..8f676c0 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,4 @@ all_staticfiles/ *.zip static/uploaded/ node_modules/ - +virtualenv/ diff --git a/static/css/about.css b/static/css/about.css index 9fdfcdf..454fdd1 100644 --- a/static/css/about.css +++ b/static/css/about.css @@ -1,29 +1,24 @@ @font-face { src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype"); font-family: archivo-black; - font-style: normal; -} + font-style: normal; } @font-face { src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype"); font-family: open-sans; - font-weight: bolder; -} + font-weight: bolder; } @font-face { src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype"); font-family: open-sans; - font-weight: bold; -} + font-weight: bold; } @font-face { src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); font-family: open-sans; - font-style: normal; -} + font-style: normal; } @font-face { src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype"); font-family: open-sans; font-weight: normal; - font-style: italic; -} + font-style: italic; } .banner { height: 30vh; background-image: url("../images/cover-image.jpg"); @@ -31,158 +26,123 @@ background-repeat: no-repeat; display: flex; justify-content: center; - position: relative; -} -.banner:after { - content: ""; - width: 100%; - height: 100%; - position: absolute; - background-color: rgba(64, 62, 65, 0.6); -} -.banner h3 { - text-align: center; - align-self: center; - font-size: 36px; - color: white; - z-index: 1; -} + position: relative; } + .banner:after { + content: ''; + width: 100%; + height: 100%; + position: absolute; + background-color: rgba(64, 62, 65, 0.6); } + .banner h3 { + text-align: center; + align-self: center; + font-size: 36px; + color: white; + z-index: 1; } .about-content { margin: 50px auto; line-height: 1.8; letter-spacing: 0.8px; color: #808285; - border-bottom: 1px solid #f1f1f1; -} -.about-content .inner-container { - display: flex; - justify-content: space-between; - width: 90%; - margin: 0 auto; -} -@media screen and (max-width: 1024px) { + border-bottom: 1px solid #f1f1f1; } .about-content .inner-container { - flex-direction: column; - } -} -.about-content .inner-container .description { - width: 60%; - align-self: center; - display: flex; - justify-content: space-between; - flex-direction: column; -} -@media screen and (max-width: 1024px) { - .about-content .inner-container .description { - width: 100%; - } -} -.about-content .inner-container .description p { - width: 100%; -} -.about-content .inner-container .description mark { - color: #28aae2; -} -.about-content .inner-container .description .heading { - font-weight: bold; - font-size: 36px; - font-family: archivo-black; - color: #403e41; -} -.about-content figure { - width: 37%; - align-self: center; - display: flex; - height: 50vh; -} -@media screen and (max-width: 1024px) { + display: flex; + justify-content: space-between; + width: 90%; + margin: 0 auto; } + @media screen and (max-width: 1024px) { + .about-content .inner-container { + flex-direction: column; } } + .about-content .inner-container .description { + width: 60%; + align-self: center; + display: flex; + justify-content: space-between; + flex-direction: column; } + @media screen and (max-width: 1024px) { + .about-content .inner-container .description { + width: 100%; } } + .about-content .inner-container .description p { + width: 100%; } + .about-content .inner-container .description mark { + color: #28aae2; } + .about-content .inner-container .description .heading { + font-weight: bold; + font-size: 36px; + font-family: archivo-black; + color: #403e41; } .about-content figure { - width: 100%; - } -} -.about-content figure img { - width: 100%; - align-self: center; - height: 100%; - object-fit: cover; - object-position: top; -} -.about-content p { - width: 90%; - margin: 0 auto 0; - padding-bottom: 50px; -} -@media screen and (max-width: 1024px) { + width: 37%; + align-self: center; + display: flex; + height: 50vh; } + @media screen and (max-width: 1024px) { + .about-content figure { + width: 100%; } } + .about-content figure img { + width: 100%; + align-self: center; + height: 100%; + object-fit: cover; + object-position: top; } .about-content p { - margin: 0 auto; - } -} -.about-content .features { - width: 90%; - margin: 20px auto; -} -.about-content .features h3 { - margin-bottom: 10px; -} -.about-content .features p { - width: 100%; - padding: 0; -} -.about-content .features ul { - margin-bottom: 20px; - margin-left: 30px; -} + width: 90%; + margin: 0 auto 0; + padding-bottom: 50px; } + @media screen and (max-width: 1024px) { + .about-content p { + margin: 0 auto; } } + .about-content .features { + width: 90%; + margin: 20px auto; } + .about-content .features h3 { + margin-bottom: 10px; } + .about-content .features p { + width: 100%; + padding: 0; } + .about-content .features ul { + margin-bottom: 20px; + margin-left: 30px; } #our-team { width: 90%; - margin: 30px auto 100px; -} -#our-team h3 { - font-size: 36px; - color: #403e41; - text-align: center; - font-family: archivo-black; -} -#our-team h3 marked { - color: #28aae2; - display: inline; -} -#our-team marked { - color: #28aae2; - padding: 10px 0 0; - text-align: center; - display: block; - font-weight: bold; -} -#our-team .owl-team { - margin: 50px 0; -} -#our-team .section-container { - margin: 0 20px; -} -#our-team figure { - width: 100%; - display: block; - margin: 0 auto; -} -#our-team figure img { - width: 100%; -} -#our-team p { - text-align: center; - margin-top: 10px; -} -#our-team .owl-team-btn { - margin: 20px auto; - text-align: center; - padding: 20px 0; -} -#our-team .owl-team-btn i { - font-size: 16px; - padding: 0 10px; - color: #28aae2; - cursor: pointer; -} + margin: 30px auto 100px; } + #our-team h3 { + font-size: 36px; + color: #403e41; + text-align: center; + font-family: archivo-black; } + #our-team h3 marked { + color: #28aae2; + display: inline; } + #our-team marked { + color: #28aae2; + padding: 10px 0 0; + text-align: center; + display: block; + font-weight: bold; } + #our-team .owl-team { + margin: 50px 0; } + #our-team .section-container { + margin: 0 20px; } + #our-team figure { + width: 100%; + display: block; + margin: 0 auto; } + #our-team figure img { + width: 100%; } + #our-team p { + text-align: center; + margin-top: 10px; } + #our-team .owl-team-btn { + margin: 20px auto; + text-align: center; + padding: 20px 0; } + #our-team .owl-team-btn i { + font-size: 16px; + padding: 0 10px; + color: #28aae2; + cursor: pointer; } /*# sourceMappingURL=about.css.map */ diff --git a/static/css/common.css b/static/css/common.css index c3aaa1f..8ce37ba 100644 --- a/static/css/common.css +++ b/static/css/common.css @@ -1,55 +1,44 @@ @font-face { src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype"); font-family: archivo-black; - font-style: normal; -} + font-style: normal; } @font-face { src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype"); font-family: open-sans; - font-weight: bolder; -} + font-weight: bolder; } @font-face { src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype"); font-family: open-sans; - font-weight: bold; -} + font-weight: bold; } @font-face { src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); font-family: open-sans; - font-style: normal; -} + font-style: normal; } @font-face { src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype"); font-family: open-sans; font-weight: normal; - font-style: italic; -} + font-style: italic; } *, *:before, *:after { -webkit-tap-highlight-color: transparent; - box-sizing: border-box; -} + box-sizing: border-box; } * { margin: 0; padding: 0; - box-sizing: border-box; -} + box-sizing: border-box; } a { color: inherit; - text-decoration: none; -} + text-decoration: none; } html, body { - font-family: open-sans; -} -html.non-scrollable, body.non-scrollable { - overflow: hidden; -} + font-family: open-sans; } + html.non-scrollable, body.non-scrollable { + overflow: hidden; } mark { - background-color: transparent; -} + background-color: transparent; } .temp-intro, .temp-intro-home, @@ -59,97 +48,76 @@ mark { justify-content: space-between; padding: 15px 0; color: #808285; - font-size: 14px; -} -.temp-intro .temp-name, -.temp-intro-home .temp-name, -#footer .temp-name { - margin-left: 125px; -} -@media screen and (max-width: 1024px) { + font-size: 14px; } .temp-intro .temp-name, -.temp-intro-home .temp-name, -#footer .temp-name { - margin-left: 20px; - } -} -.temp-intro .temp-name mark, -.temp-intro-home .temp-name mark, -#footer .temp-name mark { - color: white; - font-weight: bold; - letter-spacing: 0.8px; -} -.temp-intro .temp-social, -.temp-intro-home .temp-social, -#footer .temp-social { - display: flex; - margin-right: 125px; -} -@media screen and (max-width: 1024px) { + .temp-intro-home .temp-name, + #footer .temp-name { + margin-left: 125px; } + @media screen and (max-width: 1024px) { + .temp-intro .temp-name, + .temp-intro-home .temp-name, + #footer .temp-name { + margin-left: 20px; } } + .temp-intro .temp-name mark, + .temp-intro-home .temp-name mark, + #footer .temp-name mark { + color: white; + font-weight: bold; + letter-spacing: 0.8px; } .temp-intro .temp-social, -.temp-intro-home .temp-social, -#footer .temp-social { - margin-right: 20px; - } -} -.temp-intro .temp-social li, -.temp-intro-home .temp-social li, -#footer .temp-social li { - list-style: none; - align-self: center; - padding: 0 10px; - font-size: 12px; -} -.temp-intro small, -.temp-intro-home small, -#footer small { - font-size: 14px; -} -@media screen and (max-width: 1024px) { + .temp-intro-home .temp-social, + #footer .temp-social { + display: flex; + margin-right: 125px; } + @media screen and (max-width: 1024px) { + .temp-intro .temp-social, + .temp-intro-home .temp-social, + #footer .temp-social { + margin-right: 20px; } } + .temp-intro .temp-social li, + .temp-intro-home .temp-social li, + #footer .temp-social li { + list-style: none; + align-self: center; + padding: 0 10px; + font-size: 12px; } .temp-intro small, -.temp-intro-home small, -#footer small { - display: block; - text-align: center; - padding: 5px 0; - } -} -.temp-intro small:first-child, -.temp-intro-home small:first-child, -#footer small:first-child { - margin-left: 125px; -} -@media screen and (max-width: 1024px) { - .temp-intro small:first-child, -.temp-intro-home small:first-child, -#footer small:first-child { - margin: 0; - } -} -.temp-intro small:last-child, -.temp-intro-home small:last-child, -#footer small:last-child { - margin-right: 125px; -} -@media screen and (max-width: 1024px) { - .temp-intro small:last-child, -.temp-intro-home small:last-child, -#footer small:last-child { - margin: 0; - } -} -.temp-intro small mark, -.temp-intro-home small mark, -#footer small mark { - color: #d2d4d5; -} + .temp-intro-home small, + #footer small { + font-size: 14px; } + @media screen and (max-width: 1024px) { + .temp-intro small, + .temp-intro-home small, + #footer small { + display: block; + text-align: center; + padding: 5px 0; } } + .temp-intro small:first-child, + .temp-intro-home small:first-child, + #footer small:first-child { + margin-left: 125px; } + @media screen and (max-width: 1024px) { + .temp-intro small:first-child, + .temp-intro-home small:first-child, + #footer small:first-child { + margin: 0; } } + .temp-intro small:last-child, + .temp-intro-home small:last-child, + #footer small:last-child { + margin-right: 125px; } + @media screen and (max-width: 1024px) { + .temp-intro small:last-child, + .temp-intro-home small:last-child, + #footer small:last-child { + margin: 0; } } + .temp-intro small mark, + .temp-intro-home small mark, + #footer small mark { + color: #d2d4d5; } @media screen and (max-width: 1024px) { #footer { - display: block; - } -} + display: block; } } #page-header { height: 20vh; @@ -159,243 +127,181 @@ mark { left: 0; background-color: white; z-index: 100; - transition: height 500ms linear; -} -@media screen and (max-width: 1024px) { - #page-header { + transition: height 500ms linear; } + @media screen and (max-width: 1024px) { + #page-header { + height: 10vh; } } + #page-header.minimize { height: 10vh; - } -} -#page-header.minimize { - height: 10vh; - padding: 10px 0; -} -#page-header .inner-header { - width: 90%; - display: flex; - justify-content: space-between; - margin: 0 auto; - align-self: center; -} -@media screen and (max-width: 1024px) { + padding: 10px 0; } #page-header .inner-header { - width: 100%; - justify-content: none; - } -} -#page-header .temp-brand { - display: flex; - align-self: center; - width: auto; - justify-content: center; - cursor: pointer; -} -@media screen and (max-width: 1024px) { + width: 90%; + display: flex; + justify-content: space-between; + margin: 0 auto; + align-self: center; } + @media screen and (max-width: 1024px) { + #page-header .inner-header { + width: 100%; + justify-content: none; } } #page-header .temp-brand { - justify-content: unset; - width: calc(100% -55px); - } -} -#page-header .temp-brand figure { - margin-right: 15px; - width: 60px; - height: 60px; -} -#page-header .temp-brand figure img { - width: 100%; - height: 100%; -} -#page-header .temp-brand h1 { - font-size: 20px; - align-self: center; - letter-spacing: -0.65px; - font-family: "Archivo Black", sans-serif; -} -@media screen and (max-width: 1024px) { - #page-header .temp-brand h1 { - font-size: 15px; - } -} -#page-header .temp-brand h1 mark { - color: #28aae2; -} -#page-header #desktop-navigation-menu { - width: 55%; - align-self: center; - font-size: 16px; -} -@media screen and (max-width: 1024px) { + display: flex; + align-self: center; + width: auto; + justify-content: center; + cursor: pointer; } + @media screen and (max-width: 1024px) { + #page-header .temp-brand { + justify-content: unset; + width: calc(100% -55px); } } + #page-header .temp-brand figure { + margin-right: 15px; + width: 60px; + height: 60px; } + #page-header .temp-brand figure img { + width: 100%; + height: 100%; } + #page-header .temp-brand h1 { + font-size: 20px; + align-self: center; + letter-spacing: -0.65px; + font-family: 'Archivo Black', sans-serif; } + @media screen and (max-width: 1024px) { + #page-header .temp-brand h1 { + font-size: 15px; } } + #page-header .temp-brand h1 mark { + color: #28aae2; } #page-header #desktop-navigation-menu { - display: none; - } -} -#page-header #desktop-navigation-menu ul { - display: flex; - justify-content: space-between; -} -#page-header #desktop-navigation-menu ul li { - list-style: none; - color: #808285; -} -#page-header #desktop-navigation-menu ul li.active { - color: #28aae2; -} -#page-header #mobile-hamburger-menu { - display: none; - position: relative; - height: 25px; -} -@media screen and (max-width: 1024px) { - #page-header #mobile-hamburger-menu { - width: 45px; - } -} -#page-header #mobile-hamburger-menu.active .icon-line { - transform: rotate(45deg) translate(2px, 10px); -} -#page-header #mobile-hamburger-menu.active .icon-line:after { - transform: rotate(-95deg) translate(20px, 2px); -} -#page-header #mobile-hamburger-menu.active .icon-line:before { - opacity: 0; -} -@media screen and (max-width: 1024px) { - #page-header #mobile-hamburger-menu { - display: block; + width: 55%; align-self: center; - } -} -#page-header #mobile-hamburger-menu .icon-line { - display: inline-block; - width: 35px; - height: 5px; - background-color: black; - position: absolute; - transition: transform 500ms ease; -} -#page-header #mobile-hamburger-menu .icon-line:before, #page-header #mobile-hamburger-menu .icon-line:after { - content: ""; - display: inline-block; - width: 35px; - height: 5px; - position: absolute; -} -#page-header #mobile-hamburger-menu .icon-line:before { - top: 200%; - background-color: #28aae2; - transition: opacity 500ms ease; -} -#page-header #mobile-hamburger-menu .icon-line:after { - top: 400%; - background-color: black; - transition: transform 500ms ease; -} + font-size: 16px; } + @media screen and (max-width: 1024px) { + #page-header #desktop-navigation-menu { + display: none; } } + #page-header #desktop-navigation-menu ul { + display: flex; + justify-content: space-between; } + #page-header #desktop-navigation-menu ul li { + list-style: none; + color: #808285; } + #page-header #desktop-navigation-menu ul li.active { + color: #28aae2; } + #page-header #mobile-hamburger-menu { + display: none; + position: relative; + height: 25px; } + @media screen and (max-width: 1024px) { + #page-header #mobile-hamburger-menu { + width: 45px; } } + #page-header #mobile-hamburger-menu.active .icon-line { + transform: rotate(45deg) translate(2px, 10px); } + #page-header #mobile-hamburger-menu.active .icon-line:after { + transform: rotate(-95deg) translate(20px, 2px); } + #page-header #mobile-hamburger-menu.active .icon-line:before { + opacity: 0; } + @media screen and (max-width: 1024px) { + #page-header #mobile-hamburger-menu { + display: block; + align-self: center; } } + #page-header #mobile-hamburger-menu .icon-line { + display: inline-block; + width: 35px; + height: 5px; + background-color: black; + position: absolute; + transition: transform 500ms ease; } + #page-header #mobile-hamburger-menu .icon-line:before, #page-header #mobile-hamburger-menu .icon-line:after { + content: ''; + display: inline-block; + width: 35px; + height: 5px; + position: absolute; } + #page-header #mobile-hamburger-menu .icon-line:before { + top: 200%; + background-color: #28aae2; + transition: opacity 500ms ease; } + #page-header #mobile-hamburger-menu .icon-line:after { + top: 400%; + background-color: black; + transition: transform 500ms ease; } #mobile-nav-menu { - display: none; -} -@media screen and (max-width: 1024px) { - #mobile-nav-menu { - display: block; - height: 0; - overflow: hidden; - position: sticky; - top: 10vh; - z-index: 5; - background-color: white; - transition: height 500ms ease; - } - #mobile-nav-menu.show { - height: 90vh; - } - #mobile-nav-menu.show ul { - margin-top: 50px; - } - #mobile-nav-menu.show li { - opacity: 1; - } - #mobile-nav-menu ul li { - list-style: none; - font-size: 36px; - text-align: center; - padding: 10px 0; - opacity: 0; - transition: opacity 500ms ease; - } -} + display: none; } + @media screen and (max-width: 1024px) { + #mobile-nav-menu { + display: block; + height: 0; + overflow: hidden; + position: sticky; + top: 10vh; + z-index: 5; + background-color: white; + transition: height 500ms ease; } + #mobile-nav-menu.show { + height: 90vh; } + #mobile-nav-menu.show ul { + margin-top: 50px; } + #mobile-nav-menu.show li { + opacity: 1; } + #mobile-nav-menu ul li { + list-style: none; + font-size: 36px; + text-align: center; + padding: 10px 0; + opacity: 0; + transition: opacity 500ms ease; } } .temp-contact-info { background-color: #fafafa; border-top: 1px solid #d2d4d5; - color: #57595b; -} -.temp-contact-info ul { - display: flex; - width: 80%; - margin: 0 auto; -} -@media screen and (max-width: 1024px) { + color: #57595b; } .temp-contact-info ul { - width: 100%; - } -} -.temp-contact-info ul .owl-item img { - width: 10%; -} -.temp-contact-info ul li { - list-style: none; - border-left: 2px solid #d2d4d5; - font-size: 14px; - display: flex; - justify-content: center; - width: 35%; - padding: 20px 0; -} -@media screen and (max-width: 1024px) { - .temp-contact-info ul li { - width: 40%; - } - .temp-contact-info ul li .contact-content { - display: none; - } - .temp-contact-info ul li img { - width: 35%; - } - .temp-contact-info ul li.active { - width: 100%; - } - .temp-contact-info ul li.active img { - width: 10%; - } - .temp-contact-info ul li.active .contact-content { - display: block; - } -} -.temp-contact-info ul li:last-child { - border-right: 2px solid #d2d4d5; -} -.temp-contact-info ul li img { - width: 10%; - align-self: center; -} -@media screen and (max-width: 1024px) { - .temp-contact-info ul li img { - width: 30%; - } -} -.temp-contact-info ul li .contact-content { - margin-left: 20px; - color: #808285; -} -.temp-contact-info ul li .contact-content span { - display: block; -} -.temp-contact-info ul li .contact-content span:last-child { - color: #28aae2; -} -.temp-contact-info ul li .contact-content a { - display: block; - color: #28aae2; -} + display: flex; + width: 80%; + margin: 0 auto; } + @media screen and (max-width: 1024px) { + .temp-contact-info ul { + width: 100%; } } + .temp-contact-info ul .owl-item img { + width: 10%; } + .temp-contact-info ul li { + list-style: none; + border-left: 2px solid #d2d4d5; + font-size: 14px; + display: flex; + justify-content: center; + width: 35%; + padding: 20px 0; } + @media screen and (max-width: 1024px) { + .temp-contact-info ul li { + width: 40%; } + .temp-contact-info ul li .contact-content { + display: none; } + .temp-contact-info ul li img { + width: 35%; } + .temp-contact-info ul li.active { + width: 100%; } + .temp-contact-info ul li.active img { + width: 10%; } + .temp-contact-info ul li.active .contact-content { + display: block; } } + .temp-contact-info ul li:last-child { + border-right: 2px solid #d2d4d5; } + .temp-contact-info ul li img { + width: 10%; + align-self: center; } + @media screen and (max-width: 1024px) { + .temp-contact-info ul li img { + width: 30%; } } + .temp-contact-info ul li .contact-content { + margin-left: 20px; + color: #808285; } + .temp-contact-info ul li .contact-content span { + display: block; } + .temp-contact-info ul li .contact-content span:last-child { + color: #28aae2; } + .temp-contact-info ul li .contact-content a { + display: block; + color: #28aae2; } /*# sourceMappingURL=common.css.map */ diff --git a/static/css/home.css b/static/css/home.css index 2545500..a50700a 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -1,610 +1,461 @@ @font-face { src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype"); font-family: archivo-black; - font-style: normal; -} + font-style: normal; } @font-face { src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype"); font-family: open-sans; - font-weight: bolder; -} + font-weight: bolder; } @font-face { src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype"); font-family: open-sans; - font-weight: bold; -} + font-weight: bold; } @font-face { src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); font-family: open-sans; - font-style: normal; -} + font-style: normal; } @font-face { src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype"); font-family: open-sans; font-weight: normal; - font-style: italic; -} + font-style: italic; } .temp-intro { - display: none; -} + display: none; } section h3 { font-size: 36px; - font-family: "Archivo Black", sans-serif; + font-family: 'Archivo Black', sans-serif; line-height: 1.2; - color: #403e41; -} -@media screen and (max-width: 1024px) { - section h3 { - text-align: center; - } -} -section h3 mark { - color: #28aae2; -} + color: #403e41; } + @media screen and (max-width: 1024px) { + section h3 { + text-align: center; } } + section h3 mark { + color: #28aae2; } section p { color: #808285; font-size: 16px; - letter-spacing: 0.8px; -} + letter-spacing: 0.8px; } section figure { - width: 50%; -} -section figure img { - width: 100%; - height: 100%; -} + width: 50%; } + section figure img { + width: 100%; + height: 100%; } section .description { width: 50%; - align-self: center; -} -@media screen and (max-width: 1024px) { - section .description { - width: 100%; - } -} -section .description p { - line-height: 1.8; -} + align-self: center; } + @media screen and (max-width: 1024px) { + section .description { + width: 100%; } } + section .description p { + line-height: 1.8; } #home { box-shadow: 0 8px 20px -6px #a6a8ab; display: flex; - height: 80vh; -} -@media screen and (max-width: 1024px) { - #home { - flex-direction: column; - } -} -#home p { - padding: 30px 0; - width: 75%; -} -@media screen and (max-width: 1024px) { + height: 80vh; } + @media screen and (max-width: 1024px) { + #home { + flex-direction: column; } } #home p { - margin: 0 auto; - } -} -#home figure { - opacity: 1; - transition: opacity 500ms ease; - text-align: center; - align-self: flex-end; -} -@media screen and (max-width: 1024px) { + padding: 30px 0; + width: 75%; } + @media screen and (max-width: 1024px) { + #home p { + margin: 0 auto; } } #home figure { - width: 100%; - margin-top: 30px; - } -} -#home figure.hide { - opacity: 0; -} -#home figure img { - width: 90%; -} -#home .description { - overflow-x: hidden; -} -#home .description p, -#home .description button { - position: relative; - left: 0; - opacity: 1; - transition: left 500ms ease, opacity 500ms ease; -} -#home .description h3 { - opacity: 1; - left: 0; - position: relative; - transition: left 500ms ease, opacity 500ms ease; -} -@media screen and (max-width: 1024px) { - #home .description h3 { - position: absolute; - left: 50%; - width: 100%; - transform: translateX(-50%); - } -} -#home .description p { - transition-delay: 500ms; -} -#home .description button { - transition-delay: 1000ms; -} -#home .description.hide h3, -#home .description.hide p, -#home .description.hide button { - left: 10%; - opacity: 0; -} -#home button { - border: none; - background-color: #28aae2; - color: white; - padding: 20px 30px; - outline: none; - font-size: 16px; - cursor: pointer; -} -@media screen and (max-width: 1024px) { + opacity: 1; + transition: opacity 500ms ease; + text-align: center; + align-self: flex-end; } + @media screen and (max-width: 1024px) { + #home figure { + width: 100%; + margin-top: 30px; } } + #home figure.hide { + opacity: 0; } + #home figure img { + width: 90%; } + #home .description { + overflow-x: hidden; } + #home .description p, + #home .description button { + position: relative; + left: 0; + opacity: 1; + transition: left 500ms ease, opacity 500ms ease; } + #home .description h3 { + opacity: 1; + left: 0; + position: relative; + transition: left 500ms ease, opacity 500ms ease; } + @media screen and (max-width: 1024px) { + #home .description h3 { + position: absolute; + left: 50%; + width: 100%; + transform: translateX(-50%); } } + #home .description p { + transition-delay: 500ms; } + #home .description button { + transition-delay: 1000ms; } + #home .description.hide h3, + #home .description.hide p, + #home .description.hide button { + left: 10%; + opacity: 0; } #home button { - display: block; - margin: 0 auto; - margin-bottom: 40px; - } -} -#home button .fas { - padding-left: 12px; - font-size: 14px; - position: relative; - left: 0; - transition: left 500ms ease; -} -#home button:hover .fas { - left: 10px; -} + border: none; + background-color: #28aae2; + color: white; + padding: 20px 30px; + outline: none; + font-size: 16px; + cursor: pointer; } + @media screen and (max-width: 1024px) { + #home button { + display: block; + margin: 0 auto; + margin-bottom: 40px; } } + #home button .fas { + padding-left: 12px; + font-size: 14px; + position: relative; + left: 0; + transition: left 500ms ease; } + #home button:hover .fas { + left: 10px; } #home, #about { - position: relative; -} -@media screen and (max-width: 1024px) { - #home, -#about { - padding-top: 100px; - } -} -@media screen and (max-width: 1024px) { - #home h3, -#about h3 { - position: absolute; - top: 35px; - left: 50%; - transform: translateX(-50%); - width: 100%; - } -} + position: relative; } + @media screen and (max-width: 1024px) { + #home, + #about { + padding-top: 100px; } } + @media screen and (max-width: 1024px) { + #home h3, + #about h3 { + position: absolute; + top: 35px; + left: 50%; + transform: translateX(-50%); + width: 100%; } } #about { background-color: #f0f0f0; display: block; - margin-bottom: 225px; -} -@media screen and (max-width: 1024px) { - #about { - margin-bottom: 50px; - } -} -#about .wrapper { - width: 85%; - margin: 0 auto; - display: flex; - justify-content: space-around; -} -@media screen and (max-width: 1024px) { + margin-bottom: 225px; } + @media screen and (max-width: 1024px) { + #about { + margin-bottom: 50px; } } #about .wrapper { - flex-direction: column-reverse; - padding-bottom: 30px; - } -} -#about .wrapper a { - display: inline-block; - margin: 10px 0; -} -#about .wrapper a button { - color: white; - padding: 10px 15px; - background-color: #28aae2; - border: none; - font-size: 16px; - cursor: pointer; - outline: none; - transition: background-color 500ms ease; -} -#about .wrapper a button:hover { - background-color: #403e41; -} -#about figure { - width: 35%; - position: relative; - left: 6%; - opacity: 0; - transition: left 1000ms ease, opacity 1000ms ease; -} -#about figure.show { - left: 0; - opacity: 1; -} -@media screen and (max-width: 1024px) { - #about figure { - width: 100%; - display: block; + width: 85%; margin: 0 auto; - } -} -#about figure img { - transform: scale(1.3); - top: 25%; - position: relative; - width: 100%; -} -@media screen and (max-width: 1024px) { - #about figure img { - transform: scale(1); - } -} -#about .description { - opacity: 0; - transition: opacity 1000ms ease; - width: 55%; -} -@media screen and (max-width: 1024px) { + display: flex; + justify-content: space-around; } + @media screen and (max-width: 1024px) { + #about .wrapper { + flex-direction: column-reverse; + padding-bottom: 30px; } } + #about .wrapper a { + display: inline-block; + margin: 10px 0; } + #about .wrapper a button { + color: white; + padding: 10px 15px; + background-color: #28aae2; + border: none; + font-size: 16px; + cursor: pointer; + outline: none; + transition: background-color 500ms ease; } + #about .wrapper a button:hover { + background-color: #403e41; } + #about figure { + width: 35%; + position: relative; + left: 6%; + opacity: 0; + transition: left 1000ms ease, opacity 1000ms ease; } + #about figure.show { + left: 0; + opacity: 1; } + @media screen and (max-width: 1024px) { + #about figure { + width: 100%; + display: block; + margin: 0 auto; } } + #about figure img { + transform: scale(1.3); + top: 25%; + position: relative; + width: 100%; } + @media screen and (max-width: 1024px) { + #about figure img { + transform: scale(1); } } #about .description { - width: 100%; - } -} -#about .description.show { - opacity: 1; -} -#about p { - padding: 14px 0; -} + opacity: 0; + transition: opacity 1000ms ease; + width: 55%; } + @media screen and (max-width: 1024px) { + #about .description { + width: 100%; } } + #about .description.show { + opacity: 1; } + #about p { + padding: 14px 0; } #service { - display: block; -} -#service h3 { - text-align: center; -} -#service p { - width: 50%; - margin: 0 auto; - text-align: center; - padding: 20px 0 40px; - line-height: 1.8; -} -@media screen and (max-width: 1024px) { + display: block; } + #service h3 { + text-align: center; } #service p { - width: 90%; - } -} -#service .owl-service { - width: 82%; - margin: 30px auto 0; - display: block; -} -@media screen and (max-width: 1024px) { + width: 50%; + margin: 0 auto; + text-align: center; + padding: 20px 0 40px; + line-height: 1.8; } + @media screen and (max-width: 1024px) { + #service p { + width: 90%; } } #service .owl-service { - width: 100%; - } -} -#service .owl-service li { - list-style: none; - background-color: #f0f0f0; - width: 90%; - margin: 0 auto; -} -#service .owl-service li .inner-contents { - padding-top: 20px; -} -#service .owl-service li .inner-contents img { - width: 60px; - height: 60px; - display: block; - margin: 0 auto; - padding-top: 20px; -} -#service .owl-service li .inner-contents p { - width: 90%; - margin: 0 auto; - font-size: 14px; - height: 20vh; -} -#service .owl-service li .inner-contents .title { - text-align: center; - padding-top: 20px; - color: #403e41; - font-size: 14px; - font-weight: bold; -} -#service .service-carousel-btn { - margin: 20px auto; - text-align: center; - padding: 20px 0; -} -#service .service-carousel-btn i { - font-size: 16px; - padding: 0 10px; - color: #28aae2; - cursor: pointer; -} + width: 82%; + margin: 30px auto 0; + display: block; } + @media screen and (max-width: 1024px) { + #service .owl-service { + width: 100%; } } + #service .owl-service li { + list-style: none; + background-color: #f0f0f0; + width: 90%; + margin: 0 auto; } + #service .owl-service li .inner-contents { + padding-top: 20px; } + #service .owl-service li .inner-contents img { + width: 60px; + height: 60px; + display: block; + margin: 0 auto; + padding-top: 20px; } + #service .owl-service li .inner-contents p { + width: 90%; + margin: 0 auto; + font-size: 14px; + height: 20vh; } + #service .owl-service li .inner-contents .title { + text-align: center; + padding-top: 20px; + color: #403e41; + font-size: 14px; + font-weight: bold; } + #service .service-carousel-btn { + margin: 20px auto; + text-align: center; + padding: 20px 0; } + #service .service-carousel-btn i { + font-size: 16px; + padding: 0 10px; + color: #28aae2; + cursor: pointer; } #branches { background-color: #f0f0f0; - padding: 20px 0; -} -#branches h3 { - text-align: center; - padding: 20px 0; -} -#branches p { - text-align: center; - width: 50%; - margin: 0 auto; -} -@media screen and (max-width: 1024px) { + padding: 20px 0; } + #branches h3 { + text-align: center; + padding: 20px 0; } #branches p { - width: 90%; - } -} -#branches .owl-branches { - width: 80%; - margin: 0 auto; - height: 55vh; -} -@media screen and (max-width: 1024px) { + text-align: center; + width: 50%; + margin: 0 auto; } + @media screen and (max-width: 1024px) { + #branches p { + width: 90%; } } #branches .owl-branches { - width: 100%; - } -} -#branches .owl-branches .owl-item-branches { - width: 97%; - background-color: white; - margin: 50px 0; -} -@media screen and (max-width: 1024px) { - #branches .owl-branches .owl-item-branches { - width: 90%; - margin: 50px auto; - } -} -#branches .owl-branches .owl-item-branches figure { - width: 100%; - height: 90%; -} -#branches .owl-branches .owl-item-branches figure img { - width: 100%; - height: 35vh; - object-fit: cover; -} -#branches .owl-branches .owl-item-branches .description { - margin: 0 20px; - padding: 10px 0; - width: 90%; - height: 140px; - overflow: hidden; -} -#branches .owl-branches .owl-item-branches .description .person-name, -#branches .owl-branches .owl-item-branches .description .person-info { - font-size: 14px; - font-weight: bold; -} -#branches .owl-branches .owl-item-branches .description .person-info { - padding: 2px 0; - color: #808285; -} -#branches .owl-branches .owl-item-branches .description .person-name { - color: #28aae2; - text-transform: uppercase; -} -#branches .branches-carousel-btn { - text-align: center; - padding-bottom: 30px; - position: relative; - z-index: 2; - padding-top: 85px; -} -#branches .branches-carousel-btn i { - padding: 10px; - background-color: #d2d4d5; - color: #57595b; - margin: 0 0 0 12px; - cursor: pointer; -} -@media screen and (max-width: 1024px) { - #branches .branches-carousel-btn i { - margin: 50px 0 0 12px; - } -} + width: 80%; + margin: 0 auto; + height: 55vh; } + @media screen and (max-width: 1024px) { + #branches .owl-branches { + width: 100%; } } + #branches .owl-branches .owl-item-branches { + width: 97%; + background-color: white; + margin: 50px 0; } + @media screen and (max-width: 1024px) { + #branches .owl-branches .owl-item-branches { + width: 90%; + margin: 50px auto; } } + #branches .owl-branches .owl-item-branches figure { + width: 100%; + height: 90%; } + #branches .owl-branches .owl-item-branches figure img { + width: 100%; + height: 35vh; + object-fit: cover; } + #branches .owl-branches .owl-item-branches .description { + margin: 0 20px; + padding: 10px 0; + width: 90%; + height: 140px; + overflow: hidden; } + #branches .owl-branches .owl-item-branches .description .person-name, + #branches .owl-branches .owl-item-branches .description .person-info { + font-size: 14px; + font-weight: bold; } + #branches .owl-branches .owl-item-branches .description .person-info { + padding: 2px 0; + color: #808285; } + #branches .owl-branches .owl-item-branches .description .person-name { + color: #28aae2; + text-transform: uppercase; } + #branches .branches-carousel-btn { + text-align: center; + padding-bottom: 30px; + position: relative; + z-index: 2; + padding-top: 85px; } + #branches .branches-carousel-btn i { + padding: 10px; + background-color: #d2d4d5; + color: #57595b; + margin: 0 0 0 12px; + cursor: pointer; } + @media screen and (max-width: 1024px) { + #branches .branches-carousel-btn i { + margin: 50px 0 0 12px; } } #enquiry { - background: linear-gradient(#28aae2, #2b3991); -} -#enquiry h3 { - text-align: center; - color: white; - padding: 60px 0 30px; -} -#enquiry p { - width: 50%; - margin: 0 auto; - text-align: center; - color: #fafafa; - line-height: 1.8; -} -@media screen and (max-width: 1024px) { + background: linear-gradient(#28aae2, #2b3991); } + #enquiry h3 { + text-align: center; + color: white; + padding: 60px 0 30px; } #enquiry p { - width: 90%; - } -} -#enquiry form fieldset { - border: none; - width: 35%; - margin: 0 auto; - padding: 30px 0; -} -@media screen and (max-width: 1024px) { + width: 50%; + margin: 0 auto; + text-align: center; + color: #fafafa; + line-height: 1.8; } + @media screen and (max-width: 1024px) { + #enquiry p { + width: 90%; } } #enquiry form fieldset { - width: 90%; - } -} -#enquiry form fieldset input { - background-color: transparent; - border: 2px solid white; - padding: 8px 18px; - clear: both; - width: 48%; - margin: 10px 0; -} -#enquiry form fieldset input:nth-child(even) { - float: right; -} -#enquiry form fieldset ::-webkit-input-placeholder { - color: #fafafa; -} -@media screen and (max-width: 1024px) { - #enquiry form fieldset ::-webkit-input-placeholder { - padding-left: 13px; - } -} -#enquiry form fieldset ::-moz-placeholder { - color: #fafafa; -} -@media screen and (max-width: 1024px) { - #enquiry form fieldset ::-moz-placeholder { - padding-left: 13px; - } -} -#enquiry form fieldset :-ms-input-placeholder { - color: #fafafa; -} -@media screen and (max-width: 1024px) { - #enquiry form fieldset :-ms-input-placeholder { - padding-left: 13px; - } -} -#enquiry form fieldset :-moz-placeholder { - color: #fafafa; -} -@media screen and (max-width: 1024px) { - #enquiry form fieldset :-moz-placeholder { - padding-left: 13px; - } -} -#enquiry form fieldset textarea { - background-color: transparent; - border: 2px solid white; - width: 100%; - padding: 8px; - font-family: open-sans; -} -#enquiry form fieldset button { - display: block; - margin: 20px auto; - padding: 8px 18px; - width: 40%; - background-color: transparent; - border: none; - border: 2px solid white; - color: white; - font-size: 14px; -} + border: none; + width: 35%; + margin: 0 auto; + padding: 30px 0; } + @media screen and (max-width: 1024px) { + #enquiry form fieldset { + width: 90%; } } + #enquiry form fieldset input { + background-color: transparent; + border: 2px solid white; + padding: 8px 18px; + clear: both; + width: 48%; + margin: 10px 0; } + #enquiry form fieldset input:nth-child(even) { + float: right; } + #enquiry form fieldset ::-webkit-input-placeholder { + color: #fafafa; } + @media screen and (max-width: 1024px) { + #enquiry form fieldset ::-webkit-input-placeholder { + padding-left: 13px; } } + #enquiry form fieldset ::-moz-placeholder { + color: #fafafa; } + @media screen and (max-width: 1024px) { + #enquiry form fieldset ::-moz-placeholder { + padding-left: 13px; } } + #enquiry form fieldset :-ms-input-placeholder { + color: #fafafa; } + @media screen and (max-width: 1024px) { + #enquiry form fieldset :-ms-input-placeholder { + padding-left: 13px; } } + #enquiry form fieldset :-moz-placeholder { + color: #fafafa; } + @media screen and (max-width: 1024px) { + #enquiry form fieldset :-moz-placeholder { + padding-left: 13px; } } + #enquiry form fieldset textarea { + background-color: transparent; + border: 2px solid white; + width: 100%; + padding: 8px; + font-family: open-sans; } + #enquiry form fieldset button { + display: block; + margin: 20px auto; + padding: 8px 18px; + width: 40%; + background-color: transparent; + border: none; + border: 2px solid white; + color: white; + font-size: 14px; } #contact { - padding: 30px 0; -} -#contact h3 { - text-align: center; - padding: 10px 0 20px; -} -#contact p { - width: 50%; - margin: 0 auto; - text-align: center; - line-height: 1.8; -} -@media screen and (max-width: 1024px) { + padding: 30px 0; } + #contact h3 { + text-align: center; + padding: 10px 0 20px; } #contact p { - width: 90%; - } -} -#contact .inner-container { - display: flex; - width: 80%; - margin: 40px auto; - padding: 20px 0; - justify-content: space-between; -} -@media screen and (max-width: 1024px) { + width: 50%; + margin: 0 auto; + text-align: center; + line-height: 1.8; } + @media screen and (max-width: 1024px) { + #contact p { + width: 90%; } } #contact .inner-container { - flex-direction: column; - width: 90%; - } -} -#contact .inner-container figure { - width: 60%; -} -@media screen and (max-width: 1024px) { - #contact .inner-container figure { - width: 100%; - } -} -#contact .inner-container .description-container { - width: 30%; -} -@media screen and (max-width: 1024px) { - #contact .inner-container .description-container { - width: 100%; - } -} -#contact .inner-container .description-container li { - display: flex; - justify-content: space-evenly; - padding: 15px 0; -} -#contact .inner-container .description-container li:last-child a { - color: #28aae2; -} -#contact .inner-container .description-container li address { - font-size: 16px; - color: #57595b; - font-family: open-sans; - font-style: normal; - line-height: 1.8; -} -#contact .inner-container .description-container li label { - color: #57595b; - font-weight: bold; - font-size: 16px; -} -#contact .inner-container .description-container li address, -#contact .inner-container .description-container li .contact-content { - width: 70%; -} -#contact .inner-container .description-container li .contact-content { - display: flex; - font-size: 16px; -} -#contact .inner-container .description-container li .contact-content li { - color: #57595b; - padding: 0 15px 0 0; -} -#contact .inner-container .description-container li .contact-content li i { - font-size: 18px; -} + display: flex; + width: 80%; + margin: 40px auto; + padding: 20px 0; + justify-content: space-between; } + @media screen and (max-width: 1024px) { + #contact .inner-container { + flex-direction: column; + width: 90%; } } + #contact .inner-container figure { + width: 60%; } + @media screen and (max-width: 1024px) { + #contact .inner-container figure { + width: 100%; } } + #contact .inner-container .description-container { + width: 30%; } + @media screen and (max-width: 1024px) { + #contact .inner-container .description-container { + width: 100%; } } + #contact .inner-container .description-container li { + display: flex; + justify-content: space-evenly; + padding: 15px 0; } + #contact .inner-container .description-container li:last-child a { + color: #28aae2; } + #contact .inner-container .description-container li address { + font-size: 16px; + color: #57595b; + font-family: open-sans; + font-style: normal; + line-height: 1.8; } + #contact .inner-container .description-container li label { + color: #57595b; + font-weight: bold; + font-size: 16px; } + #contact .inner-container .description-container li address, + #contact .inner-container .description-container li .contact-content { + width: 70%; } + #contact .inner-container .description-container li .contact-content { + display: flex; + font-size: 16px; } + #contact .inner-container .description-container li .contact-content li { + color: #57595b; + padding: 0 15px 0 0; } + #contact .inner-container .description-container li .contact-content li i { + font-size: 18px; } .toast { position: fixed; @@ -615,44 +466,37 @@ section .description p { width: 300px; height: 200px; padding: 10px; - transition: transform 500ms ease; -} -.toast.hide { - transform: translateY(145px); -} -.toast.hide .close-toast { - transform: rotate(180deg); -} -.toast header { - font-size: 16px; - letter-spacing: 1px; - font-weight: bold; - padding: 10px 0; - text-align: center; - color: white; -} -.toast .close-toast { - position: absolute; - top: 20px; - left: 10px; - color: white; - font-size: 30px; - cursor: pointer; - display: flex; - transition: tranform 500ms ease; -} -.toast .close-toast img { - width: 20px; - height: 20px; -} -.toast ul { - width: 80%; - margin: 0 auto; -} -.toast ul li { - color: white; - text-decoration: underline; - font-size: 14px; -} + transition: transform 500ms ease; } + .toast.hide { + transform: translateY(145px); } + .toast.hide .close-toast { + transform: rotate(180deg); } + .toast header { + font-size: 16px; + letter-spacing: 1px; + font-weight: bold; + padding: 10px 0; + text-align: center; + color: white; } + .toast .close-toast { + position: absolute; + top: 20px; + left: 10px; + color: white; + font-size: 30px; + cursor: pointer; + display: flex; + transition: tranform 500ms ease; } + .toast .close-toast img { + width: 20px; + height: 20px; } + .toast ul { + width: 80%; + margin: 0 auto; } + .toast ul li { + color: white; + text-decoration: underline; + font-size: 14px; + margin: 0 0 10px 0; } /*# sourceMappingURL=home.css.map */ diff --git a/static/css/service.css b/static/css/service.css index bb681ff..b55a38c 100644 --- a/static/css/service.css +++ b/static/css/service.css @@ -1,29 +1,24 @@ @font-face { src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype"); font-family: archivo-black; - font-style: normal; -} + font-style: normal; } @font-face { src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype"); font-family: open-sans; - font-weight: bolder; -} + font-weight: bolder; } @font-face { src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype"); font-family: open-sans; - font-weight: bold; -} + font-weight: bold; } @font-face { src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"); font-family: open-sans; - font-style: normal; -} + font-style: normal; } @font-face { src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf") format("truetype"); font-family: open-sans; font-weight: normal; - font-style: italic; -} + font-style: italic; } .banner { height: 30vh; background-image: url("../images/cover-image.jpg"); @@ -31,77 +26,61 @@ background-repeat: no-repeat; display: flex; justify-content: center; - position: relative; -} -.banner:after { - content: ""; - width: 100%; - height: 100%; - position: absolute; - background-color: rgba(64, 62, 65, 0.6); -} -.banner h3 { - text-align: center; - align-self: center; - font-size: 36px; - color: white; - z-index: 1; -} + position: relative; } + .banner:after { + content: ''; + width: 100%; + height: 100%; + position: absolute; + background-color: rgba(64, 62, 65, 0.6); } + .banner h3 { + text-align: center; + align-self: center; + font-size: 36px; + color: white; + z-index: 1; } .service-content { width: 90%; margin: 60px auto; display: flex; - justify-content: space-between; -} -.service-content .scene-container { - overflow: hidden; - width: 70%; - background-color: #f0f0f0; -} -.service-content object { - overflow-x: hidden; - display: none; - width: 100%; - height: 100%; -} -.service-content object.active { - display: block; -} -@media screen and (max-width: 1024px) { - .service-content object.active { + justify-content: space-between; } + .service-content .scene-container { + overflow: hidden; + width: 70%; + background-color: #f0f0f0; } + .service-content object { + overflow-x: hidden; display: none; - } -} -.service-content iframe { - display: none; -} -@media screen and (max-width: 1024px) { - .service-content iframe.active { - display: block; - } -} -.service-content ul { - width: 25%; - display: flex; - flex-direction: column; - justify-content: space-evenly; -} -.service-content ul li { - list-style: none; - padding: 10% 0; - border-bottom: 2px solid white; - text-align: center; - cursor: pointer; - background-color: #fcfcfc; - color: #808285; -} -.service-content ul li.active { - background-color: #28aae2; - color: white; -} -.service-content ul li:last-child { - border-bottom: none; -} + width: 100%; + height: 100%; } + .service-content object.active { + display: block; } + @media screen and (max-width: 1024px) { + .service-content object.active { + display: none; } } + .service-content iframe { + display: none; } + @media screen and (max-width: 1024px) { + .service-content iframe.active { + display: block; } } + .service-content ul { + width: 25%; + display: flex; + flex-direction: column; + justify-content: space-evenly; } + .service-content ul li { + list-style: none; + padding: 10% 0; + border-bottom: 2px solid white; + text-align: center; + cursor: pointer; + background-color: #fcfcfc; + color: #808285; } + .service-content ul li.active { + background-color: #28aae2; + color: white; } + .service-content ul li:last-child { + border-bottom: none; } /*# sourceMappingURL=service.css.map */ diff --git a/static/files/annual-report-17-18.pdf b/static/files/annual-report-17-18.pdf new file mode 100644 index 0000000..a816f70 Binary files /dev/null and b/static/files/annual-report-17-18.pdf differ diff --git a/static/scss/home.scss b/static/scss/home.scss index 89a16a6..7f6fa66 100644 --- a/static/scss/home.scss +++ b/static/scss/home.scss @@ -121,10 +121,10 @@ section { button { transition-delay: 1000ms; } - + &.hide { - + h3, p, button { @@ -166,7 +166,7 @@ section { } } -#home, +#home, #about { position: relative; @@ -349,7 +349,7 @@ section { margin: 20px auto; text-align: center; padding: 20px 0; - + i { font-size: 16px; padding: 0 10px; @@ -478,7 +478,7 @@ section { } form { - + fieldset { border: none; width: 35%; @@ -502,7 +502,7 @@ section { } } - ::-webkit-input-placeholder { + ::-webkit-input-placeholder { color: $white_shade; @media screen and (max-width: 1024px) { @@ -510,7 +510,7 @@ section { } } - ::-moz-placeholder { + ::-moz-placeholder { color: $white_shade; @media screen and (max-width: 1024px) { @@ -518,7 +518,7 @@ section { } } - :-ms-input-placeholder { + :-ms-input-placeholder { color: $white_shade; @media screen and (max-width: 1024px) { @@ -526,7 +526,7 @@ section { } } - :-moz-placeholder { + :-moz-placeholder { color: $white_shade; @media screen and (max-width: 1024px) { @@ -584,7 +584,7 @@ section { justify-content: space-between; @media screen and (max-width: 1024px) { - flex-direction: column; + flex-direction: column; width: 90%; } @@ -618,7 +618,7 @@ section { font-size: $paragraph_size; color: $brown; font-family: open-sans; - font-style: normal; + font-style: normal; line-height: 1.8; } @@ -689,7 +689,7 @@ section { cursor: pointer; display: flex; transition: tranform 500ms ease; - + img { width: 20px; @@ -705,8 +705,7 @@ section { color: white; text-decoration: underline; font-size: 14px; + margin: 0 0 10px 0; } } } - - diff --git a/templates/home.html b/templates/home.html index 4125ba5..8695b34 100644 --- a/templates/home.html +++ b/templates/home.html @@ -10,7 +10,8 @@
ANNOUNCEMENTS
@@ -170,7 +171,7 @@
LOANS AND ADVANCES
-

+

Get a step closer to fulfilling your dreams by applying for personal loan and meet your financial needs at attractive interest rates.

@@ -180,7 +181,7 @@
OTHER SERVICES
-

Time is money and we at Barath Co-Operative Bank value your time. +

Time is money and we at Barath Co-Operative Bank value your time. Change the way you bank.

@@ -194,7 +195,7 @@

BRANCHES

- Weekly Holidays: Sunday, 2nd and 4th Saturdays. + Weekly Holidays: Sunday, 2nd and 4th Saturdays.