css 3차 수정

Joung Jiwon
Commit 3cccd16830cdd36d6060ef317298536df570a5db 3cccd168 1 parent 762c38a8
Showing 2 changed files with 100 additions and 64 deletions
project/css/templatemo-style.css
project/index.html
--- a/project/css/templatemo-style.css
View file @3cccd16
+++ b/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: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 0.5fr 0.5fr 0.5fr;
+  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: 1fr 1fr 1fr 1fr;
+  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%;
 }
--- a/project/index.html
View file @3cccd16
+++ b/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-grid-container">
-      <div class="answer-field">한번 갈 때마다 ...<br>
+        <div class="map" id="map" style="width:500px;height:300px;""></div>
-        <span class="answer-highlight">n</span> 시간 
+        <div class="answer-field" style="width:300px;"><br><br>한번 갈 때마다 ...<br>
-        <span class="answer-highlight">n</span> 분 <br>
+          <span class="answer-highlight">?</span> 시간 
-      </div>
+          <span class="answer-highlight">?</span> 분 <br>
-      <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>
-      </div>
+
-      <div class="row">
+        <div class="list-answer-field">
-        <div class="answer-detail-question">
+          지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
-          이 시간에 알바를 했다면? <br>
+            졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
-          교통비로 국밥 <br>
-          이 거리라면 에베레스트 등반을 <br>
-          지구를
         </div>
-        <div class="answer-detail-answer">
+        <div class="detail-answer-field">
-          <span id = "salary">?</span>원<br>
+          <div class="detail-answer-box salary-field">이 시간에 알바를 했다면?<br>
-          <span id = "dish">?</span>그릇<br>
+            <div class="detail-answer-small-box">
-          <span id = "everest">?</span>번이나...<br>
+              <span id = "salary">?</span>원<br></div></div>
-          <span id = "earth">?</span>바퀴나 돌아요<br><br><br>
+          <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',