Skip to content

Instantly share code, notes, and snippets.

@BastienSaulnier

BastienSaulnier/index.html

Created September 13, 2019 14:21
Show Gist options
  • Save BastienSaulnier/290ed0d6f352f85856b86aeee88c9ac4 to your computer and use it in GitHub Desktop.
Save BastienSaulnier/290ed0d6f352f85856b86aeee88c9ac4 to your computer and use it in GitHub Desktop.
Download ZIP
CSS - 09 - Bootstrap : le système de grilles - Wild Code School
Raw
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>findtheprecious.com</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<meta content="IE=edge" http-equiv=X-UA-Compatible>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<!--[if IE 7]>
<link href="css/stylesie7.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->
</head>
<body>
<main>
<div class="container">
<div class="row">
<div class="col-1 no-gutters gray">1</div>
<div class="col-1 no-gutters">2</div>
<div class="col-1 no-gutters">3</div>
<div class="col-1 no-gutters">4</div>
<div class="col-1 no-gutters">5</div>
<div class="col-1 no-gutters">6</div>
<div class="col-1 no-gutters">7</div>
<div class="col-1 no-gutters">8</div>
<div class="col-1 no-gutters">9</div>
<div class="col-1 no-gutters">10</div>
<div class="col-1 no-gutters gray">11</div>
</div>
<div class="row">
<div class="col-1 no-gutters gray">1</div>
<div class="col-1 no-gutters">2</div>
<div class="col-1 no-gutters">3</div>
<div class="col-1 no-gutters">4</div>
<div class="col-1 no-gutters orange">5</div>
<div class="col-1 no-gutters yellow">6</div>
<div class="col-1 no-gutters orange">7</div>
<div class="col-1 no-gutters">8</div>
<div class="col-1 no-gutters">9</div>
<div class="col-1 no-gutters">10</div>
<div class="col-1 no-gutters gray">11</div>
</div>
<div class="row">
<div class="col-1 no-gutters gray">1</div>
<div class="col-1 no-gutters">2</div>
<div class="col-1 no-gutters">3</div>
<div class="col-1 no-gutters orange">4</div>
<div class="col-1 no-gutters yellow">5</div>
<div class="col-1 no-gutters black">6</div>
<div class="col-1 no-gutters yellow">7</div>
<div class="col-1 no-gutters orange">8</div>
<div class="col-1 no-gutters">9</div>
<div class="col-1 no-gutters">10</div>
<div class="col-1 no-gutters gray">11</div>
</div>
<div class="row">
<div class="col-1 no-gutters gray">1</div>
<div class="col-1 no-gutters gray">2</div>
<div class="col-1 no-gutters orange">3</div>
<div class="col-1 no-gutters orange">4</div>
<div class="col-1 no-gutters yellow">5</div>
<div class="col-1 no-gutters black">6</div>
<div class="col-1 no-gutters yellow">7</div>
<div class="col-1 no-gutters orange">8</div>
<div class="col-1 no-gutters orange">9</div>
<div class="col-1 no-gutters gray">10</div>
<div class="col-1 no-gutters gray">11</div>
</div>
<div class="row">
<div class="col-1 no-gutters gray">1</div>
<div class="col-1 no-gutters gray">2</div>
<div class="col-1 no-gutters">3</div>
<div class="col-1 no-gutters orange">4</div>
<div class="col-1 no-gutters yellow">5</div>
<div class="col-1 no-gutters black">6</div>
<div class="col-1 no-gutters yellow">7</div>
<div class="col-1 no-gutters orange">8</div>
<div class="col-1 no-gutters">9</div>
<div class="col-1 no-gutters gray">10</div>
<div class="col-1 no-gutters gray">11</div>
</div>
<div class="row">
<div class="col-1 no-gutters">1</div>
<div class="col-1 no-gutters gray">2</div>
<div class="col-1 no-gutters gray">3</div>
<div class="col-1 no-gutters">4</div>
<div class="col-1 no-gutters orange">5</div>
<div class="col-1 no-gutters yellow">6</div>
<div class="col-1 no-gutters orange">7</div>
<div class="col-1 no-gutters">8</div>
<div class="col-1 no-gutters gray">9</div>
<div class="col-1 no-gutters gray">10</div>
<div class="col-1 no-gutters">11</div>
</div>
<div class="row">
<div class="col-1 no-gutters">1</div>
<div class="col-1 no-gutters">2</div>
<div class="col-1 no-gutters gray">3</div>
<div class="col-1 no-gutters gray">4</div>
<div class="col-1 no-gutters">5</div>
<div class="col-1 no-gutters">6</div>
<div class="col-1 no-gutters">7</div>
<div class="col-1 no-gutters gray">8</div>
<div class="col-1 no-gutters gray">9</div>
<div class="col-1 no-gutters">10</div>
<div class="col-1 no-gutters">11</div>
</div>
<div class="row">
<div class="col-1 no-gutters">1</div>
<div class="col-1 no-gutters">2</div>
<div class="col-1 no-gutters gray">3</div>
<div class="col-1 no-gutters gray">4</div>
<div class="col-1 no-gutters gray">5</div>
<div class="col-1 no-gutters gray">6</div>
<div class="col-1 no-gutters gray">7</div>
<div class="col-1 no-gutters gray">8</div>
<div class="col-1 no-gutters gray">9</div>
<div class="col-1 no-gutters">10</div>
<div class="col-1 no-gutters">11</div>
</div>
<div class="row">
<div class="col-1 no-gutters">1</div>
<div class="col-1 no-gutters">2</div>
<div class="col-1 no-gutters">3</div>
<div class="col-1 no-gutters gray">4</div>
<div class="col-1 no-gutters gray">5</div>
<div class="col-1 no-gutters gray">6</div>
<div class="col-1 no-gutters gray">7</div>
<div class="col-1 no-gutters gray">8</div>
<div class="col-1 no-gutters">9</div>
<div class="col-1 no-gutters">10</div>
<div class="col-1 no-gutters">11</div>
</div>
<div class="row">
<div class="col-1 no-gutters">1</div>
<div class="col-1 no-gutters">2</div>
<div class="col-1 no-gutters">3</div>
<div class="col-1 no-gutters">4</div>
<div class="col-1 no-gutters gray">5</div>
<div class="col-1 no-gutters gray">6</div>
<div class="col-1 no-gutters gray">7</div>
<div class="col-1 no-gutters">8</div>
<div class="col-1 no-gutters">9</div>
<div class="col-1 no-gutters">10</div>
<div class="col-1 no-gutters">11</div>
</div>
<div class="row">
<div class="col-1 no-gutters">1</div>
<div class="col-1 no-gutters">2</div>
<div class="col-1 no-gutters">3</div>
<div class="col-1 no-gutters">4</div>
<div class="col-1 no-gutters gray">5</div>
<div class="col-1 no-gutters gray">6</div>
<div class="col-1 no-gutters gray">7</div>
<div class="col-1 no-gutters">8</div>
<div class="col-1 no-gutters">9</div>
<div class="col-1 no-gutters">10</div>
<div class="col-1 no-gutters">11</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</body>
</html>
Raw
style.css
@charset "utf-8";
//width: ~"calc(50% - 20px)";
header, section, footer, aside, nav, main, article, figure {
display: block;
}
div, header, nav, article, section, aside, footer, h1, h2, h3, h4, h5, h6, p, a, ul, li, figure, figcaption, class, img {
margin: 0;
padding: 0;
}
*{
box-sizing: border-box;
}
html, body {
height: 100%;
background-color: white;
border: 0 solid transparent;
font-size: 16px;
margin: 0;
min-height: 100%;
padding: 0;
width: 100%;
display: block;
font-family: 'Roboto', sans-serif;
}
footer {
margin-top: auto;
}
img, object, embed, canvas, video, audio, picture, svg {
max-width: 100%;
height: auto;
}
img {
display: block;
}
a {
text-decoration: none;
color: black;
}
/* ------------------------------- RECURENTES -- */
.clear {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
.center {
width: 960px;
margin: 0 auto;
}
/* ------------------------------- END RECURENTES -- */
/* ------------------------------- SIMILAIRES ------ */
/* ------------------------------- END SIMILAIRES -- */
div.container div.row div.col-1 div.no-gutter {
background-color: red;
height: 80px;
}
div {
color: transparent;
}
.gray {
background-color: darkslategray;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.black {
background-color: black;
}
/* ------------------------ MEDIA QUERIES 960px ---- */
@media screen and (max-width: 960px) {
.center {
width: 100%;
margin: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment