Skip to content

Instantly share code, notes, and snippets.

@AurelieBayre

AurelieBayre/index.html

Last active February 11, 2018 19:03
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 AurelieBayre/8f23c478a66b11ec431f4321cdcb0091 to your computer and use it in GitHub Desktop.
Save AurelieBayre/8f23c478a66b11ec431f4321cdcb0091 to your computer and use it in GitHub Desktop.
Download ZIP
Playing with Bootstrap and Sauron's eye
Raw
index.html
<!-- NB:
je rappelle cette phrase du cours:
"Tu peux alors décider d'organiser le contenu de ton site en utilisant, pour chaque élément, une ou plusieurs colonnes."
Ma solution:
* est responsive
* ne se déforme pas que ce soit sur des petits écrans ou des grands écrans.
* en outre, mon image tient tout entière sur l'écran (petit ou grand),
ce qui n'est le cas d'aucune solution que j'ai vu jusqu'à présent.
J'ai vu des solutions validés avec des alignements tordus sur les petits écrans,
ou bien, si elles avaient la capacité de rester bien alignés tout le temps,
les carrés devenaient rectangulaires sur les grands écrans.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Master Sees Everything...</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="steyele.css">
</head>
<body>
<div class="cadre">
<div class="container-fluid">
<!--first row -->
<div class="row">
<div class="col-xs-12">
<div class="black square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="black square"></div>
</div>
</div>
<!--second row -->
<div class="row">
<div class="col-xs-12">
<div class="black square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="orange square"></div>
<div class="yellow square"></div>
<div class="orange square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="black square"></div>
</div>
</div>
<!--third row -->
<div class="row">
<div class="col-xs-12">
<div class="black square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="orange square"></div>
<div class="yellow square"></div>
<div class="black square"></div>
<div class="yellow square"></div>
<div class="orange square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="black square"></div>
</div>
</div>
<!--fourth row -->
<div class="row">
<div class="col-xs-12">
<div class="black square"></div>
<div class="black square"></div>
<div class="orange square"></div>
<div class="orange square"></div>
<div class="yellow square"></div>
<div class="black square"></div>
<div class="yellow square"></div>
<div class="orange square"></div>
<div class="orange square"></div>
<div class="black square"></div>
<div class="black square"></div>
</div>
</div>
<!--fifth row -->
<div class="row">
<div class="col-xs-12">
<div class="black square"></div>
<div class="black square"></div>
<div class="square"></div>
<div class="orange square"></div>
<div class="yellow square"></div>
<div class="black square"></div>
<div class="yellow square"></div>
<div class="orange square"></div>
<div class="square"></div>
<div class="black square"></div>
<div class="black square"></div>
</div>
</div>
<!--sixth row -->
<div class="row">
<div class="col-xs-12">
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="square"></div>
<div class="orange square"></div>
<div class="yellow square"></div>
<div class="orange square"></div>
<div class="square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
</div>
</div>
<!--seventh row -->
<div class="row">
<div class="col-xs-12">
<div class="square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="square"></div>
</div>
</div>
<!--eigth row -->
<div class="row">
<div class="col-xs-12">
<div class="square"></div>
<div class="square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
<!--ninth row -->
<div class="row">
<div class="col-xs-12">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
<!--tenth row -->
<div class="row">
<div class="col-xs-12">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
<!--eleventh row -->
<div class="row">
<div class="col-xs-12">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="black square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
steyele.css
body {
background-color: whitesmoke;
}
.cadre {
width: 100%;
margin-top: 5vw;
margin-left: 5vw;
}
/* Setting the colors */
.white {
background-color: white;
}
.black {
background-color: black;
}
.yellow {
background-color: yellow;
}
.orange {
background-color: orange;
}
.red {
background-color: red;
}
/*setting dimensions and placement properties for squares */
.square {
border: 1px solid whitesmoke;
float: left;
height: calc(100vw / 24);
width: calc(100vw / 24);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment