tkjy01084778

<p>index.html 이랑JS파일CSS파일 올리는데요. 코트 붙여넣으니 한줄로 되버리네요....ㅠㅠ&nbsp;</p>
<p>어디서 문제인지 확인부탁드립니다.</p>
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3 shadow-lg sticky-top">
<div class="container">
<h3 class="m-0"><img src="https://www.inflearn.com/questions/assets/images/bootstrap-logo.png" alt="Logo" height="36px" /> My BSS web</h3>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> </button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#top"> Home </a></li>
<li class="nav-item"><a class="nav-link" href="#intro"> Intro </a></li>
<li class="nav-item"><a class="nav-link" href="#services"> Services </a></li>
<li class="nav-item"><a class="nav-link" href="#slogan"> Slogan </a></li>
<li class="nav-item"><a class="nav-link" href="#gallery"> Gallery </a></li>
<li class="nav-item"><a class="nav-link" href="#cta"> Contact </a></li>
<li class="nav-item"><a class="nav-link" href="#find-us"> Find us </a></li>
</ul>
</div>
</div>
</nav>
<section id="top">
<div class="section-content overlay d-flex justiify-content-center align-items-center">
<div class="container-xxl">
<div class="row align-items-center">
<div class="col-md-9 welcome">
<h1 class="welcome-title fw-light">Welcome to <span class="text-warning fw-bold">my first website.</span> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, temporibus.</h1>
<div class="divider">&nbsp;</div>
<div class="row welcome-desc">
<p class="col-sm-10 col-md-12 lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est laborum a dolorem sapiente iusto ab repellat quia eius reprehenderit eos!</p>
<p class="col-sm-2 col-md-12"><a class="btn btn-primary" href="#">Read more</a></p>
</div>
</div>
<div class="col-md-3 d-none d-md-block letsgo">
<div class="card card-body letsgo-card">
<div class="letsgo my-3">
<h4 class="letsgo-title card-title text-dark mb-3">Easy contact!</h4>
<p class="card-text text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, quis.</p>
</div>
<div class="letsgo-card-form"><form>
<div class="mb-3"><input class="form-control" type="text" placeholder="Your name" /></div>
<div class="mb-3"><input class="form-control" type="tel" placeholder="Your phone" /></div>
<div class="form-check mb-3"><input id="flexCheckDefault" class="form-check-input" type="text" /> <label class="form-check-label text-secondary" for="flexCheckDefault"> I agree to provide privacy. </label></div>
<p class="mb-3"><button class="btn btn-primary w-100" type="button">Submit</button></p>
</form></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="intro">
<div class="section-content">
<div class="container intro">
<div class="row align-items-center">
<div class="col-md-6 intro-first">
<div class="row px-md-3">
<div class="col-6">
<div class="card card-body my-3 position-relative rounded-3 shadow-lg intro-first-card">
<div class="overlay d-flex justify-content-center align-items-center position-absolute h-100 w-100 shadow-lg">
<h3 class="fw-light"><a class="link-light text-decoration-none" href="#">Link 1</a></h3>
</div>
</div>
</div>
<div class="col-6">
<div class="card card-body my-3 position-relative rounded-3 shadow-lg intro-first-card">
<div class="overlay d-flex justify-content-center align-items-center position-absolute h-100 w-100 shadow-lg">
<h3 class="fw-light"><a class="link-light text-decoration-none" href="#">Link 2</a></h3>
</div>
</div>
</div>
<div class="col-6">
<div class="card card-body my-3 position-relative rounded-3 shadow-lg intro-first-card">
<div class="overlay d-flex justify-content-center align-items-center position-absolute h-100 w-100 shadow-lg">
<h3 class="fw-light"><a class="link-light text-decoration-none" href="#">Link 3</a></h3>
</div>
</div>
</div>
<div class="col-6">
<div class="card card-body my-3 position-relative rounded-3 shadow-lg intro-first-card">
<div class="overlay d-flex justify-content-center align-items-center position-absolute h-100 w-100 shadow-lg">
<h3 class="fw-light"><a class="link-light text-decoration-none" href="#">Link 4</a></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 intro-second">
<h5 class="fw-light">Greetiongs!</h5>
<h1 class="mb-4">Introduce our website.</h1>
<div class="intro-text">
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem dicta sequi voluptatibus rerum voluptatum officia iste voluptates asperiores! Laudantium minima mollitia unde magnam quia doloribus veniam quasi odio hic a.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, dolorum sint minima rem doloribus dolore aliquid distinctio labore aperiam tenetur.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="services">
<div class="section-content">
<div class="container services">
<div class="services-header text-center mb-5">
<h1 class="display-5">Our amazing services</h1>
<div class="divider">&nbsp;</div>
<p class="lead text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque error provident ad ipsum iste facere blanditiis quas deleniti doloremque non.</p>
<div id="slick-slide" class="sercives-body">
<div class="services-col mx-2 my-3">
<div class="card"><a href="#"> <img class="card-img-top" src="https://www.inflearn.com/questions/assets/images/port1.jpg" alt="" /> </a>
<div class="card-body">
<h4 class="card-title">Skide title</h4>
<p class="card-text fw-light mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.</p>
<a class="btn btn-primary" href="#">View more...</a></div>
</div>
</div>
<div class="services-col mx-2 my-3">
<div class="card"><a href="#"> <img class="card-img-top" src="https://www.inflearn.com/questions/assets/images/port2.jpg" alt="" /> </a>
<div class="card-body">
<h4 class="card-title">Skide title</h4>
<p class="card-text fw-light mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.</p>
<a class="btn btn-primary" href="#">View more...</a></div>
</div>
</div>
<div class="services-col mx-2 my-3">
<div class="card"><a href="#"> <img class="card-img-top" src="https://www.inflearn.com/questions/assets/images/port3.jpg" alt="" /> </a>
<div class="card-body">
<h4 class="card-title">Skide title</h4>
<p class="card-text fw-light mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.</p>
<a class="btn btn-primary" href="#">View more...</a></div>
</div>
</div>
<div class="services-col mx-2 my-3">
<div class="card"><a href="#"> <img class="card-img-top" src="https://www.inflearn.com/questions/assets/images/port4.jpg" alt="" /> </a>
<div class="card-body">
<h4 class="card-title">Skide title</h4>
<p class="card-text fw-light mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.</p>
<a class="btn btn-primary" href="#">View more...</a></div>
</div>
</div>
<div class="services-col mx-2 my-3">
<div class="card"><a href="#"> <img class="card-img-top" src="https://www.inflearn.com/questions/assets/images/port5.jpg" alt="" /> </a>
<div class="card-body">
<h4 class="card-title">Skide title</h4>
<p class="card-text fw-light mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.</p>
<a class="btn btn-primary" href="#">View more...</a></div>
</div>
</div>
<div class="services-col mx-2 my-3">
<div class="card"><a href="#"> <img class="card-img-top" src="https://www.inflearn.com/questions/assets/images/port6.jpg" alt="" /> </a>
<div class="card-body">
<h4 class="card-title">Skide title</h4>
<p class="card-text fw-light mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.</p>
<a class="btn btn-primary" href="#">View more...</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<p>JS파일 const slickSlide=JQuery('#slick-slide') if (slickSlide){ slickSlide.slick({ dots:true, arrows:false, slidesToShow:3, slideToScroll:1, autoplay:true, autoplaySpeed:3000, responsive: [ { breakpoint: 768, settings: { slidesToShow:2 } }, { breakpoint: 576, settings: { slidesToShow:1 } } ] }) } CSS파일 /*Global*/ .section-content{ padding:4rem 0; } /*Top Section*/ #top{ background:url('../images/bg-top.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover; height:80vh; position:relative; } #top .overlay{ position:absolute; height:100%; width:100%; left:0; top:0; background-color:rgb(0,0,0,0.65); } #top .divider{ width: 10%; margin-top: 2rem; margin-bottom: 2rem; border-top: 2px solid #fff; } #top .welcome{ padding-right: 8rem; color:#fff; } @media screen and (max-width:767px) { #top .welcome{ padding-left:1rem; padding-right:1rem; } } #intro .intro-first-card{ background-position: center; background-repeat: no-repeat; background-size: cover; height: 12rem; } #intro .col-6:nth-of-type(1) .intro-first-card{ background-image:url('../images/bg1.jpg'); } #intro .col-6:nth-of-type(2) .intro-first-card{ background-image:url('../images/bg2.jpg'); } #intro .col-6:nth-of-type(3) .intro-first-card{ background-image:url('../images/bg3.jpg'); } #intro .col-6:nth-of-type(4) .intro-first-card{ background-image:url('../images/bg4.jpg'); } #intro .intro-first-card .overlay{ left:0; top:0; background-color:rgba(0, 0, 0, 0.4); } #intro .intro-first-card. .overlay a{ transition: hover 0.4s ease; } #intro .intro-first-card. .overlay a:hover{ color:#fafa6f; } #services{ background-color:rgba(96, 125, 139, 0.1); } #services .divider{ width:10%; margin:2rem auto; border-top:0.5rem solid rgb(255, 112, 3); } #services .services-col .card{ transition:0.4s ease; } #services .services-col .card:hover{ transform: translateY(-0.8rem); box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); } #services .services-col img{ height: 13rem; object-fit:cover; object-position:center; }</p>

tkjy01084778

Posts