Update Progress Landingpage
This commit is contained in:
zakiaass
parent
5723330ebe
commit
b34bfeecf0
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,281 +0,0 @@
|
|||
/*
|
||||
* jQuery FlexSlider v2.7.1
|
||||
* http://www.woothemes.com/flexslider/
|
||||
*
|
||||
* Copyright 2012 WooThemes
|
||||
* Free to use under the GPLv2 and later license.
|
||||
* http://www.gnu.org/licenses/gpl-2.0.html
|
||||
*
|
||||
* Contributing author: Tyler Smith (@mbmufffin)
|
||||
*
|
||||
*/
|
||||
/* ====================================================================================================================
|
||||
* FONT-FACE
|
||||
* ====================================================================================================================*/
|
||||
@font-face {
|
||||
font-family: 'flexslider-icon';
|
||||
src: url('../fonts/flexslider-icon.eot');
|
||||
src: url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../fonts/flexslider-icon.woff') format('woff'), url('../fonts/flexslider-icon.ttf') format('truetype'), url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* ====================================================================================================================
|
||||
* RESETS
|
||||
* ====================================================================================================================*/
|
||||
.flex-container a:hover,
|
||||
.flex-slider a:hover {
|
||||
outline: none;
|
||||
}
|
||||
.slides,
|
||||
.slides > li,
|
||||
.flex-control-nav,
|
||||
.flex-direction-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.flex-pauseplay span {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
/* ====================================================================================================================
|
||||
* BASE STYLES
|
||||
* ====================================================================================================================*/
|
||||
.flexslider {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.flexslider .slides > li {
|
||||
display: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.flexslider .slides img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.flexslider .slides:after {
|
||||
content: "\0020";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0;
|
||||
}
|
||||
html[xmlns] .flexslider .slides {
|
||||
display: block;
|
||||
}
|
||||
* html .flexslider .slides {
|
||||
height: 1%;
|
||||
}
|
||||
.no-js .flexslider .slides > li:first-child {
|
||||
display: block;
|
||||
}
|
||||
/* ====================================================================================================================
|
||||
* DEFAULT THEME
|
||||
* ====================================================================================================================*/
|
||||
.flexslider {
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
border: 4px solid #fff;
|
||||
position: relative;
|
||||
zoom: 1;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
-o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.flexslider .slides {
|
||||
zoom: 1;
|
||||
}
|
||||
.flexslider .slides img {
|
||||
height: auto;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
.flex-viewport {
|
||||
max-height: 2000px;
|
||||
-webkit-transition: all 1s ease;
|
||||
-moz-transition: all 1s ease;
|
||||
-ms-transition: all 1s ease;
|
||||
-o-transition: all 1s ease;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.loading .flex-viewport {
|
||||
max-height: 300px;
|
||||
}
|
||||
@-moz-document url-prefix() {
|
||||
.loading .flex-viewport {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
.carousel li {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.flex-direction-nav {
|
||||
*height: 0;
|
||||
}
|
||||
.flex-direction-nav a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: -20px 0 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-ms-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.flex-direction-nav a:before {
|
||||
font-family: "flexslider-icon";
|
||||
font-size: 26px;
|
||||
display: inline-block;
|
||||
content: '\f001';
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.flex-direction-nav a.flex-next:before {
|
||||
content: '\f002';
|
||||
}
|
||||
.flex-direction-nav .flex-prev {
|
||||
left: -50px;
|
||||
}
|
||||
.flex-direction-nav .flex-next {
|
||||
right: -50px;
|
||||
text-align: right;
|
||||
}
|
||||
.flexslider:hover .flex-direction-nav .flex-prev {
|
||||
opacity: 0.7;
|
||||
left: 10px;
|
||||
}
|
||||
.flexslider:hover .flex-direction-nav .flex-prev:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.flexslider:hover .flex-direction-nav .flex-next {
|
||||
opacity: 0.7;
|
||||
right: 10px;
|
||||
}
|
||||
.flexslider:hover .flex-direction-nav .flex-next:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.flex-direction-nav .flex-disabled {
|
||||
opacity: 0!important;
|
||||
filter: alpha(opacity=0);
|
||||
cursor: default;
|
||||
z-index: -1;
|
||||
}
|
||||
.flex-pauseplay a {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 10px;
|
||||
opacity: 0.8;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
}
|
||||
.flex-pauseplay a:before {
|
||||
font-family: "flexslider-icon";
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
content: '\f004';
|
||||
}
|
||||
.flex-pauseplay a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.flex-pauseplay a.flex-play:before {
|
||||
content: '\f003';
|
||||
}
|
||||
.flex-control-nav {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
text-align: center;
|
||||
}
|
||||
.flex-control-nav li {
|
||||
margin: 0 6px;
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
.flex-control-paging li a {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
display: block;
|
||||
background: #666;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
text-indent: -9999px;
|
||||
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
|
||||
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.flex-control-paging li a:hover {
|
||||
background: #333;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.flex-control-paging li a.flex-active {
|
||||
background: #000;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
cursor: default;
|
||||
}
|
||||
.flex-control-thumbs {
|
||||
margin: 5px 0 0;
|
||||
position: static;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flex-control-thumbs li {
|
||||
width: 25%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
.flex-control-thumbs img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
opacity: .7;
|
||||
cursor: pointer;
|
||||
-moz-user-select: none;
|
||||
-webkit-transition: all 1s ease;
|
||||
-moz-transition: all 1s ease;
|
||||
-ms-transition: all 1s ease;
|
||||
-o-transition: all 1s ease;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
.flex-control-thumbs img:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.flex-control-thumbs .flex-active {
|
||||
opacity: 1;
|
||||
cursor: default;
|
||||
}
|
||||
/* ====================================================================================================================
|
||||
* RESPONSIVE
|
||||
* ====================================================================================================================*/
|
||||
@media screen and (max-width: 860px) {
|
||||
.flex-direction-nav .flex-prev {
|
||||
opacity: 1;
|
||||
left: 10px;
|
||||
}
|
||||
.flex-direction-nav .flex-next {
|
||||
opacity: 1;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -1,186 +0,0 @@
|
|||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
/*
|
||||
* Owl Carousel - Core
|
||||
*/
|
||||
.owl-carousel {
|
||||
display: none;
|
||||
width: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* position relative and z-index fix webkit rendering fonts issue */
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
.owl-carousel .owl-stage {
|
||||
position: relative;
|
||||
-ms-touch-action: pan-Y;
|
||||
touch-action: manipulation;
|
||||
-moz-backface-visibility: hidden;
|
||||
/* fix firefox animation glitch */ }
|
||||
.owl-carousel .owl-stage:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
height: 0; }
|
||||
.owl-carousel .owl-stage-outer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* fix for flashing background */
|
||||
-webkit-transform: translate3d(0px, 0px, 0px); }
|
||||
.owl-carousel .owl-wrapper,
|
||||
.owl-carousel .owl-item {
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0); }
|
||||
.owl-carousel .owl-item {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
float: left;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none; }
|
||||
.owl-carousel .owl-item img {
|
||||
display: block;
|
||||
width: 100%; }
|
||||
.owl-carousel .owl-nav.disabled,
|
||||
.owl-carousel .owl-dots.disabled {
|
||||
display: none; }
|
||||
.owl-carousel .owl-nav .owl-prev,
|
||||
.owl-carousel .owl-nav .owl-next,
|
||||
.owl-carousel .owl-dot {
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.owl-carousel .owl-nav button.owl-prev,
|
||||
.owl-carousel .owl-nav button.owl-next,
|
||||
.owl-carousel button.owl-dot {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
padding: 0 !important;
|
||||
font: inherit; }
|
||||
.owl-carousel.owl-loaded {
|
||||
display: block; }
|
||||
.owl-carousel.owl-loading {
|
||||
opacity: 0;
|
||||
display: block; }
|
||||
.owl-carousel.owl-hidden {
|
||||
opacity: 0; }
|
||||
.owl-carousel.owl-refresh .owl-item {
|
||||
visibility: hidden; }
|
||||
.owl-carousel.owl-drag .owl-item {
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.owl-carousel.owl-grab {
|
||||
cursor: move;
|
||||
cursor: grab; }
|
||||
.owl-carousel.owl-rtl {
|
||||
direction: rtl; }
|
||||
.owl-carousel.owl-rtl .owl-item {
|
||||
float: right; }
|
||||
|
||||
/* No Js */
|
||||
.no-js .owl-carousel {
|
||||
display: block; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Animate Plugin
|
||||
*/
|
||||
.owl-carousel .animated {
|
||||
animation-duration: 1000ms;
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.owl-carousel .owl-animated-in {
|
||||
z-index: 0; }
|
||||
|
||||
.owl-carousel .owl-animated-out {
|
||||
z-index: 1; }
|
||||
|
||||
.owl-carousel .fadeOut {
|
||||
animation-name: fadeOut; }
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1; }
|
||||
100% {
|
||||
opacity: 0; } }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Auto Height Plugin
|
||||
*/
|
||||
.owl-height {
|
||||
transition: height 500ms ease-in-out; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Lazy Load Plugin
|
||||
*/
|
||||
.owl-carousel .owl-item {
|
||||
/**
|
||||
This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
|
||||
calculation of the height of the owl-item that breaks page layouts
|
||||
*/ }
|
||||
.owl-carousel .owl-item .owl-lazy {
|
||||
opacity: 0;
|
||||
transition: opacity 400ms ease; }
|
||||
.owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
|
||||
max-height: 0; }
|
||||
.owl-carousel .owl-item img.owl-lazy {
|
||||
transform-style: preserve-3d; }
|
||||
|
||||
/*
|
||||
* Owl Carousel - Video Plugin
|
||||
*/
|
||||
.owl-carousel .owl-video-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: #000; }
|
||||
|
||||
.owl-carousel .owl-video-play-icon {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -40px;
|
||||
margin-top: -40px;
|
||||
background: url("owl.video.play.png") no-repeat;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
-webkit-backface-visibility: hidden;
|
||||
transition: transform 100ms ease; }
|
||||
|
||||
.owl-carousel .owl-video-play-icon:hover {
|
||||
-ms-transform: scale(1.3, 1.3);
|
||||
transform: scale(1.3, 1.3); }
|
||||
|
||||
.owl-carousel .owl-video-playing .owl-video-tn,
|
||||
.owl-carousel .owl-video-playing .owl-video-play-icon {
|
||||
display: none; }
|
||||
|
||||
.owl-carousel .owl-video-tn {
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
transition: opacity 400ms ease; }
|
||||
|
||||
.owl-carousel .owl-video-frame {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
width: 100%; }
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
@media (max-width: 1300px) {
|
||||
.footer_container {
|
||||
border-radius: 250px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.hero_area {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.quote_btn-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-nav {
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-nav {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
.custom_nav-container .navbar-nav .nav-item .nav-link {
|
||||
padding: 5px 25px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.slider_section {
|
||||
padding: 75px 0;
|
||||
}
|
||||
|
||||
.contact_section .img-box {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.info_section .row>div:nth-child(1) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.info_section .row>div:nth-child(2) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero_area {
|
||||
border-radius: 0 0 250px 0;
|
||||
}
|
||||
|
||||
.slider_section .detail-box {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.about_section {
|
||||
border-radius: 150px 0 150px 0;
|
||||
}
|
||||
|
||||
.about_section .img-box {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.contact_section .row {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.contact_section .map_container {
|
||||
margin-left: 0;
|
||||
margin-bottom: 45px;
|
||||
height: 375px;
|
||||
}
|
||||
|
||||
.info_section .row>div:nth-child(3) {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.info_section .row>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.info_section .info_links {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info_section form input {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {}
|
||||
|
||||
@media (max-width: 480px) {}
|
||||
|
||||
@media (max-width: 420px) {}
|
||||
|
||||
@media (max-width: 376px) {}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1170px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,883 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
|
||||
body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
color: #0c0c0c;
|
||||
background-color: #ffffff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.layout_padding {
|
||||
padding: 90px 0;
|
||||
}
|
||||
|
||||
.layout_margin {
|
||||
margin: 90px 0;
|
||||
}
|
||||
|
||||
.layout_padding2 {
|
||||
padding: 75px 0;
|
||||
}
|
||||
|
||||
.layout_padding2-top {
|
||||
padding-top: 75px;
|
||||
}
|
||||
|
||||
.layout_padding2-bottom {
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
|
||||
.layout_padding-top {
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
.layout_padding-bottom {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.heading_container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.heading_container h2 {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.heading_container h2 span {
|
||||
color: #7335b7;
|
||||
}
|
||||
|
||||
.heading_container.heading_center {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: initial;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn:focus {
|
||||
outline: none !important;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*header section*/
|
||||
.hero_area {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
background-color: #7335b7;
|
||||
border-radius: 0 0 350px 0;
|
||||
}
|
||||
|
||||
.sub_page .hero_area {
|
||||
min-height: auto;
|
||||
border-radius: 0 0 45px 0;
|
||||
}
|
||||
|
||||
.header_section {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.header_section .container-fluid {
|
||||
padding-right: 25px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.navbar-brand span {
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.custom_nav-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-nav {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-nav .nav-item .nav-link {
|
||||
padding: 5px 25px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-nav .nav-item:hover .nav-link, .custom_nav-container .navbar-nav .nav-item.active .nav-link {
|
||||
color: #000000;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler {
|
||||
padding: 0;
|
||||
width: 37px;
|
||||
height: 42px;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler span {
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 4px;
|
||||
background-color: #ffffff;
|
||||
margin: 7px 0;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler span::before, .custom_nav-container .navbar-toggler span::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
top: -10px;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler span::after {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="true"] {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="true"] span {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="true"] span::before, .custom_nav-container .navbar-toggler[aria-expanded="true"] span::after {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-1 {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
margin: 0;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-3 {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
margin: 0;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-1,
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-2,
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-3 {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.quote_btn-container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quote_btn-container a {
|
||||
color: #000000;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.quote_btn-container a span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.quote_btn-container a:hover {
|
||||
color: #f8842b;
|
||||
}
|
||||
|
||||
.quote_btn-container .quote_btn {
|
||||
display: inline-block;
|
||||
padding: 5px 25px;
|
||||
background-color: #f8842b;
|
||||
color: #ffffff;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid #f8842b;
|
||||
}
|
||||
|
||||
.quote_btn-container .quote_btn:hover {
|
||||
color: #ffffff;
|
||||
-webkit-transform: translateY(-3px);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/*end header section*/
|
||||
/* slider section */
|
||||
.slider_section {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 45px 0;
|
||||
}
|
||||
|
||||
.slider_section .row {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slider_section #customCarousel1 {
|
||||
width: 100%;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.slider_section .detail-box {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.slider_section .detail-box h1 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.slider_section .detail-box .btn-box {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin: 0 -5px;
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.slider_section .detail-box .btn-box a {
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
width: 185px;
|
||||
}
|
||||
|
||||
.slider_section .detail-box .btn-box .btn1 {
|
||||
display: inline-block;
|
||||
padding: 12px 15px;
|
||||
background-color: #5a2a8f;
|
||||
color: #ffffff;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid #5a2a8f;
|
||||
}
|
||||
|
||||
.slider_section .detail-box .btn-box .btn1:hover {
|
||||
color: #ffffff;
|
||||
-webkit-transform: translateY(-3px);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.slider_section .img-box img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slider_section .carousel-indicators {
|
||||
position: unset;
|
||||
margin: 0;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.slider_section .carousel-indicators li {
|
||||
background-color: #ffffff;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slider_section .carousel-indicators li.active {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-color: #f8842b;
|
||||
}
|
||||
|
||||
.service_section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.service_section .heading_container {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.service_section .box {
|
||||
margin-top: 25px;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.service_section .box::before {
|
||||
content: "";
|
||||
width: 275px;
|
||||
height: 275px;
|
||||
position: absolute;
|
||||
right: -137.5px;
|
||||
bottom: -137.5px;
|
||||
background-color: #faf8fd;
|
||||
z-index: -1;
|
||||
border-radius: 100%;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.service_section .box .img-box {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 125px;
|
||||
border-radius: 15px;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.service_section .box .img-box img {
|
||||
width: 75px;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.service_section .box .detail-box {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.service_section .box .detail-box h5 {
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service_section .box .detail-box a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.service_section .box:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.service_section .box:hover::before {
|
||||
-webkit-transform: scale(5);
|
||||
transform: scale(5);
|
||||
background-color: #7335b7;
|
||||
}
|
||||
|
||||
.service_section .box:hover img {
|
||||
-webkit-filter: invert(1);
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.service_section .btn-box {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.service_section .btn-box a {
|
||||
display: inline-block;
|
||||
padding: 10px 45px;
|
||||
background-color: #7335b7;
|
||||
color: #ffffff;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid #7335b7;
|
||||
}
|
||||
|
||||
.service_section .btn-box a:hover {
|
||||
color: #ffffff;
|
||||
-webkit-transform: translateY(-3px);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.about_section {
|
||||
background-color: #7335b7;
|
||||
color: #ffffff;
|
||||
border-radius: 250px 0 250px 0;
|
||||
}
|
||||
|
||||
.about_section .row {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about_section .img-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about_section .img-box img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.about_section .detail-box p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.about_section .detail-box a {
|
||||
display: inline-block;
|
||||
padding: 10px 45px;
|
||||
background-color: #f8842b;
|
||||
color: #ffffff;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid #f8842b;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.about_section .detail-box a:hover {
|
||||
color: #ffffff;
|
||||
-webkit-transform: translateY(-3px);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.case_section .heading_container {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.case_section .heading_container h2::before {
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.case_section .box {
|
||||
margin-top: 20px;
|
||||
background-color: #ffffff;
|
||||
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.case_section .box .img-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.case_section .box .img-box img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.case_section .box .detail-box {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.case_section .box .detail-box h5 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.case_section .box .detail-box p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.case_section .box .detail-box a {
|
||||
color: #7335b7;
|
||||
}
|
||||
|
||||
/* Gaya tambahan jika diperlukan */
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.client_section .box {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 45px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.client_section .box .img-box {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
min-width: 125px;
|
||||
position: relative;
|
||||
margin-bottom: -62.5px;
|
||||
}
|
||||
|
||||
.client_section .box .img-box img {
|
||||
width: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.client_section .box .client_info .client_name h5 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.client_section .box .client_info .client_name h6 {
|
||||
margin-bottom: 0;
|
||||
color: #7335b7;
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.client_section .box .client_info i {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.client_section .box p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.client_section .box .detail-box {
|
||||
background-color: #ffffff;
|
||||
background-color: #7335b7;
|
||||
color: #ffffff;
|
||||
border-radius: 15px;
|
||||
padding: 85px 45px 15px 45px;
|
||||
}
|
||||
|
||||
.client_section .carousel-indicators {
|
||||
position: unset;
|
||||
margin: 0;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.client_section .carousel-indicators li {
|
||||
background-color: #7335b7;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.client_section .carousel-indicators li.active {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #f8842b;
|
||||
}
|
||||
|
||||
.contact_section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contact_section form {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.contact_section input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
height: 50px;
|
||||
margin-bottom: 25px;
|
||||
padding-left: 15px;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
color: #000000;
|
||||
border: 1px solid #a5a5a5;
|
||||
}
|
||||
|
||||
.contact_section input::-webkit-input-placeholder {
|
||||
color: #1c1b1b;
|
||||
}
|
||||
|
||||
.contact_section input:-ms-input-placeholder {
|
||||
color: #1c1b1b;
|
||||
}
|
||||
|
||||
.contact_section input::-ms-input-placeholder {
|
||||
color: #1c1b1b;
|
||||
}
|
||||
|
||||
.contact_section input::placeholder {
|
||||
color: #1c1b1b;
|
||||
}
|
||||
|
||||
.contact_section input.message-box {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.contact_section button {
|
||||
font-family: "Poppins", sans-serif;
|
||||
display: inline-block;
|
||||
padding: 10px 65px;
|
||||
background-color: #7335b7;
|
||||
color: #ffffff;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid #7335b7;
|
||||
color: #fff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.contact_section button:hover {
|
||||
color: #ffffff;
|
||||
-webkit-transform: translateY(-3px);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.contact_section .map_container {
|
||||
height: 100%;
|
||||
min-height: 325px;
|
||||
overflow: hidden;
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
.contact_section .map_container .map {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.contact_section .map_container .map #googleMap {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer_container {
|
||||
background-color: #7335b7;
|
||||
color: #ffffff;
|
||||
border-radius: 350px 0 0 0;
|
||||
padding-top: 145px;
|
||||
}
|
||||
|
||||
/* info section */
|
||||
.info_section h4 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info_section .info_contact .contact_link_box {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info_section .info_contact .contact_link_box a {
|
||||
margin: 5px 0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.info_section .info_contact .contact_link_box a i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.info_section .info_contact .contact_link_box a:hover {
|
||||
color: #f8842b;
|
||||
}
|
||||
|
||||
.info_section .info_social {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.info_section .info_social a {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
border-radius: 100%;
|
||||
margin-right: 10px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.info_section .info_social a:hover {
|
||||
color: #f8842b;
|
||||
}
|
||||
|
||||
.info_section .info_links {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.info_section .info_links a {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.info_section .info_links a:hover {
|
||||
color: #f8842b;
|
||||
}
|
||||
|
||||
.info_section form input {
|
||||
border: none;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
color: #ffffff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.info_section form input::-webkit-input-placeholder {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.info_section form input:-ms-input-placeholder {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.info_section form input::-ms-input-placeholder {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.info_section form input::placeholder {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.info_section form button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 10px 55px;
|
||||
background-color: #f8842b;
|
||||
color: #ffffff;
|
||||
border-radius: 0;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid #f8842b;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.info_section form button:hover {
|
||||
color: #ffffff;
|
||||
-webkit-transform: translateY(-3px);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
/* end info section */
|
||||
/* footer section*/
|
||||
.footer_section {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer_section p {
|
||||
padding: 25px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer_section p a {
|
||||
color: inherit;
|
||||
}
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,763 @@
|
|||
$white: #ffffff;
|
||||
$black: #000000;
|
||||
$primary1: #7335b7;
|
||||
$primary2: #f8842b;
|
||||
$textCol: #1f1f1f;
|
||||
|
||||
// import fonts
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
|
||||
|
||||
@mixin main-font {
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
@mixin hero_btn($col1, $col2, $pad1, $pad2, $bRadius) {
|
||||
display: inline-block;
|
||||
padding: $pad1 $pad2;
|
||||
background-color: $col1;
|
||||
color: $col2;
|
||||
border-radius: $bRadius;
|
||||
transition: all 0.3s;
|
||||
border: 1px solid $col1;
|
||||
|
||||
&:hover {
|
||||
color: $col2;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin upperBold {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
body {
|
||||
@include main-font;
|
||||
color: #0c0c0c;
|
||||
background-color: #ffffff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.layout_padding {
|
||||
padding: 90px 0;
|
||||
}
|
||||
|
||||
.layout_margin {
|
||||
margin: 90px 0;
|
||||
}
|
||||
|
||||
.layout_padding2 {
|
||||
padding: 75px 0;
|
||||
}
|
||||
|
||||
.layout_padding2-top {
|
||||
padding-top: 75px;
|
||||
}
|
||||
|
||||
.layout_padding2-bottom {
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
|
||||
.layout_padding-top {
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
.layout_padding-bottom {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.heading_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
color: $primary1;
|
||||
}
|
||||
}
|
||||
|
||||
&.heading_center {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: initial;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn:focus {
|
||||
outline: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*header section*/
|
||||
.hero_area {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $primary1;
|
||||
border-radius: 0 0 350px 0;
|
||||
}
|
||||
|
||||
.sub_page {
|
||||
.hero_area {
|
||||
min-height: auto;
|
||||
border-radius: 0 0 45px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header_section {
|
||||
padding: 15px 0;
|
||||
|
||||
.container-fluid {
|
||||
padding-right: 25px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
span {
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom_nav-container {
|
||||
padding: 0;
|
||||
|
||||
.navbar-nav {
|
||||
margin: auto;
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
padding: 5px 25px;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: $black;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler {
|
||||
padding: 0;
|
||||
width: 37px;
|
||||
height: 42px;
|
||||
transition: all 0.3s;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 4px;
|
||||
background-color: $white;
|
||||
margin: 7px 0;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
top: -10px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
transform: rotate(360deg);
|
||||
|
||||
span {
|
||||
transform: rotate(45deg);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
transform: rotate(90deg);
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.s-1 {
|
||||
transform: rotate(45deg);
|
||||
margin: 0;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.s-2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.s-3 {
|
||||
transform: rotate(-45deg);
|
||||
margin: 0;
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded="false"] {
|
||||
|
||||
.s-1,
|
||||
.s-2,
|
||||
.s-3 {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quote_btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
text-transform: uppercase;
|
||||
|
||||
span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary2;
|
||||
}
|
||||
}
|
||||
|
||||
.quote_btn {
|
||||
@include hero_btn($primary2, $white, 5px, 25px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
/*end header section*/
|
||||
|
||||
/* slider section */
|
||||
.slider_section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 45px 0;
|
||||
|
||||
.row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#customCarousel1 {
|
||||
width: 100%;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
text-align: center;
|
||||
color: $white;
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 -5px;
|
||||
margin-top: 45px;
|
||||
|
||||
a {
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
width: 185px;
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
@include hero_btn(darken($color: $primary1, $amount: 10),
|
||||
$white,
|
||||
12px,
|
||||
15px,
|
||||
5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-box {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-indicators {
|
||||
position: unset;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 45px;
|
||||
|
||||
li {
|
||||
background-color: $white;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 100%;
|
||||
opacity: 1;
|
||||
|
||||
&.active {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-color: $primary2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end slider section
|
||||
|
||||
// service section
|
||||
|
||||
.service_section {
|
||||
text-align: center;
|
||||
|
||||
.heading_container {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 25px;
|
||||
// background: darken($color: $primary1, $amount: 10);
|
||||
// color: $white;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px 0 rgba($color: #000000, $alpha: 0.25);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 275px;
|
||||
height: 275px;
|
||||
position: absolute;
|
||||
right: -137.5px;
|
||||
bottom: -137.5px;
|
||||
background-color: lighten($color: $primary1, $amount: 52);
|
||||
z-index: -1;
|
||||
border-radius: 100%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 125px;
|
||||
border-radius: 15px;
|
||||
transition: all 0.3s;
|
||||
|
||||
img {
|
||||
width: 75px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
margin-top: 15px;
|
||||
|
||||
h5 {
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: scale(5);
|
||||
background-color: $primary1;
|
||||
}
|
||||
|
||||
color: $white;
|
||||
|
||||
img {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 45px;
|
||||
|
||||
a {
|
||||
@include hero_btn($primary1, $white, 10px, 45px, 5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end service section
|
||||
|
||||
// about section
|
||||
.about_section {
|
||||
background-color: $primary1;
|
||||
color: $white;
|
||||
border-radius: 250px 0 250px 0;
|
||||
|
||||
.row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
a {
|
||||
@include hero_btn($primary2, $white, 10px, 45px, 5px);
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end about section
|
||||
|
||||
// case section
|
||||
.case_section {
|
||||
.heading_container {
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
&::before {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 45px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 10px 0 rgba($color: #000000, $alpha: 0.15);
|
||||
text-align: center;
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
padding: 25px;
|
||||
|
||||
h5 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end case section
|
||||
|
||||
// client section
|
||||
|
||||
.client_section {
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 45px 0;
|
||||
text-align: center;
|
||||
|
||||
.img-box {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
min-width: 125px;
|
||||
position: relative;
|
||||
margin-bottom: -62.5px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.client_info {
|
||||
.client_name {
|
||||
h5 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-bottom: 0;
|
||||
color: $primary1;
|
||||
font-weight: normal;
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
background-color: $white;
|
||||
background-color: $primary1;
|
||||
color: $white;
|
||||
border-radius: 15px;
|
||||
padding: 85px 45px 15px 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-indicators {
|
||||
position: unset;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
background-color: $primary1;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
opacity: 1;
|
||||
|
||||
&.active {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: $primary2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end client section
|
||||
|
||||
// contact section
|
||||
.contact_section {
|
||||
position: relative;
|
||||
|
||||
form {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
height: 50px;
|
||||
margin-bottom: 25px;
|
||||
padding-left: 15px;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
color: $black;
|
||||
border: 1px solid #a5a5a5;
|
||||
|
||||
&::placeholder {
|
||||
color: #1c1b1b;
|
||||
}
|
||||
|
||||
&.message-box {
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@include main-font();
|
||||
@include hero_btn($primary1, $white, 10px, 65px, 3px);
|
||||
color: #fff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.map_container {
|
||||
height: 100%;
|
||||
min-height: 325px;
|
||||
overflow: hidden;
|
||||
margin-left: 45px;
|
||||
|
||||
.map {
|
||||
height: 100%;
|
||||
|
||||
#googleMap {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end contact section
|
||||
|
||||
.footer_container {
|
||||
background-color: $primary1;
|
||||
color: $white;
|
||||
border-radius: 350px 0 0 0;
|
||||
padding-top: 145px;
|
||||
}
|
||||
|
||||
/* info section */
|
||||
.info_section {
|
||||
h4 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info_contact {
|
||||
.contact_link_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
margin: 5px 0;
|
||||
color: $white;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info_social {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $white;
|
||||
border-radius: 100%;
|
||||
margin-right: 10px;
|
||||
font-size: 24px;
|
||||
|
||||
&:hover {
|
||||
color: $primary2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info_links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $primary2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
input {
|
||||
border: none;
|
||||
border-bottom: 1px solid $white;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
color: $white;
|
||||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@include hero_btn($primary2, $white, 10px, 55px, 0);
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* end info section */
|
||||
|
||||
/* footer section*/
|
||||
|
||||
.footer_section {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
padding: 25px 0;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end footer section
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -1,29 +1,18 @@
|
|||
// public/js/custom.js
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Ambil elemen input dengan ID "current-date"
|
||||
var currentDateInput = document.getElementById("current-date");
|
||||
|
||||
// Buat objek tanggal sekarang
|
||||
// to get current year
|
||||
function getYear() {
|
||||
var currentDate = new Date();
|
||||
var currentYear = currentDate.getFullYear();
|
||||
document.querySelector("#displayYear").innerHTML = currentYear;
|
||||
}
|
||||
|
||||
// Buat daftar nama hari dalam bahasa Indonesia
|
||||
var daysOfWeek = [
|
||||
"Minggu",
|
||||
"Senin",
|
||||
"Selasa",
|
||||
"Rabu",
|
||||
"Kamis",
|
||||
"Jumat",
|
||||
"Sabtu"
|
||||
];
|
||||
getYear();
|
||||
|
||||
// Ambil nama hari berdasarkan indeks hari dari objek tanggal (0 hingga 6)
|
||||
var dayOfWeek = daysOfWeek[currentDate.getDay()];
|
||||
|
||||
// Format tanggal dengan nama hari menjadi "Hari, YYYY-MM-DD" (atau format lain yang Anda inginkan)
|
||||
var formattedDate = dayOfWeek + ", " + currentDate.toISOString().slice(0, 10);
|
||||
|
||||
// Isi nilai input dengan tanggal yang telah diformat
|
||||
currentDateInput.value = formattedDate;
|
||||
});
|
||||
/** google_map js **/
|
||||
|
||||
function myMap() {
|
||||
var mapProp = {
|
||||
center: new google.maps.LatLng(40.712775, -74.005973),
|
||||
zoom: 18,
|
||||
};
|
||||
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,203 +1,445 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<!-- Basic -->
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<!-- Mobile Metas -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<!-- Site Metas -->
|
||||
<meta name="keywords" content="" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="" />
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<title>Lugx Gaming Shop HTML5 Template</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
|
||||
<title>MAN 3 BANYUWANGI</title>
|
||||
|
||||
|
||||
<!-- Additional CSS Files -->
|
||||
<link rel="stylesheet" href="{{ asset('css/fontawesome.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/templatemo-lugx-gaming.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/owl.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/animate.css') }}">
|
||||
<link rel="stylesheet"href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
|
||||
<!--
|
||||
<!-- bootstrap core css -->
|
||||
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.css') }}" />
|
||||
|
||||
TemplateMo 589 lugx gaming
|
||||
<!-- Swiper CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
|
||||
https://templatemo.com/tm-589-lugx-gaming
|
||||
<!-- font awesome style -->
|
||||
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />
|
||||
|
||||
-->
|
||||
</head>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="{{ asset('css/style.css') }}" rel="stylesheet" />
|
||||
<!-- responsive style -->
|
||||
<link href="{{ asset('css/responsive.css') }}" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- ***** Header Area Start ***** -->
|
||||
<header class="header-area header-sticky">
|
||||
<div class="hero_area">
|
||||
<!-- header section strats -->
|
||||
<header class="header_section">
|
||||
<div class="container-fluid">
|
||||
<nav class="navbar navbar-expand-lg custom_nav-container ">
|
||||
<a class="navbar-brand" href="home.blade.php">
|
||||
<span>
|
||||
MAN 3 BANYUWANGI
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class=""> </span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav ">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html"> About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="service.html">Extracuricular</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="quote_btn-container">
|
||||
<a href="login.blade.php" class="quote_btn">
|
||||
Get A Quote
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<!-- end header section -->
|
||||
|
||||
<!-- slider section -->
|
||||
<section class="slider_section ">
|
||||
<div id="customCarousel1" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<div class="container ">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="img-box">
|
||||
<img src="{{ asset('img/about-img.png') }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<h1>
|
||||
Digital Marketing Experts
|
||||
</h1>
|
||||
<p>
|
||||
Aenean scelerisque felis ut orci condimentum laoreet. Integer nisi nisl, convallis et augue sit amet, lobortis semper quam.
|
||||
</p>
|
||||
<div class="btn-box">
|
||||
<a href="" class="btn1">
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- end slider section -->
|
||||
</div>
|
||||
|
||||
<!-- service section -->
|
||||
<section class="service_section layout_padding">
|
||||
<div class="container">
|
||||
<div class="heading_container">
|
||||
<h2>
|
||||
Category Extracuricular
|
||||
</h2>
|
||||
<p>
|
||||
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="{{ asset('img/s3.png') }}" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>
|
||||
Olahraga
|
||||
</h5>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
</p>
|
||||
<a href="">
|
||||
<span>
|
||||
Read More
|
||||
</span>
|
||||
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="{{ asset('img/s1.png') }}" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>
|
||||
Seni
|
||||
</h5>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
</p>
|
||||
<a href="">
|
||||
<span>
|
||||
Read More
|
||||
</span>
|
||||
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="{{ asset('img/s2.png') }}" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>
|
||||
KSM
|
||||
</h5>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
</p>
|
||||
<a href="">
|
||||
<span>
|
||||
Read More
|
||||
</span>
|
||||
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end service section -->
|
||||
|
||||
<!-- case section -->
|
||||
|
||||
<section class="case_section layout_padding">
|
||||
<div class="container">
|
||||
<div class="heading_container">
|
||||
<h2>Studi Kasus Kami</h2>
|
||||
</div>
|
||||
<!-- Kontainer Swiper -->
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<!-- Slide 1 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="img/case-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>Sit Amet Consectetur Adipisicing Elit</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Slide 2 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="img/case-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Slide 2 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="img/case-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Slide 2 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="img/case-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Slide 2 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="img/case-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Slide 2 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="img/case-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Slide 2 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="img/case-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Slide 2 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="img/case-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Slide 2 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="img/case-2.jpg" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tambahkan slide lainnya sesuai kebutuhan -->
|
||||
</div>
|
||||
<!-- Tombol Navigasi -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- end case section -->
|
||||
|
||||
<div class="footer_container">
|
||||
<!-- info section -->
|
||||
|
||||
<section class="info_section ">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<nav class="main-nav">
|
||||
<!-- ***** Logo Start ***** -->
|
||||
<a href="index.html" class="logo">
|
||||
<img src={{ asset('img/logo.png') }} alt="" style="width: 158px;">
|
||||
</a>
|
||||
<!-- ***** Logo End ***** -->
|
||||
<!-- ***** Menu Start ***** -->
|
||||
<ul class="nav">
|
||||
<li><a href="index.html" class="active">Home</a></li>
|
||||
<li><a href="shop.html">Ekstrakurikuler</a></li>
|
||||
<li><a href="#">Login/Register</a></li>
|
||||
</ul>
|
||||
<a class='menu-trigger'>
|
||||
<span>Menu</span>
|
||||
</a>
|
||||
<!-- ***** Menu End ***** -->
|
||||
</nav>
|
||||
<div class="col-md-6 col-lg-3 ">
|
||||
<div class="info_detail">
|
||||
<h4>
|
||||
Digian
|
||||
</h4>
|
||||
<p>
|
||||
Necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- ***** Header Area End ***** -->
|
||||
|
||||
<div class="main-banner">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 align-self-center">
|
||||
<div class="caption header-text">
|
||||
<h2>BEST GAMING SITE EVER!</h2>
|
||||
<h6>Welcome to lugx</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 offset-lg-2">
|
||||
<div class="right-image">
|
||||
<img src="{{ asset('img/banner-image.jpg') }}" alt="">
|
||||
<span class="price">$22</span>
|
||||
<span class="offer">-40%</span>
|
||||
<div class="col-md-6 col-lg-2 mx-auto">
|
||||
<div class="info_link_box">
|
||||
<h4>
|
||||
Links
|
||||
</h4>
|
||||
<div class="info_links">
|
||||
<a class="" href="index.html">
|
||||
Home
|
||||
</a>
|
||||
<a class="" href="about.html">
|
||||
About
|
||||
</a>
|
||||
<a class="" href="service.html">
|
||||
Services
|
||||
</a>
|
||||
<a class="" href="contact.html">
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3 ">
|
||||
<h4>
|
||||
Subscribe
|
||||
</h4>
|
||||
<form action="#">
|
||||
<input type="text" placeholder="Enter email" />
|
||||
<button type="submit">
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3 mb-0 ml-auto">
|
||||
<div class="info_contact">
|
||||
<h4>
|
||||
Address
|
||||
</h4>
|
||||
<div class="contact_link_box">
|
||||
<a href="">
|
||||
<i class="fa fa-map-marker" aria-hidden="true"></i>
|
||||
<span>
|
||||
Location
|
||||
</span>
|
||||
</a>
|
||||
<a href="">
|
||||
<i class="fa fa-phone" aria-hidden="true"></i>
|
||||
<span>
|
||||
Call +01 1234567890
|
||||
</span>
|
||||
</a>
|
||||
<a href="">
|
||||
<i class="fa fa-envelope" aria-hidden="true"></i>
|
||||
<span>
|
||||
demo@gmail.com
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info_social">
|
||||
<a href="">
|
||||
<i class="fa fa-facebook" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a href="">
|
||||
<i class="fa fa-twitter" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a href="">
|
||||
<i class="fa fa-linkedin" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a href="">
|
||||
<i class="fa fa-instagram" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- end info section -->
|
||||
|
||||
<!-- footer section -->
|
||||
<footer class="footer_section">
|
||||
<div class="container">
|
||||
<p>
|
||||
© <span id="displayYear"></span> All Rights Reserved By
|
||||
<a href="https://html.design/">Free Html Templates</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- footer section -->
|
||||
</div>
|
||||
|
||||
<div class="features">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="#">
|
||||
<div class="item">
|
||||
<div class="image">
|
||||
<img src="{{ asset('img/featured-01.png') }}" alt="" style="max-width: 44px;">
|
||||
</div>
|
||||
<h4>Olahraga</h4>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="#">
|
||||
<div class="item">
|
||||
<div class="image">
|
||||
<img src="{{ asset('img/featured-02.png') }}" alt="" style="max-width: 44px;">
|
||||
</div>
|
||||
<h4>Seni</h4>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="#">
|
||||
<div class="item">
|
||||
<div class="image">
|
||||
<img src="{{ asset('img/featured-04.png') }}" alt="" style="max-width: 44px;">
|
||||
</div>
|
||||
<h4>KSM</h4>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- jQery -->
|
||||
<script src="js/jquery-3.4.1.min.js"></script>
|
||||
<!-- popper js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
|
||||
</script>
|
||||
<!-- bootstrap js -->
|
||||
<script src="js/bootstrap.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
<!-- Google Map -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap"></script>
|
||||
<!-- End Google Map -->
|
||||
<!-- Swiper JS -->
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||||
<script>
|
||||
// Inisialisasi Swiper
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
slidesPerView: 6, // Set jumlah slide yang terlihat
|
||||
spaceBetween: 10, // Set ruang antara slide
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="section trending">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="section-heading">
|
||||
<h4>Ekstrakurikuler</h4>
|
||||
<h6>Daftar Ekstrakurikuler MAN 3 Banyuwangi</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="item">
|
||||
<div class="thumb">
|
||||
<a href="product-details.html"><img src="{{ asset('img/trending-01.jpg') }}" alt=""></a>
|
||||
<span class="price"><em>$28</em>$20</span>
|
||||
</div>
|
||||
<div class="down-content">
|
||||
<span class="category">Action</span>
|
||||
<h4>Assasin Creed</h4>
|
||||
<a href="product-details.html"><i class="fa fa-shopping-bag"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="item">
|
||||
<div class="thumb">
|
||||
<a href="product-details.html"><img src="{{ asset('img/trending-02.jpg') }}" alt=""></a>
|
||||
<span class="price">$44</span>
|
||||
</div>
|
||||
<div class="down-content">
|
||||
<span class="category">Action</span>
|
||||
<h4>Assasin Creed</h4>
|
||||
<a href="product-details.html"><i class="fa fa-shopping-bag"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="item">
|
||||
<div class="thumb">
|
||||
<a href="product-details.html"><img src="{{ asset('img/trending-02.jpg') }}" alt=""></a>
|
||||
<span class="price"><em>$64</em>$44</span>
|
||||
</div>
|
||||
<div class="down-content">
|
||||
<span class="category">Action</span>
|
||||
<h4>Assasin Creed</h4>
|
||||
<a href="product-details.html"><i class="fa fa-shopping-bag"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="item">
|
||||
<div class="thumb">
|
||||
<a href="product-details.html"><img src="{{ asset('img/trending-02.jpg') }}" alt=""></a>
|
||||
<span class="price">$32</span>
|
||||
</div>
|
||||
<div class="down-content">
|
||||
<span class="category">Action</span>
|
||||
<h4>Assasin Creed</h4>
|
||||
<a href="product-details.html"><i class="fa fa-shopping-bag"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="col-lg-12">
|
||||
<p>Copyright © 2048 LUGX Gaming Company. All rights reserved. <a rel="nofollow" href="https://templatemo.com" target="_blank">Design: TemplateMo</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<!-- Bootstrap core JavaScript -->
|
||||
<script src="{{ asset('/js/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('/js/bootstrap.min.js') }}"></script>
|
||||
<script src="{{ asset('/js/isotope.min.js') }}"></script>
|
||||
<script src="{{ asset('/js/owl-carousel.js') }}"></script>
|
||||
<script src="{{ asset('/js/counter.js') }}"></script>
|
||||
<script src="{{ asset('/js/custom.js') }}"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue