um das Thema Coming Soon Page jetzt einmal abzuschließen, habe ich den alten Thread "gelöscht" und bin gerade dabei jetzt hier einen neuen zu erstellen. Nach dem ersten Thread, womit die meisten nicht zufrieden waren, dachte ich mir, dass ich die Idee der Coming Soon Page behalte, aber nach den lange gesuchten Tipps entwickle. Mithilfe eurer Tipps und noch anderen Tipps von Freunden, habe ich am Wochenende etwas neues entwickelt. Da ich zurzeit noch nichts hochladen möchte, zeige ich euch wieder Bilder und den Code natürlich. Ich weiß, ihr würdet das ganze leiber "live" sehen, aber naja.
Das Konzept ist recht einfach. Wenn die Seite geladen ist, schieben sich zwei Holzwände voneinander weg und es erscheint eine Art Himmel mit einer Aufschrift. Im unteren Teil der Seite kann man einen Newsletter abbonieren. Die Funktion dessen hat hier ersteinmal nichts zu suchen, es geht ausschließlich um das Design.
Soooo, hier ist einmal ein Bild der kompletten Seite, wenn die Holzwände noch "zu" sind:
Nach ungefähr 6 Sekunden (man sieht schon vorher Yamram Coming soon...), sind die Holzwände dann links und rechts:
Und hier ist nocheinmal Bild:
Der Text hat eine Kontur
Etwas ganz gutes hierdran ist, dass ich keine Icons von irgendwelchen Designern benutzt habe, sondern nur Gimp und meinen Kopf
Nun kommen wir zum Code. Hier einmal die CSS:
- Code: Alles auswählen
body {
margin: 0px;
width: 100%;
height: 100%;
background: url(bge.png) center center no-repeat #1c74aa;
min-width: 800px;
min-height: 420px;
}
#newsletter {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #eeeeee;
padding: 10px;
border-top: 1px solid #aaaaaa;
box-shadow: 0px -2px 10px #3e3e3e;
}
p {
font-family: tahoma;
text-align: center;
}
p span {
color: #1f7fbb;
}
p a {
padding: 5px;
background: url(navi.png);
border: 1px solid silver;
border-radius: 10px;
color: #3e3e3e;
text-decoration: none;
}
input {
padding: 2px 5px 5px 5px;
background: url(navi.png);
border: 1px solid silver;
border-radius: 10px;
color: #3e3e3e;
font-size: 18px;
text-decoration: none;
height: 39px;
}
input:hover {
background: url(navi_hover.png);
}
input:focus {
color: #1f7fbb;
}
@-moz-keyframes MoveWindowLeft {
from {left: 0;}
to {left: -40%;}
}
@-moz-keyframes MoveWindowRight {
from {right: 0;}
to {right: -40%;}
}
div#windowleft {
-moz-animation: MoveWindowLeft 6s ease 0s 1;
height: 100%;
background: url(bgvorhang.png) right center;
position: fixed;
left: -40%;
width: 49%;
box-shadow: 2px 0px 20px #3e3e3e;
}
div#windowright {
-moz-animation: MoveWindowRight 6s ease 0s 1;
height: 100%;
background: url(bgvorhang.png) left bottom;
position: fixed;
right: -40%;
width: 49%;
box-shadow: -2px 0px 20px #3e3e3e;
}
Jetzt kommt der HTML-Code entsprechend zensiert (ihr dürft es sehen, aber es ist unnötig)
- Code: Alles auswählen
<body>
<div id="windowleft"></div>
<div id="windowright"></div>
<div id="newsletter">
<form method="post" action="newsletter.php">
<p>
Wanna get all <span>infos</span> about the <span>progesses</span> and the <span>development</span>? Just order the <span>email newsetter</span> <input type="text" value="your email adress" name="email" /> <input type="submit" name="submit" value="order" />
</p>
</form>
</div>
</body>
ACHTUNG: Ich habe das bisjetzt nur für FF optimiert. Den Rest mache ich am Ende.
So, jetzt würde ich gern von euch Meinungen hören zu:
- Design
- Codesauberkeit (nur bei CSS, da ihr den HTML Code ja nicht ganz habt)
- Umsetzung (Geht es leichter?)
- Sontiges (...)
MfG
Philipp
)
Was muss ich eigentlich als Meta-Informationen schreiben? Meiner Meinung nach sollte folgendes darein:
