Layout hinzugefügt, bisher eine Seite ohne funktion
This commit is contained in:
jankaminski1
parent
fc4c96745e
commit
31c3e33b11
|
|
@ -1,4 +1,3 @@
|
|||
@page "/"
|
||||
@page "/aiart"
|
||||
|
||||
@using OpenAI_API
|
||||
|
|
|
|||
|
|
@ -0,0 +1,422 @@
|
|||
|
||||
@page "/"
|
||||
|
||||
|
||||
|
||||
<div class="hero_area">
|
||||
<!-- header section strats -->
|
||||
<header class="header_section">
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-lg custom_nav-container ">
|
||||
<a class="navbar-brand" href="index.html">
|
||||
<img src="images/logo.png" alt="">
|
||||
<span>
|
||||
Electrochip
|
||||
</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="s-1"> </span>
|
||||
<span class="s-2"> </span>
|
||||
<span class="s-3"> </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="service.html"> Service </a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="blog.html"> Blog </a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="contact.html">Contact </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<!-- end header section -->
|
||||
<!-- slider section -->
|
||||
<section class=" slider_section ">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ">
|
||||
<div class="detail_box">
|
||||
<h1>
|
||||
Electrical <br>
|
||||
Service <br>
|
||||
Providers
|
||||
</h1>
|
||||
<p>
|
||||
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem
|
||||
</p>
|
||||
<a href="" class="">
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-6 offset-lg-1">
|
||||
<div class="img_content">
|
||||
<div class="img_container">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<div class="img-box">
|
||||
<img src="images/slider-img.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end slider section -->
|
||||
</div>
|
||||
|
||||
|
||||
<!-- service section -->
|
||||
<section class="service_section layout_padding">
|
||||
<div class="container">
|
||||
<div class="heading_container">
|
||||
<h2>
|
||||
Our Services
|
||||
</h2>
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="service_container">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="images/s1.png" class="img1" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>
|
||||
Equipment installation
|
||||
</h5>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box active">
|
||||
<div class="img-box">
|
||||
<img src="images/s2.png" class="img1" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>
|
||||
Windmill Energy
|
||||
</h5>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="images/s3.png" class="img1" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>
|
||||
Equipment Maintenance
|
||||
</h5>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box ">
|
||||
<div class="img-box">
|
||||
<img src="images/s4.png" class="img1" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>
|
||||
Offshore Engineering
|
||||
</h5>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="images/s5.png" class="img1" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>
|
||||
Electrical Wiring
|
||||
</h5>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum available,
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<a href="">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end service section -->
|
||||
|
||||
<!-- about section -->
|
||||
<section class="about_section layout_padding">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="detail-box">
|
||||
<div class="heading_container">
|
||||
<h2>
|
||||
About Us
|
||||
</h2>
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<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 commodo consequat. Duis aute irure dolor
|
||||
in reprehenderit in voluptate velit
|
||||
</p>
|
||||
<a href="">
|
||||
Read More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="img_container">
|
||||
<div class="img-box b1">
|
||||
<img src="images/about-img1.jpg" alt="" />
|
||||
</div>
|
||||
<div class="img-box b2">
|
||||
<img src="images/about-img2.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- end about section -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- blog section -->
|
||||
|
||||
<section class="blog_section layout_padding">
|
||||
<div class="container">
|
||||
<div class="heading_container">
|
||||
<h2>
|
||||
Blog
|
||||
</h2>
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="images/blog1.jpg" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>
|
||||
Blog Title Goes Here
|
||||
</h5>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="box">
|
||||
<div class="img-box">
|
||||
<img src="images/blog2.jpg" alt="">
|
||||
</div>
|
||||
<div class="detail-box">
|
||||
<h5>
|
||||
Blog Title Goes Here
|
||||
</h5>
|
||||
<p>
|
||||
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- end blog section -->
|
||||
|
||||
|
||||
|
||||
<!-- contact section -->
|
||||
|
||||
<section class="contact_section layout_padding">
|
||||
<div class="container ">
|
||||
<div class="heading_container">
|
||||
<h2>
|
||||
Contact Us
|
||||
</h2>
|
||||
<img src="images/plug.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<form action="">
|
||||
<div>
|
||||
<input type="text" placeholder="Name" />
|
||||
</div>
|
||||
<div>
|
||||
<input type="email" placeholder="Email" />
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" placeholder="Phone Number" />
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" class="message-box" placeholder="Message" />
|
||||
</div>
|
||||
<div class="d-flex ">
|
||||
<button>
|
||||
SEND
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="map_container">
|
||||
<div class="map-responsive">
|
||||
<iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA0s1a7phLN0iaD6-UE7m4qP-z21pH0eSc&q=Eiffel+Tower+Paris+France" width="600" height="300" frameborder="0" style="border:0; width: 100%; height:100%" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- end contact section -->
|
||||
|
||||
|
||||
<!-- info section -->
|
||||
|
||||
<section class="info_section layout_padding">
|
||||
<div class="container">
|
||||
<div class="info_contact">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<a href="">
|
||||
<img src="images/location-white.png" alt="">
|
||||
<span>
|
||||
Passages of Lorem Ipsum available
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<a href="">
|
||||
<img src="images/telephone-white.png" alt="">
|
||||
<span>
|
||||
Call : +012334567890
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<a href="">
|
||||
<img src="images/envelope-white.png" alt="">
|
||||
<span>
|
||||
demo@gmail.com
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-lg-9">
|
||||
<div class="info_form">
|
||||
<form action="">
|
||||
<input type="text" placeholder="Enter your email">
|
||||
<button>
|
||||
subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-lg-3">
|
||||
<div class="info_social">
|
||||
<div>
|
||||
<a href="">
|
||||
<img src="images/fb.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="">
|
||||
<img src="images/twitter.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="">
|
||||
<img src="images/linkedin.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="">
|
||||
<img src="images/instagram.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- end info section -->
|
||||
|
||||
<!-- footer section -->
|
||||
<footer class="container-fluid footer_section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-7 col-md-9 mx-auto">
|
||||
<p>
|
||||
© 2019 All Rights Reserved By
|
||||
<a href="https://html.design/">Free Html Templates</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- footer section -->
|
||||
|
||||
|
|
@ -18,6 +18,31 @@
|
|||
<!-- Radzen.Blazor -->
|
||||
<link rel="stylesheet" href="_content/Radzen.Blazor/css/humanistic-base.css">
|
||||
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
|
||||
|
||||
<!-- Basic -->
|
||||
<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>KI Kunst Kirsten </title>
|
||||
|
||||
<!-- slider stylesheet -->
|
||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/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=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>
|
||||
<component type="typeof(App)" render-mode="ServerPrerendered" />
|
||||
|
|
@ -34,5 +59,10 @@
|
|||
</div>
|
||||
|
||||
<script src="_framework/blazor.server.js"></script>
|
||||
|
||||
@*
|
||||
<script src="js/jquery-3.4.1.min.js"></script>
|
||||
<script src="js/bootstrap.js"></script>*@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,118 @@
|
|||
@media (max-width: 1120px) {}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
||||
.hero_area {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.header_section {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#navbarSupportedContent {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.slider_section {
|
||||
|
||||
padding-top: 75px;
|
||||
padding-bottom: 150px;
|
||||
|
||||
}
|
||||
|
||||
.about_section .img-box {
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
.about_section .detail-box {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.service_section .service_container .box {
|
||||
-ms-flex-preferred-size: 48%;
|
||||
flex-basis: 48%;
|
||||
}
|
||||
|
||||
.about_section .img_container .img-box.b2 {
|
||||
margin-top: -5%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
|
||||
.slider_section .detail_box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slider_section .img_content {
|
||||
margin-top: 55px;
|
||||
}
|
||||
|
||||
.contact_section .map_container {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.info_section .info_contact a {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.info_section .info_social {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.service_section .service_container .box {
|
||||
flex-basis: 98%;
|
||||
}
|
||||
|
||||
.contact_section form {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.info_section .info_contact a {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.about_section .img_container .img-box.b1 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.about_section .img_container .img-box.b2 {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.info_section .info_form form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info_section .info_form form input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info_section .info_form form button {
|
||||
margin-top: 15px;
|
||||
padding: 10px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
|
||||
.slider_section .carousel-control-prev,
|
||||
.slider_section .carousel-control-next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1170px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,692 @@
|
|||
body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
color: #0c0c0c;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.layout_padding {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.layout_padding2 {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
|
||||
.layout_padding2-top {
|
||||
padding-top: 45px;
|
||||
}
|
||||
|
||||
.layout_padding2-bottom {
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
|
||||
.layout_padding-top {
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
.layout_padding-bottom {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.heading_container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heading_container h2 {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.heading_container img {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
/*header section*/
|
||||
.hero_area {
|
||||
height: 98vh;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
background-color: #eae6f5;
|
||||
}
|
||||
|
||||
.sub_page .hero_area {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.header_section .container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header_section .nav_container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-nav .nav-item .nav-link {
|
||||
padding: 7px 20px;
|
||||
margin: 10px 15px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
border-radius: 35px;
|
||||
text-transform: uppercase;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-nav .nav-item.active .nav-link, .custom_nav-container .navbar-nav .nav-item:hover .nav-link {
|
||||
background-color: #4b208c;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
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 {
|
||||
margin-right: 5px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.navbar-brand span {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #4b208c;
|
||||
}
|
||||
|
||||
.custom_nav-container {
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-collapse {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler {
|
||||
padding: 0;
|
||||
width: 37px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler span {
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 4px;
|
||||
background-color: #190734;
|
||||
margin: 7px 0;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-1 {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
margin: 0;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-3 {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
margin: 0;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-1,
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-2,
|
||||
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-3 {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/*end header section*/
|
||||
/* slider section */
|
||||
.slider_section {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: #3b3a3a;
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.slider_section .row {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slider_section .detail_box {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.slider_section .detail_box h1 {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.slider_section .detail_box p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.slider_section .detail_box a {
|
||||
display: inline-block;
|
||||
padding: 10px 40px;
|
||||
background-color: #4b208c;
|
||||
color: #ffffff;
|
||||
border-radius: 35px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.slider_section .detail_box a:hover {
|
||||
background-color: #5625a1;
|
||||
}
|
||||
|
||||
.slider_section .img_container {
|
||||
border: 7px solid #7b57b2;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider_section .img_container div#carouselExampleContarols {
|
||||
width: 100%;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.slider_section .img_container .img-box img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slider_section .carousel-control-prev,
|
||||
.slider_section .carousel-control-next {
|
||||
top: initial;
|
||||
left: initial;
|
||||
bottom: 5%;
|
||||
right: 10%;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
opacity: 1;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 8px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.slider_section .carousel-control-prev {
|
||||
background-image: url(../images/prev.png);
|
||||
background-color: #ffffff;
|
||||
-webkit-transform: translate(-85px, 30px);
|
||||
transform: translate(-85px, 30px);
|
||||
}
|
||||
|
||||
.slider_section .carousel-control-next {
|
||||
background-image: url(../images/next.png);
|
||||
background-color: #4b208c;
|
||||
-webkit-transform: translate(-45px, 0);
|
||||
transform: translate(-45px, 0);
|
||||
}
|
||||
|
||||
.service_section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.service_section .heading_container {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.service_section .service_container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
padding: 35px 0;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.service_section .service_container .box {
|
||||
margin: 25px 1%;
|
||||
-ms-flex-preferred-size: 31%;
|
||||
flex-basis: 31%;
|
||||
padding: 35px 25px 25px;
|
||||
border-radius: 15px;
|
||||
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
|
||||
border-top: 15px solid transparent;
|
||||
overflow: hidden;
|
||||
-webkit-transition: all .1s;
|
||||
transition: all .1s;
|
||||
}
|
||||
|
||||
.service_section .service_container .box .img-box {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
.service_section .service_container .box .img-box img {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.service_section .service_container .box .detail-box {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.service_section .service_container .box .detail-box h5 {
|
||||
color: #2e0e5f;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service_section .service_container .box:hover, .service_section .service_container .box.active {
|
||||
border-top: 15px solid #512a97;
|
||||
}
|
||||
|
||||
.service_section .btn-box {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.service_section .btn-box a {
|
||||
display: inline-block;
|
||||
padding: 10px 35px;
|
||||
background-color: #4b208c;
|
||||
color: #ffffff;
|
||||
border-radius: 35px;
|
||||
}
|
||||
|
||||
.service_section .btn-box a:hover {
|
||||
background-color: #5625a1;
|
||||
}
|
||||
|
||||
.about_section {
|
||||
background-color: #f3f0f6;
|
||||
}
|
||||
|
||||
.about_section .row {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about_section .img_container {
|
||||
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 .img_container .img-box {
|
||||
border: 5px solid #7b57b2;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about_section .img_container .img-box.b1 {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.about_section .img_container .img-box.b2 {
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
margin-top: -12%;
|
||||
}
|
||||
|
||||
.about_section .img_container .img-box img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.about_section .detail-box {
|
||||
margin-right: 15%;
|
||||
}
|
||||
|
||||
.about_section .detail-box p {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.about_section .detail-box a {
|
||||
display: inline-block;
|
||||
padding: 10px 35px;
|
||||
background-color: #4b208c;
|
||||
color: #ffffff;
|
||||
border-radius: 5px;
|
||||
margin: 25px 0 45px 0;
|
||||
}
|
||||
|
||||
.about_section .detail-box a:hover {
|
||||
background-color: #5625a1;
|
||||
}
|
||||
|
||||
.blog_section .heading_container {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.blog_section .heading_container h2::before {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.blog_section .box {
|
||||
margin-top: 55px;
|
||||
background-color: #ffffff;
|
||||
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.blog_section .box .img-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blog_section .box .img-box img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blog_section .box .detail-box {
|
||||
padding: 25px 25px 15px;
|
||||
}
|
||||
|
||||
.blog_section .box .detail-box h5 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.contact_section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contact_section form {
|
||||
margin-top: 45px;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
.contact_section input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
height: 50px;
|
||||
margin-bottom: 25px;
|
||||
padding-left: 25px;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
color: #101010;
|
||||
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.contact_section input::-webkit-input-placeholder {
|
||||
color: #737272;
|
||||
}
|
||||
|
||||
.contact_section input:-ms-input-placeholder {
|
||||
color: #737272;
|
||||
}
|
||||
|
||||
.contact_section input::-ms-input-placeholder {
|
||||
color: #737272;
|
||||
}
|
||||
|
||||
.contact_section input::placeholder {
|
||||
color: #737272;
|
||||
}
|
||||
|
||||
.contact_section input.message-box {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.contact_section button {
|
||||
border: none;
|
||||
display: inline-block;
|
||||
padding: 12px 45px;
|
||||
background-color: #4b208c;
|
||||
color: #ffffff;
|
||||
border-radius: 0px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.contact_section button:hover {
|
||||
background-color: #5625a1;
|
||||
}
|
||||
|
||||
.contact_section .map_container {
|
||||
height: 100%;
|
||||
min-height: 325px;
|
||||
}
|
||||
|
||||
.contact_section .map_container .map-responsive {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer_bg {
|
||||
background-image: url(../images/footer-bg.png);
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
/* info section */
|
||||
.info_section {
|
||||
background-color: #190734;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.info_section h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info_section .info_contact {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.info_section .info_contact .col-md-4 {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info_section .info_contact a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.info_section .info_contact img {
|
||||
max-width: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.info_section .info_form {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.info_section .info_form h4 {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info_section .info_form form {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info_section .info_form form input {
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
-webkit-box-flex: 2.5;
|
||||
-ms-flex: 2.5;
|
||||
flex: 2.5;
|
||||
outline: none;
|
||||
color: #000000;
|
||||
min-height: 42.4px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.info_section .info_form form input ::-webkit-input-placeholder {
|
||||
color: #ffffff;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.info_section .info_form form input :-ms-input-placeholder {
|
||||
color: #ffffff;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.info_section .info_form form input ::-ms-input-placeholder {
|
||||
color: #ffffff;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.info_section .info_form form input ::placeholder {
|
||||
color: #ffffff;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.info_section .info_form form button {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
padding: 10px 30px;
|
||||
background-color: #4b208c;
|
||||
color: #ffffff;
|
||||
border-radius: 0;
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.info_section .info_form form button:hover {
|
||||
background-color: #5625a1;
|
||||
}
|
||||
|
||||
.info_section .box {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.info_section .info_social {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.info_section .info_social img {
|
||||
width: 35px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* end info section */
|
||||
/* footer section*/
|
||||
.footer_section {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer_section p {
|
||||
color: #222222;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.footer_section p a {
|
||||
color: #222222;
|
||||
}
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,642 @@
|
|||
$white: #ffffff;
|
||||
$black: #000000;
|
||||
$primary1: #4b208c;
|
||||
$primary2: #371e71;
|
||||
|
||||
@mixin main-font {
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
@mixin hero_btn($col1, $col2, $pad1, $pad2, $bRadius) {
|
||||
display: inline-block;
|
||||
padding: $pad1 $pad2;
|
||||
background-color: $col1;
|
||||
color: $col2;
|
||||
border-radius: $bRadius;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color: $col1, $amount: 5);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin upperBold {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
body {
|
||||
@include main-font;
|
||||
color: #0c0c0c;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.layout_padding {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.layout_padding2 {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
|
||||
.layout_padding2-top {
|
||||
padding-top: 45px;
|
||||
}
|
||||
|
||||
.layout_padding2-bottom {
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
|
||||
.layout_padding-top {
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
.layout_padding-bottom {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
.heading_container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/*header section*/
|
||||
.hero_area {
|
||||
height: 98vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #eae6f5;
|
||||
}
|
||||
|
||||
.sub_page {
|
||||
.hero_area {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.header_section {
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav_container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.custom_nav-container {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
padding: 7px 20px;
|
||||
margin: 10px 15px;
|
||||
color: $black;
|
||||
text-align: center;
|
||||
border-radius: 35px;
|
||||
text-transform: uppercase;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
.nav-link {
|
||||
background-color: $primary1;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
margin-right: 5px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: $primary1;
|
||||
}
|
||||
}
|
||||
|
||||
.custom_nav-container {
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-collapse {
|
||||
align-items: flex-end; //for this site only
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.custom_nav-container .navbar-toggler {
|
||||
padding: 0;
|
||||
width: 37px;
|
||||
height: 42px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 4px;
|
||||
background-color: #190734;
|
||||
margin: 7px 0;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
.s-1 {
|
||||
transform: rotate(45deg);
|
||||
margin: 0;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.s-2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.s-3 {
|
||||
transform: rotate(-45deg);
|
||||
margin: 0;
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded="false"] {
|
||||
|
||||
.s-1,
|
||||
.s-2,
|
||||
.s-3 {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*end header section*/
|
||||
|
||||
/* slider section */
|
||||
.slider_section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: #3b3a3a;
|
||||
padding-bottom: 90px;
|
||||
|
||||
.row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.detail_box {
|
||||
color: $black;
|
||||
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
@include hero_btn($primary1, $white, 10px, 40px, 35px);
|
||||
margin-top: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.img_container {
|
||||
border: 7px solid #7b57b2;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
div#carouselExampleContarols {
|
||||
width: 100%;
|
||||
position: unset;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.img-box {
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
top: initial;
|
||||
left: initial;
|
||||
bottom: 5%;
|
||||
right: 10%;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
opacity: 1;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 8px;
|
||||
background-position: center;
|
||||
|
||||
}
|
||||
|
||||
.carousel-control-prev {
|
||||
background-image: url(../images/prev.png);
|
||||
background-color: $white;
|
||||
transform: translate(-85px, 30px);
|
||||
}
|
||||
|
||||
.carousel-control-next {
|
||||
background-image: url(../images/next.png);
|
||||
background-color: $primary1;
|
||||
transform: translate(-45px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// end slider section
|
||||
|
||||
// service section
|
||||
|
||||
.service_section {
|
||||
text-align: center;
|
||||
|
||||
.heading_container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.service_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 35px 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.box {
|
||||
margin: 25px 1%;
|
||||
flex-basis: 31%;
|
||||
padding: 35px 25px 25px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 10px 0 rgba($color: #000000, $alpha: .15);
|
||||
border-top: 15px solid transparent;
|
||||
overflow: hidden;
|
||||
transition: all .1s;
|
||||
|
||||
.img-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 125px;
|
||||
|
||||
img {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
margin-top: 25px;
|
||||
|
||||
h5 {
|
||||
color: #2e0e5f;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
border-top: 15px solid #512a97;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 25px;
|
||||
|
||||
a {
|
||||
@include hero_btn($primary1, $white, 10px, 35px, 35px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end service section
|
||||
|
||||
|
||||
|
||||
// about section
|
||||
.about_section {
|
||||
background-color: #f3f0f6;
|
||||
|
||||
.row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.img-box {
|
||||
border: 5px solid #7b57b2;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&.b1 {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
&.b2 {
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
margin-top: -12%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
margin-right: 15%;
|
||||
|
||||
|
||||
p {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
a {
|
||||
@include hero_btn($primary1, $white, 10px, 35px, 5px);
|
||||
margin: 25px 0 45px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end about section
|
||||
|
||||
|
||||
|
||||
// blog section
|
||||
.blog_section {
|
||||
|
||||
.heading_container {
|
||||
justify-content: center;
|
||||
|
||||
h2 {
|
||||
&::before {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 55px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 10px 0 rgba($color: #000000, $alpha: .15);
|
||||
|
||||
.img-box {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
padding: 25px 25px 15px;
|
||||
|
||||
h5 {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end blog section
|
||||
|
||||
// contact section
|
||||
.contact_section {
|
||||
position: relative;
|
||||
|
||||
|
||||
form {
|
||||
margin-top: 45px;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
height: 50px;
|
||||
margin-bottom: 25px;
|
||||
padding-left: 25px;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
color: #101010;
|
||||
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
|
||||
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
|
||||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
|
||||
|
||||
&::placeholder {
|
||||
color: #737272;
|
||||
}
|
||||
|
||||
&.message-box {
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
@include hero_btn($primary1, $white, 12px, 45px, 0px);
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.map_container {
|
||||
height: 100%;
|
||||
min-height: 325px;
|
||||
|
||||
.map-responsive {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// end contact section
|
||||
|
||||
|
||||
|
||||
.footer_bg {
|
||||
background-image: url(../images/footer-bg.png);
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
/* info section */
|
||||
.info_section {
|
||||
background-color: #190734;
|
||||
color: $white;
|
||||
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.info_contact {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 45px;
|
||||
|
||||
.col-md-4 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.info_form {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 45px;
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
background-color: $white;
|
||||
border: none;
|
||||
flex: 2.5;
|
||||
outline: none;
|
||||
color: $black;
|
||||
min-height: 42.4px;
|
||||
padding-left: 15px;
|
||||
|
||||
::placeholder {
|
||||
color: $white;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
border: none;
|
||||
@include hero_btn($primary1, $white, 10px, 30px, 0);
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.info_social {
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
width: 35px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* end info section */
|
||||
|
||||
/* footer section*/
|
||||
|
||||
.footer_section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer_section p {
|
||||
color: #222222;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
|
||||
a {
|
||||
color: #222222;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// end footer section
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 515 B |
Binary file not shown.
|
After Width: | Height: | Size: 619 B |
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
Binary file not shown.
|
After Width: | Height: | Size: 805 B |
Binary file not shown.
|
After Width: | Height: | Size: 665 B |
Binary file not shown.
|
After Width: | Height: | Size: 433 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 204 B |
Binary file not shown.
|
After Width: | Height: | Size: 700 B |
Binary file not shown.
|
After Width: | Height: | Size: 182 B |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 430 B |
Binary file not shown.
|
After Width: | Height: | Size: 681 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue