Semikolon/Technikholger
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new design

Browse Source
This commit is contained in:
Jan-Lukas Pagel 2023-03-22 17:31:40 +01:00
parent 5ca968f389
commit 2d44012108
4 changed files with 96 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.gitignore vendored Normal file
View 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

26
index.html
View File

@ -16,7 +16,6 @@
</head> </head>
<body> <body>
<div id="header"> <div id="header">
<h1>Technikholger.de - Dein IT Dienstleister deines Vertrauens</h1> <h1>Technikholger.de - Dein IT Dienstleister deines Vertrauens</h1>
<div id="navbar"> <div id="navbar">
@ -25,7 +24,7 @@
<p>Startseite</p> <p>Startseite</p>
</div> </div>
</a> </a>
<a id="element"> <a id="element" href="#">
<div > <div >
<p>Mein Konto</p> <p>Mein Konto</p>
</div> </div>
@ -38,8 +37,8 @@
</div> </div>
</div> </div>
<div> <div id="products">
<div> <div id="cloud">
<h2> <h2>
Wir bieten Ihnen professionelle Clouddienste als Software as a Service (SaaS) an. Wir bieten Ihnen professionelle Clouddienste als Software as a Service (SaaS) an.
</h2> </h2>
@ -55,15 +54,19 @@
noch erfolgreicher zu machen. noch erfolgreicher zu machen.
</p> </p>
<h2>SaaS Produkte</h2>
<ul> <ul>
<li>Drive (Cloudspeicher auf Nextcloud basis.)</li> <li>Drive (Cloudspeicher auf Nextcloud basis.)</li>
<li>Passwortmanager (Bitwarden)</li> <li>Passwortmanager (Bitwarden)</li>
</ul> </ul>
</div>
<div id="webspace">
<h2> <h2>
Wir bieten Ihnen Webspace inkl. Top-Level - Domains an. Wir bieten Ihnen Webspace inkl. Top-Level - Domains an.
</h2> </h2>
<p> <p>
Willkommen in der Welt des Webhostings! Bei uns erhalten Sie alles, was Sie brauchen, um Ihre Website online Willkommen in der Welt des Webhostings! Bei uns erhalten Sie alles, was Sie brauchen, um Ihre Website online
zu bringen und erfolgreich zu machen. zu bringen und erfolgreich zu machen.
@ -75,10 +78,6 @@
erstklassige Infrastruktur erstklassige Infrastruktur
und unseren kompetenten Support und starten Sie heute noch Ihre Online-Präsenz. und unseren kompetenten Support und starten Sie heute noch Ihre Online-Präsenz.
</p> </p>
</div>
<div>
<h2>Webspace-Pakete</h2> <h2>Webspace-Pakete</h2>
<h3>Basic-Paket:</h3> <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> <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">
<div>
<h2> <h2>
Wir bieten ihnen Serverhosting (KVM-Server auf Linux und Gameserver) Wir bieten ihnen Serverhosting (KVM-Server auf Linux und Gameserver)
</h2> </h2>
@ -154,10 +152,12 @@
<p>Die Gameserverpakete bietet Ihnen flexible und Leistungsstrake Gaming-Performance mit verschiedenen Slot-, RAM- und Speicher-Konfigurationen</p> <p>Die Gameserverpakete bietet Ihnen flexible und Leistungsstrake Gaming-Performance mit verschiedenen Slot-, RAM- und Speicher-Konfigurationen</p>
</div> </div>
</div> </div>
<div id="help-div"> <div id="help-div">
<div class="l-quote quote">
<p>Sie haben ein Problem?<br> Fragen Sie Holger!</p>
</div>
<button id="help"> <button id="help">
<span class="material-symbols-outlined"> <span class="material-symbols-outlined">
chat chat

68
main.css
View File

@ -2,20 +2,32 @@
html, body { html, body {
height: 100%; height: 100%;
padding: 0;
margin: 0;
}
a, a:visited, a:hover, a:active {
color: inherit;
text-decoration: none;
} }
h1 { h1 {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
margin: 0; margin: 0;
color: #000;
} }
#header { #header {
background-color: #03a9f4;
padding: 20px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
margin-bottom: 20px; margin-bottom: 20px;
flex-wrap: wrap; flex-wrap: wrap;
border-top: 20px solid #1769aa;
} }
#navbar { #navbar {
@ -23,16 +35,64 @@ h1 {
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
} }
#navbar #element { #navbar #element {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
margin-right: 10px; margin-right: 10px;
background-color: lightgray; background-color: #1de9b6;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px 5px 10px; 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 { #help-div {
z-index: 10; z-index: 10;
position: fixed; position: fixed;
@ -42,13 +102,13 @@ h1 {
#help { #help {
margin-bottom: 10px; margin-bottom: 10px;
background-color: aqua; background-color: #1de9b6;
border-radius: 100%; border-radius: 100%;
width: 60px; width: 60px;
height: 60px; height: 60px;
text-align: center; float: right;
} }
#help .material-symbols-outlined { #help .material-symbols-outlined {
font-size: 40px; font-size: 40px;
} }

8
script.js
View File

@ -3,7 +3,11 @@ $('#chatbot').dialog({
autoOpen: false, autoOpen: false,
height: 500, height: 500,
width: 450, 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();
} );