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 123: | Line 306: | ||
<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> | ||
+ | |||
Revision as of 16:07, 12 September 2017
1
2
3
4
5
6
7
8
9