253 changed files with 81778 additions and 84 deletions
@ -0,0 +1,3 @@ |
|||||
|
*.png filter=lfs diff=lfs merge=lfs -text |
||||
|
*.jpg filter=lfs diff=lfs merge=lfs -text |
||||
|
*.svg filter=lfs diff=lfs merge=lfs -text |
||||
File diff suppressed because it is too large
@ -0,0 +1,197 @@ |
|||||
|
@media (max-width: 1250px) { |
||||
|
.header_section::before { |
||||
|
width: 75%; |
||||
|
} |
||||
|
|
||||
|
.header_section { |
||||
|
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 22% 100%, 20% 86%, 0 84%, 0 0); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1120px) {} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
.hero_area { |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.hero_area::before { |
||||
|
|
||||
|
background: linear-gradient(to bottom, transparent, #000000); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.navbar-brand.brand_mobile { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.navbar-brand.brand_desktop { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.header_section .main_nav { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
#navbarSupportedContent { |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
|
||||
|
.header_section { |
||||
|
padding: 10px 0; |
||||
|
clip-path: none; |
||||
|
} |
||||
|
|
||||
|
.header_section::before, |
||||
|
.main_nav .top_nav { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.slider_section { |
||||
|
padding: 45px 0; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading { |
||||
|
top: 75px; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading h2 { |
||||
|
font-size: 7rem; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav { |
||||
|
|
||||
|
flex-direction: row; |
||||
|
top: initial; |
||||
|
bottom: -45px; |
||||
|
right: 50%; |
||||
|
transform: translateX(50%); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-prev, |
||||
|
.class_section .owl-carousel .owl-nav .owl-next { |
||||
|
margin: 2px 5px; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_container { |
||||
|
margin-bottom: 75px; |
||||
|
} |
||||
|
|
||||
|
.sub_page .class_section .owl-carousel .owl-nav { |
||||
|
top: initial; |
||||
|
bottom: 65px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 767px) { |
||||
|
.slider_section #carouselExampleIndicators { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.slider_section #carouselExampleIndicators .box { |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading { |
||||
|
left: 0; |
||||
|
opacity: .4; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.about_section .about_container { |
||||
|
background-size: auto; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box button { |
||||
|
width: 45px; |
||||
|
height: 45px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box button img { |
||||
|
width: 15px; |
||||
|
margin-left: 3px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box { |
||||
|
margin-left: 25px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box.b2 .detail-box { |
||||
|
|
||||
|
padding-left: 0; |
||||
|
padding-right: 25px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.blog_section .box.b2 .detail-box .img_date { |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.info_section .info_main-row { |
||||
|
flex-direction: column-reverse; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section { |
||||
|
margin-top: 45px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section form { |
||||
|
padding-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.footer_section .social_box { |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.footer_section .social_box a { |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.footer_section p { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
.slider_section .slider_heading { |
||||
|
left: -70px; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container { |
||||
|
|
||||
|
padding: 45px 15px 45px 25px; |
||||
|
} |
||||
|
|
||||
|
.client_section .box { |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 480px) {} |
||||
|
|
||||
|
@media (max-width: 400px) { |
||||
|
.slider_section .slider_heading { |
||||
|
left: -125px; |
||||
|
opacity: .2; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-prev, |
||||
|
.slider_section .carousel-control-next { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 360px) {} |
||||
|
|
||||
|
@media (min-width: 1200px) { |
||||
|
.container { |
||||
|
max-width: 1170px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,955 @@ |
|||||
|
body { |
||||
|
font-family: "Poppins", sans-serif; |
||||
|
color: #040000; |
||||
|
background-color: #000000; |
||||
|
} |
||||
|
|
||||
|
.layout_padding { |
||||
|
padding-top: 40px; |
||||
|
padding-bottom: 40px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2 { |
||||
|
padding: 45px 0; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2-top { |
||||
|
padding-top: 45px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2-bottom { |
||||
|
padding-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding-top { |
||||
|
padding-top: 120px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding-bottom { |
||||
|
padding-bottom: 120px; |
||||
|
} |
||||
|
|
||||
|
.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 { |
||||
|
font-weight: bold; |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
text-transform: uppercase; |
||||
|
color: #010201; |
||||
|
} |
||||
|
|
||||
|
/*header section*/ |
||||
|
.hero_area { |
||||
|
height: 100vh; |
||||
|
|
||||
|
background-repeat: no-repeat; |
||||
|
background-size: cover; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.hero_area::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(transparent), to(#000000)); |
||||
|
background: linear-gradient(to bottom, transparent, transparent, #000000); |
||||
|
} |
||||
|
|
||||
|
.sub_page .hero_area { |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.sub_page .class_section .owl-carousel .owl-nav { |
||||
|
top: 55%; |
||||
|
} |
||||
|
|
||||
|
.header_section { |
||||
|
background-color: #ffffff; |
||||
|
position: relative; |
||||
|
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
||||
|
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
||||
|
} |
||||
|
|
||||
|
.header_section::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
width: 62%; |
||||
|
height: 45px; |
||||
|
background: #080203; |
||||
|
z-index: 1; |
||||
|
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
||||
|
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
||||
|
} |
||||
|
|
||||
|
.header_section .nav_container { |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.menu_width { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
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_nav { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-pack: justify; |
||||
|
-ms-flex-pack: justify; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.main_nav { |
||||
|
position: relative; |
||||
|
z-index: 9; |
||||
|
} |
||||
|
|
||||
|
.main_nav .top_nav ul { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.main_nav .top_nav ul li { |
||||
|
list-style-type: none; |
||||
|
} |
||||
|
|
||||
|
.main_nav .top_nav ul li a { |
||||
|
display: inline-block; |
||||
|
color: #ffffff; |
||||
|
margin: 10px 0 10px 35px; |
||||
|
} |
||||
|
|
||||
|
.main_nav .top_nav ul li a img { |
||||
|
max-width: 25px; |
||||
|
max-height: 25px; |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container.navbar-expand-lg .navbar-nav .nav-item .nav-link { |
||||
|
padding: 10px 20px; |
||||
|
color: #212121; |
||||
|
text-align: center; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
|
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .nav_search-btn { |
||||
|
background-image: url(../images/search-icon.png); |
||||
|
background-size: 22px; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position-y: 7px; |
||||
|
width: 35px; |
||||
|
height: 35px; |
||||
|
padding: 0; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.navbar-brand { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.navbar-brand img { |
||||
|
width: 125px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
.navbar-brand.brand_mobile { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container { |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .navbar-toggler { |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .navbar-toggler .navbar-toggler-icon { |
||||
|
background-image: url(../images/menu.png); |
||||
|
background-size: 55px; |
||||
|
} |
||||
|
|
||||
|
/*end header section*/ |
||||
|
/* slider section */ |
||||
|
.slider_section { |
||||
|
height: calc(100% - 80px); |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.slider_section #carouselExampleIndicators { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.slider_section .row .col-md-10 { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading { |
||||
|
-webkit-transform: rotate(270.5deg) scaleX(-1); |
||||
|
transform: rotate(270.5deg) scaleX(-1); |
||||
|
position: absolute; |
||||
|
left: -150px; |
||||
|
top: -25px; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading h2 { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
font-size: 10rem; |
||||
|
text-transform: uppercase; |
||||
|
text-orientation: upright; |
||||
|
font-weight: bold; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading h2 span { |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.slider_section .detail-box h1 { |
||||
|
font-size: 3rem; |
||||
|
font-weight: bold; |
||||
|
text-transform: uppercase; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.slider_section .detail-box hr { |
||||
|
margin: 0 auto; |
||||
|
border: none; |
||||
|
width: 1.5px; |
||||
|
height: 65px; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.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-top: 35px; |
||||
|
} |
||||
|
|
||||
|
.slider_section .detail-box .btn-box .btn-1 { |
||||
|
display: inline-block; |
||||
|
padding: 10px 35px; |
||||
|
background-color: #000000; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: 35px; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.slider_section .detail-box .btn-box .btn-1:hover { |
||||
|
background-color: #ffffff; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.slider_section #carouselExampleIndicators { |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.slider_section #carouselExampleIndicators .box { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-pack: start; |
||||
|
-ms-flex-pack: start; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-indicators { |
||||
|
position: unset; |
||||
|
margin: 0 70px 45px 70px; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-indicators li { |
||||
|
text-indent: unset; |
||||
|
border: none; |
||||
|
background-color: transparent; |
||||
|
color: #ffffff; |
||||
|
font-weight: bold; |
||||
|
font-size: 2rem; |
||||
|
opacity: 1; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-indicators li.active { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-prev, |
||||
|
.slider_section .carousel-control-next { |
||||
|
position: absolute; |
||||
|
top: 45%; |
||||
|
left: initial; |
||||
|
right: 25px; |
||||
|
width: 55px; |
||||
|
height: 55px; |
||||
|
border: none; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 8px; |
||||
|
background-position: center; |
||||
|
background-color: #000000; |
||||
|
border-radius: 100%; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-prev:hover, |
||||
|
.slider_section .carousel-control-next:hover { |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-prev { |
||||
|
background-image: url(../images/prev.png); |
||||
|
-webkit-transform: translateY(57%); |
||||
|
transform: translateY(57%); |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-prev:hover { |
||||
|
background-image: url(../images/prev-grey.png); |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-next { |
||||
|
background-image: url(../images/next.png); |
||||
|
-webkit-transform: translateY(-57%); |
||||
|
transform: translateY(-57%); |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-next:hover { |
||||
|
background-image: url(../images/next-grey.png); |
||||
|
} |
||||
|
|
||||
|
.slider_section .number_box { |
||||
|
width: 50px; |
||||
|
position: absolute; |
||||
|
left: 25px; |
||||
|
top: 50%; |
||||
|
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; |
||||
|
color: #000000; |
||||
|
-webkit-transform: translateY(-50%); |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
|
||||
|
.slider_section .number_box hr { |
||||
|
border: none; |
||||
|
width: 1px; |
||||
|
height: 200px; |
||||
|
background-color: #000000; |
||||
|
margin: 2rem 0; |
||||
|
} |
||||
|
|
||||
|
/* end slider section */ |
||||
|
.about_section { |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.about_section .heading_container h2 { |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container { |
||||
|
padding: 45px; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container .detail-box { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-box-direction: normal; |
||||
|
-ms-flex-direction: column; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container .detail-box p { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container .detail-box hr { |
||||
|
margin: 0 auto; |
||||
|
border: none; |
||||
|
width: 1.5px; |
||||
|
height: 125px; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container .detail-box a { |
||||
|
display: inline-block; |
||||
|
padding: 8px 35px; |
||||
|
background-color: #000000; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: 35px; |
||||
|
color: #ffffff; |
||||
|
margin: 35px auto 0 auto; |
||||
|
-webkit-box-shadow: 0 0 35px 0 rgba(99, 247, 79, 0.7); |
||||
|
box-shadow: 0 0 35px 0 rgba(99, 247, 79, 0.7); |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container .detail-box a:hover { |
||||
|
background-color: #ffffff; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.class_section { |
||||
|
color: #ffffff; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.class_section .row > div { |
||||
|
position: unset; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-ms-flex-wrap: wrap; |
||||
|
flex-wrap: wrap; |
||||
|
margin-top: 45px; |
||||
|
-webkit-box-pack: center; |
||||
|
-ms-flex-pack: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box { |
||||
|
position: relative; |
||||
|
padding-left: 75px; |
||||
|
background-color: #000000; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-align: end; |
||||
|
-ms-flex-align: end; |
||||
|
align-items: flex-end; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 55px 0; |
||||
|
border-radius: 10px; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box button { |
||||
|
background-color: #292929; |
||||
|
border: none; |
||||
|
width: 55px; |
||||
|
height: 55px; |
||||
|
margin: 0 10px; |
||||
|
border-radius: 100%; |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box button img { |
||||
|
width: 20px; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box h2 { |
||||
|
margin: 0; |
||||
|
text-transform: uppercase; |
||||
|
color: #ffffff; |
||||
|
font-weight: bold; |
||||
|
line-height: 55px; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .btn-box { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .btn-box a { |
||||
|
display: inline-block; |
||||
|
padding: 10px 45px; |
||||
|
background-color: #000000; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: 30px; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .btn-box a:hover { |
||||
|
background-color: #ffffff; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel { |
||||
|
position: unset; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-box-direction: reverse; |
||||
|
-ms-flex-direction: column-reverse; |
||||
|
flex-direction: column-reverse; |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
padding: 0 10px; |
||||
|
margin-top: 55px; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
right: 45px; |
||||
|
-webkit-transform: translateY(-100%); |
||||
|
transform: translateY(-100%); |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-prev, |
||||
|
.class_section .owl-carousel .owl-nav .owl-next { |
||||
|
background-color: #000000; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
background-size: 12px; |
||||
|
border-radius: 100%; |
||||
|
outline: none; |
||||
|
margin: 2px 0; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-prev:hover, |
||||
|
.class_section .owl-carousel .owl-nav .owl-next:hover { |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-prev { |
||||
|
width: 75px; |
||||
|
height: 75px; |
||||
|
background-image: url(../images/prev.png); |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-prev:hover { |
||||
|
background-image: url(../images/prev-grey.png); |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-next { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
background-image: url(../images/next.png); |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-next:hover { |
||||
|
background-image: url(../images/next-grey.png); |
||||
|
} |
||||
|
|
||||
|
.blog_section { |
||||
|
color: #ffffff; |
||||
|
overflow-x: hidden; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box { |
||||
|
margin: 45px 0; |
||||
|
background-color: #252525; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .img-box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .img-box img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box { |
||||
|
position: relative; |
||||
|
padding-top: 75px; |
||||
|
padding-bottom: 35px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box .img_date { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 75px; |
||||
|
height: 75px; |
||||
|
border-radius: 100%; |
||||
|
text-align: center; |
||||
|
background-color: #000000; |
||||
|
color: #ffffff; |
||||
|
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; |
||||
|
-webkit-transform: translateY(-50%); |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box .img_date h6 { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box h3 { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box a { |
||||
|
display: inline-block; |
||||
|
padding: 8px 25px; |
||||
|
background-color: #000000; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: 35px; |
||||
|
color: #ffffff; |
||||
|
margin-top: 35px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box a:hover { |
||||
|
background-color: #ffffff; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box.b1 .detail-box { |
||||
|
padding-right: 35px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box.b2 .detail-box { |
||||
|
padding-left: 35px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box.b2 .detail-box .img_date { |
||||
|
left: 35px; |
||||
|
} |
||||
|
|
||||
|
.client_section { |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.client_section .heading_container { |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
margin-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
.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: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .img-box { |
||||
|
width: 125px; |
||||
|
border-radius: 100%; |
||||
|
margin-bottom: -62px; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .img-box img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .detail-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; |
||||
|
padding: 95px 25px 45px 25px; |
||||
|
background-color: #050304; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .detail-box h4 { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .detail-box p { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .detail-box img { |
||||
|
width: 35px; |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
.client_section .owl-carousel .owl-nav { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-pack: center; |
||||
|
-ms-flex-pack: center; |
||||
|
justify-content: center; |
||||
|
padding: 0 10px; |
||||
|
margin-top: 55px; |
||||
|
} |
||||
|
|
||||
|
.client_section .owl-carousel .owl-nav .owl-prev, |
||||
|
.client_section .owl-carousel .owl-nav .owl-next { |
||||
|
width: 55px; |
||||
|
height: 50px; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
background-size: 12px; |
||||
|
border-radius: 10px; |
||||
|
outline: none; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.client_section .owl-carousel .owl-nav .owl-prev { |
||||
|
background-image: url(../images/prev-arrow.png); |
||||
|
background-color: #000000; |
||||
|
-webkit-transform: translateX(10px); |
||||
|
transform: translateX(10px); |
||||
|
background-position: 15px center; |
||||
|
} |
||||
|
|
||||
|
.client_section .owl-carousel .owl-nav .owl-next { |
||||
|
background-image: url(../images/next-arrow.png); |
||||
|
background-color: #ffffff; |
||||
|
-webkit-transform: translateX(-10px); |
||||
|
transform: translateX(-10px); |
||||
|
} |
||||
|
|
||||
|
.info_section .info_main-row { |
||||
|
-webkit-box-align: end; |
||||
|
-ms-flex-align: end; |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section h2 { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section form { |
||||
|
margin-top: 45px; |
||||
|
padding-right: 35px; |
||||
|
margin-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input { |
||||
|
width: 100%; |
||||
|
border: none; |
||||
|
height: 50px; |
||||
|
margin-bottom: 25px; |
||||
|
padding-left: 25px; |
||||
|
background-color: #000; |
||||
|
outline: none; |
||||
|
color: #ffffff; |
||||
|
border-radius: 45px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input::-webkit-input-placeholder { |
||||
|
color: #737272; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input:-ms-input-placeholder { |
||||
|
color: #737272; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input::-ms-input-placeholder { |
||||
|
color: #737272; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input::placeholder { |
||||
|
color: #737272; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input.message-box { |
||||
|
height: 135px; |
||||
|
border-radius: 25px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section button { |
||||
|
border: none; |
||||
|
display: inline-block; |
||||
|
padding: 12px 55px; |
||||
|
background-color: #ffffff; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: 35px; |
||||
|
color: #000000; |
||||
|
margin-top: 35px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section button:hover { |
||||
|
background-color: #000000; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section .map_container { |
||||
|
height: 100%; |
||||
|
min-height: 325px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section .map_container .map-responsive { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.info_section .img-box img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/* footer section*/ |
||||
|
.footer_section { |
||||
|
margin: 25px 0; |
||||
|
} |
||||
|
|
||||
|
.footer_section .social_box { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.footer_section .social_box a { |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
|
||||
|
.footer_section .social_box a img { |
||||
|
max-width: 25px; |
||||
|
max-height: 25px; |
||||
|
} |
||||
|
|
||||
|
.footer_section p { |
||||
|
margin: 0; |
||||
|
margin-top: 25px; |
||||
|
color: #1c1b1b; |
||||
|
} |
||||
|
|
||||
|
.footer_section a { |
||||
|
color: #1c1b1b; |
||||
|
} |
||||
|
|
||||
|
/* end footer section*/ |
||||
|
/*# sourceMappingURL=style.css.map */ |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,889 @@ |
|||||
|
$white: #ffffff; |
||||
|
$black: #000000; |
||||
|
$btnBlack: #151615; |
||||
|
$primary: #000000; |
||||
|
|
||||
|
@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; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: $bRadius; |
||||
|
color: $col2; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: $col2; |
||||
|
color: $col1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin upperBold { |
||||
|
text-transform: uppercase; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
@mixin flexCenter { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
@mixin flexColumnCenter { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
@include main-font; |
||||
|
color: #040000; |
||||
|
background-color: $primary; |
||||
|
} |
||||
|
|
||||
|
.layout_padding { |
||||
|
padding-top: 120px; |
||||
|
padding-bottom: 120px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2 { |
||||
|
padding: 45px 0; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2-top { |
||||
|
padding-top: 45px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2-bottom { |
||||
|
padding-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding-top { |
||||
|
padding-top: 120px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding-bottom { |
||||
|
padding-bottom: 120px; |
||||
|
} |
||||
|
|
||||
|
.heading_container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
h2 { |
||||
|
font-weight: bold; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
text-transform: uppercase; |
||||
|
color: #010201; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/*header section*/ |
||||
|
|
||||
|
.hero_area { |
||||
|
height: 100vh; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: cover; |
||||
|
position: relative; |
||||
|
|
||||
|
&::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: linear-gradient(to bottom, transparent, transparent, $primary); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sub_page { |
||||
|
.hero_area { |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav { |
||||
|
top: 55%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.header_section { |
||||
|
background-color: $white; |
||||
|
position: relative; |
||||
|
|
||||
|
&::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
width: 62%; |
||||
|
height: 45px; |
||||
|
background: #080203; |
||||
|
z-index: 1; |
||||
|
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.nav_container { |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.menu_width { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
a, |
||||
|
a:hover, |
||||
|
a:focus { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
a:hover, |
||||
|
a:focus { |
||||
|
color: initial; |
||||
|
} |
||||
|
|
||||
|
.btn, |
||||
|
.btn:focus { |
||||
|
outline: none !important; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
.header_nav { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.main_nav { |
||||
|
position: relative; |
||||
|
z-index: 9; |
||||
|
|
||||
|
.top_nav { |
||||
|
ul { |
||||
|
display: flex; |
||||
|
margin: 0; |
||||
|
|
||||
|
li { |
||||
|
list-style-type: none; |
||||
|
|
||||
|
a { |
||||
|
display: inline-block; |
||||
|
color: $white; |
||||
|
margin: 10px 0 10px 35px; |
||||
|
|
||||
|
img { |
||||
|
max-width: 25px; |
||||
|
max-height: 25px; |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container.navbar-expand-lg .navbar-nav { |
||||
|
.nav-item { |
||||
|
.nav-link { |
||||
|
padding: 10px 20px; |
||||
|
color: #212121; |
||||
|
text-align: center; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
a, |
||||
|
a:hover, |
||||
|
a:focus { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
a:hover, |
||||
|
a:focus { |
||||
|
color: initial; |
||||
|
} |
||||
|
|
||||
|
.btn, |
||||
|
.btn:focus { |
||||
|
outline: none !important; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .nav_search-btn { |
||||
|
background-image: url(../images/search-icon.png); |
||||
|
background-size: 22px; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position-y: 7px; |
||||
|
width: 35px; |
||||
|
height: 35px; |
||||
|
padding: 0; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.navbar-brand { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
width: 125px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
&.brand_mobile { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.custom_nav-container { |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .navbar-toggler { |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .navbar-toggler .navbar-toggler-icon { |
||||
|
background-image: url(../images/menu.png); |
||||
|
background-size: 55px; |
||||
|
} |
||||
|
|
||||
|
/*end header section*/ |
||||
|
|
||||
|
/* slider section */ |
||||
|
|
||||
|
.slider_section { |
||||
|
height: calc(100% - 80px); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
#carouselExampleIndicators { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.row { |
||||
|
.col-md-10 { |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.slider_heading { |
||||
|
transform: rotate(270.5deg) scaleX(-1); |
||||
|
position: absolute; |
||||
|
left: -150px; |
||||
|
top: -25px; |
||||
|
|
||||
|
h2 { |
||||
|
display: flex; |
||||
|
font-size: 10rem; |
||||
|
text-transform: uppercase; |
||||
|
text-orientation: upright; |
||||
|
font-weight: bold; |
||||
|
color: $white; |
||||
|
|
||||
|
span { |
||||
|
color: $primary; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail-box { |
||||
|
h1 { |
||||
|
font-size: 3rem; |
||||
|
font-weight: bold; |
||||
|
text-transform: uppercase; |
||||
|
color: $white; |
||||
|
} |
||||
|
|
||||
|
hr { |
||||
|
margin: 0 auto; |
||||
|
border: none; |
||||
|
width: 1.5px; |
||||
|
height: 65px; |
||||
|
background-color: $white; |
||||
|
} |
||||
|
|
||||
|
.btn-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin-top: 35px; |
||||
|
|
||||
|
.btn-1 { |
||||
|
@include hero_btn($black, $white, 10px, 35px, 35px); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
#carouselExampleIndicators { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
.box { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.carousel-indicators { |
||||
|
position: unset; |
||||
|
margin: 0 70px 45px 70px; |
||||
|
|
||||
|
|
||||
|
li { |
||||
|
text-indent: unset; |
||||
|
border: none; |
||||
|
background-color: transparent; |
||||
|
color: $white; |
||||
|
font-weight: bold; |
||||
|
font-size: 2rem; |
||||
|
opacity: 1; |
||||
|
display: none; |
||||
|
|
||||
|
&.active { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.carousel-control-prev, |
||||
|
.carousel-control-next { |
||||
|
position: absolute; |
||||
|
top: 45%; |
||||
|
left: initial; |
||||
|
right: 25px; |
||||
|
width: 55px; |
||||
|
height: 55px; |
||||
|
border: none; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 8px; |
||||
|
background-position: center; |
||||
|
background-color: $primary; |
||||
|
border-radius: 100%; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: $white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.carousel-control-prev { |
||||
|
|
||||
|
background-image: url(../images/prev.png); |
||||
|
|
||||
|
&:hover { |
||||
|
background-image: url(../images/prev-grey.png); |
||||
|
} |
||||
|
|
||||
|
transform: translateY(57%); |
||||
|
} |
||||
|
|
||||
|
.carousel-control-next { |
||||
|
background-image: url(../images/next.png); |
||||
|
|
||||
|
&:hover { |
||||
|
background-image: url(../images/next-grey.png); |
||||
|
} |
||||
|
|
||||
|
transform: translateY(-57%); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.number_box { |
||||
|
width: 50px; |
||||
|
position: absolute; |
||||
|
left: 25px; |
||||
|
top: 50%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
color: $primary; |
||||
|
transform: translateY(-50%); |
||||
|
|
||||
|
hr { |
||||
|
border: none; |
||||
|
width: 1px; |
||||
|
height: 200px; |
||||
|
background-color: $primary; |
||||
|
margin: 2rem 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* end slider section */ |
||||
|
|
||||
|
// about section |
||||
|
|
||||
|
.about_section { |
||||
|
color: $white; |
||||
|
|
||||
|
.heading_container { |
||||
|
h2 { |
||||
|
color: $white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.about_container { |
||||
|
padding: 45px; |
||||
|
|
||||
|
background-size: cover; |
||||
|
|
||||
|
.detail-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
p { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
hr { |
||||
|
margin: 0 auto; |
||||
|
border: none; |
||||
|
width: 1.5px; |
||||
|
height: 125px; |
||||
|
background-color: $white; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
@include hero_btn($black, $white, 8px, 35px, 35px); |
||||
|
margin: 35px auto 0 auto; |
||||
|
box-shadow: 0 0 35px 0 rgba($color: #000000, $alpha: .7); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// end about section |
||||
|
|
||||
|
// class section |
||||
|
|
||||
|
.class_section { |
||||
|
color: $white; |
||||
|
position: relative; |
||||
|
|
||||
|
.row>div { |
||||
|
position: unset; |
||||
|
} |
||||
|
|
||||
|
.class_box-container { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin-top: 45px; |
||||
|
justify-content: center; |
||||
|
|
||||
|
|
||||
|
.box { |
||||
|
position: relative; |
||||
|
|
||||
|
.img-box { |
||||
|
position: relative; |
||||
|
padding-left: 75px; |
||||
|
background-color: $black; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.detail-box { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 55px 0; |
||||
|
border-radius: 10px; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
|
||||
|
button { |
||||
|
background-color: #292929; |
||||
|
border: none; |
||||
|
width: 55px; |
||||
|
height: 55px; |
||||
|
margin: 0 10px; |
||||
|
border-radius: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
width: 20px; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
margin: 0; |
||||
|
text-transform: uppercase; |
||||
|
color: $white; |
||||
|
font-weight: bold; |
||||
|
line-height: 55px; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn-box { |
||||
|
display: flex; |
||||
|
margin-top: 30px; |
||||
|
|
||||
|
a { |
||||
|
@include hero_btn($black, $white, 10px, 45px, 30px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.owl-carousel { |
||||
|
position: unset; |
||||
|
|
||||
|
.owl-nav { |
||||
|
display: flex; |
||||
|
flex-direction: column-reverse; |
||||
|
align-items: center; |
||||
|
padding: 0 10px; |
||||
|
margin-top: 55px; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
right: 45px; |
||||
|
transform: translateY(-100%); |
||||
|
|
||||
|
.owl-prev, |
||||
|
.owl-next { |
||||
|
background-color: $black; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
background-size: 12px; |
||||
|
border-radius: 100%; |
||||
|
outline: none; |
||||
|
margin: 2px 0; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: $white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.owl-prev { |
||||
|
width: 75px; |
||||
|
height: 75px; |
||||
|
background-image: url(../images/prev.png); |
||||
|
|
||||
|
&:hover { |
||||
|
background-image: url(../images/prev-grey.png); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.owl-next { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
background-image: url(../images/next.png); |
||||
|
|
||||
|
&:hover { |
||||
|
background-image: url(../images/next-grey.png); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// end class section |
||||
|
|
||||
|
|
||||
|
// blog section |
||||
|
|
||||
|
.blog_section { |
||||
|
color: $white; |
||||
|
overflow-x: hidden; |
||||
|
|
||||
|
.box { |
||||
|
margin: 45px 0; |
||||
|
background-color: #252525; |
||||
|
|
||||
|
.img-box { |
||||
|
position: relative; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.detail-box { |
||||
|
position: relative; |
||||
|
padding-top: 75px; |
||||
|
padding-bottom: 35px; |
||||
|
|
||||
|
.img_date { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 75px; |
||||
|
height: 75px; |
||||
|
border-radius: 100%; |
||||
|
text-align: center; |
||||
|
background-color: $primary; |
||||
|
color: $white; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
transform: translateY(-50%); |
||||
|
|
||||
|
h6 { |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
h3 { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
@include hero_btn($black, $white, 8px, 25px, 35px); |
||||
|
margin-top: 35px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.b1 { |
||||
|
.detail-box { |
||||
|
padding-right: 35px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.b2 { |
||||
|
.detail-box { |
||||
|
padding-left: 35px; |
||||
|
|
||||
|
.img_date { |
||||
|
left: 35px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
// end blog section |
||||
|
|
||||
|
|
||||
|
|
||||
|
// client section |
||||
|
|
||||
|
.client_section { |
||||
|
|
||||
|
color: $white; |
||||
|
|
||||
|
.heading_container { |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
margin-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
margin: 0 10px; |
||||
|
|
||||
|
.img-box { |
||||
|
width: 125px; |
||||
|
border-radius: 100%; |
||||
|
margin-bottom: -62px; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
padding: 95px 25px 45px 25px; |
||||
|
background-color: #050304; |
||||
|
|
||||
|
h4 { |
||||
|
|
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
p { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
width: 35px; |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.owl-carousel .owl-nav { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding: 0 10px; |
||||
|
margin-top: 55px; |
||||
|
|
||||
|
.owl-prev, |
||||
|
.owl-next { |
||||
|
// position: absolute; |
||||
|
width: 55px; |
||||
|
height: 50px; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
background-size: 12px; |
||||
|
border-radius: 10px; |
||||
|
outline: none; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.owl-prev { |
||||
|
background-image: url(../images/prev-arrow.png); |
||||
|
background-color: $black; |
||||
|
transform: translateX(10px); |
||||
|
background-position: 15px center; |
||||
|
} |
||||
|
|
||||
|
.owl-next { |
||||
|
background-image: url(../images/next-arrow.png); |
||||
|
background-color: $white; |
||||
|
transform: translateX(-10px); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// end client section |
||||
|
|
||||
|
// info section |
||||
|
|
||||
|
.info_section { |
||||
|
.info_main-row { |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
|
||||
|
// contact section |
||||
|
.contact_section { |
||||
|
position: relative; |
||||
|
|
||||
|
h2 { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
form { |
||||
|
margin-top: 45px; |
||||
|
padding-right: 35px; |
||||
|
margin-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
width: 100%; |
||||
|
border: none; |
||||
|
height: 50px; |
||||
|
margin-bottom: 25px; |
||||
|
padding-left: 25px; |
||||
|
background-color: #000; |
||||
|
outline: none; |
||||
|
color: $white; |
||||
|
border-radius: 45px; |
||||
|
|
||||
|
&::placeholder { |
||||
|
color: #737272; |
||||
|
} |
||||
|
|
||||
|
&.message-box { |
||||
|
height: 135px; |
||||
|
border-radius: 25px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
border: none; |
||||
|
@include hero_btn($white, $black, 12px, 55px, 35px); |
||||
|
margin-top: 35px; |
||||
|
} |
||||
|
|
||||
|
.map_container { |
||||
|
height: 100%; |
||||
|
min-height: 325px; |
||||
|
|
||||
|
.map-responsive { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// end contact section |
||||
|
|
||||
|
|
||||
|
.img-box { |
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
// end info section |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* footer section*/ |
||||
|
|
||||
|
.footer_section { |
||||
|
margin: 25px 0; |
||||
|
|
||||
|
.social_box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
a { |
||||
|
margin-right: 15px; |
||||
|
|
||||
|
img { |
||||
|
max-width: 25px; |
||||
|
max-height: 25px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.footer_section p { |
||||
|
margin: 0; |
||||
|
margin-top: 25px; |
||||
|
color: #1c1b1b; |
||||
|
} |
||||
|
|
||||
|
.footer_section a { |
||||
|
color: #1c1b1b; |
||||
|
} |
||||
|
|
||||
|
/* end footer section*/ |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,291 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
|
||||
|
<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="" /> |
||||
|
|
||||
|
<title>Oxer</title> |
||||
|
|
||||
|
<!-- slider stylesheet --> |
||||
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> |
||||
|
|
||||
|
<!-- bootstrap core css --> |
||||
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> |
||||
|
|
||||
|
<!-- fonts style --> |
||||
|
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan|Dosis:400,600,700|Poppins:400,600,700&display=swap" rel="stylesheet" /> |
||||
|
<!-- Custom styles for this template --> |
||||
|
<link href="css/style.css" rel="stylesheet" /> |
||||
|
<!-- responsive style --> |
||||
|
<link href="css/responsive.css" rel="stylesheet" /> |
||||
|
</head> |
||||
|
|
||||
|
<body class="sub_page"> |
||||
|
<div class="hero_area"> |
||||
|
<!-- header section strats --> |
||||
|
<header class="header_section"> |
||||
|
<div class="container"> |
||||
|
<div class="header_nav"> |
||||
|
<a class="navbar-brand brand_desktop" href="index.html"> |
||||
|
<img src="images/logo.png" alt="" /> |
||||
|
</a> |
||||
|
<div class="main_nav"> |
||||
|
<div class="top_nav"> |
||||
|
<ul class=" "> |
||||
|
<li class=""> |
||||
|
<a class="" href=""> |
||||
|
<img src="images/telephone.png" alt="" /> |
||||
|
<span> +01 1234567890</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class=""> |
||||
|
<a class="" href=""> |
||||
|
<img src="images/mail.png" alt="" /> |
||||
|
<span>demo@gmail.com</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class=""> |
||||
|
<a class="" href=""> |
||||
|
<img src="images/location.png" alt="" /> |
||||
|
<span>Den mark Loram ipusum</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="bottom_nav"> |
||||
|
<nav class="navbar navbar-expand-lg custom_nav-container"> |
||||
|
<a class="navbar-brand brand_mobile" href="index.html"> |
||||
|
<img src="images/logo.png" alt="" /> |
||||
|
</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="navbar-toggler-icon"></span> |
||||
|
</button> |
||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
||||
|
<div class="d-flex ml-auto flex-column flex-lg-row align-items-center"> |
||||
|
<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="class.html"> Classes </a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="blog.html">Blog</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<form class="form-inline"> |
||||
|
<button class="btn ml-3 ml-lg-5 nav_search-btn" type="submit"></button> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nav> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
<!-- end header section --> |
||||
|
</div> |
||||
|
|
||||
|
<!-- about section --> |
||||
|
|
||||
|
<section class="about_section layout_padding"> |
||||
|
<div class="container-fluid"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-10 ml-auto pr-0"> |
||||
|
<div class="about_container"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-3 col-md-5"> |
||||
|
<div class="detail-box"> |
||||
|
<div class="heading_container"> |
||||
|
<h2> |
||||
|
About Class |
||||
|
</h2> |
||||
|
</div> |
||||
|
<p> |
||||
|
iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquipnisi ut aliquipiusmod tempor incididunt ut labore et |
||||
|
</p> |
||||
|
<hr /> |
||||
|
<a href=""> |
||||
|
Read More |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
<!-- end about section --> |
||||
|
|
||||
|
<!-- info section --> |
||||
|
<div class="info_section"> |
||||
|
<div class="container-fluid"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-10 ml-auto"> |
||||
|
<div class="row info_main-row"> |
||||
|
<div class="col-md-6 pr-0"> |
||||
|
|
||||
|
<!-- contact section --> |
||||
|
|
||||
|
<section class="contact_section"> |
||||
|
<h2> |
||||
|
Request A Call Back |
||||
|
</h2> |
||||
|
<form action=""> |
||||
|
<div> |
||||
|
<input type="text" placeholder="Name" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<input type="text" placeholder="Phone Number" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<input type="email" placeholder="Email" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<input type="text" class="message-box" placeholder="Message" /> |
||||
|
</div> |
||||
|
<div class="d-flex "> |
||||
|
<button> |
||||
|
SEND |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
<div class="map_container"> |
||||
|
<div class="map"> |
||||
|
<div id="googleMap" style="width:100%;height:300px;"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<!-- end contact section --> |
||||
|
|
||||
|
|
||||
|
<!-- footer section --> |
||||
|
<section class=" footer_section "> |
||||
|
<div class="social_box"> |
||||
|
<a href="#"> |
||||
|
<img src="images/facebook.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/twitter.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/linkedin.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/instagram.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/youtube.png" alt=""> |
||||
|
</a> |
||||
|
</div> |
||||
|
<p> |
||||
|
© 2020 All Rights Reserved. Design by |
||||
|
<a href="https://html.design/">Free Html Templates</a> |
||||
|
</p> |
||||
|
</section> |
||||
|
<!-- footer section --> |
||||
|
|
||||
|
</div> |
||||
|
<div class="col-md-6 px-0"> |
||||
|
<div class="img-box"> |
||||
|
<img src="images/footer-img.jpg" alt=""> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- end info section --> |
||||
|
|
||||
|
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> |
||||
|
<script type="text/javascript" src="js/bootstrap.js"></script> |
||||
|
|
||||
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"> |
||||
|
</script> |
||||
|
|
||||
|
<script> |
||||
|
function openNav() { |
||||
|
document.getElementById("myNav").classList.toggle("menu_width"); |
||||
|
document.querySelector(".custom_menu-btn").classList.toggle("menu_btn-style"); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<!-- owl carousel script --> |
||||
|
<script type="text/javascript"> |
||||
|
$(".owl-carousel").owlCarousel({ |
||||
|
loop: true, |
||||
|
margin: 10, |
||||
|
nav: true, |
||||
|
navText: [], |
||||
|
autoplay: true, |
||||
|
autoplayHoverPause: true, |
||||
|
responsive: { |
||||
|
0: { |
||||
|
items: 1 |
||||
|
}, |
||||
|
600: { |
||||
|
items: 2 |
||||
|
}, |
||||
|
1000: { |
||||
|
items: 2 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
$(".owl_carousel1").owlCarousel({ |
||||
|
loop: true, |
||||
|
margin: 25, |
||||
|
nav: true, |
||||
|
navText: [], |
||||
|
autoplay: true, |
||||
|
autoplayHoverPause: true, |
||||
|
responsive: { |
||||
|
0: { |
||||
|
items: 1 |
||||
|
}, |
||||
|
600: { |
||||
|
items: 2 |
||||
|
}, |
||||
|
1000: { |
||||
|
items: 2 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
<!-- end owl carousel script --> |
||||
|
|
||||
|
<script> |
||||
|
/** 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); |
||||
|
} |
||||
|
</script> |
||||
|
<!-- Google Map --> |
||||
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap"></script> |
||||
|
<!-- End Google Map --> |
||||
|
|
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,339 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
|
||||
|
<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="" /> |
||||
|
|
||||
|
<title>Oxer</title> |
||||
|
|
||||
|
<!-- slider stylesheet --> |
||||
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> |
||||
|
|
||||
|
<!-- bootstrap core css --> |
||||
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> |
||||
|
|
||||
|
<!-- fonts style --> |
||||
|
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan|Dosis:400,600,700|Poppins:400,600,700&display=swap" rel="stylesheet" /> |
||||
|
<!-- Custom styles for this template --> |
||||
|
<link href="css/style.css" rel="stylesheet" /> |
||||
|
<!-- responsive style --> |
||||
|
<link href="css/responsive.css" rel="stylesheet" /> |
||||
|
</head> |
||||
|
|
||||
|
<body class="sub_page"> |
||||
|
<div class="hero_area"> |
||||
|
<!-- header section strats --> |
||||
|
<header class="header_section"> |
||||
|
<div class="container"> |
||||
|
<div class="header_nav"> |
||||
|
<a class="navbar-brand brand_desktop" href="index.html"> |
||||
|
<img src="images/logo.png" alt="" /> |
||||
|
</a> |
||||
|
<div class="main_nav"> |
||||
|
<div class="top_nav"> |
||||
|
<ul class=" "> |
||||
|
<li class=""> |
||||
|
<a class="" href=""> |
||||
|
<img src="images/telephone.png" alt="" /> |
||||
|
<span> +01 1234567890</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class=""> |
||||
|
<a class="" href=""> |
||||
|
<img src="images/mail.png" alt="" /> |
||||
|
<span>demo@gmail.com</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class=""> |
||||
|
<a class="" href=""> |
||||
|
<img src="images/location.png" alt="" /> |
||||
|
<span>Den mark Loram ipusum</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="bottom_nav"> |
||||
|
<nav class="navbar navbar-expand-lg custom_nav-container"> |
||||
|
<a class="navbar-brand brand_mobile" href="index.html"> |
||||
|
<img src="images/logo.png" alt="" /> |
||||
|
</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="navbar-toggler-icon"></span> |
||||
|
</button> |
||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
||||
|
<div class="d-flex ml-auto flex-column flex-lg-row align-items-center"> |
||||
|
<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="class.html"> Classes </a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="blog.html">Blog</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<form class="form-inline"> |
||||
|
<button class="btn ml-3 ml-lg-5 nav_search-btn" type="submit"></button> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nav> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
<!-- end header section --> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<!-- blog section --> |
||||
|
|
||||
|
<section class="blog_section layout_padding"> |
||||
|
<div class="container-fluid"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-10 ml-auto"> |
||||
|
<div class="heading_container"> |
||||
|
<h2> |
||||
|
Latest Blog |
||||
|
</h2> |
||||
|
<p> |
||||
|
iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis n |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-6 pl-0"> |
||||
|
<div class="box b1"> |
||||
|
<div class="img-box"> |
||||
|
<img src="images/b1.jpg" alt=""> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-8 col-md-10 ml-auto"> |
||||
|
<div class="detail-box"> |
||||
|
<div class="img_date"> |
||||
|
<h6> |
||||
|
17 <br> |
||||
|
Feb |
||||
|
</h6> |
||||
|
</div> |
||||
|
<h3> |
||||
|
Boxer Joniya Daro |
||||
|
</h3> |
||||
|
<p> |
||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea |
||||
|
</p> |
||||
|
<a href=""> |
||||
|
Read More |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-md-6 pr-0"> |
||||
|
<div class="box b2"> |
||||
|
<div class="img-box"> |
||||
|
<img src="images/b2.jpg" alt=""> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-8 col-md-10 mr-auto"> |
||||
|
<div class="detail-box"> |
||||
|
<div class="img_date"> |
||||
|
<h6> |
||||
|
17 <br> |
||||
|
Jun |
||||
|
</h6> |
||||
|
</div> |
||||
|
<h3> |
||||
|
Boxer Joniya Daro |
||||
|
</h3> |
||||
|
<p> |
||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea |
||||
|
</p> |
||||
|
<a href=""> |
||||
|
Read More |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<!-- end blog section --> |
||||
|
|
||||
|
<!-- info section --> |
||||
|
<div class="info_section"> |
||||
|
<div class="container-fluid"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-10 ml-auto"> |
||||
|
<div class="row info_main-row"> |
||||
|
<div class="col-md-6 pr-0"> |
||||
|
|
||||
|
<!-- contact section --> |
||||
|
|
||||
|
<section class="contact_section"> |
||||
|
<h2> |
||||
|
Request A Call Back |
||||
|
</h2> |
||||
|
<form action=""> |
||||
|
<div> |
||||
|
<input type="text" placeholder="Name" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<input type="text" placeholder="Phone Number" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<input type="email" placeholder="Email" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<input type="text" class="message-box" placeholder="Message" /> |
||||
|
</div> |
||||
|
<div class="d-flex "> |
||||
|
<button> |
||||
|
SEND |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
<div class="map_container"> |
||||
|
<div class="map"> |
||||
|
<div id="googleMap" style="width:100%;height:300px;"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<!-- end contact section --> |
||||
|
|
||||
|
|
||||
|
<!-- footer section --> |
||||
|
<section class=" footer_section "> |
||||
|
<div class="social_box"> |
||||
|
<a href="#"> |
||||
|
<img src="images/facebook.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/twitter.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/linkedin.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/instagram.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/youtube.png" alt=""> |
||||
|
</a> |
||||
|
</div> |
||||
|
<p> |
||||
|
© 2020 All Rights Reserved. Design by |
||||
|
<a href="https://html.design/">Free Html Templates</a> |
||||
|
</p> |
||||
|
</section> |
||||
|
<!-- footer section --> |
||||
|
|
||||
|
</div> |
||||
|
<div class="col-md-6 px-0"> |
||||
|
<div class="img-box"> |
||||
|
<img src="images/footer-img.jpg" alt=""> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- end info section --> |
||||
|
|
||||
|
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> |
||||
|
<script type="text/javascript" src="js/bootstrap.js"></script> |
||||
|
|
||||
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"> |
||||
|
</script> |
||||
|
|
||||
|
<script> |
||||
|
function openNav() { |
||||
|
document.getElementById("myNav").classList.toggle("menu_width"); |
||||
|
document.querySelector(".custom_menu-btn").classList.toggle("menu_btn-style"); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<!-- owl carousel script --> |
||||
|
<script type="text/javascript"> |
||||
|
$(".owl-carousel").owlCarousel({ |
||||
|
loop: true, |
||||
|
margin: 10, |
||||
|
nav: true, |
||||
|
navText: [], |
||||
|
autoplay: true, |
||||
|
autoplayHoverPause: true, |
||||
|
responsive: { |
||||
|
0: { |
||||
|
items: 1 |
||||
|
}, |
||||
|
600: { |
||||
|
items: 2 |
||||
|
}, |
||||
|
1000: { |
||||
|
items: 2 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
$(".owl_carousel1").owlCarousel({ |
||||
|
loop: true, |
||||
|
margin: 25, |
||||
|
nav: true, |
||||
|
navText: [], |
||||
|
autoplay: true, |
||||
|
autoplayHoverPause: true, |
||||
|
responsive: { |
||||
|
0: { |
||||
|
items: 1 |
||||
|
}, |
||||
|
600: { |
||||
|
items: 2 |
||||
|
}, |
||||
|
1000: { |
||||
|
items: 2 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
<!-- end owl carousel script --> |
||||
|
|
||||
|
<script> |
||||
|
/** 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); |
||||
|
} |
||||
|
</script> |
||||
|
<!-- Google Map --> |
||||
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap"></script> |
||||
|
<!-- End Google Map --> |
||||
|
|
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,373 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
|
||||
|
<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="" /> |
||||
|
|
||||
|
<title>Oxer</title> |
||||
|
|
||||
|
<!-- slider stylesheet --> |
||||
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> |
||||
|
|
||||
|
<!-- bootstrap core css --> |
||||
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> |
||||
|
|
||||
|
<!-- fonts style --> |
||||
|
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan|Dosis:400,600,700|Poppins:400,600,700&display=swap" rel="stylesheet" /> |
||||
|
<!-- Custom styles for this template --> |
||||
|
<link href="css/style.css" rel="stylesheet" /> |
||||
|
<!-- responsive style --> |
||||
|
<link href="css/responsive.css" rel="stylesheet" /> |
||||
|
</head> |
||||
|
|
||||
|
<body class="sub_page"> |
||||
|
<div class="hero_area"> |
||||
|
<!-- header section strats --> |
||||
|
<header class="header_section"> |
||||
|
<div class="container"> |
||||
|
<div class="header_nav"> |
||||
|
<a class="navbar-brand brand_desktop" href="index.html"> |
||||
|
<img src="images/logo.png" alt="" /> |
||||
|
</a> |
||||
|
<div class="main_nav"> |
||||
|
<div class="top_nav"> |
||||
|
<ul class=" "> |
||||
|
<li class=""> |
||||
|
<a class="" href=""> |
||||
|
<img src="images/telephone.png" alt="" /> |
||||
|
<span> +01 1234567890</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class=""> |
||||
|
<a class="" href=""> |
||||
|
<img src="images/mail.png" alt="" /> |
||||
|
<span>demo@gmail.com</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class=""> |
||||
|
<a class="" href=""> |
||||
|
<img src="images/location.png" alt="" /> |
||||
|
<span>Den mark Loram ipusum</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="bottom_nav"> |
||||
|
<nav class="navbar navbar-expand-lg custom_nav-container"> |
||||
|
<a class="navbar-brand brand_mobile" href="index.html"> |
||||
|
<img src="images/logo.png" alt="" /> |
||||
|
</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="navbar-toggler-icon"></span> |
||||
|
</button> |
||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
||||
|
<div class="d-flex ml-auto flex-column flex-lg-row align-items-center"> |
||||
|
<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="class.html"> Classes </a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="blog.html">Blog</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<form class="form-inline"> |
||||
|
<button class="btn ml-3 ml-lg-5 nav_search-btn" type="submit"></button> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nav> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
<!-- end header section --> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<!-- class section --> |
||||
|
|
||||
|
<section class="class_section layout_padding"> |
||||
|
<div class="container-fluid"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-10 col-lg-8 mx-auto"> |
||||
|
<div class="class_container"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-9 col-md-10"> |
||||
|
<div class="heading_container"> |
||||
|
<h2> |
||||
|
Our Classes Videos |
||||
|
</h2> |
||||
|
<p> |
||||
|
iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis n |
||||
|
ostrud exercitation ullamco laboris iusmod tempor incididunt ut labore et dolore |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="class_box-container"> |
||||
|
<div class="owl-carousel owl_carousel1"> |
||||
|
<div class="item"> |
||||
|
<div class="box"> |
||||
|
<div class="img-box"> |
||||
|
<img src="images/c1.jpg" alt=""> |
||||
|
<div class="detail-box"> |
||||
|
<button> |
||||
|
<img src="images/play-icon.png" alt=""> |
||||
|
</button> |
||||
|
<h2> |
||||
|
Boxing |
||||
|
</h2> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-box"> |
||||
|
<a href=""> |
||||
|
See More |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<div class="box"> |
||||
|
<div class="img-box"> |
||||
|
<img src="images/c2.jpg" alt=""> |
||||
|
<div class="detail-box"> |
||||
|
<button> |
||||
|
<img src="images/play-icon.png" alt=""> |
||||
|
</button> |
||||
|
<h2> |
||||
|
Boxing |
||||
|
</h2> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-box"> |
||||
|
<a href=""> |
||||
|
See More |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<div class="box"> |
||||
|
<div class="img-box"> |
||||
|
<img src="images/c1.jpg" alt=""> |
||||
|
<div class="detail-box"> |
||||
|
<button> |
||||
|
<img src="images/play-icon.png" alt=""> |
||||
|
</button> |
||||
|
<h2> |
||||
|
Boxing |
||||
|
</h2> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-box"> |
||||
|
<a href=""> |
||||
|
See More |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<div class="box"> |
||||
|
<div class="img-box"> |
||||
|
<img src="images/c2.jpg" alt=""> |
||||
|
<div class="detail-box"> |
||||
|
<button> |
||||
|
<img src="images/play-icon.png" alt=""> |
||||
|
</button> |
||||
|
<h2> |
||||
|
Boxing |
||||
|
</h2> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-box"> |
||||
|
<a href=""> |
||||
|
See More |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<!-- end class section --> |
||||
|
|
||||
|
|
||||
|
<!-- info section --> |
||||
|
<div class="info_section"> |
||||
|
<div class="container-fluid"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-10 ml-auto"> |
||||
|
<div class="row info_main-row"> |
||||
|
<div class="col-md-6 pr-0"> |
||||
|
|
||||
|
<!-- contact section --> |
||||
|
|
||||
|
<section class="contact_section"> |
||||
|
<h2> |
||||
|
Request A Call Back |
||||
|
</h2> |
||||
|
<form action=""> |
||||
|
<div> |
||||
|
<input type="text" placeholder="Name" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<input type="text" placeholder="Phone Number" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<input type="email" placeholder="Email" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<input type="text" class="message-box" placeholder="Message" /> |
||||
|
</div> |
||||
|
<div class="d-flex "> |
||||
|
<button> |
||||
|
SEND |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
<div class="map_container"> |
||||
|
<div class="map"> |
||||
|
<div id="googleMap" style="width:100%;height:300px;"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<!-- end contact section --> |
||||
|
|
||||
|
|
||||
|
<!-- footer section --> |
||||
|
<section class=" footer_section "> |
||||
|
<div class="social_box"> |
||||
|
<a href="#"> |
||||
|
<img src="images/facebook.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/twitter.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/linkedin.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/instagram.png" alt=""> |
||||
|
</a> |
||||
|
<a href="#"> |
||||
|
<img src="images/youtube.png" alt=""> |
||||
|
</a> |
||||
|
</div> |
||||
|
<p> |
||||
|
© 2020 All Rights Reserved. Design by |
||||
|
<a href="https://html.design/">Free Html Templates</a> |
||||
|
</p> |
||||
|
</section> |
||||
|
<!-- footer section --> |
||||
|
|
||||
|
</div> |
||||
|
<div class="col-md-6 px-0"> |
||||
|
<div class="img-box"> |
||||
|
<img src="images/footer-img.jpg" alt=""> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- end info section --> |
||||
|
|
||||
|
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> |
||||
|
<script type="text/javascript" src="js/bootstrap.js"></script> |
||||
|
|
||||
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"> |
||||
|
</script> |
||||
|
|
||||
|
<script> |
||||
|
function openNav() { |
||||
|
document.getElementById("myNav").classList.toggle("menu_width"); |
||||
|
document.querySelector(".custom_menu-btn").classList.toggle("menu_btn-style"); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<!-- owl carousel script --> |
||||
|
<script type="text/javascript"> |
||||
|
$(".owl-carousel").owlCarousel({ |
||||
|
loop: true, |
||||
|
margin: 10, |
||||
|
nav: true, |
||||
|
navText: [], |
||||
|
autoplay: true, |
||||
|
autoplayHoverPause: true, |
||||
|
responsive: { |
||||
|
0: { |
||||
|
items: 1 |
||||
|
}, |
||||
|
600: { |
||||
|
items: 2 |
||||
|
}, |
||||
|
1000: { |
||||
|
items: 2 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
$(".owl_carousel1").owlCarousel({ |
||||
|
loop: true, |
||||
|
margin: 25, |
||||
|
nav: true, |
||||
|
navText: [], |
||||
|
autoplay: true, |
||||
|
autoplayHoverPause: true, |
||||
|
responsive: { |
||||
|
0: { |
||||
|
items: 1 |
||||
|
}, |
||||
|
600: { |
||||
|
items: 2 |
||||
|
}, |
||||
|
1000: { |
||||
|
items: 2 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
<!-- end owl carousel script --> |
||||
|
|
||||
|
<script> |
||||
|
/** 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); |
||||
|
} |
||||
|
</script> |
||||
|
<!-- Google Map --> |
||||
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap"></script> |
||||
|
<!-- End Google Map --> |
||||
|
|
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
File diff suppressed because it is too large
@ -0,0 +1,197 @@ |
|||||
|
@media (max-width: 1250px) { |
||||
|
.header_section::before { |
||||
|
width: 75%; |
||||
|
} |
||||
|
|
||||
|
.header_section { |
||||
|
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 22% 100%, 20% 86%, 0 84%, 0 0); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1120px) {} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
.hero_area { |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.hero_area::before { |
||||
|
|
||||
|
background: linear-gradient(to bottom, transparent, #000000); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.navbar-brand.brand_mobile { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.navbar-brand.brand_desktop { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.header_section .main_nav { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
#navbarSupportedContent { |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
|
||||
|
.header_section { |
||||
|
padding: 10px 0; |
||||
|
clip-path: none; |
||||
|
} |
||||
|
|
||||
|
.header_section::before, |
||||
|
.main_nav .top_nav { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.slider_section { |
||||
|
padding: 45px 0; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading { |
||||
|
top: 75px; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading h2 { |
||||
|
font-size: 7rem; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav { |
||||
|
|
||||
|
flex-direction: row; |
||||
|
top: initial; |
||||
|
bottom: -45px; |
||||
|
right: 50%; |
||||
|
transform: translateX(50%); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-prev, |
||||
|
.class_section .owl-carousel .owl-nav .owl-next { |
||||
|
margin: 2px 5px; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_container { |
||||
|
margin-bottom: 75px; |
||||
|
} |
||||
|
|
||||
|
.sub_page .class_section .owl-carousel .owl-nav { |
||||
|
top: initial; |
||||
|
bottom: 65px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 767px) { |
||||
|
.slider_section #carouselExampleIndicators { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.slider_section #carouselExampleIndicators .box { |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading { |
||||
|
left: 0; |
||||
|
opacity: .4; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.about_section .about_container { |
||||
|
background-size: auto; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box button { |
||||
|
width: 45px; |
||||
|
height: 45px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box button img { |
||||
|
width: 15px; |
||||
|
margin-left: 3px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box { |
||||
|
margin-left: 25px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box.b2 .detail-box { |
||||
|
|
||||
|
padding-left: 0; |
||||
|
padding-right: 25px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.blog_section .box.b2 .detail-box .img_date { |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.info_section .info_main-row { |
||||
|
flex-direction: column-reverse; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section { |
||||
|
margin-top: 45px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section form { |
||||
|
padding-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.footer_section .social_box { |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.footer_section .social_box a { |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.footer_section p { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
.slider_section .slider_heading { |
||||
|
left: -70px; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container { |
||||
|
|
||||
|
padding: 45px 15px 45px 25px; |
||||
|
} |
||||
|
|
||||
|
.client_section .box { |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 480px) {} |
||||
|
|
||||
|
@media (max-width: 400px) { |
||||
|
.slider_section .slider_heading { |
||||
|
left: -125px; |
||||
|
opacity: .2; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-prev, |
||||
|
.slider_section .carousel-control-next { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 360px) {} |
||||
|
|
||||
|
@media (min-width: 1200px) { |
||||
|
.container { |
||||
|
max-width: 1170px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,954 @@ |
|||||
|
body { |
||||
|
font-family: "Poppins", sans-serif; |
||||
|
color: #040000; |
||||
|
background-color: #000000; |
||||
|
} |
||||
|
|
||||
|
.layout_padding { |
||||
|
padding-top: 120px; |
||||
|
padding-bottom: 120px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2 { |
||||
|
padding: 45px 0; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2-top { |
||||
|
padding-top: 45px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2-bottom { |
||||
|
padding-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding-top { |
||||
|
padding-top: 120px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding-bottom { |
||||
|
padding-bottom: 120px; |
||||
|
} |
||||
|
|
||||
|
.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 { |
||||
|
font-weight: bold; |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
text-transform: uppercase; |
||||
|
color: #010201; |
||||
|
} |
||||
|
|
||||
|
/*header section*/ |
||||
|
.hero_area { |
||||
|
height: 100vh; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: cover; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.hero_area::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(transparent), to(#000000)); |
||||
|
background: linear-gradient(to bottom, transparent, transparent, #000000); |
||||
|
} |
||||
|
|
||||
|
.sub_page .hero_area { |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.sub_page .class_section .owl-carousel .owl-nav { |
||||
|
top: 55%; |
||||
|
} |
||||
|
|
||||
|
.header_section { |
||||
|
background-color: #ffffff; |
||||
|
position: relative; |
||||
|
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
||||
|
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
||||
|
} |
||||
|
|
||||
|
.header_section::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
width: 62%; |
||||
|
height: 45px; |
||||
|
background: #080203; |
||||
|
z-index: 1; |
||||
|
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
||||
|
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
||||
|
} |
||||
|
|
||||
|
.header_section .nav_container { |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.menu_width { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
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_nav { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-pack: justify; |
||||
|
-ms-flex-pack: justify; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.main_nav { |
||||
|
position: relative; |
||||
|
z-index: 9; |
||||
|
} |
||||
|
|
||||
|
.main_nav .top_nav ul { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.main_nav .top_nav ul li { |
||||
|
list-style-type: none; |
||||
|
} |
||||
|
|
||||
|
.main_nav .top_nav ul li a { |
||||
|
display: inline-block; |
||||
|
color: #ffffff; |
||||
|
margin: 10px 0 10px 35px; |
||||
|
} |
||||
|
|
||||
|
.main_nav .top_nav ul li a img { |
||||
|
max-width: 25px; |
||||
|
max-height: 25px; |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container.navbar-expand-lg .navbar-nav .nav-item .nav-link { |
||||
|
padding: 10px 20px; |
||||
|
color: #212121; |
||||
|
text-align: center; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
|
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .nav_search-btn { |
||||
|
background-image: url(../images/search-icon.png); |
||||
|
background-size: 22px; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position-y: 7px; |
||||
|
width: 35px; |
||||
|
height: 35px; |
||||
|
padding: 0; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.navbar-brand { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.navbar-brand img { |
||||
|
width: 125px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
.navbar-brand.brand_mobile { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container { |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .navbar-toggler { |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .navbar-toggler .navbar-toggler-icon { |
||||
|
background-image: url(../images/menu.png); |
||||
|
background-size: 55px; |
||||
|
} |
||||
|
|
||||
|
/*end header section*/ |
||||
|
/* slider section */ |
||||
|
.slider_section { |
||||
|
height: calc(100% - 80px); |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.slider_section #carouselExampleIndicators { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.slider_section .row .col-md-10 { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading { |
||||
|
-webkit-transform: rotate(270.5deg) scaleX(-1); |
||||
|
transform: rotate(270.5deg) scaleX(-1); |
||||
|
position: absolute; |
||||
|
left: -150px; |
||||
|
top: -25px; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading h2 { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
font-size: 10rem; |
||||
|
text-transform: uppercase; |
||||
|
text-orientation: upright; |
||||
|
font-weight: bold; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.slider_section .slider_heading h2 span { |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.slider_section .detail-box h1 { |
||||
|
font-size: 3rem; |
||||
|
font-weight: bold; |
||||
|
text-transform: uppercase; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.slider_section .detail-box hr { |
||||
|
margin: 0 auto; |
||||
|
border: none; |
||||
|
width: 1.5px; |
||||
|
height: 65px; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.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-top: 35px; |
||||
|
} |
||||
|
|
||||
|
.slider_section .detail-box .btn-box .btn-1 { |
||||
|
display: inline-block; |
||||
|
padding: 10px 35px; |
||||
|
background-color: #000000; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: 35px; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.slider_section .detail-box .btn-box .btn-1:hover { |
||||
|
background-color: #ffffff; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.slider_section #carouselExampleIndicators { |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.slider_section #carouselExampleIndicators .box { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-pack: start; |
||||
|
-ms-flex-pack: start; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-indicators { |
||||
|
position: unset; |
||||
|
margin: 0 70px 45px 70px; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-indicators li { |
||||
|
text-indent: unset; |
||||
|
border: none; |
||||
|
background-color: transparent; |
||||
|
color: #ffffff; |
||||
|
font-weight: bold; |
||||
|
font-size: 2rem; |
||||
|
opacity: 1; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-indicators li.active { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-prev, |
||||
|
.slider_section .carousel-control-next { |
||||
|
position: absolute; |
||||
|
top: 45%; |
||||
|
left: initial; |
||||
|
right: 25px; |
||||
|
width: 55px; |
||||
|
height: 55px; |
||||
|
border: none; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 8px; |
||||
|
background-position: center; |
||||
|
background-color: #000000; |
||||
|
border-radius: 100%; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-prev:hover, |
||||
|
.slider_section .carousel-control-next:hover { |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-prev { |
||||
|
background-image: url(../images/prev.png); |
||||
|
-webkit-transform: translateY(57%); |
||||
|
transform: translateY(57%); |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-prev:hover { |
||||
|
background-image: url(../images/prev-grey.png); |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-next { |
||||
|
background-image: url(../images/next.png); |
||||
|
-webkit-transform: translateY(-57%); |
||||
|
transform: translateY(-57%); |
||||
|
} |
||||
|
|
||||
|
.slider_section .carousel-control-next:hover { |
||||
|
background-image: url(../images/next-grey.png); |
||||
|
} |
||||
|
|
||||
|
.slider_section .number_box { |
||||
|
width: 50px; |
||||
|
position: absolute; |
||||
|
left: 25px; |
||||
|
top: 50%; |
||||
|
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; |
||||
|
color: #000000; |
||||
|
-webkit-transform: translateY(-50%); |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
|
||||
|
.slider_section .number_box hr { |
||||
|
border: none; |
||||
|
width: 1px; |
||||
|
height: 200px; |
||||
|
background-color: #000000; |
||||
|
margin: 2rem 0; |
||||
|
} |
||||
|
|
||||
|
/* end slider section */ |
||||
|
.about_section { |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.about_section .heading_container h2 { |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container { |
||||
|
padding: 45px; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container .detail-box { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-box-direction: normal; |
||||
|
-ms-flex-direction: column; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container .detail-box p { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container .detail-box hr { |
||||
|
margin: 0 auto; |
||||
|
border: none; |
||||
|
width: 1.5px; |
||||
|
height: 125px; |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container .detail-box a { |
||||
|
display: inline-block; |
||||
|
padding: 8px 35px; |
||||
|
background-color: #000000; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: 35px; |
||||
|
color: #ffffff; |
||||
|
margin: 35px auto 0 auto; |
||||
|
-webkit-box-shadow: 0 0 35px 0 rgba(99, 247, 79, 0.7); |
||||
|
box-shadow: 0 0 35px 0 rgba(99, 247, 79, 0.7); |
||||
|
} |
||||
|
|
||||
|
.about_section .about_container .detail-box a:hover { |
||||
|
background-color: #ffffff; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.class_section { |
||||
|
color: #ffffff; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.class_section .row > div { |
||||
|
position: unset; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-ms-flex-wrap: wrap; |
||||
|
flex-wrap: wrap; |
||||
|
margin-top: 45px; |
||||
|
-webkit-box-pack: center; |
||||
|
-ms-flex-pack: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box { |
||||
|
position: relative; |
||||
|
padding-left: 75px; |
||||
|
background-color: #000000; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-align: end; |
||||
|
-ms-flex-align: end; |
||||
|
align-items: flex-end; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 55px 0; |
||||
|
border-radius: 10px; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box button { |
||||
|
background-color: #292929; |
||||
|
border: none; |
||||
|
width: 55px; |
||||
|
height: 55px; |
||||
|
margin: 0 10px; |
||||
|
border-radius: 100%; |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box button img { |
||||
|
width: 20px; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .img-box .detail-box h2 { |
||||
|
margin: 0; |
||||
|
text-transform: uppercase; |
||||
|
color: #ffffff; |
||||
|
font-weight: bold; |
||||
|
line-height: 55px; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .btn-box { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .btn-box a { |
||||
|
display: inline-block; |
||||
|
padding: 10px 45px; |
||||
|
background-color: #000000; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: 30px; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.class_section .class_box-container .box .btn-box a:hover { |
||||
|
background-color: #ffffff; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel { |
||||
|
position: unset; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-box-direction: reverse; |
||||
|
-ms-flex-direction: column-reverse; |
||||
|
flex-direction: column-reverse; |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
padding: 0 10px; |
||||
|
margin-top: 55px; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
right: 45px; |
||||
|
-webkit-transform: translateY(-100%); |
||||
|
transform: translateY(-100%); |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-prev, |
||||
|
.class_section .owl-carousel .owl-nav .owl-next { |
||||
|
background-color: #000000; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
background-size: 12px; |
||||
|
border-radius: 100%; |
||||
|
outline: none; |
||||
|
margin: 2px 0; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-prev:hover, |
||||
|
.class_section .owl-carousel .owl-nav .owl-next:hover { |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-prev { |
||||
|
width: 75px; |
||||
|
height: 75px; |
||||
|
background-image: url(../images/prev.png); |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-prev:hover { |
||||
|
background-image: url(../images/prev-grey.png); |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-next { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
background-image: url(../images/next.png); |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav .owl-next:hover { |
||||
|
background-image: url(../images/next-grey.png); |
||||
|
} |
||||
|
|
||||
|
.blog_section { |
||||
|
color: #ffffff; |
||||
|
overflow-x: hidden; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box { |
||||
|
margin: 45px 0; |
||||
|
background-color: #252525; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .img-box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .img-box img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box { |
||||
|
position: relative; |
||||
|
padding-top: 75px; |
||||
|
padding-bottom: 35px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box .img_date { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 75px; |
||||
|
height: 75px; |
||||
|
border-radius: 100%; |
||||
|
text-align: center; |
||||
|
background-color: #000000; |
||||
|
color: #ffffff; |
||||
|
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; |
||||
|
-webkit-transform: translateY(-50%); |
||||
|
transform: translateY(-50%); |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box .img_date h6 { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box h3 { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box a { |
||||
|
display: inline-block; |
||||
|
padding: 8px 25px; |
||||
|
background-color: #000000; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: 35px; |
||||
|
color: #ffffff; |
||||
|
margin-top: 35px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box .detail-box a:hover { |
||||
|
background-color: #ffffff; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box.b1 .detail-box { |
||||
|
padding-right: 35px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box.b2 .detail-box { |
||||
|
padding-left: 35px; |
||||
|
} |
||||
|
|
||||
|
.blog_section .box.b2 .detail-box .img_date { |
||||
|
left: 35px; |
||||
|
} |
||||
|
|
||||
|
.client_section { |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.client_section .heading_container { |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
margin-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
.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: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .img-box { |
||||
|
width: 125px; |
||||
|
border-radius: 100%; |
||||
|
margin-bottom: -62px; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .img-box img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .detail-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; |
||||
|
padding: 95px 25px 45px 25px; |
||||
|
background-color: #050304; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .detail-box h4 { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .detail-box p { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
.client_section .box .detail-box img { |
||||
|
width: 35px; |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
.client_section .owl-carousel .owl-nav { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-pack: center; |
||||
|
-ms-flex-pack: center; |
||||
|
justify-content: center; |
||||
|
padding: 0 10px; |
||||
|
margin-top: 55px; |
||||
|
} |
||||
|
|
||||
|
.client_section .owl-carousel .owl-nav .owl-prev, |
||||
|
.client_section .owl-carousel .owl-nav .owl-next { |
||||
|
width: 55px; |
||||
|
height: 50px; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
background-size: 12px; |
||||
|
border-radius: 10px; |
||||
|
outline: none; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.client_section .owl-carousel .owl-nav .owl-prev { |
||||
|
background-image: url(../images/prev-arrow.png); |
||||
|
background-color: #000000; |
||||
|
-webkit-transform: translateX(10px); |
||||
|
transform: translateX(10px); |
||||
|
background-position: 15px center; |
||||
|
} |
||||
|
|
||||
|
.client_section .owl-carousel .owl-nav .owl-next { |
||||
|
background-image: url(../images/next-arrow.png); |
||||
|
background-color: #ffffff; |
||||
|
-webkit-transform: translateX(-10px); |
||||
|
transform: translateX(-10px); |
||||
|
} |
||||
|
|
||||
|
.info_section .info_main-row { |
||||
|
-webkit-box-align: end; |
||||
|
-ms-flex-align: end; |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section h2 { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section form { |
||||
|
margin-top: 45px; |
||||
|
padding-right: 35px; |
||||
|
margin-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input { |
||||
|
width: 100%; |
||||
|
border: none; |
||||
|
height: 50px; |
||||
|
margin-bottom: 25px; |
||||
|
padding-left: 25px; |
||||
|
background-color: #000; |
||||
|
outline: none; |
||||
|
color: #ffffff; |
||||
|
border-radius: 45px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input::-webkit-input-placeholder { |
||||
|
color: #737272; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input:-ms-input-placeholder { |
||||
|
color: #737272; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input::-ms-input-placeholder { |
||||
|
color: #737272; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input::placeholder { |
||||
|
color: #737272; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section input.message-box { |
||||
|
height: 135px; |
||||
|
border-radius: 25px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section button { |
||||
|
border: none; |
||||
|
display: inline-block; |
||||
|
padding: 12px 55px; |
||||
|
background-color: #ffffff; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: 35px; |
||||
|
color: #000000; |
||||
|
margin-top: 35px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section button:hover { |
||||
|
background-color: #000000; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section .map_container { |
||||
|
height: 100%; |
||||
|
min-height: 325px; |
||||
|
} |
||||
|
|
||||
|
.info_section .contact_section .map_container .map-responsive { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.info_section .img-box img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/* footer section*/ |
||||
|
.footer_section { |
||||
|
margin: 25px 0; |
||||
|
} |
||||
|
|
||||
|
.footer_section .social_box { |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
-webkit-box-align: center; |
||||
|
-ms-flex-align: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.footer_section .social_box a { |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
|
||||
|
.footer_section .social_box a img { |
||||
|
max-width: 25px; |
||||
|
max-height: 25px; |
||||
|
} |
||||
|
|
||||
|
.footer_section p { |
||||
|
margin: 0; |
||||
|
margin-top: 25px; |
||||
|
color: #1c1b1b; |
||||
|
} |
||||
|
|
||||
|
.footer_section a { |
||||
|
color: #1c1b1b; |
||||
|
} |
||||
|
|
||||
|
/* end footer section*/ |
||||
|
/*# sourceMappingURL=style.css.map */ |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,888 @@ |
|||||
|
$white: #ffffff; |
||||
|
$black: #000000; |
||||
|
$btnBlack: #151615; |
||||
|
$primary: #000000; |
||||
|
|
||||
|
@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; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: $bRadius; |
||||
|
color: $col2; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: $col2; |
||||
|
color: $col1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin upperBold { |
||||
|
text-transform: uppercase; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
@mixin flexCenter { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
@mixin flexColumnCenter { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
@include main-font; |
||||
|
color: #040000; |
||||
|
background-color: $primary; |
||||
|
} |
||||
|
|
||||
|
.layout_padding { |
||||
|
padding-top: 120px; |
||||
|
padding-bottom: 120px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2 { |
||||
|
padding: 45px 0; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2-top { |
||||
|
padding-top: 45px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding2-bottom { |
||||
|
padding-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding-top { |
||||
|
padding-top: 120px; |
||||
|
} |
||||
|
|
||||
|
.layout_padding-bottom { |
||||
|
padding-bottom: 120px; |
||||
|
} |
||||
|
|
||||
|
.heading_container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
h2 { |
||||
|
font-weight: bold; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
text-transform: uppercase; |
||||
|
color: #010201; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/*header section*/ |
||||
|
|
||||
|
.hero_area { |
||||
|
height: 100vh; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: cover; |
||||
|
position: relative; |
||||
|
|
||||
|
&::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: linear-gradient(to bottom, transparent, transparent, $primary); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sub_page { |
||||
|
.hero_area { |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.class_section .owl-carousel .owl-nav { |
||||
|
top: 55%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.header_section { |
||||
|
background-color: $white; |
||||
|
position: relative; |
||||
|
|
||||
|
&::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
width: 62%; |
||||
|
height: 45px; |
||||
|
background: #080203; |
||||
|
z-index: 1; |
||||
|
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.nav_container { |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.menu_width { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
a, |
||||
|
a:hover, |
||||
|
a:focus { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
a:hover, |
||||
|
a:focus { |
||||
|
color: initial; |
||||
|
} |
||||
|
|
||||
|
.btn, |
||||
|
.btn:focus { |
||||
|
outline: none !important; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
.header_nav { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.main_nav { |
||||
|
position: relative; |
||||
|
z-index: 9; |
||||
|
|
||||
|
.top_nav { |
||||
|
ul { |
||||
|
display: flex; |
||||
|
margin: 0; |
||||
|
|
||||
|
li { |
||||
|
list-style-type: none; |
||||
|
|
||||
|
a { |
||||
|
display: inline-block; |
||||
|
color: $white; |
||||
|
margin: 10px 0 10px 35px; |
||||
|
|
||||
|
img { |
||||
|
max-width: 25px; |
||||
|
max-height: 25px; |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container.navbar-expand-lg .navbar-nav { |
||||
|
.nav-item { |
||||
|
.nav-link { |
||||
|
padding: 10px 20px; |
||||
|
color: #212121; |
||||
|
text-align: center; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
a, |
||||
|
a:hover, |
||||
|
a:focus { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
a:hover, |
||||
|
a:focus { |
||||
|
color: initial; |
||||
|
} |
||||
|
|
||||
|
.btn, |
||||
|
.btn:focus { |
||||
|
outline: none !important; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .nav_search-btn { |
||||
|
background-image: url(../images/search-icon.png); |
||||
|
background-size: 22px; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position-y: 7px; |
||||
|
width: 35px; |
||||
|
height: 35px; |
||||
|
padding: 0; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.navbar-brand { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
width: 125px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
&.brand_mobile { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.custom_nav-container { |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .navbar-toggler { |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.custom_nav-container .navbar-toggler .navbar-toggler-icon { |
||||
|
background-image: url(../images/menu.png); |
||||
|
background-size: 55px; |
||||
|
} |
||||
|
|
||||
|
/*end header section*/ |
||||
|
|
||||
|
/* slider section */ |
||||
|
|
||||
|
.slider_section { |
||||
|
height: calc(100% - 80px); |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
#carouselExampleIndicators { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.row { |
||||
|
.col-md-10 { |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.slider_heading { |
||||
|
transform: rotate(270.5deg) scaleX(-1); |
||||
|
position: absolute; |
||||
|
left: -150px; |
||||
|
top: -25px; |
||||
|
|
||||
|
h2 { |
||||
|
display: flex; |
||||
|
font-size: 10rem; |
||||
|
text-transform: uppercase; |
||||
|
text-orientation: upright; |
||||
|
font-weight: bold; |
||||
|
color: $white; |
||||
|
|
||||
|
span { |
||||
|
color: $primary; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail-box { |
||||
|
h1 { |
||||
|
font-size: 3rem; |
||||
|
font-weight: bold; |
||||
|
text-transform: uppercase; |
||||
|
color: $white; |
||||
|
} |
||||
|
|
||||
|
hr { |
||||
|
margin: 0 auto; |
||||
|
border: none; |
||||
|
width: 1.5px; |
||||
|
height: 65px; |
||||
|
background-color: $white; |
||||
|
} |
||||
|
|
||||
|
.btn-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin-top: 35px; |
||||
|
|
||||
|
.btn-1 { |
||||
|
@include hero_btn($black, $white, 10px, 35px, 35px); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
#carouselExampleIndicators { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
.box { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.carousel-indicators { |
||||
|
position: unset; |
||||
|
margin: 0 70px 45px 70px; |
||||
|
|
||||
|
|
||||
|
li { |
||||
|
text-indent: unset; |
||||
|
border: none; |
||||
|
background-color: transparent; |
||||
|
color: $white; |
||||
|
font-weight: bold; |
||||
|
font-size: 2rem; |
||||
|
opacity: 1; |
||||
|
display: none; |
||||
|
|
||||
|
&.active { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.carousel-control-prev, |
||||
|
.carousel-control-next { |
||||
|
position: absolute; |
||||
|
top: 45%; |
||||
|
left: initial; |
||||
|
right: 25px; |
||||
|
width: 55px; |
||||
|
height: 55px; |
||||
|
border: none; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 8px; |
||||
|
background-position: center; |
||||
|
background-color: $primary; |
||||
|
border-radius: 100%; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: $white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.carousel-control-prev { |
||||
|
|
||||
|
background-image: url(../images/prev.png); |
||||
|
|
||||
|
&:hover { |
||||
|
background-image: url(../images/prev-grey.png); |
||||
|
} |
||||
|
|
||||
|
transform: translateY(57%); |
||||
|
} |
||||
|
|
||||
|
.carousel-control-next { |
||||
|
background-image: url(../images/next.png); |
||||
|
|
||||
|
&:hover { |
||||
|
background-image: url(../images/next-grey.png); |
||||
|
} |
||||
|
|
||||
|
transform: translateY(-57%); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.number_box { |
||||
|
width: 50px; |
||||
|
position: absolute; |
||||
|
left: 25px; |
||||
|
top: 50%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
color: $primary; |
||||
|
transform: translateY(-50%); |
||||
|
|
||||
|
hr { |
||||
|
border: none; |
||||
|
width: 1px; |
||||
|
height: 200px; |
||||
|
background-color: $primary; |
||||
|
margin: 2rem 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* end slider section */ |
||||
|
|
||||
|
// about section |
||||
|
|
||||
|
.about_section { |
||||
|
color: $white; |
||||
|
|
||||
|
.heading_container { |
||||
|
h2 { |
||||
|
color: $white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.about_container { |
||||
|
padding: 45px; |
||||
|
background-size: cover; |
||||
|
|
||||
|
.detail-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
p { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
hr { |
||||
|
margin: 0 auto; |
||||
|
border: none; |
||||
|
width: 1.5px; |
||||
|
height: 125px; |
||||
|
background-color: $white; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
@include hero_btn($black, $white, 8px, 35px, 35px); |
||||
|
margin: 35px auto 0 auto; |
||||
|
box-shadow: 0 0 35px 0 rgba($color: #000000, $alpha: .7); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// end about section |
||||
|
|
||||
|
// class section |
||||
|
|
||||
|
.class_section { |
||||
|
color: $white; |
||||
|
position: relative; |
||||
|
|
||||
|
.row>div { |
||||
|
position: unset; |
||||
|
} |
||||
|
|
||||
|
.class_box-container { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin-top: 45px; |
||||
|
justify-content: center; |
||||
|
|
||||
|
|
||||
|
.box { |
||||
|
position: relative; |
||||
|
|
||||
|
.img-box { |
||||
|
position: relative; |
||||
|
padding-left: 75px; |
||||
|
background-color: $black; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.detail-box { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
padding: 55px 0; |
||||
|
border-radius: 10px; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
|
||||
|
button { |
||||
|
background-color: #292929; |
||||
|
border: none; |
||||
|
width: 55px; |
||||
|
height: 55px; |
||||
|
margin: 0 10px; |
||||
|
border-radius: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
width: 20px; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
margin: 0; |
||||
|
text-transform: uppercase; |
||||
|
color: $white; |
||||
|
font-weight: bold; |
||||
|
line-height: 55px; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn-box { |
||||
|
display: flex; |
||||
|
margin-top: 30px; |
||||
|
|
||||
|
a { |
||||
|
@include hero_btn($black, $white, 10px, 45px, 30px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.owl-carousel { |
||||
|
position: unset; |
||||
|
|
||||
|
.owl-nav { |
||||
|
display: flex; |
||||
|
flex-direction: column-reverse; |
||||
|
align-items: center; |
||||
|
padding: 0 10px; |
||||
|
margin-top: 55px; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
right: 45px; |
||||
|
transform: translateY(-100%); |
||||
|
|
||||
|
.owl-prev, |
||||
|
.owl-next { |
||||
|
background-color: $black; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
background-size: 12px; |
||||
|
border-radius: 100%; |
||||
|
outline: none; |
||||
|
margin: 2px 0; |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: $white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.owl-prev { |
||||
|
width: 75px; |
||||
|
height: 75px; |
||||
|
background-image: url(../images/prev.png); |
||||
|
|
||||
|
&:hover { |
||||
|
background-image: url(../images/prev-grey.png); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.owl-next { |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
background-image: url(../images/next.png); |
||||
|
|
||||
|
&:hover { |
||||
|
background-image: url(../images/next-grey.png); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// end class section |
||||
|
|
||||
|
|
||||
|
// blog section |
||||
|
|
||||
|
.blog_section { |
||||
|
color: $white; |
||||
|
overflow-x: hidden; |
||||
|
|
||||
|
.box { |
||||
|
margin: 45px 0; |
||||
|
background-color: #252525; |
||||
|
|
||||
|
.img-box { |
||||
|
position: relative; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.detail-box { |
||||
|
position: relative; |
||||
|
padding-top: 75px; |
||||
|
padding-bottom: 35px; |
||||
|
|
||||
|
.img_date { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 75px; |
||||
|
height: 75px; |
||||
|
border-radius: 100%; |
||||
|
text-align: center; |
||||
|
background-color: $primary; |
||||
|
color: $white; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
transform: translateY(-50%); |
||||
|
|
||||
|
h6 { |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
h3 { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
@include hero_btn($black, $white, 8px, 25px, 35px); |
||||
|
margin-top: 35px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.b1 { |
||||
|
.detail-box { |
||||
|
padding-right: 35px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.b2 { |
||||
|
.detail-box { |
||||
|
padding-left: 35px; |
||||
|
|
||||
|
.img_date { |
||||
|
left: 35px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
// end blog section |
||||
|
|
||||
|
|
||||
|
|
||||
|
// client section |
||||
|
|
||||
|
.client_section { |
||||
|
|
||||
|
color: $white; |
||||
|
|
||||
|
.heading_container { |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
margin-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
margin: 0 10px; |
||||
|
|
||||
|
.img-box { |
||||
|
width: 125px; |
||||
|
border-radius: 100%; |
||||
|
margin-bottom: -62px; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
padding: 95px 25px 45px 25px; |
||||
|
background-color: #050304; |
||||
|
|
||||
|
h4 { |
||||
|
|
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
p { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
width: 35px; |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.owl-carousel .owl-nav { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding: 0 10px; |
||||
|
margin-top: 55px; |
||||
|
|
||||
|
.owl-prev, |
||||
|
.owl-next { |
||||
|
// position: absolute; |
||||
|
width: 55px; |
||||
|
height: 50px; |
||||
|
opacity: 1; |
||||
|
background-repeat: no-repeat; |
||||
|
background-position: center; |
||||
|
background-size: 12px; |
||||
|
border-radius: 10px; |
||||
|
outline: none; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.owl-prev { |
||||
|
background-image: url(../images/prev-arrow.png); |
||||
|
background-color: $black; |
||||
|
transform: translateX(10px); |
||||
|
background-position: 15px center; |
||||
|
} |
||||
|
|
||||
|
.owl-next { |
||||
|
background-image: url(../images/next-arrow.png); |
||||
|
background-color: $white; |
||||
|
transform: translateX(-10px); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// end client section |
||||
|
|
||||
|
// info section |
||||
|
|
||||
|
.info_section { |
||||
|
.info_main-row { |
||||
|
align-items: flex-end; |
||||
|
} |
||||
|
|
||||
|
// contact section |
||||
|
.contact_section { |
||||
|
position: relative; |
||||
|
|
||||
|
h2 { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
form { |
||||
|
margin-top: 45px; |
||||
|
padding-right: 35px; |
||||
|
margin-bottom: 45px; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
width: 100%; |
||||
|
border: none; |
||||
|
height: 50px; |
||||
|
margin-bottom: 25px; |
||||
|
padding-left: 25px; |
||||
|
background-color: #000; |
||||
|
outline: none; |
||||
|
color: $white; |
||||
|
border-radius: 45px; |
||||
|
|
||||
|
&::placeholder { |
||||
|
color: #737272; |
||||
|
} |
||||
|
|
||||
|
&.message-box { |
||||
|
height: 135px; |
||||
|
border-radius: 25px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
border: none; |
||||
|
@include hero_btn($white, $black, 12px, 55px, 35px); |
||||
|
margin-top: 35px; |
||||
|
} |
||||
|
|
||||
|
.map_container { |
||||
|
height: 100%; |
||||
|
min-height: 325px; |
||||
|
|
||||
|
.map-responsive { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// end contact section |
||||
|
|
||||
|
|
||||
|
.img-box { |
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
// end info section |
||||
|
|
||||
|
|
||||
|
|
||||
|
/* footer section*/ |
||||
|
|
||||
|
.footer_section { |
||||
|
margin: 25px 0; |
||||
|
|
||||
|
.social_box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
a { |
||||
|
margin-right: 15px; |
||||
|
|
||||
|
img { |
||||
|
max-width: 25px; |
||||
|
max-height: 25px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.footer_section p { |
||||
|
margin: 0; |
||||
|
margin-top: 25px; |
||||
|
color: #1c1b1b; |
||||
|
} |
||||
|
|
||||
|
.footer_section a { |
||||
|
color: #1c1b1b; |
||||
|
} |
||||
|
|
||||
|
/* end footer section*/ |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -1,4 +1,117 @@ |
|||||
<h1>{{ post.title }}</h1> |
{% load static %} |
||||
<p>{{ post.short_description }}</p> |
|
||||
<p>{{ post.pub_date }}</p> |
<!DOCTYPE html> |
||||
<p>{{ post.content }}</p> |
<html> |
||||
|
|
||||
|
<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="" /> |
||||
|
|
||||
|
<title>Prudellic</title> |
||||
|
|
||||
|
<!-- slider stylesheet --> |
||||
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> |
||||
|
|
||||
|
<!-- bootstrap core css --> |
||||
|
<link rel="stylesheet" type="text/css" href="{% static 'blog/css/bootstrap.css' %}" /> |
||||
|
|
||||
|
<!-- fonts style --> |
||||
|
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan|Dosis:400,600,700|Poppins:400,600,700&display=swap" rel="stylesheet" /> |
||||
|
<!-- Custom styles for this template --> |
||||
|
<link href="{% static 'blog/css/style.css' %}" rel="stylesheet" /> |
||||
|
<!-- responsive style --> |
||||
|
<link href="{% static 'blog/css/responsive.css' %}" rel="stylesheet" /> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<!-- header section strats --> |
||||
|
<header class="header_section"> |
||||
|
<div class="container"> |
||||
|
<div class="header_nav"> |
||||
|
<a class="navbar-brand brand_desktop" href="index.html"> |
||||
|
<img src="{% static 'blog/images/logo.png' %}" alt="" /> |
||||
|
</a> |
||||
|
<div class="main_nav"> |
||||
|
<div class="top_nav"> |
||||
|
<ul class=" "> |
||||
|
<li class=""> |
||||
|
<a class="" href=""> |
||||
|
<img src="{% static 'blog/images/mail.png' %}" alt="" /> |
||||
|
<span>info@prudellic.com</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="bottom_nav"> |
||||
|
<nav class="navbar navbar-expand-lg custom_nav-container"> |
||||
|
<a class="navbar-brand brand_mobile" href="index.html"> |
||||
|
<img src="{% static 'blog/images/logo.png' %}" alt="" /> |
||||
|
</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="navbar-toggler-icon"></span> |
||||
|
</button> |
||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
||||
|
<div class="d-flex ml-auto flex-column flex-lg-row align-items-center"> |
||||
|
<ul class="navbar-nav "> |
||||
|
<li class="nav-item active"> |
||||
|
<a class="nav-link" href="index.html">Home </a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="about.html"> Blog </a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="class.html"> Sexy Stories </a> |
||||
|
</li> |
||||
|
|
||||
|
</ul> |
||||
|
<form class="form-inline"> |
||||
|
<button class="btn ml-3 ml-lg-5 nav_search-btn" type="submit"></button> |
||||
|
</form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</nav> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
<!-- end header section --> |
||||
|
</div> |
||||
|
|
||||
|
<section class="about_section layout_padding"> |
||||
|
<div class="container-fluid"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-10 ml-auto pr-0"> |
||||
|
<div class="about_container"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-3 col-md-5"> |
||||
|
<div class="detail-box"> |
||||
|
<div class="heading_container"> |
||||
|
<h2> |
||||
|
{{ post.title }} |
||||
|
</h2> |
||||
|
</div> |
||||
|
<p> |
||||
|
{{ post.content }} |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
<!-- end about section --> |
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
|
|||||
@ -0,0 +1,4 @@ |
|||||
|
<h1>{{ post.title }}</h1> |
||||
|
<p>{{ post.short_description }}</p> |
||||
|
<p>{{ post.pub_date }}</p> |
||||
|
<p>{{ post.content }}</p> |
||||
@ -1,77 +1,122 @@ |
|||||
|
{% load static %} |
||||
|
|
||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||
<html lang="en"> |
<html> |
||||
<head> |
|
||||
<meta charset="UTF-8"> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|
||||
<title>Dark Blog</title> |
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> |
|
||||
<style> |
|
||||
body { |
|
||||
background-color: #222; |
|
||||
color: #fff; |
|
||||
padding-top: 56px; /* Adjust this if you have a fixed navbar */ |
|
||||
} |
|
||||
|
|
||||
.navbar { |
<head> |
||||
background-color: #333; |
<!-- 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="" /> |
||||
|
|
||||
.container { |
<title>Prudellic</title> |
||||
margin-top: 20px; |
|
||||
} |
|
||||
|
|
||||
.card { |
<!-- slider stylesheet --> |
||||
background-color: #333; |
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> |
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
.card-header { |
<!-- bootstrap core css --> |
||||
background-color: #555; |
<link rel="stylesheet" type="text/css" href="{% static 'blog/css/bootstrap.css' %}" /> |
||||
} |
|
||||
|
|
||||
.card-body { |
<!-- fonts style --> |
||||
border-top: 1px solid #555; |
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan|Dosis:400,600,700|Poppins:400,600,700&display=swap" rel="stylesheet" /> |
||||
} |
<!-- Custom styles for this template --> |
||||
</style> |
<link href="{% static 'blog/css/style.css' %}" rel="stylesheet" /> |
||||
|
<!-- responsive style --> |
||||
|
<link href="{% static 'blog/css/responsive.css' %}" rel="stylesheet" /> |
||||
</head> |
</head> |
||||
|
|
||||
<body> |
<body> |
||||
|
|
||||
<!-- Navbar --> |
<!-- header section strats --> |
||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top"> |
<header class="header_section"> |
||||
<a class="navbar-brand" href="#">Dark Blog</a> |
<div class="container"> |
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> |
<div class="header_nav"> |
||||
|
<a class="navbar-brand brand_desktop" href="index.html"> |
||||
|
<img src="{% static 'blog/images/logo.png' %}" alt="" /> |
||||
|
</a> |
||||
|
<div class="main_nav"> |
||||
|
<div class="top_nav"> |
||||
|
<ul class=" "> |
||||
|
<li class=""> |
||||
|
<a class="" href=""> |
||||
|
<img src="{% static 'blog/images/mail.png' %}" alt="" /> |
||||
|
<span>info@prudellic.com</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="bottom_nav"> |
||||
|
<nav class="navbar navbar-expand-lg custom_nav-container"> |
||||
|
<a class="navbar-brand brand_mobile" href="index.html"> |
||||
|
<img src="{% static 'blog/images/logo.png' %}" alt="" /> |
||||
|
</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="navbar-toggler-icon"></span> |
<span class="navbar-toggler-icon"></span> |
||||
</button> |
</button> |
||||
<div class="collapse navbar-collapse" id="navbarNav"> |
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
||||
<ul class="navbar-nav ml-auto"> |
<div class="d-flex ml-auto flex-column flex-lg-row align-items-center"> |
||||
|
<ul class="navbar-nav "> |
||||
<li class="nav-item active"> |
<li class="nav-item active"> |
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> |
<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"> Blog </a> |
||||
</li> |
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="class.html"> Sexy Stories </a> |
||||
|
</li> |
||||
|
|
||||
</ul> |
</ul> |
||||
|
<form class="form-inline"> |
||||
|
<button class="btn ml-3 ml-lg-5 nav_search-btn" type="submit"></button> |
||||
|
</form> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</nav> |
</nav> |
||||
|
</div> |
||||
<!-- Content --> |
</div> |
||||
<div class="container"> |
</div> |
||||
<h1 class="mb-4">Dark Blog Posts</h1> |
</div> |
||||
|
</header> |
||||
|
<!-- end header section --> |
||||
|
</div> |
||||
|
|
||||
{% for post in posts %} |
{% for post in posts %} |
||||
<div class="card mb-4"> |
<section class="about_section layout_padding"> |
||||
<div class="card-header"> |
<div class="container-fluid"> |
||||
<h2><a class="text-white" href="{% url 'blog:post_detail' post.id %}">{{ post.title }}</a></h2> |
<div class="row"> |
||||
|
<div class="col-md-10 ml-auto pr-0"> |
||||
|
<div class="about_container"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-3 col-md-5"> |
||||
|
<div class="detail-box"> |
||||
|
<div class="heading_container"> |
||||
|
<h2> |
||||
|
{{ post.title }} |
||||
|
</h2> |
||||
</div> |
</div> |
||||
<div class="card-body"> |
<p> |
||||
<p>{{ post.short_description }}</p> |
{{ post.short_description }} |
||||
<p class="text-muted">{{ post.pub_date }}</p> |
</p> |
||||
|
<a href="{% url 'blog:post_detail' post.id %}"> |
||||
|
Read More |
||||
|
</a> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
{% endfor %} |
|
||||
</div> |
</div> |
||||
|
</div> |
||||
<!-- Bootstrap JavaScript (optional) --> |
</div> |
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> |
</div> |
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js" integrity="sha384-c7IErAlR6aD7me9UaH8aTUpGGUsIfF4hEzQElF6/8zzj/5+8zkbUWEYI6TSA2EZb" crossorigin="anonymous"></script> |
</div> |
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8sh+WyTVMGh/J7kqcG2qNQ8q6vcvcMhvAgi/R" crossorigin="anonymous"></script> |
</section> |
||||
|
{% endfor %} |
||||
|
<!-- end about section --> |
||||
|
|
||||
</body> |
</body> |
||||
|
|
||||
</html> |
</html> |
||||
@ -0,0 +1,77 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
||||
|
<title>Dark Blog</title> |
||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> |
||||
|
<style> |
||||
|
body { |
||||
|
background-color: #222; |
||||
|
color: #fff; |
||||
|
padding-top: 56px; /* Adjust this if you have a fixed navbar */ |
||||
|
} |
||||
|
|
||||
|
.navbar { |
||||
|
background-color: #333; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
background-color: #333; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.card-header { |
||||
|
background-color: #555; |
||||
|
} |
||||
|
|
||||
|
.card-body { |
||||
|
border-top: 1px solid #555; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
|
||||
|
<!-- Navbar --> |
||||
|
<nav class="navbar navbar-expand-lg navbar-dark fixed-top"> |
||||
|
<a class="navbar-brand" href="#">Dark Blog</a> |
||||
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> |
||||
|
<span class="navbar-toggler-icon"></span> |
||||
|
</button> |
||||
|
<div class="collapse navbar-collapse" id="navbarNav"> |
||||
|
<ul class="navbar-nav ml-auto"> |
||||
|
<li class="nav-item active"> |
||||
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- Content --> |
||||
|
<div class="container"> |
||||
|
<h1 class="mb-4">Dark Blog Posts</h1> |
||||
|
|
||||
|
{% for post in posts %} |
||||
|
<div class="card mb-4"> |
||||
|
<div class="card-header"> |
||||
|
<h2><a class="text-white" href="{% url 'blog:post_detail' post.id %}">{{ post.title }}</a></h2> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<p>{{ post.short_description }}</p> |
||||
|
<p class="text-muted">{{ post.pub_date }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
{% endfor %} |
||||
|
</div> |
||||
|
|
||||
|
<!-- Bootstrap JavaScript (optional) --> |
||||
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> |
||||
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js" integrity="sha384-c7IErAlR6aD7me9UaH8aTUpGGUsIfF4hEzQElF6/8zzj/5+8zkbUWEYI6TSA2EZb" crossorigin="anonymous"></script> |
||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8sh+WyTVMGh/J7kqcG2qNQ8q6vcvcMhvAgi/R" crossorigin="anonymous"></script> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,275 @@ |
|||||
|
select.admin-autocomplete { |
||||
|
width: 20em; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container { |
||||
|
min-height: 30px; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--single, |
||||
|
.select2-container--admin-autocomplete .select2-selection--multiple { |
||||
|
min-height: 30px; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container--focus .select2-selection, |
||||
|
.select2-container--admin-autocomplete.select2-container--open .select2-selection { |
||||
|
border-color: var(--body-quiet-color); |
||||
|
min-height: 30px; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container--focus .select2-selection.select2-selection--single, |
||||
|
.select2-container--admin-autocomplete.select2-container--open .select2-selection.select2-selection--single { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container--focus .select2-selection.select2-selection--multiple, |
||||
|
.select2-container--admin-autocomplete.select2-container--open .select2-selection.select2-selection--multiple { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--single { |
||||
|
background-color: var(--body-bg); |
||||
|
border: 1px solid var(--border-color); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered { |
||||
|
color: var(--body-fg); |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__clear { |
||||
|
cursor: pointer; |
||||
|
float: right; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__placeholder { |
||||
|
color: var(--body-quiet-color); |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow { |
||||
|
height: 26px; |
||||
|
position: absolute; |
||||
|
top: 1px; |
||||
|
right: 1px; |
||||
|
width: 20px; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow b { |
||||
|
border-color: #888 transparent transparent transparent; |
||||
|
border-style: solid; |
||||
|
border-width: 5px 4px 0 4px; |
||||
|
height: 0; |
||||
|
left: 50%; |
||||
|
margin-left: -4px; |
||||
|
margin-top: -2px; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
width: 0; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--single .select2-selection__clear { |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--single .select2-selection__arrow { |
||||
|
left: 1px; |
||||
|
right: auto; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single { |
||||
|
background-color: var(--darkened-bg); |
||||
|
cursor: default; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single .select2-selection__clear { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container--open .select2-selection--single .select2-selection__arrow b { |
||||
|
border-color: transparent transparent #888 transparent; |
||||
|
border-width: 0 4px 5px 4px; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--multiple { |
||||
|
background-color: var(--body-bg); |
||||
|
border: 1px solid var(--border-color); |
||||
|
border-radius: 4px; |
||||
|
cursor: text; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered { |
||||
|
box-sizing: border-box; |
||||
|
list-style: none; |
||||
|
margin: 0; |
||||
|
padding: 0 10px 5px 5px; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered li { |
||||
|
list-style: none; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__placeholder { |
||||
|
color: var(--body-quiet-color); |
||||
|
margin-top: 5px; |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__clear { |
||||
|
cursor: pointer; |
||||
|
float: right; |
||||
|
font-weight: bold; |
||||
|
margin: 5px; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice { |
||||
|
background-color: var(--darkened-bg); |
||||
|
border: 1px solid var(--border-color); |
||||
|
border-radius: 4px; |
||||
|
cursor: default; |
||||
|
float: left; |
||||
|
margin-right: 5px; |
||||
|
margin-top: 5px; |
||||
|
padding: 0 5px; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove { |
||||
|
color: var(--body-quiet-color); |
||||
|
cursor: pointer; |
||||
|
display: inline-block; |
||||
|
font-weight: bold; |
||||
|
margin-right: 2px; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove:hover { |
||||
|
color: var(--body-fg); |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-search--inline { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice { |
||||
|
margin-left: 5px; |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { |
||||
|
margin-left: 2px; |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container--focus .select2-selection--multiple { |
||||
|
border: solid var(--body-quiet-color) 1px; |
||||
|
outline: 0; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--multiple { |
||||
|
background-color: var(--darkened-bg); |
||||
|
cursor: default; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container--disabled .select2-selection__choice__remove { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container--open.select2-container--above .select2-selection--single, .select2-container--admin-autocomplete.select2-container--open.select2-container--above .select2-selection--multiple { |
||||
|
border-top-left-radius: 0; |
||||
|
border-top-right-radius: 0; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete.select2-container--open.select2-container--below .select2-selection--single, .select2-container--admin-autocomplete.select2-container--open.select2-container--below .select2-selection--multiple { |
||||
|
border-bottom-left-radius: 0; |
||||
|
border-bottom-right-radius: 0; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-search--dropdown { |
||||
|
background: var(--darkened-bg); |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field { |
||||
|
background: var(--body-bg); |
||||
|
color: var(--body-fg); |
||||
|
border: 1px solid var(--border-color); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-search--inline .select2-search__field { |
||||
|
background: transparent; |
||||
|
color: var(--body-fg); |
||||
|
border: none; |
||||
|
outline: 0; |
||||
|
box-shadow: none; |
||||
|
-webkit-appearance: textfield; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results > .select2-results__options { |
||||
|
max-height: 200px; |
||||
|
overflow-y: auto; |
||||
|
color: var(--body-fg); |
||||
|
background: var(--body-bg); |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__option[role=group] { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__option[aria-disabled=true] { |
||||
|
color: var(--body-quiet-color); |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__option[aria-selected=true] { |
||||
|
background-color: var(--selected-bg); |
||||
|
color: var(--body-fg); |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__option .select2-results__option { |
||||
|
padding-left: 1em; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__group { |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option { |
||||
|
margin-left: -1em; |
||||
|
padding-left: 2em; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option { |
||||
|
margin-left: -2em; |
||||
|
padding-left: 3em; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { |
||||
|
margin-left: -3em; |
||||
|
padding-left: 4em; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { |
||||
|
margin-left: -4em; |
||||
|
padding-left: 5em; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { |
||||
|
margin-left: -5em; |
||||
|
padding-left: 6em; |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] { |
||||
|
background-color: var(--primary); |
||||
|
color: var(--primary-fg); |
||||
|
} |
||||
|
|
||||
|
.select2-container--admin-autocomplete .select2-results__group { |
||||
|
cursor: default; |
||||
|
display: block; |
||||
|
padding: 6px; |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,328 @@ |
|||||
|
/* CHANGELISTS */ |
||||
|
|
||||
|
#changelist { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
#changelist .changelist-form-container { |
||||
|
flex: 1 1 auto; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
|
||||
|
#changelist table { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.change-list .hiddenfields { display:none; } |
||||
|
|
||||
|
.change-list .filtered table { |
||||
|
border-right: none; |
||||
|
} |
||||
|
|
||||
|
.change-list .filtered { |
||||
|
min-height: 400px; |
||||
|
} |
||||
|
|
||||
|
.change-list .filtered .results, .change-list .filtered .paginator, |
||||
|
.filtered #toolbar, .filtered div.xfull { |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
.change-list .filtered table tbody th { |
||||
|
padding-right: 1em; |
||||
|
} |
||||
|
|
||||
|
#changelist-form .results { |
||||
|
overflow-x: auto; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
#changelist .toplinks { |
||||
|
border-bottom: 1px solid var(--hairline-color); |
||||
|
} |
||||
|
|
||||
|
#changelist .paginator { |
||||
|
color: var(--body-quiet-color); |
||||
|
border-bottom: 1px solid var(--hairline-color); |
||||
|
background: var(--body-bg); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
/* CHANGELIST TABLES */ |
||||
|
|
||||
|
#changelist table thead th { |
||||
|
padding: 0; |
||||
|
white-space: nowrap; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
#changelist table thead th.action-checkbox-column { |
||||
|
width: 1.5em; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
#changelist table tbody td.action-checkbox { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
#changelist table tfoot { |
||||
|
color: var(--body-quiet-color); |
||||
|
} |
||||
|
|
||||
|
/* TOOLBAR */ |
||||
|
|
||||
|
#toolbar { |
||||
|
padding: 8px 10px; |
||||
|
margin-bottom: 15px; |
||||
|
border-top: 1px solid var(--hairline-color); |
||||
|
border-bottom: 1px solid var(--hairline-color); |
||||
|
background: var(--darkened-bg); |
||||
|
color: var(--body-quiet-color); |
||||
|
} |
||||
|
|
||||
|
#toolbar form input { |
||||
|
border-radius: 4px; |
||||
|
font-size: 0.875rem; |
||||
|
padding: 5px; |
||||
|
color: var(--body-fg); |
||||
|
} |
||||
|
|
||||
|
#toolbar #searchbar { |
||||
|
height: 1.1875rem; |
||||
|
border: 1px solid var(--border-color); |
||||
|
padding: 2px 5px; |
||||
|
margin: 0; |
||||
|
vertical-align: top; |
||||
|
font-size: 0.8125rem; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
|
||||
|
#toolbar #searchbar:focus { |
||||
|
border-color: var(--body-quiet-color); |
||||
|
} |
||||
|
|
||||
|
#toolbar form input[type="submit"] { |
||||
|
border: 1px solid var(--border-color); |
||||
|
font-size: 0.8125rem; |
||||
|
padding: 4px 8px; |
||||
|
margin: 0; |
||||
|
vertical-align: middle; |
||||
|
background: var(--body-bg); |
||||
|
box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; |
||||
|
cursor: pointer; |
||||
|
color: var(--body-fg); |
||||
|
} |
||||
|
|
||||
|
#toolbar form input[type="submit"]:focus, |
||||
|
#toolbar form input[type="submit"]:hover { |
||||
|
border-color: var(--body-quiet-color); |
||||
|
} |
||||
|
|
||||
|
#changelist-search img { |
||||
|
vertical-align: middle; |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
|
||||
|
#changelist-search .help { |
||||
|
word-break: break-word; |
||||
|
} |
||||
|
|
||||
|
/* FILTER COLUMN */ |
||||
|
|
||||
|
#changelist-filter { |
||||
|
flex: 0 0 240px; |
||||
|
order: 1; |
||||
|
background: var(--darkened-bg); |
||||
|
border-left: none; |
||||
|
margin: 0 0 0 30px; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter h2 { |
||||
|
font-size: 0.875rem; |
||||
|
text-transform: uppercase; |
||||
|
letter-spacing: 0.5px; |
||||
|
padding: 5px 15px; |
||||
|
margin-bottom: 12px; |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter h3, |
||||
|
#changelist-filter details summary { |
||||
|
font-weight: 400; |
||||
|
padding: 0 15px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter details summary > * { |
||||
|
display: inline; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter details > summary { |
||||
|
list-style-type: none; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter details > summary::-webkit-details-marker { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter details > summary::before { |
||||
|
content: '→'; |
||||
|
font-weight: bold; |
||||
|
color: var(--link-hover-color); |
||||
|
} |
||||
|
|
||||
|
#changelist-filter details[open] > summary::before { |
||||
|
content: '↓'; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter ul { |
||||
|
margin: 5px 0; |
||||
|
padding: 0 15px 15px; |
||||
|
border-bottom: 1px solid var(--hairline-color); |
||||
|
} |
||||
|
|
||||
|
#changelist-filter ul:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter li { |
||||
|
list-style-type: none; |
||||
|
margin-left: 0; |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter a { |
||||
|
display: block; |
||||
|
color: var(--body-quiet-color); |
||||
|
word-break: break-word; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter li.selected { |
||||
|
border-left: 5px solid var(--hairline-color); |
||||
|
padding-left: 10px; |
||||
|
margin-left: -15px; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter li.selected a { |
||||
|
color: var(--link-selected-fg); |
||||
|
} |
||||
|
|
||||
|
#changelist-filter a:focus, #changelist-filter a:hover, |
||||
|
#changelist-filter li.selected a:focus, |
||||
|
#changelist-filter li.selected a:hover { |
||||
|
color: var(--link-hover-color); |
||||
|
} |
||||
|
|
||||
|
#changelist-filter #changelist-filter-clear a { |
||||
|
font-size: 0.8125rem; |
||||
|
padding-bottom: 10px; |
||||
|
border-bottom: 1px solid var(--hairline-color); |
||||
|
} |
||||
|
|
||||
|
/* DATE DRILLDOWN */ |
||||
|
|
||||
|
.change-list .toplinks { |
||||
|
display: flex; |
||||
|
padding-bottom: 5px; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 3px 17px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.change-list .toplinks a { |
||||
|
font-size: 0.8125rem; |
||||
|
} |
||||
|
|
||||
|
.change-list .toplinks .date-back { |
||||
|
color: var(--body-quiet-color); |
||||
|
} |
||||
|
|
||||
|
.change-list .toplinks .date-back:focus, |
||||
|
.change-list .toplinks .date-back:hover { |
||||
|
color: var(--link-hover-color); |
||||
|
} |
||||
|
|
||||
|
/* ACTIONS */ |
||||
|
|
||||
|
.filtered .actions { |
||||
|
border-right: none; |
||||
|
} |
||||
|
|
||||
|
#changelist table input { |
||||
|
margin: 0; |
||||
|
vertical-align: baseline; |
||||
|
} |
||||
|
|
||||
|
/* Once the :has() pseudo-class is supported by all browsers, the tr.selected |
||||
|
selector and the JS adding the class can be removed. */ |
||||
|
#changelist tbody tr.selected { |
||||
|
background-color: var(--selected-row); |
||||
|
} |
||||
|
|
||||
|
#changelist tbody tr:has(.action-select:checked) { |
||||
|
background-color: var(--selected-row); |
||||
|
} |
||||
|
|
||||
|
#changelist .actions { |
||||
|
padding: 10px; |
||||
|
background: var(--body-bg); |
||||
|
border-top: none; |
||||
|
border-bottom: none; |
||||
|
line-height: 1.5rem; |
||||
|
color: var(--body-quiet-color); |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions span.all, |
||||
|
#changelist .actions span.action-counter, |
||||
|
#changelist .actions span.clear, |
||||
|
#changelist .actions span.question { |
||||
|
font-size: 0.8125rem; |
||||
|
margin: 0 0.5em; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions select { |
||||
|
vertical-align: top; |
||||
|
height: 1.5rem; |
||||
|
color: var(--body-fg); |
||||
|
border: 1px solid var(--border-color); |
||||
|
border-radius: 4px; |
||||
|
font-size: 0.875rem; |
||||
|
padding: 0 0 0 4px; |
||||
|
margin: 0; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions select:focus { |
||||
|
border-color: var(--body-quiet-color); |
||||
|
} |
||||
|
|
||||
|
#changelist .actions label { |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
font-size: 0.8125rem; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions .button { |
||||
|
font-size: 0.8125rem; |
||||
|
border: 1px solid var(--border-color); |
||||
|
border-radius: 4px; |
||||
|
background: var(--body-bg); |
||||
|
box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; |
||||
|
cursor: pointer; |
||||
|
height: 1.5rem; |
||||
|
line-height: 1; |
||||
|
padding: 4px 8px; |
||||
|
margin: 0; |
||||
|
color: var(--body-fg); |
||||
|
} |
||||
|
|
||||
|
#changelist .actions .button:focus, #changelist .actions .button:hover { |
||||
|
border-color: var(--body-quiet-color); |
||||
|
} |
||||
@ -0,0 +1,137 @@ |
|||||
|
@media (prefers-color-scheme: dark) { |
||||
|
:root { |
||||
|
--primary: #264b5d; |
||||
|
--primary-fg: #f7f7f7; |
||||
|
|
||||
|
--body-fg: #eeeeee; |
||||
|
--body-bg: #121212; |
||||
|
--body-quiet-color: #e0e0e0; |
||||
|
--body-loud-color: #ffffff; |
||||
|
|
||||
|
--breadcrumbs-link-fg: #e0e0e0; |
||||
|
--breadcrumbs-bg: var(--primary); |
||||
|
|
||||
|
--link-fg: #81d4fa; |
||||
|
--link-hover-color: #4ac1f7; |
||||
|
--link-selected-fg: #6f94c6; |
||||
|
|
||||
|
--hairline-color: #272727; |
||||
|
--border-color: #353535; |
||||
|
|
||||
|
--error-fg: #e35f5f; |
||||
|
--message-success-bg: #006b1b; |
||||
|
--message-warning-bg: #583305; |
||||
|
--message-error-bg: #570808; |
||||
|
|
||||
|
--darkened-bg: #212121; |
||||
|
--selected-bg: #1b1b1b; |
||||
|
--selected-row: #00363a; |
||||
|
|
||||
|
--close-button-bg: #333333; |
||||
|
--close-button-hover-bg: #666666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
html[data-theme="dark"] { |
||||
|
--primary: #264b5d; |
||||
|
--primary-fg: #f7f7f7; |
||||
|
|
||||
|
--body-fg: #eeeeee; |
||||
|
--body-bg: #121212; |
||||
|
--body-quiet-color: #e0e0e0; |
||||
|
--body-loud-color: #ffffff; |
||||
|
|
||||
|
--breadcrumbs-link-fg: #e0e0e0; |
||||
|
--breadcrumbs-bg: var(--primary); |
||||
|
|
||||
|
--link-fg: #81d4fa; |
||||
|
--link-hover-color: #4ac1f7; |
||||
|
--link-selected-fg: #6f94c6; |
||||
|
|
||||
|
--hairline-color: #272727; |
||||
|
--border-color: #353535; |
||||
|
|
||||
|
--error-fg: #e35f5f; |
||||
|
--message-success-bg: #006b1b; |
||||
|
--message-warning-bg: #583305; |
||||
|
--message-error-bg: #570808; |
||||
|
|
||||
|
--darkened-bg: #212121; |
||||
|
--selected-bg: #1b1b1b; |
||||
|
--selected-row: #00363a; |
||||
|
|
||||
|
--close-button-bg: #333333; |
||||
|
--close-button-hover-bg: #666666; |
||||
|
} |
||||
|
|
||||
|
/* THEME SWITCH */ |
||||
|
.theme-toggle { |
||||
|
cursor: pointer; |
||||
|
border: none; |
||||
|
padding: 0; |
||||
|
background: transparent; |
||||
|
vertical-align: middle; |
||||
|
margin-inline-start: 5px; |
||||
|
margin-top: -1px; |
||||
|
} |
||||
|
|
||||
|
.theme-toggle svg { |
||||
|
vertical-align: middle; |
||||
|
height: 1rem; |
||||
|
width: 1rem; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
Fully hide screen reader text so we only show the one matching the current |
||||
|
theme. |
||||
|
*/ |
||||
|
.theme-toggle .visually-hidden { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
html[data-theme="auto"] .theme-toggle .theme-label-when-auto { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
html[data-theme="dark"] .theme-toggle .theme-label-when-dark { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
html[data-theme="light"] .theme-toggle .theme-label-when-light { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/* ICONS */ |
||||
|
.theme-toggle svg.theme-icon-when-auto, |
||||
|
.theme-toggle svg.theme-icon-when-dark, |
||||
|
.theme-toggle svg.theme-icon-when-light { |
||||
|
fill: var(--header-link-color); |
||||
|
color: var(--header-bg); |
||||
|
} |
||||
|
|
||||
|
html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
html[data-theme="light"] .theme-toggle svg.theme-icon-when-light { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.visually-hidden { |
||||
|
position: absolute; |
||||
|
width: 1px; |
||||
|
height: 1px; |
||||
|
padding: 0; |
||||
|
overflow: hidden; |
||||
|
clip: rect(0,0,0,0); |
||||
|
white-space: nowrap; |
||||
|
border: 0; |
||||
|
color: var(--body-fg); |
||||
|
background-color: var(--body-bg); |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
/* DASHBOARD */ |
||||
|
.dashboard td, .dashboard th { |
||||
|
word-break: break-word; |
||||
|
} |
||||
|
|
||||
|
.dashboard .module table th { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.dashboard .module table td { |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.dashboard .module table td a { |
||||
|
display: block; |
||||
|
padding-right: .6em; |
||||
|
} |
||||
|
|
||||
|
/* RECENT ACTIONS MODULE */ |
||||
|
|
||||
|
.module ul.actionlist { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
|
||||
|
ul.actionlist li { |
||||
|
list-style-type: none; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
@ -0,0 +1,530 @@ |
|||||
|
@import url('widgets.css'); |
||||
|
|
||||
|
/* FORM ROWS */ |
||||
|
|
||||
|
.form-row { |
||||
|
overflow: hidden; |
||||
|
padding: 10px; |
||||
|
font-size: 0.8125rem; |
||||
|
border-bottom: 1px solid var(--hairline-color); |
||||
|
} |
||||
|
|
||||
|
.form-row img, .form-row input { |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
.form-row label input[type="checkbox"] { |
||||
|
margin-top: 0; |
||||
|
vertical-align: 0; |
||||
|
} |
||||
|
|
||||
|
form .form-row p { |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
|
||||
|
.flex-container { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.form-multiline > div { |
||||
|
padding-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
/* FORM LABELS */ |
||||
|
|
||||
|
label { |
||||
|
font-weight: normal; |
||||
|
color: var(--body-quiet-color); |
||||
|
font-size: 0.8125rem; |
||||
|
} |
||||
|
|
||||
|
.required label, label.required { |
||||
|
font-weight: bold; |
||||
|
color: var(--body-fg); |
||||
|
} |
||||
|
|
||||
|
/* RADIO BUTTONS */ |
||||
|
|
||||
|
form div.radiolist div { |
||||
|
padding-right: 7px; |
||||
|
} |
||||
|
|
||||
|
form div.radiolist.inline div { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
form div.radiolist label { |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
form div.radiolist input[type="radio"] { |
||||
|
margin: -2px 4px 0 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
form ul.inline { |
||||
|
margin-left: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
form ul.inline li { |
||||
|
float: left; |
||||
|
padding-right: 7px; |
||||
|
} |
||||
|
|
||||
|
/* ALIGNED FIELDSETS */ |
||||
|
|
||||
|
.aligned label { |
||||
|
display: block; |
||||
|
padding: 4px 10px 0 0; |
||||
|
width: 160px; |
||||
|
word-wrap: break-word; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
.aligned label:not(.vCheckboxLabel):after { |
||||
|
content: ''; |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
height: 1.625rem; |
||||
|
} |
||||
|
|
||||
|
.aligned label + p, .aligned .checkbox-row + div.help, .aligned label + div.readonly { |
||||
|
padding: 6px 0; |
||||
|
margin-top: 0; |
||||
|
margin-bottom: 0; |
||||
|
margin-left: 0; |
||||
|
overflow-wrap: break-word; |
||||
|
} |
||||
|
|
||||
|
.aligned ul label { |
||||
|
display: inline; |
||||
|
float: none; |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
.aligned .form-row input { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.colMS .aligned .vLargeTextField, .colMS .aligned .vXMLLargeTextField { |
||||
|
width: 350px; |
||||
|
} |
||||
|
|
||||
|
form .aligned ul { |
||||
|
margin-left: 160px; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
|
||||
|
form .aligned div.radiolist { |
||||
|
display: inline-block; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
form .aligned p.help, |
||||
|
form .aligned div.help { |
||||
|
margin-top: 0; |
||||
|
margin-left: 160px; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
|
||||
|
form .aligned p.date div.help.timezonewarning, |
||||
|
form .aligned p.datetime div.help.timezonewarning, |
||||
|
form .aligned p.time div.help.timezonewarning { |
||||
|
margin-left: 0; |
||||
|
padding-left: 0; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
|
||||
|
form .aligned p.help:last-child, |
||||
|
form .aligned div.help:last-child { |
||||
|
margin-bottom: 0; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
form .aligned input + p.help, |
||||
|
form .aligned textarea + p.help, |
||||
|
form .aligned select + p.help, |
||||
|
form .aligned input + div.help, |
||||
|
form .aligned textarea + div.help, |
||||
|
form .aligned select + div.help { |
||||
|
margin-left: 160px; |
||||
|
padding-left: 10px; |
||||
|
} |
||||
|
|
||||
|
form .aligned ul li { |
||||
|
list-style: none; |
||||
|
} |
||||
|
|
||||
|
form .aligned table p { |
||||
|
margin-left: 0; |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
|
||||
|
.aligned .vCheckboxLabel { |
||||
|
float: none; |
||||
|
width: auto; |
||||
|
display: inline-block; |
||||
|
vertical-align: -3px; |
||||
|
padding: 0 0 5px 5px; |
||||
|
} |
||||
|
|
||||
|
.aligned .vCheckboxLabel + p.help, |
||||
|
.aligned .vCheckboxLabel + div.help { |
||||
|
margin-top: -4px; |
||||
|
} |
||||
|
|
||||
|
.colM .aligned .vLargeTextField, .colM .aligned .vXMLLargeTextField { |
||||
|
width: 610px; |
||||
|
} |
||||
|
|
||||
|
fieldset .fieldBox { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
/* WIDE FIELDSETS */ |
||||
|
|
||||
|
.wide label { |
||||
|
width: 200px; |
||||
|
} |
||||
|
|
||||
|
form .wide p, |
||||
|
form .wide ul.errorlist, |
||||
|
form .wide input + p.help, |
||||
|
form .wide input + div.help { |
||||
|
margin-left: 200px; |
||||
|
} |
||||
|
|
||||
|
form .wide p.help, |
||||
|
form .wide div.help { |
||||
|
padding-left: 50px; |
||||
|
} |
||||
|
|
||||
|
form div.help ul { |
||||
|
padding-left: 0; |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
|
||||
|
.colM fieldset.wide .vLargeTextField, .colM fieldset.wide .vXMLLargeTextField { |
||||
|
width: 450px; |
||||
|
} |
||||
|
|
||||
|
/* COLLAPSED FIELDSETS */ |
||||
|
|
||||
|
fieldset.collapsed * { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
fieldset.collapsed h2, fieldset.collapsed { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
fieldset.collapsed { |
||||
|
border: 1px solid var(--hairline-color); |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
fieldset.collapsed h2 { |
||||
|
background: var(--darkened-bg); |
||||
|
color: var(--body-quiet-color); |
||||
|
} |
||||
|
|
||||
|
fieldset .collapse-toggle { |
||||
|
color: var(--header-link-color); |
||||
|
} |
||||
|
|
||||
|
fieldset.collapsed .collapse-toggle { |
||||
|
background: transparent; |
||||
|
display: inline; |
||||
|
color: var(--link-fg); |
||||
|
} |
||||
|
|
||||
|
/* MONOSPACE TEXTAREAS */ |
||||
|
|
||||
|
fieldset.monospace textarea { |
||||
|
font-family: var(--font-family-monospace); |
||||
|
} |
||||
|
|
||||
|
/* SUBMIT ROW */ |
||||
|
|
||||
|
.submit-row { |
||||
|
padding: 12px 14px 12px; |
||||
|
margin: 0 0 20px; |
||||
|
background: var(--darkened-bg); |
||||
|
border: 1px solid var(--hairline-color); |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
gap: 10px; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
body.popup .submit-row { |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.submit-row input { |
||||
|
height: 2.1875rem; |
||||
|
line-height: 0.9375rem; |
||||
|
} |
||||
|
|
||||
|
.submit-row input, .submit-row a { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.submit-row input.default { |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
|
||||
|
.submit-row a.deletelink { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
|
||||
|
.submit-row a.deletelink { |
||||
|
display: block; |
||||
|
background: var(--delete-button-bg); |
||||
|
border-radius: 4px; |
||||
|
padding: 0.625rem 0.9375rem; |
||||
|
height: 0.9375rem; |
||||
|
line-height: 0.9375rem; |
||||
|
color: var(--button-fg); |
||||
|
} |
||||
|
|
||||
|
.submit-row a.closelink { |
||||
|
display: inline-block; |
||||
|
background: var(--close-button-bg); |
||||
|
border-radius: 4px; |
||||
|
padding: 10px 15px; |
||||
|
height: 0.9375rem; |
||||
|
line-height: 0.9375rem; |
||||
|
color: var(--button-fg); |
||||
|
} |
||||
|
|
||||
|
.submit-row a.deletelink:focus, |
||||
|
.submit-row a.deletelink:hover, |
||||
|
.submit-row a.deletelink:active { |
||||
|
background: var(--delete-button-hover-bg); |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
.submit-row a.closelink:focus, |
||||
|
.submit-row a.closelink:hover, |
||||
|
.submit-row a.closelink:active { |
||||
|
background: var(--close-button-hover-bg); |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
/* CUSTOM FORM FIELDS */ |
||||
|
|
||||
|
.vSelectMultipleField { |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
.vCheckboxField { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.vDateField, .vTimeField { |
||||
|
margin-right: 2px; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.vDateField { |
||||
|
min-width: 6.85em; |
||||
|
} |
||||
|
|
||||
|
.vTimeField { |
||||
|
min-width: 4.7em; |
||||
|
} |
||||
|
|
||||
|
.vURLField { |
||||
|
width: 30em; |
||||
|
} |
||||
|
|
||||
|
.vLargeTextField, .vXMLLargeTextField { |
||||
|
width: 48em; |
||||
|
} |
||||
|
|
||||
|
.flatpages-flatpage #id_content { |
||||
|
height: 40.2em; |
||||
|
} |
||||
|
|
||||
|
.module table .vPositiveSmallIntegerField { |
||||
|
width: 2.2em; |
||||
|
} |
||||
|
|
||||
|
.vIntegerField { |
||||
|
width: 5em; |
||||
|
} |
||||
|
|
||||
|
.vBigIntegerField { |
||||
|
width: 10em; |
||||
|
} |
||||
|
|
||||
|
.vForeignKeyRawIdAdminField { |
||||
|
width: 5em; |
||||
|
} |
||||
|
|
||||
|
.vTextField, .vUUIDField { |
||||
|
width: 20em; |
||||
|
} |
||||
|
|
||||
|
/* INLINES */ |
||||
|
|
||||
|
.inline-group { |
||||
|
padding: 0; |
||||
|
margin: 0 0 30px; |
||||
|
} |
||||
|
|
||||
|
.inline-group thead th { |
||||
|
padding: 8px 10px; |
||||
|
} |
||||
|
|
||||
|
.inline-group .aligned label { |
||||
|
width: 160px; |
||||
|
} |
||||
|
|
||||
|
.inline-related { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.inline-related h3 { |
||||
|
margin: 0; |
||||
|
color: var(--body-quiet-color); |
||||
|
padding: 5px; |
||||
|
font-size: 0.8125rem; |
||||
|
background: var(--darkened-bg); |
||||
|
border-top: 1px solid var(--hairline-color); |
||||
|
border-bottom: 1px solid var(--hairline-color); |
||||
|
} |
||||
|
|
||||
|
.inline-related h3 span.delete { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
.inline-related h3 span.delete label { |
||||
|
margin-left: 2px; |
||||
|
font-size: 0.6875rem; |
||||
|
} |
||||
|
|
||||
|
.inline-related fieldset { |
||||
|
margin: 0; |
||||
|
background: var(--body-bg); |
||||
|
border: none; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.inline-related fieldset.module h3 { |
||||
|
margin: 0; |
||||
|
padding: 2px 5px 3px 5px; |
||||
|
font-size: 0.6875rem; |
||||
|
text-align: left; |
||||
|
font-weight: bold; |
||||
|
background: #bcd; |
||||
|
color: var(--body-bg); |
||||
|
} |
||||
|
|
||||
|
.inline-group .tabular fieldset.module { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.inline-related.tabular fieldset.module table { |
||||
|
width: 100%; |
||||
|
overflow-x: scroll; |
||||
|
} |
||||
|
|
||||
|
.last-related fieldset { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.inline-group .tabular tr.has_original td { |
||||
|
padding-top: 2em; |
||||
|
} |
||||
|
|
||||
|
.inline-group .tabular tr td.original { |
||||
|
padding: 2px 0 0 0; |
||||
|
width: 0; |
||||
|
_position: relative; |
||||
|
} |
||||
|
|
||||
|
.inline-group .tabular th.original { |
||||
|
width: 0px; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.inline-group .tabular td.original p { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
height: 1.1em; |
||||
|
padding: 2px 9px; |
||||
|
overflow: hidden; |
||||
|
font-size: 0.5625rem; |
||||
|
font-weight: bold; |
||||
|
color: var(--body-quiet-color); |
||||
|
_width: 700px; |
||||
|
} |
||||
|
|
||||
|
.inline-group ul.tools { |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
list-style: none; |
||||
|
} |
||||
|
|
||||
|
.inline-group ul.tools li { |
||||
|
display: inline; |
||||
|
padding: 0 5px; |
||||
|
} |
||||
|
|
||||
|
.inline-group div.add-row, |
||||
|
.inline-group .tabular tr.add-row td { |
||||
|
color: var(--body-quiet-color); |
||||
|
background: var(--darkened-bg); |
||||
|
padding: 8px 10px; |
||||
|
border-bottom: 1px solid var(--hairline-color); |
||||
|
} |
||||
|
|
||||
|
.inline-group .tabular tr.add-row td { |
||||
|
padding: 8px 10px; |
||||
|
border-bottom: 1px solid var(--hairline-color); |
||||
|
} |
||||
|
|
||||
|
.inline-group ul.tools a.add, |
||||
|
.inline-group div.add-row a, |
||||
|
.inline-group .tabular tr.add-row td a { |
||||
|
background: url(../img/icon-addlink.svg) 0 1px no-repeat; |
||||
|
padding-left: 16px; |
||||
|
font-size: 0.75rem; |
||||
|
} |
||||
|
|
||||
|
.empty-form { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* RELATED FIELD ADD ONE / LOOKUP */ |
||||
|
|
||||
|
.related-lookup { |
||||
|
margin-left: 5px; |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.related-lookup { |
||||
|
width: 1rem; |
||||
|
height: 1rem; |
||||
|
background-image: url(../img/search.svg); |
||||
|
} |
||||
|
|
||||
|
form .related-widget-wrapper ul { |
||||
|
display: inline-block; |
||||
|
margin-left: 0; |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
|
||||
|
.clearable-file-input input { |
||||
|
margin-top: 0; |
||||
|
} |
||||
@ -0,0 +1,61 @@ |
|||||
|
/* LOGIN FORM */ |
||||
|
|
||||
|
.login { |
||||
|
background: var(--darkened-bg); |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.login #header { |
||||
|
height: auto; |
||||
|
padding: 15px 16px; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.login #header h1 { |
||||
|
font-size: 1.125rem; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.login #header h1 a { |
||||
|
color: var(--header-link-color); |
||||
|
} |
||||
|
|
||||
|
.login #content { |
||||
|
padding: 20px 20px 0; |
||||
|
} |
||||
|
|
||||
|
.login #container { |
||||
|
background: var(--body-bg); |
||||
|
border: 1px solid var(--hairline-color); |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
width: 28em; |
||||
|
min-width: 300px; |
||||
|
margin: 100px auto; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.login .form-row { |
||||
|
padding: 4px 0; |
||||
|
} |
||||
|
|
||||
|
.login .form-row label { |
||||
|
display: block; |
||||
|
line-height: 2em; |
||||
|
} |
||||
|
|
||||
|
.login .form-row #id_username, .login .form-row #id_password { |
||||
|
padding: 8px; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.login .submit-row { |
||||
|
padding: 1em 0 0 0; |
||||
|
margin: 0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.login .password-reset-link { |
||||
|
text-align: center; |
||||
|
} |
||||
@ -0,0 +1,144 @@ |
|||||
|
.sticky { |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
max-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.toggle-nav-sidebar { |
||||
|
z-index: 20; |
||||
|
left: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex: 0 0 23px; |
||||
|
width: 23px; |
||||
|
border: 0; |
||||
|
border-right: 1px solid var(--hairline-color); |
||||
|
background-color: var(--body-bg); |
||||
|
cursor: pointer; |
||||
|
font-size: 1.25rem; |
||||
|
color: var(--link-fg); |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] .toggle-nav-sidebar { |
||||
|
border-left: 1px solid var(--hairline-color); |
||||
|
border-right: 0; |
||||
|
} |
||||
|
|
||||
|
.toggle-nav-sidebar:hover, |
||||
|
.toggle-nav-sidebar:focus { |
||||
|
background-color: var(--darkened-bg); |
||||
|
} |
||||
|
|
||||
|
#nav-sidebar { |
||||
|
z-index: 15; |
||||
|
flex: 0 0 275px; |
||||
|
left: -276px; |
||||
|
margin-left: -276px; |
||||
|
border-top: 1px solid transparent; |
||||
|
border-right: 1px solid var(--hairline-color); |
||||
|
background-color: var(--body-bg); |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] #nav-sidebar { |
||||
|
border-left: 1px solid var(--hairline-color); |
||||
|
border-right: 0; |
||||
|
left: 0; |
||||
|
margin-left: 0; |
||||
|
right: -276px; |
||||
|
margin-right: -276px; |
||||
|
} |
||||
|
|
||||
|
.toggle-nav-sidebar::before { |
||||
|
content: '\00BB'; |
||||
|
} |
||||
|
|
||||
|
.main.shifted .toggle-nav-sidebar::before { |
||||
|
content: '\00AB'; |
||||
|
} |
||||
|
|
||||
|
.main > #nav-sidebar { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.main.shifted > #nav-sidebar { |
||||
|
margin-left: 0; |
||||
|
visibility: visible; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] .main.shifted > #nav-sidebar { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
#nav-sidebar .module th { |
||||
|
width: 100%; |
||||
|
overflow-wrap: anywhere; |
||||
|
} |
||||
|
|
||||
|
#nav-sidebar .module th, |
||||
|
#nav-sidebar .module caption { |
||||
|
padding-left: 16px; |
||||
|
} |
||||
|
|
||||
|
#nav-sidebar .module td { |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] #nav-sidebar .module th, |
||||
|
[dir="rtl"] #nav-sidebar .module caption { |
||||
|
padding-left: 8px; |
||||
|
padding-right: 16px; |
||||
|
} |
||||
|
|
||||
|
#nav-sidebar .current-app .section:link, |
||||
|
#nav-sidebar .current-app .section:visited { |
||||
|
color: var(--header-color); |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
#nav-sidebar .current-model { |
||||
|
background: var(--selected-row); |
||||
|
} |
||||
|
|
||||
|
.main > #nav-sidebar + .content { |
||||
|
max-width: calc(100% - 23px); |
||||
|
} |
||||
|
|
||||
|
.main.shifted > #nav-sidebar + .content { |
||||
|
max-width: calc(100% - 299px); |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 767px) { |
||||
|
#nav-sidebar, #toggle-nav-sidebar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.main > #nav-sidebar + .content, |
||||
|
.main.shifted > #nav-sidebar + .content { |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
#nav-filter { |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
padding: 2px 5px; |
||||
|
margin: 5px 0; |
||||
|
border: 1px solid var(--border-color); |
||||
|
background-color: var(--darkened-bg); |
||||
|
color: var(--body-fg); |
||||
|
} |
||||
|
|
||||
|
#nav-filter:focus { |
||||
|
border-color: var(--body-quiet-color); |
||||
|
} |
||||
|
|
||||
|
#nav-filter.no-results { |
||||
|
background: var(--message-error-bg); |
||||
|
} |
||||
|
|
||||
|
#nav-sidebar table { |
||||
|
width: 100%; |
||||
|
} |
||||
@ -0,0 +1,998 @@ |
|||||
|
/* Tablets */ |
||||
|
|
||||
|
input[type="submit"], button { |
||||
|
-webkit-appearance: none; |
||||
|
appearance: none; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1024px) { |
||||
|
/* Basic */ |
||||
|
|
||||
|
html { |
||||
|
-webkit-text-size-adjust: 100%; |
||||
|
} |
||||
|
|
||||
|
td, th { |
||||
|
padding: 10px; |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
|
|
||||
|
.small { |
||||
|
font-size: 0.75rem; |
||||
|
} |
||||
|
|
||||
|
/* Layout */ |
||||
|
|
||||
|
#container { |
||||
|
min-width: 0; |
||||
|
} |
||||
|
|
||||
|
#content { |
||||
|
padding: 15px 20px 20px; |
||||
|
} |
||||
|
|
||||
|
div.breadcrumbs { |
||||
|
padding: 10px 30px; |
||||
|
} |
||||
|
|
||||
|
/* Header */ |
||||
|
|
||||
|
#header { |
||||
|
flex-direction: column; |
||||
|
padding: 15px 30px; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
#branding h1 { |
||||
|
margin: 0 0 8px; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
|
||||
|
#user-tools { |
||||
|
margin: 0; |
||||
|
font-weight: 400; |
||||
|
line-height: 1.85; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
#user-tools a { |
||||
|
display: inline-block; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
/* Dashboard */ |
||||
|
|
||||
|
.dashboard #content { |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
#content-related { |
||||
|
margin-right: -290px; |
||||
|
} |
||||
|
|
||||
|
.colSM #content-related { |
||||
|
margin-left: -290px; |
||||
|
} |
||||
|
|
||||
|
.colMS { |
||||
|
margin-right: 290px; |
||||
|
} |
||||
|
|
||||
|
.colSM { |
||||
|
margin-left: 290px; |
||||
|
} |
||||
|
|
||||
|
.dashboard .module table td a { |
||||
|
padding-right: 0; |
||||
|
} |
||||
|
|
||||
|
td .changelink, td .addlink { |
||||
|
font-size: 0.8125rem; |
||||
|
} |
||||
|
|
||||
|
/* Changelist */ |
||||
|
|
||||
|
#toolbar { |
||||
|
border: none; |
||||
|
padding: 15px; |
||||
|
} |
||||
|
|
||||
|
#changelist-search > div { |
||||
|
display: flex; |
||||
|
flex-wrap: nowrap; |
||||
|
max-width: 480px; |
||||
|
} |
||||
|
|
||||
|
#changelist-search label { |
||||
|
line-height: 1.375rem; |
||||
|
} |
||||
|
|
||||
|
#toolbar form #searchbar { |
||||
|
flex: 1 0 auto; |
||||
|
width: 0; |
||||
|
height: 1.375rem; |
||||
|
margin: 0 10px 0 6px; |
||||
|
} |
||||
|
|
||||
|
#toolbar form input[type=submit] { |
||||
|
flex: 0 1 auto; |
||||
|
} |
||||
|
|
||||
|
#changelist-search .quiet { |
||||
|
width: 0; |
||||
|
flex: 1 0 auto; |
||||
|
margin: 5px 0 0 25px; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
padding: 15px 0; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions label { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions select { |
||||
|
background: var(--body-bg); |
||||
|
} |
||||
|
|
||||
|
#changelist .actions .button { |
||||
|
min-width: 48px; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions span.all, |
||||
|
#changelist .actions span.clear, |
||||
|
#changelist .actions span.question, |
||||
|
#changelist .actions span.action-counter { |
||||
|
font-size: 0.6875rem; |
||||
|
margin: 0 10px 0 0; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter { |
||||
|
flex-basis: 200px; |
||||
|
} |
||||
|
|
||||
|
.change-list .filtered .results, |
||||
|
.change-list .filtered .paginator, |
||||
|
.filtered #toolbar, |
||||
|
.filtered .actions, |
||||
|
|
||||
|
#changelist .paginator { |
||||
|
border-top-color: var(--hairline-color); /* XXX Is this used at all? */ |
||||
|
} |
||||
|
|
||||
|
#changelist .results + .paginator { |
||||
|
border-top: none; |
||||
|
} |
||||
|
|
||||
|
/* Forms */ |
||||
|
|
||||
|
label { |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
|
|
||||
|
.form-row input[type=text], |
||||
|
.form-row input[type=password], |
||||
|
.form-row input[type=email], |
||||
|
.form-row input[type=url], |
||||
|
.form-row input[type=tel], |
||||
|
.form-row input[type=number], |
||||
|
.form-row textarea, |
||||
|
.form-row select, |
||||
|
.form-row .vTextField { |
||||
|
box-sizing: border-box; |
||||
|
margin: 0; |
||||
|
padding: 6px 8px; |
||||
|
min-height: 2.25rem; |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
|
|
||||
|
.form-row select { |
||||
|
height: 2.25rem; |
||||
|
} |
||||
|
|
||||
|
.form-row select[multiple] { |
||||
|
height: auto; |
||||
|
min-height: 0; |
||||
|
} |
||||
|
|
||||
|
fieldset .fieldBox + .fieldBox { |
||||
|
margin-top: 10px; |
||||
|
padding-top: 10px; |
||||
|
border-top: 1px solid var(--hairline-color); |
||||
|
} |
||||
|
|
||||
|
textarea { |
||||
|
max-width: 100%; |
||||
|
max-height: 120px; |
||||
|
} |
||||
|
|
||||
|
.aligned label { |
||||
|
padding-top: 6px; |
||||
|
} |
||||
|
|
||||
|
.aligned .related-lookup, |
||||
|
.aligned .datetimeshortcuts, |
||||
|
.aligned .related-lookup + strong { |
||||
|
align-self: center; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
|
||||
|
form .aligned div.radiolist { |
||||
|
margin-left: 2px; |
||||
|
} |
||||
|
|
||||
|
.submit-row { |
||||
|
padding: 8px; |
||||
|
} |
||||
|
|
||||
|
.submit-row a.deletelink { |
||||
|
padding: 10px 7px; |
||||
|
} |
||||
|
|
||||
|
.button, input[type=submit], input[type=button], .submit-row input, a.button { |
||||
|
padding: 7px; |
||||
|
} |
||||
|
|
||||
|
/* Related widget */ |
||||
|
|
||||
|
.related-widget-wrapper { |
||||
|
float: none; |
||||
|
} |
||||
|
|
||||
|
.related-widget-wrapper-link + .selector { |
||||
|
max-width: calc(100% - 30px); |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
|
||||
|
select + .related-widget-wrapper-link, |
||||
|
.related-widget-wrapper-link + .related-widget-wrapper-link { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
/* Selector */ |
||||
|
|
||||
|
.selector { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.selector .selector-filter { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.selector .selector-filter label { |
||||
|
margin: 0 8px 0 0; |
||||
|
} |
||||
|
|
||||
|
.selector .selector-filter input { |
||||
|
width: auto; |
||||
|
min-height: 0; |
||||
|
flex: 1 1; |
||||
|
} |
||||
|
|
||||
|
.selector-available, .selector-chosen { |
||||
|
width: auto; |
||||
|
flex: 1 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.selector select { |
||||
|
width: 100%; |
||||
|
flex: 1 0 auto; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
.selector ul.selector-chooser { |
||||
|
width: 26px; |
||||
|
height: 52px; |
||||
|
padding: 2px 0; |
||||
|
margin: auto 15px; |
||||
|
border-radius: 20px; |
||||
|
transform: translateY(-10px); |
||||
|
} |
||||
|
|
||||
|
.selector-add, .selector-remove { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
background-size: 20px auto; |
||||
|
} |
||||
|
|
||||
|
.selector-add { |
||||
|
background-position: 0 -120px; |
||||
|
} |
||||
|
|
||||
|
.selector-remove { |
||||
|
background-position: 0 -80px; |
||||
|
} |
||||
|
|
||||
|
a.selector-chooseall, a.selector-clearall { |
||||
|
align-self: center; |
||||
|
} |
||||
|
|
||||
|
.stacked { |
||||
|
flex-direction: column; |
||||
|
max-width: 480px; |
||||
|
} |
||||
|
|
||||
|
.stacked > * { |
||||
|
flex: 0 1 auto; |
||||
|
} |
||||
|
|
||||
|
.stacked select { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.stacked .selector-available, .stacked .selector-chosen { |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
.stacked ul.selector-chooser { |
||||
|
width: 52px; |
||||
|
height: 26px; |
||||
|
padding: 0 2px; |
||||
|
margin: 15px auto; |
||||
|
transform: none; |
||||
|
} |
||||
|
|
||||
|
.stacked .selector-chooser li { |
||||
|
padding: 3px; |
||||
|
} |
||||
|
|
||||
|
.stacked .selector-add, .stacked .selector-remove { |
||||
|
background-size: 20px auto; |
||||
|
} |
||||
|
|
||||
|
.stacked .selector-add { |
||||
|
background-position: 0 -40px; |
||||
|
} |
||||
|
|
||||
|
.stacked .active.selector-add { |
||||
|
background-position: 0 -40px; |
||||
|
} |
||||
|
|
||||
|
.active.selector-add:focus, .active.selector-add:hover { |
||||
|
background-position: 0 -140px; |
||||
|
} |
||||
|
|
||||
|
.stacked .active.selector-add:focus, .stacked .active.selector-add:hover { |
||||
|
background-position: 0 -60px; |
||||
|
} |
||||
|
|
||||
|
.stacked .selector-remove { |
||||
|
background-position: 0 0; |
||||
|
} |
||||
|
|
||||
|
.stacked .active.selector-remove { |
||||
|
background-position: 0 0; |
||||
|
} |
||||
|
|
||||
|
.active.selector-remove:focus, .active.selector-remove:hover { |
||||
|
background-position: 0 -100px; |
||||
|
} |
||||
|
|
||||
|
.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover { |
||||
|
background-position: 0 -20px; |
||||
|
} |
||||
|
|
||||
|
.help-tooltip, .selector .help-icon { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.datetime input { |
||||
|
width: 50%; |
||||
|
max-width: 120px; |
||||
|
} |
||||
|
|
||||
|
.datetime span { |
||||
|
font-size: 0.8125rem; |
||||
|
} |
||||
|
|
||||
|
.datetime .timezonewarning { |
||||
|
display: block; |
||||
|
font-size: 0.6875rem; |
||||
|
color: var(--body-quiet-color); |
||||
|
} |
||||
|
|
||||
|
.datetimeshortcuts { |
||||
|
color: var(--border-color); /* XXX Redundant, .datetime span also sets #ccc */ |
||||
|
} |
||||
|
|
||||
|
.form-row .datetime input.vDateField, .form-row .datetime input.vTimeField { |
||||
|
width: 75%; |
||||
|
} |
||||
|
|
||||
|
.inline-group { |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
/* Messages */ |
||||
|
|
||||
|
ul.messagelist li { |
||||
|
padding-left: 55px; |
||||
|
background-position: 30px 12px; |
||||
|
} |
||||
|
|
||||
|
ul.messagelist li.error { |
||||
|
background-position: 30px 12px; |
||||
|
} |
||||
|
|
||||
|
ul.messagelist li.warning { |
||||
|
background-position: 30px 14px; |
||||
|
} |
||||
|
|
||||
|
/* Login */ |
||||
|
|
||||
|
.login #header { |
||||
|
padding: 15px 20px; |
||||
|
} |
||||
|
|
||||
|
.login #branding h1 { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
/* GIS */ |
||||
|
|
||||
|
div.olMap { |
||||
|
max-width: calc(100vw - 30px); |
||||
|
max-height: 300px; |
||||
|
} |
||||
|
|
||||
|
.olMap + .clear_features { |
||||
|
display: block; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
|
||||
|
/* Docs */ |
||||
|
|
||||
|
.module table.xfull { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
pre.literal-block { |
||||
|
overflow: auto; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* Mobile */ |
||||
|
|
||||
|
@media (max-width: 767px) { |
||||
|
/* Layout */ |
||||
|
|
||||
|
#header, #content, #footer { |
||||
|
padding: 15px; |
||||
|
} |
||||
|
|
||||
|
#footer:empty { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
div.breadcrumbs { |
||||
|
padding: 10px 15px; |
||||
|
} |
||||
|
|
||||
|
/* Dashboard */ |
||||
|
|
||||
|
.colMS, .colSM { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
#content-related, .colSM #content-related { |
||||
|
width: 100%; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
#content-related .module { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
#content-related .module h2 { |
||||
|
padding: 10px 15px; |
||||
|
font-size: 1rem; |
||||
|
} |
||||
|
|
||||
|
/* Changelist */ |
||||
|
|
||||
|
#changelist { |
||||
|
align-items: stretch; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
#toolbar { |
||||
|
padding: 10px; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions label { |
||||
|
flex: 1 1; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions select { |
||||
|
flex: 1 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
#changelist .actions span { |
||||
|
flex: 1 0 100%; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter { |
||||
|
position: static; |
||||
|
width: auto; |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
|
||||
|
.object-tools { |
||||
|
float: none; |
||||
|
margin: 0 0 15px; |
||||
|
padding: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.object-tools li { |
||||
|
height: auto; |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
|
||||
|
.object-tools li + li { |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
|
||||
|
/* Forms */ |
||||
|
|
||||
|
.form-row { |
||||
|
padding: 15px 0; |
||||
|
} |
||||
|
|
||||
|
.aligned .form-row, |
||||
|
.aligned .form-row > div { |
||||
|
max-width: 100vw; |
||||
|
} |
||||
|
|
||||
|
.aligned .form-row > div { |
||||
|
width: calc(100vw - 30px); |
||||
|
} |
||||
|
|
||||
|
.flex-container { |
||||
|
flex-flow: column; |
||||
|
} |
||||
|
|
||||
|
textarea { |
||||
|
max-width: none; |
||||
|
} |
||||
|
|
||||
|
.vURLField { |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
fieldset .fieldBox + .fieldBox { |
||||
|
margin-top: 15px; |
||||
|
padding-top: 15px; |
||||
|
} |
||||
|
|
||||
|
fieldset.collapsed .form-row { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.aligned label { |
||||
|
width: 100%; |
||||
|
padding: 0 0 10px; |
||||
|
} |
||||
|
|
||||
|
.aligned label:after { |
||||
|
max-height: 0; |
||||
|
} |
||||
|
|
||||
|
.aligned .form-row input, |
||||
|
.aligned .form-row select, |
||||
|
.aligned .form-row textarea { |
||||
|
flex: 1 1 auto; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
|
||||
|
.aligned .checkbox-row { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.aligned .checkbox-row input { |
||||
|
flex: 0 1 auto; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
.aligned .vCheckboxLabel { |
||||
|
flex: 1 0; |
||||
|
padding: 1px 0 0 5px; |
||||
|
} |
||||
|
|
||||
|
.aligned label + p, |
||||
|
.aligned label + div.help, |
||||
|
.aligned label + div.readonly { |
||||
|
padding: 0; |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
|
||||
|
.aligned p.file-upload { |
||||
|
font-size: 0.8125rem; |
||||
|
} |
||||
|
|
||||
|
span.clearable-file-input { |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
|
||||
|
span.clearable-file-input label { |
||||
|
font-size: 0.8125rem; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.aligned .timezonewarning { |
||||
|
flex: 1 0 100%; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
|
||||
|
form .aligned .form-row div.help { |
||||
|
width: 100%; |
||||
|
margin: 5px 0 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
form .aligned ul, |
||||
|
form .aligned ul.errorlist { |
||||
|
margin-left: 0; |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
|
||||
|
form .aligned div.radiolist { |
||||
|
margin-top: 5px; |
||||
|
margin-right: 15px; |
||||
|
margin-bottom: -3px; |
||||
|
} |
||||
|
|
||||
|
form .aligned div.radiolist:not(.inline) div + div { |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
|
||||
|
/* Related widget */ |
||||
|
|
||||
|
.related-widget-wrapper { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
|
||||
|
.related-widget-wrapper .selector { |
||||
|
order: 1; |
||||
|
} |
||||
|
|
||||
|
.related-widget-wrapper > a { |
||||
|
order: 2; |
||||
|
} |
||||
|
|
||||
|
.related-widget-wrapper .radiolist ~ a { |
||||
|
align-self: flex-end; |
||||
|
} |
||||
|
|
||||
|
.related-widget-wrapper > select ~ a { |
||||
|
align-self: center; |
||||
|
} |
||||
|
|
||||
|
select + .related-widget-wrapper-link, |
||||
|
.related-widget-wrapper-link + .related-widget-wrapper-link { |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
|
||||
|
/* Selector */ |
||||
|
|
||||
|
.selector { |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.selector > * { |
||||
|
float: none; |
||||
|
} |
||||
|
|
||||
|
.selector-available, .selector-chosen { |
||||
|
margin-bottom: 0; |
||||
|
flex: 1 1 auto; |
||||
|
} |
||||
|
|
||||
|
.selector select { |
||||
|
max-height: 96px; |
||||
|
} |
||||
|
|
||||
|
.selector ul.selector-chooser { |
||||
|
display: block; |
||||
|
float: none; |
||||
|
width: 52px; |
||||
|
height: 26px; |
||||
|
padding: 0 2px; |
||||
|
margin: 15px auto 20px; |
||||
|
transform: none; |
||||
|
} |
||||
|
|
||||
|
.selector ul.selector-chooser li { |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
.selector-remove { |
||||
|
background-position: 0 0; |
||||
|
} |
||||
|
|
||||
|
.active.selector-remove:focus, .active.selector-remove:hover { |
||||
|
background-position: 0 -20px; |
||||
|
} |
||||
|
|
||||
|
.selector-add { |
||||
|
background-position: 0 -40px; |
||||
|
} |
||||
|
|
||||
|
.active.selector-add:focus, .active.selector-add:hover { |
||||
|
background-position: 0 -60px; |
||||
|
} |
||||
|
|
||||
|
/* Inlines */ |
||||
|
|
||||
|
.inline-group[data-inline-type="stacked"] .inline-related { |
||||
|
border: 1px solid var(--hairline-color); |
||||
|
border-radius: 4px; |
||||
|
margin-top: 15px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.inline-group[data-inline-type="stacked"] .inline-related > * { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.inline-group[data-inline-type="stacked"] .inline-related .module { |
||||
|
padding: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.inline-group[data-inline-type="stacked"] .inline-related .module .form-row { |
||||
|
border-top: 1px solid var(--hairline-color); |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.inline-group[data-inline-type="stacked"] .inline-related .module .form-row:first-child { |
||||
|
border-top: none; |
||||
|
} |
||||
|
|
||||
|
.inline-group[data-inline-type="stacked"] .inline-related h3 { |
||||
|
padding: 10px; |
||||
|
border-top-width: 0; |
||||
|
border-bottom-width: 2px; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.inline-group[data-inline-type="stacked"] .inline-related h3 .inline_label { |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
|
||||
|
.inline-group[data-inline-type="stacked"] .inline-related h3 span.delete { |
||||
|
float: none; |
||||
|
flex: 1 1 100%; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
|
||||
|
.inline-group[data-inline-type="stacked"] .aligned .form-row > div:not([class]) { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.inline-group[data-inline-type="stacked"] .aligned label { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.inline-group[data-inline-type="stacked"] div.add-row { |
||||
|
margin-top: 15px; |
||||
|
border: 1px solid var(--hairline-color); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.inline-group div.add-row, |
||||
|
.inline-group .tabular tr.add-row td { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.inline-group div.add-row a, |
||||
|
.inline-group .tabular tr.add-row td a { |
||||
|
display: block; |
||||
|
padding: 8px 10px 8px 26px; |
||||
|
background-position: 8px 9px; |
||||
|
} |
||||
|
|
||||
|
/* Submit row */ |
||||
|
|
||||
|
.submit-row { |
||||
|
padding: 10px; |
||||
|
margin: 0 0 15px; |
||||
|
flex-direction: column; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.submit-row input, .submit-row input.default, .submit-row a { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.submit-row a.closelink { |
||||
|
padding: 10px 0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.submit-row a.deletelink { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
/* Messages */ |
||||
|
|
||||
|
ul.messagelist li { |
||||
|
padding-left: 40px; |
||||
|
background-position: 15px 12px; |
||||
|
} |
||||
|
|
||||
|
ul.messagelist li.error { |
||||
|
background-position: 15px 12px; |
||||
|
} |
||||
|
|
||||
|
ul.messagelist li.warning { |
||||
|
background-position: 15px 14px; |
||||
|
} |
||||
|
|
||||
|
/* Paginator */ |
||||
|
|
||||
|
.paginator .this-page, .paginator a:link, .paginator a:visited { |
||||
|
padding: 4px 10px; |
||||
|
} |
||||
|
|
||||
|
/* Login */ |
||||
|
|
||||
|
body.login { |
||||
|
padding: 0 15px; |
||||
|
} |
||||
|
|
||||
|
.login #container { |
||||
|
width: auto; |
||||
|
max-width: 480px; |
||||
|
margin: 50px auto; |
||||
|
} |
||||
|
|
||||
|
.login #header, |
||||
|
.login #content { |
||||
|
padding: 15px; |
||||
|
} |
||||
|
|
||||
|
.login #content-main { |
||||
|
float: none; |
||||
|
} |
||||
|
|
||||
|
.login .form-row { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.login .form-row + .form-row { |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
|
||||
|
.login .form-row label { |
||||
|
margin: 0 0 5px; |
||||
|
line-height: 1.2; |
||||
|
} |
||||
|
|
||||
|
.login .submit-row { |
||||
|
padding: 15px 0 0; |
||||
|
} |
||||
|
|
||||
|
.login br { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.login .submit-row input { |
||||
|
margin: 0; |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
|
||||
|
.errornote { |
||||
|
margin: 0 0 20px; |
||||
|
padding: 8px 12px; |
||||
|
font-size: 0.8125rem; |
||||
|
} |
||||
|
|
||||
|
/* Calendar and clock */ |
||||
|
|
||||
|
.calendarbox, .clockbox { |
||||
|
position: fixed !important; |
||||
|
top: 50% !important; |
||||
|
left: 50% !important; |
||||
|
transform: translate(-50%, -50%); |
||||
|
margin: 0; |
||||
|
border: none; |
||||
|
overflow: visible; |
||||
|
} |
||||
|
|
||||
|
.calendarbox:before, .clockbox:before { |
||||
|
content: ''; |
||||
|
position: fixed; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background: rgba(0, 0, 0, 0.75); |
||||
|
transform: translate(-50%, -50%); |
||||
|
} |
||||
|
|
||||
|
.calendarbox > *, .clockbox > * { |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.calendarbox > div:first-child { |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.calendarbox .calendar, .clockbox h2 { |
||||
|
border-radius: 4px 4px 0 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.calendarbox .calendar-cancel, .clockbox .calendar-cancel { |
||||
|
border-radius: 0 0 4px 4px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.calendar-shortcuts { |
||||
|
padding: 10px 0; |
||||
|
font-size: 0.75rem; |
||||
|
line-height: 0.75rem; |
||||
|
} |
||||
|
|
||||
|
.calendar-shortcuts a { |
||||
|
margin: 0 4px; |
||||
|
} |
||||
|
|
||||
|
.timelist a { |
||||
|
background: var(--body-bg); |
||||
|
padding: 4px; |
||||
|
} |
||||
|
|
||||
|
.calendar-cancel { |
||||
|
padding: 8px 10px; |
||||
|
} |
||||
|
|
||||
|
.clockbox h2 { |
||||
|
padding: 8px 15px; |
||||
|
} |
||||
|
|
||||
|
.calendar caption { |
||||
|
padding: 10px; |
||||
|
} |
||||
|
|
||||
|
.calendarbox .calendarnav-previous, .calendarbox .calendarnav-next { |
||||
|
z-index: 1; |
||||
|
top: 10px; |
||||
|
} |
||||
|
|
||||
|
/* History */ |
||||
|
|
||||
|
table#change-history tbody th, table#change-history tbody td { |
||||
|
font-size: 0.8125rem; |
||||
|
word-break: break-word; |
||||
|
} |
||||
|
|
||||
|
table#change-history tbody th { |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
/* Docs */ |
||||
|
|
||||
|
table.model tbody th, table.model tbody td { |
||||
|
font-size: 0.8125rem; |
||||
|
word-break: break-word; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,81 @@ |
|||||
|
/* TABLETS */ |
||||
|
|
||||
|
@media (max-width: 1024px) { |
||||
|
[dir="rtl"] .colMS { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] #user-tools { |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] #changelist .actions label { |
||||
|
padding-left: 10px; |
||||
|
padding-right: 0; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] #changelist .actions select { |
||||
|
margin-left: 0; |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] .change-list .filtered .results, |
||||
|
[dir="rtl"] .change-list .filtered .paginator, |
||||
|
[dir="rtl"] .filtered #toolbar, |
||||
|
[dir="rtl"] .filtered div.xfull, |
||||
|
[dir="rtl"] .filtered .actions, |
||||
|
[dir="rtl"] #changelist-filter { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] .inline-group ul.tools a.add, |
||||
|
[dir="rtl"] .inline-group div.add-row a, |
||||
|
[dir="rtl"] .inline-group .tabular tr.add-row td a { |
||||
|
padding: 8px 26px 8px 10px; |
||||
|
background-position: calc(100% - 8px) 9px; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] .related-widget-wrapper-link + .selector { |
||||
|
margin-right: 0; |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] .selector .selector-filter label { |
||||
|
margin-right: 0; |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] .object-tools li { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] .object-tools li + li { |
||||
|
margin-left: 0; |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] .dashboard .module table td a { |
||||
|
padding-left: 0; |
||||
|
padding-right: 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* MOBILE */ |
||||
|
|
||||
|
@media (max-width: 767px) { |
||||
|
[dir="rtl"] .aligned .related-lookup, |
||||
|
[dir="rtl"] .aligned .datetimeshortcuts { |
||||
|
margin-left: 0; |
||||
|
margin-right: 15px; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] .aligned ul, |
||||
|
[dir="rtl"] form .aligned ul.errorlist { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
[dir="rtl"] #changelist-filter { |
||||
|
margin-left: 0; |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,288 @@ |
|||||
|
/* GLOBAL */ |
||||
|
|
||||
|
th { |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.module h2, .module caption { |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.module ul, .module ol { |
||||
|
margin-left: 0; |
||||
|
margin-right: 1.5em; |
||||
|
} |
||||
|
|
||||
|
.viewlink, .addlink, .changelink { |
||||
|
padding-left: 0; |
||||
|
padding-right: 16px; |
||||
|
background-position: 100% 1px; |
||||
|
} |
||||
|
|
||||
|
.deletelink { |
||||
|
padding-left: 0; |
||||
|
padding-right: 16px; |
||||
|
background-position: 100% 1px; |
||||
|
} |
||||
|
|
||||
|
.object-tools { |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
thead th:first-child, |
||||
|
tfoot td:first-child { |
||||
|
border-left: none; |
||||
|
} |
||||
|
|
||||
|
/* LAYOUT */ |
||||
|
|
||||
|
#user-tools { |
||||
|
right: auto; |
||||
|
left: 0; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
div.breadcrumbs { |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
#content-main { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
#content-related { |
||||
|
float: left; |
||||
|
margin-left: -300px; |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
|
||||
|
.colMS { |
||||
|
margin-left: 300px; |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
/* SORTABLE TABLES */ |
||||
|
|
||||
|
table thead th.sorted .sortoptions { |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
thead th.sorted .text { |
||||
|
padding-right: 0; |
||||
|
padding-left: 42px; |
||||
|
} |
||||
|
|
||||
|
/* dashboard styles */ |
||||
|
|
||||
|
.dashboard .module table td a { |
||||
|
padding-left: .6em; |
||||
|
padding-right: 16px; |
||||
|
} |
||||
|
|
||||
|
/* changelists styles */ |
||||
|
|
||||
|
.change-list .filtered table { |
||||
|
border-left: none; |
||||
|
border-right: 0px none; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter { |
||||
|
border-left: none; |
||||
|
border-right: none; |
||||
|
margin-left: 0; |
||||
|
margin-right: 30px; |
||||
|
} |
||||
|
|
||||
|
#changelist-filter li.selected { |
||||
|
border-left: none; |
||||
|
padding-left: 10px; |
||||
|
margin-left: 0; |
||||
|
border-right: 5px solid var(--hairline-color); |
||||
|
padding-right: 10px; |
||||
|
margin-right: -15px; |
||||
|
} |
||||
|
|
||||
|
#changelist table tbody td:first-child, #changelist table tbody th:first-child { |
||||
|
border-right: none; |
||||
|
border-left: none; |
||||
|
} |
||||
|
|
||||
|
/* FORMS */ |
||||
|
|
||||
|
.aligned label { |
||||
|
padding: 0 0 3px 1em; |
||||
|
} |
||||
|
|
||||
|
.submit-row a.deletelink { |
||||
|
margin-left: 0; |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
|
||||
|
.vDateField, .vTimeField { |
||||
|
margin-left: 2px; |
||||
|
} |
||||
|
|
||||
|
.aligned .form-row input { |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
|
||||
|
form .aligned ul { |
||||
|
margin-right: 163px; |
||||
|
padding-right: 10px; |
||||
|
margin-left: 0; |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
|
||||
|
form ul.inline li { |
||||
|
float: right; |
||||
|
padding-right: 0; |
||||
|
padding-left: 7px; |
||||
|
} |
||||
|
|
||||
|
form .aligned p.help, |
||||
|
form .aligned div.help { |
||||
|
margin-right: 160px; |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
|
||||
|
form div.help ul, |
||||
|
form .aligned .checkbox-row + .help, |
||||
|
form .aligned p.date div.help.timezonewarning, |
||||
|
form .aligned p.datetime div.help.timezonewarning, |
||||
|
form .aligned p.time div.help.timezonewarning { |
||||
|
margin-right: 0; |
||||
|
padding-right: 0; |
||||
|
} |
||||
|
|
||||
|
form .wide p.help, form .wide div.help { |
||||
|
padding-left: 0; |
||||
|
padding-right: 50px; |
||||
|
} |
||||
|
|
||||
|
form .wide p, |
||||
|
form .wide ul.errorlist, |
||||
|
form .wide input + p.help, |
||||
|
form .wide input + div.help { |
||||
|
margin-right: 200px; |
||||
|
margin-left: 0px; |
||||
|
} |
||||
|
|
||||
|
.submit-row { |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
fieldset .fieldBox { |
||||
|
margin-left: 20px; |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
.errorlist li { |
||||
|
background-position: 100% 12px; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.errornote { |
||||
|
background-position: 100% 12px; |
||||
|
padding: 10px 12px; |
||||
|
} |
||||
|
|
||||
|
/* WIDGETS */ |
||||
|
|
||||
|
.calendarnav-previous { |
||||
|
top: 0; |
||||
|
left: auto; |
||||
|
right: 10px; |
||||
|
background: url(../img/calendar-icons.svg) 0 -30px no-repeat; |
||||
|
} |
||||
|
|
||||
|
.calendarbox .calendarnav-previous:focus, |
||||
|
.calendarbox .calendarnav-previous:hover { |
||||
|
background-position: 0 -45px; |
||||
|
} |
||||
|
|
||||
|
.calendarnav-next { |
||||
|
top: 0; |
||||
|
right: auto; |
||||
|
left: 10px; |
||||
|
background: url(../img/calendar-icons.svg) 0 0 no-repeat; |
||||
|
} |
||||
|
|
||||
|
.calendarbox .calendarnav-next:focus, |
||||
|
.calendarbox .calendarnav-next:hover { |
||||
|
background-position: 0 -15px; |
||||
|
} |
||||
|
|
||||
|
.calendar caption, .calendarbox h2 { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.selector { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
.selector .selector-filter { |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.selector-add { |
||||
|
background: url(../img/selector-icons.svg) 0 -64px no-repeat; |
||||
|
} |
||||
|
|
||||
|
.active.selector-add:focus, .active.selector-add:hover { |
||||
|
background-position: 0 -80px; |
||||
|
} |
||||
|
|
||||
|
.selector-remove { |
||||
|
background: url(../img/selector-icons.svg) 0 -96px no-repeat; |
||||
|
} |
||||
|
|
||||
|
.active.selector-remove:focus, .active.selector-remove:hover { |
||||
|
background-position: 0 -112px; |
||||
|
} |
||||
|
|
||||
|
a.selector-chooseall { |
||||
|
background: url(../img/selector-icons.svg) right -128px no-repeat; |
||||
|
} |
||||
|
|
||||
|
a.active.selector-chooseall:focus, a.active.selector-chooseall:hover { |
||||
|
background-position: 100% -144px; |
||||
|
} |
||||
|
|
||||
|
a.selector-clearall { |
||||
|
background: url(../img/selector-icons.svg) 0 -160px no-repeat; |
||||
|
} |
||||
|
|
||||
|
a.active.selector-clearall:focus, a.active.selector-clearall:hover { |
||||
|
background-position: 0 -176px; |
||||
|
} |
||||
|
|
||||
|
.inline-deletelink { |
||||
|
float: left; |
||||
|
} |
||||
|
|
||||
|
form .form-row p.datetime { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.related-widget-wrapper { |
||||
|
float: right; |
||||
|
} |
||||
|
|
||||
|
/* MISC */ |
||||
|
|
||||
|
.inline-related h2, .inline-group h2 { |
||||
|
text-align: right |
||||
|
} |
||||
|
|
||||
|
.inline-related h3 span.delete { |
||||
|
padding-right: 20px; |
||||
|
padding-left: inherit; |
||||
|
left: 10px; |
||||
|
right: inherit; |
||||
|
float:left; |
||||
|
} |
||||
|
|
||||
|
.inline-related h3 span.delete label { |
||||
|
margin-left: inherit; |
||||
|
margin-right: 2px; |
||||
|
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue