new design
This commit is contained in:
parent
5ca968f389
commit
2d44012108
13
.gitignore
vendored
Normal file
13
.gitignore
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
24
index.html
24
index.html
@ -16,7 +16,6 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<h1>Technikholger.de - Dein IT Dienstleister deines Vertrauens</h1>
|
||||
<div id="navbar">
|
||||
@ -25,7 +24,7 @@
|
||||
<p>Startseite</p>
|
||||
</div>
|
||||
</a>
|
||||
<a id="element">
|
||||
<a id="element" href="#">
|
||||
<div >
|
||||
<p>Mein Konto</p>
|
||||
</div>
|
||||
@ -38,8 +37,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div id="products">
|
||||
<div id="cloud">
|
||||
<h2>
|
||||
Wir bieten Ihnen professionelle Clouddienste als Software as a Service (SaaS) an.
|
||||
</h2>
|
||||
@ -55,15 +54,19 @@
|
||||
noch erfolgreicher zu machen.
|
||||
</p>
|
||||
|
||||
<h2>SaaS Produkte</h2>
|
||||
|
||||
<ul>
|
||||
<li>Drive (Cloudspeicher auf Nextcloud basis.)</li>
|
||||
<li>Passwortmanager (Bitwarden)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="webspace">
|
||||
<h2>
|
||||
Wir bieten Ihnen Webspace inkl. Top-Level - Domains an.
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
Willkommen in der Welt des Webhostings! Bei uns erhalten Sie alles, was Sie brauchen, um Ihre Website online
|
||||
zu bringen und erfolgreich zu machen.
|
||||
@ -75,10 +78,6 @@
|
||||
erstklassige Infrastruktur
|
||||
und unseren kompetenten Support und starten Sie heute noch Ihre Online-Präsenz.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<h2>Webspace-Pakete</h2>
|
||||
|
||||
<h3>Basic-Paket:</h3>
|
||||
@ -118,8 +117,7 @@
|
||||
<p>Das Pro-Paket bietet Ihnen alles, was Sie brauchen, um eine professionelle Website mit unbegrenztem Webspace, unbegrenztem Traffic und mehreren Email-Adressen zu betreiben.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<div id="server">
|
||||
<h2>
|
||||
Wir bieten ihnen Serverhosting (KVM-Server auf Linux und Gameserver)
|
||||
</h2>
|
||||
@ -154,10 +152,12 @@
|
||||
|
||||
<p>Die Gameserverpakete bietet Ihnen flexible und Leistungsstrake Gaming-Performance mit verschiedenen Slot-, RAM- und Speicher-Konfigurationen</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="help-div">
|
||||
<div class="l-quote quote">
|
||||
<p>Sie haben ein Problem?<br> Fragen Sie Holger!</p>
|
||||
</div>
|
||||
<button id="help">
|
||||
<span class="material-symbols-outlined">
|
||||
chat
|
||||
|
||||
66
main.css
66
main.css
@ -2,20 +2,32 @@
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a, a:visited, a:hover, a:active {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
|
||||
}
|
||||
|
||||
#header {
|
||||
background-color: #03a9f4;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
border-top: 20px solid #1769aa;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
@ -23,16 +35,64 @@ h1 {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
|
||||
#navbar #element {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin-right: 10px;
|
||||
background-color: lightgray;
|
||||
background-color: #1de9b6;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px 5px 10px;
|
||||
}
|
||||
|
||||
#navbar p {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#products {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 686px) {
|
||||
#products {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
#cloud, #server, #webspace {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
background-color: #03a9f4;
|
||||
border-radius: 20px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.l-quote {
|
||||
position: relative;
|
||||
width: auto;
|
||||
padding: 15px 25px 20px;
|
||||
margin: 20px auto;
|
||||
color: #000;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #1de9b6;
|
||||
opacity: .9;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.quote:after {
|
||||
@include transform(skewX(-15deg));
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 25px;
|
||||
border-width: 30px 30px 0 0;
|
||||
border-style: solid;
|
||||
border-color: #1de9b6 transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#help-div {
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
@ -42,11 +102,11 @@ h1 {
|
||||
|
||||
#help {
|
||||
margin-bottom: 10px;
|
||||
background-color: aqua;
|
||||
background-color: #1de9b6;
|
||||
border-radius: 100%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#help .material-symbols-outlined {
|
||||
|
||||
@ -3,7 +3,11 @@ $('#chatbot').dialog({
|
||||
autoOpen: false,
|
||||
height: 500,
|
||||
width: 450,
|
||||
positon: {my: 'center top'}
|
||||
position: {my: 'right bottom', at: 'right-5 bottom-5', of: 'body'},
|
||||
close: () => { $('#help-div').show();}
|
||||
});
|
||||
|
||||
$('#help').click(() => $('#chatbot').dialog('open'));
|
||||
$('#help').click(() => {
|
||||
$('#chatbot').dialog('open')
|
||||
$('#help-div').hide();
|
||||
} );
|
||||
Loading…
x
Reference in New Issue
Block a user