Showing
2 changed files
with
137 additions
and
45 deletions
... | @@ -190,7 +190,7 @@ a:focus { | ... | @@ -190,7 +190,7 @@ a:focus { |
190 | } | 190 | } |
191 | 191 | ||
192 | .tm-hero-title { | 192 | .tm-hero-title { |
193 | - font-size: 2rem; | 193 | + font-size: 40px; |
194 | text-shadow: 2px 2px 2px #333; | 194 | text-shadow: 2px 2px 2px #333; |
195 | } | 195 | } |
196 | 196 | ||
... | @@ -384,42 +384,6 @@ select::-ms-expand { | ... | @@ -384,42 +384,6 @@ select::-ms-expand { |
384 | input{ | 384 | input{ |
385 | border-radius:5px; | 385 | border-radius:5px; |
386 | } | 386 | } |
387 | - | ||
388 | -#map-answer{ | ||
389 | - display:flex; | ||
390 | - justify-content: center; | ||
391 | - border-top:2px solid white; | ||
392 | - padding-top:50px; | ||
393 | -} | ||
394 | -.answer-field{ | ||
395 | - width:30%; | ||
396 | - font-size :30px; | ||
397 | - line-height:80px; | ||
398 | -} | ||
399 | -#answer-how-many-hours{ | ||
400 | - width:100%; | ||
401 | - margin-bottom:100px; | ||
402 | -} | ||
403 | -.row{ | ||
404 | - display:flex; | ||
405 | - justify-content: center; | ||
406 | -} | ||
407 | -#answer-detail{ | ||
408 | - display:flex; | ||
409 | - justify-content: center; | ||
410 | -} | ||
411 | -.answer-detail-question, | ||
412 | -.answer-detail-answer{ | ||
413 | - width:49%; | ||
414 | -} | ||
415 | -.answer-detail-question{ | ||
416 | - text-align: right; | ||
417 | - margin-right:10px; | ||
418 | -} | ||
419 | -.answer-highlight{ | ||
420 | - font-size:35px; | ||
421 | - color:darkseagreen; | ||
422 | -} | ||
423 | .tm-underline { | 387 | .tm-underline { |
424 | border-top: 2px solid white; | 388 | border-top: 2px solid white; |
425 | height: 8px; | 389 | height: 8px; |
... | @@ -494,7 +458,70 @@ iframe{ | ... | @@ -494,7 +458,70 @@ iframe{ |
494 | min-height: 750px; | 458 | min-height: 750px; |
495 | position: relative; | 459 | position: relative; |
496 | padding-bottom: 50px; | 460 | padding-bottom: 50px; |
497 | - padding-top: 160px; | 461 | + padding-top: 20px; |
462 | +} | ||
463 | + | ||
464 | +.answer-grid-container { | ||
465 | + display: grid; | ||
466 | + margin:30px 30px; | ||
467 | + grid-template-columns: 1fr 1fr 1fr 1fr; | ||
468 | + grid-template-rows: 1fr 0.5fr 0.5fr 0.5fr; | ||
469 | + gap: 10px 20px; | ||
470 | + grid-template-areas: | ||
471 | + ". map answer-field ." | ||
472 | + "list-answer-field list-answer-field list-answer-field list-answer-field" | ||
473 | + "detail-answer-field detail-answer-field detail-answer-field detail-answer-field" | ||
474 | + "detail-answer-field detail-answer-field detail-answer-field detail-answer-field"; | ||
475 | +} | ||
476 | + | ||
477 | +.map { grid-area: map; } | ||
478 | + | ||
479 | +.answer-field { | ||
480 | + grid-area: answer-field; | ||
481 | + font-size:30px; | ||
482 | + text-shadow: 2px 2px 2px #333; | ||
483 | +} | ||
484 | + | ||
485 | +.list-answer-field { | ||
486 | + grid-area: list-answer-field; | ||
487 | + font-size:30px; | ||
488 | + text-shadow: 2px 2px 2px #333; | ||
489 | + text-align : center; | ||
490 | +} | ||
491 | + | ||
492 | +.detail-answer-field { | ||
493 | + display: grid; | ||
494 | + grid-template-columns: 1fr 1fr 1fr 1fr; | ||
495 | + gap: 20px 20px; | ||
496 | + grid-template-areas: | ||
497 | + "salary-field dish-field everest-field earth-field"; | ||
498 | + grid-area: detail-answer-field; | ||
499 | + height : 200px; | ||
500 | +} | ||
501 | +.detail-answer-box{ | ||
502 | + margin-top:10px; | ||
503 | + display:table-cell; | ||
504 | + background-color : darkgrey; | ||
505 | + border-radius:6px; | ||
506 | + font-size:20px; | ||
507 | + padding : 10px 10px; | ||
508 | + height:150px; | ||
509 | +} | ||
510 | +.detail-answer-small-box{ | ||
511 | + font-size:30px; | ||
512 | + margin-top:20px; | ||
513 | +} | ||
514 | +.salary-field { grid-area: salary-field; } | ||
515 | + | ||
516 | +.dish-field { grid-area: dish-field; } | ||
517 | + | ||
518 | +.everest-field { grid-area: everest-field; } | ||
519 | + | ||
520 | +.earth-field { grid-area: earth-field; } | ||
521 | + | ||
522 | +.detail-answer-small-box{ | ||
523 | + transform:translateX(2.5%); | ||
524 | + width : 95%; | ||
498 | } | 525 | } |
499 | 526 | ||
500 | 527 | ... | ... |
... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
5 | <meta charset="UTF-8" /> | 5 | <meta charset="UTF-8" /> |
6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
7 | <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | 7 | <meta http-equiv="X-UA-Compatible" content="ie=edge" /> |
8 | - <title>The Town HTML CSS Template</title> | 8 | + <title>TongGilMut</title> |
9 | <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" /> | 9 | <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" /> |
10 | <link rel="stylesheet" href="slick/slick.css"> | 10 | <link rel="stylesheet" href="slick/slick.css"> |
11 | <link rel="stylesheet" href="slick/slick-theme.css"> | 11 | <link rel="stylesheet" href="slick/slick-theme.css"> |
... | @@ -18,8 +18,12 @@ | ... | @@ -18,8 +18,12 @@ |
18 | <script src="../../docs/js/jquery-1.9.1.js"></script> | 18 | <script src="../../docs/js/jquery-1.9.1.js"></script> |
19 | <script type="text/javascript" src="../../docs/js/examples-base.js"></script> | 19 | <script type="text/javascript" src="../../docs/js/examples-base.js"></script> |
20 | <script type="text/javascript" src="../../docs/js/highlight.min.js"></script> | 20 | <script type="text/javascript" src="../../docs/js/highlight.min.js"></script> |
21 | +<<<<<<< HEAD | ||
21 | <script type="text/javascript" | 22 | <script type="text/javascript" |
22 | src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script> | 23 | src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script> |
24 | +======= | ||
25 | + <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script> | ||
26 | +>>>>>>> 4c7fe1b45bf1746088a811e7fc1b8a9c7172f7cd | ||
23 | <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" /> | 27 | <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" /> |
24 | 28 | ||
25 | <!-- | 29 | <!-- |
... | @@ -68,7 +72,7 @@ | ... | @@ -68,7 +72,7 @@ |
68 | </div> | 72 | </div> |
69 | 73 | ||
70 | <div class="tm-next tm-intro-next"> | 74 | <div class="tm-next tm-intro-next"> |
71 | - <a href="#contact" class="text-center tm-down-arrow-link"> | 75 | + <a href="#contact" class="button1 text-center tm-down-arrow-link"> |
72 | <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i> | 76 | <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i> |
73 | </a> | 77 | </a> |
74 | </div> | 78 | </div> |
... | @@ -90,6 +94,7 @@ | ... | @@ -90,6 +94,7 @@ |
90 | <input type="text" id="end"> | 94 | <input type="text" id="end"> |
91 | </div> | 95 | </div> |
92 | <div class="question-field question-grade">몇학년인가요?</div> | 96 | <div class="question-field question-grade">몇학년인가요?</div> |
97 | +<<<<<<< HEAD | ||
93 | <div class="input-grade"> | 98 | <div class="input-grade"> |
94 | <div class="custom-select" style="width:208px; margin-right:40px"> | 99 | <div class="custom-select" style="width:208px; margin-right:40px"> |
95 | <select id="semester"> | 100 | <select id="semester"> |
... | @@ -124,6 +129,60 @@ | ... | @@ -124,6 +129,60 @@ |
124 | <div class="answer-field" id="answer-how-many-hours"> | 129 | <div class="answer-field" id="answer-how-many-hours"> |
125 | 지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br> | 130 | 지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br> |
126 | 졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br> | 131 | 졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br> |
132 | +======= | ||
133 | + <div class="input-grade"><div class="custom-select" style="width:208px; margin-right:40px"> | ||
134 | + <select> | ||
135 | + <option value="0">1학년 1학기</option> | ||
136 | + <option value="sem-1-1">1학년 1학기</option> | ||
137 | + <option value="sem-1-2">1학년 2학기</option> | ||
138 | + <option value="sem-2-1">2학년 1학기</option> | ||
139 | + <option value="sem-2-2">2학년 2학기</option> | ||
140 | + <option value="sem-3-1">3학년 1학기</option> | ||
141 | + <option value="sem-3-2">3학년 2학기</option> | ||
142 | + <option value="sem-4-1">4학년 1학기</option> | ||
143 | + <option value="sem-4-2">4학년 2학기</option> | ||
144 | + </select> | ||
145 | + </div></div> | ||
146 | + </div> | ||
147 | + <a href="#result" class="button2 text-center tm-down-arrow-link"> | ||
148 | + <button style= "color:black" class="fas fa-3x fa-caret-down tm-down-arrow" type="button" onclick="semester();return false;">계산하기 | ||
149 | + </button> | ||
150 | + </a> | ||
151 | + </div> | ||
152 | + </section> | ||
153 | + | ||
154 | + | ||
155 | + <section id="result"> | ||
156 | + <div class="answer-grid-container"> | ||
157 | + <div class="map" id="map" style="width:500px;height:300px;""></div> | ||
158 | + <div class="answer-field" style="width:300px;"><br><br>한번 갈 때마다 ...<br> | ||
159 | + <span class="answer-highlight" id="hour">?</span> 시간 | ||
160 | + <span class="answer-highlight" id="min">?</span> 분 <br> | ||
161 | + <span class="answer-highlight" id="dist">?</span> km <br> | ||
162 | + </div> | ||
163 | + | ||
164 | + <div class="list-answer-field"> | ||
165 | + 지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br> | ||
166 | + 졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br> | ||
167 | + </div> | ||
168 | + <div class="detail-answer-field"> | ||
169 | + <div class="detail-answer-box salary-field">이 시간에 알바를 했다면?<br> | ||
170 | + <div class="detail-answer-small-box"> | ||
171 | + <span id = "salary">?</span>원<br></div></div> | ||
172 | + <div class="detail-answer-box dish-field">교통비로 국밥<br> | ||
173 | + <div class="detail-answer-small-box"> | ||
174 | + <span id = "dish">?</span>그릇<br></div> | ||
175 | + </div> | ||
176 | + <div class="detail-answer-box everest-field">이 거리라면 에베레스트 등반을<br> | ||
177 | + <div class="detail-answer-small-box"> | ||
178 | + <span id = "everest">?</span>번이나...<br></div> | ||
179 | + </div> | ||
180 | + <div class="detail-answer-box earth-field">지구를<br> | ||
181 | + <div class="detail-answer-small-box"> | ||
182 | + <span id = "earth">?</span>바퀴나 돌아요<br><br><br> | ||
183 | + </div> | ||
184 | + </div> | ||
185 | +>>>>>>> 4c7fe1b45bf1746088a811e7fc1b8a9c7172f7cd | ||
127 | </div> | 186 | </div> |
128 | </div> | 187 | </div> |
129 | </div> | 188 | </div> |
... | @@ -397,9 +456,9 @@ | ... | @@ -397,9 +456,9 @@ |
397 | since = sem * time * 150 | 456 | since = sem * time * 150 |
398 | until = (8 - sem) * time * 150 | 457 | until = (8 - sem) * time * 150 |
399 | salary = since * 8590 | 458 | salary = since * 8590 |
400 | - dish = Math.floor((pay * 150) / 6000) | 459 | + dish = Math.floor((sem * pay * 150) / 6000) |
401 | - everest = Math.floor((distance * 2) / 8846) | 460 | + everest = Math.floor((sem * distance * 2) / 8846) |
402 | - earth = ((distance * 2) / 40075000).toFixed(3) | 461 | + earth = ((sem * distance * 2) / 40075000).toFixed(3) |
403 | } | 462 | } |
404 | 463 | ||
405 | if (target == 'sem-1-1') { | 464 | if (target == 'sem-1-1') { |
... | @@ -504,7 +563,7 @@ | ... | @@ -504,7 +563,7 @@ |
504 | $(function () { | 563 | $(function () { |
505 | // Hero Section - Background Parallax | 564 | // Hero Section - Background Parallax |
506 | background_image_parallax($(".tm-parallax"), 0.30, false); | 565 | background_image_parallax($(".tm-parallax"), 0.30, false); |
507 | - background_image_parallax_2($("#contact"), 0.80); | 566 | + background_image_parallax_2($("#contact"), 0.80) |
508 | 567 | ||
509 | // Handle window resize | 568 | // Handle window resize |
510 | window.addEventListener('resize', function () { | 569 | window.addEventListener('resize', function () { |
... | @@ -530,12 +589,18 @@ | ... | @@ -530,12 +589,18 @@ |
530 | 589 | ||
531 | // Add smooth scrolling to all links | 590 | // Add smooth scrolling to all links |
532 | // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp | 591 | // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp |
533 | - $("a").on('click', function (event) { | 592 | + $(".button1").on('click', function (event) { |
534 | $('html, body').animate({ | 593 | $('html, body').animate({ |
535 | scrollTop: $("#contact").offset().top | 594 | scrollTop: $("#contact").offset().top |
536 | }, 400); | 595 | }, 400); |
537 | }); | 596 | }); |
538 | 597 | ||
598 | + $(".button2").on('click', function (event) { | ||
599 | + $('html, body').animate({ | ||
600 | + scrollTop: $("#result").offset().top-10 | ||
601 | + }, 400); | ||
602 | + }); | ||
603 | + | ||
539 | // Pop up | 604 | // Pop up |
540 | $('.tm-gallery').magnificPopup({ | 605 | $('.tm-gallery').magnificPopup({ |
541 | delegate: 'a', | 606 | delegate: 'a', | ... | ... |
-
Please register or login to post a comment