gaspaonrocks/maquette.css

## maquette.css
body {
    background: linear-gradient(to right, #000000, #4F4F4F, #000000);
}

img {
    border: solid yellow 2px;
    padding: 2px;
}

blockquote {
    background: darkslategrey;
    border-bottom: solid yellow 2px;
    border-top: solid yellow 2px;
    padding: 8px;
}

#floatLeft {
    float: left;
    margin-right: 10px;
}

#floatRight {
    float: right;
    margin-left: 10px;
}

.page {
    width: 720px;
    margin: auto;
    position: relative;
    color: white;
    display: flex;
    flex-direction: row;
    background: url(full.jpg) repeat-y;
    overflow: hidden;
}

#bigLogo {
    position: absolute;
    top: -2;
    right: 0;
    border: none;
    z-index: 0;
}

#middle {
    position: absolute;
    top: -2;
    right: 286;
    border: none;
    z-index: 0;
}

.main-left {
    display: flex;
    flex-direction: column;
    width: 55%;
    padding: 10px 25px 10px 10px;
}

.main-right {
    display: flex;
    flex-direction: column;
    width: 45%;
    padding: 20px;
}

h1 {
    font-family: Arial Black, sans-serif;
    color: #FFF;
    border-top: solid yellow 5px;
    margin-bottom: 0;
    font-size: 23px;
}

.main-left h2 {
    font-family: Arial Black, sans-serif;
    color: black;
    background: yellow;
    margin-top: 0;
    font-size: 15px;
    padding-left: 5px;
}

.main-right h2 {
    font-family: Arial Black, sans-serif;
    color: deeppink;
    background: yellow;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 15px;
    padding-left: 5px;
}

p {
    color: lightgrey;
}

.article1 {
    padding: 20px 20px 0 20px;
    margin-bottom: 0;
    width: 100%;
}

span {
    color: yellow;
}

.info {
    border-left: solid yellow 5px;
    padding-left: 5px;
    margin-bottom: 0;
}

em {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.article1 ul li {
    list-style: url(bullet.gif);
    margin: 5px;
}

ol li {
    margin: 5px;
}

table {
    padding: 20px 0;
    margin: auto;
    border-spacing: 50px 0;
    border-collapse: separate;
    table-layout: fixed;
}

tr {
    width: 2%;
}

td {
    background-color: darkslategrey;
    color: grey;
    padding: 15px 10px 15px 10px;
    border-bottom: 2px solid grey;
    border-top: 2px solid grey;
    width: 50%;
}

th {
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 0;
    text-align: left;
    color: white;
}

#title {
    font-size: 45px;
    font-weight: 900;
    line-height: 73%;
    padding-top: 65px;
    text-align: center;
    height: 250px;
    box-sizing: border-box;
    color: white;
}

.article2 {
    padding: 20px;
    position: relative;
    z-index: 1;
}

.article2 p {
    color: white;
    border: solid yellow 5px;
    padding: 10px;
    margin-top: 0;
}

#title {
    border: none;
}

#star {
    list-style: url(star1.jpg);
}

#star:hover {
    list-style: url(star2.jpg);
}

#updates {
    border: solid yellow 5px;
    margin-top: 0;
    padding-left: 10px;
    line-height: 135%;
    color: white;
    font-weight: 500;
}

#footer {
    text-align: center;
}

## maquette2.html
<!DOCTYPE>
<html>

<head>
    <meta charset="UTF-8">
    <title>Sacha GRASSO</title>
    <link rel="stylesheet" href="maquette.css">
</head>

