Debut du dev 0.4
2
.gitignore
vendored
Normal file
|
@ -0,0 +1,2 @@
|
|||
/postfix
|
||||
/data
|
68
conf.php
|
@ -3,50 +3,74 @@
|
|||
//-----------------------------------------------------------
|
||||
// emailPoubelle config
|
||||
// Licence : GNU GPL v3 : http://www.gnu.org/licenses/gpl.html
|
||||
// Créateur : David Mercereau - david [.] mercereau [aro] zici [.] fr
|
||||
// Créateur : David Mercereau - david [aro] mercereau [.] info
|
||||
// Home : http://poubelle.zici.fr
|
||||
//-----------------------------------------------------------
|
||||
|
||||
error_reporting(0);
|
||||
//error_reporting(0);
|
||||
define('DEBUG', true);
|
||||
|
||||
|
||||
|
||||
define('VERSION', '0.3');
|
||||
|
||||
// Domaine email
|
||||
define('DOMAIN', 'zici.fr');
|
||||
|
||||
// Serveur DNS pour la résolution/vérification du nom de domaine
|
||||
define('NS1', 'ns1.fdn.org');
|
||||
define('NS2', '8.8.8.8');
|
||||
// Deux options :
|
||||
// PLAIN : plaintext, pas de base, simple mais des fonctionnalités en moins
|
||||
// DB : pdo usage
|
||||
define('BACKEND', 'DB');
|
||||
|
||||
define('DEBUG', false);
|
||||
if (BACKEND == 'DB') {
|
||||
// PDO stucture
|
||||
// Exemple pour MYSQL :
|
||||
// define('DB', 'mysql:host=127.0.0.1;dbname=baseMysql');
|
||||
// define('DBUSER', 'utilisateurMysql');
|
||||
// define('DBPASS', 'motdepassedefou');
|
||||
// Exemple pour Sqlite :
|
||||
// define('DB', 'sqlite:./data/emailPoubelle.sqlite');
|
||||
define('DB', 'mysql:host=localhost;dbname=c1_demo');
|
||||
#define('DB', 'sqlite:./database.sdb');
|
||||
define('DBUSER', 'c1_demo');
|
||||
define('DBPASS', 'sqdf2csd4rvn45548');
|
||||
}
|
||||
|
||||
// Fichier d'alias postfix
|
||||
define('FICHIERALIAS', './emailPoubelle/postfix/virtual');
|
||||
define('FICHIERALIAS', './data/virtual');
|
||||
define('BIN_POSTMAP', '/usr/sbin/postmap');
|
||||
|
||||
define('URLPAGE', 'http://www.zici.fr/emailPoubelle.html');
|
||||
define('URLPAGE', 'http://'.$_SERVER["SERVER_NAME"].'/'.$_SERVER["REQUEST_URI"]);
|
||||
|
||||
// A indiquer si vous utiliser les URL's rewriting
|
||||
// Exemple avec un htaccess
|
||||
// RewriteRule ^EmailPoubell-([0-9]+)\.html$ index.php?page=emailPoubelle&Validemail=$1 [L]
|
||||
define('URLREWRITE_DEBUT', 'http://www.zici.fr/EmailPoubell-');
|
||||
define('URLREWRITE_FIN', '.html');
|
||||
// Désactiver
|
||||
# define('URLREWRITE_DEBUT', false);
|
||||
# define('URLREWRITE_FIN', false);
|
||||
// RewriteRule ^EmailPoubell-([0-9]+)\.html$ folder/emailPoubelle.php?&Validemail=$1 [L]
|
||||
//define('URLREWRITE_DEBUT', 'http://www.zici.fr/EmailPoubell-');
|
||||
//define('URLREWRITE_FIN', '.html');
|
||||
// Désactiver
|
||||
define('URLREWRITE_DEBUT', false);
|
||||
define('URLREWRITE_FIN', false);
|
||||
|
||||
// - Email
|
||||
// Sujet de l'email pour la confirmation
|
||||
define('EMAIL_SUJET_CONFIRME', '[zici] [EmailPoubelle] Confirmation alias ');
|
||||
define('EMAIL_SUJET_CONFIRME', '[EmailPoubelle] Confirmation alias ');
|
||||
// Sujet de l'email pour la liste des alias
|
||||
define('EMAIL_SUJET_LISTE', '[zici] [EmailPoubelle] Liste des alias ');
|
||||
define('EMAIL_SUJET_LISTE', '[EmailPoubelle] Liste des alias ');
|
||||
// From de l'email
|
||||
define('EMAIL_FROM', '"NO REPLAY emailPoubelle" <emailpoubelle@zici.fr>');
|
||||
define('EMAIL_FROM', '"NO REPLAY emailPoubelle" <emailpoubelle@exemple.com>');
|
||||
|
||||
// Alisas interdit : (regex ligne par ligne) - commenter pour désactiver
|
||||
define('ALIASDENY', './emailPoubelle/aliasdeny.txt');
|
||||
// Alisas interdit : (regex ligne par ligne) - commenter pour désactiver
|
||||
define('ALIASDENY', './aliasdeny.txt');
|
||||
|
||||
// Blackliste d'email : (regex ligne par ligne) - commenter pour désactiver
|
||||
define('BLACKLIST', './emailPoubelle/blacklist.txt');
|
||||
// Blackliste d'email : (regex ligne par ligne) - commenter pour désactiver
|
||||
define('BLACKLIST', './blacklist.txt');
|
||||
|
||||
// Depend pear Net/DNS2
|
||||
define('CHECKMX', false);
|
||||
if (CHECKMX) {
|
||||
require_once('Net/DNS2.php');
|
||||
// Serveur DNS pour la résolution/vérification du nom de domaine
|
||||
define('NS1', 'ns1.fdn.org');
|
||||
define('NS2', '8.8.8.8');
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
|
@ -3,51 +3,100 @@
|
|||
//-----------------------------------------------------------
|
||||
// Email Poubelle
|
||||
// Licence : GNU GPL v3 : http://www.gnu.org/licenses/gpl.html
|
||||
// Créateur : David Mercereau - david [.] mercereau [aro] zici [.] fr
|
||||
// Créateur : David Mercereau - david [aro] mercereau [.] info
|
||||
// Home : http://poubelle.zici.fr
|
||||
// Date : 08/2013
|
||||
// Version : 0.3
|
||||
// Dépendance : Postifx
|
||||
// Version : 0.4
|
||||
// Dépendance : Postifx
|
||||
//-----------------------------------------------------------
|
||||
|
||||
include_once('./conf.php');
|
||||
define('VERSION', '0.4');
|
||||
|
||||
# Init & vérif
|
||||
//////////////////
|
||||
// Init & check
|
||||
//////////////////
|
||||
|
||||
if (DEBUG) {
|
||||
error_reporting(E_ALL);
|
||||
ini_set('display_errors', 'On');
|
||||
echo '<div class="highlight-2">Debug activé</div>';
|
||||
print_r($_REQUEST);
|
||||
}
|
||||
|
||||
// check alias file is_writable
|
||||
if (!is_writable(FICHIERALIAS)) {
|
||||
exit('<div class="highlight-1">Erreur : le fichier d\'alias ne peut pas être écrit. Merci de contacter l\'administrateur</div>');
|
||||
exit('<div class="highlight-1">Erreur : le fichier d\'alias ne peut pas être écrit. Merci de contacter l\'administrateur</div>');
|
||||
}
|
||||
// check blacklist file is_writable
|
||||
if (defined('BLACKLIST') && !is_readable(BLACKLIST)) {
|
||||
exit('<div class="highlight-1">Erreur : un fichier de blacklist est renseigné mais n\'est pas lisible. Merci de contacter l\'administrateur</div>');
|
||||
exit('<div class="highlight-1">Erreur : un fichier de blacklist est renseigné mais n\'est pas lisible. Merci de contacter l\'administrateur</div>');
|
||||
}
|
||||
// check aliasdeny file is_writable
|
||||
if (defined('ALIASDENY') && !is_readable(ALIASDENY)) {
|
||||
exit('<div class="highlight-1">Erreur : un fichier d\'alias interdit est renseigné mais n\'est pas lisible. Merci de contacter l\'administrateur</div>');
|
||||
exit('<div class="highlight-1">Erreur : un fichier d\'alias interdit est renseigné mais n\'est pas lisible. Merci de contacter l\'administrateur</div>');
|
||||
}
|
||||
|
||||
// Connect DB
|
||||
if (BACKEND == 'DB') {
|
||||
try {
|
||||
if (preg_match('/^sqlite/', DB)) {
|
||||
$dbco = new PDO(DB);
|
||||
} else {
|
||||
$dbco = new PDO(DB, DBUSER, DBPASS);
|
||||
}
|
||||
$dbco->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
} catch ( PDOException $e ) {
|
||||
die('Connexion à la base '.$e->getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////
|
||||
// Function
|
||||
//////////////////
|
||||
|
||||
// Verification des emails
|
||||
function VerifMXemail($email) {
|
||||
require_once 'Net/DNS2.php';
|
||||
$domaine=explode('@', $email);
|
||||
$r = new Net_DNS2_Resolver(array('nameservers' => array(NS1, NS2)));
|
||||
try {
|
||||
$result = $r->query($domaine[1], 'MX');
|
||||
} catch(Net_DNS2_Exception $e) {
|
||||
return false;
|
||||
}
|
||||
if ($result->answer) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
if (CHECKMX) {
|
||||
$domaine=explode('@', $email);
|
||||
$r = new Net_DNS2_Resolver(array('nameservers' => array(NS1, NS2)));
|
||||
try {
|
||||
$result = $r->query($domaine[1], 'MX');
|
||||
} catch(Net_DNS2_Exception $e) {
|
||||
return false;
|
||||
}
|
||||
if ($result->answer) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// postmap command
|
||||
function UpdateVirtualDB() {
|
||||
echo exec(BIN_POSTMAP.' '.FICHIERALIAS,$output,$return);
|
||||
}
|
||||
|
||||
//// A FAIRE (chian) :
|
||||
|
||||
// add new alias
|
||||
function AjouterAlias($alias,$email) {
|
||||
$fichier=fopen(FICHIERALIAS,'a+');
|
||||
fputs($fichier, $alias.'@'.DOMAIN.' '.$email."\n");
|
||||
fclose($fichier);
|
||||
if (BACKEND == 'DB') {
|
||||
// A faire mais $alais doît changer
|
||||
} else {
|
||||
$fichier=fopen(FICHIERALIAS,'a+');
|
||||
fputs($fichier, $alias.'@'.DOMAIN.' '.$email."\n");
|
||||
fclose($fichier);
|
||||
}
|
||||
UpdateVirtualDB();
|
||||
}
|
||||
|
||||
//// A FAIRE :
|
||||
|
||||
// delete new alias
|
||||
function SupprimerAlias($alias,$email) {
|
||||
file_put_contents(FICHIERALIAS, preg_replace('#\n\#[0-9]+ '.$alias.'@'.DOMAIN.' '.$email.'#U', '', file_get_contents(FICHIERALIAS)/*, 1*/));
|
||||
file_put_contents(FICHIERALIAS, preg_replace('#\n'.$alias.'@'.DOMAIN.' '.$email.'#U', '', file_get_contents(FICHIERALIAS)/*, 1*/));
|
||||
|
@ -55,6 +104,7 @@ function SupprimerAlias($alias,$email) {
|
|||
UpdateVirtualDB();
|
||||
}
|
||||
|
||||
// parse file for blacklist and aliasdeny
|
||||
function parseFileRegex($file, $chaine) {
|
||||
$return=false;
|
||||
$handle = fopen($file, 'r');
|
||||
|
@ -72,6 +122,7 @@ function parseFileRegex($file, $chaine) {
|
|||
return $return;
|
||||
}
|
||||
|
||||
// Check blacklistemail
|
||||
function BlacklistEmail($email) {
|
||||
if (defined('BLACKLIST')) {
|
||||
return parseFileRegex(BLACKLIST, $email);
|
||||
|
@ -80,6 +131,7 @@ function BlacklistEmail($email) {
|
|||
}
|
||||
}
|
||||
|
||||
// check aliasdeny
|
||||
function AliasDeny($alias) {
|
||||
if (defined('ALIASDENY')) {
|
||||
return parseFileRegex(ALIASDENY, $alias);
|
||||
|
@ -88,6 +140,9 @@ function AliasDeny($alias) {
|
|||
}
|
||||
}
|
||||
|
||||
//// A FAIRE :
|
||||
|
||||
// list alias
|
||||
function ListeAlias($email) {
|
||||
$handle = fopen(FICHIERALIAS, 'r');
|
||||
while (!feof($handle)) {
|
||||
|
@ -103,14 +158,11 @@ function ListeAlias($email) {
|
|||
return ($alias);
|
||||
}
|
||||
|
||||
if (DEBUG) {
|
||||
echo '<div class="highlight-2">Debug activé</div>';
|
||||
print_r($_REQUEST);
|
||||
}
|
||||
|
||||
echo '<h1>Emails poubelle libre</h1>
|
||||
<p>Générer des emails poubelle sans contrainte de durée de vie. </p>';
|
||||
//////////////////
|
||||
// Start program
|
||||
//////////////////
|
||||
|
||||
// Valid email process
|
||||
if (isset($_REQUEST['Validemail'])) {
|
||||
if (preg_match('/#'.$_REQUEST['Validemail'].' [a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+ [a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+/', file_get_contents(FICHIERALIAS),$res)) {
|
||||
$data=explode(' ', $res[0]);
|
||||
|
@ -123,6 +175,7 @@ if (isset($_REQUEST['Validemail'])) {
|
|||
} else {
|
||||
echo '<div class="highlight-1">Erreur : ID introuvable</div>';
|
||||
}
|
||||
// list email process
|
||||
} elseif (isset($_REQUEST['list'])) {
|
||||
$email=strtolower($_REQUEST['email']);
|
||||
if (! filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
||||
|
@ -132,7 +185,7 @@ if (isset($_REQUEST['Validemail'])) {
|
|||
} else if (!preg_match('#\n[a-z0-9]+@'.DOMAIN.' '.$email.'#', file_get_contents(FICHIERALIAS))) {
|
||||
echo '<div class="highlight-1">Vous n\'avez encore aucun alias d\'actif</div>';
|
||||
} else {
|
||||
# Envoi de l'email récapitulatif :
|
||||
# send email with alias list
|
||||
if (!preg_match('#^[a-z0-9._-]+@(hotmail|live|msn).[a-z]{2,4}$#', $email)) {
|
||||
$passage_ligne = "\r\n";
|
||||
} else {
|
||||
|
@ -147,8 +200,9 @@ if (isset($_REQUEST['Validemail'])) {
|
|||
$message.= 'Pour supprimer un email poubelle vous pouvez vous rendre sur le lien ci-dessou : '.$passage_ligne;
|
||||
$message.= "\t * ".URLPAGE.$passage_ligne;
|
||||
mail($email,EMAIL_SUJET_LISTE,$message,$header);
|
||||
echo '<div class="highlight-3">Un email vous a été adressé avec la liste de vos emails poubelles actifs.</div>';
|
||||
echo '<div class="highlight-3">Un email vous a été adressé avec la liste de vos emails poubelles actifs.</div>';
|
||||
}
|
||||
//
|
||||
} elseif (isset($_REQUEST['email']) && isset($_REQUEST['alias'])) {
|
||||
$alias=strtolower($_REQUEST['alias']);
|
||||
$email=strtolower($_REQUEST['email']);
|
||||
|
@ -161,10 +215,10 @@ if (isset($_REQUEST['Validemail'])) {
|
|||
} else if (AliasDeny($alias)) {
|
||||
echo '<div class="highlight-1">Erreur : email poubelle interdit</div>';
|
||||
} else if (BlacklistEmail($email)) {
|
||||
echo '<div class="highlight-1">Erreur : vous avez été blacklisté sur ce service</div>';
|
||||
} elseif (isset($_REQUEST['ajo'])) {
|
||||
echo '<div class="highlight-1">Erreur : vous avez été blacklisté sur ce service</div>';
|
||||
} elseif (isset($_REQUEST['add'])) {
|
||||
if (preg_match('#\n'.$alias.'@'.DOMAIN.'#', file_get_contents(FICHIERALIAS)) || preg_match('#\n\#[0-9]+ '.$alias.'@'.DOMAIN.'#', file_get_contents(FICHIERALIAS))) {
|
||||
echo '<div class="highlight-1">Erreur : cet email poubelle est déjà utilisé</div>';
|
||||
echo '<div class="highlight-1">Erreur : cet email poubelle est déjà utilisé</div>';
|
||||
} else {
|
||||
if (preg_match('#\n[a-z0-9]+@'.DOMAIN.' '.$email.'#', file_get_contents(FICHIERALIAS))) {
|
||||
AjouterAlias($alias,$email);
|
||||
|
@ -172,7 +226,7 @@ if (isset($_REQUEST['Validemail'])) {
|
|||
} else {
|
||||
$id=rand().date('U');
|
||||
$alias_desactive='#'.$id.' '.$alias;
|
||||
AjouterAlias($alias_desactive,$email);
|
||||
AjouterAlias($alias_desactive,$email,0);
|
||||
# Envoi de l'email :
|
||||
if (!preg_match('#^[a-z0-9._-]+@(hotmail|live|msn).[a-z]{2,4}$#', $email)) {
|
||||
$passage_ligne = "\r\n";
|
||||
|
@ -181,7 +235,7 @@ if (isset($_REQUEST['Validemail'])) {
|
|||
}
|
||||
$header = 'From: '.EMAIL_FROM.$passage_ligne;
|
||||
$header.= 'MIME-Version: 1.0'.$passage_ligne;
|
||||
$message= 'Confirmation de la création de votre redirection email poubelle : '.$passage_ligne;
|
||||
$message= 'Confirmation de la création de votre redirection email poubelle : '.$passage_ligne;
|
||||
$message= $alias.'@'.DOMAIN.' => '.$email.$passage_ligne;
|
||||
$message= 'Cliquer sur le lien ci-dessous pour confirmer : '.$passage_ligne;
|
||||
if (URLREWRITE_DEBUT && URLREWRITE_FIN) {
|
||||
|
@ -196,28 +250,35 @@ if (isset($_REQUEST['Validemail'])) {
|
|||
$message.= "\t * ".URLPAGE.'?sup=true&email='.$email.'&alias='.$alias.$passage_ligne;
|
||||
}
|
||||
mail($email,EMAIL_SUJET_CONFIRME.$alias,$message,$header);
|
||||
echo '<div class="highlight-2">Votre email ('.$email.') nous étant inconnu, une confirmation vous a été envoyé par email.</div>';
|
||||
echo '<div class="highlight-2">Votre email ('.$email.') nous étant inconnu, une confirmation vous a été envoyé par email.</div>';
|
||||
}
|
||||
}
|
||||
} else if (isset($_REQUEST['sup'])) {
|
||||
} else if (isset($_REQUEST['del'])) {
|
||||
if (preg_match('#\n'.$alias.'@'.DOMAIN.' '.$email.'#', file_get_contents(FICHIERALIAS)) || preg_match('#\n\#[0-9]+ '.$alias.'@'.DOMAIN.' '.$email.'#', file_get_contents(FICHIERALIAS))) {
|
||||
SupprimerAlias($alias,$email);
|
||||
echo '<div class="highlight-3">Votre email poubelle <b>'.$alias.'@'.DOMAIN.'</b> est maintenant supprimé !</div>';
|
||||
echo '<div class="highlight-3">Votre email poubelle <b>'.$alias.'@'.DOMAIN.'</b> est maintenant supprimé !</div>';
|
||||
} else {
|
||||
echo '<div class="highlight-1">Erreur : l\'email poubelle n\'existe pas</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
// Close connexion DB
|
||||
if (BACKEND == DB) {
|
||||
$dbco = null;
|
||||
}
|
||||
//////////////////
|
||||
// Printing form
|
||||
//////////////////
|
||||
?>
|
||||
<form action="<?= URLPAGE?>" method="post">
|
||||
<label>Nom de l'email poubelle : </label>
|
||||
<input type="text" name="alias" size="24" border="0" /> @<?= DOMAIN; ?>
|
||||
<br />
|
||||
<label>Votre email réel : </label>
|
||||
<input type="text" name="email" size="24" border="0" /> <input class="button" type="submit" name="list" value="Lister" />
|
||||
<label>Votre email réel : </label>
|
||||
<input type="text" name="email" size="24" border="0" /> <input class="" type="submit" name="list" value="Lister" />
|
||||
<br />
|
||||
<input class="button" type="submit" name="ajo" value="Créer" /> ou
|
||||
<input class="button" type="submit" name="sup" value="Supprimer" /> la redirection poubelle
|
||||
<input class="button" type="submit" name="add" value="Créer" /> ou
|
||||
<input class="button" type="submit" name="del" value="Supprimer" /> la redirection poubelle
|
||||
</form>
|
||||
<p>Version <?= VERSION ?> - Créé par David Mercereau sous licence GNU GPL v3</p>
|
||||
<p>Télécharger et utiliser ce script sur le site du projet <a target="_blank" href="http://forge.zici.fr/p/emailpoubelle-php/">emailPoubelle.php</a></p>
|
||||
<p>Version <?= VERSION ?> - Créé par David Mercereau sous licence GNU GPL v3</p>
|
||||
<p>Télécharger et utiliser ce script sur le site du projet <a target="_blank" href="http://forge.zici.fr/p/emailpoubelle-php/">emailPoubelle.php</a></p>
|
||||
|
|
192
index.php
Executable file
|
@ -0,0 +1,192 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>emailPoubelle - Template-exemple</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="">
|
||||
<meta name="robots" content="index,follow,noarchive">
|
||||
<link rel="stylesheet" href="template-exemple/style.css">
|
||||
<!--[if IE]><script src="template-exemple/html5-ie.js"></script><![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lte IE 6]>
|
||||
<div class="alert-ie6" style="padding: 1em; background: #900; font-size: 1.1em; color: #fff;">
|
||||
<p><strong>Attention ! </strong> Votre navigateur (Internet Explorer 6 ou 7) présente de sérieuses lacunes en terme de sécurité et de performances, dues à son obsolescence (il date de 2001).<br />En conséquence, ce site sera consultable mais de manière moins optimale qu'avec un navigateur récent (<a href="http://www.browserforthebetter.com/download.html" style="color: #fff;">Internet Explorer 8</a>, <a href="http://www.mozilla-europe.org/fr/firefox/" style="color: #fff;">Firefox 3</a>, <a href="http://www.google.com/chrome?hl=fr" style="color: #fff;">Chrome</a>, <a href="http://www.apple.com/fr/safari/download/" style="color: #fff;">Safari</a>,...)</p>
|
||||
</div>
|
||||
<![endif]-->
|
||||
<div id="a">
|
||||
<header>
|
||||
<a href="/" title="Startseite"><strong>OWMX-2</strong> HTML5 & CSS3</a>
|
||||
</header>
|
||||
<div id="b">
|
||||
<article>
|
||||
<h1>Emails poubelle libre</h1>
|
||||
<p>Générer des emails poubelle sans contrainte de durée de vie. </p>
|
||||
<?php
|
||||
// Intégration dans votre site :
|
||||
include('emailPoubelle.php');
|
||||
?>
|
||||
<h3>Let the Show Begin - Pre and Code</h3>
|
||||
<p>This is how it looks if you use <code>pre</code> and <code>code</code> together, for example to highlight and nicely markup a piece of code:</p>
|
||||
<pre><code>pre {<br /> font-size : 12px;<br /> background : #F0F0F0;<br />}</code></pre>
|
||||
<h3>Example Blockquote</h3>
|
||||
<p>If you want to quote somebody, you can use this perfectly semantic example for a blockquote:</p>
|
||||
<cite>Jonas Jacek</cite>
|
||||
<blockquote cite="http://www.rield.com/">
|
||||
During my years in the Internet Marketing business I have seen and done many things I never thought would be of interest to me or anyone else.
|
||||
</blockquote>
|
||||
<h3>Examples Alerts, Notice & Confirmation</h3>
|
||||
<p>These sample styles for alerts and notices are useful if you want to use the template in content management systems.</p>
|
||||
<p class="highlight-1"><strong>Alert:</strong> This is how an alert looks like.</p>
|
||||
<p class="highlight-2"><strong>Notice:</strong> This is how a notice looks like.</p>
|
||||
<p class="highlight-3"><strong>Confirmation:</strong> This is how a confirmation looks like.</p>
|
||||
<h3>Example Table</h3>
|
||||
<p>The following is the design for a table. The style is simple and user-friendly. Some of the effects were made with CSS3.</p>
|
||||
<table>
|
||||
<caption>Mini HTML5 Reference Guide</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Tag</th>
|
||||
<th>Info</th>
|
||||
<th>Attributes</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><abbr></td>
|
||||
<td>abbreviation</td>
|
||||
<td>global attributes**</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><area></td>
|
||||
<td>in an image map</td>
|
||||
<td> alt, coords, href, hreflang, media, ping, rel, shape, target, type</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><article></td>
|
||||
<td>article/ content</td>
|
||||
<td>global attributes**</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><aside></td>
|
||||
<td>sidebar</td>
|
||||
<td>global attributes**</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><audio></td>
|
||||
<td>sound content</td>
|
||||
<td>autobuffer, autoplay, controls, loop, src</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b></td>
|
||||
<td>bold text</td>
|
||||
<td>global attributes**</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Example hCalendar</h3>
|
||||
<p>The following is a definition list in combination with the hCalendar microformat. </p>
|
||||
<dl class="vevent">
|
||||
<dt class="dtstart"><abbr title="2010-11-18" class="dtstart">11-18-2010</abbr></dt>
|
||||
<dd class="summary">Conference Name</dd>
|
||||
<dd><a href="#" class="url">http://www.conference-website.com/</a></dd>
|
||||
<dd class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec eleifend diam. Fusce lobortis odio ac sem scelerisque sed iaculis purus ornare.</dd>
|
||||
</dl>
|
||||
<h3>Example Video</h3>
|
||||
<p>You can put your Video-Files here...</p>
|
||||
<video src="movie.ogg" controls>your browser does not support the video tag</video>
|
||||
<h3>Example Audio</h3>
|
||||
<p>You can put your Audio-Files here...</p>
|
||||
<audio src="file.ogg" controls>your browser does not support the audio tag</audio>
|
||||
<h3>Example Lists</h3>
|
||||
<p>Two different kinds of lists were styled: Ordered lists (ol) and unordered (ul) lists.</p>
|
||||
<ol>
|
||||
<li>This is</li>
|
||||
<li>The Ordered</li>
|
||||
<li>Listing</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>This is</li>
|
||||
<li>The Unordered</li>
|
||||
<li>Listing</li>
|
||||
</ul>
|
||||
<h3>Example Form</h3>
|
||||
<p>This is how a form will look like in this template.</p>
|
||||
<form action="#">
|
||||
<label>Name</label>
|
||||
<input name="#" type="text" value="Your Name">
|
||||
<label>Email</label>
|
||||
<input name="#" type="text" value="Your Email">
|
||||
<label>Your Comments</label>
|
||||
<textarea>This is a Comment...</textarea>
|
||||
<br>
|
||||
<input class="button" type="submit">
|
||||
</form>
|
||||
<section class="meta">
|
||||
<p>Author: <a href="http://www.jabz.info/contact/jonas-jared-jacek/">Jonas Jacek</a> | Date: 2010-01-21 | Comments: <a href="#">7</a></p>
|
||||
<p>Tags: <a href="#" rel="tag">quisquam</a>, <a href="#" rel="tag">Tags</a>, <a href="#" rel="tag">dolorem</a> <a href="#" rel="tag">Tags</a>, <a href="#" rel="tag">Tags</a></p>
|
||||
</section>
|
||||
</article>
|
||||
<aside>
|
||||
<h4>Search</h4>
|
||||
<form action="#" class="s">
|
||||
<input name="search" type="text" value="Type term and hit enter...">
|
||||
</form>
|
||||
<h4>About the Author</h4>
|
||||
<div id="c">
|
||||
<img src="template-exemple/jonas-jacek.png" alt="Jonas Jacek">
|
||||
<p>Hi, my name is <a href="http://www.jabz.info/contact/jonas-jared-jacek/">Jonas Jacek</a>.<br> Welcome to my new HTML5 / CSS3 blog.</p>
|
||||
<p>I am a web designer, web developer and Internet marketing enthusiast.</p>
|
||||
<p>I strongly believe in open-source software and open standards.</p>
|
||||
</div>
|
||||
<nav>
|
||||
<h4>Navigation</h4>
|
||||
<ul>
|
||||
<li><a href="#">Lorem</a></li>
|
||||
<li><a href="#">Ipsum</a></li>
|
||||
<li class="active"><a href="#">Dolor Sit</a>
|
||||
<ul>
|
||||
<li><a href="#">Amet</a></li>
|
||||
<li><a href="#">Amet</a></li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
<li><a href="#">Downloads</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h4>Example Gallery</h4>
|
||||
<ul class="gallery">
|
||||
<li><a href="index.html"><img src="template-exemple/img1.png"/></a></li>
|
||||
<li><a href="index.html"><img src="template-exemple/img2.png"/></a></li>
|
||||
<li><a href="index.html"><img src="template-exemple/img3.png"/></a></li>
|
||||
</ul>
|
||||
<ul class="gallery">
|
||||
<li><a href="index.html"><img src="template-exemple/img4.png"/></a></li>
|
||||
<li><a href="index.html"><img src="template-exemple/img5.png"/></a></li>
|
||||
<li><a href="index.html"><img src="template-exemple/img6.png"/></a></li>
|
||||
</ul>
|
||||
<h4>AdSpace</h4>
|
||||
<div class="adspace">
|
||||
<a href="http://www.jabz.biz/" rel="me"><img src="template-exemple/jabz-logo.png" alt="Jabz Internet Marketing GmbH" title="Jabz Internet Marketing GmbH"/></a>
|
||||
</div>
|
||||
<h4>Example Blogroll</h4>
|
||||
<ul>
|
||||
<li><a href="http://www.jabz.biz/">Jabz Internet Marketing GmbH</a></li>
|
||||
<li><a href="http://www.jabz.info/contact/jonas-jared-jacek/">Jonas Jacek</a></li>
|
||||
<li><a href="http://www.w3.org/">World Wide Web Consortium</a></li>
|
||||
<li><a href="http://www.getfirefox.com/">Firefox Web Browser</a></li>
|
||||
</ul>
|
||||
<h4>Example Tag Cloud</h4>
|
||||
<ul id="tagcloud">
|
||||
<li class="tagcloudsize-1"><a href="#">Lorem</a></li>
|
||||
<li class="tagcloudsize-2"><a href="#">Ipsum</a></li>
|
||||
<li class="tagcloudsize-3"><a href="#">Dolor</a></li>
|
||||
<li class="tagcloudsize-2"><a href="#">Sit Amet</a></li>
|
||||
<li class="tagcloudsize-1"><a href="#">Consectetur</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<footer>
|
||||
<p>Template Design & Markup by <a href="http://www.jabz.info/contact/jonas-jared-jacek/" title="Profile of Jonas Jacek">Jonas Jacek</a> for <a href="http://www.owmx.com/" title="Free HTML5 & CSS3 Web Template | owmx.com">Free HTML5 & CSS3 Web Templates</a>.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</html>
|
BIN
template-exemple/ai1.png
Executable file
After Width: | Height: | Size: 116 B |
BIN
template-exemple/ai2.png
Executable file
After Width: | Height: | Size: 116 B |
BIN
template-exemple/ai3.png
Executable file
After Width: | Height: | Size: 196 B |
BIN
template-exemple/ai4.png
Executable file
After Width: | Height: | Size: 195 B |
BIN
template-exemple/ai5.png
Executable file
After Width: | Height: | Size: 183 B |
BIN
template-exemple/ai6.png
Executable file
After Width: | Height: | Size: 136 B |
BIN
template-exemple/ai7.png
Executable file
After Width: | Height: | Size: 137 B |
BIN
template-exemple/ai8.png
Executable file
After Width: | Height: | Size: 137 B |
BIN
template-exemple/hd.jpg
Executable file
After Width: | Height: | Size: 67 KiB |
10
template-exemple/html5-ie.js
Normal file
|
@ -0,0 +1,10 @@
|
|||
document.createElement("header");
|
||||
document.createElement("footer");
|
||||
document.createElement("section");
|
||||
document.createElement("aside");
|
||||
document.createElement("nav");
|
||||
document.createElement("article");
|
||||
document.createElement("figure");
|
||||
document.createElement("figcaption");
|
||||
document.createElement("hgroup");
|
||||
document.createElement("time");
|
BIN
template-exemple/image-1.png
Executable file
After Width: | Height: | Size: 270 B |
BIN
template-exemple/img1.png
Executable file
After Width: | Height: | Size: 8.1 KiB |
BIN
template-exemple/img2.png
Executable file
After Width: | Height: | Size: 7.5 KiB |
BIN
template-exemple/img3.png
Executable file
After Width: | Height: | Size: 8.2 KiB |
BIN
template-exemple/img4.png
Executable file
After Width: | Height: | Size: 5.5 KiB |
BIN
template-exemple/img5.png
Executable file
After Width: | Height: | Size: 6.9 KiB |
BIN
template-exemple/img6.png
Executable file
After Width: | Height: | Size: 8.3 KiB |
BIN
template-exemple/jabz-logo.png
Executable file
After Width: | Height: | Size: 1.1 KiB |
BIN
template-exemple/jonas-jacek.png
Executable file
After Width: | Height: | Size: 1.7 KiB |
34
template-exemple/readme.txt
Normal file
|
@ -0,0 +1,34 @@
|
|||
####################################################
|
||||
# License #
|
||||
####################################################
|
||||
|
||||
This W3C-compliant, CSS-based website template has a
|
||||
Creative Commons Attribution-Share Alike 3.0
|
||||
Unported License.
|
||||
>> http://creativecommons.org/licenses/by-sa/3.0/
|
||||
|
||||
|
||||
####################################################
|
||||
# What You Can Do #
|
||||
####################################################
|
||||
|
||||
Feel free to remix, copy, distribute and transmit
|
||||
this template. All I ask is that you keep the
|
||||
footer links in the template intact. Also, if you
|
||||
alter, transform, or build upon this work, you
|
||||
may distribute the resulting work only under the
|
||||
same, similar or a compatible license.
|
||||
|
||||
|
||||
####################################################
|
||||
# Feedback & Action #
|
||||
####################################################
|
||||
|
||||
I'd love to get your feedback on the template.
|
||||
Please contact me with your critics, ideas, etc.
|
||||
>> http://www.jabz.info/contact/jonas-jared-jacek/
|
||||
|
||||
If you like to contribute your remix, I will be
|
||||
more than happy to put your version on owmx.com
|
||||
and credit you in http://www.owmx.com/credits/.
|
||||
|
432
template-exemple/style.css
Normal file
|
@ -0,0 +1,432 @@
|
|||
/*==================================================
|
||||
Template: OWMX-2
|
||||
Resource: http://www.owmx.com/
|
||||
Version: 1.0
|
||||
Date: 2010-09-13
|
||||
Editor: Jonas Jacek
|
||||
License: CC Attribution-Share Alike 3.0 Unported
|
||||
==================================================*/
|
||||
|
||||
/* Reset */
|
||||
header, footer, article, nav, section, aside, time, hgroup {
|
||||
display : block;
|
||||
}
|
||||
html, body, header, footer, article, nav, section, aside, time, h1, h2, h3, p, a, ul, li, dl, dd, dt, table, thead, tfoot, tbody, th, tr, td {
|
||||
border : 0;
|
||||
font : 12px/22px Verdana, sans-serif;
|
||||
margin : 0;
|
||||
outline : 0;
|
||||
padding : 0;
|
||||
}
|
||||
|
||||
/* BASICS */
|
||||
BODY {
|
||||
background : #FFF;
|
||||
border-top : 5px solid #FFF;
|
||||
color : #444;
|
||||
}
|
||||
|
||||
A {
|
||||
color : #0A647C;
|
||||
text-decoration : none;
|
||||
}
|
||||
A:HOVER {
|
||||
color : #DB0202;
|
||||
}
|
||||
|
||||
H1, H3, H4, H5, H6 {
|
||||
background : url(../i/ai4.png) no-repeat 0 7px;
|
||||
border-bottom : 1px dotted #B5B3A9;
|
||||
color : #333;
|
||||
font-weight : bold;
|
||||
margin : 0 0 10px;
|
||||
padding : 0 0 0 25px;
|
||||
}
|
||||
H1 {
|
||||
background : url(../i/ai4.png) no-repeat 0 6px;
|
||||
font-size : 15px;
|
||||
}
|
||||
H2 {
|
||||
font-size : 14px;
|
||||
margin : 0 0 20px 0;
|
||||
}
|
||||
H3 {
|
||||
background : url(../i/ai5.png) no-repeat 0 7px;
|
||||
}
|
||||
H3, H4, H5, H6 {
|
||||
font-size : 13px;
|
||||
}
|
||||
|
||||
SUP {
|
||||
top : -4px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
-moz-border-radius : 4px;
|
||||
-webkit-border-radius : 4px;
|
||||
background : #006699 url(../i/hd.jpg) no-repeat top left;
|
||||
margin : 0 0 10px 0;
|
||||
padding : 10px 10px;
|
||||
position : relative;
|
||||
}
|
||||
header a {
|
||||
color : #FFF;
|
||||
font-size : 16px;
|
||||
}
|
||||
header a:hover {
|
||||
color : #FFF;
|
||||
}
|
||||
|
||||
/* Article */
|
||||
article {
|
||||
border-left : 1px dotted #666;
|
||||
float : right;
|
||||
height : auto;
|
||||
padding : 0 0 0 20px;
|
||||
width : 560px;
|
||||
}
|
||||
article p {
|
||||
margin : 0 0 20px 0;
|
||||
}
|
||||
article img {
|
||||
float : left;
|
||||
margin : 6px 10px 0 0;
|
||||
}
|
||||
|
||||
/* Highlighted Paragraphs */
|
||||
.highlight-1, .highlight-2, .highlight-3 {
|
||||
-moz-border-radius : 4px;
|
||||
-webkit-border-radius : 4px;
|
||||
padding : 5px 10px;
|
||||
}
|
||||
.highlight-1 {
|
||||
background : #FFCCCC;
|
||||
border : 1px dotted #FF9966;
|
||||
}
|
||||
.highlight-2 {
|
||||
background : #FFFF99;
|
||||
border : 1px dotted #FFCC33;
|
||||
}
|
||||
.highlight-3 {
|
||||
background : #CCFF99;
|
||||
border : 1px dotted #CCCC33;
|
||||
}
|
||||
|
||||
/* Citations & Quotes */
|
||||
cite {
|
||||
border-left: 2px solid #006699;
|
||||
color : #666;
|
||||
font-size : 10px;
|
||||
font-style : normal;
|
||||
font-weight : bold;
|
||||
margin : 0;
|
||||
padding : 5px 10px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid #006699;
|
||||
color : #666;
|
||||
margin : 0 0 20px 0;
|
||||
padding : 5px 10px;
|
||||
}
|
||||
|
||||
/* Pre & Code */
|
||||
pre {
|
||||
color : #333;
|
||||
font-size : 10px;
|
||||
line-height : 15px; /*--Height of each line of code--*/
|
||||
overflow : hidden; /*--If the Code exceeds the width, put "auto" and scrolling is available--*/
|
||||
overflow-Y : hidden; /*--Hides vertical scroll created by IE--*/
|
||||
}
|
||||
pre code {
|
||||
background : #EEE;
|
||||
border-left : 2px solid #006699;
|
||||
margin : 0 0 10px 0;
|
||||
padding : 5px;
|
||||
display : block;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
table {
|
||||
border-collapse : collapse;
|
||||
text-align:left;
|
||||
margin : 0 0 20px 0;
|
||||
}
|
||||
caption {
|
||||
-moz-border-radius : 4px;
|
||||
-webkit-border-radius : 4px;
|
||||
background : #006699;
|
||||
color : #FFF;
|
||||
font-weight : bold;
|
||||
}
|
||||
tr:nth-child(odd) {
|
||||
background : #FFF;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background : #DDD;
|
||||
}
|
||||
tr:hover td {
|
||||
color : #006699;
|
||||
}
|
||||
td, th {
|
||||
min-width : 120px;
|
||||
padding : 0 5px;
|
||||
vertical-align:top;
|
||||
}
|
||||
th {
|
||||
background : #FFF;
|
||||
border-bottom : 2px solid #006699;
|
||||
color : #666;
|
||||
font-size : 10px;
|
||||
font-weight : bold;
|
||||
}
|
||||
td {
|
||||
border-bottom : 1px solid #CCC;
|
||||
font-size : 10px;
|
||||
}
|
||||
|
||||
/* Calendar */
|
||||
dl.vevent {
|
||||
margin : -20px 0 20px 0;
|
||||
padding : 0;
|
||||
}
|
||||
.vevent dt {
|
||||
font-size : 10px;
|
||||
position : relative;
|
||||
left : 0;
|
||||
top : 22px;
|
||||
font-weight : bold;
|
||||
}
|
||||
.vevent dd
|
||||
{
|
||||
border-left : 2px solid #006699;
|
||||
font-size : 11px;
|
||||
margin : 0 0 0 80px;
|
||||
padding : 0 0 0 10px;
|
||||
}
|
||||
dd.summary {
|
||||
font-weight : bold;
|
||||
}
|
||||
.vevent a {
|
||||
font-size : 11px;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
article form {
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
background : #DDD;
|
||||
margin : 0 0 20px;
|
||||
padding : 10px;
|
||||
}
|
||||
article label {
|
||||
color : #666;
|
||||
display : block;
|
||||
font-size : 10px;
|
||||
font-weight : bold;
|
||||
margin : 0 0 0 2px;
|
||||
}
|
||||
article input, article textarea {
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border : 1px solid #CCC;
|
||||
font-size : 11px;
|
||||
padding : 4px 5px;
|
||||
width : 458px;
|
||||
}
|
||||
article input {
|
||||
margin : 0 0 10px;
|
||||
}
|
||||
article input.button, .btn {
|
||||
background: #999;
|
||||
border : 1px solid #888;
|
||||
color: #FFF;
|
||||
cursor : pointer;
|
||||
font-weight : bold;
|
||||
margin : 10px 0 0 0;
|
||||
text-shadow : 0 -1px 1px rgba(0,0,0,0.25);
|
||||
width : 25%;
|
||||
}
|
||||
article textarea {
|
||||
height : 100px;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
article ul, aside ul {
|
||||
list-style : none;
|
||||
margin : 0 0 20px 0;
|
||||
}
|
||||
article ul {
|
||||
margin : 0 0 20px 23px;
|
||||
}
|
||||
article ul li {
|
||||
background : url(../i/ai2.png) no-repeat 0 8px;
|
||||
padding : 0 0 0 17px;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
aside {
|
||||
float : left;
|
||||
margin : 0 0 20px 0;
|
||||
width : 200px;
|
||||
}
|
||||
|
||||
/* Search Box */
|
||||
.s {
|
||||
-moz-border-radius : 4px;
|
||||
-webkit-border-radius : 4px;
|
||||
margin : 0 0 20px 0;
|
||||
padding : 10px;
|
||||
width : 179px;
|
||||
}
|
||||
.s input {
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border : 1px solid #CCC;
|
||||
color : #999;
|
||||
font-size : 11px;
|
||||
padding : 4px 5px;
|
||||
width : 168px;
|
||||
}
|
||||
|
||||
/* Navigation & Menu */
|
||||
nav ul {
|
||||
list-style : none;
|
||||
}
|
||||
nav li {
|
||||
background : url(../i/ai1.png) no-repeat 0 8px;
|
||||
padding : 0 0 0 15px;
|
||||
}
|
||||
nav li ul, aside li ul li ul {
|
||||
margin : 0;
|
||||
}
|
||||
nav li li a {
|
||||
font-size : 11px;
|
||||
}
|
||||
nav li li li a {
|
||||
font-size : 10px;
|
||||
}
|
||||
nav li li li, aside li.active li li {
|
||||
background : url(../i/ai8.png) no-repeat 0 10px;
|
||||
}
|
||||
nav li.active, aside li.active li {
|
||||
background : url(../i/ai2.png) no-repeat 0 8px;
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
.gallery {
|
||||
list-style : none;
|
||||
margin : 0 0 10px;
|
||||
}
|
||||
.gallery li {
|
||||
display: inline;
|
||||
margin : 0 15px 0 0;
|
||||
}
|
||||
.gallery a img {
|
||||
border : 1px solid #999;
|
||||
height : 50px;
|
||||
opacity: 0.8;
|
||||
padding : 1px;
|
||||
width : 50px;
|
||||
}
|
||||
.gallery li:last-child {
|
||||
margin : 0 0 10px 0;
|
||||
}
|
||||
.gallery a img:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Ad Space */
|
||||
.adspace {
|
||||
-moz-border-radius : 4px;
|
||||
-webkit-border-radius : 4px;
|
||||
-moz-box-shadow : 0 2px 2px rgba(0,0,0,0.3);
|
||||
-webkit-box-shadow : 0 2px 2px rgba(0,0,0,0.3);
|
||||
background : #EEE;
|
||||
height : 100%;
|
||||
margin : 0 0 20px 0;
|
||||
padding : 5px 10px;
|
||||
text-align : center;
|
||||
width : 178px;
|
||||
}
|
||||
.adspace a img {
|
||||
border : none;
|
||||
}
|
||||
|
||||
/* Tag Cloud */
|
||||
#tagcloud {
|
||||
overflow : hidden;
|
||||
width : 200px;
|
||||
}
|
||||
#tagcloud li {
|
||||
display : inline;
|
||||
margin : 0 10px 0 0;
|
||||
}
|
||||
.tagcloudsize-1 a {
|
||||
font-size : 14px;
|
||||
}
|
||||
.tagcloudsize-2 a {
|
||||
font-size : 16px;
|
||||
}
|
||||
.tagcloudsize-3 a {
|
||||
font-size : 18px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
border-top : 1px dotted #B5B3A9;
|
||||
clear : both;
|
||||
margin : 20px 0;
|
||||
}
|
||||
footer a, footer p {
|
||||
color : #666;
|
||||
display : inline;
|
||||
font-size : 10px;
|
||||
}
|
||||
|
||||
/* Wrappers */
|
||||
#a, #b {
|
||||
margin : 0 auto;
|
||||
position : relative;
|
||||
}
|
||||
#a {
|
||||
width : 800px;
|
||||
}
|
||||
#b {
|
||||
overflow : hidden;
|
||||
}
|
||||
|
||||
/* Shadow-Boxes*/
|
||||
#c, .meta, .s {
|
||||
-moz-border-radius : 4px;
|
||||
-webkit-border-radius : 4px;
|
||||
-moz-box-shadow : 0 2px 2px rgba(0,0,0,0.3);
|
||||
-webkit-box-shadow : 0 2px 2px rgba(0,0,0,0.3);
|
||||
background : #EEE;
|
||||
}
|
||||
#c {
|
||||
background : #EEE;
|
||||
margin : 0 0 20px 0;
|
||||
padding : 5px 10px;
|
||||
width : 178px;
|
||||
}
|
||||
#c p, #c a {
|
||||
font-size : 11px;
|
||||
line-height : 15px;
|
||||
}
|
||||
#c p {
|
||||
margin : 0 0 10px 0;
|
||||
}
|
||||
#c img {
|
||||
float : left;
|
||||
margin : 4px 10px 2px 0;
|
||||
}
|
||||
.meta {
|
||||
margin : 20px 0 3px;
|
||||
padding : 2px 5px;
|
||||
}
|
||||
.meta p, .meta a {
|
||||
font-size : 10px;
|
||||
margin : 0;
|
||||
}
|