Joung Jiwon / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
Joung Jiwon
762c38a8 1 parent b7116af3

css 2차수정

Inline Side-by-side
Showing 2 changed files with 89 additions and 83 deletions
......@@ -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{
display: flex;
justify-content: center;
width:100%;
height:50px;
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
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%;
box-sizing: border-box;
float:left;
text-align:left;
padding-right:10px;
font-size:20px;
}
.question-input{
width:25%;
box-sizing:border-box;
float:right;
.input-home { grid-area: input-home; }
.question-grade { grid-area: question-grade; }
.input-school { grid-area: input-school; }
.question-home { grid-area: question-home; }
.question-school { grid-area: question-school; }
.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;
}
}
......
......@@ -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="container question-field">
<div class="question-text">어디에 사나요?</div>
<div class="question-input">
<label for="question-input-field"></label>
<input type ="text" id="start">
</div>
</div>
<div class="container question-field">
<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 class="grid-container">
<div class="question-field question-home">어디에 사나요?</div>
<div class="input-field input-home">
<label for="question-input-field"></label>
<input type ="text" id="start"></div>
<div class="question-field question-school">무슨 학교에 다니나요?</div>
<div class="input-school">
<label for="question-input-field"></label>
<input type ="text" id="end">
</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">
<p class="mb-0">
Copyright &copy; 2020 TongGilMut
<footer class="text-center small tm-footer">
<p class="mb-0">
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>
......