김한준 / OSS-Term-Project

Go to a project
Toggle navigation Toggle navigation pinning
김한준
a2c3e21a 1 parent 94380eae

섹션추가

Inline Side-by-side
Showing 1 changed file with 154 additions and 10 deletions
......@@ -56,7 +56,7 @@ body {
text-align: center;
width: 100%;
position: absolute;
top: calc(35% + 160px);
top: calc(38% + 160px);
}
#stats progress {
......@@ -73,7 +73,7 @@ body {
position: absolute;
display: flex;
flex-flow: wrap;
top: calc(35% + 225px);
top: calc(38% + 225px);
counter-reset: li;
overflow: hidden;
}
......@@ -191,9 +191,10 @@ body {
margin: auto;
text-align: center;
position: absolute;
top: calc(35% - 100px);
top: calc(38% - 100px);
left: calc(50% - 300px);
transition: .25s, top 0s;
background-color: ivory;
}
#accumulate_section {
width: 600px;
......@@ -206,6 +207,7 @@ body {
left: calc(50% - 300px);
transition: .25s, top 0s;
font-size : 20px;
background-color: ivory;
}
#recom_section {
......@@ -218,6 +220,85 @@ body {
top: calc(90% - 100px);
left: calc(53% - 300px);
transition: .25s, top 0s;
background-color: ivory;
}
#patten_section {
width: 950px;
max-width: calc(100% - 2em);
height: 650px;
margin: auto;
text-align: center;
position: absolute;
top: calc(70% - 100px);
left: calc(40% - 300px);
transition: .25s, top 0s;
background-color: ivory;
}
#patten_recom_section {
width: 600px;
max-width: calc(100% - 2em);
height: 160px;
margin: auto;
text-align: center;
position: absolute;
top: calc(70% - 100px);
left: calc(50% - 300px);
transition: .25s, top 0s;
font-size : 20px;
background-color: ivory;
}
#graph_section {
width: 600px;
max-width: calc(100% - 2em);
height: 200px;
margin: auto;
text-align: center;
position: absolute;
top: calc(90% - 100px);
left: calc(30% - 300px);
transition: .25s, top 0s;
font-size : 20px;
}
#graph_section2 {
width: 600px;
max-width: calc(100% - 2em);
height: 200px;
margin: auto;
text-align: center;
position: absolute;
top: calc(52% - 100px);
left: calc(120% - 10px);
transition: .25s, top 0s;
font-size : 20px;
}
#graph_section3 {
width: 600px;
max-width: calc(100% + 2em);
height: 200px;
margin: auto;
text-align: center;
position: absolute;
top: calc(120% + 100px);
left: calc(30% - 185px);
transition: .25s, top 0s;
font-size : 20px;
}
#graph_section4 {
width: 600px;
max-width: calc(100% - 2em);
height: 200px;
margin: auto;
text-align: center;
position: absolute;
top: calc(80% - 160px);
left: calc(120% - 10px);
transition: .25s, top 0s;
font-size : 20px;
}
#winner h2 {
......@@ -299,8 +380,6 @@ body {
}
/* ***** mobile ***** */
@media handheld, only screen and (max-device-width:480px), only screen and (max-device-width:320px), screen and (max-width:600px) {
body {
......@@ -309,14 +388,14 @@ body {
#winner {
height: 150px;
top: calc(50% - 75px);
top: calc(40% - 75px);
margin: 1em;
left: inherit;
}
#accumulate_section {
height: 150px;
top: calc(100% - 75px);
top: calc(75% - 75px);
margin: 1em;
left: 0;
font-size : 13px
......@@ -324,10 +403,11 @@ body {
}
#recom_section {
height: 300px;
top: calc(150% - 75px);
height: 550px;
top: calc(105% - 75px);
width : 190px;
margin: 1em;
left: 0;
left:calc(20% - 10px);
font-size : 6px
}
......@@ -338,6 +418,70 @@ body {
font-size: 6px;
}
#event_section {
height: 900px;
top: 100px;
margin: 1em;
right: 0;
font-size : 8px
}
#graph_section {
height: 100px;
top: calc(100% - 75px);
width : 150px;
margin: 1em;
left:calc(3% - 10px);
font-size : 6px;
}
#graph_section2 {
height: 100px;
top: calc(90% - 95px);
width : 150px;
margin: 1em;
left:calc(140% - 0px);
font-size : 6px;
}
#graph_section3 {
height: 100px;
top: calc(220% - 15px);
width : 150px;
margin: 1em;
left:calc(5% - 10px);
font-size : 6px;
}
#graph_section4 {
height: 100px;
top: calc(95% - 95px);
width : 150px;
margin: 1em;
left:calc(140% - 0px);
font-size : 6px;
}
#patten_recom_section {
height: 105px;
top: calc(78% - 75px);
width : 250px;
margin: 1em;
left:calc(15% - 10px);
font-size : 10px;
}
#patten_section {
height: 360px;
top: calc(75% - 75px);
width : 290px;
margin: 1em;
left:calc(8% - 10px);
font-size : 6px;
}
}
......