Skip to content

Instantly share code, notes, and snippets.

@DavidBruant

DavidBruant/responsive-square.html

Created November 23, 2014 14:18
Show Gist options
  • Save DavidBruant/3a37cabd15ccfce0351f to your computer and use it in GitHub Desktop.
Save DavidBruant/3a37cabd15ccfce0351f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
responsive-square.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>votre superbe page web créée le lun. 26 mai 2014 15:41</title>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
.carré{
width: calc(100%/6);
position: relative;
background-color: indianred;
display: inline-block;
}
.carré::before{
margin-top: 100%;
content: "";
display: block;
}
.carré > *{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.carré > * > *{
position: absolute;
left:0;
right: 0;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
</style>
<!--link rel="stylesheet" href="https://raw.githubusercontent.com/DavidBruant/Better-CSS-defaults/master/better-defaults.css"-->
<!--<script src="data:text/javascript,console.log(performance.now() - (performance.timing.domInteractive - performance.timing.navigationStart))" defer></script> -->
<script>
/*window.onload = function(){
var t = performance.timing;
console.log(t.domComplete - t.navigationStart);
}*/
</script>
</head>
<body>
<div class="carré"><span><span>lorem eg tg rth rh ryh ty tyj tj tuj er zty zyrtyryuryrtu </span></span></div><!--
--><div class="carré"><span><span>ipsum</span></span></div><!--
--><div class="carré"><span><span>dolor</span></span></div><!--
--><div class="carré"><span><span>sit</span></span></div><!--
--><div class="carré"><span><span>amet</span></span></div><!--
--><div class="carré"><span><span>consectetur</span></span></div><!--
--><div class="carré"><span><span>adipiscing</span></span></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment