박재윤 / OSS-TongGilMut

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

css 3차 수정

Inline Side-by-side
Showing 2 changed files with 100 additions and 64 deletions
......@@ -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%;
}
......
......@@ -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',
......