Skip to content

Instantly share code, notes, and snippets.

@hsablonniere

hsablonniere/41Jbxj3MxTx.css

Last active March 18, 2016 22:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hsablonniere/d4a667aa095f4ff9a133 to your computer and use it in GitHub Desktop.
Save hsablonniere/d4a667aa095f4ff9a133 to your computer and use it in GitHub Desktop.
Download ZIP
CSS pour les nuls - 👽51
Raw
41Jbxj3MxTx.css
.container {
border: 1px solid #777;
box-sizing: border-box;
font-family: sans-serif;
font-weight: bold;
padding: 5px;
}
.box {
box-sizing: border-box;
font-size: 12px;
height: 50px;
text-align: center;
width: 75px;
}
.gray {
border: 3px solid gray;
color: gray;
}
.blue {
border: 6px solid blue;
color: blue;
}
.red {
border: 9px solid red;
color: red;
}
.gray .box-nb {
text-align: left;
}
.red .box-nb {
text-align: right;
}
Raw
41PginMx6g.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="title-wrapper">
<div class="title">
<span class="marked">{</span> display<span class="marked">:</span> ?<span class="marked">; }</span>
</div>
</div>
</body>
</html>
Raw
41vxlo3flpx.css
.main {
border: 5px solid blue;
}
.menu {
background: tomato;
}
.contents {
background: lime;
}
Raw
41Xllo3Mg6l.html
<!DOCTYPE html>
<html>
<head><link href="EJEges2Meax.css" rel="stylesheet"></head>
<body>
<div class="blue">
<div class="lime">
<div class="box">box</div>
</div>
</div>
<h1>Lorem</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa possimus dignissimos minima, a quia ut. Harum, inventore, explicabo! Quod iure, ratione quae maiores voluptatem deleniti cum veritatis labore totam qui!</div>
<div>Libero nam officia corporis fuga sint, quisquam unde incidunt dolore sequi praesentium, nobis ut magnam recusandae, dolorem consectetur itaque, mollitia quaerat a eaque esse necessitatibus laborum amet sit. Perferendis, dolor!</div>
<div>Aspernatur ab consequuntur minus ad rerum doloribus harum delectus nisi numquam tenetur totam, obcaecati cupiditate odit iste repellat debitis dolorum sint? Quo sit, aliquam quas numquam dignissimos sequi officiis facere.</div>
<div>Odio vitae recusandae excepturi, laborum! Eligendi harum ipsum illo excepturi cupiditate culpa minus facilis maxime. Recusandae optio unde doloremque. Iste adipisci sint qui nihil non in amet voluptatibus similique tempore!</div>
<div>Qui ut quo illo quaerat officiis itaque, expedita perspiciatis earum nisi, ipsum, molestiae laboriosam! Iste vel fuga beatae consectetur consequuntur nam officiis aspernatur illo ad, totam earum nesciunt temporibus quaerat.</div>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
4JarS6Mpl.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
4k0ljhMx6x.html
<!DOCTYPE html>
<html>
<head><link href="E1yxxi2GgTx.css" rel="stylesheet"></head>
<body>
<div class="box">
<div class="inner-box">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime itaque odio laudantium quam, voluptates placeat obcaecati fuga quis cum eius excepturi optio eveniet aperiam accusamus, minus ratione sed unde, vero.</div>
<div>Minus ullam, commodi voluptas maxime officiis laborum quae delectus ad nesciunt provident perferendis voluptatibus tenetur amet culpa sit, enim eligendi architecto sed hic iste! Nulla autem, veniam voluptate illo ab.</div>
<div>Provident molestiae voluptatem quibusdam vero, in laudantium magni facere, eum sint facilis repellendus harum repellat velit ab non iusto nobis repudiandae ut, asperiores tempora, iure voluptates officiis ipsum. Magni, culpa!</div>
<div>Quod molestias, consequatur eum numquam id a voluptatibus. Necessitatibus tempore molestias suscipit vero iste cupiditate nobis amet laboriosam similique, voluptatum non ea, totam magni accusantium expedita culpa officia fuga. Facilis.</div>
<div>Minus, aut earum dolorem, neque commodi quidem pariatur reprehenderit perspiciatis nostrum assumenda et, officia est. Ea rerum ad similique nulla, iure quidem voluptatum! Est corporis dolorem, aspernatur sed dignissimos eum?</div>
<div>Aperiam sint, quam odio temporibus magnam? Perspiciatis velit aut minima qui, adipisci esse consectetur itaque placeat, accusantium, deleniti similique a, repudiandae. Officia consequuntur sit quo eveniet maiores nulla tenetur facere.</div>
<div>Delectus rerum, non voluptate quam quidem optio cum. Quo iure, necessitatibus reprehenderit provident. Illo maiores architecto quis nemo ipsum obcaecati nisi excepturi, odit quasi unde. Quibusdam facilis cum, saepe sunt.</div>
<div>Sequi quia, architecto ex quam temporibus iusto quisquam alias laudantium, dolores at assumenda facilis, nobis mollitia consectetur. Quasi id voluptatibus quaerat? Fuga ipsam natus eligendi soluta? Velit sequi id harum!</div>
<div>Nisi, sed iusto dicta laudantium enim. Eius enim praesentium nisi veritatis temporibus consequuntur doloribus officiis quasi perferendis, ipsum. Dolor ipsa eius fuga ducimus vitae voluptate beatae, totam fugit at quis.</div>
<div>Nam velit natus non dolorum tempore, voluptatum ducimus aut nemo, similique reiciendis soluta harum sed culpa quaerat neque ad ex laudantium. Sapiente soluta adipisci error nulla quibusdam deleniti quod repellendus.</div>
</div>
</div>
</body>
</html>
Raw
E1oegohGeal.html
<!DOCTYPE html>
<html>
<head><link href="VJ2xxjhMe6e.css" rel="stylesheet"></head>
<body>
<div>Accusamus adipisci suscipit unde molestiae culpa architecto magnam quia nulla.</div>
<img class="cat1" src="N1fuSazTe.jpg">
<div class="lorem-blue">Lorem ipsum 1... Lorem ipsum 11... Lorem ipsum 111...</div>
<div class="after-blue">Ut incidunt, laboriosam. Tempora in dolorem accusantium magni officia quos delectus amet incidunt dolore? Pariatur aliquid numquam magnam quas ab maiores quae odit quia, fugiat dignissimos libero earum. Aliquid, odio.</div>
<img class="cat2" src="N1fuSazTe.jpg">
<div class="lorem-green">Lorem ipsum 2... Lorem ipsum 22... Lorem ipsum 222...</div>
<div class="after-green">Dolore eius distinctio, neque excepturi voluptates, obcaecati aspernatur eveniet soluta laboriosam quod, in assumenda culpa atque laudantium! A sunt aspernatur quaerat, mollitia ipsam beatae et obcaecati sed, voluptatum, quos minima?</div>
<div>Ipsum omnis earum odio. Maiores molestiae molestias accusantium perferendis magnam eum tempore consequatur ducimus doloremque nesciunt, nihil quas harum eligendi temporibus exercitationem aperiam, labore rem assumenda reprehenderit quo voluptas. Maxime.</div>
</body>
</html>
Raw
E1Uexo2ze6x.html
<!DOCTYPE html>
<html>
<head><link href="41vxlo3flpx.css" rel="stylesheet"></head>
<body>
<div class="main">
<div class="menu">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
</div>
<div class="contents">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque necessitatibus harum et quo ea omnis aut nemo eveniet excepturi, quae dolorum enim, natus numquam, aperiam, atque nesciunt dolores. Optio, blanditiis.</div>
<div>Quibusdam saepe molestiae rerum quasi! Saepe aliquid porro nemo aut sint necessitatibus sit soluta incidunt. Odit vero, recusandae, et qui vitae nisi, necessitatibus ex consequuntur esse impedit molestias laboriosam enim!</div>
<div>Facilis, suscipit, molestiae. Unde consequuntur exercitationem maxime iusto cumque sint autem rerum velit, repellat, ex eveniet. Numquam debitis reprehenderit natus iusto vero, nihil illo placeat, cumque pariatur officiis beatae corporis!</div>
<div>Deserunt distinctio optio nulla quia eum, ipsa architecto veritatis sit. Harum illo, quod error cumque suscipit ducimus quibusdam aperiam repudiandae blanditiis totam expedita aut, quo soluta, sunt reiciendis explicabo! Non.</div>
<div>Culpa repudiandae dolore, eum fuga molestiae quibusdam, nulla id architecto debitis illo voluptate possimus illum delectus at voluptatum harum nemo qui quaerat dicta adipisci nostrum! Ea ipsa, sequi eius est.</div>
<div>Aperiam labore itaque pariatur amet error. Aliquam placeat necessitatibus inventore, nostrum officia doloribus aperiam at mollitia consequuntur autem dicta deserunt animi neque, totam esse quas. Iusto molestiae ducimus quaerat itaque.</div>
</div>
</div>
</body>
</html>
Raw
E1yxxi2GgTx.css
body {
background: aquamarine;
font-size: 10px;
margin: 0;
}
.box {
background: gold;
/* height: 120px; */
/* width: 120px; */
/* overflow: auto; */
/* margin: 10px; */
/* border: 10px solid tomato; */
/* padding: 10px 20px; */
}
.inner-box {
background: white;
}
Raw
EJEges2Meax.css
.blue,
.lime {
margin: 10px;
padding: 5px;
}
.blue {
border: 3px solid blue;
}
.lime {
border: 3px solid lime;
}
.box {
background: tomato;
height: 50px;
width: 50px;
}
Raw
EJlginMgTx.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="author">
<div class="name">Hubert<br>Sablonnière</div>
<img class="avatar" src="4kr6NTfpl.png">
<div class="links">
<div class="twitter">@hsablonniere</div>
<div class="hashtag">#CSS4newbies</div>
</div>
</div>
<div class="title-wrapper">
<div class="title">
<span class="marked">{</span> css<span class="marked">:</span>
pour-les-nuls<span class="marked">; }</span>
</div>
</div>
<div class="ineat">
<img src="4JarS6Mpl.svg" alt="logo ineat" class="logo">
</div>
</body>
</html>
Raw
index.js
var fs = require('fs');
var shortid = require('shortid');
var man = require('./manifest.json');
man.sections.forEach(function (sec) {
sec.id = shortid.generate();
delete sec.uuid;
sec.files.forEach(function (file) {
var ext = file.filename.split('.')[1];
var newName = shortid.generate() + '.' + ext;
var oldName = file.filename;
file.filename = newName;
fs.rename(oldName, newName, function (err) {
if (err) console.log('ERROR: ' + err);
});
});
});
fs.writeFile('manifest.json', JSON.stringify(man), (err) => {
if (err) throw err;
console.log('It\'s saved!');
});
Raw
manifest.json
{
"name": "CSS pour les nuls",
"sections": [
{
"id": "4ylj2zx6x",
"name": "Titre",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "EJlginMgTx.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
},
{
"id": "NkMxonfxTl",
"name": "Constat",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "VkQls2zeax.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "NJEej2zeag.css"
},
{
"visible": false,
"previewVisible": false,
"filename": "N1reohGxag.js"
}
]
},
{
"id": "4y8ejnfxae",
"name": "Display",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "41PginMx6g.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
},
{
"id": "N1deihMeTx",
"name": "Display : normal flow",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "VJYgjnfepl.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "NJcgonflag.css"
}
]
},
{
"id": "NJilohfgpx",
"name": "Box-model",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "NJnxo2Mgax.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
},
{
"id": "416ljnzxTg",
"name": "Box-model interactif",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "4k0ljhMx6x.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "E1yxxi2GgTx.css"
}
]
},
{
"id": "E1llgj3Gx6x",
"name": "Position",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "Vk-lxj2flTe.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
},
{
"id": "EJMxeo2zx6l",
"name": "Position : exemples",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "41Xllo3Mg6l.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "EJEges2Meax.css"
}
]
},
{
"id": "4JHxgi3Mg6l",
"name": "Position : stretch",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "E1Uexo2ze6x.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "41vxlo3flpx.css"
}
]
},
{
"id": "Nydxlohzxal",
"name": "Float & clear",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "VJFelj2Mgpx.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
},
{
"id": "N15xgjnflpe",
"name": "Float & clear : original",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "E1oegohGeal.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJ2xxjhMe6e.css"
}
]
},
{
"id": "Nkpxxinzxpg",
"name": "Float & clear : basics",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "NkRegj2feTe.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "41Jbxj3MxTx.css"
},
{
"visible": false,
"previewVisible": false,
"filename": "NylZxonGx6e.css"
}
]
},
{
"id": "N1ZWxs3zgTx",
"name": "Merci",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "V1zZei3Gxal.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
}
]
}
Raw
N1reohGxag.js
"use strict";
// foo
Raw
NJcgonflag.css
div,
span {
background: tomato;
}
div {
}
span {
}
Raw
NJEej2zeag.css
html,
body {
height: 100%;
margin: 0;
width: 100%;
}
img {
display: block;
height: 100%;
object-fit: contain;
width: 100%;
}
Raw
NJnxo2Mgax.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="title-wrapper">
<div class="title classic">Le Box Model</div>
</div>
</body>
</html>
Raw
NkRegj2feTe.html
<!DOCTYPE html>
<html>
<head>
<link href="41Jbxj3MxTx.css" rel="stylesheet">
<link href="NylZxonGx6e.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="box gray">
FORFAIT
<div class="box-nb">1</div>
</div>
<div class="box blue">
FORFAIT
<div class="box-nb">2</div>
</div>
<div class="box red">
FORFAIT
<div class="box-nb">3</div>
</div>
</div>
</body>
</html>
Raw
NylZxonGx6e.css
.container {
}
.gray {
}
.blue {
}
.red {
}
Raw
V1zZei3Gxal.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="author">
<div class="name">Hubert<br>Sablonnière</div>
<img class="avatar" src="4kr6NTfpl.png">
<div class="links">
<div class="twitter">@hsablonniere</div>
<div class="hashtag">#CSS4newbies</div>
</div>
</div>
<div class="title-wrapper">
<div class="title">
<span class="marked">{</span> merci<span class="marked">:</span> beaucoup<span class="marked">; }</span>
</div>
</div>
<div class="ineat">
<img src="4JarS6Mpl.svg" alt="logo ineat" class="logo">
</div>
</body>
</html>
Raw
VJ2xxjhMe6e.css
img {
width: 80px;
}
.lorem-blue {
color: blue;
}
.lorem-green {
color: green;
}
.cat1 {
}
.after-blue {
}
.cat2 {
}
.after-green {
}
Raw
VJblo2flpe.css
html,
body {
background: #FF0;
display: flex;
flex-direction: column;
font-family: Helvetica LT Std, Arial, sans-serif;
height: 100%;
justify-content: center;
margin: 0;
}
.author {
align-items: center;
color: #333;
display: flex;
flex: 1;
font-size: 2.5vw;
justify-content: center;
margin-right: 30vw;
padding: 20px;
}
.name,
.links {
line-height: 1.3;
}
.name {
font-weight: bold;
text-align: right;
}
.links {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.avatar {
border-radius: 50%;
display: block;
height: 10vw;
margin: 0 2.5vw 0 3vw;
width: 10vw;
}
.title-wrapper {
align-items: center;
background: black;
display: flex;
justify-content: center;
flex: 3;
max-height: 30vh;
margin: 5vh 0;
outline: 5px dashed #000;
outline-offset: 10px;
transform: skewY(-5deg);
}
.title {
color: #FFF;
font-family: monospace;
font-size: 6vw;
font-weight: bold;
padding: 20px 0;
text-align: center;
}
.classic {
font-family: Helvetica LT Std, Arial, sans-serif;
}
.marked {
color: #FF0;
}
.ineat {
align-items: center;
display: flex;
justify-content: center;
flex: 1;
margin-left: 30vw;
padding: 20px;
}
.logo {
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
-webkit-animation-name: zoom;
-webkit-animation-timing-function: ease-in-out;
display: block;
height: 8vw;
width: 18vw;
}
@-webkit-keyframes zoom {
from {
transform: scale(1);
}
40% {
transform: scale(1);
}
45% {
transform: scale(1.3);
}
50% {
transform: scale(1.2);
}
55% {
transform: scale(1.3);
}
60% {
transform: scale(1);
}
to {
transform: scale(1);
}
}
Raw
VJFelj2Mgpx.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="title-wrapper">
<div class="title">
<span class="marked">{</span> float<span class="marked">:</span> ?<span class="marked">; </span> clear<span class="marked">:</span> ?<span class="marked">; }</span>
</div>
</div>
</body>
</html>
Raw
VJYgjnfepl.html
<!DOCTYPE html>
<html>
<head><link href="NJcgonflag.css" rel="stylesheet"></head>
<body>
<h4>3 divs</h4>
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<h4>3 spans</h4>
<span>span 1</span>
<span>span 2</span>
<span>span 3</span>
</body>
</html>
Raw
Vk-lxj2flTe.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="title-wrapper">
<div class="title">
<span class="marked">{</span> position<span class="marked">:</span> ?<span class="marked">; }</span>
</div>
</div>
</body>
</html>
Raw
VkQls2zeax.html
<!DOCTYPE html>
<html>
<head><link href="NJEej2zeag.css" rel="stylesheet"></head>
<body>
<img src="NyKoHpfag.png">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment