@syngrisi/syngrisi
Version:
Syngrisi - Visual Testing Tool
73 lines (68 loc) • 2.46 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/common.min.css">
<style>
.row {
min-height: 350px; /* 1400/4 */
}
.col {
padding-top: 118px;
min-height: 350px; /* 1300/4 */
/*min-width: 225px;*/
background-color: #9fcdff;
}
.col:hover {
background-color: #85144B ;
}
#external-element-wrapper {
min-width: 950px;
max-width: 950px;
min-height: 1550px;
max-height: 1550px;
}
#external-element {
min-width: 800px;
max-width: 800px;
}
</style>
<title>Desktop Grid</title>
</head>
<body>
<div id="external-element-wrapper"
class="container p-3 text-center h-100">
<span class="display-4 text-secondary">800x1400</span>
<div id="external-element"
class="container m-3 border border-secondary text-center align-items-center display-3 text-dark">
<div class="row align-items-center">
<div class="col cl" id="col-1">1</div>
<div class="col" id="col-2">2</div>
<div class="col" id="col-3">3</div>
<div class="col" id="col-4">4</div>
</div>
<div class="row align-items-center">
<div class="col" id="col-5">5</div>
<div class="col bg-secondary text-light" id="col-6"><span>6</span></div>
<div class="col border border-secondary bg-light" id="col-7">7</div>
<div class="col" id="col-8">8</div>
</div>
<div class="row align-items-center">
<div class="col" id="col-9">9</div>
<div class="col border border-secondary bg-light" id="col-10">10</div>
<div class="col bg-secondary text-light cl" id="col-11">11</div>
<div class="col" id="col-12">12</div>
</div>
<div class="row align-items-center">
<div class="col" id="col-13">13</div>
<div class="col" id="col-14">14</div>
<div class="col" id="col-15">15</div>
<div class="col" id="col-16">16</div>
</div>
</div>
</div>
</body>
</html>