Skip to content

Instantly share code, notes, and snippets.

@AvgustPol

AvgustPol/.html

Last active September 23, 2019 14:29
Show Gist options
  • Save AvgustPol/cce94314d2017dc620b6cac0499cbfd7 to your computer and use it in GitHub Desktop.
Save AvgustPol/cce94314d2017dc620b6cac0499cbfd7 to your computer and use it in GitHub Desktop.
Download ZIP
Battle ships layout template - Made with love for the Friendly Ghost ;)
Raw
.html
<!DOCTYPE html>
<html>
<head>
<!--bootstrap 4 via link-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<!-- #region simple template -->
<div class="row text-center">
<div class="col ">
<h1 class="display-1">Battle ships field</h1>
</div>
</div>
<hr />
<div class="row text-center">
<div class="col ">
<h1 class="display-2">Version 1 - easy booststap </h1>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col-1 border border-primary panel">&#8203</div> <!-- empty symbol -->
<div class="col-1 border border-primary panel">A</div>
<div class="col-1 border border-primary panel">B</div>
<div class="col-1 border border-primary panel">C</div>
<div class="col-1 border border-primary panel">D</div>
<div class="col-1 border border-primary panel">E</div>
<div class="col-1 border border-primary panel">F</div>
<div class="col-1 border border-primary panel">G</div>
<div class="col-1 border border-primary panel">H</div>
<div class="col-1 border border-primary panel">I</div>
<div class="col-1 border border-primary panel">J</div>
<div class="col-1 border border-primary panel">&#8203</div> <!-- empty symbol -->
</div>
<!--here should be "for" instruction-->
<div class="row">
<div class="col-1 border border-primary panel ">&#8203</div> <!-- empty symbol -->
<div class="col-1 border border-primary panel ">Foo</div>
<div class="col-1 border border-primary panel ">Foo</div>
<div class="col-1 border border-primary panel ">Foo</div>
<div class="col-1 border border-primary panel ">Foo</div>
<div class="col-1 border border-primary panel ">Foo</div>
<div class="col-1 border border-primary panel ">Foo</div>
<div class="col-1 border border-primary panel ">Foo</div>
<div class="col-1 border border-primary panel ">Foo</div>
<div class="col-1 border border-primary panel ">Foo</div>
<div class="col-1 border border-primary panel ">Foo</div>
<div class="col-1 border border-primary panel ">&#8203</div> <!-- empty symbol -->
</div>
</div>
<div class="row text-center">
<div class="col ">
<h1 class="display-2">Version 2 - hardcoded 10x10 </h1>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">&#8203</div> <!-- empty symbol -->
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">A</div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">B</div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">C</div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">D</div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">E</div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">F</div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">G</div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">H</div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">I</div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">J</div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">&#8203</div> <!-- empty symbol -->
</div>
<div class="row">
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">&#8203</div> <!-- empty symbol -->
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px"><div class="align-self-center">Foo</div></div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px"><div class="align-self-center">Foo</div></div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px"><div class="align-self-center">Foo</div></div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px"><div class="align-self-center">Foo</div></div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px"><div class="align-self-center">Foo</div></div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px"><div class="align-self-center">Foo</div></div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px"><div class="align-self-center">Foo</div></div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px"><div class="align-self-center">Foo</div></div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px"><div class="align-self-center">Foo</div></div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px"><div class="align-self-center">Foo</div></div>
<div class="col-1 border border-primary panel" style="width: 100px; height: 100px">&#8203</div> <!-- empty symbol -->
</div>
</div>
<!-- #endregion -->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment