css 2차수정

Joung Jiwon
Commit 762c38a82fd51c7a1fd0febb073fccf9ac135919 762c38a8 1 parent b7116af3
Showing 2 changed files with 89 additions and 83 deletions
project/css/templatemo-style.css
project/index.html
--- a/project/css/templatemo-style.css
View file @762c38a
+++ b/project/css/templatemo-style.css
View file @762c38a
@@ -276,7 +276,7 @@ select::-ms-expand {
 /*style the items (options), including the selected item:*/
 .select-items div,.select-selected {
-  color: #333; font-size:15px;
+  color: #333; font-size:20px;
   text-align: center;
   border: 1px solid transparent;
   border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
@@ -327,34 +327,43 @@ select::-ms-expand {
 #contact {
   background-color: grey;
   color: white;
-  background-image: url(../img/the-town-bg-02.jpg);
   background-position: center;
   background-repeat: no-repeat;
-  min-height: 1500px;
+  min-height: 750px;
   position: relative;
   padding-bottom: 50px;
   padding-top: 160px;
 }
-.question-field{
+.grid-container {
-  display: flex;
+  display: grid;
-	justify-content: center;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-  width:100%;
+  grid-template-rows: 1fr 1fr 1fr;
-  height:50px;	
+  gap: 50px 50px;
+  grid-template-areas:
+    "question-home question-home question-home input-home input-home"
+    "question-school question-school question-school input-school input-school"
+    "question-grade question-grade question-grade input-grade input-grade";
 }
-.question-text{
+
-  width:25%;
+.input-home { grid-area: input-home; }
-  box-sizing: border-box;
+
-  float:left;
+.question-grade { grid-area: question-grade; }
-  text-align:left;
+
-  padding-right:10px;
+.input-school { grid-area: input-school; }
-	font-size:20px;
+
-}
+.question-home { grid-area: question-home; }
-.question-input{
+
-  width:25%;
+.question-school { grid-area: question-school; }
-  box-sizing:border-box;
+
-  float:right;
+.input-grade { grid-area: input-grade; }
+
+.question-field{
+  font-size: 35px;
+  text-shadow: 2px 2px 2px #333;
 }
+
+
 #semester{
 	width: 200px;
 	padding: .2em .5em;
@@ -375,15 +384,6 @@ select::-ms-expand {
 input{
   border-radius:5px;
 }
-.button_calculate{
-  width:15%;
-  position:relative;
-  left:44%;
-	margin-top:40px;
-	border:none;
-  border-radius:5px;
-  color : -internal-light-dark(black, white);
-}
 #map-answer{
 	display:flex;
@@ -484,9 +484,22 @@ iframe{
 	right:10%;
 }
+/*result*/
+#result{
+  margin-top : 200px;
+  background-color: grey;
+  color: white;
+  background-position: center;
+  background-repeat: no-repeat;
+  min-height: 750px;
+  position: relative;
+  padding-bottom: 50px;
+  padding-top: 160px;
+}
+
 .tm-footer {
-  position: absolute;
+  position: relative;
   bottom: 35px;
   left: 0;
   right: 0;
@@ -528,7 +541,7 @@ p {
   }
   .tm-container-contact {
-    max-width: 1063px;
+    max-width: 900px;
   }
 }
--- a/project/index.html
View file @762c38a
+++ b/project/index.html
View file @762c38a
@@ -66,7 +66,7 @@
     </div>
     <div class="tm-next tm-intro-next">
-      <a href="#introduction" class="text-center tm-down-arrow-link">
+      <a href="#contact" class="text-center tm-down-arrow-link">
         <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
       </a>
     </div>
@@ -77,50 +77,43 @@
   <!-- Contact -->
     <section id="contact" class="tm-section-pad-top tm-parallax-2">
     <div class="container tm-container-contact">
-        <div class="row">
+      <div class="grid-container">
-          <div class="container question-field">
+        <div class="question-field question-home">어디에 사나요?</div>
-            <div class="question-text">어디에 사나요?</div>
+        <div class="input-field input-home">
-            <div class="question-input">
+          <label for="question-input-field"></label>
-              <label for="question-input-field"></label>
+          <input type ="text" id="start"></div>
-              <input type ="text" id="start">
+        <div class="question-field question-school">무슨 학교에 다니나요?</div>
-            </div>
+        <div class="input-school">
-          </div>
+          <label for="question-input-field"></label>
-          <div class="container question-field">
+          <input type ="text" id="end">
-            <div class="question-text">무슨 학교에 다니나요?</div>
-            <div class="question-input">
-              <label for="question-input-field"></label>
-              <input type ="text" id="end">
-            </div>
-          </div>
-          <div class="container question-field">
-            <div class="question-text">몇 학년인가요?</div>
-            <div class="custom-select" style="width:208px; margin-right:42px">
-              <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 class="container button-field">
-            <button class="button_calculate" type="button" onclick="semester();return false;">계산하기
-            </button>
-          </div>
-        </div>
-<br>
-	    
-<div id="map" style="width:700px;height:700px;"></div>
-	<div class="answer-field">
-          한번 갈 때마다 ...<br>
-          <span class="answer-highlight">n</span> 시간 <span class="answer-highlight">n</span> 분 <br>
-          <span class="answer-highlight">n</span> 원 <br>
         </div>
+        <div class="question-field question-grade">몇학년인가요?</div>
+        <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="text-center tm-down-arrow-link">
+          <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
+        </a>
+      </div>
+    </section>
+      
+
+    <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">
@@ -144,15 +137,15 @@
           <span id = "earth">?</span>바퀴나 돌아요<br><br><br>
         </div>
       </div>
-    </div>
+      <footer class="text-center small tm-footer">
-    <footer class="text-center small tm-footer">
+        <p class="mb-0">
-      <p class="mb-0">
+          Copyright &copy; 2020 TongGilMut
-        Copyright &copy; 2020 TongGilMut
+
+          - Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a>
+        </p>
+      </footer>
+    </section>
-        - Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a>
-      </p>
-    </footer>
-  </section>
   <script src="js/jquery-1.9.1.min.js"></script>