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
Joung Jiwon
2020-12-10 01:30:06 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
3cccd16830cdd36d6060ef317298536df570a5db
3cccd168
1 parent
762c38a8
css 3차 수정
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
100 additions
and
64 deletions
project/css/templatemo-style.css
project/index.html
project/css/templatemo-style.css
View file @
3cccd16
...
...
@@ -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
:
35px
;
text-shadow
:
2px
2px
2px
#333
;
}
.list-answer-field
{
grid-area
:
list-answer-field
;
font-size
:
35px
;
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
30px
;
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 @
3cccd16
...
...
@@ -66,7 +66,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>
...
...
@@ -102,7 +102,7 @@
</select>
</div></div>
</div>
<a
href=
"#result"
class=
"text-center tm-down-arrow-link"
>
<a
href=
"#result"
class=
"
button2
text-center tm-down-arrow-link"
>
<i
class=
"fas fa-3x fa-caret-down tm-down-arrow"
>
계산해보기
</i>
</a>
</div>
...
...
@@ -110,31 +110,34 @@
<section
id=
"result"
>
<div
id=
"map"
style=
"width:700px;height:300px;"
></div>
<div
class=
"answer-field"
>
한번 갈 때마다 ...
<br>
<span
class=
"answer-highlight"
>
n
</span>
시간
<span
class=
"answer-highlight"
>
n
</span>
분
<br>
</div>
<div
class=
"row"
>
<div
id=
"list-answer"
>
<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>
<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"
>
?
</span>
시간
<span
class=
"answer-highlight"
>
?
</span>
분
<br>
</div>
</div>
<div
class=
"row"
>
<div
class=
"answer-detail-question"
>
이 시간에 알바를 했다면?
<br>
교통비로 국밥
<br>
이 거리라면 에베레스트 등반을
<br>
지구를
<div
class=
"list-answer-field"
>
지금까지
<span
class=
"answer-highlight"
id=
"since"
>
?
</span>
시간을 길에서 보내셨군요
<br>
졸업까지 앞으로
<span
class=
"answer-highlight"
id=
"until"
>
?
</span>
시간은 더 길에서 보내시면 됩니다.
<br>
</div>
<div
class=
"answer-detail-answer"
>
<span
id =
"salary"
>
?
</span>
원
<br>
<span
id =
"dish"
>
?
</span>
그릇
<br>
<span
id =
"everest"
>
?
</span>
번이나...
<br>
<span
id =
"earth"
>
?
</span>
바퀴나 돌아요
<br><br><br>
<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>
</div>
</div>
<footer
class=
"text-center small tm-footer"
>
...
...
@@ -500,7 +503,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
()
{
...
...
@@ -526,12 +529,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
-
50
},
400
);
});
// Pop up
$
(
'.tm-gallery'
).
magnificPopup
({
delegate
:
'a'
,
...
...
Please
register
or
login
to post a comment