티스토리 뷰
반응형
메가박스 사이트 만들기
동영상 보며 코딩하기 -메가박스 사이트 만들기
web's 동영상 바로가기
열네번째 강의 : 새로운 영화 영역2
평소 화면
max-width 960일때
max-width 768일때
max-width 600일때
<section id="new">
<div class="container">
<div class="row">
<div class="new">
<h2>새로운 영화</h2>
<div class="new_left">
<div class="play">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve">
<circle class="st0" cx="60" cy="60.4" r="56"/>
<path class="st1" d="M81,65.4c4.8-2.8,4.8-7.2,0-10L53.5,39.6c-4.8-2.8-8.7-0.5-8.7,5v31.7c0,5.5,3.9,7.8,8.7,5L81,65.4z"/>
</svg>
</div>
</div>
<div class="new_right">
<h3 class="title">로그 원: 스타워즈 스토리</h3>
<span class="release">2016년 10월 28일 개봉</span>
<div class="star">
<span class="icon star1"></span>
<span class="icon star1"></span>
<span class="icon star1"></span>
<span class="icon star2"></span>
<span class="icon star0"></span>
<strong>7.5/10</strong>
</div>
<ul class="summary">
<li class="genre"><span class="bar">액션</span><span>미국, 오스트레일리아</span></li>
<li class="age"><span class="bar">142분</span><span>12세 이상 관람가</span></li>
<li class="desc">단숨에 행성 하나를 파괴할 위력을 지닌 데스 스타가 완성되기 전에 설계도를 훔쳐내야 하는 이번 작전의 성공 확률은 고작 2.4%. 생사도 모르는 아버지에 얽힌 비밀을 밝히려는 진을 ...비롯해 유능한 정보 요원 ‘카시안’(디에고 루나), 두 눈이 멀었지만 탁월한 무술 실력을 지닌 ‘치루트’(견자단), 전투 베테랑 ‘베이즈’, 파일럿 ‘보디’, 시니컬한 드로이드 ‘K-2SO’까지 합류, 거대한 전쟁을 끝낼 ‘로그 원’이 이끄는 가장 비밀스런 작전이 시작되는데…</li>
</ul>
<div class="select">
<div class="s1">
<lable for="udate" class="ir_so">날짜</lable>
<input type="text" id="udate" name="udate" value="2019년 1월 25일" class="ui_select2" >
</div>
<div class="s2">
<label for="utime" class="ir_so">시간</label>
<select id="utime" name="utime" class="ui_select2">
<option value="오전 0:00">오전 0:00</option>
<option value="오전 1:00">오전 1:00</option>
<option value="오전 2:00">오전 2:00</option>
<option value="오전 3:00">오전 3:00</option>
<option value="오전 4:00">오전 4:00</option>
<option value="오전 5:00">오전 5:00</option>
<option value="오전 6:00">오전 6:00</option>
<option value="오전 7:00">오전 7:00</option>
<option value="오전 8:00">오전 8:00</option>
<option value="오전 9:00">오전 9:00</option>
<option value="오전 10:00">오전 10:00</option>
<option value="오전 11:00">오전 11:00</option>
<option value="오전 12:00">오전 12:00</option>
<option value="오후 1:00">오후 1:00</option>
<option value="오후 2:00">오후 2:00</option>
<option value="오후 3:00">오후 3:00</option>
<option value="오후 4:00">오후 4:00</option>
<option value="오후 5:00">오후 5:00</option>
<option value="오후 6:00">오후 6:00</option>
<option value="오후 7:00">오후 7:00</option>
<option value="오후 8:00">오후 8:00</option>
<option value="오후 9:00">오후 9:00</option>
<option value="오후 10:00">오후 10:00</option>
<option value="오후 11:00">오후 11:00</option>
<option value="오후 12:00">오후 12:00</option>
</select>
</div>
<div class="s3">
<label for="utext" class="ir_so">주소 또는 도로명을 입력해주세요.</label>
<input type="text" id="utext" name="utext" class="ui_input3" placeholder="주소 또는 도로명을 입력해주세요.">
</div>
</div>
<div class="btn">
<a href="#" class="white">좌석확인</a>
<a href="#" class="purple">예매하기</a>
</div>
</div>
</div>
</div>
</div>
</section>
/*새로운 영화*/
.new {padding: 100px 0; position: relative;}
.new h2 {font-size: 30px; font-weight: 500; margin-bottom: 20px;}
.new .new_left {position: relative; margin-right: 423px; height: 500px; background: #ccc url(../img/new01.jpg) center center; background-size: cover;}
.new .new_left .play {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 120px; height: 120px; }
.new .new_left .play .st0 {fill: #fff; opacity: 0.3;}
.new .new_left .play .st1 {fill: #fff}
.new .new_right {position: absolute; right: 0; top: 165px; width: 400px; height: 500px; padding: 34px; box-sizing: border-box; background: #f0f0f0; }
.new .new_right .title {font-size: 28px; color: #000;}
.new .new_right .release {font-size: 12px; color: #333; }
.new .new_right .star {padding: 13px 0;}
.new .new_right .star strong {font-size: 15px; padding-left: 5px;}
.new .new_right .star span {display: inline-block; width: 20px; height: 20px; vertical-align: -3px}
.new .new_right .star .star1 {background-position: -393px 0;}
.new .new_right .star .star2 {background-position: -412px 0; }
.new .new_right .star .star0 {background-position: -374px 0;}
.new .new_right .summary {font-size: 14px;}
.new .new_right .genre {padding-bottom: 3px;}
.new .new_right .age {padding-bottom: 10px;}
.new .new_right .desc {margin-bottom: 20px; height: 108px; overflow: hidden;}
.new .new_right .select {overflow: hidden; }
.new .new_right .select .s1 {float: left; width: 49%; background: #000; margin-right: 2%;}
.new .new_right .select .s2 {float: left; width: 49%; background: #000;}
.new .new_right .select .s3 {float: left; width: 100%; margin-top: 2%;}
.new .new_right .btn {overflow: hidden; margin-top: 2%; text-align: center;}
.new .new_right .btn a {float: left; width: 49%; box-sizing: border-box; display: block; padding: 10px 30px 12px 30px;}
.new .new_right .btn a.white {background-color: #fff; margin-right: 2%; color: #3a0e6a; border: 1px solid #3a0e6a;}
.new .new_right .btn a.purple {background-color: #3a0e6a; color: #fff; border: 1px solid #6e40c4;}
@media (max-width: 960px){
.slider {height: 500px;}
.slider .swiper-slide h2 {margin-top: 170px; font-size: 37px; line-height: 45px;}
.slider .swiper-slide h2:after {bottom: -15px;}
.slider .swiper-slide h2 em {font-size: 34px;}
.slider .swiper-slide p {font-size: 16px; padding-top: 35px;}
.movie_title ul {width: auto;}
.movie_title li {width: 25%; box-sizing: border-box;}
.opening {padding: 50px 0;}
.opening .open_box {display: none;}
.opening .desc {background: none; font-size: 25px;}
.new .new_left {margin-right: 0; height: 400px;}
.new .new_right {position: relative; top: 0; width: 100%; height: auto;}
}
@media (max-width: 768px){
body {background: #d9d7e0;}
.row {padding: 0 16px;}
.mNav { right: 6px;}
.header h1 {text-align: left;}
.header h1 strong {display: none;}
#movie {background: none;}
#movie .row {background: #fff; margin: 24px 24px 0 24px; padding: 24px;}
#movie .ir_so {
position: static;
width: auto; height: auto; line-height: normal;
text-indent: 0; font-size: 24px; font-weight: bold; padding-bottom: 20px;}
.movie {padding: 0;}
.movie_title {margin-bottom: 30px;}
.movie_title ul {position: relative; padding-bottom: 10px;}
.movie_title ul:before {content: ''; position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: 2px; background: #e1e1e1; }
.movie_title li {width: auto; border: 0;}
.movie_title li a {position: relative; font-size: 18px; color: #666; font-weight: 400; padding: 0; margin-right: 35px;}
.movie_title li.active a:before {content: ''; position: absolute; z-index: 2; left: 0; bottom: -10px; width: 100%; height: 2px; background: #666;}
.movie_title li.active a {background: none; color: #666;}
#event .row {padding: 24px;}
.event {padding: 24px; background: #fff;}
.event h2 {font-size: 24px; font-weight: 700;}
.event .event_left {width: 100%; margin-right: 0;}
.event .event_right {display: none;}
.opening {margin: 0;}
#new .row {padding: 0 24px;}
.new {padding: 24px; background-color: #fff; margin-top: 24px;}
.new h2 {font-size: 24px; font-weight: 700; height: 27px; margin-bottom: 20px; padding-bottom: 10px;}
.new .new_right {padding: 24px;}
}
@media (max-width: 600px){
.slider {height: 400px;}
.slider .swiper-slide h2 {margin-top: 140px; font-size: 24px; line-height: 30px;}
.slider .swiper-slide h2:after {bottom: -5px;}
.slider .swiper-slide h2 em {font-size: 20px;}
.slider .swiper-slide p {font-size: 14px; padding-top: 25px;}
.banner_menu {top: 16px;}
.banner_menu .bm_right li.white a {font-size: 14px padding: 3px 5px 5px 5px; color: #fff; background: rgba(0,0,0,0.6); border-color: #fff;}
.banner_menu .bm_right li.purple a {font-size: 14px padding: 3px 5px 5px 5px; color: #fff; background: rgba(0,0,0,0.6); border-color: #fff;}
.swiper-pagination-bullet {width: 13px !important; height: 13px !important;}
#movie .container {position: relative;}
#movie .container:after {content: ''; position: absolute; z-index: 20; top: 0; right: 0; width: 8px; height: 100%; background: #d9d7e0;}
#movie .row {position: relative; margin: 8px; padding: 16px; margin-right: 0; padding-right: 0;}
#movie .row:after {content: ''; position: absolute; top: 0; right: 0; z-index: 10; width: 24px; height: 100%; background: #fff;}
#movie .ir_so {font-size: 18px; padding-bottom: 10px;}
.movie_title {margin-bottom: 20px;}
.movie_title ul {padding-bottom: 8px; white-space: nowrap; overflow-x: auto;}
.movie_title li a {font-size: 14px; margin-right: 15px;}
.movie_title li.active a:before {bottom: -8px;}
.movie_chart{position: relative; z-index: 30;}
.movie_chart > div > div > div .infor {padding: 5px;}
.movie_chart > div > div > div .infor h3 {text-align: center; margin: 5px 0 10px;}
.movie_chart > div > div > div .infor h3 strong {display: block; font-size: 19px; color: #222; font-weight: 300;}
.movie_chart > div > div > div .infor h3 span {display: none;}
.movie_chart > div > div > div .infor .infor_btn a {width: 52%; margin-left: 24%; display: block; margin-right: 0; padding: 5px; color: #777; margin-bottom: 5px; box-sizing: border-box; font-size: 14px; background: none; border: 1px solid #ddd;}
.movie_chart > div > div > div .infor .infor_btn a:last-child {display: none;}
#event .row {padding: 0 8px;}
.event {padding: 16px;}
.event h2 {font-size: 18px; margin-bottom: 10px;}
#opening {margin: 8px 0;}
.opening {padding: 20px 0;}
.opening h2 {margin-bottom: 10px;}
.opening h2 .grand {background-size: 300px; background-position: 0 -105px; width: 197px; height: 24px;}
.opening .date {display: none;}
.opening .desc {font-size: 16px; font-weight: 400; padding-bottom: 0;}
#new .row {padding: 0 8px;}
.new {padding: 16px; margin-top: 8px;}
.new h2 {font-size: 18; margin-bottom: 0;}
.new .new_left {height: 300px;}
.new .new_right {padding: 17px;}
.new .new_right .title {font-size: 22px;}
.new .new_right .star {padding: 9px 0;}
.new .new_right .select .s1 {width: 100%; margin-right: 0; margin-bottom: 2%;}
.new .new_right .select .s2 {width: 100%;}
.new .new_right .select .s3 {}
}
/* input style */
input {background-image: none;}
input[type=button],
input[type=reset],
input[type=text],
input[type=password],
input[type=submit],
input[type=search],
input[type=tel],
input[type=email] {
-webkit-appearance: none;
border-radius: 0
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
input:checked[type=checkbox] {
background-color: #666;
-webkit-appearance: checkbox
}
/*셀렉트 메뉴 메인 스타일*/
.ui_select2{
width: 100%; box-sizing: border-box;
background: #2c2f34; color: #fff;
display: inline-block; height: 36px;
border: 0 none; padding: 0 10px; margin: 0;
font-family: inherit; font-size: inherit;
vertical-align: middle; text-align: left;
white-space: nowrap;
background: #2c2f34 url(../img/down.svg) no-repeat right 10px center;
background-size: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/*메인 텍스트 박스 스타일1*/
.ui_input3{
background: #2c2f34; color: #fff; border: 0; width: 100%; height: 36px; padding: 0 10px;
}
반응형
댓글
© 2019 Eun's