-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
복습으로 혼자 해봤는데 slick을 입히면 project-photo가 안보입니다.
21.04.26 18:49 작성 조회수 301
1
강사님 안녕하세요!
home 섹션까지 전부 마치고 전체적으로 제 힘으로 다시 만들어보고 있는 중인데 아무리 삽질해도 안되는 부분이 생겨 질문드립니다...
project 섹션에서 html/css를 전부 구축하고 slick 효과를 넣는 과정에서 강사님처럼 slick을 입혔는데 .project-photo 영역이 전부 흰색으로 보이는 현상이 발생했습니다.
완성본이랑 비교해보는 중인데 일단 css를 완성본으로 덮어씌우면 slick 효과가 입혀지는 것으로 확인돼서 css에 문제가 있는 것 같다고 판단했습니다.
html은 완성본과 같은 상태이고 css는 복습과정에서 강사님 css 순서와 다르게 써내려가고 있는데 어디가 잘못된건지 도통 못찾겠습니다... ㅠㅠ 확인 한번만 부탁드립니다 ㅠㅠ
.project-inner{
background-color: #fff;
border: 1px solid #ddd;
}
.tabs{
width: 300%;
height: 100%;
transition: 0.5s;
}
.tab{
width: 33.33333%;
height: 100%;
float: left;
}
input[id=tab1]:checked ~ .tabs {
margin-left: 0;
}
input[id=tab2]:checked ~ .tabs {
margin-left: -100%;
}
input[id=tab3]:checked ~ .tabs {
margin-left: -200%;
}
input[type=radio]{
display: none;
}
.btn{
width: 36%;
height: 10px;
position: absolute;
bottom: 30px;
left: 40px;
}
.btn label{
width: 5px;
height: 5px;
background-color: #000;
border-radius: 50%;
display: block;
float: left;
margin: 0 10px;
position: relative;
cursor: pointer;
}
.btn label:first-child{
margin-left: 6px;
}
.btn label:before{
content: '';
display: block;
position: absolute;
top: -6px;
left: -6px;
width: 17px;
height: 17px;
border: 1px solid transparent;
border-radius: 50%;
transition: 0.5s;
}
.btn label:hover::before{
border: 1px solid #aaa;
}
input[id=tab1]:checked ~ .btn label[for=tab1]::before,
input[id=tab2]:checked ~ .btn label[for=tab2]::before,
input[id=tab3]:checked ~ .btn label[for=tab3]::before{
border: 1px solid #ddd;
}
.project-info{
width: 37%;
float: left;
padding-top: 20px;
padding-left: 40px;
}
.project-info h3{
margin-top: 35px;
font-size: 22px;
}
.project-info ul{
margin-bottom: 30px;
}
.project-info ul li{
margin: 10px 0;
}
.project-info ul li i{
font-size: 14px;
}
.project-info .detail{
margin-bottom: 30px;
}
.project-info .detail div{
font-size: 12px;
display: inline-block;
text-align: center;
margin: 0 15px;
}
.project-info .detail div span{
font-size: 30px;
display: block;
}
.project-info button{
border: none;
width: 230px;
padding: 12px 0;
text-transform: uppercase;
background-color: #3f3f3f;
color: #fff;
transition: 0.5s;
cursor: pointer;
}
.project-info button .fas{
transition: 0.3s;
}
.project-info button:hover{
background-color: #000;
}
.project-info button:hover .fas{
padding-left: 20px;
}
.project-photo{
width: 60%;
height: 100%;
float: right;
position: relative;
overflow: hidden;
}
.project-photo img{
position: absolute;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
반응형 웹사이트 포트폴리오(Architecture Agency)
PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - #06(Slick.js 이미지 슬라이더)
강의실 바로가기
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2021.05.01
슬릭 슬라이더 안보이는 문제 해결했는데요. 시간이 좀 걸린 이유가 제가 만든 코드랑 다르게 만드셔서 그래요.
JS 문제는 아니구요. CSS 문제에요.
제가 만든 강의 영상 코드는 .tab 밑에 .project-info 와 .project-photo에 아래 처럼 CSS가 되어 있거든요.
.tab > div {
height: 100%;
float: left;
}
.project-info {
width: 25%;
}
.project-photo {
width: 75%;
overflow: hidden;
}
작성하신 코드에는 너무 불필요한 속성이 많이 들어가 있어요. 특히 .project-photo img 라는 선택자는 필요가 없는데... 여기에 positon: absolute가 있어서 slick css에 있는 position 속성과 충돌이 나서 그런 것 같아요. 슬릭은 요소가 있으면 알아서 div로 묶어서 position 속성으로 제어하거든요.
일단 .project-photo img 선택자면 없어지면 문제해결되요. 곧 이 선택자에서 준 absolute가 문제가 되서 슬릭이 안보인거에요.
.project-photo {
width: 60%;
/* height: 100%; */
float: right;
/* position: relative;
overflow: hidden;
border: 5px solid red; */
}
.project-photo img {
/* position: absolute;
height: 100%;
top: 0;
left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
}
wodnjs306
질문자2021.05.03
진짜 길고 제멋대로라 파악하기 너무 힘드셨을 것 같은데 찾아주셔서 감사합니다 ㅠㅠㅠ
제이쿼리 라이브러리가 들어갈 곳에는 css 제어를 함부로 하면 안되는 것이군요!!
깨달음을 얻었어요 감사합니다 ㅠㅠ
0
코딩웍스(Coding Works)
지식공유자2021.04.27
제가 이번주에 강의를 시작해서 정신이 없어서 답변을 빨리 못드렸네요.
죄송합니다...ㅠㅠ
혹시 해결이 되셨나요? 해결 아직 못하셨으면 코드 올려주세요.
CSS만 가지고는 알 수 없구요. 풀코드가 있어야 해요.
html, css, js 풀 코드를 답글로 올려주세요.
wodnjs306
질문자2021.04.28
아직 해결 못했습니다ㅠㅠㅠ HTML / CSS / JS 순서대로 풀코드 올렸습니다!!
번거로운 검사하시게 해드려서 죄송하고 감사합니당 ㅜㅜ
@@@@@@@@@@@@@@ HTML
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DesignWorks Architecture Agency</title>
<script src="js/jquery-2.1.4.js"></script>
<!-- Page scroll -->
<script src="js/velocity/velocity.min.js"></script>
<script src="js/velocity/velocity.ui.min.js"></script>
<script src="js/velocity/main.js"></script>
<link rel="stylesheet" href="js/velocity/velocity2.css">
<!-- Smooth scroll -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- Custom Js&Css -->
<script src="custom2.js"></script>
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="responsive2.css">
<!-- Slick Js&Css -->
<script src="js/slick/slick.min.js"></script>
<link rel="stylesheet" href="js/slick/slick-theme.css">
<link rel="stylesheet" href="js/slick/slick.css">
<!-- FontAwesome CDN 5.15.3 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="on" data-animation="rotate">
<section class="cd-section" id="home">
<div>
<div class="content">
<div class="home-inner">
<!-- welcome-text home-heading -->
<h3 class="welcome-text">
You can do it <span>with CodingWorks<i class="fas fa-heart"></i></span>
</h3>
<div class="opacity-image"></div>
<div class="home-heading">
<span>Creative</span>
<span>Architecture</span>
<span>Specialists</span>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="about">
<div>
<div class="content">
<div class="about-inner">
<div class="about-items">
<div class="item">
<div class="icon">
<img src="images/careers-main-01.png">
</div>
<div class="text">
<h3>Together we can make an impact</h3>
<p>Design Works the excitement of an entrepreneurial environment with the stability of an established
practice. Principals and senior leadership work side-by-side with junior designers to create
innovative, workable designs.</p>
</div>
</div>
<div class="item">
<div class="icon">
<img src="images/careers-main-02.png">
</div>
<div class="text">
<h3>We’re always looking for talent</h3>
<p>If you don’t see an open position that fits your talents, send us your resume. We’re always looking
for smart, self-starters and will reach out to you if something becomes available.</p>
</div>
</div>
<div class="item">
<div class="icon">
<img src="images/careers-main-03.png">
</div>
<div class="text">
<h3>Fellowship</h3>
<p>Every summer we offer a Fellowship to a select group of students in architecture, planning and
landscape architecture. Read about our 2019 Fellowship winners and learn more about what the
Fellowship has to offer.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section visible" id="project">
<div>
<div class="content">
<div class="project-inner">
<input type="radio" name="tabmenu" id="tab1" checked>
<input type="radio" name="tabmenu" id="tab2">
<input type="radio" name="tabmenu" id="tab3">
<div class="tabs">
<div class="tab">
<div class="project-info">
<h3>Project : Glass Wall Architecture</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, temporibus recusandae unde neque
excepturi eius ad aliquam non iusto officiis!</p>
<ul>
<li>
<i class="fas fa-chevron-right"></i>
<b>Area</b> : 1670 m2
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Completed Date</b> : September 2018
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Architect</b> : Andrew Yu
</li>
</ul>
<div class="detail">
<div>
<span>225</span>
WORKING DAY
</div>
<div>
<span>320</span>
MEMBERS
</div>
<div>
<span>3M</span>
BUDGET
</div>
</div>
<button>
view-project
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
<div class="project-photo">
<img src="images/project-main-01-01.jpg">
<img src="images/project-main-01-02.jpg">
<img src="images/project-main-01-03.jpg">
<img src="images/project-main-01-04.jpg">
</div>
</div>
<div class="tab">
<div class="project-info">
<h3>Project : Glass Wall Architecture</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, temporibus recusandae unde neque
excepturi eius ad aliquam non iusto officiis!</p>
<ul>
<li>
<i class="fas fa-chevron-right"></i>
<b>Area</b> : 1670 m2
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Completed Date</b> : September 2018
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Architect</b> : Andrew Yu
</li>
</ul>
<div class="detail">
<div>
<span>225</span>
WORKING DAY
</div>
<div>
<span>320</span>
MEMBERS
</div>
<div>
<span>3M</span>
BUDGET
</div>
</div>
<button>
view-project
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
<div class="project-photo">
<img src="images/project-main-01-01.jpg">
<img src="images/project-main-01-02.jpg">
<img src="images/project-main-01-03.jpg">
<img src="images/project-main-01-04.jpg">
</div>
</div>
<div class="tab">
<div class="project-info">
<h3>Project : Glass Wall Architecture</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, temporibus recusandae unde neque
excepturi eius ad aliquam non iusto officiis!</p>
<ul>
<li>
<i class="fas fa-chevron-right"></i>
<b>Area</b> : 1670 m2
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Completed Date</b> : September 2018
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Architect</b> : Andrew Yu
</li>
</ul>
<div class="detail">
<div>
<span>225</span>
WORKING DAY
</div>
<div>
<span>320</span>
MEMBERS
</div>
<div>
<span>3M</span>
BUDGET
</div>
</div>
<button>
view-project
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
<div class="project-photo">
<img src="images/project-main-01-01.jpg">
<img src="images/project-main-01-02.jpg">
<img src="images/project-main-01-03.jpg">
<img src="images/project-main-01-04.jpg">
</div>
</div>
</div>
<div class="btn">
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="plan">
<div>
<div class="content">
<div class="plan-inner">
<div class="plan-feature">
<div class="plan-info">
<div class="plan-heading">
<h3>Planning <br>For the Next Project</h3>
<hr class="bar">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque quibusdam quaerat id delectus neque
corrupti assumenda nesciunt suscipit sunt laboriosam, ad tempore vitae iure quae! Aut deleniti dolorem
</p>
</div>
<div class="plan-photo">
<img src="images/plan-main-01.jpg">
</div>
</div>
<div class="history-info">
<h3>History</h3>
<hr class="bar">
<div class="history-slider">
<div class="item">
<h4>The Project of Architect for the <span>2013</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2014</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2015</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2016</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2017</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2018</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2019</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2020</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2021</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus ea libero nam fugit autem odit?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="awards">
<div>
<div class="content">
<div class="awards-inner">
<div class="about-awards">
<div class="about-heading">
<h3>
2020<br>
Architecture Award<br>
Winner
</h3>
<hr class="bar">
<p>The mission of the Architecture MasterPrize (AMP) is to advance the appreciation and exposure of
quality
architectural design worldwide. The AMP architecture award celebrates creativity and innovation in the
fields of architectural design, landscape architecture, and interior design. Submissions from architects
all around the world are welcome.
</p>
<a class="view-awards">view the awards</a>
</div>
</div>
<div class="victory-jump">
<img src="images/victory-jump.png">
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="location">
<div>
<div class="content">
<div class="location-inner">
<div class="feature">
<div class="office">
<div class="headquarters">
<span>CREATIVE DESGIN GROUP</span>
<h3>Headquarters</h3>
<p>
spanorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam ab iure alias cum sapiente at
laudantium
explicabo ad magnam corrupti.
</p>
<p class="address">
Address: 309, New Cavendish St, EC1Y 3WK / Tel : 0800 214 5252
</p>
</div>
<div class="customer">
<span>THE PERFECT WAY</span>
<h3>Customer Service</h3>
<p>
spanorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam ab iure alias cum sapiente at
laudantium
explicabo ad magnam corrupti.
</p>
<p class="address">
Address : 11 Fifth Ave - New York, US / Tel : 0800 809 3400
</p>
</div>
</div>
<div class="service">
<div class="service-items">
<div class="item">
<i class="fas fa-leaf"></i>
<h4>Built and natural contexts</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
accusamus inventore.</p>
<div class="item">
<i class="fas fa-bullseye"></i>
<h4>Landscape design</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
accusamus inventore.</p>
<div class="item">
<i class="fas fa-cube"></i>
<h4>Every building site unique</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
accusamus inventore.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="contact">
<div>
<div class="content">
<div class="contact-inner">
<div class="contact-feature">
<div class="contact-form">
<h3><b>Contact</b> Us</h3>
<p>Feel free to ask for details, dont’save any questions.</p>
<h4>Email <span>*</span></h4>
<form class="send-box">
<input type="email">
<h4>Subject <span>*</span></h4>
<input type="text">
<h4>Message <span>*</span></h4>
<textarea cols="30" rows="10"></textarea>
<button>
send messages
</button>
</form>
</div>
<div class="contact-info">
<h4>Our <b>Office</b></h4>
<ul>
<li>
Address : Address: 309, New Cavendish St, EC1Y 3WK
</li>
<li>
Phone : 0800 214 5252
</li>
<li>
Email : designworks@designworks.com
</li>
</ul>
<h4>Business <b>Hours</b></h4>
<ul>
<li>
<i class="far fa-clock"></i>Monday - Friday : 9am to 5pm
</li>
<li>
<i class="far fa-clock"></i>Saturday : 9am to 2pm
</li>
<li>
<i class="far fa-clock"></i>Sunday : Closed
</li>
</ul>
<h4>Get in <b>Touch</b></h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident consequatur minus deleniti? Quia
error animi tenetur veritatis consequuntur sapiente perspiciatis quae atque. Aliquam, sint quas?</p>
</div>
</div>
</div>
</div>
</div>
</section>
<header>
<div class="gnb-inner">
<div class="logo">
<a href="#"><img src="images/logo.png"></a>
</div>
<div class="opacity-black"></div>
<div class="gnb">
<div class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#project">Project</a>
<a href="#plan">Plan & History</a>
<a href="#awards">Awards</a>
<a href="#location">Location</a>
<a href="#contact">Contact</a>
</div>
<div class="slogan">
We design places, not projects.
</div>
</div>
<div class="trigger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<div class="gototop">
<a href="#"><i class="fas fa-arrow-up"></i></a>
</div>
<div class="hiring">
<a><i class="far fa-comment-dots"></i>hiring</a>
</div>
</body>
</html>
@@@@@@@@@@@@@@ CSS
/* Google Web Font : Montserratet */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap");
/* FontAwesome CDN 5.15.3 */
@import url("https://use.fontawesome.com/releases/v5.15.3/css/all.css");
/* Reset CSS */
* {
box-sizing: border-box;
}
ul {
list-style: none;
padding: 0;
}
a {
text-decoration: none;
}
body{
margin: 0;
}
/* Default CSS */
body{
font-family: 'Montserrat', sans-serif;
color: #222;
height: 100vh;
}
.cd-section{
height: 100%;
}
.cd-section > div{
height: 100%;
position: relative;
}
/* Entire Layout */
.content{
width: calc(100% - 40px);
height: calc(100% - 80px);
margin: 60px 20px 20px 20px;
background-color: #ddd;
overflow: hidden;
}
.content > div{
width: 100%;
height: 100%;
position: relative;
}
/* Header */
header{
position: relative;
width: 100%;
height: 60px;
}
.gnb-inner{
line-height: 60px;
width: calc(100% - 40px);
margin: auto;
}
.logo{
float: left;
cursor: pointer;
}
.gnb{
float: right;
}
.gnb .menu{
display: none;
}
.gnb .slogan{
float: right;
}
/* gototop */
.gototop{
display: none;
}
/* Hiring */
.hiring {
position: fixed;
bottom: 40px;
right: 40px;
color: #fff;
text-align: center;
border-radius: 20px;
padding: 10px 20px;
background-color: #000;
transition: 0.3s;
cursor: pointer;
}
.hiring a i{
padding-left: 5px;
font-size: 20px;
transform: rotateY(180deg);
}
.hiring:active{
transform: scale(0.8);
}
/* ################### section : home ################### */
.home-inner{
background-color: #fff;
position: relative;
}
.home-inner::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #000;
animation: overlay 1s 1.3s both;
}
.welcome-text{
font-family: 'Source Sans Pro', sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
font-weight: 300;
text-align: center;
opacity: 0;
animation: slideup 1.5s both;
}
.welcome-text span{
display: block;
font-size: 26px;
line-height: 2em;
}
.welcome-text span i{
color: crimson;
padding-left: 5px;
}
.opacity-image{
background: url(images/section-bg-01.jpg) no-repeat center center / cover;
width: 100%;
height: 100%;
opacity: 0;
animation: opacity 1s 2.0s both;
}
.home-heading{
position: absolute;
top: 50%;
left: 230px;
transform: translateY(-50%);
color: #fff;
font-size: 90px;
font-weight: bold;
}
.home-heading span{
display: block;
overflow: hidden;
animation: reveal 0.5s linear both;
}
.home-heading span:nth-child(1){
animation-delay: 2.4s;
}
.home-heading span:nth-child(2){
animation-delay: 2.6s;
}
.home-heading span:nth-child(3){
animation-delay: 2.8s;
}
@keyframes slideup{
0%{
opacity: 0;
top: 70%;
}
20%{
opacity: 1;
top: 50%;
}
80%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes overlay{
0%{
left: 0;
width: 0;
}
50%{
left: 0;
width: 100%;
}
100%{
left: 100%;
}
}
@keyframes opacity{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes reveal{
0%{
width: 0;
}
100%{
width: 100%;
}
}
/* ################### section : about ################### */
.about-inner{
background: #0dace3 url(images/line-drawing.png) no-repeat right bottom / 45%;
}
.about-items{
position: absolute;
width: 70%;
top: 50%;
left: 45%;
transform: translate(-50%, -50%);
}
.item{
position: relative;
}
.item .icon{
float: left;
width: 100px;
filter: invert(1);
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: 0.3s;
}
.item .icon img{
width: 100%;
}
.item .text{
margin-left: 130px;
}
.item .text h3{
color: #fff;
font-size: 26px;
margin: 0;
transition: 0.3s;
}
.item .text p{
overflow: hidden;
font-size: 18px;
color: #fff;
}
.item:hover .icon{
filter: invert(0);
}
.item:hover .text h3{
color: #222;
}
/* ################### section : project ################### */
.project-inner{
background-color: #fff;
border: 1px solid #ddd;
}
.tabs{
width: 300%;
height: 100%;
transition: 0.5s;
}
.tab{
width: 33.33333%;
height: 100%;
float: left;
}
input[id=tab1]:checked ~ .tabs {
margin-left: 0;
}
input[id=tab2]:checked ~ .tabs {
margin-left: -100%;
}
input[id=tab3]:checked ~ .tabs {
margin-left: -200%;
}
input[type=radio]{
display: none;
}
.btn{
width: 36%;
height: 10px;
position: absolute;
bottom: 30px;
left: 40px;
}
.btn label{
width: 5px;
height: 5px;
background-color: #000;
border-radius: 50%;
display: block;
float: left;
margin: 0 10px;
position: relative;
cursor: pointer;
}
.btn label:first-child{
margin-left: 6px;
}
.btn label:before{
content: '';
display: block;
position: absolute;
top: -6px;
left: -6px;
width: 17px;
height: 17px;
border: 1px solid transparent;
border-radius: 50%;
transition: 0.5s;
}
.btn label:hover::before{
border: 1px solid #aaa;
}
input[id=tab1]:checked ~ .btn label[for=tab1]::before,
input[id=tab2]:checked ~ .btn label[for=tab2]::before,
input[id=tab3]:checked ~ .btn label[for=tab3]::before{
border: 1px solid #ddd;
}
.project-info{
width: 37%;
float: left;
padding-top: 20px;
padding-left: 40px;
}
.project-info h3{
margin-top: 35px;
font-size: 22px;
}
.project-info ul{
margin-bottom: 30px;
}
.project-info ul li{
margin: 10px 0;
}
.project-info ul li i{
font-size: 14px;
}
.project-info .detail{
margin-bottom: 30px;
}
.project-info .detail div{
font-size: 12px;
display: inline-block;
text-align: center;
margin: 0 15px;
}
.project-info .detail div span{
font-size: 30px;
display: block;
}
.project-info button{
border: none;
width: 230px;
padding: 12px 0;
text-transform: uppercase;
background-color: #3f3f3f;
color: #fff;
transition: 0.5s;
cursor: pointer;
}
.project-info button .fas{
transition: 0.3s;
}
.project-info button:hover{
background-color: #000;
}
.project-info button:hover .fas{
padding-left: 20px;
}
.project-photo{
width: 60%;
height: 100%;
float: right;
position: relative;
overflow: hidden;
}
.project-photo img{
position: absolute;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ################### section : plan ################### */
.plan-inner{
background-color: #1d1b24;
}
.plan-feature{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
color: #fff;
}
.plan-info{
display: block;
overflow: hidden;
}
.plan-info .plan-heading{
width: 60%;
float: left;
padding-right: 50px;
}
.plan-info .plan-heading h3,
.history-info h3{
font-size: 34px;
margin: 0;
font-weight: normal;
}
.plan-info .plan-heading .bar,
.history-info .bar{
display: inline-block;
width: 50px;
height: 4px;
background-color: dodgerblue;
border: none;
margin: 20px 0;
}
.plan-info .plan-heading p,
.history-slider .item p{
margin: 0;
font-size: 16px;
color: #bbb;
line-height: 1.5em;
}
.plan-info .plan-photo{
width: 40%;
height: 250px;
float: right;
overflow: hidden;
text-align: center;
position: relative;
}
.plan-info .plan-photo img{
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.history-info{
margin: 0;
}
.history-slider .item h4{
margin: 0;
font-size: 20px;
font-weight: normal;
line-height: 1.3em;
}
.history-slider .item h4 span{
color: dodgerblue;
}
/* ################### section : awards ################### */
.awards-inner{
background-color: #fff;
border: 1px solid #eee;
}
.about-awards{
width: 50%;
height: 100%;
float: left;
background-color: #1a1f24;
text-align: center;
position: relative;
}
.about-awards .about-heading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
}
.about-awards .about-heading h3{
color: #fff;
font-size: 40px;
font-weight: normal;
margin: 0;
}
.about-awards .about-heading .bar{
background-color: crimson;
width: 40px;
height: 4px;
border: none;
display: inline-block;
margin: 20px 0;
}
.about-awards .about-heading p{
margin: 0;
color: #bbb;
line-height: 1.5em;
}
.about-awards .about-heading .view-awards{
display: inline-block;
margin-top: 20px;
border: 1px solid #bbb;
padding: 10px 20px;
border-radius: 20px;
color: #bbb;
}
.victory-jump{
width: 50%;
height: 100%;
float: right;
position: relative;
overflow: hidden;
}
.victory-jump img{
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ################### section : location ################### */
.location-inner{
background: url(images/background-location.jpg) no-repeat center center / cover;
}
.location-inner::before{
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
background-color: rgba(0, 0, 0, 0.692);
}
.feature{
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.office{
color: #fff;
width: 50%;
float: left;
padding-right: 30px;
}
.office .headquarters{
margin-bottom: 20px;
}
.office span{
color: #bbb;
}
.office h3{
font-size: 40px;
margin: 0;
color: #1db1f0;
}
.office p{
color: #bbb;
line-height: 1.5em;
font-size: 18px;
margin: 0;
margin-top: 10px;
}
.office .address{
font-size: 12px;
color: #fff;
}
.service .service-items{
width: 50%;
float: right;
}
.service .service-items .item .fas{
color: #1db1f0;
font-size: 34px;
margin-bottom: 12px;
}
.service .service-items .item h4{
color: #fff;
margin: 0;
font-size: 24px;
}
.service .service-items .item p{
color: #bbb;
overflow: hidden;
}
/* ################### section : contact ################### */
.contact-inner{
background-color: #fff;
border: 1px solid #ddd;
}
.contact-feature{
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contact-form{
width: 50%;
float: left;
padding-right: 42px;
}
.contact-form h3{
font-size: 30px;
font-weight: normal;
margin: 0;
}
.contact-form h4{
font-size: 18px;
margin: 0 0 8px 0;
}
.contact-form h4 span{
color: crimson;
font-weight: normal;
}
.send-box input,
.send-box textarea{
width: 100%;
border: 1px solid #ccc;
margin-bottom: 15px;
transition: 0.3s;
outline: none;
padding: 10px;
}
.send-box input:hover,
.send-box textarea:hover{
box-shadow: 0 0 5px #0088cc;
}
.send-box input:focus,
.send-box textarea:focus{
background-color: #eee;
}
.send-box input{
padding: 10px;
}
.send-box textarea{
height: 100px;
}
.send-box button{
border: none;
background-color: #0088cc;
color: #fff;
padding: 10px 15px;
border-radius: 3px;
text-transform: uppercase;
}
.contact-info{
width: 50%;
float: right;
}
.contact-info h4{
font-weight: normal;
font-size: 20px;
margin: 0;
}
.contact-info ul{
margin-bottom: 28px;
}
.contact-info ul li{
margin-top: 10px;
}
.contact-info ul li:last-child{
color: #0088cc;
}
.contact-info ul li .far{
margin-right: 6px;
}
.contact-info p{
line-height: 1.5em;
}
@@@@@@@@@@@@@@ JS
$(function () {
// Trigger
$('.trigger').click(function () {
$('.gnb, .trigger, .opacity-black').toggleClass('active')
})
$('.opacity-black').click(function () {
$(this).removeClass('active');
})
// Smooth Scrolling
$('.menu a').click(function () {
$.scrollTo(this.hash || 0, 900)
$('.gnb, .opacity-black').removeClass('active')
})
// Change CSS with Scroll
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$('header, .gototop').addClass('active');
}
else {
$('header, .gototop').removeClass('active');
}
})
$('.opacity-black').click(function () {
$('.gnb').removeClass('active')
})
// slick.js : history
$('.history-slider').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
});
// slick.js : project-photo
$('.project-photo').slick({
dots: true,
infinite: true,
speed: 500,
fade: false,
autoplay: true,
autoplaySpeed: 2000,
// cssEase: 'linear'
})
})
답변 2