Hallo lieber Forum-User,
Die ein oder anderen haben schon das Design gesehen, das ich angefertig habe.
Nun bin ich dabei es zu coden, allerdings komme ich langsam an meine grenzen und
hatte bis hier hin auch ein bisschen Hilfe.
Jetztiger Stand:
HTML: index.html
<!DOCTYPE html>
<html lang="de">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>NTenic</title>
</head>
<body>
<div class="bg"></div>
<div class="social">
<a href="https://www.youtube.com/channel/UCW4xxu9M-qheIRq-LC18vxQ"><div class="social_icon youtube"></div></a>
<a href="https://www.facebook.com/NTenicOfficial/"><div class="social_icon facebook"></div></a>
<a href="http://twitter.com/NTenicOfficial"><div class="social_icon twitter"></div></a>
<a href="https://plus.google.com/u/0/100344514931504540889"><div class="social_icon google"></div></a>
</div>
<div class="main_logo"></div>
<div class="tiles">
<div class="tile Server"><div class="tileL_child Server"></div></div>
<div class="tile Blog"><div class="tileL_child Blog"></div></div>
<div class="tile Forum"><div class="tileR_child Forum"></div></div>
<div class="tile Shop"><div class="tileR_child Shop"></div></div>
</div>
</body>
</html>CSS: style
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.bg {
height: 100%;
width: 100%;
position: absolute;
background-image: url(Bilder/bg.jpg);
background-size: cover;
z-index: -1;
}
.social_icon {
height: 100px;
width: 100px;
background-size: contain;
background-repeat: no-repeat;
margin-top: -10px;
transition: all 0.3s;
}
.social_icon:hover {
margin-top: 0;
transition: all 0.3s;
}
.youtube {
background-image: url(Bilder/yt.png);
float: left;
margin-left: 100px;
}
.facebook {
background-image: url(Bilder/fb.png);
float: left;
margin-left: 20px
}
.twitter {
background-image: url(Bilder/tw.png);
float: right;
margin-right: 100px;
}
.google {
background-image: url(Bilder/g+.png);
float: right;
margin-right: 20px;
}
.main_logo {
width: 280px;
height: 280px;
margin: auto;
background-image: url(Bilder/logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
padding-top: 40px;
}
.tile {
width: 25%;
height: 590px;
float: left;
}
.tileL_child {
width: 100%;
height: 100%;
background-size: cover;
}
.tileR_child {
width: 100%;
height: 100%;
background-size: cover;
}
.Server {
margin-top: -60px;
background-image: url(Bilder/server.png);
}
.Blog {
margin-top: -60px;
background-image: url(Bilder/blog.png);
}
.Forum {
margin-top: -60px;
background-image: url(Bilder/forum.png);
}
.Shop {
margin-top: -60px;
background-image: url(Bilder/shop.png);
}Und so sieht es momentan aus:
MfG Hadrev