Webseite erstellen lassen. Modern und Einzigartig.
Die erste Begegnung eines Kunden mit Ihrer Marke erfolgt bereits auf Ihrer Webseite. Wir unterstützen Unternehmen dabei, durch vertrauenswürdiges und modernes Webdesign einen positiven Eindruck zu hinterlassen.
Leistungen
Professionelles Webdesign
Ihre Webseite ist Ihre digitale Visitenkarte. Wir kreieren ansprechende und benutzerfreundliche Webseiten, die nicht nur ästhetisch ansprechend sind, sondern auch eine herausragende Benutzererfahrung bieten.
Grafikdesign
Ein ansprechendes Design ist entscheidend für den Erfolg Ihrer Marke. Wir erschaffen visuelle Elemente, die Ihre Botschaft effektiv kommunizieren und einen bleibenden Eindruck hinterlassen.
PHP Entwicklung
Die Entwicklung dynamischer und leistungsstarker Webanwendungen ist unsere Stärke. Mit unserer Expertise in der PHP-Entwicklung bringen wir Ihre Ideen zum Leben und schaffen maßgeschneiderte Lösungen, die Ihren Anforderungen entsprechen. (Onlineshops, Dashboards, Datenanalysen, Datenbanken, usw.)
Leistungsstarkes Serverhosting
Unsere leistungsstarken Serverhosting-Lösungen sind das Fundament für eine vielseitige und zuverlässige technologische Infrastruktur. Mit modernster Technologie und hochwertiger Hardware gewährleisten wir nicht nur eine optimale Performance, sondern auch maximale Flexibilität für Ihre individuellen Anforderungen.
Suchmaschinen Optimierung
Erreichen Sie eine höhere Sichtbarkeit im Internet. Wir optimieren Ihre Webseite, um sicherzustellen, dass Sie in den Suchergebnissen prominent platziert sind und so mehr potenzielle Kunden erreichen können.
Kostenloser Webseiten-Check
Analyse Ihrer Webseite vom Profi - ohne versteckte Kosten.
Warum eine Mial Webseite?
Volle Flexibilität durch selbstgeschriebenen Code
Mial steht für volle Flexibilität dank maßgeschneidertem, selbstgeschriebenem Code. Jedes Projekt wird individuell gestaltet und optimiert, um ein bestmögliches Online-Erlebnis zu bieten.
Responsive Design
Wir setzen auf modernes und benutzerfreundliches Webdesign mit dem Fokus auf Responsive Design. Inzwischen erfolgen 80% aller Onlinezugriffe über mobile Geräte, daher legen wir großen Wert darauf, dass unser Design sich optimal an diese Gegebenheit anpasst.
Superschnelle und sichere Webseite
Erleben Sie superschnelle Ladezeiten und höchste Sicherheit für Ihre Webseite dank unserer leistungsstarken Serverinfrastruktur. Wir garantieren eine herausragende Performance, um Ihren Besuchern ein optimales Nutzererlebnis zu bieten, gleichzeitig jedoch auch höchste Standards in puncto Datensicherheit zu gewährleisten.
Ein Blick hinter die Kulissen
Die meisten Agenturen machen sichs einfach und benutzen Websitebuilder um Webseiten zu
erstellen. Wir setzen bei unseren Webseiten auf 100% handgeschriebenen Code, da wir nur
so komplett sicher sein können, dass Sie das optimale Ergebnis erhalten.
Sie
wollen sich ein Bild unserer Arbeit machen? Schauen Sie sich den Code dieser Webseite
an. Klicken Sie einfach auf den Button unterhalb.
Der Code dieser Webseite:
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mial Webentwicklung | Professionelle Webseiten erstellen lassen</title>
<link rel="stylesheet" href="http://localhost/web//assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="icon" type="image/x-icon" href="http://localhost/web//assets/img/ico.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism-coy.min.css">
<meta http-equiv="Pragma" content="cache" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta http-equiv="content-Language" content="de" />
<meta name="description"
content="Mial Webentwicklung ist eine Onlineagentur aus Salzburg. Wir erstellen professionelle Webseiten und Homepages zu einem guten Preis. Website erstellen lassen mit Mial." />
<meta name="keywords" content="Website Homepage Webseite erstellen lassen" />
<meta http-equiv="Reply-to" content="" />
<meta name="revisit-after" content="2 days" />
</head>
<body>
<div class="main">
<div class="theader fixed stopper">
<div class="theader_main">
<div class="theader_left">
<img src="../../assets/img/logo-neu.png" alt="Mial Webentwicklung Logo">
</div>
<div class="theader_right">
<a href="">Leistungen</a>
<a href="">Referenzen</a>
<a href="">Blick hinter die Kulissen</a>
<a href="">Kontakt aufnehmen</a>
</div>
</div>
</div>
<div id="nav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a onclick="closeNav()" href="">
</a>
<a onclick="closeNav()" href="">
</a>
<a onclick="closeNav()" href="">
</a>
<a onclick="closeNav()" href="">
</a>
</div>
<div class="theader">
<div class="theader_main">
<div class="theader_left">
<img src="../../assets/img/logo-neu.png" alt="Mial Webentwicklung Logo">
</div>
<div class="theader_right">
<a href="">Leistungen</a>
<a href="">Referenzen</a>
<a href="">Blick hinter die Kulissen</a>
<a href="">Kontakt aufnehmen</a>
</div>
</div>
</div>
<div class="main_index">
<div class="index_topper">
<div class="topper_main">
<div class="topper_item topper_item_img img img_01">
<video autoplay loop muted playsinline class="video-background ">
<source src="../../assets/head_vid.mp4" type="video/mp4">
</video>
</div>
<div class="topper_upper">
<div class="topper_item topper_item_text">
<h2>Webseite erstellen lassen. Modern und Einzigartig.</h2>
<p style="color: white;margin-top: 15px;margin-bottom: 24px;font-size: 31px;">Die erste
Begegnung eines Kunden mit Ihrer Marke erfolgt bereits auf Ihrer Webseite. Wir
unterstützen Unternehmen dabei, durch vertrauenswürdiges und modernes Webdesign einen
positiven Eindruck zu hinterlassen.</p>
<div class="btn">
<a href="baukasten-webseite">
<p style="color: white;">Kontakt aufnehmen</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="index_leistungen">
<div class="leistungen_main">
<div class="leistungen_title">
<h3 class="margin01">Leistungen</h3>
</div>
<div class="leistungen_slider" style="margin-top: 30px">
<div class="swiper home">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper_img img img_14"></div>
<div class="swiper_content">
<h3>Professionelles Webdesign</h3>
<br>
<p>Ihre Webseite ist Ihre digitale Visitenkarte. Wir kreieren ansprechende und
benutzerfreundliche Webseiten, die nicht nur ästhetisch ansprechend sind,
sondern auch eine herausragende Benutzererfahrung bieten.</p>
<br><br>
<div class="btn white">
<a href="baukasten-webseite">
<p>Kontakt aufnehmen</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper_img img img_02"></div>
<div class="swiper_content">
<h3>Grafikdesign</h3>
<br>
<p>Ein ansprechendes Design ist entscheidend für den Erfolg Ihrer Marke. Wir
erschaffen visuelle Elemente, die Ihre Botschaft effektiv kommunizieren und
einen bleibenden Eindruck hinterlassen.</p>
<br><br>
<div class="btn white">
<a href="baukasten-webseite">
<p>Kontakt aufnehmen</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper_img img img_15">
</div>
<div class="swiper_content">
<h3>PHP Entwicklung</h3>
<br>
<p>Die Entwicklung dynamischer und leistungsstarker Webanwendungen ist unsere
Stärke. Mit unserer Expertise in der PHP-Entwicklung bringen wir Ihre Ideen
zum Leben und schaffen maßgeschneiderte Lösungen, die Ihren Anforderungen
entsprechen. (Onlineshops, Dashboards, Datenanalysen, Datenbanken, usw.)</p>
<br><br>
<div class="btn white">
<a href="baukasten-webseite">
<p>Kontakt aufnehmen</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper_img img img_17 ">
</div>
<div class="swiper_content">
<h3>Leistungsstarkes Serverhosting</h3>
<br>
<p>Unsere leistungsstarken Serverhosting-Lösungen sind das Fundament für eine
vielseitige und zuverlässige technologische Infrastruktur. Mit modernster
Technologie und hochwertiger Hardware gewährleisten wir nicht nur eine
optimale Performance, sondern auch maximale Flexibilität für Ihre
individuellen Anforderungen. </p>
<br><br>
<div class="btn white">
<a href="baukasten-webseite">
<p>Kontakt aufnehmen</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper_img img img_16"></div>
<div class="swiper_content">
<h3>Suchmaschinen Optimierung</h3>
<br>
<p>Erreichen Sie eine höhere Sichtbarkeit im Internet. Wir optimieren Ihre
Webseite, um sicherzustellen, dass Sie in den Suchergebnissen prominent
platziert sind und so mehr potenzielle Kunden erreichen können.</p>
<br><br>
<div class="btn white">
<a href="baukasten-webseite">
<p>Kontakt aufnehmen</p>
</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="swiper_img img img_01"></div>
<div class="swiper_content">
<h3>App Entwicklung</h3>
<br>
<p>Mobile Anwendungen sind heutzutage unverzichtbar. Wir entwickeln
benutzerfreundliche und leistungsstarke Apps, die Ihre Zielgruppe ansprechen
und Ihr Unternehmen vorantreiben.</p>
<br><br>
<div class="btn white">
<a href="baukasten-webseite">
<p>Kontakt aufnehmen</p>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"
style="color: var(--color-two);margin: auto;position: relative;padding-left: 80px;margin-top: 40px;">
</div>
<div class="swiper-button-prev"
style="color: var(--color-two); margin: auto; position: relative; margin-top: -44px; padding-right: 80px;">
</div>
</div>
</div>
</div>
</div>
<div class="index_warum_mial">
<div class="wm_main">
<div class="ueber_title" data-aos="fade-up" data-aos-duration="600">
<h3>Warum eine Mial Webseite?</h3>
</div>
</div>
<div class="text_main" data-aos="fade-up" data-aos-duration="600">
<div class="text_item text_item_text">
<h3>Volle Flexibilität durch selbstgeschriebenen Code</h3>
<p>Mial steht für volle Flexibilität dank maßgeschneidertem, selbstgeschriebenem Code. Jedes
Projekt wird individuell gestaltet und optimiert, um ein bestmögliches Online-Erlebnis zu
bieten.</p>
<br>
<div class="btn white">
<a href="baukasten-webseite">
<p>Kontakt aufnehmen</p>
</a>
</div>
</div>
<div class="text_item text_item_img img img_02"></div>
</div>
<div class="text_main" data-aos="fade-up" data-aos-duration="600">
<div class="text_item text_item_text">
<h3>Responisves Design</h3>
<p>Wir setzen auf modernes und benutzerfreundliches Webdesign mit dem Fokus auf responsives
Design. Inzwischen erfolgen 80% aller Onlinezugriffe über mobile Geräte, daher legen wir
großen Wert darauf, dass unser Design sich optimal an diese Gegebenheit anpasst.</p>
<br>
<div class="btn white">
<a href="baukasten-webseite">
<p>Kontakt aufnehmen</p>
</a>
</div>
</div>
<div class="text_item text_item_img img img_02"></div>
</div>
<div class="text_main" data-aos="fade-up" data-aos-duration="600">
<div class="text_item text_item_text">
<h3>Superschnelle und Sichere Webseite</h3>
<p>Erleben Sie superschnelle Ladezeiten und höchste Sicherheit für Ihre Webseite dank unserer
leistungsstarken Serverinfrastruktur. Wir garantieren eine herausragende Performance, um
Ihren Besuchern ein optimales Nutzererlebnis zu bieten, gleichzeitig jedoch auch höchste
Standards in puncto Datensicherheit zu gewährleisten.</p>
<br>
<div class="btn white">
<a href="baukasten-webseite">
<p>Kontakt aufnehmen</p>
</a>
</div>
</div>
<div class="text_item text_item_img img img_02"></div>
</div>
</div>
<div class="index_portfolio">
<div class="portfolio_main">
<div class="portfolio_title" data-aos="fade-up" data-aos-duration="600">
<h3 class="margin01">Referenzen</h3>
</div>
<div class="portfolio_ref">
<div class="portfolio_ref_item" style=" margin-right: 20px; " data-aos="fade-up"
data-aos-duration="600">
<div class="portfolio_ref_item_img img img_18"></div>
<div class="portfolio_ref_item_content">
<div class="portfolio_ref_item_content_topper">
<p>Christof Holzner, Active Body Mobilisation</p>
</div>
<div class="portfolio_ref_item_content_bottom">
<p>Mial bringt nicht nur technische Kompetenz, sondern auch kreative Lösungsansätze.
Die Zusammenarbeit war reibungslos, und das Ergebnis spricht für sich. </p>
</div>
</div>
</div>
<div class="portfolio_ref_item" data-aos="fade-up" data-aos-duration="600">
<div class="portfolio_ref_item_img img img_18"></div>
<div class="portfolio_ref_item_content">
<div class="portfolio_ref_item_content_topper">
<p>Christof Holzner, Active Body Mobilisation</p>
</div>
<div class="portfolio_ref_item_content_bottom">
<p>Mial bringt nicht nur technische Kompetenz, sondern auch kreative Lösungsansätze.
Die Zusammenarbeit war reibungslos, und das Ergebnis spricht für sich. </p>
</div>
</div>
</div>
</div>
<div class="portfolio_ref">
<div class="portfolio_ref_item2" style=" margin-right: 20px; " data-aos="fade-up"
data-aos-duration="600">
<div class="portfolio_ref_item_img img img_18"></div>
<div class="portfolio_ref_item_content">
<div class="portfolio_ref_item_content_topper">
<p>Christof Holzner, Active Body Mobilisation</p>
</div>
<div class="portfolio_ref_item_content_bottom">
<p>Mial bringt nicht nur technische Kompetenz, sondern auch kreative Lösungsansätze.
Die Zusammenarbeit war reibungslos, und das Ergebnis spricht für sich. </p>
</div>
</div>
</div>
<div class="portfolio_ref_item2" data-aos="fade-up" data-aos-duration="600">
<div class="portfolio_ref_item_img img img_18"></div>
<div class="portfolio_ref_item_content">
<div class="portfolio_ref_item_content_topper">
<p>Christof Holzner, Active Body Mobilisation</p>
</div>
<div class="portfolio_ref_item_content_bottom">
<p>Mial bringt nicht nur technische Kompetenz, sondern auch kreative Lösungsansätze.
Die Zusammenarbeit war reibungslos, und das Ergebnis spricht für sich. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="index_blick" data-aos="fade-up" data-aos-duration="600">
<div class="blick_main">
<div class="blick_title">
<div class="ueber_titel">
<h3>Ein Blick hinter die Kulissen</h3>
<br>
<p>Die meisten Agenturen machen sichs einfach und benutzen Websitebuilder um Webseiten zu
erstellen. Wir setzen bei unseren Webseiten auf 100% handgeschriebenen Code, da wir nur
so komplett sicher sein können, dass Sie das optimale Ergebnis erhalten. <br><br> Sie
wollen sich ein Bild unserer Arbeit machen? Schauen Sie Sich den Code dieser Webseite
an. Klicken Sie einfach auf den Button unterhalb.</p>
<div class="btn white" style=" margin: auto; margin-top: 20px; ">
<a href="baukasten-webseite">
<p>Webseiten Code anzeigen</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="blick_top">
<pre><code class="language-css">
</code></pre>
</div>
<div class="index_kontakt" data-aos="fade-up" data-aos-duration="600">
<div class="kontakt_main">
<div class="kontakt_main_title">
<h3 style="margin-bottom: calc(var(--margin01) * 0.5);">Kontakt</h3>
</div>
<div class="kontakt_main_form">
<form>
<p>Name</p>
<input type="text" for="name" required> <br>
<p>Email</p>
<input type="email" for="email" required> <br>
<p>Nachricht</p>
<textarea rows="7" required></textarea> <br>
<button type="submit">Senden</button>
</form>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_main">
<div class="footer_main_topper">
<p>Mial Webentwicklung Salzburg - Internetagentur für die Erstellung von Webseiten, Webshops & Co.
</p>
<hr>
</div>
<div class="footer_main_bottom">
<div class="footer_item">
<h4>Kontakt</h4>
<hr>
<h4 style="margin-top: 20px;">GFS 18 GmbH</h4>
<p style="font-size:20px">Getreidegasse 2,</p>
<p style="font-size:20px">5020 Salzburg,</p>
<p style="font-size:20px">Austria.</p>
<p style="font-size:20px">office@mial.at</p>
</div>
<div class="footer_item">
<h4>Law</h4>
<hr>
<div class="links">
<a href="http://localhost/web//de/impressum">Impressum</a>
<a href="http://localhost/web//de/datenschutz">Datenschutz</a>
<a href="http://localhost/web//de/agb">AGBs</a>
<a href="http://localhost/web//de/cookies">Cookies</a>
</div>
</div>
<div class="footer_item">
<h4>Links</h4>
<hr>
<div class="links">
<a href="http://localhost/web//de/produkte/webseite-vom-profi">Kalkulator</a>
<a href="http://localhost/web//de/downloads">Downloads</a>
<a href="http://localhost/web//de/newsletter">Newsletter</a>
<a href="http://localhost/web//de/preisliste">Preistabelle</a>
</div>
</div>
</div>
</div>
</div>
<div class="footer2">
<div class="footer2_main">
<h2>Made by Mial Web</h2>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
/*
//
// ## NORMAL ##
//
*/
@import url("https://use.typekit.net/rxr3gnd.css");
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #FFC557 #ffffff;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 15px;
}
*::-webkit-scrollbar-track {
background: #ffffff;
}
*::-webkit-scrollbar-thumb {
background-color: #FFC557;
border-radius: 0px;
border: 0px solid #ffffff;
}
/*
vars
*/
:root {
--color-one: #F0F0F0;
--color-two: #FFC557;
--init-width: 1030px;
--init-padding: 25px;
--margin01: 45px;
--height-header: 70px;
}
::selection {
background: #fbb636;
color: white;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
transition: all 0.2s ease-in-out;
outline: none;
}
body {
margin: 0;
background-color: var(--color-one);
overflow-x: hidden;
}
@media screen and (max-width: 605px) {
:root {
--margin01: 25px
}
}
@media screen and (max-width: 345px) {
:root {
--init-padding: 15px;
}
}
/*
FONTS
*/
h2 {
font-family: "acier-bat-solid", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 62px;
color: white;
}
h3 {
font-family: "acier-bat-solid", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 55px;
color: var(--color-two);
text-align: center;
}
h4 {
font-family: "acier-bat-solid", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 30px;
color: white;
}
p {
font-family: "bc-alphapipe", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 24px;
word-wrap: break-word;
}
a {
font-family: "bc-alphapipe", sans-serif;
font-weight: 400;
font-style: normal;
text-decoration: none;
cursor: pointer;
}
video {
height: 100%;
margin-left: -50%;
}
a:hover {
text-decoration: underline;
}
.dataprot h1, .dataprot h2,.dataprot h3,.dataprot h4,.dataprot p, .dataprot a {
font-family: sans-serif;
color: black;
}
.dataprot p {
font-size: 20px;
}
.dataprot h3{
font-size: 30px;
margin-top: 20px;
}
.dataprot h2 {
font-size: 40px;
margin-top: 30px;
}
.dataprot * {
font-family: sans-serif;
}
.index_leistungen a:hover {
text-decoration: none;
cursor: pointer;
}
.btn {
width: fit-content;
padding: 5px 10px;
border: 2px solid white;
}
.btn.white {
border: 2px solid var(--color-two);
}
.btn a {
text-decoration: none;
color: var(--color-two);
font-size: 18px;
display: flex;
}
.btn p {
text-decoration: none;
color: var(--color-two);
font-size: 18px;
}
.btn.white p {
color: var(--color-two);
}
.btn.blocker {
background-color: var(--color-two);
}
.btn.blocker p {
color: white;
}
.btn p:hover {
text-decoration: underline;
}
.btn.center {
margin: auto;
}
.btn:hover {
background-color: white;
}
.btn:hover p {
color: var(--color-two)!important;
}
.btn.white:hover {
background-color: var(--color-two);
}
.btn.white:hover p {
color: white!important;
}
hr {
width: 100px;
border-style: solid;
border-width: 3px;
color: var(--color-two);
margin: auto;
}
.bildbnt {
text-decoration: none;
}
.bildbnt p {
text-align: center;
color: white;
}
@media screen and (max-width: 827px) {
h2 {
font-size: 48px;
}
p {
font-size: 25px!important;
}
h3,
h3.item-h3 {
font-size: 6vw!important;
}
p.kleiner {
font-size: 4vw!important;
}
.leistungen_text_list {
width: 50%;
height: 356px!important;
}
}
@media screen and (max-width: 600px) {
h3 {
font-size: 8vw!important;
}
h3.item-h3 {
font-size: 6vw!important;
}
}
@media screen and (max-width: 347px) {
hr {
width: 75px;
border-style: solid;
border-width: 2px;
color: var(--color-two);
margin: auto;
}
}
@media screen and (max-width: 340px) {
h2 {
font-size: 10vw!important;
}
p {
font-size: 6vw!important;
}
}
/*
PICTURES
*/
.img {
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
background-size: cover;
}
.img_01 {
background-image: url(../img/1000_F_325832339_KiKwi2nHLo2siWDzcRlQFNRmc2VnEgVO.jpg);
}
.img_02 {
background-image: url(../img/240_F_252637253_4Xde45HExV7HJ1doyapQKqKR1zWLzvEt.jpg);
}
.img_03 {
background-image: url(../img/240_F_215027147_LxS8J1w6nxxXcwqfg7R1eMgQIHruTpJe.jpg);
}
.img_04 {
background-image: url(../img/240_F_495868044_t1osvB1np8iLvXeBmIgK0yewXQy5hTFa.jpg);
}
.img_05 {
background-image: url(../img/240_F_239326573_4es5SV4zAdBaM8JezBmIuYAeuMCbAMs4.jpg);
}
.img_06 {
background-image: url(../img/240_F_322969759_2OHod5ZLeAzPtsl65Kf4MAfFBesmGDy8.jpg);
}
.img_07 {
background-image: url(../img/240_F_136283864_Gps0maUhkHipYaNuk4YfWfPUHUISG21N.jpg);
}
.img_08 {
background-image: url(../img/240_F_306445529_dFXbKcu8oAYESRfm7MFujNqAs89tc186.jpg);
}
.img_09 {
background-image: url(../img/240_F_326780300_k4tYvYyXC52RFpGlxypiipUSJ0QBqVYR.jpg);
}
.img_10 {
background-image: url(../img/240_F_371803863_3WvXDoZuAc1uTopRvgULnnukCr7jlsmf.jpg);
}
.img_11 {
background-image: url(../img/AdobeStock_124053718.jpeg);
}
.img_12 {
background-image: url(../img/AdobeStock_124053716.png);
}
.img_13 {
background-image: url(../img/AdobeStock_298072081.jpeg);
}
.img_14 {
background-image: url(../img/webentwicklung.png);
}
.img_15 {
background-image: url(../img/que-es-php.jpg);
}
.img_16 {
background-image: url(../img/AdobeStock_Blogbeitrag_SEO_SEA.jpeg);
}
.img_17 {
background-image: url(../img/AdobeStock_302670151.jpeg);
}
.img_18 {
background-image: url(../img/Download.jfif);
}
/*
DIVs
*/
.init_width {
max-width: var(--init-width);
padding: var(--init-padding);
margin: auto;
margin-bottom: var(--init-padding);
margin-top: var(--init-padding);
}
.margin01 {
margin-top: var(--margin01);
}
.info {
background-color: white;
max-width: var(--init-width);
padding: var(--init-padding);
margin: auto;
margin-top: var(--margin01);
margin-bottom: var(--margin01);
}
.info_main {
padding: var(--init-padding);
border: 4px solid var(--color-two);
}
.info_main h2 {
color: var(--color-two);
font-size: 35px!important;
}
.info_main p {
font-size: 22px!important;
}
.headblocker {
margin-top: var(--height-header);
}
.page_title {
background-color: var(--color-two);
}
.page_title_main {
max-width: var(--init-width);
padding: var(--init-padding);
margin: auto;
}
.page_title h3 {
text-align: left;
color: white;
}
.container {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
max-width: var(--init-width);
background-color: white;
}
.container_title {
font-size: 18px!important;
margin-top: 10px;
}
.side2 {
display: flex;
}
.side2text {
width: 50%;
padding: 10px;
}
.side2img {
width: 50%;
}
.con {}
.con-white {
background-color: white;
}
.con-gray {
background-color: var(--color-one);
}
.con-orange {
background-color: var(--color-two);
}
.con-orange a {
color: white;
}
.con-orange p {
color: white;
}
.con-orange h2 {
color: white;
}
.con-main {
max-width: var(--init-width);
margin: auto;
padding: var(--init-padding);
}
@media screen and (max-width: 600px) {
.side2 {
flex-direction: column;
display: flex;
}
.side2img {
height: 300px;
width: 100%;
}
.side2text {
width: 100%;
}
}
/*
OTHER
*/
/*
//
// ## SEITEN ##
//
*/
/*
HEADER
*/
.header {
position: fixed;
width: 100%;
height: var(--height-header);
background-color: #dfdfdf85;
top: 0;
z-index: 10;
}
.header.solid {
background-color: white;
box-shadow: #0000007d 0px -1px 7px;
}
.header.solid_fixed {
background-color: white;
box-shadow: #0000007d 0px -1px 7px;
}
.header_main {
max-width: var(--init-width);
margin: auto;
}
.header_main_flex {
display: flex;
align-items: center;
height: 100%;
}
.header_text {
color: var(--color-two)!important;
padding: 10px;
position: fixed;
}
.header.solid .header_text p {
color: var(--color-two)!important;
}
.header.solid_fixed .header_text p {
color: var(--color-two)!important;
}
.header_text {
margin-left: auto;
}
.header_text a {
color: white;
margin-left: 10px;
}
.header_img {
height: 100%;
margin: auto;
}
.header_img img {
height: 100%;
padding: 10px;
margin: auto;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 30;
top: 0;
left: 0;
background-color: var(--color-two);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
text-align: center;
box-shadow: #0000007d 0px -1px 7px;
}
.sidenav a {
padding: 8px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #e0dfdf;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.width {
width: 300px;
}
@media screen and (max-width: 400px) {
.width {
width: 100%;
}
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
/*THEADER*/
.theader {
position: absolute;
padding: 10px;
width: 100%;
height: var(--height-header);
background-color: #ffffff1f;
z-index: 200;
}
.theader_main {
display: flex;
justify-content: space-between;
}
.theader_main img, .theader_main, .theader_left, .theader_right {
height: 100%;
}
.theader_left {
margin-left: 20px;
}
.theader_right {
display: flex;
align-items: center;
margin-right: 20px;
}
.theader_right a {
color: white;
margin-right: 20px;
}
.theader.fixed {
position: fixed;
top: 0;
left: 0;
background-color: white;
z-index: 210;
}
.theader.fixed.stopper {
top: -70px;
}
.theader.fixed.stopper.solid {
top: 0px;
}
.theader.fixed .theader_right a {
color: rgb(29, 29, 29);
}
/*
FOOTER
*/
.footer {
background-color: var(--color-two);
}
.footer_main {
padding: 20px;
max-width: var(--init-width);
margin: auto;
}
.footer h3 {
color: white;
text-align: left;
font-size: 55px!important;
}
.footer a {
font-family: "acier-bat-solid", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 30px;
color: white;
display: block;
}
.footer_item hr {
width: 57px;
border-style: solid;
border-width: 2px;
}
.footer_item {
padding: 20px;
width: 278px
}
.links {
margin-top: 20px;
}
.footer_main_bottom {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer p,
.footer a,
.footer h3,
.footer hr {
text-align: left;
color: white;
margin: 0;
}
.footer2 {
background-color: #dea63d;
}
.footer2_main {
max-width: var(--init-width);
padding: 0 10px;
margin: auto;
}
.footer2 h3 {
color: white;
text-align: left;
font-size: 55px!important;
}
/*
INDEX
*/
/*topper*/
.index_topper {
min-height: 100vh;
background-color: var(--color-two);
}
.topper_main {
display: flex;
align-items: center;
}
.topper_item_img {
width: 50%;
height: 100vh;
}
.topper_item_text {
padding: 40px;
max-width: 611px;
z-index: 100;
}
@media screen and (max-width: 890px) {
.topper_item_text {
padding: 20px;
}
}
@media screen and (max-width: 774px) {
.topper_main {
display: flex;
align-items: center;
flex-direction: column;
}
.topper_item_img {
margin-bottom: -124px;
height: 50vh;
width: 100%;
}
.topper_item_text {
background-color: var(--color-two);
width: 100%;
margin-bottom: var(--margin01);
}
.index_topper {
min-height: auto;
}
.header_text p {
color: var(--color-two);
}
}
@media screen and (max-width: 690px) {
.topper_item_text {
width: 76%;
}
}
@media screen and (max-width: 433px) {
.topper_item_text {
width: 100%;
background-color: #ffc557de;
}
}
.topper_upper {
width: 50%;
height: 100vh;
background-color: #ffc557;
display: flex;
align-items: center;
}
/*text*/
.index_text {
margin-top: var(--margin01);
margin-bottom: var(--margin01);
margin-left: 20px;
margin-right: 20px;
}
.text_main {
background-color: white;
max-width: var(--init-width);
margin: auto;
display: flex;
margin-top: 20px;
}
.text_item_text {
width: 50%;
padding: var(--init-padding);
}
.text_item_img {
width: 50%;
height: auto;
}
@media screen and (max-width: 720px) {
.text_main_02 {
display: flex;
flex-direction: column;
}
.text_main_02 .text_item_text {
width: 100%;
padding: var(--init-padding);
}
.text_main_02 .text_item_img {
width: 100%;
height: 300px;
}
}
@media screen and (max-width: 520px) {
.text_main {
display: flex;
flex-direction: column-reverse;
}
.text_item_text {
width: 100%;
padding: var(--init-padding);
}
.text_item_img {
width: 100%;
height: 300px;
}
.text_main_02 {
display: flex;
flex-direction: column;
}
}
@media screen and (max-width: 288px) {
.text_item_img {
width: 100%;
height: 147px!important;
}
}
/*leistungen*/
.index_leistungen {
}
.leistungen_main {
margin: auto;
padding: var(--init-padding);
padding-right: 0;
}
.leistungen_text {
margin-top: var(--init-padding);
display: flex;
}
.leistungen_text_list {
width: 50%;
height: 500px;
}
.leistungen_item_01 {
width: 100%;
height: 40%;
}
.leistungen_item_02 {
width: 100%;
height: 55%;
margin-top: var(--init-padding);
}
.leistungen_item_03 {
width: 100%;
height: 50%;
}
.leistungen_item_04 {
width: 100%;
height: 45%;
margin-top: var(--init-padding);
}
.leistungen_list_02 {
margin-left: var(--init-padding);
}
.shadow {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.shadow:hover {
background-color: rgba(255, 195, 29, 0.377);
}
.leistungen_text * {
overflow: hidden;
}
.swiper_img {
height: 350px;
width: 55%;
}
.swiper_content {
background-color: white;
width: 55%;
margin-left: auto;
padding: 40px;
margin-top: -200px;
box-shadow: 0 0 20px 0px #80808094;
}
.swiper-slide {
max-width: var(--init-width);
}
.swiper-wrapper {
height: auto!important;
}
.home {
width: 100%;
}
.index_warum_mial {
padding: var(--init-padding);
}
@media screen and (max-width: 500px) {
.leistungen_text {
margin-top: var(--init-padding);
display: flex;
flex-direction: column;
}
.leistungen_text_list {
width: 100%;
height: 356px!important;
}
.leistungen_item_01 {
width: 100%;
height: 40%;
}
h3.item-h3 {
font-size: 8vw!important;
}
p.kleiner {
font-size: 5vw!important;
}
.leistungen_list_02 {
margin-left: 0;
}
.leistungen_list_02 {
margin-top: var(--init-padding);
}
}
/*angebot*/
.index_angebot {
margin-top: var(--margin01);
background: white;
padding: calc(var(--init-padding) * 0.5);
border: var(--color-two) 10px solid;
}
.angebot_main {
max-width: var(--init-width);
margin: auto;
padding: calc(var(--init-padding) * 0.5);
}
.angebot_flex {
display: flex;
margin-top: var(--margin01);
}
.angebot_item {
width: 50%;
}
.angebot_item_text {
margin: var(--init-padding);
}
@media screen and (max-width: 420px) {
.angebot_flex {
display: flex;
margin-top: var(--margin01);
flex-direction: column-reverse;
}
.angebot_item {
width: 100%;
}
.angebot_item_img {
height: 135px;
}
.angebot_item_text {
margin: 0;
margin-top: var(--margin01);
}
.aflex01 {
flex-direction: column!important;
}
}
/*Ueber*/
.ueber_main {
max-width: var(--init-width);
padding: var(--init-padding);
margin: auto;
}
.ueber_flex {
display: flex;
background-color: white;
}
.ueber_item {
width: 50%;
}
@media screen and (max-width: 555px) {
.ueber_item {
width: auto;
}
.ueber_item_img {
height: 300px;
margin: var(--init-padding);
margin-bottom: 0;
}
.ueber_flex {
display: flex;
background-color: white;
flex-direction: column;
}
.ueber_flex_02 {
flex-direction: column-reverse;
}
.ueber_flex_02 .ueber_item_img {
margin-top: 0;
}
}
/*Blick Main*/
.index_blick {
padding: var(--init-padding);
}
.vis {
display: block!important;
}
.blick_main {
max-width: var(--init-width);
margin: auto;
padding: 30px;
background-color: white;
}
.blick_main p {
text-align: center;
}
.blick_top.solid {
transform: translateX(0px);
}
.blick_top {
position: fixed;
top: 0;
z-index: 9999;
background: white;
height: 100vh;
width: 100vw;
overflow: auto;
padding: 40px;
padding-top: 0;
transform: translateX(-100vw);
}
.blick_top_title {
padding-top: 20px;
position: sticky;
top: 0;
z-index: 100;
background: white;
padding-bottom: 30px;
}
/*Portfolio Main*/
.index_portfolio {
padding: var(--init-padding);
margin-bottom: 30px;
}
.portfolio_ref {
display: flex;
}
.portfolio_ref_item {
margin: 50px 0;
}
.portfolio_main {
max-width: var(--init-width);
margin: auto;
padding-top: 0;
}
.portfolio_ref_item_img {
height: 200px;
width: 210px;
}
.portfolio_ref_item_content {
background-color: white;
width: calc(100% - 50px);
margin-left: auto;
margin-top: -40px;
}
.portfolio_ref_item_content_topper {
padding: 10px;
background-color: var(--color-two);
}
.portfolio_ref_item_content_topper p {
font-size: 15px;
color: white;
}
.portfolio_ref_item_content_bottom {
padding: 20px;
}
/*Warum Mial*/
.text_main h3 {
font-size: 40px;
text-align: left;
margin-bottom: 10px;
}
/*kontakt*/
.kontakt_main {
max-width: var(--init-width);
margin: auto;
padding: calc(var(--init-padding) * 1.5);
background-color: white;
margin-bottom: 40px;
}
form input {
width: 100%;
border: 0;
background: white;
font-family: 'bc-alphapipe';
padding: 10px;
font-size: 17px;
margin-bottom: 20px;
margin-top: 2px;
outline: none;
border: 1px solid rgba(255, 185, 56, 0.39);
border-radius: 3px;
background-color: #fffcf8;
}
form textarea {
width: 100%;
border: 0;
background: white;
font-family: 'bc-alphapipe';
padding: 10px;
font-size: 17px;
margin-top: 10px;
border: 1px solid rgba(255, 185, 56, 0.39);
border-radius: 3px;
background-color: #fffcf8;
}
form button {
width: 100%;
border: 0;
font-family: 'bc-alphapipe';
padding: 20px;
font-size: 17px;
margin-top: 10px;
margin-bottom: 45px;
width: fit-content;
padding: 5px 10px;
border: 2px solid var(--color-two);
cursor: pointer;
color: var(--color-two);
background-color: transparent;
border-radius: 3px;
margin-top: 20px;
}
form button:hover {
color: white;
background: var(--color-two);
}
.index_kontakt {
padding: var(--init-padding);
}
.index_kontakt p {
font-size: 18px;
color: rgb(32, 32, 32);
}
/*
DASH
*/
/*Navbar*/
.dash_main hr {
margin-bottom: 20px;
margin-top: 20px;
width: 100%;
border-style: solid;
border-width: 0.5px;
color: gray;
}
.dash_header {
position: fixed;
background-color: white;
z-index: 10;
box-shadow: #0000007d 0px -1px 7px;
width: 100%;
height: 50px;
}
.dash_header_main {
margin: 10px;
}
.dash_content_main {
width: 100%;
margin-top: 50px;
}
.dash_columanders {
padding: 10px;
border: #dea63d 2px solid;
margin: 10px 0;
}
.dash_columanders .dash_a{
display: unset;
margin-right: 20px;
margin-top: 20px;
}
.dash_columanders_links {
margin: 10px 0;
}
.dash_columanders hr {
margin: 0;
margin-bottom: 10px;
}
.dash_header_main a:hover {
cursor: pointer;
}
.zero {
width: 0!important;
}
.zero .dash_sidebar_main_link {
display: none;
}
/*Sidebar*/
.dash_sidebar {
height: 100vh;
width: 350px;
background-color: white;
box-shadow: #0000007d 0px -1px 7px;
z-index: 20;
overflow-y: auto;
}
.full {
width: 100%!important;
}
.dash_sidebar a, .dash_sidebar details {
display: block;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #f2f2f2;
font-size: 18px;
color: gray;
font-family: "bc-alphapipe", sans-serif;
font-weight: 400;
font-style: normal;
text-decoration: none;
word-wrap: break-word;
hyphens: auto;
}
.dash_sidebar a:hover, .dash_sidebar summary:hover {
text-decoration: underline;
}
.dash_sidebar_main {
margin-left: 20px;
margin-right: 20px;
}
.dash_sidebar_main_logo {
margin-top: 30px;
margin-bottom: 30px;
}
.dash_sidebar_main_logo img {
width: 100%;
}
.dash_sidebar details {
cursor: pointer;
}
.dash_sidebar details a {margin-left: 10px;} .dash_sidebar details details {margin-left: 10px;} .dash_sidebar details details a {margin-left: 15px;} .dash_sidebar details details details {margin-left: 15px;} .dash_sidebar details details details a {margin-left: 20px;} .dash_sidebar details details details details {margin-left: 20px;} .dash_sidebar details details details details a {margin-left: 25px;} .dash_sidebar details details details details details {margin-left: 25px;} .dash_sidebar details details details details details a {margin-left: 30px;} .dash_sidebar details details details details details details {margin-left: 30px;}
/*content*/
.dash_main {
display: flex;
background-color: var(--color-one);
}
.dash_content {
width: 100%;
height: 100vh;
overflow: auto;
}
.dash_row {
display: flex;
}
.dash_item {
margin: 10px;
background-color: white;
padding: 20px;
}
.dash_item_colum {
display: flex;
}
.dash_item_colum_item {
display: flex;
margin: 10px;
}
.dash_main img {
width: 100%;
}
.dash_color_white {color: white!important;}
.dash_color_gray {color: var(--color-one)!important;}
.dash_color_orange {color: var(--color-two)!important;}
.dash_color_black {color: black!important;}
.dash_backc_white {background-color: white!important;}
.dash_backc_orange {background-color: var(--color-two)!important;}
.dash_backc_gray {background-color: var(--color-one)!important;}
.dash_backc_black {background-color: black!important;}
.dash_align_center {text-align: center!important;}
.dash_align_left {text-align: left!important;}
.dash_align_right {text-align: right!important;}
.dash_p {font-size: 30px!important;}
.dash_a {font-size: 20px!important; color: var(--color-two); cursor: pointer; display: table;}
.dash_btn {font-size: 20px!important; cursor: pointer; color: white; background-color: var(--color-two); display: table; padding: 5px 20px 5px 20px;}
.dash_title {font-size: 35px!important; color:var(--color-two);}
.dash_small {font-size: 20px!important;}
.dash_uebertitle {font-size: 40px!important; color: var(--color-two)!important;}
/*
baukast
*/
.baukast_vergl {
display: flex;
margin-top: 40px;
}
.baukast_vergl_item {
width: 33%;
margin:20px
}
.baukast_bsp {
margin-bottom: 20px;
margin-top: 20px;
}
.baukast_vergl_item img {
width: 100%
}
.baukast_vergl_item hr {
width: 100%;
border-style: solid;
border-width: 0.5px;
color: gray;
}
.baukast_vergl_item * {
color: rgb(90, 90, 90);
}
.baukast_vergl_item i {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
font-size: 60px;
margin: auto;
}
.baukast_fa {
text-align: center;
}
/*
produkte
*/
.produkte_item {
display: flex;
margin-top: 50px;
}
.produkte_field_row {
display: flex;
}
.produkte_select {
width: 100%;
margin-top: 20px;
border: 2px solid rgb(90, 90, 90);
}
.produkte_select:hover {
cursor: pointer;
border: 2px solid rgb(0, 0, 0);
}
.produkte_select:active {
border: 2px solid var(--color-two);
}
.produkte_select_50 {
width: 50%;
position: relative;
}
.produkte_select input {
height: 50px;
appearance: unset;
}
.produkte_select_item {
position: absolute;
margin-top: -45px;
margin-left: 10px;
}
.pr_50_left {
margin-right: 20px;
}
.produkte_item_content {
width: 50%;
}
.prod_content_produktvor {
margin-left: 40px;
}
.produkte_item_content_sticky img {
width: 100%;
}
.produkte_item_content_sticky {
position: sticky;
top: 100px;
}
Kontakt
Mial Webentwicklung Salzburg - Internetagentur für die Erstellung von Webseiten, Webshops & Co.
Kontakt
GFS 18 GmbH
Getreidegasse 2,
5020 Salzburg,
Austria.
office@mial.at