디자인
소개
- webstandard
- imageType
- image01_01.html
- image01_02.html
- image01_03.html
- image01_04.html
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 유형01</title>
<style>
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
text-align: center;
}
.section > h2 {
font-size: 50px;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 300;
margin-bottom: 70px;
}
/* imageType */
#imageType {
background: #ccc;
height: 500px;
}
.image__wrap {}
.image__inner {}
</style>
</head>
<body>
<section id="imageType" class="image__wrap nexon section">
<h2>포트폴리오가 실력이다.</h2>
<p>이미지 유형입니다. 마우스 오버시 자세한 정보가 나와는 구조입니다.</p>
<div class="image__inner container">
<div class="image">image1</div>
<div class="image">image2</div>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 유형01</title>
<style>
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
text-align: center;
}
.section > h2 {
font-size: 50px;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 300;
margin-bottom: 70px;
}
/* imageType */
#imageType {
background: #ccc;
height: 500px;
}
.image__wrap {}
.image__inner {}
.image {}
.image__title {}
.image__desc {}
.image__btn a {}
</style>
</head>
<body>
<section id="imageType" class="image__wrap nexon section">
<h2>포트폴리오가 실력이다.</h2>
<p>이미지 유형입니다. 마우스 오버시 자세한 정보가 나와는 구조입니다.</p>
<div class="image__inner container">
<article class="image">
<h3 class="image__title">강아지계의 연예인</h3>
<p class="image__desc">최근 연예인들 사이에서 키우는 강아지로 유명해진 비숑프리제는 생김새가 아주 작은 바빗과 매우 흡사하여 바비숑이라는</p>
<a class="image__btn" href="/">자세히 보기</a>
</article>
<article class="image">
<h3 class="image__title">강아지계의 마스코트</h3>
<p class="image__desc">최근 연예인들 사이에서 키우는 강아지로 유명해진 비숑프리제는 생김새가 아주 작은 바빗과 매우 흡사하여 바비숑이라는</p>
<a class="image__btn" href="/">자세히 보기</a>
</article>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 유형01</title>
<style>
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
}
.section > h2 {
font-size: 50px;
margin-bottom: 20px;
text-align: center;
}
.section > p {
font-size: 22px;
font-weight: 300;
margin-bottom: 70px;
text-align: center;
}
/* imageType */
#imageType {
}
.image__wrap {}
.image__inner {
display: flex;
justify-content: space-between;
}
.image {
width: 49%;
height: 370px;
}
.image.img1 {
background: url(img/image_bg01.jpg) no-repeat center / cover;
}
.image.img2 {
background: url(img/image_bg02.jpg) no-repeat center / cover;
}
.image__title {}
.image__desc {}
.image__btn {}
</style>
</head>
<body>
<section id="imageType" class="image__wrap nexon section">
<h2>포트폴리오가 실력이다.</h2>
<p>이미지 유형입니다. 마우스 오버시 자세한 정보가 나와는 구조입니다.</p>
<div class="image__inner container">
<article class="image img1">
<h3 class="image__title">강아지계의 연예인</h3>
<p class="image__desc">최근 연예인들 사이에서 키우는 강아지로 유명해진 비숑프리제는 생김새가 아주 작은 바빗과 매우 흡사하여 바비숑이라는</p>
<a class="image__btn" href="/">자세히 보기</a>
</article>
<article class="image img2">
<h3 class="image__title">강아지계의 마스코트</h3>
<p class="image__desc">최근 연예인들 사이에서 키우는 강아지로 유명해진 비숑프리제는 생김새가 아주 작은 바빗과 매우 흡사하여 바비숑이라는</p>
<a class="image__btn" href="/">자세히 보기</a>
</article>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 유형01</title>
<style>
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
}
.section > h2 {
font-size: 50px;
margin-bottom: 20px;
text-align: center;
}
.section > p {
font-size: 22px;
font-weight: 300;
margin-bottom: 70px;
text-align: center;
color: #777;
}
/* imageType */
#imageType {
}
.image__wrap {}
.image__inner {
display: flex;
justify-content: space-between;
}
.image {
width: 49%;
height: 370px;
padding: 200px 30px 30px 30px;
box-sizing: border-box;
color: #fff;
}
.image.img1 {
background: url(img/image_bg01.jpg) no-repeat center / cover;
}
.image.img2 {
background: url(img/image_bg02.jpg) no-repeat center / cover;
}
.image__title {
font-size: 32px;
margin-bottom: 10px;
}
.image__desc {
font-size: 16px;
margin-bottom: 10px;
line-height: 1.4;
font-weight: 300;
padding-right: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 10px;
}
.image__btn {
font-size: 16px;
font-weight: 300;
color: #fff;
background-color: #B45A30;
padding: 10px 20px;
display: inline-block;
}
.image__btn.yellow {
background-color: #B59140;
}
</style>
</head>
<body>
<section id="imageType" class="image__wrap nexon section">
<h2>포트폴리오가 실력이다.</h2>
<p>이미지 유형입니다. 마우스 오버시 자세한 정보가 나와는 구조입니다.</p>
<div class="image__inner container">
<article class="image img1">
<h3 class="image__title">강아지계의 연예인</h3>
<p class="image__desc">최근 연예인들 사이에서 키우는 강아지로 유명해진 비숑프리제는 생김새가 아주 작은 바빗과 매우 흡사하여 바비숑이라는</p>
<a class="image__btn" href="/">자세히 보기</a>
</article>
<article class="image img2">
<h3 class="image__title">강아지계의 마스코트</h3>
<p class="image__desc">최근 연예인들 사이에서 키우는 강아지로 유명해진 비숑프리제는 생김새가 아주 작은 바빗과 매우 흡사하여 바비숑이라는</p>
<a class="image__btn yellow" href="/">자세히 보기</a>
</article>
</div>
</section>
</body>
</html>
728x90
