<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>법무법인 목현</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Pretendard','Noto Sans KR',Arial,sans-serif;
color:#fff;
overflow-x:hidden;
}
a{
text-decoration:none;
color:#fff;
}
/* 배경 영상 */
.bg-video{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
/* 영상이나 이미지 비율을 부모에 맞춰 늘려줄때 사용, 영상은 올리려면 정확한 사이즈로 제작하기 힘들어서 처리함*/
z-index:-2;
}
/* 어두운 오버레이 */
.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
z-index:-1;
}
.wrap{
width:1200px;
margin:0 auto;
}
/* 헤더 */
.header{
height:80px;
position:relative;
z-index:10;
border-bottom:1px solid rgba(255,255,255,0.2);
background:rgba(0,0,0,0.35);
backdrop-filter:blur(6px);
}
.header .wrap{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo a{
font-size:26px;
font-weight:900;
}
/* 메뉴 */
.menu{
display:flex;
gap:34px;
}
.menu a{
font-size:17px;
font-weight:700;
transition:0.3s;
}
.menu a:hover{
color:#8af7ff;
}
/* 검색창 */
.search-form{
width:170px;
height:36px;
display:flex;
align-items:center;
border:1px solid rgba(255,255,255,0.5);
border-radius:20px;
padding:0 12px;
background:rgba(255,255,255,0.08);
}
.search-form input{
width:100%;
border:none;
outline:none;
background:transparent;
color:#fff;
font-size:14px;
}
/* CSS 돋보기 아이콘 */
.search-form button{
width:18px;
height:18px;
position:relative;
border:none;
background:none;
cursor:pointer;
}
.search-form button::before{
content:"";
position:absolute;
width:12px;
height:12px;
border:2px solid #fff;
border-radius:50%;
top:0;
left:0;
}
.search-form button::after{
content:"";
position:absolute;
width:7px;
height:2px;
background:#fff;
bottom:-2px;
right:-2px;
transform:rotate(45deg);
}
/* 히어로 */
.hero{
height:calc(100vh - 80px);
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
.hero h1{
font-size:52px;
font-weight:900;
margin-bottom:20px;
}
.hero p{
font-size:20px;
opacity:0.9;
}
/* 반응형 */
@media(max-width:1280px){
.wrap{ width:90%; }
}
@media(max-width:900px){
.menu{ display:none; }
}
@media(max-width:480px){
.search-form{ display:none; }
.hero h1{ font-size:30px; }
}
</style>
</head>
<body>
<video class="bg-video" autoplay muted loop playsinline>
<source src="sample2.mp4" type="video/mp4">
</video>
<div class="overlay"></div>
<header class="header">
<div class="wrap">
<div class="logo">
<a href="#">법무법인 목현</a>
</div>
<nav class="menu">
<a href="#">목현소개</a>
<a href="#">구성원 소개</a>
<a href="#">업무분야</a>
<a href="#">업무사례</a>
<a href="#">미디어센터</a>
<a href="#">상담문의</a>
</nav>
<form class="search-form">
<input type="text" placeholder="검색어 입력">
<button type="submit"></button>
</form>
</div>
</header>
<section class="hero">
<div>
<h1>신뢰를 기반으로 한 법률 서비스</h1>
<p>법무법인 목현이 함께합니다</p>
</div>
</section>
<script>
document.querySelector('.search-form').addEventListener('submit', function(e){
e.preventDefault();
});
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>법무법인 목현</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Pretendard','Noto Sans KR',Arial,sans-serif;
color:#fff;
overflow-x:hidden;
}
a{
text-decoration:none;
color:#fff;
}
/* 배경 영상 */
.bg-video{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
/* 영상이나 이미지 비율을 부모에 맞춰 늘려줄때 사용, 영상은 올리려면 정확한 사이즈로 제작하기 힘들어서 처리함*/
z-index:-2;
}
/* 어두운 오버레이 */
.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
z-index:-1;
}
.wrap{
width:1200px;
margin:0 auto;
}
/* 헤더 */
.header{
height:80px;
position:relative;
z-index:10;
border-bottom:1px solid rgba(255,255,255,0.2);
background:rgba(0,0,0,0.35);
backdrop-filter:blur(6px);
}
.header .wrap{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo a{
font-size:26px;
font-weight:900;
}
/* 메뉴 */
.menu{
display:flex;
gap:34px;
}
.menu a{
font-size:17px;
font-weight:700;
transition:0.3s;
}
.menu a:hover{
color:#8af7ff;
}
/* 검색창 */
.search-form{
width:170px;
height:36px;
display:flex;
align-items:center;
border:1px solid rgba(255,255,255,0.5);
border-radius:20px;
padding:0 12px;
background:rgba(255,255,255,0.08);
}
.search-form input{
width:100%;
border:none;
outline:none;
background:transparent;
color:#fff;
font-size:14px;
}
/* CSS 돋보기 아이콘 */
.search-form button{
width:18px;
height:18px;
position:relative;
border:none;
background:none;
cursor:pointer;
}
.search-form button::before{
content:"";
position:absolute;
width:12px;
height:12px;
border:2px solid #fff;
border-radius:50%;
top:0;
left:0;
}
.search-form button::after{
content:"";
position:absolute;
width:7px;
height:2px;
background:#fff;
bottom:-2px;
right:-2px;
transform:rotate(45deg);
}
/* 히어로 */
.hero{
height:calc(100vh - 80px);
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
.hero h1{
font-size:52px;
font-weight:900;
margin-bottom:20px;
}
.hero p{
font-size:20px;
opacity:0.9;
}
/* 반응형 */
@media(max-width:1280px){
.wrap{ width:90%; }
}
@media(max-width:900px){
.menu{ display:none; }
}
@media(max-width:480px){
.search-form{ display:none; }
.hero h1{ font-size:30px; }
}
</style>
</head>
<body>
<video class="bg-video" autoplay muted loop playsinline>
<source src="sample2.mp4" type="video/mp4">
</video>
<div class="overlay"></div>
<header class="header">
<div class="wrap">
<div class="logo">
<a href="#">법무법인 목현</a>
</div>
<nav class="menu">
<a href="#">목현소개</a>
<a href="#">구성원 소개</a>
<a href="#">업무분야</a>
<a href="#">업무사례</a>
<a href="#">미디어센터</a>
<a href="#">상담문의</a>
</nav>
<form class="search-form">
<input type="text" placeholder="검색어 입력">
<button type="submit"></button>
</form>
</div>
</header>
<section class="hero">
<div>
<h1>신뢰를 기반으로 한 법률 서비스</h1>
<p>법무법인 목현이 함께합니다</p>
</div>
</section>
<script>
document.querySelector('.search-form').addEventListener('submit', function(e){
e.preventDefault();
});
</script>
</body>
</html>
#스타일시트 비디오 및 검색