Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Joung Jiwon
/
OSS-TongGilMut
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
SH
2020-12-10 05:05:49 +0900
Browse Files
Options
Browse Files
Download
Plain Diff
Commit
b3eb4cfa6972d1c93b4756afae946f264062f388
b3eb4cfa
2 parents
1628522e
4c7fe1b4
calculate rewrite
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
137 additions
and
45 deletions
project/css/templatemo-style.css
project/index.html
project/css/templatemo-style.css
View file @
b3eb4cf
...
...
@@ -190,7 +190,7 @@ a:focus {
}
.tm-hero-title
{
font-size
:
2rem
;
font-size
:
40px
;
text-shadow
:
2px
2px
2px
#333
;
}
...
...
@@ -384,42 +384,6 @@ select::-ms-expand {
input
{
border-radius
:
5px
;
}
#map-answer
{
display
:
flex
;
justify-content
:
center
;
border-top
:
2px
solid
white
;
padding-top
:
50px
;
}
.answer-field
{
width
:
30%
;
font-size
:
30px
;
line-height
:
80px
;
}
#answer-how-many-hours
{
width
:
100%
;
margin-bottom
:
100px
;
}
.row
{
display
:
flex
;
justify-content
:
center
;
}
#answer-detail
{
display
:
flex
;
justify-content
:
center
;
}
.answer-detail-question
,
.answer-detail-answer
{
width
:
49%
;
}
.answer-detail-question
{
text-align
:
right
;
margin-right
:
10px
;
}
.answer-highlight
{
font-size
:
35px
;
color
:
darkseagreen
;
}
.tm-underline
{
border-top
:
2px
solid
white
;
height
:
8px
;
...
...
@@ -494,7 +458,70 @@ iframe{
min-height
:
750px
;
position
:
relative
;
padding-bottom
:
50px
;
padding-top
:
160px
;
padding-top
:
20px
;
}
.answer-grid-container
{
display
:
grid
;
margin
:
30px
30px
;
grid-template-columns
:
1
fr
1
fr
1
fr
1
fr
;
grid-template-rows
:
1
fr
0.5
fr
0.5
fr
0.5
fr
;
gap
:
10px
20px
;
grid-template-areas
:
". map answer-field ."
"list-answer-field list-answer-field list-answer-field list-answer-field"
"detail-answer-field detail-answer-field detail-answer-field detail-answer-field"
"detail-answer-field detail-answer-field detail-answer-field detail-answer-field"
;
}
.map
{
grid-area
:
map
;
}
.answer-field
{
grid-area
:
answer-field
;
font-size
:
30px
;
text-shadow
:
2px
2px
2px
#333
;
}
.list-answer-field
{
grid-area
:
list-answer-field
;
font-size
:
30px
;
text-shadow
:
2px
2px
2px
#333
;
text-align
:
center
;
}
.detail-answer-field
{
display
:
grid
;
grid-template-columns
:
1
fr
1
fr
1
fr
1
fr
;
gap
:
20px
20px
;
grid-template-areas
:
"salary-field dish-field everest-field earth-field"
;
grid-area
:
detail-answer-field
;
height
:
200px
;
}
.detail-answer-box
{
margin-top
:
10px
;
display
:
table-cell
;
background-color
:
darkgrey
;
border-radius
:
6px
;
font-size
:
20px
;
padding
:
10px
10px
;
height
:
150px
;
}
.detail-answer-small-box
{
font-size
:
30px
;
margin-top
:
20px
;
}
.salary-field
{
grid-area
:
salary-field
;
}
.dish-field
{
grid-area
:
dish-field
;
}
.everest-field
{
grid-area
:
everest-field
;
}
.earth-field
{
grid-area
:
earth-field
;
}
.detail-answer-small-box
{
transform
:
translateX
(
2.5%
);
width
:
95%
;
}
...
...
project/index.html
View file @
b3eb4cf
...
...
@@ -5,7 +5,7 @@
<meta
charset=
"UTF-8"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
/>
<title>
T
he Town HTML CSS Template
</title>
<title>
T
ongGilMut
</title>
<link
rel=
"stylesheet"
href=
"fontawesome-5.5/css/all.min.css"
/>
<link
rel=
"stylesheet"
href=
"slick/slick.css"
>
<link
rel=
"stylesheet"
href=
"slick/slick-theme.css"
>
...
...
@@ -18,8 +18,12 @@
<script
src=
"../../docs/js/jquery-1.9.1.js"
></script>
<script
type=
"text/javascript"
src=
"../../docs/js/examples-base.js"
></script>
<script
type=
"text/javascript"
src=
"../../docs/js/highlight.min.js"
></script>
<<<<<<
< HEAD
<
script
type=
"text/javascript"
src=
"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"
></script>
=======
<script
type=
"text/javascript"
src=
"https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"
></script>
>>>>>>> 4c7fe1b45bf1746088a811e7fc1b8a9c7172f7cd
<link
rel=
"stylesheet"
type=
"text/css"
href=
"../../docs/css/examples-base.css"
/>
<!--
...
...
@@ -68,7 +72,7 @@
</div>
<div
class=
"tm-next tm-intro-next"
>
<a
href=
"#contact"
class=
"text-center tm-down-arrow-link"
>
<a
href=
"#contact"
class=
"
button1
text-center tm-down-arrow-link"
>
<i
class=
"fas fa-3x fa-caret-down tm-down-arrow"
>
계산해보기
</i>
</a>
</div>
...
...
@@ -90,6 +94,7 @@
<input
type=
"text"
id=
"end"
>
</div>
<div
class=
"question-field question-grade"
>
몇학년인가요?
</div>
<<<<<<
< HEAD
<
div
class=
"input-grade"
>
<div
class=
"custom-select"
style=
"width:208px; margin-right:40px"
>
<select
id=
"semester"
>
...
...
@@ -124,6 +129,60 @@
<div
class=
"answer-field"
id=
"answer-how-many-hours"
>
지금까지
<span
class=
"answer-highlight"
id=
"since"
>
?
</span>
시간을 길에서 보내셨군요
<br>
졸업까지 앞으로
<span
class=
"answer-highlight"
id=
"until"
>
?
</span>
시간은 더 길에서 보내시면 됩니다.
<br>
=======
<div
class=
"input-grade"
><div
class=
"custom-select"
style=
"width:208px; margin-right:40px"
>
<select>
<option
value=
"0"
>
1학년 1학기
</option>
<option
value=
"sem-1-1"
>
1학년 1학기
</option>
<option
value=
"sem-1-2"
>
1학년 2학기
</option>
<option
value=
"sem-2-1"
>
2학년 1학기
</option>
<option
value=
"sem-2-2"
>
2학년 2학기
</option>
<option
value=
"sem-3-1"
>
3학년 1학기
</option>
<option
value=
"sem-3-2"
>
3학년 2학기
</option>
<option
value=
"sem-4-1"
>
4학년 1학기
</option>
<option
value=
"sem-4-2"
>
4학년 2학기
</option>
</select>
</div></div>
</div>
<a
href=
"#result"
class=
"button2 text-center tm-down-arrow-link"
>
<button
style=
"color:black"
class=
"fas fa-3x fa-caret-down tm-down-arrow"
type=
"button"
onclick=
"semester();return false;"
>
계산하기
</button>
</a>
</div>
</section>
<section
id=
"result"
>
<div
class=
"answer-grid-container"
>
<div
class=
"map"
id=
"map"
style=
"width:500px;height:300px;"
"
></div>
<div
class=
"answer-field"
style=
"width:300px;"
><br><br>
한번 갈 때마다 ...
<br>
<span
class=
"answer-highlight"
id=
"hour"
>
?
</span>
시간
<span
class=
"answer-highlight"
id=
"min"
>
?
</span>
분
<br>
<span
class=
"answer-highlight"
id=
"dist"
>
?
</span>
km
<br>
</div>
<div
class=
"list-answer-field"
>
지금까지
<span
class=
"answer-highlight"
id=
"since"
>
?
</span>
시간을 길에서 보내셨군요
<br>
졸업까지 앞으로
<span
class=
"answer-highlight"
id=
"until"
>
?
</span>
시간은 더 길에서 보내시면 됩니다.
<br>
</div>
<div
class=
"detail-answer-field"
>
<div
class=
"detail-answer-box salary-field"
>
이 시간에 알바를 했다면?
<br>
<div
class=
"detail-answer-small-box"
>
<span
id =
"salary"
>
?
</span>
원
<br></div></div>
<div
class=
"detail-answer-box dish-field"
>
교통비로 국밥
<br>
<div
class=
"detail-answer-small-box"
>
<span
id =
"dish"
>
?
</span>
그릇
<br></div>
</div>
<div
class=
"detail-answer-box everest-field"
>
이 거리라면 에베레스트 등반을
<br>
<div
class=
"detail-answer-small-box"
>
<span
id =
"everest"
>
?
</span>
번이나...
<br></div>
</div>
<div
class=
"detail-answer-box earth-field"
>
지구를
<br>
<div
class=
"detail-answer-small-box"
>
<span
id =
"earth"
>
?
</span>
바퀴나 돌아요
<br><br><br>
</div>
</div>
>>>>>>> 4c7fe1b45bf1746088a811e7fc1b8a9c7172f7cd
</div>
</div>
</div>
...
...
@@ -397,9 +456,9 @@
since
=
sem
*
time
*
150
until
=
(
8
-
sem
)
*
time
*
150
salary
=
since
*
8590
dish
=
Math
.
floor
((
pay
*
150
)
/
6000
)
everest
=
Math
.
floor
((
distance
*
2
)
/
8846
)
earth
=
((
distance
*
2
)
/
40075000
).
toFixed
(
3
)
dish
=
Math
.
floor
((
sem
*
pay
*
150
)
/
6000
)
everest
=
Math
.
floor
((
sem
*
distance
*
2
)
/
8846
)
earth
=
((
sem
*
distance
*
2
)
/
40075000
).
toFixed
(
3
)
}
if
(
target
==
'sem-1-1'
)
{
...
...
@@ -504,7 +563,7 @@
$
(
function
()
{
// Hero Section - Background Parallax
background_image_parallax
(
$
(
".tm-parallax"
),
0.30
,
false
);
background_image_parallax_2
(
$
(
"#contact"
),
0.80
)
;
background_image_parallax_2
(
$
(
"#contact"
),
0.80
)
// Handle window resize
window
.
addEventListener
(
'resize'
,
function
()
{
...
...
@@ -530,12 +589,18 @@
// Add smooth scrolling to all links
// https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
$
(
"
a
"
).
on
(
'click'
,
function
(
event
)
{
$
(
"
.button1
"
).
on
(
'click'
,
function
(
event
)
{
$
(
'html, body'
).
animate
({
scrollTop
:
$
(
"#contact"
).
offset
().
top
},
400
);
});
$
(
".button2"
).
on
(
'click'
,
function
(
event
)
{
$
(
'html, body'
).
animate
({
scrollTop
:
$
(
"#result"
).
offset
().
top
-
10
},
400
);
});
// Pop up
$
(
'.tm-gallery'
).
magnificPopup
({
delegate
:
'a'
,
...
...
Please
register
or
login
to post a comment