디지털노마드 : 반응 형 메인 이미지 효과
이미지 경로는 img\main1600x900.jpg
[main.html]
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>반응형 메인 페이지</title>
</head>
<body>
<div class="hero-image">
<div class="container">
<h1><span>홈트공구</span></h1>
<span class="des">Web Developer // Web Designer</span>
<a class="btn" href="#">Hire me, please!</a>
</div>
</body>
</html>
[style.css]
body, html {
height:100%;
margin: 0;
padding: 0;
background: #f1f1f1;
font-family: sans-serif;
}
.hero-image {
position: relative;
height: 500px;
overflow: hidden;
background: url(img/main1600x900.jpg) no-repeat center;
background-size: cover;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* overflow:hidden; */
text-align: center;
color: white;
font-weight: 700%;
text-transform: uppercase;
}
.container h1 {
font-size: 72px;
letter-spacing: 0.2em;
margin: 0;
}
.container h1 span {
border: 10px solid white;
padding: 6px 14px;
display: inline-block;
}
.des {
margin: 20px;
display: block;
font-size:26px;
text-shadow: 0 0 10px black;
}
.btn {
color: 313131;
padding: 10px 24px;
font-size: 20px;
text-decoration: none;
background: #f1f1f1;
border-radius: 8px;
transtion: 0.3s all;
}
.btn:hover {
opacity: 0.8;
}
[결과 화면]
'HTML, CSS' 카테고리의 다른 글
| CSS, JS, 파비콘 파일 수정이 웹에 반영 안될 때 (0) | 2021.10.18 |
|---|---|
| CSS 모작, BNX 반응형 상품 리스트 구현하기 (0) | 2021.10.17 |
| 스르륵 좌우로 나타나는 사이드메뉴 input:checked(checkbox) (0) | 2021.10.10 |
| HTML CSS 로그인 화면 예제 (0) | 2021.10.09 |
| 반응형 웹 HTML , CSS, 미디어쿼리 @media 예제 (0) | 2021.10.08 |