HTML
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="team.css">
</head>
<body>
<div id="wrap">
<!-- start header -->
<div class="w100">
<div id="head_header">
<div id="logo">
<a href="http://programmers.co.kr">
<img src="images/header_logo.png">
</a>
</div>
<div id="main_gnb">
<div id="gnb" class="gnb_set">
<ul>
<li><a href="#">탑프로그래머스</a></li>
<li><a href="#">실력체크</a></li>
<li><a href="#">개발자 채용</a></li>
<li><a href="#">테크 피드</a></li>
<li id="divider"></li>
<li><a href="#">코딩 테스트</a></li>
<li><a href="#">프로그래밍 강의</a></li>
</ul>
</div>
<div id="join_gnb" class="gnb_set">
<ul>
<li><a href="#">회원가입</a></li>
<li><a href="#">로그인</a></li>
<li><a href="#">기업 회원</a></li>
</ul>
</div>
</div>
</div>
<div id="head_visual" class="row">
<div id="logobox_1">
<h6 class="logo_text_1">기술 중심 개발자 채용 플랫폼</h6>
<h2 class="logo_text_2">개발자 채용의 끝은,<br>결국 코드니까</h2>
<h4 class="logo_text_3">이력서보다, 당신의 코드가 우선시되는<br>프로그래머스만의 채용 프로그램을 만나보세요.</h4>
<a href="#" id="btn_start" class="btn">시작하기</a>
</div>
<div id="logobox_2">
<img src="./images/header_img.png" alt="앉아서코딩하는사진">
</div>
</div>
</div>
<!-- end header-->
<!-- start position-->
<div id="position" class="row mt30">
<div class="position_header">
<h2>채용 프로그램</h2>
<a href="#">더보기</a>
</div>
<div class="position_content1">
<div class="position_img">
<a href="#">
<img src="./images/position_content1.jpg">
</a>
</div>
<div class="con_position con_position1">
<h2>
<a href="#">2021 Dev-Matching: 웹 백엔드 개발자 (상반기)</a>
</h2>
<ul>
<li>접수: 21년 03월 08일 11:00 - 04월 02일 17:00</li>
<li>테스트: 21년 04월 03일 16:00 - 04월 03일 18:00</li>
</ul>
</div>
</div>
<div class="position_content2">
<div class="position_img">
<a href="#">
<img src="./images/posititon_content2.jpg">
</a>
</div>
<div class="con_position con_position2">
position_content2
</div>
</div>
</div>
<!-- end position-->
<!-- start program-->
<div id="program" class="row mt30">
<div class="program_header">
<div id="small_header">
<h2>채용 중인 포지션</h2>
<a href="#" id="program_btn" class="btn">포지션 더보기</a>
</div>
<div id="header_list">
<ul>
<li><a href="#">JAVA</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">JAVA</a></li>
</ul>
</div>
</div>
<div class="program_content1 con_list">
<ul>
<a href="#">
<li class="item1 item">
<img src="./images/server.jpg">
<div class="item_bigbox">
<div class="item_title">
<span>[회사이름] 어쩌구</span>
<p>회사이름</p>
</div>
<div class="item_list">
<ul>
<li>서버/백엔드</li>
<li>프론트엔드</li>
<li>프론트엔드</li>
</ul>
</div>
</div>
</li>
</a>
<a href="#">
<li class="item1 item">
<img src="#">
<div class="item_bigbox">
<div class="item_title">
<span>[회사이름] 어쩌구</span>
<p>회사이름</p>
</div>
<div class="item_list">
<ul>
<li>서버/백엔드</li>
<li>프론트엔드</li>
<li>프론트엔드</li>
</ul>
</div>
</div>
</li>
</a>
<a href="#">
<li class="item1 item">
<img src="#">
<div class="item_bigbox">
<div class="item_title">
<span>[회사이름] 어쩌구</span>
<p>회사이름</p>
</div>
<div class="item_list">
<ul>
<li>서버/백엔드</li>
<li>프론트엔드</li>
<li>프론트엔드</li>
</ul>
</div>
</div>
</li>
</a>
<a href="#">
<li class="item1 item">
<img src="#">
<div class="item_bigbox">
<div class="item_title">
<span>[회사이름] 어쩌구</span>
<p>회사이름</p>
</div>
<div class="item_list">
<ul>
<li>서버/백엔드</li>
<li>프론트엔드</li>
<li>프론트엔드</li>
</ul>
</div>
</div>
</li>
</a>
</ul>
</div>
<div class="program_content2 con_list">
<ul>
<a href="#">
<li class="item1 item">
<img src="#">
<div class="item_bigbox">
<div class="item_title">
<span>[회사이름] 어쩌구</span>
<p>회사이름</p>
</div>
<div class="item_list">
<ul>
<li>서버/백엔드</li>
<li>프론트엔드</li>
<li>프론트엔드</li>
</ul>
</div>
</div>
</li>
</a>
<a href="#">
<li class="item1 item">
<img src="#">
<div class="item_bigbox">
<div class="item_title">
<span>[회사이름] 어쩌구</span>
<p>회사이름</p>
</div>
<div class="item_list">
<ul>
<li>서버/백엔드</li>
<li>프론트엔드</li>
<li>프론트엔드</li>
</ul>
</div>
</div>
</li>
</a>
<a href="#">
<li class="item1 item">
<img src="#">
<div class="item_bigbox">
<div class="item_title">
<span>[회사이름] 어쩌구</span>
<p>회사이름</p>
</div>
<div class="item_list">
<ul>
<li>서버/백엔드</li>
<li>프론트엔드</li>
<li>프론트엔드</li>
</ul>
</div>
</div>
</li>
</a>
<a href="#">
<li class="item1 item">
<img src="#">
<div class="item_bigbox">
<div class="item_title">
<span>[회사이름] 어쩌구</span>
<p>회사이름</p>
</div>
<div class="item_list">
<ul>
<li>서버/백엔드</li>
<li>프론트엔드</li>
<li>프론트엔드</li>
</ul>
</div>
</div>
</li>
</a>
</ul>
</div>
</div>
<!-- end program-->
<!-- start position_footer-->
<div id="position_footer" class="w100 mt30">
<div class="position_footer_center">
<img src="./images/position_footer_img.png">
<div class="position_footer_text">
<h6>
나에게 꼭 맞는 채용기회
</h6>
<div>
개발자를 위한 다양한 필터 옵션으로 나를 위한 포지션을 찾아보세요.
</div>
</div>
<a href="#" id="position_btn" class="btn">포지션 더보기</a>
</div>
<a href="##"></a>
</div>
<!-- end position_footer-->
<!-- start slider -->
<div id="slider" class="row mt30">
<div id="slider_left">
<h2>채용 중인 기업 & 개발자 매칭 프로젝트</h2>
<h3>
<p>Dev-Matching</p>
<p>백엔드 개발자(상반기)</p>
</h3>
<h4>
<p>접수 마감: 04.02.(금)</p>
<p>코딩 테스트: 04.03.(토)</p>
</h4>
</div>
<div id="slider_right">
<img src="./images/hire.png">
</div>
</div>
<!-- end slider -->
<!-- start code-->
<div id="code" class="row mt30">
<div id="code_text">
<h2>우리의 관심은, 당신의 <span>코드</span></h2>
<h4>프로그래머스는 당신이 더 나은 코드를 쓸 수 있도록, 이렇게 도와드립니다.</h4>
</div>
<div class="code_content con_list">
<div class="code_content_list">
<ul class="code_explain">
<li>
<h2>
1 코드에 집중하는 채용 프로그램
</h2>
<p>
오직 프로그래머스에서만 운영하는 데브매칭, 챌린지를 통해 각종 기업의 채용문을 두드려볼 수 있습니다.
이력서가 부실해도, 코딩테스트에 취약해도, 쌓아온 역량을 마음껏 발휘해
원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.
</p>
</li>
<li>
<h2>
1 코드에 집중하는 채용 프로그램
</h2>
<p>
오직 프로그래머스에서만 운영하는 데브매칭, 챌린지를 통해 각종 기업의 채용문을 두드려볼 수 있습니다.
이력서가 부실해도, 코딩테스트에 취약해도, 쌓아온 역량을 마음껏 발휘해
원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.
</p>
</li>
<li>
<h2>
1 코드에 집중하는 채용 프로그램
</h2>
<p>
오직 프로그래머스에서만 운영하는 데브매칭, 챌린지를 통해 각종 기업의 채용문을 두드려볼 수 있습니다.
이력서가 부실해도, 코딩테스트에 취약해도, 쌓아온 역량을 마음껏 발휘해
원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.
</p>
</li>
</ul>
</div>
<div class="code_visual">
<img src="./images/code_visual.png">
</div>
</div>
</div>
<!-- end code-->
<!-- start enterprise-->
<div id="enterprise" class="row mt30">
<p>
국내 <span>700개</span>이상의 기업이
</p>
<p>
프로그래머스를 통해 당신을 기다립니다.
</p>
<div class="enterprise_img">
<ul>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_kakao.png"></li>
</ul>
</div>
</div>
<!-- end enterprise-->
<!-- start footer -->
<div id="join_footer" class="w100 mt30">
<div id="footer_title" class="row">
<div id="title_wrap">
<h2>
JOIN OUR TEAM
</h2>
<P>
프로그래머스에 합류해 개발자 채용 문화의 혁신을 이끌어나가는 에너지의 주체가 되어보세요!
</P>
</div>
<a href="#" id="footer_btn" class="btn">인재 채용</a>
</div>
</div>
<div id="footer" class="w100">
<div id="footer_container" class="row">
<h2>2021 프로그래머스</h2>
<ul>
<li><a href="#">개발자용 프로그래머스</a></li>
<li><a href="#">기업용 프로그래머스</a></li>
<li><a href="#">프로그래머스 스쿨</a></li>
<li><a href="#">개인정보 처리방침</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">FAQ/문의</a></li>
</ul>
<div id="address">
<p>(주)그렙 / 공동대표 이확영, 임성수 / 서울특별시 강남구 테헤란로 151, 723호(역삼동, 역삼하이츠빌딩) / 사업자등록번호 220-88-75699 / 통신판매업신고 제 2014-서울강남-03241호 / 직업정보제공사업 신고번호 J1200020180027 / 유료직업소개사업 등록번호 (국내)제2019-3220237-14-5-00020호</p>
<p>기업 서비스 : 02-539-1886</p>
<p>교육 내용 관련 문의 : 02-539-1885</p>
<p>☎ 교육 결제, 환불 관련 문의 - 문의하기</p>
<p>제휴 및 서비스 운영, 기타 문의 : 02-539-1882</p>
<p>☎ 코딩 테스트(응시자) 문의 - 문의하기</p>
<p>문의하기 운영시간 : 오전 9시 ~ 오후 6시 (주말 및 공휴일 휴무)</br>점심시간 : 오후 12시 ~ 오후 1시</p>
</div>
</div>
</div>
<!-- end footer-->
</div>
</body>
</html>
CSS
/* CSS Style Sheet */
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
color:#666;
}
ul,li{
list-style:none;
}
.w100{
width:100%;
background:#0c151c;
}
.row{
width:1200px;
margin: 0 auto;
overflow:hidden;
}
.mt30{
margin-top:30px;
}
/*공통 분모 끝*/
/*헤더 부분*/
#head_header{
height:50px;
padding: 6px 16px;
box-sizing: border-box;
background:#0C151C;
}
#logo > a >img{
display: inline-block;
width: 180px;
height: 32px;
float: left;
}
#main_gnb{
float: right;
width: 1600px;
}
.gnb_set > ul > li >a{
font-size: 16px;
color: #b0c0cc;
font-weight: bold;
padding: 0 10px;
}
#gnb{
width: 800px;
height: 40px;
padding: 10px;
box-sizing: border-box;
position: absolute;
transform: translateX(calc(-50% + 40rem));
left: calc(50% - 40rem);
}
#gnb > ul > li{
float: left;
}
#divider{
width: 1px;
height: 12px;
margin: 11px 8px 0 8px;
background-color: #44576C;
}
#join_gnb{
width: 400px;
height: 40px;
padding: 10px;
box-sizing: border-box;
margin: 0 0 0 1300px;
}
#join_gnb > ul >li{
width: 100px;
float:left;
}
#head_visual{
height:450px;
padding: 50px 0;
box-sizing: border-box;
background:#0c151c;
}
#logobox_1{
width: 600px;
padding: 0 16px;
box-sizing: border-box;
float:left;
}
.logo_text_1{
color: #0078ff;
font-size: 14px;
margin: 0 0 16px 0;
}
.logo_text_2{
font-size: 40px;
color: #fff;
margin: 0 0 40px 0;
}
.logo_text_3{
font-size: 20px;
color: #e9ecf3;
margin: 0 0 32px 0;
}
.btn{
margin-top: 30px;
text-align: center;
padding: 7px 13px;
background: #0078ff;
color: #fff;
border: 1px solid #0078ff;
border-radius: 5px;
box-sizing: border-box;
line-height: 28px;
font-weight: bold;
}
#btn_start{
display: inline-block;
width: 210px;
height: 43px;
}
#logobox_2{
width: 600px;
padding: 0 16px;
box-sizing: border-box;
float: left;/*inline-block 이 자동으로 줌*/
}
#logobox_2 > img{
display: inline-block;
width: 500px;
height: 350px;
}
.position_header{
height: 40px;
margin: 0 0 30px 0;
}
.position_header > h2{
font-size: 20px;
color: #263747;
float: left;
}
.position_header > a{
display: inline-block;
padding: 5px 13px;
border: 1px solid #0078ff;
color:#0078ff;
border-radius: 5px;
box-sizing: border-box;
margin: 0 0 0 24px;
font-size: 14px;
}
.position_content1{
width:600px;
height:500px;
padding: 0 15px 0 0;
float:left;
box-sizing: border-box;
border: 1px solid #D7E2EB;
border-radius: 15px;
background:#eee;
}
.position_img{
width: 600px;
height: 300px;
padding: 0 15px 0 0;
box-sizing: border-box;
}
.position_img > a > img{
display: inline-block;
width: 585px;
height: 300px;
}
.position_content2{
width:600px;
height:500px;
box-sizing: border-box;
padding: 0 0 0 15px;
border: 1px solid #D7E2EB;
border-radius: 15px;
float:left;
background:#eee;
}
.con_position{
width: 585px;
height: 200px;
padding: 15px;
box-sizing: border-box;
}
.program_header{
height:100px;
box-sizing: border-box;
}
#small_header{
width: 1200px;
margin-bottom: 16px;
}
#small_header > h2{
font-size: 20px;
color: #263747;
float: left;
}
#program_btn{
margin: 0 0 0 34px;
}
#header_list{
width: 1200px;
}
#header_list > ul > li{
padding: 5px 13px;
background: #eeebff;
float: left;
border: 1px solid #eeebff;
border-radius: 5px;
box-sizing: border-box;
margin: 0 8px 8px 0;
}
#header_list > ul > li >a{
font-size: 14px;
color: #0078ff;
}
.con_list{
width:600px;
height:600px;
box-sizing: border-box;
float:left;
}
.program_content1{
padding: 0 30px 0 0;
}
.program_content2{
padding: 0 0 0 30px;
}
.con_list > ul > a > li{
padding: 16px;
width:100%;
height: 120px;
box-sizing: border-box;
background:#fff;
margin-top:30px;
}
.item > img{
display: inline-block;
width: 80px;
height: 80px;
float:left;
}
.item_bigbox{
width: 430px;
margin:0 0 0 10px;
display: inline-block;
}
.item_title{
margin-bottom: 8px ;
}
.item_title > span{
font-size: 16px;
color: #263747;
font-weight: bold;
}
.item_title > p{
font-size: 14px;
margin-top: 8px;
color:#98a8b9;
}
.item_list > ul > li{
float:left;
font-size:12px;
border: 1px solid #e9ecf3;
border-radius: 5px;
width: 90px;
text-align: center;
line-height: 20px;
background: #e9ecf3;
margin: 5px 8px 0 0;
}
.item{
border: 1px solid #D7E2EB;
border-radius: 3px;
}
#position_footer{
height:130px;
color:#fff;
box-sizing: border-box;
padding:25px 0;
margin-top: 100px;
background: #F4F4F8;
}
.position_footer_center{
width:1200px;
height: 100px;
margin:0 auto;
}
.position_footer_center > img{
display: inline-block;
width: 76px;
height: 76px;
float: left;
}
.position_footer_text{
margin-left: 28px;
display: inline-block;
padding: 10px 0;
}
.position_footer_text > h6{
color: #0078ff;
font-size: 14px;
padding-bottom: 10px;
}
.position_footer_text > div{
font-size: 18px;
color: #263747;
font-weight: bold;
}
#position_btn{
float: right;
margin: 15px 0 0 0;
width: 130px;
}
#slider{
height: 242px;
border-radius: 15px;
padding: 24px 64px;
box-sizing: border-box;
background: #172334;
}
#slider_left{
width: 520px;
color: #fff;
float: left;
}
#slider_left > h2{
font-size: 12px;
margin: 0 0 8px 0;
}
#slider_left > h3{
font-size: 20px;
margin: 0 0 8px 0;
}
#slider_left > h4{
font-size: 15px;
margin: 56px 0 0 0;
}
#slider_right{
width: 520px;
float: right;
text-align: center;
}
#slider_right > img{
display: inline-block;
margin-top: 15px;
width: 330px;
height: 160px;
}
#code{
padding: 40px;
box-sizing: border-box;
}
#code_text{
width:1200px;
margin: 0 auto;
text-align: center;
}
#code_text > h2{
color: #263747;
font-size: 32px;
}
#code_text > h2 > span{
color: #0078ff;
}
#code_text > h4{
color: #4f6b81;
font-size: 20px;
padding: 16px 0 0 0;
box-sizing: border-box;
font-weight: 400;
}
.code_content{
margin-top: 80px;
width: 1200px;
box-sizing: border-box;
}
.code_content_list{
width: 50%;
float: left;
padding: 20px;
box-sizing: border-box;
}
.code_explain > li{
width: 550px;
height: 180px;
padding: 24px;
box-sizing: border-box;
margin: 0 0 16px 0;
}
.code_explain > li > h2{
font-size: 20px;
color:#263747;
}
.code_explain > li > p{
font-size: 16px;
color: #4f6b81;
margin-top: 16px;
}
.code_visual{
display: inline-block;
width: 50%;
}
.code_visual > img{
width: 100%;
height: 621px;
}
#enterprise{
width: 1200px;
height: 600px;
padding: 50px;
box-sizing: border-box;
text-align: center;
}
#enterprise > p{
font-size: 32px;
font-weight: bold;
color: #263747;
}
#enterprise > p > span{
color: #0078ff;
}
.enterprise_img{
width: 968px;
height: 365px;
margin: 30px 100px;
position: relative;
}
.enterprise_img > ul::before{
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 5.5rem;
z-index: 1;
content: "";
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, white 100%);
}
.enterprise_img > ul > li{
width: 193.6px;
height: 73px;
padding: 16px;
border: 1px solid #D7E2EB;
box-sizing: border-box;
float: left;
}
.enterprise_img > ul > li > img{
display: inline-block;
width: 100%;
height: 100%;
}
#join_footer{
height: 120px;
color: white;
background: #0C151C;
box-sizing: border-box;
padding: 32px 0;
box-sizing: border-box;
}
#footer_title{
height: 54px;
}
#title_wrap{
float: left;
}
#title_wrap > h2{
font-size: 16px;
color: #0078ff;
margin: 0 0 4px 0;
}
#footer_btn{
float: right;
margin: 0;
display: inline-block;
}
#footer{
height: 400px;
background: #fff;
color: #263747;
padding: 40px 0;
box-sizing: border-box;
}
#footer_container > h2{
font-size: 14px;
color: #263747;
}
#footer_container > ul{
margin: 10px 0 0 0;
}
#footer_container > ul > li > a{
font-size: 13px;
color: #8ca5af;
}
#address{
margin: 16px 0 0 0;
font-size: 11px;
color: #b2c0cc;
}
#address > p{
margin: 8px 0 0 0;
line-height: 12px;
}'Code' 카테고리의 다른 글
| 3.23 - Delete Btn(Code) (0) | 2021.03.23 |
|---|---|
| 3.22 - To do list(Code) (0) | 2021.03.22 |
| 3.18 - 프로그래머스 (0) | 2021.03.18 |
| 3.17 - Wed / footer (0) | 2021.03.17 |
| 3.16-self (0) | 2021.03.16 |
