Nachtrag (mit eigenen Ideen):
Anmerkung: Ich habe für einige Darstellungen das Bootstrap-Framework verwendet.
<!--
Developer: Bleatzer
Project: MTA-SA.ORG ENTERPAGE
-->
<!DOCTYPE html>
<html>
<head>
<title>Deine Enterpage</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.7);
}
.content h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #aaa;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.Karzim {
display: block;
position: relative;
font-family: Arial;
width: 200px;
padding: 20px 0;
margin: 200px auto;
color: #000;
font-size: 14px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
border-radius: 10px;
border: 1px solid #000;
}
.tooltip {
display: block;
position: absolute;
left: 0;
bottom: 120%;
width: 190px;
padding: 5px;
border-radius: 10px;
background-color: #09f;
color: #fff;
line-height: normal;
text-transform: none;
font-size: 12px;
opacity: 0;
transform: scaleY(0);
transition: all 0.2s ease;
}
.Karzim2:after {
position: absolute;
content: '';
left: 10px;
bottom: -5px;
width: 0;
height: 0;
border-top: 5px solid #09f;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.info:hover .Karzim2 {
opacity: 1;
transform: scaleY(1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var Karzim = $('.Karzim');
Karzim.each(function() {
var self = $(this),
Karzim3 = self.data('Karzim2-text');
if ( Karzim3 ) $('<span/>', {class: 'Karzim2', text: Karzim3}).appendTo(self);
});
})();
</script>
</head>
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop">
<source src="video.mp4" type="video/mp4">
</video>
</div>
<div class="content">
<br>
<br>
<br>
<br>
<center><img src="logo.png" /></center>
<p>Dein Slogan!</p>
<br>
<br>
<br>
<div class="header">
</div>
<div class="container">
<center>
<div class="row">
<div class="col-md-4 text-center">
<div class="penta">
<a href="mtasa://IPEINTRAGEN?port=22003"><img src="server.png" alt="MTA-Server"></a>
</div>
</div>
<div class="col-md-4 text-center">
<div class="penta">
<a href="ts3server://IPEINTRAGEN?port=PORTEINTRAGEN"><img src="ts.png" alt="TS3-Server"></a>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
</body>
</html>
Alles anzeigen
/*
Developer: BleatzerH
Project: MTA-SA.ORG Enterpage
*/
h2{
font-size:34px;
font-family: 'Montserrat', sans-serif;
font-weight:700;
letter-spacing: -1px;
margin:0 0 15px 0;
text-align:center;
text-transform:uppercase;
}
body {
background-image: url('../bg.png');
background-repeat: no-repeat;
}
.header {
margin-top: 2%;
margin-bottom: 2%;
}
.header .headerImage {
text-align: center;
}
.header .headerImage img {
-webkit-transition: 1s;
transition: 1s;
}
.header .headerImage img:hover {
opacity: 0.6;
cursor: pointer;
}
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
.penta {
margin: 0 auto;
background-repeat: no-repeat;
height: 290px;
width: 331px;
}
.penta img {
margin-top: 20px;
width: 289px;
height: 250px;
-webkit-transition: 1s;
transition: 1s;
}
.penta img:hover {
margin-top: 30px;
width: 266px;
height: 230px;
}
Alles anzeigen
Folgende Sachen müssen zusätzlich noch hinzugefügt werden (am besten du verwendest deine eigenen Bilder und Icons):
- logo.png
- bg.png (kann anstatt video.mp4 verwendet werden)
- ts3.png
- server.png
- video.mp4 (optional)
Informationen zur video.mp4:
Das Video wird im Hintergrund abgespielt. Sollte die Datei nicht vorhanden sein, so erscheint einfach ein schwarzer Hintergrund.
Download: http://www.file-upload.net/download-10984…_Kazim.zip.html
