html,body{height:100%;width:100%;background:#e9e9e9}body{margin:0;text-align:center;padding-top:20px}.grid{width:750px;height:500px;margin:0 auto;padding-top:100px;padding-left:100px;background-image:url('../imgs/grid.png');position:relative}.grid::before{content:"";border-left:1px solid #7c7cea;position:absolute;top:0;left:100px;width:1px;height:600px}.grid::after{content:"";border-top:1px solid #7c7cea;position:absolute;top:100px;left:0;width:850px;height:1px}svg{stroke:#000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none}.code-wrap{margin-left: 28%; text-align: right;width:44%;padding-top:5px; }.code-wrap img{cursor: pointer;}.link{cursor: pointer;}.link:hover{color: #333333;}