Skip to content

Instantly share code, notes, and snippets.

@Wenhuan2516

Wenhuan2516/index.html

Created February 20, 2019 20:39
Show Gist options
  • Save Wenhuan2516/954749a512f8f2499766c5c000883a1c to your computer and use it in GitHub Desktop.
Save Wenhuan2516/954749a512f8f2499766c5c000883a1c to your computer and use it in GitHub Desktop.
Download ZIP
Chessboard // source https://jsbin.com/risahax
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Chessboard</title>
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/just-letters" type="text/css"/>
<style id="jsbin-css">
html.body{
height:100%;
margin:0
}
body {
background-image:url("http://3.bp.blogspot.com/-aNRb0w9Uu2E/Uk0w1v9lXjI/AAAAAAAAHrM/RipxfZqlQQ4/s1600/Texture-Backgrounds-Wallpaper-HD.jpg");
}
.row{
position:relative;
margin-left:10%;
margin-right:10%;
}
.clear{
clear:both
}
.white{
border: 1px solid black;
width: 10%;
height: 60px;
background-color:white;
float:left;
}
.black{
border: 1px solid black;
width: 10%;
height: 60px;
background-color:#787878;
float:left;
}
#footer {
border:solid 1px;
padding: 10px;
margin:10px;
text-align:center;
background-color:lightyellow;
}
#container {
margin-top:20%;
margin-left:10%;
margin-right:10%;
margin-bottom:5%;
}
#title {
position:fixed;
top:0px;
left:0px;
padding:10px;
margin:0px;
width:100%;
background-color:lightyellow;
text-align:center;
z-index:10;
font-family: 'JustLettersMedium';
font-weight: normal;
font-style: normal;
font-size:36px;
}
</style>
</head>
<body>
<h1 id="title">Chessboard</h1>
<div id="container">
<div class="row"> <!-- Row 1 -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
</div>
<div class="clear"> </div>
<div class="row"> <!-- Row 2 -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
</div>
<div class="clear"> </div>
<div class="row"> <!-- Row 3 -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
</div>
<div class="clear"> </div>
<div class="row"> <!-- Row 4 -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
</div>
<div class="clear"> </div>
<div class="row"> <!-- Row 5 -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
</div>
<div class="clear"> </div>
<div class="row"> <!-- Row 6 -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
</div>
<div class="clear"> </div>
<div class="row"> <!-- Row 7 -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
</div>
<div class="clear"> </div>
<div class="row"> <!-- Row 8 -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
</div>
<div class="clear"> </div>
<!-- End of container-->
<div id="footer"><p><a href="https://validator.w3.org/nu/check?uri=referer" target="_blank">NU HTML Checker </a><br>
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"></a></p></div>
<script id="jsbin-source-css" type="text/css">html.body{
height:100%;
margin:0
}
body {
background-image:url("http://3.bp.blogspot.com/-aNRb0w9Uu2E/Uk0w1v9lXjI/AAAAAAAAHrM/RipxfZqlQQ4/s1600/Texture-Backgrounds-Wallpaper-HD.jpg");
}
.row{
position:relative;
margin-left:10%;
margin-right:10%;
}
.clear{
clear:both
}
.white{
border: 1px solid black;
width: 10%;
height: 60px;
background-color:white;
float:left;
}
.black{
border: 1px solid black;
width: 10%;
height: 60px;
background-color:#787878;
float:left;
}
#footer {
border:solid 1px;
padding: 10px;
margin:10px;
text-align:center;
background-color:lightyellow;
}
#container {
margin-top:20%;
margin-left:10%;
margin-right:10%;
margin-bottom:5%;
}
#title {
position:fixed;
top:0px;
left:0px;
padding:10px;
margin:0px;
width:100%;
background-color:lightyellow;
text-align:center;
z-index:10;
font-family: 'JustLettersMedium';
font-weight: normal;
font-style: normal;
font-size:36px;
}</script>
</body>
</html>
Raw
jsbin.risahax.css
html.body{
height:100%;
margin:0
}
body {
background-image:url("http://3.bp.blogspot.com/-aNRb0w9Uu2E/Uk0w1v9lXjI/AAAAAAAAHrM/RipxfZqlQQ4/s1600/Texture-Backgrounds-Wallpaper-HD.jpg");
}
.row{
position:relative;
margin-left:10%;
margin-right:10%;
}
.clear{
clear:both
}
.white{
border: 1px solid black;
width: 10%;
height: 60px;
background-color:white;
float:left;
}
.black{
border: 1px solid black;
width: 10%;
height: 60px;
background-color:#787878;
float:left;
}
#footer {
border:solid 1px;
padding: 10px;
margin:10px;
text-align:center;
background-color:lightyellow;
}
#container {
margin-top:20%;
margin-left:10%;
margin-right:10%;
margin-bottom:5%;
}
#title {
position:fixed;
top:0px;
left:0px;
padding:10px;
margin:0px;
width:100%;
background-color:lightyellow;
text-align:center;
z-index:10;
font-family: 'JustLettersMedium';
font-weight: normal;
font-style: normal;
font-size:36px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment