diff --git a/static/css/common.css b/static/css/common.css index e218aa7..2c0358d 100644 --- a/static/css/common.css +++ b/static/css/common.css @@ -144,7 +144,7 @@ mark { top: 0; left: 0; background-color: white; - z-index: 5; + z-index: 100; transition: height 500ms linear; } @media screen and (max-width: 1024px) { diff --git a/static/css/home.css b/static/css/home.css index 817df3f..b80a0a3 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -336,89 +336,89 @@ section .description p { cursor: pointer; } -#testimonial { +#branches { background-color: #f0f0f0; padding: 20px 0; } -#testimonial h3 { +#branches h3 { text-align: center; padding: 20px 0; } -#testimonial p { +#branches p { text-align: center; width: 50%; margin: 0 auto; } @media screen and (max-width: 1024px) { - #testimonial p { + #branches p { width: 90%; } } -#testimonial .owl-testimonial { +#branches .owl-branches { width: 80%; margin: 0 auto; height: 55vh; } @media screen and (max-width: 1024px) { - #testimonial .owl-testimonial { + #branches .owl-branches { width: 100%; } } -#testimonial .owl-testimonial .owl-item-testimonial { +#branches .owl-branches .owl-item-branches { display: flex; width: 97%; background-color: white; margin: 50px 0; } @media screen and (max-width: 1024px) { - #testimonial .owl-testimonial .owl-item-testimonial { + #branches .owl-branches .owl-item-branches { width: 90%; margin: 50px auto; } } -#testimonial .owl-testimonial .owl-item-testimonial figure { - width: 250px; - height: 300px; +#branches .owl-branches .owl-item-branches figure { + width: 500px; + height: 255px; } @media screen and (max-width: 1024px) { - #testimonial .owl-testimonial .owl-item-testimonial figure { + #branches .owl-branches .owl-item-branches figure { width: 350px; } } -#testimonial .owl-testimonial .owl-item-testimonial figure img { +#branches .owl-branches .owl-item-branches figure img { width: 100%; height: 100%; object-fit: cover; } -#testimonial .owl-testimonial .owl-item-testimonial .description { +#branches .owl-branches .owl-item-branches .description { margin: 0 20px; padding: 10px 0; } -#testimonial .owl-testimonial .owl-item-testimonial .description .person-name, -#testimonial .owl-testimonial .owl-item-testimonial .description .person-info { +#branches .owl-branches .owl-item-branches .description .person-name, +#branches .owl-branches .owl-item-branches .description .person-info { font-size: 14px; font-weight: bold; } -#testimonial .owl-testimonial .owl-item-testimonial .description .person-info { +#branches .owl-branches .owl-item-branches .description .person-info { padding: 2px 0; color: #808285; } -#testimonial .owl-testimonial .owl-item-testimonial .description .person-name { +#branches .owl-branches .owl-item-branches .description .person-name { color: #28aae2; padding-top: 20px; } -#testimonial .owl-testimonial .owl-item-testimonial blockquote { +#branches .owl-branches .owl-item-branches blockquote { font-size: 16px; color: #808285; - line-height: 1.8; + line-height: 1.3; } -#testimonial .testimonial-carousel-btn { +#branches .branches-carousel-btn { text-align: center; padding-bottom: 30px; position: relative; z-index: 2; } -#testimonial .testimonial-carousel-btn i { +#branches .branches-carousel-btn i { padding: 10px; background-color: #d2d4d5; color: #57595b; diff --git a/static/css/service.css b/static/css/service.css index 1ff9c5c..95e94bb 100644 --- a/static/css/service.css +++ b/static/css/service.css @@ -57,12 +57,15 @@ .service-content .scene-container { overflow: hidden; width: 70%; + background-color: #f0f0f0; } -.service-content iframe { +.service-content object { overflow-x: hidden; display: none; + width: 100%; + height: 100%; } -.service-content iframe.active { +.service-content object.active { display: block; } .service-content ul { @@ -74,7 +77,7 @@ } .service-content ul li { list-style: none; - padding: 25px 0; + padding: 10% 0; border-bottom: 1px solid #808285; color: #403e41; text-align: center; diff --git a/static/js/about.js b/static/js/about.js new file mode 100644 index 0000000..a9020c7 --- /dev/null +++ b/static/js/about.js @@ -0,0 +1,32 @@ +var owl = $('.owl-team'); +owl.owlCarousel({ + loop: true, + margin: 0, + autoplay: true, + autoplayTimeout: 3000, + autoplayHoverPause: true, + responsiveClass: true, + responsive: { + 0: { + items: 1 + }, + 600: { + items: 1 + }, + 1000: { + items: 4, + } + } +}); + +var team_carousel_Btn = $('.owl-team'); +owl.owlCarousel(); +$('#team-carousel-left-btn').click(function () { + "use strict"; + team_carousel_Btn.trigger('next.owl.carousel', [300]); +}); + +$('#team-carousel-right-btn').click(function () { + "use strict"; + team_carousel_Btn.trigger('prev.owl.carousel', [300]); +}); diff --git a/static/js/common.js b/static/js/common.js new file mode 100644 index 0000000..8821ca5 --- /dev/null +++ b/static/js/common.js @@ -0,0 +1,13 @@ +window.addEventListener('scroll', page_scroll); +var page_header = document.getElementById('page-header'); + +function page_scroll() { + 'use strict'; + var winScroll = document.body.scrollTop || document.documentElement.scrollTop; + + if (40 + winScroll < page_header.offsetTop) { + page_header.classList.remove('minimize'); + } else { + page_header.classList.add('minimize'); + } +} \ No newline at end of file diff --git a/static/js/home.js b/static/js/home.js index 4bed3ea..831aad4 100644 --- a/static/js/home.js +++ b/static/js/home.js @@ -34,12 +34,6 @@ document.addEventListener('DOMContentLoaded', page_loaded); function page_scroll() { 'use strict'; var winScroll = document.body.scrollTop || document.documentElement.scrollTop; - - if (40 + winScroll < page_header.offsetTop) { - page_header.classList.remove('minimize'); - } else { - page_header.classList.add('minimize'); - } if (-120 + winScroll >= about_description_animate.offsetTop) { about_description_animate.classList.add('show'); @@ -147,7 +141,7 @@ $('#service-carousel-right-btn').click(function () { service_carousel_Btn.trigger('prev.owl.carousel', [300]); }); -var owl = $('.owl-testimonial'); +var owl = $('.owl-branches'); owl.owlCarousel({ loop: true, margin: 0, @@ -169,48 +163,14 @@ owl.owlCarousel({ } }); -var testimonial_carousel_Btn = $('.owl-testimonial'); +var branches_carousel_Btn = $('.owl-branches'); owl.owlCarousel(); -$('#testimonial-carousel-left-btn').click(function () { +$('#branches-carousel-left-btn').click(function () { "use strict"; - testimonial_carousel_Btn.trigger('next.owl.carousel', [300]); + branches_carousel_Btn.trigger('next.owl.carousel', [300]); }); -$('#testimonial-carousel-right-btn').click(function () { +$('#branches-carousel-right-btn').click(function () { "use strict"; - testimonial_carousel_Btn.trigger('prev.owl.carousel', [300]); + branches_carousel_Btn.trigger('prev.owl.carousel', [300]); }); - -var owl = $('.owl-team'); -owl.owlCarousel({ - loop: true, - margin: 0, - autoplay: true, - autoplayTimeout: 3000, - autoplayHoverPause: true, - responsiveClass: true, - responsive: { - 0: { - items: 1 - }, - 600: { - items: 1 - }, - 1000: { - items: 4, - } - } -}); - -var team_carousel_Btn = $('.owl-team'); -owl.owlCarousel(); -$('#team-carousel-left-btn').click(function () { - "use strict"; - team_carousel_Btn.trigger('next.owl.carousel', [300]); -}); - -$('#team-carousel-right-btn').click(function () { - "use strict"; - team_carousel_Btn.trigger('prev.owl.carousel', [300]); -}); - diff --git a/static/js/service.js b/static/js/service.js index e7011ac..ec1dd49 100644 --- a/static/js/service.js +++ b/static/js/service.js @@ -1,5 +1,5 @@ var service_tabs = document.querySelectorAll('.service-content .side-content li'); -var scenes = document.querySelectorAll('.scene-container iframe'); +var scenes = document.querySelectorAll('.scene-container object'); for (var i = 0; i < service_tabs.length; i++) { service_tabs[i].addEventListener('click', change_tabs); diff --git a/static/scss/common.scss b/static/scss/common.scss index dfde803..14ce66f 100644 --- a/static/scss/common.scss +++ b/static/scss/common.scss @@ -114,7 +114,7 @@ mark { top: 0; left: 0; background-color: white; - z-index: 5; + z-index: 100; transition: height 500ms linear; @media screen and (max-width: 1024px) { diff --git a/static/scss/home.scss b/static/scss/home.scss index c0152ba..6d98d50 100644 --- a/static/scss/home.scss +++ b/static/scss/home.scss @@ -347,7 +347,7 @@ section { } } -#testimonial { +#branches { background-color: $lightest_gray; padding: 20px 0; @@ -366,7 +366,7 @@ section { } } - .owl-testimonial { + .owl-branches { width: 80%; margin: 0 auto; height: 55vh; @@ -375,7 +375,7 @@ section { width: 100%; } - .owl-item-testimonial { + .owl-item-branches { display: flex; width: 97%; background-color: white; @@ -387,8 +387,8 @@ section { } figure { - width: 250px; - height: 300px; + width: 500px; + height: 255px; @media screen and (max-width: 1024px) { width: 350px; @@ -426,12 +426,12 @@ section { blockquote { font-size: $paragraph_size; color: $dark_gray; - line-height: 1.8; + line-height: 1.3; } } } - .testimonial-carousel-btn { + .branches-carousel-btn { text-align: center; padding-bottom: 30px; position: relative; diff --git a/static/scss/service.scss b/static/scss/service.scss index ca8697c..33b81a9 100644 --- a/static/scss/service.scss +++ b/static/scss/service.scss @@ -36,11 +36,14 @@ .scene-container { overflow: hidden; width: 70%; + background-color: $lightest_gray; } - iframe { + object { overflow-x: hidden; display: none; + width: 100%; + height: 100%; &.active { display: block; @@ -56,7 +59,7 @@ li { list-style: none; - padding: 25px 0; + padding: 10% 0; border-bottom: 1px solid $dark_gray; color: $dark_brown; text-align: center; diff --git a/templates/about.html b/templates/about.html index 4b34d88..5d17036 100644 --- a/templates/about.html +++ b/templates/about.html @@ -106,4 +106,8 @@ -{% endblock content %} \ No newline at end of file +{% endblock content %} + +{% block scripts %} + +{% endblock scripts %} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index 474e118..7436f13 100644 --- a/templates/base.html +++ b/templates/base.html @@ -65,7 +65,7 @@ - + {% block scripts %} {% endblock scripts %} diff --git a/templates/home.html b/templates/home.html index b07de2e..e02555c 100644 --- a/templates/home.html +++ b/templates/home.html @@ -26,7 +26,7 @@ SERVICES
  • - TESTIMONIAL + BRANCHES
  • ENQUIRY @@ -79,7 +79,9 @@ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    - + + +
    @@ -197,14 +199,14 @@
    -
    -

    TESTIMONIALS

    +
    +

    BRANCHES

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    -
    -
    +
    +
    @@ -216,12 +218,12 @@ labore et dolore magna aliqua. Ut enim ad minim veniam. -
    John Doe
    -
    CEO
    -
    Big Bank Ltd.
    +
    Nagarabjavi
    +
    Bangalore
    +
    Karnataka
    -
    +
    @@ -233,12 +235,12 @@ labore et dolore magna aliqua. Ut enim ad minim veniam. -
    John Doe
    -
    CEO
    -
    Big Bank Ltd.
    +
    Nagarabjavi
    +
    Bangalore
    +
    Karnataka
    -
    +
    @@ -250,12 +252,12 @@ labore et dolore magna aliqua. Ut enim ad minim veniam. -
    John Doe
    -
    CEO
    -
    Big Bank Ltd.
    +
    Nagarabjavi
    +
    Bangalore
    +
    Karnataka
    -
    +
    @@ -267,15 +269,32 @@ labore et dolore magna aliqua. Ut enim ad minim veniam. -
    John Doe
    -
    CEO
    -
    Big Bank Ltd.
    +
    Nagarabjavi
    +
    Bangalore
    +
    Karnataka
    +
    +
    +
    +
    + +
    +
    +
    + Lorem ipsum dolor sit amet, con- + sectetur adipiscing elit, sed do + eiusmod tempor incididunt ut + labore et dolore magna aliqua. + Ut enim ad minim veniam. +
    +
    Nagarabjavi
    +
    Bangalore
    +
    Karnataka
    -
    - - +
    + +
    @@ -342,3 +361,7 @@
    {% endblock content %} + +{% block scripts %} + +{% endblock scripts %} diff --git a/templates/partials/navigation.html b/templates/partials/navigation.html index 8ba0d50..cb7f3b4 100644 --- a/templates/partials/navigation.html +++ b/templates/partials/navigation.html @@ -3,22 +3,22 @@ {% block navigation %}
    -
    +

    Fundzin

    -
    +