Skip to content

Instantly share code, notes, and snippets.

@MattCrl

MattCrl/stylebs.css Secret

Last active February 15, 2018 09:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save MattCrl/d7cf1dd28288c909dec44f5d5cab195c to your computer and use it in GitHub Desktop.
Save MattCrl/d7cf1dd28288c909dec44f5d5cab195c to your computer and use it in GitHub Desktop.
Download ZIP
queteBootstrap.html
Raw
gistfile1.txt
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylebs.css">
<!-- J'ai bien téléchargé et installé Bootstrap4 en local
mais comme je ne sais pas si tout le monde a installé la version 4 je préfère
mettre le lien du CDN plutôt que le lien du fichier local ci-dessous -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<title>Sauron's Eye</title>
<script>
$(window).on('resize', function(e) {
var test = $(".col-1");
test.css("height", test.width()+'px');
});
$(document).ready(function() {
$(window).trigger('resize');
});
</script>
</head>
<body>
<!-- Line 1 -->
<div class="container">
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="offset-9 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
</div>
</div>
<!-- Line 2 -->
<div class="container">
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="offset-3 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_light"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="offset-3 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
</div>
</div>
<!-- Line 3 -->
<div class="container">
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="offset-2 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_light"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_light"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="offset-2 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
</div>
</div>
<!-- Line 4 -->
<div class="container">
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_light"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_light"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
</div>
</div>
<!-- Line 5 -->
<div class="container">
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="offset-1 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_light"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_light"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="offset-1 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
</div>
</div>
<!-- Line 6 -->
<div class="container">
<div class="row">
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="offset-1 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_light"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 orange_dark"></div>
<div class="offset-1 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
</div>
</div>
<!-- Line 7 -->
<div class="container">
<div class="row">
<div class="offset-1 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="offset-3 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
</div>
</div>
<!-- Line 8 -->
<div class="container">
<div class="row">
<div class="offset-2 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
</div>
</div>
<!-- Line 9 -->
<div class="container">
<div class="row">
<div class="offset-3 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
</div>
</div>
<!-- Line 10 -->
<div class="container">
<div class="row">
<div class="offset-4 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
</div>
</div>
<!-- Line 11 -->
<div class="container">
<div class="row">
<div class="offset-4 col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 dark"></div>
</div>
</div>
</body>
</html>
Raw
stylebs.css
.col-1 {
padding: 8.333333% 0 0 0;
}
.dark {
background-color: black;
border: 1px solid rgb(173, 173, 173);
}
.orange_dark {
background-color: rgb(255, 115, 0);
border: 1px solid rgb(173, 173, 173);
}
.orange_light {
background-color: rgba(255, 208, 0, 0.911);
border: 1px solid rgb(173, 173, 173);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment