<div class="content">
<div class="head head-type-1">
<div class="title ">농촌봉사활동 참여</div>
</div>
<div class="body body-type-2">
<div class="img-box pt-img"
style="background-image:url(https://junekorea.github.io/img1/ph/nonghyup/volunteer.jpg)">
<div class="pt-box flex">
<div flex-1-0-0><a href="#" class="block">개인참여</a></div>
<div flex-1-0-0><a href="#" class="block">기업.단체참여</a></div>
</div>
</div>
/* 폰트적용 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html {
font-family: "Noto Sans KR", sans-serif;
}
html {
font-family: "Roboto", "Noto Sans KR", sans-serif;
}
/* 노말라이즈 */
body, ul, li, h1 {
margin:0;
padding:0;
list-style:none;
}
a {
color:inherit;
text-decoration:none;
}
label[for] {
cursor:pointer;
user-select:none;
}
/* 라이브러리 */
.block {
display:block;
}
.inline-block {
display:inline-block;
}
.absolute-left {
position:absolute;
left:0;
}
.absolute-right {
position:absolute;
right:0;
}
.absolute-bottom {
position:absolute;
bottom:0;
}
.absolute-top {
position:absolute;
top:0;
}
.absolute-center {
position:absolute;
left:50%;
transform:translateX(-50%);
}
.absolute-middle {
position:absolute;
top:50%;
transform:translateY(-50%);
}
.absolute-middle.absolute-center {
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}
.relative {
position:relative;
}
.cell {
float:left;
box-sizing:border-box;
}
.cell-right {
float:right;
box-sizing:border-box;
}
.row::after {
content:"";
display:block;
clear:both;
}
.clear-both {
clear:both;
}
.img-box > img {
width:100%;
display:block;
}
.con {
margin-left:auto;
margin-right:auto;
}
.margin-0-auto {
margin-left:auto;
margin-right:auto;
}
.text-align-center {
text-align:center;
}
.text-align-right {
text-align:right;
}
.line-height-0 {
line-height:0;
}
.line-height-0 > * {
line-height:normal;
}
.width-30px {
width:30px;
}
.width-35px {
width:35px;
}
.width-40px {
width:35px;
}
.width-45px {
width:35px;
}
.width-50px {
width:50px;
}
.width-80px {
width:80px;
}
.width-100px {
width:100px;
}
.width-100p {
width:100%;
}
.width-60p {
width:60%;
}
.width-55p {
width:55%;
}
.width-50p {
width:50%;
}
.width-45p {
width:45%;
}
.width-40p {
width:40%;
}
.width-30p {
width:30%;
}
.width-35p {
width:35%;
}
.width-100p-except-30px {
width:calc(100% - 30px);
}
.width-100p-except-35px {
width:calc(100% - 35px);
}
.width-100p-except-40px {
width:calc(100% - 40px);
}
.width-100p-except-50px {
width:calc(100% - 50px);
}
.width-100p-except-80px {
width:calc(100% - 80px);
}
.width-100p-except-100px {
width:calc(100% - 100px);
}
.height-100p {
height:100%;
}
.height-50p {
height:50%;
}
.border-box {
box-sizing:border-box;
}
.font-size-dot-8rem {
font-size:.8rem;
}
.table-row {
display:table;
}
.table-row.row::after {
display:inline;
clear:non;
}
.table-row > .cell {
float:none;
display:table-cell;
}
.border-red {
border:10px solid red;
}
.border-green {
border:10px solid green;
}
.border-blue {
border:10px solid blue;
}
.border-gold {
border:10px solid gold;
}
.border-pink {
border:10px solid pink;
}
/* 라이브러리 - flex */
* > .flex {
display:flex;
}
* > .flex-grow-1 {
flex-grow:1;
}
* > .flex-jc-c {
justify-content:center;
}
* > .flex-jc-s {
justify-content:flex-start;
}
* > .flex-jc-e {
justify-content:flex-end;
}
* > .flex-jc-sb {
justify-content:space-between;
}
* > .flex-ai-c {
align-items:center;
}
* > .flex-ai-s {
align-items:flex-start;
}
* > .flex-ai-e {
align-items:flex-end;
}
* > .flex-as-s {
align-self:stretch;
}
* > .flex-as-c {
align-self:center;
}
* > .flex-as-s {
align-self:flex-start;
}
* > .flex-as-e {
align-self:flex-end;
}
* > .flex-column-nowrap {
flex-flow:column nowrap;
}
* > .flex-column-wrap {
flex-flow:column wrap;
}
.flex-ch-basis-0 > * {
flex-basis:0;
}
* > .flex-1-0-0 {
flex:1 0 0;
}
/* 시작 */
.content > .head > .title {
font-size: 22px;
font-weight:bold;
}
.content > .body > .img-box{
border: 1px solid #242424;
height:150px;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
margin-top:10px;
position:relative;
}
.content > .body > .img-box > .pt-box {
position:absolute;
bottom:0;
left:0;
width: 100%;
}
.content > .body > .img-box > .pt-box > div {
border-left: 1px solid white;
width:50%;
background-color:orange;
}
.content > .body > .img-box > .pt-box > div > a {
padding: 5px 10px;
text-align:center;
font-weight:bold;
font-size:16px;
color:white;
letter-spacing:1.5px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.