<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>myday</title>
<style>
div {
display:block;
}
* {
margin: 50;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 8fr 1fr;
grid-template-rows: 1fr 8fr 1fr;
grid-template-areas:
". . ."
". wrap ."
". . .";
}
#wrapper {
margin-top: 15px;
grid-area: wrap;
overflow-x: auto;
overflow-y: hidden;
}
#wrapper ul {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
height: 100%;
}
#wrapper ul li {
height: 100%;
flex:0 0 auto;
display:inline-block;
position:relative;
}
#wrapper ul li img {height: 400px;
width:100px;
margin:2px;}
#wrapper .n{
height: 70vh;
cursor: pointer;
overflow-x:scroll;
overflow-y: hidden;
white-space: nowrap;
}
.progressbar-overlay {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background: white;
opacity:1;
animation-name: fade;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 3s;
pointer-events: none;
}
#progressbar{
height: 15px;
position: absolute;
left: 50%;
top: 50%;
width: 200px;
background: rgba(159, 159, 159, 0.5);
border-radius: 10px;
margin: -20px 0 0 -100px;
padding: 2px;
}
#loading{
transition: all 500ms ease;
height: 10px;
width: calc(100% - 10px);
border-radius: 8px;
background: #474747;
position: absolute;
margin: 3px;
display: inline-block;
animation: load 4s ease infinite;
}
#load{
font-family: monospace;
font-weight: bold;
font-size: 2em;
text-align: center;
margin-top: -30px;
}
@keyframes load{
0%{
width: 2%;
}
10%{
width: 10%;
}
}
@keyframes fade {
0% {
opacity:1;
}
100%{
opacity:0;
}
}
.img1{
margin-top: 20px;
margin-left: 20px;
}
.n .content{
opacity:0;
position: absolute;
bottom: 50px;
margin:2px;
-webkit-transition: all 0.4s;
transition: all 0.4s;
background-color: rgba(221,221,221,0.4);
width:100px;
Height:400px;
}
.n .content h2 {
color: lightskyblue;
font-size: 8.8em;
font-family: 'Lato', sans-serif;
letter-spacing: 1px;
}
.n:hover .content{
opacity:1;
}
h2 {
margin-top: 305px;
margin-left: 20px;
text-overflow:clip;
overflow: hidden;
white-space: nowrap;
height:95px;
}
.n .content h3 {
color: lightskyblue;
font-size: 8.8em;
font-family: 'Helvetica', sans-serif;
letter-spacing: 0.5px;
}
.n:hover .content{
opacity:1;
}
h3 {
margin-top: 10px;
margin-left: 3px;
text-overflow:clip;
overflow: hidden;
height:97px;
width:91px;
-webkit-transform: rotate(90deg);
}
.n .content h4 {
color: transparent;
font-size: 4em;
font-family: 'Helvetica', sans-serif;
letter-spacing: 1px;
}
.n:hover .content{
opacity:1;
}
h4 {
margin-top: 30px;
margin-left: 40px;
text-overflow:clip;
white-space: nowrap;
width: 20px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: lightskyblue;
-webkit-transform: rotate(90deg);
}
.n .content h5 {
color: skyblue;
font-size: 8em;
font-family: 'Lato', sans-serif;
letter-spacing: 0.04px;
}
.n:hover .content{
opacity:1;
}
h5 {
margin-top: 320px;
margin-left:-3.8px;
text-overflow:clip;
overflow-y: hidden;
height:80px;
}
.n .content h6 {
color: skyblue;
font-size: 8.8em;
font-family: sans-serif;
letter-spacing: 0.3px;
}
.n:hover .content{
opacity:1;
}
h6 {
margin-top: -29px;
margin-right:50px;
text-overflow:clip;
overflow: hidden;
white-space: nowrap;
width: 100px;
line-height:80px;
}
.n .content h7 {
color: skyblue;
font-size: 8.8em;
font-family: sans-serif;
letter-spacing: 0.3px;
}
.n:hover .content{
opacity:1;
}
h7 {
margin-top: -29px;
margin-right:50px;
text-overflow:clip;
overflow: hidden;
white-space: nowrap;
width: 100px;
line-height:80px;
}
.n .content h8 {
color: skyblue;
font-size: 8.8em;
font-family: 'Helvetica', sans-serif;
letter-spacing: 0.8px;
}
.n:hover .content{
opacity:1;
}
h8 {
margin-top: 30px;
margin-left: 3px;
text-overflow:clip;
overflow: hidden;
height:97px;
width:91px;
-webkit-transform: rotate(90deg);
}
.n .content h9 {
color: skyblue;
font-size: 8.8em;
font-family: 'Helvetica', sans-serif;
letter-spacing: 0.8px;
}
.n:hover .content{
opacity:1;
}
h9 {
margin-top: 210px;
margin-left: 3px;
text-overflow:clip;
overflow: hidden;
height:97px;
width:91px;
-webkit-transform: rotate(90deg);
}
.n .content h10 {
color: lightskyblue;
font-size: 8.8em;
font-family: 'Lato', sans-serif;
letter-spacing: 0.8px;
}
.n:hover .content{
opacity:1;
}
h10 {
margin-top: 10px;
margin-left: 3px;
text-overflow:clip;
overflow: hidden;
height:97px;
width:91px;
-webkit-transform: rotate(90deg);
}
.n .content h11 {
color: lightskyblue;
font-size: 11.8em;
font-family: 'Lato', sans-serif;
letter-spacing: 0.8px;
}
.n:hover .content{
opacity:1;
}
h11 {
margin-top: 10px;
margin-left: 3px;
text-overflow:clip;
overflow: hidden;
height:97px;
width:91px;
-webkit-transform: rotate(90deg);
}
.n .content h12 {
color: lightskyblue;
font-size: 8.8em;
font-family: 'Lato', sans-serif;
letter-spacing: 0.8px;
}
.n:hover .content{
opacity:1;
}
h12 {
margin-top: 10px;
margin-left: 3px;
text-overflow:clip;
overflow: hidden;
height:97px;
width:91px;
-webkit-transform: rotate(90deg);
}
.n .content h13 {
color: lightskyblue;
font-size: 8.8em;
font-family: 'Lato', sans-serif;
letter-spacing: 0.8px;
}
.n:hover .content{
opacity:1;
}
h13 {
margin-top: 10px;
margin-left: 3px;
text-overflow:clip;
overflow: hidden;
height:97px;
width:91px;
-webkit-transform: rotate(90deg);
}
.n .content h14 {
color: lightskyblue;
font-size: 8.8em;
font-family: 'Lato', sans-serif;
letter-spacing: 0.8px;
}
.n:hover .content{
opacity:1;
}
h14 {
margin-top: 10px;
margin-left: 3px;
text-overflow:clip;
overflow: hidden;
height:97px;
width:91px;
-webkit-transform: rotate(90deg);
}
.n .content h15 {
color: lightskyblue;
font-size: 8.8em;
font-family: 'Lato', sans-serif;
letter-spacing: 0.8px;
}
.n:hover .content{
opacity:1;
}
h15 {
margin-top: 10px;
margin-left: 3px;
text-overflow:clip;
overflow: hidden;
height:97px;
width:91px;
-webkit-transform: rotate(90deg);
}
.n .content h16 {
color: lightskyblue;
font-size: 8.8em;
font-family: 'Lato', sans-serif;
letter-spacing: 0.8px;
}
.n:hover .content{
opacity:1;
}
h16 {
margin-top: 10px;
margin-left: 3px;
text-overflow:clip;
overflow: hidden;
height:97px;
width:91px;
-webkit-transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="progressbar-overlay">
<div id="progressbar">
<span id="loading"></span>
<div id="load">Start My Day</div>
</div>
</div>
<img src="webimg10.png" width="170px;" class="img1">
<div id="wrapper">
<ul>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index10.html"><img src="webimg6fuben.jpg">
<div class="content">
<h2>10</h2> </div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index11.html"><img src="unnameds%E5%89%AF%E6%9C%AC.jpg">
<div class="content">
<h3>11</h3>
</div> </li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index12.html"><img src="unnamed98fuben.jpg">
<div class="content">
<h4>LUNCH TIME</h4>
</div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index13.html"><img src="unnamed345fuben.jpg">
<div class="content">
<h5>13</h5>
</div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index14.html"><img src="unnamed0909fuben.jpg">
<div class="content">
<h6>14</h6>
</div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index15.html"><img src="unnamed099%E5%89%AF%E6%9C%AC.jpg">
<div class="content">
<h7>15</h7>
</div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index16.html"><img src="webimg17fuben.jpg">
<div class="content">
<h8>16</h8>
</div></li> </a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index17.html"><img src="IMG-7616fuben.jpg"><div class="content">
<h9>17</h9>
</div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index18.html"><img src="unnamed09090fuben.jpg"><div class="content">
<h10>18</h10>
</div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index19.html"><img src="webimg3fuben.jpg"><div class="content">
<h11>19</h11>
</div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index20.html"><img src="webimg8fuben.jpg">
<div class="content">
<h12>20</h12>
</div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index21.html"><img src="unnamed00--fuben.jpg"><div class="content">
<h13>21</h13>
</div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index22.html"><img src="webimg4fuben.jpg">
<div class="content">
<h14>22</h14>
</div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index23.html"><img src="webimg7fuben.jpg">
<div class="content">
<h15>23</h15>
</div></li></a>
<li class="n">
<a href="file:///Users/sunyuz/Desktop/webproject2/index24.html"><img src="unname78fuben.jpg">
<div class="content">
<h16>24</h16>
</div></li></a>
</ul>
</div>
</body>
</html>