|
|
|
@ -12,25 +12,53 @@
|
|
|
|
|
#wrapper{
|
|
|
|
|
background: linear-gradient(231deg, #cbf2ce, #e7f5f9, #b9e9f7, #c9dee4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#li1:before{
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: "";
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
}
|
|
|
|
|
.window{
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.top, .left, .right, .bottom{
|
|
|
|
|
position: fixed;
|
|
|
|
|
background: #4395DE; /*#232323;*/
|
|
|
|
|
z-index: 4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.top{
|
|
|
|
|
|
|
|
|
|
#li1:hover:before{
|
|
|
|
|
background: rgba(214,242,249,0.5);
|
|
|
|
|
content: "issue1";
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
color: blue;
|
|
|
|
|
text-align:center;
|
|
|
|
|
}
|
|
|
|
|
/*margin: 0 auto;*/
|
|
|
|
|
top:0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 3rem;
|
|
|
|
|
box-shadow: 0px 5px 12px #4395DE;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.left, .right{
|
|
|
|
|
width: 3rem;
|
|
|
|
|
height: 100%;
|
|
|
|
|
writing-mode: vertical-rl;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left{
|
|
|
|
|
left: 0;
|
|
|
|
|
box-shadow: 5px 0px 12px #4395DE;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right{
|
|
|
|
|
right: 0;
|
|
|
|
|
box-shadow: -5px 0px 12px #4395DE;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom{
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 3rem;
|
|
|
|
|
box-shadow: 0px -5px 12px #4395DE;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
@ -39,6 +67,15 @@
|
|
|
|
|
<body>
|
|
|
|
|
<div id='wrapper'></div>
|
|
|
|
|
<a href='../' id='homebttn' class='ext'> << home</a>
|
|
|
|
|
|
|
|
|
|
<div class = "window">
|
|
|
|
|
<div class = "top"></div>
|
|
|
|
|
<div class = "left"></div>
|
|
|
|
|
<div class = "right"></div>
|
|
|
|
|
<div class = "bottom"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<header>
|
|
|
|
|
<h1 id='project-title'>User Sentimental eXperience<a href='#hleft-text' class='show'> ⓘ</a></h1>
|
|
|
|
|
<h2 id='student-name'>Nami Kim</h2>
|
|
|
|
|