Closed toliujiayi closed 4 years ago
`<!DOCTYPE html>
There should be a paragraph here
`*{ box-sizing: border-box; }
.mission{ background-color: rgb(56, 109, 189); width: 50%; color: white; padding: 15px; text-align: center; border-radius: 15px; font-size: 36px; }
.p1{ width: 50%; float: right; height: 304px; }
.button { position: relative; display: inline-block;
}
.button .hovertext{ visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; font-size: 15px; }
.button:hover .hovertext { visibility: visible; }
background-color: rgb(56, 109, 189);
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.btn{ text-align: center; padding: 5px; }
.btn1, .btn2, .btn3, .btn4{ background-color: white; text-align: center; color: #3498DB; border: none; cursor: pointer; } .btn1:hover, .btn1:focus, .btn2:hover, .btn2:focus, .btn3:hover, .btn3:focus, .btn4:hover, .btn4:focus { color: #2980B9; }
.p2{ background-color: rgb(56, 109, 189); width: 92%; padding: 15px; }
.container{ display: table; width: 100%; }
.col{
display: table-cell;
padding: 16px;
border: 1px solid black;
border-radius: 20px;
box-shadow:
2px 0 0 0 #888,
0 2px 0 0 #888,
2px 2px 0 0 #888,
2px 0 0 0 #888 inset,
0 2px 0 0 #888 inset;
}
@media only screen and (max-width: 600px){ .col{ display: block; width: 100%; } }`
The hand-drawn layout is in the following link: https://drive.google.com/open?id=1MaHhauleCgaIi13A2AEFYeFLWINLHWMV