-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
Slick js 적용 후 슬라이드 이미지 크기 변경 질문 드립니다.
21.07.21 14:50 작성 조회수 2.28k
1
안녕하세요.. 복습 후에 강의 내용 바탕으로 포폴 제작중인데, 예제랑 다르게 제작하다 보니 문제점이 생겼습니다.ㅠㅠ
project 강의 파트에서 오른쪽 슬라이드에 사용할 이미지 크기가 너무 커
포지션, 퍼센트 등을 적용해서 잘 배치했다고 생각했는데 ,,
Slick js를 적용하면 position 이 충돌했는지, 제가 코드를 잘못 작성했는지.. 이미지가 overflow 되버립니다.
문제점 한번 봐주시면 감사하겠습니다..ㅠㅠ
아직 많이 초보라..죄송합니다..ㅠ
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nespresso</title>
<script src="Js/jquery-2.1.4.js"></script>
<!-- Page Scroll Effects JS & CSS -->
<!--<script src="Js/velocity/modernizr.js"></script>-->
<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/velocity.css">
<!-- Smooth Scrolling -->
<script src="Js/jquery.scrollTo.min.js"></script>
<!-- Slick.js -->
<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">
<!-- Custom JS & CSS -->
<script src="custom.js"></script>
<link rel="stylesheet" href="style.css"><!-- pc. ver-->
<link rel="stylesheet" href="responsive.css"><!-- mobile. ver-->
</head>
<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="on" data-animation="rotate">
<div class="container">
<section class="cd-section" id="home">
<div>
<div class="content">
<div class="home-inner"></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">
<a href="#"><img src="img/NES-about-icon%20(3).png" alt=""></a>
<span>
<a href="#">
<h3>SUSTAINABLE QUALITY</h3>
</a>
<p>Because a Nespresso cup of coffee can deliver an extraordinary experience while creating greater value for society and the environment.</p>
</span>
</div>
<div class="item">
<a href="#"><img src="img/NES-about-icon%20(4).png" alt=""></a>
<span>
<a href="#">
<h3>ORIGINS AND BLENDS</h3>
</a>
<p>From Master Origins to Blends, we have selected a few of our coffees so you can discover the countless uncompromising choices that go into every cup.</p>
</span>
</div>
<div class="item">
<a href="#"><img src="img/NES-about-icon%20(1).png" alt=""></a>
<span>
<a href="#">
<h3>THE COFFEE EXPERIENCE</h3>
</a>
<p>From the cherries we pick to the coffee you drink, we are committed to convey our expertise, savoir-faire and passion every step of the way.</p>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="product">
<div>
<div class="content">
<div class="product-inner">
<input type="radio" name="tabmenu" id="tab1" checked>
<input type="radio" name="tabmenu" id="tab2">
<input type="radio" name="tabmenu" id="tab3">
<input type="radio" name="tabmenu" id="tab4">
<div class="tabs">
<div class="tab">
<div class="product-info" data-text="VERTUO">
<h3>YOUR COMPLETE RANGE OF COFFEE STYLES</h3>
<p>With Vertuo, explore all the different coffee styles from espresso to Alto adapting to every mood. Coffee pleasure is no accident: it must be deliberately created, consistently and without compromise, cup after cup from coffee origins to capsules, by living our principles.</p>
<ul>
<li><b>FRUITY & FLOWERY</b> : Flowery, Citrus, Fruity-winy</li>
<li><b>BALANCED</b> : Honey, Cereals, Roasted</li>
<li><b>INTENSE</b> : Cocoa, Spicy, Woody,Intensely roasted</li>
</ul>
<div class="detail">
<div>
<img src="img/nes-product-vertuo-alto.png" alt=""><span>ALTO</span>414ml
</div>
<div>
<img src="img/nes-product-vertuo-coffee.png" alt=""><span>COFFEE</span>237ml
</div>
<div>
<img src="img/nes-product-vertuo-lungo.png" alt=""><span>GRAN LUNGO</span>150ml
</div>
<div>
<img src="img/nes-product-vertuo-espresso.png" alt=""><span>ESPRESSO</span>40ml
</div>
</div>
<a class="discover-more" href="">DISCOVER MORE <i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="product-photo">
<img src="img/nes-product-vertuo-coffee-01.jpg" alt="">
<img src="img/nes-product-vertuo-coffee-02.jpg" alt="">
<img src="img/nes-product-vertuo-coffee-03.jpg" alt="">
<img src="img/nes-product-vertuo-coffee-04.jpg" alt="">
</div>
</div>
<div class="tab">
<div class="product-info" data-text="ORIGINAL">
<h3>YOUR CLASSIC ESPRESSO EXPERIENCE</h3>
<p>With original, live your authentic espresso experience from a milder fruity espresso to the Neapolitan style short Ristretto, with or without milk. Coffee pleasure is no accident: it must be deliberately created, consistently and without compromise, cup after cup from coffee origins to capsules, by living our principles.</p>
<ul>
<li><b>BODY</b> : Go full-bodied for a powerful experience or keep it gentle and light-bodied. Take your pick.</li>
<li><b>BITTERNESS</b> : Dark or distinguished. Find out what level of bitterness is for you.</li>
<li><b>ROASTING</b> : Choose what level of fuller, roast flavours you prefer in your Nespresso Vertuo coffee.</li>
</ul>
<div class="detail">
<div>
<img src="img/nes-product-original-ristretto_L.png" alt=""><span>RISTRETTO</span>25ml
</div>
<div>
<img src="img/nes-product-original-espresso_L.png" alt=""><span>ESPRESSO</span>40ml
</div>
<div>
<img src="img/nes-product-original-lungo_L.png" alt=""><span>LUNGO</span>110ml
</div>
</div>
<a class="discover-more" href="">DISCOVER MORE <i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="product-photo">
<img src="img/nes-product-original-coffee-01.jpg" alt="">
<img src="img/nes-product-original-coffee-02.jpg" alt="">
<img src="img/nes-product-original-coffee-03.jpg" alt="">
<img src="img/nes-product-original-coffee-04.jpg" alt="">
</div>
</div>
<div class="tab">
<div class="product-info" data-text="VERTUO">
<h3>VERTUO COFFEE MACHINES</h3>
<p>Prepare your small or large coffee style with generous crema, all at the touch of a button. Here’s the secret: each Vertuo machine uses barcode recognition and a patented extraction system to create your favourite coffee. You can also electronically open and close the head of the machine and conveniently position the water tank with VertuoPlus.</p>
<ul>
<li>EXTRACTION BY CENTRIFUSION™</li>
<li>GENEROUS AND SMOOTH CREMA</li>
<li>INNOVATIVE COFFEE SYSTEM</li>
<li>EXCEPTIONAL COFFEE QUALITY</li>
</ul>
<div class="detail">
<div>
<img src="img/nes-product-vertuo-matteeblack.png" alt=""><span>vertuo plus<br>matte black</span>₩ 299,000
</div>
<div>
<img src="img/nes-product-vertuo-white.png" alt=""><span>vertuo plus<br>white</span>₩ 299,000
</div>
<div>
<img src="img/nes-product-vertuo-black.png" alt=""><span>vertuo plus<br>black</span>₩ 299,000
</div>
<div>
<img src="img/nes-product-vertuo-sliver.png" alt=""><span>vertuo plus<br>silver</span>₩ 299,000
</div>
</div>
<a class="discover-more" href="">DISCOVER MORE <i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="product-photo">
<img src="img/nes-product-vertuo-machine-01.jpg" alt="">
<img src="img/nes-product-vertuo-machine-02.jpg" alt="">
<img src="img/nes-product-vertuo-machine-03.jpg" alt="">
<img src="img/nes-product-vertuo-machine-04.jpg" alt="">
</div>
</div>
<div class="tab">
<div class="product-info" data-text="ORIGINAL">
<h3>DISCOVER THE ORIGINAL <br>COFFEE MACHINES</h3>
<p>Use the versatile level of settings to create a variety of coffee and milk recipes using barista-like customisation or one-touch systems. Indulge yourself in Creatista or Lattissima.</p>
<ul>
<li>pressure extraction system</li>
<li>creamy and dense crema</li>
<li>exceptional coffee choice</li>
<li>espresso-based and milk recipes</li>
</ul>
<div class="detail">
<div>
<img src="img/nes-product-lattissima-silkywhite.png" alt=""><span>lattissima one f111<br>silky white</span>₩ 379,000
</div>
<div>
<img src="img/nes-product-lattissima-black.png" alt=""><span>lattissima one f111<br>black</span>₩ 379,000
</div>
<div>
<img src="img/nes-product-lattissima-white.png" alt=""><span>gran lattissima f531<br>white</span>₩ 479,000
</div>
<div>
<img src="img/nes-product-Creatista-Stainless.png" alt=""><span>creatista plus j520<br>stainless steel</span>₩ 749,000
</div>
</div>
<a class="discover-more" href="">DISCOVER MORE <i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="product-photo">
<img src="img/nes-product-original-machine-01.jpg" alt="">
<img src="img/nes-product-original-machine-02.jpg" alt="">
<img src="img/nes-product-original-machine-03.jpg" alt="">
<img src="img/nes-product-original-machine-04.jpg" alt="">
</div>
</div>
</div>
<div class="btn">
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
<label for="tab4"></label>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section visible" id="business">
<div>
<div class="content">
<div class="business-inner">
<div class="business-feature">
<div class="business-info">
<div class="business-heading">
<h2>SOLUTIONS ADAPTED<br>TO YOUR BUSINESS</h2>
<hr class="bar">
<p>
Nespresso coffee solutions for professionals are tailored to your specific business needs. Discover our Business Solutions to find out more.
</p>
</div>
<div class="business-photo">
<img src="img/Nes-business-main.jpg" alt="">
</div>
</div>
<div class="business-pro">
<h2>TAILORED COFFEE SOLUTIONS<br> FOR EVERY BUSINESS AND VENUES</h2>
<hr class="bar">
<div class="business-slider">
<div class="slider-card">
<div class="slider-photo">
<img src="img/nes-business-office.jpg" alt="">
</div>
<a href="#">
<div class="slider-content">
<h4>office <br><span>The very best for your workplace</span></h4>
<p>You care about quality at every level of your business. When you offer <strong>Nespresso</strong> coffees, you show your employees, customers and business partners a truly positive image.</p>
</div>
</a>
</div>
<div class="slider-card">
<div class="slider-photo">
<img src="img/nes-business-hotel.jpg" alt="">
</div>
<a href="#">
<div class="slider-content">
<h4>Hotel <br><span>Offer memorable experiences</span></h4>
<p>As part of an unforgettable stay at your hotel, your guests will remember an exceptional cup of coffee. The choice of <strong>Nespresso</strong> coffees reveals your passion for excellence in every detail and your commitment to your guest's enjoyment.</p>
</div>
</a>
</div>
<div class="slider-card">
<div class="slider-photo">
<img src="img/nes-business-cafe.jpg" alt="">
</div>
<a href="#">
<div class="slider-content">
<h4>Restaurant & café <br><span>Be inspired by our creative coffee recipes</span></h4>
<p>Serving delicious and bespoke beverages can significantly contribute to the success of your establishment.</p>
</div>
</a>
</div>
<div class="slider-card">
<div class="slider-photo">
<img src="img/nes-business-dining.png" alt="">
</div>
<a href="#">
<div class="slider-content">
<h4>Fine dining <br><span>Offer customers a moment to remember</span></h4>
<p><strong>Nespresso</strong> is the perfect partner for fine dining establishments that strive to enhance their guests' experience through an exceptional cup of coffee.</p>
</div>
</a>
</div>
<div class="slider-card">
<div class="slider-photo">
<img src="img/nes-business-airplane.jpg" alt="">
</div>
<a href="#">
<div class="slider-content">
<h4>Airlines <br><span>Take passenger hospitality to new heights</span></h4>
<p>With <strong>Nespresso</strong> , you can show your commitment to excellence by serving one of the coffees blended to satisfy even the most refined tastes.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="store">
<div>
<div class="content">
<div class="store-inner">
<div class="feature">
<div class="office">
<div class="headquarters">
<b>OUR GLOBAL PRESENCE</b>
<h2>Headquarters</h2>
<p>
Every single Nespresso capsule sold in the world is carefully produced at one of our three factories based in Switzerland. Using the latest technology, our team of more than 700 production experts carefully transform the highest quality sustainable coffee beans into our capsules that are exported worldwide.
</p>
<span>Address : Avenue d’Ouchy 4-6, 1006 Lausanne, Switzerland / Phone : +41 21 796 96 96</span>
</div>
<div class="customer">
<b>Assistance 24/7</b>
<h2>Customer Service</h2>
<p>
Our Technical Specialists can give you an immediate diagnosis over the phone. If your machine requires a repair, we offer an Assistance Service Program which includes: Collecting your machine from an address of your choice. Loaning a machine for the repair period (subject to availability) Returning your machine to the same collection address 6 month guarantee on the repair of your machine.
</p>
<span>Address : 16th Floor, 70, Chungjeong-ro, Seodaemun-gu, Seoul, Republic of Korea / Phone : +82 2 3277 1398</span>
</div>
</div>
<div class="service">
<div class="service-item">
<a href="#"><img src="img/nes-orderitem%20(1).png" alt=""></a>
<h3>Discover a host of privileges online.</h3>
<p>
Connect using the Nespresso mobile applications on iPhone, iPad and Android devices and enjoy Nespresso services anywhere.
</p>
</div>
<div class="service-item">
<a href="#"><img src="img/nes-orderitem%20(2).png" alt=""></a>
<h3>Order by phone</h3>
<p>
Our Coffee Specialists are on hand 24/7 to advise you on your selection of Grands Crus and your machine and to provide you with a delivery service suited to your individual needs.
</p>
</div>
<div class="service-item">
<a href="#"><img src="img/nes-orderitem%20(3).png" alt=""></a>
<h3>Order in Boutiques</h3>
<p>
Step into the aromatic, colourful world of Nespresso at your nearest boutique. Here you're invited to discover and taste the full range of Nespresso coffee with our team of coffee experts.
</p>
</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>
<form class="send-box">
<label>Name <span>*</span></label>
<input type="text">
<label>Email <span>*</span></label>
<input type="email">
<label>Subject <span>*</span></label>
<input type="text">
<label>Message <span>*</span></label>
<textarea cols="30" rows="10"></textarea>
<button>SEND MESSAGE</button>
</form>
</div>
<div class="contact-info">
<h4>Our <b>Office</b></h4>
<ul>
<li>Address : 70, Chungjeong-ro, Seodaemun-gu, Seoul, Republic of Korea</li>
<li>Phone : +82 080 734 1111</li>
<li>Email : club.korea@nespresso.com</li>
</ul>
<h4>Business <b>Hours</b></h4>
<ul>
<li><i class="fa fa-clock-o"></i> Monday - Friday : 9am to 6pm</li>
<li><i class="fa fa-clock-o"></i> Saturday : 9am to 2pm</li>
<li><i class="fa fa-clock-o"></i> Sunday : Closed</li>
</ul>
<h4>Get in <b>Touch</b></h4>
<p>
Nespresso respects your right to privacy in the online world when you use our websites and communicate electronically with us. We put in place all necessary measures to keep secure any personal information you give us.
Read more information about the protection of your data at Nespresso.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Header -->
<header>
<div class="gnb-inner">
<div class="logo pc">
<a href="#none"><img src="img/NES-logo-bk3.png"></a>
</div>
<div class="logo mobile">
<a href="#none"><img src="img/NES-logo-wh3.png"></a>
</div>
<div class="gnb">
<div class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#product">Product</a>
<a href="#business">Business</a>
<a href="#store">Store</a>
<a href="#contact">Contact</a>
</div>
<div class="slogan">What Else? | Nespresso.</div>
</div>
<div class="trigger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
</div>
<a href="#" class="gototop"><img src="img/gototop.png" alt=""></a>
<a href="https://www.nespresso.com/kr/ko/order/capsules/original" target="_blank" class="btn-order"><i class="fa fa-shopping-cart"></i> Order</a>
<nav>
<ul class="cd-vertical-nav">
<li><a href="#0" class="cd-prev inactive">Next</a></li>
<li><a href="#0" class="cd-next">Prev</a></li>
</ul>
</nav>
</body></html>/* Google web Font */
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Manrope: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');
@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=Maven+Pro:wght@400;500;600;700&display=swap');
/* FontAwesome CDN 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/* Reset CSS */
* { box-sizing: border-box; }
ul { list-style: none; padding: 0; }
a { text-decoration: none; }
.mobile { display: none; }
/* Default CSS */
body {
font-family: 'Josefin Sans', sans-serif;
color: #222;
font-size: 15px;
margin: 0;
height: 100vh;
background-color: #fff;
}
/* Entire Layout */
.cd-section {
height: 100vh;
}
.cd-section > div {
height: 100%;
position: relative;
}
.content {
background-color: #ddd;
position: absolute;
width: calc(100% - 40px);
height: calc(100% - 80px);
left: 20px;
bottom: 20px;
overflow: hidden;
}
/* Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
/* background-color: #fff;*/
}
.gnb-inner {
width: calc(100% - 40px);
margin: auto;
margin-top: 10px;
height: 60px;
line-height: 60px;
}
.logo {
float: left;
}
.logo img {
padding-top: 0px;
}
.gnb {
float: right;
}
.menu {
display: none;
}
.menu a {}
.slogan {
font-size: 18px;
}
.trigger {
display: none;
}
/* Store Button */
.btn-order {
position: fixed;
right: 50px;
bottom: 50px;
color: #fff;
background-color: #466268;
padding: 10px 20px;
border-radius: 20px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
transition: 0.3s;
}
.btn-order .fa {
margin-right: 5px;
}
.btn-order:active {
transform: scale(0);
}
/* ################### Section : about ################### */
.about-inner {
background: url(img/NES-about-bg1.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}
.about-items {
width: 50%;
color: #f7f7f7;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 200px;
}
.item {
overflow: hidden;
margin-bottom: 20px;
}
.item:hover img {
filter: invert(1);
}
.item:hover h3 {
letter-spacing: 2px;
}
.item img {
height: 150px;
float: left;
margin-right: 20px;
filter: invert(50%);
padding-top: 20px;
transition: 0.5s;
}
.item span {}
.item h3 {
font-size: 30px;
transition: 0.5s;
color: #f7f7f7;
}
.item p {
overflow: hidden;
font-size: 22px;
font-weight: 300;
}
/*
.about-btn {
float: left;
margin-left: 150px;
width: 200px;
height: 50px;
background-color: rgba(255, 255, 255, 0.2);
border: 3px solid #466268;
border-radius: 50;
}
*/
/* ################### Section : product ################### */
.product-inner {
height: 100%;
overflow: hidden;
background-color: #5f373b;
}
.tabs {
height: 100%;
width: 400%;
transition: 0.5s;
}
.tab {
height: 100%;
width: 25%;
float: left;
position: relative;
}
.tab > div {
height: 100%;
float: left;
}
.product-info {
width: 50%;
}
.product-photo {
position: absolute;
width: 70%;
float: right;
left: 51%;
/*overflow: hidden;*/
}
.product-photo img {
width: 70%;
}
input[name=tabmenu] {
display: none;
}
.btn {;
position: absolute;
left: 0px;
bottom: 30px;
width: 51%;
text-align: center;
}
.btn label {
cursor: pointer;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #f7f7f7;
display: inline-block;
margin: 10px;
position: relative;
}
.btn label:before {
content: '';
display: inline-block;
border: 1px solid transparent;
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
left: -6px;
top: -6px;
transition: 0.3s;
}
.btn label:hover:before {
border: 1px solid #f7f7f7;
}
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,
input[id=tab4]:checked ~ .btn label[for=tab4]:before {
border: 1px solid #f7f7f7;
}
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[id=tab4]:checked ~ .tabs {
margin-left: -300%;
}
/* Product-info */
.product-info {
padding: 50px;
color: #f7f7f7;
margin-left: 10px;
text-align: center;
position: relative;
}
.product-info h3 {
font-size: 36px;
margin: 0;
position: relative;
}
.product-info p {
font-size: 22px;
line-height: 1.5em;
font-weight: 300;
text-align: left;
}
.product-info ul {
font-size: 18px;
line-height: 2em;
margin: 20px 0;
text-align: left;
}
.product-info ul li:before {
content:"\f105";
font-family: fontawesome;
font-size: 20px;
margin-right: 10px;
}
.product-info ul li b {
font-size: 20px;
margin-right: 10px;
}
.detail {
margin: 40px 0;
}
.detail div {
display: inline-block;
text-align: center;
width: 24%;
color: #999;
font-size: 18px;
}
.detail img {
width: 180px;
margin-bottom: 10px;
}
.tab:nth-of-type(1) .detail,
.tab:nth-of-type(2) .detail {
margin-top: 60px;
}
.tab:nth-of-type(1) .detail div:nth-child(2) img {
width: 220px;
}
.tab:nth-of-type(1) .detail div:nth-child(4) img {
width: 160px;
}
.tab:nth-of-type(2) .detail > div {
padding-right: 20px;
}
.tab:nth-of-type(2) .detail img {
margin-left: 30px;
margin-bottom: 20px;
}
.tab:nth-of-type(2) .detail div:nth-child(1) img {
width: 120px;
}
.tab:nth-of-type(2) .detail div:nth-child(2) img {
width: 140px;
}
.tab:nth-of-type(3) .detail img {
width: 150px;
}
.tab:nth-of-type(4) ul {
text-transform: uppercase;
}
.tab:nth-of-type(4) .detail img {
width: 130px;
}
.detail div span {
font-size: 20px;
font-weight: 400;
display: block;
color: #fff;
margin-bottom: 10px;
}
.discover-more {
background-color: #595049;
color: #f7f7f7;
text-transform: uppercase;
font-size: 15px;
width: 250px;
display: inline-block;
padding: 10px;
text-align: center;
transition: 0.3s;
}
.discover-more:hover {
background-color: #f7f7f7;
color: #595049;
}
.discover-more .fa {
transition: 0.3s;
}
.discover-more:hover .fa {
margin-left: 20px;
}
.product-info:before {
content: attr(data-text);
font-size: 100px;
color: rgba(221, 221, 221, 0.12);
position: absolute;
top: 370px;
left: 400px;
}
/* Slick.js Custom CSS */
.product-photo .slick-arrow {
display: none !important;
}
.product-photo .slick-dots li button:before {
color: #f7f7f7;
font-size: 40px;
}
/* ################### Section : business ################### */
.business-inner {
background-color: #466268;
height: 100%;
}
.business-feature {
width: 85%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: -20px;
}
.business-feature > div {
height: 320px;
color: #f7f7f7;
}
.business-info {}
.business-info div {
float: left;
}
.business-heading {
width: 70%;
padding-right: 200px;
}
.business-heading h2,
.business-pro h2{
color: #f7f7f7;
margin: 0;
font-weight: 600;
font-size: 36px;
}
.business-heading p {
font-size: 22px;
line-height: 1.5em;
font-weight: 300;
margin-top: 50px;
}
.business-heading hr.bar,
.business-pro hr.bar {
/* display: inline-block;*/
width: 250px;
height: 4px;
border: none;
background-color: #f7f7f7;
margin: 20px 0;
}
.business-photo {
width: 30%;
}
.business-photo img {
margin-left: -50px;
margin-top: -20px;
width: 500px;
}
.business-pro {}
.business-slider {
position: absolute;
width: 100%;
height: 300px;
}
.slider-card {
/* border: 5px solid yellow;*/
background-color: #000;
position: relative;
margin: 0 50px;
}
.slider-card div {
float: left;
}
.slider-photo {
width: 400px;
height: 300px;
overflow: hidden;
}
.slider-photo img {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: opacity(0.4)
}
.business-slider .slider-content {
position: absolute;
width: 100%;
color: #f7f7f7;
text-align: center;
}
.slider-content h4 {
font-size: 34px;
margin: 30px;
text-transform: uppercase;
font-style: italic;
}
.slider-content span {
font-weight: normal;
font-size: 18px;
font-style: normal;
}
.slider-content p {
font-size: 18px;
margin: 20px 10px;
line-height: 2.2rem;
font-weight: 200;
}
.business-slider .slick-prev:before, .slick-next:before{
font-size: 40px;
}
/* ################### Section : store ################### */
.store-inner {
background: url(img/NES-store-bg.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}
.store-inner:before {
/* 기본 inline 요소 */
content: '';
background-color: rgba(0, 0, 0, 0.8);
position: absolute; /* 중요!! */
width: 100%;
height: 100%;
}
.feature {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f7f7f7;
}
.feature > div {
float: left;
}
.office {
width: 60%;
padding-top: 40px;
padding-right: 60px;
}
.service {
width: 40%;
padding-top: 30px;
}
.office b {
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
}
.office h2 {
font-size: 50px;
color: #466268;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
margin: 0;
margin-top: 20px;
}
.office p {
font-size: 18px;
font-weight: 300;
line-height: 1.3em;
padding-bottom: 10px;
}
.office span {
font-size: 16px;
font-weight: 400;
}
.customer {
margin-top: 80px;
}
.service-item {
margin-bottom: 40px;
}
.service-item img {
filter: invert(1);
height: 60px;
transition: 0.3s;
}
.service-item img:hover {
transform: scale(1.1);
}
.service-item h3 {
color: #f7f7f7;
font-size: 26px;
margin: 0;
margin-top: 10px;
}
.service-item p {
font-weight: 300;
font-size: 18px;
}
/* ################### Section : contact ################### */
.contact-inner {
background: #595049 url(img/NES-sub-about-bg.png) no-repeat right bottom;
height: 100%;
background-size: 40%;
}
.contact-feature {
width: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contact-feature > div {
float: left;
width: 40%;
padding: 20px;
margin-right: 60px;
color: #f7f7f7;
font-weight: 300;
}
.contact-form {}
.contact-form h3 {
font-size: 30px;
font-weight: normal;
margin: 0;
text-transform: uppercase;
}
.send-box {}
.send-box label {
display: block;
font-weight: bold;
font-size: 16px;
margin: 10px 0;
margin-top: 20px;
}
.send-box label span {
color: crimson;
font-weight: normal;
}
.send-box input[type=email],
.send-box input[type=text],
.send-box textarea {
border: 1px solid #000;
padding: 10px;
border-radius: 3px;
outline: none;
width: 100%;
transition: 0.5s;
}
.send-box input[type=email]:hover,
.send-box input[type=text]:hover,
.send-box textarea:hover {
border: 2px solid #466268;
}
.send-box input[type=email]:focus,
.send-box input[type=text]:focus,
.send-box textarea:focus {
background-color: #bbb;
}
.send-box button {
background-color: #466268;
color: #f7f7f7;
text-transform: uppercase;
padding: 12px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
transition: 0.3s;
margin-top: 10px;
}
.send-box button:hover {
background: #5f373b;
}
.contact-info {
margin-top: 30px;
}
.contact-info h4 {
font-weight: normal;
font-size: 25px;
margin: 0;
margin-top: 30px;
}
.contact-info ul {}
.contact-info ul li {
line-height: 2em;
}
.contact-info ul li:nth-child(3) {
font-weight: bold;
}
.contact-info p {
line-height: 1.5em;
}
.contact-info ul li fa {}
$(function () {
// Trigger
$('.trigger').click(function () {
$(this).toggleClass('active')
$('.gnb').toggleClass('active')
})
$('section, .menu a').click(function () {
$('.gnb').removeClass('active')
$('.trigger').removeClass('active')
})
// Smooth Scrolling
$('.menu a, .gototop').click(function (e) {
$.scrollTo(this.hash || 0, 900)
})
// Change CSS with Scroll
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$('header, .gototop').addClass('active')
} else {
$('header, .gototop').removeClass('active')
}
})
// Slick.js : business
$('.business-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3500,
})
// Slick.js : product photo
/*$('.product-photo').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
autoplay: true,
autoplaySpeed: 3500,
cssEase: 'linear',
})
*/
})
slick js 적용 전
slick js 적용 후 (autoplay 적용)
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2021.07.22
아래 내용 보시면 해결되실거에요.
슬릭에 관한 해결 내용도 있고 코드작성에 대한 기본기 부분도 적었으니 참고해주세요~
메일로 답변 드릴까하다가 다른 분들도 보시면서 도움이 되셨으면 하는 생각에 답글로 적습니다.
이 부분이 슬릭 적용 후 이미지 가득차지 않는 문제 해결방법입니다.
0
코딩웍스(Coding Works)
지식공유자2021.07.22
전체적으로 코드는 봤는데... 쉽지 않아 보이긴 합니다.
혹시 해결이 안되셨으면 전체 폴더 압축해서 이메일로 보내주세요.
이미지랑 모든 소스가 있어야 체크해볼 수 있을 것 같아요.
당장은 안되도 주중에 시간내서 볼게요.
이메일 : webnlife@naver.com
답변 2