<body>
    <div class="page">
        <img id="bigLogo" src="title.jpg" alt="title">
        <img id="middle" src="middle.jpg" alt="middle">
        <div class="main-left">
            <div class="article1">
                <h1>WELCOME TO MY BLOG</h1>
                <h2>BY MICHAEL ON OCTOBER 31, 2006</h2>
                <p>this template was inspired by some artist friends of mine and i hope you find it useful. You can replace
                    the title to the left by changing the text in the HTML or by using a bitmap <span>graphics application</span>                    to modify the background graphic and add your own styled text.<br>Lorem ipsum dolor sit amet, consectetuer
                    adispiscing elit, sed diam nonummy blablabla.
                </p>
                <p class="info">Filed under : <span>Party</span>, <span>Alcohol</span>, <span>Drugs</span> <br> <span>PERMALINK</span> |
                    <span>COMMENTS</span> </p>
            </div>
            <div class="article1">
                <h1>BOLD AND EM STYLES</h1>
                <h2>BY MICHAEL ON OCTOBER 26, 2006</h2>
                <p><img id="floatLeft" src="skate.jpg" alt="skate"> Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem
                    difficillimum Caesarem convellere nisu valido cogitabat, eique deliberanti cum proximis clandestinis
                    conloquiis et
                    <strong>STRONG TEXT</strong>, quibusve commentis id fieret, antequam effundendis rebus pertinacius incumberet
                    confidentia, acciri mollioribus scriptis per simulationem <em>EMPHASIZED TEXT</em> nimis urgentis eundem
                    placuerat Gallum, ut auxilio destitutus sine ullo interiret obstaculo.</p>
                <p class="info">Filed under : <span>Weapons</span>, <span>Guns</span>, <span>Ways To Kill</span> <br> <span>PERMALINK</span>                    | <span>COMMENTS</span> </p>
            </div>
            <div class="article1">
                <h1>HOVER NEWS AND QUOTES</h1>
                <h2>BY MICHAEL ON OCTOBER 2, 2006</h2>
                <p><img id="floatRight" src="skate.jpg" alt="skate"> Et quoniam apud eos ut in capite mundi morborum acerbitates
                    celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum
                    sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis <span>CSS PLAY</span>                    satis validum, ut famulos percontatum missos quem ad
                    <blockquote cite="">
                        modum valeant noti hac aegritudine colligati, non ante recipiant domum
                    </blockquote>quam lavacro purgaverint corpus. ita etiam alienis oculis visa metuitur labes.</p>
                <p class="info">Filed under : <span>Politics</span>, <span>Religion</span>, <span>Family Dinner Arguments</span> <br> <span>PERMALINK</span>                    | <span>COMMENTS</span> </p>
            </div>
            <div class="article1">
                <h1>AND DON'T FORGET LISTS</h1>
                <h2>BY MICHAEL ON OCTOBER 26, 2006</h2>
                <p>Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi).
                    <ul>
                        <li>Petit-déjeuner</li>
                        <li>Déjeuner</li>
                        <li>Gouter</li>
                        <li>Dîner</li>
                    </ul>
                    Test liste ordonnée avec des petits chiffres tous mignons... L'entrainement idéal :
                    <ol>
                        <li>Push</li>
                        <li>Pull</li>
                        <li>Squats</li>
                        <li>Hip Hinge</li>
                    </ol>
                </p>
                <p class="info">Filed under : <span>Templates</span>, <span>Alcohol</span>, <span> Drugs</span> <br> <span>PERMALINK</span>                    | <span>COMMENTS</span> </p>
            </div>
            <div class="table">
                <table>
                    <tr>
                        <th>MY LINKS</th>
                        <th>WEB DESIGN</th>
                    </tr>
                    <tr>
                        <td>digg.com</td>
                        <td>CSS play</td>
                    </tr>
                    <tr>
                        <td>Seriously</td>
                        <td>who reads this ?</td>
                    </tr>
                    <tr>
                        <td>My name</td>
                        <td>is Sacha</td>
                    </tr>
                    <tr>
                        <td>I have</td>
                        <td>Two Cats</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="main-right">
            <div class="article2">
                <p id="title">FREE <br>STYLE</p>
            </div>
            <div class="article2">
                <ul id="star">
                    <li>HOME PAGE</li>
                    <li>COOL LINKS</li>
                    <li>MY ARTWORK</li>
                    <li>CALENDAR</li>
                    <li>CONTACT ME</li>
                </ul>
            </div>
            <div class="article2">
                <h1>RECENT UPDATES</h1>
                <h2>LAST UPDATED: 10/31/06</h2>
                <p id="updates">
                    FIRST NEWS ITEM<br> OCTOBER SURPRISE<br> DON'T FORGET TO VOTE<br> HOVER NEWS ROCKS!<br> OWD GETS AN UPDATE<br>                    USE AS LINK LIST<br> TAKING NAMES<br> KEEP IT UNDER 8 ITEMS<br>
                </p>
            </div>
            <div class="article2">
                <h1>SIDE ITEM</h1>
                <h2>A NOTE, FORM, OR AD</h2>
                <P>Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves
                    apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus,
                    acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.</P>
            </div>
        </div>
        <!--      <img src="footer.gif" alt="footer">  -->
    </div>
    <div id="footer">
        <p>&copy; blablabla | on s'en fiche à ce stade | Vous avez vu derrière vous ?</p>
    </div>
