|
|
| Line 118: |
Line 118: |
| | .border { border: 5px solid black; } | | .border { border: 5px solid black; } |
| | | | |
| − |
| |
| − | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);
| |
| − | *{
| |
| − | box-sizing:border-box;
| |
| − | }
| |
| − | body {
| |
| − | background:#246BB2;
| |
| − | }
| |
| − | h1{
| |
| − | font-family:'Open Sans',Arial,Helvetica,sans-serif;
| |
| − | font-size:72px;
| |
| − | color:#FFFFFF;
| |
| − | position: absolute;
| |
| − | top:0px;
| |
| − | margin:0px;
| |
| − | }
| |
| − | h2{
| |
| − | font-family:'Open Sans',Arial,Helvetica,sans-serif;
| |
| − | font-size:48px;
| |
| − | color:#FFFFFF;
| |
| − | position:relative;
| |
| − | top:50px;
| |
| − | }
| |
| − | div {
| |
| − | inline-block;
| |
| − | padding:0px;
| |
| − | margin:0px;
| |
| − | }
| |
| − | #container {
| |
| − | height:40%;
| |
| − | width:30%;
| |
| − | margin:auto;
| |
| − | position: absolute;
| |
| − | top:30%;
| |
| − | left:30%;
| |
| − | background:#687F8B;
| |
| − |
| |
| − | }
| |
| − | #tl{
| |
| − | height:33.34%;
| |
| − | width:33.34%;
| |
| − | position:absolute;
| |
| − | top:0%;
| |
| − | left:0%;
| |
| − | background:#FF5050;
| |
| − | box-shadow:5px 7px 0px 0px #662020;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #tc{
| |
| − | height:33.34%;
| |
| − | width:33.34%;
| |
| − | position:absolute;
| |
| − | top:0%;
| |
| − | left:33.34%;
| |
| − | box-shadow:5px 7px 0px 0px #663D29;
| |
| − | background:#FF9966;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #tr{
| |
| − | height:33.34%;
| |
| − | width:33.34%;
| |
| − | position:absolute;
| |
| − | top:0%;
| |
| − | left:66.67%;
| |
| − | background:#FFFF66;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #ml{
| |
| − | height:33.34%;
| |
| − | width:33.34%;
| |
| − | position:absolute;
| |
| − | top:33.34%;
| |
| − | left:0%;
| |
| − | background:#99FF66;
| |
| − | box-shadow:5px 7px 0px 0px #3D6629;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #mc{
| |
| − | height:33.34%;
| |
| − | width:33.34%;
| |
| − | position:absolute;
| |
| − | top:33.34%;
| |
| − | left:33.34%;
| |
| − | background:#00FF99;
| |
| − | box-shadow:5px 7px 0px 0px #00663D;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #mr{
| |
| − | height:33.34%;
| |
| − | width:33.34%;
| |
| − | position:absolute;
| |
| − | top:33.34%;
| |
| − | left:66.67%;
| |
| − | background:#0099FF;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #bl{
| |
| − | height:33.34%;
| |
| − | width:33.34%;
| |
| − | position:absolute;
| |
| − | top:66.67%;
| |
| − | left:0%;
| |
| − | background:#6666FF;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #bc{
| |
| − | height:33.34%;
| |
| − | width:33.34%;
| |
| − | position:absolute;
| |
| − | top:66.67%;
| |
| − | left:33.34%;
| |
| − | background:#9966FF;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #br{
| |
| − | height:33.34%;
| |
| − | width:33.34%;
| |
| − | position:absolute;
| |
| − | top:66.67%;
| |
| − | left:66.67%;
| |
| − | background:#9900FF;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | div p {
| |
| − | font-family: 'Open Sans',Arial,Helvetica,sans-serif;
| |
| − | color:#FFFFFF;
| |
| − | font-weight:bold;
| |
| − | text-align:center;
| |
| − | position:relative;
| |
| − | font-size:50px;
| |
| − | top:30%;
| |
| − | margin:0px;
| |
| − | }
| |
| − | #tl:hover {
| |
| − | top:-1.56%;
| |
| − | left:-1.11%;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #tc:hover {
| |
| − | top:-1.56%;
| |
| − | left:32.22%;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #tr:hover {
| |
| − | top:-1.56%;
| |
| − | left:65.56%;
| |
| − | box-shadow:5px 7px 0px 0px #666629;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #ml:hover {
| |
| − | top:31.78%;
| |
| − | left:-1.11%;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #mc:hover {
| |
| − | top:31.78%;
| |
| − | left:32.22%;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #mr:hover {
| |
| − | top:31.78%;
| |
| − | left:65.56%;
| |
| − | box-shadow:5px 7px 0px 0px #003D66;
| |
| − | transition:all ease .35s
| |
| − | }
| |
| − | #bl:hover {
| |
| − | top:65.11%;
| |
| − | left:-1.11%;
| |
| − | box-shadow:5px 7px 0px 0px #292966;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #bc:hover {
| |
| − | top:65.11%;
| |
| − | left:32.22%;
| |
| − | box-shadow:5px 7px 0px 0px #3D2966;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| − | #br:hover {
| |
| − | top:65.11%;
| |
| − | left:65.56%;
| |
| − | box-shadow:5px 7px 0px 0px #3D0066;
| |
| − | transition:all ease .35s;
| |
| − | }
| |
| | | | |
| | </style> | | </style> |
| Line 306: |
Line 123: |
| | | | |
| | <body class="w3-white"> | | <body class="w3-white"> |
| − | <div class = "container">
| |
| − |
| |
| − | <div id="container">
| |
| − | <div id="tl"><p>1</p></div>
| |
| − | <div id="tc"><p>2</p></div>
| |
| − | <div id="tr"><p>3</p></div>
| |
| − | <div id="ml"><p>4</p></div>
| |
| − | <div id="mc"><p>5</p></div>
| |
| − | <div id="mr"><p>6</p></div>
| |
| − | <div id="bl"><p>7</p></div>
| |
| − | <div id="bc"><p>8</p></div>
| |
| − | <div id="br"><p>9</p></div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| | | | |
| | | | |
