This commit is contained in:
2024-12-20 16:07:11 +07:00
parent 5bdf96851e
commit 1ebf0fda02
8 changed files with 257 additions and 198 deletions

4
product/views.py Normal file → Executable file
View File

@@ -16,10 +16,14 @@ def productFrontPage(request):
return render(request, 'front/main/product.html', context) return render(request, 'front/main/product.html', context)
def productDetail(request, slug): def productDetail(request, slug):
seo = productPageSEO.objects.first()
sliders = sliderSection.objects.all()
product = get_object_or_404(productSection, slug=slug) product = get_object_or_404(productSection, slug=slug)
products = productSection.objects.all() products = productSection.objects.all()
context = { context = {
'sliders' : sliders,
'seo' : seo,
'product' : product, 'product' : product,
'products' : products, 'products' : products,
} }

5
service/views.py Normal file → Executable file
View File

@@ -17,14 +17,17 @@ def serviceFrontPage(request):
def serviceDetail(request, slug): def serviceDetail(request, slug):
service = get_object_or_404(serviceSection, slug=slug) service = get_object_or_404(serviceSection, slug=slug)
seo = servicePageSEO.objects.first()
services = serviceSection.objects.all() services = serviceSection.objects.all()
sliders = sliderSection.objects.all()
context = { context = {
'sliders' : sliders,
'seo' : seo,
'service' : service, 'service' : service,
'services' : services, 'services' : services,
} }
return render(request, 'front/main/partial/service-details.html', context) return render(request, 'front/main/partial/service-details.html', context)
def error_404(request, exception): def error_404(request, exception):
return render(request, 'error/404.html', status=404) return render(request, 'error/404.html', status=404)

95
static/front/assets/css/style.css Normal file → Executable file
View File