</body>
	body {
	background: linear-gradient(to right, #000000, #4F4F4F, #000000);
	}

	img {
	border: solid yellow 2px;
	padding: 2px;
	}

	blockquote {
	background: darkslategrey;
	border-bottom: solid yellow 2px;
	border-top: solid yellow 2px;
	padding: 8px;
	}

	#floatLeft {
	float: left;
	margin-right: 10px;
	}

	#floatRight {
	float: right;
	margin-left: 10px;
	}

	.page {
	width: 720px;
	margin: auto;
	position: relative;
	color: white;
	display: flex;
	flex-direction: row;
	background: url(full.jpg) repeat-y;
	overflow: hidden;
	}

	#bigLogo {
	position: absolute;
	top: -2;
	right: 0;
	border: none;
	z-index: 0;
	}

	#middle {
	position: absolute;
	top: -2;
	right: 286;
	border: none;
	z-index: 0;
	}

	.main-left {
	display: flex;
	flex-direction: column;
	width: 55%;
	padding: 10px 25px 10px 10px;
	}

	.main-right {
	display: flex;
	flex-direction: column;
	width: 45%;
	padding: 20px;
	}

	h1 {
	font-family: Arial Black, sans-serif;
	color: #FFF;
	border-top: solid yellow 5px;
	margin-bottom: 0;
	font-size: 23px;
	}

	.main-left h2 {
	font-family: Arial Black, sans-serif;
	color: black;
	background: yellow;
	margin-top: 0;
	font-size: 15px;
	padding-left: 5px;
	}

	.main-right h2 {
	font-family: Arial Black, sans-serif;
	color: deeppink;
	background: yellow;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 15px;
	padding-left: 5px;
	}

	p {
	color: lightgrey;
	}

	.article1 {
	padding: 20px 20px 0 20px;
	margin-bottom: 0;
	width: 100%;
	}

	span {
	color: yellow;
	}

	.info {
	border-left: solid yellow 5px;
	padding-left: 5px;
	margin-bottom: 0;
	}

	em {
	font-family: Georgia, 'Times New Roman', Times, serif;
	}

	.article1 ul li {
	list-style: url(bullet.gif);
	margin: 5px;
	}

	ol li {
	margin: 5px;
	}

	table {
	padding: 20px 0;
	margin: auto;
	border-spacing: 50px 0;
	border-collapse: separate;
	table-layout: fixed;
	}

	tr {
	width: 2%;
	}

	td {
	background-color: darkslategrey;
	color: grey;
	padding: 15px 10px 15px 10px;
	border-bottom: 2px solid grey;
	border-top: 2px solid grey;
	width: 50%;
	}

	th {
	padding-left: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 0;
	text-align: left;
	color: white;
	}

	#title {
	font-size: 45px;
	font-weight: 900;
	line-height: 73%;
	padding-top: 65px;
	text-align: center;
	height: 250px;
	box-sizing: border-box;
	color: white;
	}

	.article2 {
	padding: 20px;
	position: relative;
	z-index: 1;
	}

	.article2 p {
	color: white;
	border: solid yellow 5px;
	padding: 10px;
	margin-top: 0;
	}

	#title {
	border: none;
	}

	#star {
	list-style: url(star1.jpg);
	}

	#star:hover {
	list-style: url(star2.jpg);
	}

	#updates {
	border: solid yellow 5px;
	margin-top: 0;
	padding-left: 10px;
	line-height: 135%;
	color: white;
	font-weight: 500;
	}

	#footer {
	text-align: center;
	}
	<!DOCTYPE>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Sacha GRASSO</title>
	<link rel="stylesheet" href="maquette.css">
	</head>

	<body>
	<div class="page">
	<img id="bigLogo" src="title.jpg" alt="title">
	<img id="middle" src="middle.jpg" alt="middle">
	<div class="main-left">
	<div class="article1">
	<h1>WELCOME TO MY BLOG</h1>
	<h2>BY MICHAEL ON OCTOBER 31, 2006</h2>
	<p>this template was inspired by some artist friends of mine and i hope you find it useful. You can replace
	the title to the left by changing the text in the HTML or by using a bitmap <span>graphics application</span> to modify the background graphic and add your own styled text.<br>Lorem ipsum dolor sit amet, consectetuer
	adispiscing elit, sed diam nonummy blablabla.
	</p>
	<p class="info">Filed under : <span>Party</span>, <span>Alcohol</span>, <span>Drugs</span> <br> <span>PERMALINK</span> \|
	<span>COMMENTS</span> </p>
	</div>
	<div class="article1">
	<h1>BOLD AND EM STYLES</h1>
	<h2>BY MICHAEL ON OCTOBER 26, 2006</h2>
	<p><img id="floatLeft" src="skate.jpg" alt="skate"> Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem
	difficillimum Caesarem convellere nisu valido cogitabat, eique deliberanti cum proximis clandestinis
	conloquiis et
	<strong>STRONG TEXT</strong>, quibusve commentis id fieret, antequam effundendis rebus pertinacius incumberet
	confidentia, acciri mollioribus scriptis per simulationem <em>EMPHASIZED TEXT</em> nimis urgentis eundem
	placuerat Gallum, ut auxilio destitutus sine ullo interiret obstaculo.</p>
	<p class="info">Filed under : <span>Weapons</span>, <span>Guns</span>, <span>Ways To Kill</span> <br> <span>PERMALINK</span> \| <span>COMMENTS</span> </p>
	</div>
	<div class="article1">
	<h1>HOVER NEWS AND QUOTES</h1>
	<h2>BY MICHAEL ON OCTOBER 2, 2006</h2>
	<p><img id="floatRight" src="skate.jpg" alt="skate"> Et quoniam apud eos ut in capite mundi morborum acerbitates
	celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum
	sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis <span>CSS PLAY</span> satis validum, ut famulos percontatum missos quem ad
	<blockquote cite="">
	modum valeant noti hac aegritudine colligati, non ante recipiant domum
	</blockquote>quam lavacro purgaverint corpus. ita etiam alienis oculis visa metuitur labes.</p>
	<p class="info">Filed under : <span>Politics</span>, <span>Religion</span>, <span>Family Dinner Arguments</span> <br> <span>PERMALINK</span> \| <span>COMMENTS</span> </p>
	</div>
	<div class="article1">
	<h1>AND DON'T FORGET LISTS</h1>
	<h2>BY MICHAEL ON OCTOBER 26, 2006</h2>
	<p>Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi).
	<ul>
	<li>Petit-déjeuner</li>
	<li>Déjeuner</li>
	<li>Gouter</li>
	<li>Dîner</li>
	</ul>
	Test liste ordonnée avec des petits chiffres tous mignons... L'entrainement idéal :
	<ol>
	<li>Push</li>
	<li>Pull</li>
	<li>Squats</li>
	<li>Hip Hinge</li>
	</ol>
	</p>
	<p class="info">Filed under : <span>Templates</span>, <span>Alcohol</span>, <span> Drugs</span> <br> <span>PERMALINK</span> \| <span>COMMENTS</span> </p>
	</div>
	<div class="table">
	<table>
	<tr>
	<th>MY LINKS</th>
	<th>WEB DESIGN</th>
	</tr>
	<tr>
	<td>digg.com</td>
	<td>CSS play</td>
	</tr>
	<tr>
	<td>Seriously</td>
	<td>who reads this ?</td>
	</tr>
	<tr>
	<td>My name</td>
	<td>is Sacha</td>
	</tr>
	<tr>
	<td>I have</td>
	<td>Two Cats</td>
	</tr>
	</table>
	</div>
	</div>
	<div class="main-right">
	<div class="article2">
	<p id="title">FREE <br>STYLE</p>
	</div>
	<div class="article2">
	<ul id="star">
	<li>HOME PAGE</li>
	<li>COOL LINKS</li>
	<li>MY ARTWORK</li>
	<li>CALENDAR</li>
	<li>CONTACT ME</li>
	</ul>
	</div>
	<div class="article2">
	<h1>RECENT UPDATES</h1>
	<h2>LAST UPDATED: 10/31/06</h2>
	<p id="updates">
	FIRST NEWS ITEM<br> OCTOBER SURPRISE<br> DON'T FORGET TO VOTE<br> HOVER NEWS ROCKS!<br> OWD GETS AN UPDATE<br> USE AS LINK LIST<br> TAKING NAMES<br> KEEP IT UNDER 8 ITEMS<br>
	</p>
	</div>
	<div class="article2">
	<h1>SIDE ITEM</h1>
	<h2>A NOTE, FORM, OR AD</h2>
	<P>Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves
	apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus,
	acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.</P>
	</div>
	</div>
	<!-- <img src="footer.gif" alt="footer"> -->
	</div>
	<div id="footer">
	<p>© blablabla \| on s'en fiche à ce stade \| Vous avez vu derrière vous ?</p>
	</div>
	</body>