Compare commits
2 Commits
fc4c96745e
...
705146cb8b
| Author | SHA1 | Date |
|---|---|---|
jankaminski1
|
705146cb8b | |
|
jankaminski1
|
31c3e33b11 |
|
|
@ -1,4 +1,3 @@
|
||||||
@page "/"
|
|
||||||
@page "/aiart"
|
@page "/aiart"
|
||||||
|
|
||||||
@using OpenAI_API
|
@using OpenAI_API
|
||||||
|
|
@ -11,11 +10,11 @@
|
||||||
@inject DialogService DialogService
|
@inject DialogService DialogService
|
||||||
|
|
||||||
<PageTitle>AiArt</PageTitle>
|
<PageTitle>AiArt</PageTitle>
|
||||||
|
<div class="hero_area">
|
||||||
<h1>Wunschbilder von KI nur für dich</h1>
|
|
||||||
|
|
||||||
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
|
<RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
|
||||||
<RadzenButton Text="Zur Gallery" Click="@NavigateToGallery" /> <RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
|
<h1>Wunschbilder von KI nur für dich</h1>
|
||||||
|
<RadzenText TextStyle="TextStyle.H2">Nenne uns deinen Wunsch:</RadzenText>
|
||||||
<RadzenTextBox @bind-Value=@request Placeholder="Dein Wunsch"/>
|
<RadzenTextBox @bind-Value=@request Placeholder="Dein Wunsch"/>
|
||||||
|
|
||||||
<RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
|
<RadzenPanel AllowCollapse="true" Style="width: 500px;" Text="Mehr Optionen">
|
||||||
|
|
@ -96,6 +95,7 @@
|
||||||
</RadzenCard>
|
</RadzenCard>
|
||||||
|
|
||||||
</RadzenStack>
|
</RadzenStack>
|
||||||
|
</div>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
private int maxAddons = 2;
|
private int maxAddons = 2;
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,5 @@
|
||||||
@page "/gallery"
|
@page "/gallery"
|
||||||
|
|
||||||
<RadzenDataList WrapItems="@true" AllowPaging="true" Data="@imagePaths" PageSize="20" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" class="image-grid">
|
|
||||||
<Template Context="imagePath">
|
|
||||||
<div class="image-grid-item">
|
|
||||||
<RadzenCard Style="width: 200px; height: 200px; padding: 0; border: none;">
|
|
||||||
<RadzenButton Click="@(args => ShowImageInfo(imagePath))">
|
|
||||||
<RadzenImage Src="@imagePath" Style="width: 100%; height: 100%; object-fit: cover;" />
|
|
||||||
</RadzenButton>
|
|
||||||
</RadzenCard>
|
|
||||||
</div>
|
|
||||||
</Template>
|
|
||||||
</RadzenDataList>
|
|
||||||
|
|
||||||
<div class="image-popup" style="@popupStyle">
|
|
||||||
<div class="image-popup-content">
|
|
||||||
<div class="image-info">
|
|
||||||
<RadzenImage Src="@selectedImage" Style="max-width: 100%; max-height: 300px; object-fit: contain;" />
|
|
||||||
<p>@infoText</p>
|
|
||||||
</div>
|
|
||||||
<div class="close-button">
|
|
||||||
<RadzenButton Text="Close" Click="CloseImageInfo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.image-grid {
|
.image-grid {
|
||||||
background-color: white; /* Hintergrund der RadzenDataList weiß machen */
|
background-color: white; /* Hintergrund der RadzenDataList weiß machen */
|
||||||
|
|
@ -80,6 +56,32 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<RadzenDataList WrapItems="@true" AllowPaging="true" Data="@imagePaths" PageSize="20" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" class="image-grid">
|
||||||
|
<Template Context="imagePath">
|
||||||
|
<div class="image-grid-item">
|
||||||
|
<RadzenCard Style="width: 200px; height: 200px; padding: 0; border: none;">
|
||||||
|
<RadzenButton Click="@(args => ShowImageInfo(imagePath))">
|
||||||
|
<RadzenImage Src="@imagePath" Style="width: 100%; height: 100%; object-fit: cover;" />
|
||||||
|
</RadzenButton>
|
||||||
|
</RadzenCard>
|
||||||
|
</div>
|
||||||
|
</Template>
|
||||||
|
</RadzenDataList>
|
||||||
|
|
||||||
|
<div class="image-popup" style="@popupStyle">
|
||||||
|
<div class="image-popup-content">
|
||||||
|
<div class="image-info">
|
||||||
|
<RadzenImage Src="@selectedImage" Style="max-width: 100%; max-height: 300px; object-fit: contain;" />
|
||||||
|
<p>@infoText</p>
|
||||||
|
</div>
|
||||||
|
<div class="close-button">
|
||||||
|
<RadzenButton Text="Close" Click="CloseImageInfo" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
List<string> imagePaths = new List<string>();
|
List<string> imagePaths = new List<string>();
|
||||||
string selectedImage;
|
string selectedImage;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,151 @@
|
||||||
|
|
||||||
|
@page "/"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="hero_area">
|
||||||
|
|
||||||
|
<!-- slider section -->
|
||||||
|
<section class=" slider_section ">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 ">
|
||||||
|
<div class="detail_box">
|
||||||
|
<h1>
|
||||||
|
Wo Wünsche <br>
|
||||||
|
Wirklichkeit <br>
|
||||||
|
werden
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
Willkommen auf meiner Webseite, wo Kunst und Technologie sich treffen. Ich freue mich, euch "Meine Wunschprogramm-Assistentin" vorzustellen, ein Projekt, das mir am Herzen liegt und das meine künstlerische Reise in eine aufregende neue Richtung führt.
|
||||||
|
</p>
|
||||||
|
<a href="/aiart" class="">
|
||||||
|
Probier es aus!
|
||||||
|
</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-img1.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="images/slider-img2.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="images/slider-img3.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>
|
||||||
|
<!-- explaining section -->
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- about section -->
|
||||||
|
<section class="about_section layout_padding">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="img_container">
|
||||||
|
<div class="img-box b1">
|
||||||
|
<img src="images/about4.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="detail-box">
|
||||||
|
<div class="heading_container">
|
||||||
|
<h2>
|
||||||
|
Was ist der Wunschprogramm-Assistent?
|
||||||
|
</h2>
|
||||||
|
<img src="images/plug.png" alt="">
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Seit Jahren habe ich Wünsche in Aquarelle verwandelt, sie humorvoll und ironisch interpretiert und ihnen eine neue Dimension gegeben. Jetzt habe ich einen mutigen Schritt gemacht und Künstliche Intelligenz (KI) als meine persönliche Assistentin in dieses kreative Unterfangen einbezogen.
|
||||||
|
Auf meiner Webseite Wunschprogramm.ai könnt ihr nun eure Wünsche äußern, die von meiner Wunschprogramm-Assistentin umgesetzt werden. Egal, ob es sich um einen „Happy End“, „Anerkennung“, „Ein Sportwagen“ oder „Sanfter Tod“ handelt, ich interpretiere eure Wünsche fantasievoll und gebe ihnen eine neue inhaltliche Dimension. Die „Wunschprogramm-Assistentin“ generiert in wenigen Momenten ein Bild, das ihr bestellen könnt. Wenn euch die Bilder gefallen, könnt ihr sie als hochwertigen Kunstdruck bestellen, und ich werde sie für euch als Originale handsignieren.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<a href="">
|
||||||
|
Read More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<img src="images/plug.png" alt="">
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Auch politische Persönlichkeiten wie Bundespräsident Frank Walter Steinmeier oder Katarina Barley sowie show-Promis wie Micaela Schäfer und Carlo von Tiedemann haben mir bereits ihre Wünsche anvertraut, und ich lade euch ein, dasselbe zu tun. Es ist eine Gelegenheit, Teil eines kreativen Dialogs zu werden, der über die traditionellen Grenzen der Kunst hinausgeht.
|
||||||
|
Auf dieser Webseite findet ihr alle Informationen über mein bisheriges Wunschprogramm, über meinen künstlerischen Werdegang und über die Entstehung und Realisierung dieses Projektes. "Meine Wunschprogramm-Assistentin" ist mehr als nur ein Projekt; es ist eine Erkundung dessen, was Kunst sein kann, wenn sie mit der Technologie von heute verknüpft wird. Ich lade euch ein, diese Reise mit mir zu teilen, eure Wünsche zu äußern und zu sehen, wie sie in Kunst verwandelt werden.
|
||||||
|
Besucht Wunschprogramm.ai und entdeckt, was möglich ist, wenn Wünsche, Kunst und Technologie aufeinandertreffen. Ich freue mich darauf, eure Wünsche in Kunst zu verwandeln.
|
||||||
|
|
||||||
|
</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/about1.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="img-box b2">
|
||||||
|
<img src="images/about2.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- end about section -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,139 @@
|
||||||
|
@page "/kirstenkloeckner"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="hero_area">
|
||||||
|
|
||||||
|
<!-- slider section -->
|
||||||
|
<section class=" slider_section ">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 ">
|
||||||
|
<div class="detail_box">
|
||||||
|
<h1>
|
||||||
|
Wer ist <br>
|
||||||
|
Kirsten <br>
|
||||||
|
Klöckner?
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
Kirsten Klöckner, geboren 1962 in Braunschweig, hat die deutsche Kunstszene mit ihren humorvollen und hintergründigen Arbeiten bereichert.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</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-img1.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="images/slider-img2.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="images/slider-img3.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>
|
||||||
|
<!-- explaining section -->
|
||||||
|
<div class="container">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- about section -->
|
||||||
|
<section class="about_section layout_padding">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="img_container">
|
||||||
|
<div class="img-box b1">
|
||||||
|
<img src="images/about4.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="detail-box">
|
||||||
|
<div class="heading_container">
|
||||||
|
<h2>
|
||||||
|
Was ist der Wunschprogramm-Assistent?
|
||||||
|
</h2>
|
||||||
|
<img src="images/plug.png" alt="">
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Ihre kreative Reise begann mit einem Studium der Bildhauerei an der Kunstakademie Münster, wo sie von 1983 bis 1986 unter der Leitung von Reiner Ruthenbeck studierte. Nach ihrem Studium zog sie nach Düsseldorf, um dort bis 2001 zu leben und zu arbeiten. Berlin wurde 2002 ihr neues Zuhause, ein Ort, der ihr die Konzentration auf ihre Kunst ermöglichte.
|
||||||
|
Klöckner's künstlerische Ausbildung war geprägt von einer tiefen Leidenschaft für die Bildhauerei. Ihre Zeit in Münster legte den Grundstein für eine Karriere, die sich durch Vielseitigkeit und Kreativität auszeichnet. Nach ihrem Umzug nach Düsseldorf begann sie, ihre künstlerische Stimme zu finden, und Berlin bot ihr schließlich die Plattform, um sich voll und ganz auf ihre Kunst zu konzentrieren.
|
||||||
|
Ihr Werk ist vielseitig und reicht von Bildhauerei über Malerei bis hin zur Verlagsarbeit. Seit den 1990er Jahren produziert sie Multiples, kleine Objekte in begrenzter Auflagenzahl, die am Rand des Kunstmarkts gehandelt, geliebt und verschenkt werden. Ihr "Wunschbilder-Programm" ist ein zentrales Thema, in dem sie Wünsche ihrer Mitmenschen humorvoll und ironisch in Aquarellen umsetzt.
|
||||||
|
Im Laufe ihrer Karriere hat Kirsten Klöckner zahlreiche bemerkenswerte Ausstellungen gehabt, darunter "Science fiction, Teil 1: der Plan" (1992), "Eingemachtes" (1997), "Aquarelle + Multiples" (2004), und "Wunschbilder" (2015). Ihre Werke wurden in der Akademie der Künste in Berlin und in großen Galerien bundesweit ausgestellt. Sie hat auch an vielen Gruppenausstellungen teilgenommen, die ihre Vielseitigkeit und ihren Einfluss in der Kunstszene unterstreichen.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<a href="">
|
||||||
|
Read More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<img src="images/plug.png" alt="">
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Ihre Kunst ist in renommierten Sammlungen wie dem Kunstmuseum Düsseldorf, der Sammlung Falckenberg in Hamburg und der Kunstsammlung der Landesbank Baden-Württemberg in Stuttgart vertreten. Klöckner hat auch eine beeindruckende Liste von Veröffentlichungen, darunter "Heimatmelodie" (1989) und "Musenbesuch - BeuteKunst II" (2013), die einen tieferen Einblick in ihre kreativen Prozesse bieten.
|
||||||
|
Als "eine der humorvollsten" Künstlerinnen von Klaus Staeck, dem Präsidenten der Berliner Akademie der Künste, bezeichnet, wird Kirsten Klöckner sowohl von der Kunstgemeinschaft als auch von der breiten Öffentlichkeit geschätzt und anerkannt. Ihre kreative Zusammenarbeit mit APROTO - Aktionen und Projekte pro Toleranz - hat besondere Aufmerksamkeit erregt. Das „Toleranz-Virus“, ein Aquarell und eine Skulptur von Kirsten Klöckner, wurde umgesetzt, um Toleranz in schwierigen Zeiten zu fördern. Das Aquarell und die Skulptur werden als APROTO-Toleranzpreis verliehen.
|
||||||
|
Kirsten Klöckner's Reise durch die Kunstwelt ist eine, die von Humor, Intelligenz und einem unermüdlichen Streben nach kreativem Ausdruck geprägt ist. Ihre Werke und ihr Einfluss auf die Kunstszene zeugen von der Bedeutung und dem Wert ihrer Arbeit, und ihre fortwährende Innovation und ihr Engagement für Toleranz und Verständnis machen sie zu einer herausragenden Figur in der zeitgenössischen Kunst.
|
||||||
|
|
||||||
|
</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/about1.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="img-box b2">
|
||||||
|
<img src="images/about2.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- end about section -->
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
@page "/wunschprogramm"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="hero_area">
|
||||||
|
|
||||||
|
<!-- slider section -->
|
||||||
|
<section class=" slider_section ">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 ">
|
||||||
|
<div class="detail_box">
|
||||||
|
<h1>
|
||||||
|
Das <br>
|
||||||
|
Wunschprogramm
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
Ich mache mich zur Komplizin der Wünschenden.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</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-img1.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="images/slider-img2.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<div class="img-box">
|
||||||
|
<img src="images/slider-img3.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>
|
||||||
|
<!-- explaining section -->
|
||||||
|
<div class="container">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- about section -->
|
||||||
|
<section class="about_section layout_padding">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="img_container">
|
||||||
|
<div class="img-box b1">
|
||||||
|
<img src="images/about4.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="detail-box">
|
||||||
|
<div class="heading_container">
|
||||||
|
<h2>
|
||||||
|
Was ist der Wunschprogramm-Assistent?
|
||||||
|
</h2>
|
||||||
|
<img src="images/plug.png" alt="">
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Das Wunschprogramm von Kirsten Klöckner ist eine Reise in die Welt der Wünsche, eine faszinierende Verschmelzung von Kunst und menschlicher Sehnsucht. In einer Zeit, in der Kunst oft mit hohen Erwartungen konfrontiert ist, stellt Klöckner die Frage: Was, wenn Kunst auch Wünsche erfüllen könnte? Mit ihrem einzigartigen „Wunschbilder-Programm“ tut sie genau das.
|
||||||
|
Kirsten Klöckner hat sich auf die humorvolle und ironische Umwandlung von Wünschen ihrer Mitmenschen in Aquarelle spezialisiert. Sie interpretiert die Wünsche fantasievoll, gibt ihnen Substanz und verwandelt sie in Kunstwerke. Egal, ob es sich um einfache oder komplizierte Wünsche, kleine oder riesige, alberne oder ernsthafte Wünsche handelt, sie nimmt sie alle an und macht sie zu einem Teil ihres kreativen Prozesses. Selbst prominente Persönlichkeiten wie Bundespräsident Frank Walter Steinmeier und Showpromis wie Micaela Schäfer haben ihre Wünsche anvertraut.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<a href="">
|
||||||
|
Read More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<img src="images/plug.png" alt="">
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
In ihren eigenen Worten beschreibt Klöckner das Wunschprogramm als eine Möglichkeit, sich etwas zu wünschen, in einer Welt, in der die Kunst oft schwer beschäftigt ist. „Ich lebe in einer Zeit, in der das Wünschen hilft“, sagt sie und fügt hinzu: „Ich mache mich zur Komplizin der Wünschenden.“
|
||||||
|
Das „Wunschprogramm“ von Kirsten Klöckner ist mehr als nur eine künstlerische Technik. Es ist eine Einladung, über unsere Wünsche nachzudenken und sie in die Welt der Kunst zu bringen. Es ist eine Möglichkeit, unsere tiefsten Sehnsüchte und Träume in einer Form zu sehen, die sowohl schön als auch nachdenklich ist. Es ist eine Erinnerung daran, dass die Kunst immer noch die Kraft hat, uns zu überraschen, zu inspirieren und uns etwas zu wünschen.
|
||||||
|
Die Kunst des Wünschens, wie sie von Klöckner praktiziert wird, ist ein lebendiger Dialog zwischen dem Künstler und dem Betrachter, eine Möglichkeit, die oft flüchtigen Gedanken und Sehnsüchte in etwas Greifbares und Bleibendes zu verwandeln. Es ist eine Reise, die uns alle einlädt, Teilnehmer und Zeugen der Transformation von Wünschen in Kunst zu sein, und es ist ein Beweis dafür, dass Kunst immer noch die Macht hat, uns auf unerwartete und wunderbare Weise zu berühren.
|
||||||
|
|
||||||
|
|
||||||
|
</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/about1.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="img-box b2">
|
||||||
|
<img src="images/about2.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- end about section -->
|
||||||
|
|
@ -18,6 +18,31 @@
|
||||||
<!-- Radzen.Blazor -->
|
<!-- Radzen.Blazor -->
|
||||||
<link rel="stylesheet" href="_content/Radzen.Blazor/css/humanistic-base.css">
|
<link rel="stylesheet" href="_content/Radzen.Blazor/css/humanistic-base.css">
|
||||||
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<component type="typeof(App)" render-mode="ServerPrerendered" />
|
<component type="typeof(App)" render-mode="ServerPrerendered" />
|
||||||
|
|
@ -34,5 +59,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="_framework/blazor.server.js"></script>
|
<script src="_framework/blazor.server.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="js/jquery-3.4.1.min.js"></script>
|
||||||
|
<script src="js/bootstrap.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -10,10 +10,139 @@
|
||||||
*@
|
*@
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
<!-- 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="/">Home </a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/aiart"> Bilder generieren</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/wunschprogramm"> Wunschprogramm </a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/kirstenkloeckner"> Über Kirsten Klöckner </a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="gallery">Galerie </a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- end header section -->
|
||||||
|
|
||||||
<article class="content px-4">
|
<article class="content px-4">
|
||||||
@Body
|
@Body
|
||||||
</article>
|
</article>
|
||||||
|
<!-- 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 Nackenbox
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!-- footer section -->
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
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: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
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: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
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