@@ -274,7 +274,7 @@ video {
z-index: 99 z-index: 99
} }
.creasoft-wrap { .sectionblock-wrap {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
z-index: 1 z-index: 1
@@ -300,11 +300,11 @@ video {
} }
.line_wrap.layout2 { .line_wrap.layout2 {
border-left: 1px solid rgba(246, 246, 246, .02) border-left: 1px solid rgba(246, 246, 246, .06)
} }
.line_wrap.layout2 .line_item { .line_wrap.layout2 .line_item {
border-right: 1px solid rgba(246, 246, 246, .02) border-right: 1px solid rgba(246, 246, 246, .06)
} }
.line_wrap:before { .line_wrap:before {
@@ -315,8 +315,8 @@ video {
position: absolute; position: absolute;
-webkit-animation: scroll1 15s ease-out infinite; -webkit-animation: scroll1 15s ease-out infinite;
animation: scroll1 15s ease-out infinite; animation: scroll1 15s ease-out infinite;
background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(transparent)); background-image: -webkit-gradient(linear, left , right, from(#000000), to(transparent));
background-image: linear-gradient(0deg, #39A5C8, transparent) background-image: linear-gradient(0deg, #fc7a01, transparent)
} }
.line_item { .line_item {
@@ -345,15 +345,15 @@ video {
.line_item:nth-child(odd):before { .line_item:nth-child(odd):before {
-webkit-animation: scroll2 15s ease-out infinite; -webkit-animation: scroll2 15s ease-out infinite;
animation: scroll2 15s ease-out infinite; animation: scroll2 15s ease-out infinite;
background-image: -webkit-gradient(linear, left bottom, left top, from(transparent), to(#000000)); background-image: -webkit-gradient(linear, left , right , from(transparent), to(#000000));
background-image: linear-gradient(0deg, transparent, #39A5C8) background-image: linear-gradient(0deg, transparent, #fc7a01)
} }
.line_item:nth-child(even):before { .line_item:nth-child(even):before {
-webkit-animation: scroll1 15s ease-out infinite; -webkit-animation: scroll1 15s ease-out infinite;
animation: scroll1 15s ease-out infinite; animation: scroll1 15s ease-out infinite;
background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(transparent)); background-image: -webkit-gradient(linear, left, right, from(#000000), to(transparent));
background-image: linear-gradient(0deg, #39A5C8, transparent) background-image: linear-gradient(0deg, #fc7a01, transparent)
} }
@-webkit-keyframes scroll1 { @-webkit-keyframes scroll1 {
@@ -414,7 +414,7 @@ video {
.breadcrumbs { .breadcrumbs {
position: relative; position: relative;
height: 480px; height: 380px;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
z-index: 1 z-index: 1
@@ -433,7 +433,7 @@ video {
top: 0; top: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #17161a; background-color: #39A5C8;
opacity: .93; opacity: .93;
z-index: -1 z-index: -1
} }
@@ -2234,7 +2234,7 @@ only screen and (min-width:768px) and (max-width:991px) {
.our-partner { .our-partner {
padding: 100px 0; padding: 100px 0;
background-color: #191a1c background-color: #39A5C8
} }
@media(max-width:767px) { @media(max-width:767px) {
@@ -2245,7 +2245,7 @@ only screen and (min-width:768px) and (max-width:991px) {
.our-partner .sec-title { .our-partner .sec-title {
margin-bottom: 10px; margin-bottom: 10px;
border-right: 1px solid #75dab4 border-right: 1px solid #39A5C8
} }
.our-partner .sec-title .swiper-button-next-c, .our-partner .sec-title .swiper-button-next-c,
@@ -2255,7 +2255,7 @@ only screen and (min-width:768px) and (max-width:991px) {
display: inline-block; display: inline-block;
height: 40px; height: 40px;
width: 40px; width: 40px;
background-color: #0d0d0f; background-color: #39A5C8;
border-radius: 50%; border-radius: 50%;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
@@ -2266,7 +2266,7 @@ only screen and (min-width:768px) and (max-width:991px) {
.our-partner .sec-title .swiper-button-next-c:hover, .our-partner .sec-title .swiper-button-next-c:hover,
.our-partner .sec-title .swiper-button-prev-c:hover { .our-partner .sec-title .swiper-button-prev-c:hover {
color: #000; color: #000;
background-color: #75dab4 background-color: #39A5C8
} }
.our-partner .sec-title .swiper-button-prev-c { .our-partner .sec-title .swiper-button-prev-c {
@@ -2525,7 +2525,6 @@ only screen and (min-width:768px) and (max-width:991px) {
footer { footer {
position: relative; position: relative;
padding-top: 100px;
margin-top: -100px; margin-top: -100px;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
@@ -2903,7 +2902,7 @@ footer.error {
display: none display: none
} }
.creasoft-wrap.layout2 { .sectionblock-wrap.layout2 {
background-repeat: repeat; background-repeat: repeat;
background-color: #39A5C8 background-color: #39A5C8
} }
@@ -5576,3 +5575,65 @@ scrollbar-track {
.swiper-wrapper{ .swiper-wrapper{
margin-top: 35px; margin-top: 35px;
} }
.footheader {
position:relative;
text-align:center;
background: #39A5C8;
color:white;
}
.footheaderwaves {
position:relative;
width: 100%;
height:15vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:100px;
max-height:150px;
}
.footcontent {
position:relative;
height:20vh;
text-align:center;
background-color: white;
}
.footheaderparallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.footheaderparallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.footheaderparallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.footheaderparallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.footheaderparallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.footheaderwaves {
height:40px;
min-height:40px;
}
.footcontent {
height:30vh;
}
}

24
templates/front/base.html Normal file → Executable file
View File

@@ -156,20 +156,34 @@
</div> </div>
</div> </div>
</header> </header>
{% block content %}{% endblock content %} {% block content %}{% endblock content %}
<!--====================== Footer Section ======================--> <!--====================== Footer Section ======================-->
<!--====================== Wave Section ======================-->
<footer> <footer>
<div class="footheader">
<div>
<svg class="footheaderwaves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="footheaderparallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0,0,0,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0,0,0,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0,0,0,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#191a1c" />
</g>
</svg>
</div>
</div>
<div class="container"> <div class="container">
<div class="footer-top"> <div class="footer-top">
<div class="row"> <div class="row">
<div class="col-md-3 col-lg-3 col-xl-3"> <div class="col-md-3 col-lg-3 col-xl-3">
<div class="footer-widget"> <div class="footer-widget">
<div class="footer-logo"> <div class="footer-logo">
<a href="index.html"><img src="{{ settings.logo_light.url }}" alt></a> <a href="{% url "homePageFront" %}"><img src="{{ settings.logo_light.url }}" alt="image"></a>
</div> </div>
<p>{{ header_footer.footer_col1_description }}</p> <p>{{ header_footer.footer_col1_description }}</p>
<ul class="social-media-icons"> <ul class="social-media-icons">

48
templates/front/main/partial/product-details.html Normal file → Executable file
View File

@@ -5,16 +5,7 @@
{% block title2 %} {{product.name}} - {{seo_settings.meta_title}}{% endblock title2 %} {% block title2 %} {{product.name}} - {{seo_settings.meta_title}}{% endblock title2 %}
{% block content %} {% block content %}
<main class="creasoft-wrap"> <main class="sectionblock-wrap layout2">
<div class="line_wrap">
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
</div>
<section class="breadcrumbs"> <section class="breadcrumbs">
<div class="container"> <div class="container">
@@ -31,17 +22,33 @@
</div> </div>
</section> </section>
<!--====================== background Section======================-->
<div id="particles-js" class="particles-cls"></div>
<!--====================== =============== ======================-->
{% for slider in sliders %}
<div class="swiper-slide">
{% if settings.slider_particle_is_active %}
<div id="particles-js-{{ forloop.counter }}" class="particles-cls"></div>
{% endif %}
</section>
</div>
<section class="service-details sec-mar-top"> {% endfor %}
<script>
const sliderCounting = {{sliders.count}}
</script>
<section class="services-area layout2 sec-mar">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-8"> <div class="col-lg-8">
<div class="service-details-content"> <div class="swiper-slide wow animate fadeInUp" data-wow-delay="400ms" data-wow-duration="1500ms">
<h3><i class="{{ product.fontawesome_icon_class }} "></i>{{ product.name }} </h3>
{% if product.detail_page_image %} {% if product.detail_page_image %}
<img src="{{ product.detail_page_image.url }}" style="border-radius:10px;" alt="product"> <img src="{{ product.detail_page_image.url }}" style="border-radius:10px;" alt="product">
{% endif %} {% endif %}
<h3><i class="{{ product.fontawesome_icon_class }} "></i>{{ product.name }}
</h3>
{{ product.detail_page_description|safe }} {{ product.detail_page_description|safe }}
</div> </div>
</div> </div>
@@ -54,19 +61,6 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
{% if settings.show_call_now_widget %}
{% if product.show_call_now_widget %}
<div class="sidebar-banner">
<img src="{% static 'front/assets/img/widget-banner-bg.jpg' %}" alt>
<div class="banner-inner">
<h3>Any Project <span>Call Now.</span>
<img class="angle" src="{% static 'front/assets/img/arrow-angle.png' %}" alt>
</h3>
<a href="tel:{{settings.phone}}">{{settings.phone}}</a>
</div>
</div>
{% endif %}
{% endif %}
</div> </div>
</div> </div>

48
templates/front/main/partial/service-details.html Normal file → Executable file
View File

@@ -5,16 +5,8 @@
{% block title2 %} {{service.name}} - {{seo_settings.meta_title}}{% endblock title2 %} {% block title2 %} {{service.name}} - {{seo_settings.meta_title}}{% endblock title2 %}
{% block content %} {% block content %}
<main class="creasoft-wrap">
<div class="line_wrap">
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
</div>
<main class="sectionblock-wrap layout2">
<section class="breadcrumbs"> <section class="breadcrumbs">
<div class="container"> <div class="container">
@@ -32,19 +24,37 @@
</section> </section>
<section class="service-details sec-mar-top"> <!--====================== background Section======================-->
<div id="particles-js" class="particles-cls"></div>
<!--====================== =============== ======================-->
{% for slider in sliders %}
<div class="swiper-slide">
{% if settings.slider_particle_is_active %}
<div id="particles-js-{{ forloop.counter }}" class="particles-cls"></div>
{% endif %}
</section>
</div>
{% endfor %}
<script>
const sliderCounting = {{sliders.count}}
</script>
<section class="services-area layout2 sec-mar">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-8"> <div class="col-lg-8">
<div class="swiper-slide wow animate fadeInUp" data-wow-delay="400ms" data-wow-duration="1500ms">
<div class="service-details-content"> <div class="service-details-content">
<h3><i class="{{ service.fontawesome_icon_class }} "></i>{{ service.name }}</h3>
{% if service.detail_page_image %} {% if service.detail_page_image %}
<img src="{{ service.detail_page_image.url }}" style="border-radius:10px;" alt="service"> <img src="{{ service.detail_page_image.url }}" style="border-radius:10px;" alt="service">
{% endif %} {% endif %}
<h3><i class="{{ service.fontawesome_icon_class }} "></i>{{ service.name }}
</h3>
{{ service.detail_page_description|safe }} {{ service.detail_page_description|safe }}
</div> </div>
</div> </div>
</div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="sidebar-widget"> <div class="sidebar-widget">
<h4>Other Services</h4> <h4>Other Services</h4>
@@ -54,22 +64,10 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
{% if settings.show_call_now_widget %}
{% if service.show_call_now_widget %}
<div class="sidebar-banner">
<img src="{% static 'front/assets/img/widget-banner-bg.jpg' %}" alt>
<div class="banner-inner">
<h3>Any Project <span>Call Now.</span>
<img class="angle" src="{% static 'front/assets/img/arrow-angle.png' %}" alt>
</h3>
<a href="tel:{{settings.phone}}">{{settings.phone}}</a>
</div>
</div>
{% endif %}
{% endif %}
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{% endblock %} {% endblock %}

10
templates/front/main/product.html Normal file → Executable file
View File

@@ -5,15 +5,7 @@
{% block title2 %} {{meta.meta_title}} - {{seo_settings.tag_line}} {% endblock title2 %} {% block title2 %} {{meta.meta_title}} - {{seo_settings.tag_line}} {% endblock title2 %}
{% block content %} {% block content %}
<main class="creasoft-wrap layout2"> <main class="sectionblock-wrap layout2">
<div class="line_wrap layout2">
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
</div>
<!--====================== background Section======================--> <!--====================== background Section======================-->
<div id="particles-js" class="particles-cls"></div> <div id="particles-js" class="particles-cls"></div>

9
templates/front/main/service.html Normal file → Executable file
View File

@@ -5,15 +5,8 @@
{% block title2 %} {{meta.meta_title}} - {{seo_settings.tag_line}} {% endblock title2 %} {% block title2 %} {{meta.meta_title}} - {{seo_settings.tag_line}} {% endblock title2 %}
{% block content %} {% block content %}
<main class="creasoft-wrap layout2"> <main class="sectionblock-wrap layout2">
<div class="line_wrap layout2">
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
<div class="line_item"></div>
</div>
<!--====================== background Section======================--> <!--====================== background Section======================-->
<div id="particles-js" class="particles-cls"></div> <div id="particles-js" class="particles-cls"></div>