Skip to content

Instantly share code, notes, and snippets.

@gaspaonrocks

gaspaonrocks/maquette.css

Created March 4, 2017 21:00
Show Gist options
  • Save gaspaonrocks/2eb33dcb3184d889d41574f511d92b1d to your computer and use it in GitHub Desktop.
Save gaspaonrocks/2eb33dcb3184d889d41574f511d92b1d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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;
}
Raw
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>
@gaspaonrocks
Copy link
Author

Soyez indulgent svp...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment