https://cdpn.io/pen/debug/ogzQWyb?authentication_hash=yoMZEKKwPdak
Active and fixed 콘텐츠 리뉴얼
Venue & Lookbook ― 공간에 감성을 담다 단순히 화려한 장소를 찾는 것을 넘어, 두 사람의 취향과 분위기가 온전히 스며들 수 있는 특별한 공간을 큐레이팅합니다. 햇살의 각도, 꽃의 향기, 그날의
cdpn.io
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0" />
<title>haeseung</title>
<link rel="stylesheet" href="style.css" />
<style type="text/css"></style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"></script>
</head>
<bady>
<main>
<header>
<div>L'Eclaire Wedding</div>
<nav>
<div>BRAND</div>
<div>SERVICES</div>
<div>GALLERY</div>
<div>REVIEWS</div>
<div>CONTACT</div>
</nav>
</header>
<div>
<h4>Your Light, Your Moment</h4>
<h1>당신의 가장 빛나는 순간, 그 찰나의 기록</h1>
<button>DISCOVER MORE</button>
</div>
</main>
<article class="Us">
<div>
<h2>About Us</h2>
<span class="solid">―</span>
<h4>
L'Eclaire : 시간을 넘어선 아름다움
</h4>
우리는 정형화된 예식에서 벗어나, 두 사람만의 고유한 이야기를 디자인합니다.
단순한 준비를 넘어, 생애 가장 찬란한 하루가 평생의 기억으로 남을 수 있도록 진심을 다해 큐레이팅합니다.<br /> <br />
<button>OUR STORY</button>
</div>
<div>
<video width="480" controls>
<source src="https://assets.mixkit.co/videos/51220/51220-720.mp4" type="video/mp4" />
</video>
</div>
</article>
<article class="Services">
<div>
<div>
<h2>Our Services</h2>
<span class="solid">―</span>
</div>
<div>
<h4>프리미엄 웨딩을 위한 맞춤형 솔루션을 제안합니다.</h4>
</div>
</div>
<div>
<section>
<div>Studio</div>
<img
src="https://images.unsplash.com/photo-1513278974582-3e1b4a4fa21e?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<h5>공간의 미학</h5>
<p>채광과 오브제의 조화로 탄생하는 감각적인 웨딩 스냅 촬영</p>
</section>
<section>
<div>Dress</div>
<img
src="https://plus.unsplash.com/premium_photo-1661308232217-8b2a2a1e90ae?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<h5>순백의 예술</h5>
<p>가장 나다운 아름다움을 완성하는 하이엔드 드레스 큐레이션</p>
</section>
<section>
<div>Make Up</div>
<img
src="https://images.unsplash.com/photo-1578263221889-c6e75744411c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<h5>빛나는 연출</h5>
<p>본연의 아름다움을 극대화하는 섬세하고 투명한 퍼스널 메이크업</p>
</section>
<section>
<div>Directing</div>
<img
src="https://images.unsplash.com/photo-1666305132656-097bd699e023?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<h5>완벽한 조율</h5>
<p>첫 만남부터 예식 당일까지, 모든 과정을 함께하는 전담 디렉팅</p>
</section>
</div>
</article>
<article class="look">
<div>
<img
src="https://images.unsplash.com/photo-1523438885200-e635ba2c371e?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<img
src="https://images.unsplash.com/photo-1692167900605-e02666cadb6d?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div>
<h2>Venue & Lookbook</h2>
<span class="solid">―</span>
<h4>공간에 감성을 담다</h4>
단순히 화려한 장소를 찾는 것을 넘어, 두 사람의 취향과 분위기가 온전히 스며들 수 있는 특별한 공간을 큐레이팅합니다.
햇살의 각도, 꽃의 향기, 그날의 공기까지 고려한 레클레어만의 감각으로 잊지 못할 무대를 완성해 드립니다.<br /> <br />
<button>VIEW PORTFOLIO</button>
</div>
<img
src="https://images.unsplash.com/photo-1587603323459-ba478f963aa3?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
</article>
<article class="OFFICIAL">
<div>
<div>
<h2>OFFICIAL PARTNERS</h2>
<span class="solid">―</span>
</div>
</div>
<div>
<a href="#"><img
src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcbC5L2%2FdJMcabcHTFJ%2FAAAAAAAAAAAAAAAAAAAAAG6_Yn3WXhFnTDGiLGkYOBjWeXBMLPpsIkUVha3tH46v%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DOrtXGFk2QsPZm1Wv%252BRfilataORU%253D" /></a>
<a href="#"><img
src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbdDiJA%2FdJMcabKBJUQ%2FAAAAAAAAAAAAAAAAAAAAAK_2rkqZ4jau0ECVIQ57PCqGT4_2PcmD0eGUAtTFlUJ0%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3Dmi4Mq3aH%252B%252BiCXfipVC80nAQKBwg%253D" /></a>
<a href="#"><img
src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbdtz5W%2FdJMcabKBJUT%2FAAAAAAAAAAAAAAAAAAAAAJ4g3dO0L5wH1241t-LpwzcdqTPnHd7RSOHeCtpDAyZq%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DnMH8WlacDAcicI1LJaB%252B0SSfJ3A%253D" /></a>
<a href="#"><img
src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FIlP4h%2FdJMcabKBJUR%2FAAAAAAAAAAAAAAAAAAAAALBjh4f5puWytHwcMgBXOx4v9m2sVEJzDoNiIPlL5qlH%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3Dfft1xFOZvVAfoAHt5dl1aCTnS%252FM%253D" /></a>
<a href="#"><img
src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FblWgLq%2FdJMcabKBJUS%2FAAAAAAAAAAAAAAAAAAAAACnl2vNUxn6YEYSEhWE7pthdhLav4Sl42vhdfsbNiQ2U%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DcRYuXLlv4HEDoHoNuPqxPnKOkvg%253D" /></a>
</div>
</article>
<article class="Reviews">
<div>
<div>
<h2>Client Reviews</h2>
<span class="solid">―</span>
</div>
<div>
<h4>REAL MOMENTS</h4>
</div>
</div>
<div>
<section>
<div onclick="window.location.href='#'"></div>
<img
src="https://images.unsplash.com/photo-1672288336066-8cd91b57b510?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<h3>김** 님 & 이** 님</h3>
<h5>2025.05.17</h5>
<p>
"까다로운 취향이라 걱정 많았는데, 저희가 원하던 무드를 정확히 읽어주셨어요. 덕분에 꿈꾸던 스몰 웨딩을 완벽하게 올렸습니다."
</p>
</section>
<section>
<div onclick="window.location.href='#'"></div>
<img
src="https://images.unsplash.com/photo-1749501309421-0633666b11ba?q=80&w=2129&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<h3>J**** 님 & A*** 님</h3>
<h5>2025.06.14</h5>
<p>
"Professional and artistic! Every detail was handled with care. It was truly a masterpiece of a wedding."
</p>
</section>
<section>
<div onclick="window.location.href='#'"></div>
<img
src="https://images.unsplash.com/photo-1719138249051-fd238735124c?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<h3>최** 님</h3>
<h5>2025.04.26</h5>
<p>
"드레스부터 메이크업까지 전체적인 밸런스가 너무 좋았어요. 친구들이 어디서 했냐고 계속 물어봐서 뿌듯했네요!"
</p>
</section>
</div>
</article>
<footer>
<div>
<section>
<h3>NIRO</h3>
<p>L'Eclaire Wedding은 두 사람의 가치와 취향을 존중하는 커스텀 웨딩 브랜드입니다. 소중한 약속의 시작을 저희와 함께하세요.</p>
</section>
<section>
<h3>CONTACT</h3>
<p> T. 02-1234-5678<br>
E. hello@leclaire.com<br>
Kakao. 레클레어웨딩</p>
</section>
</div>
</footer>
<address>
서울특별시 강남구 도산대로 123, 레클레어 빌딩 3F
(3F, L'Eclaire Bldg, 123, Dosan-daero, Gangnam-gu, Seoul, Korea)
</address>
</bady>
</html>@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
word-break: keep-all;
outline: 0px solid silver;
}
img {
width: 100px;
}
body {
font-family: "Montserrat", "pretendard", sans-serif;
font-size: 0.9rem;
line-height: 1rem;
color: #4d4d4d;
letter-spacing: 0.1px;
}
h1,
h2,
h3 {
font-family: "Montserrat", "pretendard", sans-serif;
}
h1 {
font-size: 4rem;
line-height: 4rem;
text-transform: uppercase;
}
h2 {
font-size: 2.4rem;
line-height: 2.4rem;
text-transform: uppercase;
}
h3 {
font-size: 1.4rem;
line-height: 1.4rem;
margin-bottom: 1.6rem;
}
h4,
h5 {
font-family: "Montserrat", "pretendard", serif;
}
h4 {
font-size: 1.1rem;
line-height: 1.1rem;
margin-bottom: 1.6rem;
}
h5 {
font-size: 1rem;
line-height: 1rem;
margin-bottom: 1.6rem;
}
a:link {
color: #666;
text-decoration: none;
}
a:visited {
color: #666;
}
a:hover {
color: red;
}
a:active {
color: red;
}
button {
font-size: 0.7rem;
text-transform: uppercase;
padding: 10px 30px;
background: white;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: pink;
color: black;
}
.solid {
font-size: 4rem;
line-height: 2rem;
color: #4d4d4d;
}
main {
position: relative;
background: url("https://cdn.pixabay.com/photo/2019/09/01/11/34/bouquet-4445012_1280.jpg") no-repeat;
filter: brightness(1.2);
filter: contrast(1.3);
backdrop-filter: blur(2px);
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 800px;
margin: 0 0 70px;
color: white;
}
main::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(2px);
z-index: 0;
}
main header {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
text-transform: uppercase;
padding: 16px 0;
font-size: 1rem;
line-height: 2.5rem;
}
main>header>div,
main header nav {
z-index: 1;
}
main>header>div {
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: 0.8s;
}
main>header>div:hover {
color: pink;
}
main header nav {
display: flex;
}
main header nav div {
padding: 0 20px;
border-bottom: 0px solid white;
cursor: pointer;
}
main header nav div:hover {
border-bottom: 3px solid white;
}
main>div {
position: absolute;
text-align: center;
width: 800px;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 6rem;
}
.Us {
width: 1000px;
margin: 0 auto 70px;
display: flex;
justify-content: space-between;
}
.Us> :first-child,
.Us> :last-child {
width: 480px;
}
.Services {
background: rgb(255, 224, 230);
margin: 0 0 70px;
padding: 70px 0;
}
.Services> :first-child,
.Services> :last-child {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.Services> :last-child {
margin: 50px auto 0;
text-align: center;
}
.Services> :last-child section {
position: relative;
width: 220px;
}
.Services> :last-child section div {
position: absolute;
background: white;
width: 80px;
height: 40px;
border-radius: 10px;
color: black;
text-transform: uppercase;
line-height: 2.5rem;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
transition: 0.8s;
}
.Services> :last-child section div:hover {
background: rgba(255, 255, 255, 0.6);
}
.Services> :last-child section img {
width: 220px;
height: 300px;
margin: 0 0 30px;
cursor: pointer;
transition: 0.8s;
border: 0px solid white;
}
.Services> :last-child section img:hover {
border: 8px solid white;
border-radius: 20px;
}
.look {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.look :first-child {
width: 480px;
}
.look :first-child img,
.look :last-child div,
.look :last-child img,
.look> :last-child {
width: 480px;
margin-bottom: 40px;
}
.look> :last-child div {
background: rgb(255, 224, 230);
padding: 100px 20px;
}
.OFFICIAL {
background: rgb(255, 224, 230);
padding: 70px 0;
margin: 0 0 70px;
}
.OFFICIAL> :first-child,
.OFFICIAL> :last-child {
width: 1000px;
margin: 0 auto;
}
.OFFICIAL> :last-child {
display: flex;
justify-content: space-around;
}
.OFFICIAL :last-child img {
width: 80px;
margin-top: 10px;
opacity: 0.3;
transition: 0.8s;
}
.OFFICIAL :last-child img:hover {
opacity: 1;
}
.Reviews {
width: 1000px;
height: auto;
margin: 0 auto 80px;
}
.Reviews> :first-child,
.Reviews> :last-child {
display: flex;
justify-content: space-between;
}
.Reviews :last-child section {
position: relative;
width: 300px;
padding: 30px 20px;
text-align: center;
}
.Reviews :last-child section div {
position: absolute;
background: rgba(0, 0, 0, 0);
border: 0px solid rgb(255, 224, 230);
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
transition: 0.8s
}
.Reviews :last-child section div:hover {
background: rgba(0, 0, 0, 0.1);
border: 5px solid rgb(255, 224, 230);
border-radius: 20px;
}
.Reviews :last-child section img {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 0 30px 0;
}
footer {
background: rgb(255, 224, 230);
padding: 70px 0;
}
footer div {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-around;
}
footer div section {
width: 500px;
padding: 0 20px 0 0;
text-align: center;
}
address {
background: rgb(255, 245, 247);
padding: 70px 0;
text-align: center;
}'코딩 > 실습' 카테고리의 다른 글
| RWD 콘텐츠 리뉴얼 (0) | 2026.04.16 |
|---|---|
| Active and fixed 디자인 리뉴얼 (1) | 2026.04.16 |
| FHD 디자인 리뉴얼 (1) | 2026.04.10 |
| FHD 콘텐츠 리뉴얼 (0) | 2026.04.08 |
| 브라우저 넓이에 반응하는 웹사이트 실무 코딩 예제 - Flexible and fixed (0) | 2026.04.08 |