<!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="./pt.css">
</head>
<body>
<div id="wrap">
<!--header-->
<div id="header">
<div id="gnb">
<h1 id="logo">
<img src="./images/header_logo.png">
</h1>
<div id="main_gnb">
<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="#">프로그래밍 강의</a></li>
</ul>
</div>
<div id="join_gnb">
</div>
</div>
<div id = "main_header">
<div id="header_text">
<h2>
<span>기술 중심 개발자 채용 플랫폼</span>
</h2>
<div id="header_title">
<p>개발자 채용의 끝은,</p>
<p>결국 코드니까</p>
</div>
<div id="header_subtitle">
<p>이력서보다, 당신의 코드가 우선시되는</p>
<p>프로그래머스만의 채용 프로그램을 만나보세요<div class=""></div></p>
</div>
<div class="btn a_btn">
<a href="#">시작하기</a>
</div>
</div>
<div id="header_img">
<img src="./images/header_img.png">
</div>
</div>
</div>
<!--end of header-->
<div id="container">
<!--contents1-->
<div id="contents">
<!--program-->
<div id="program">
<div id="program_header">
<h2>채용 프로그램</h2>
<a href="#" class="more_btn program_btn">더보기</a>
</div>
<ul class="program_boxes">
<li class="program_left">program_left</li>
<li class="program_right">program_right</li>
</ul>
</div>
<!--end of program-->
<!--position-->
<div id="position">
<div id="program_header">
<h2>채용중인 포지션</h2>
<a href="#" class="more_btn position_btn">포지션 더 보기</a>
</div>
<ul id="position_list">
<li><a href="#">Java</a></li>
<li><a href="#">Spring</a></li>
<li><a href="#">Node.js</a></li>
<li><a href="#">Django</a></li>
<li><a href="#">Vue.js</a></li>
</ul>
<div id="position_box">
<div id="item1">
<div class="position_item server ">
<div class="position_contents">
<div class="position_img">
<a href="#"><img src="./images/server.jpg"></a>
</div>
<div class="position_text">
<h2>
물류스타트업 서버/ 백엔드 개발자
</h2>
<h3>
하우저
</h3>
<ul class="position_stack">
<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>
</ul>
</div>
</div>
</div>
<div class="position_item software">
<div class="position_contents">
<div class="position_img">
<a href="#"><img src="./images/software.png"></a>
</div>
<div class="position_text">
<h2>
소프트웨어 개발자
</h2>
<h3>
유엑스팩토리
</h3>
<ul class="position_stack">
<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>
</ul>
</div>
</div>
</div>
<div class="position_item java">
<div class="position_contents">
<div class="position_img">
<a href="#"><img src="./images/java.jpeg"></a>
</div>
<div class="position_text">
<h2>
JAVA 웹 개발자(병역특례가능)
</h2>
<h3>
캐럿글로벌
</h3>
<ul class="position_stack">
<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>
</ul>
</div>
</div>
</div>
<div class="position_item android">
<div class="position_contents">
<div class="position_img">
<a href="#"><img src="./images/android.png"></a>
</div>
<div class="position_text">
<h2>
안드로이드 앱 개발
</h2>
<h3>
푸시뉴스
</h3>
<ul class="position_stack">
<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>
</ul>
</div>
</div>
</div>
</div>
<div id="item2">
<div class="position_item android">
<div class="position_contents">
<div class="position_img">
<a href="#"><img src="./images/android.png"></a>
</div>
<div class="position_text">
<h2>
안드로이드 앱 개발
</h2>
<h3>
푸시뉴스
</h3>
<ul class="position_stack">
<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>
</ul>
</div>
</div>
</div>
<div class="position_item android">
<div class="position_contents">
<div class="position_img">
<a href="#"><img src="./images/android.png"></a>
</div>
<div class="position_text">
<h2>
안드로이드 앱 개발
</h2>
<h3>
푸시뉴스
</h3>
<ul class="position_stack">
<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>
</ul>
</div>
</div>
</div>
<div class="position_item android">
<div class="position_contents">
<div class="position_img">
<a href="#"><img src="./images/android.png"></a>
</div>
<div class="position_text">
<h2>
안드로이드 앱 개발
</h2>
<h3>
푸시뉴스
</h3>
<ul class="position_stack">
<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>
</ul>
</div>
</div>
</div>
<div class="position_item android">
<div class="position_contents">
<div class="position_img">
<a href="#"><img src="./images/android.png"></a>
</div>
<div class="position_text">
<h2>
안드로이드 앱 개발
</h2>
<h3>
푸시뉴스
</h3>
<ul class="position_stack">
<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>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end of position-->
</div>
<!--end of contents1-->
<!--position footer-->
<div id="position_footer"><!--회색 전체 100%-->
<div id="con_posfooter"> <!--1200px-->
<div id="posfooter_wrap">
<h2 id="posfooter_logo">
<img src="./images/posfooter_logo.png">
</h2>
<h3>
<span>span</span>
h3
</h3>
</div>
<div class="btn posfooter_btn">
<a href="#">
포지션 더보기
</a>
</div>
</div>
</div>
<!--end of position footer-->
<!--contents2-->
<div id="contents">
<!--hire-->
<div id="hire">
<div id="hire_text">
<h2>
프로그래머스 설문 ~
</h2>
</div>
<div id="hire_img">
<img src="./images/hire.png">
</div>
</div>
<!--end of hire-->
<!--header2-->
<div class="header2">
<div class="rainbow">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
<span class="code4"></span>
<span class="code5"></span>
<span class="code6"></span>
</div>
<div class="header2_text">
<h2>우리의 관심은, 당신의 코드</h2>
<h4>프로그래머스는 당신이 더 나은 코드를 쓸 수 있도록, 이렇게 도와드립니다.</h4>
</div>
</div>
<!--end of header2-->
<!--code-->
<div id="code">
<div id="code_box">
<ul class="code_list">
<li class="code_program code_item">
<h2>코드에 집중하는 채용 프로그램</h2>
<p>오직 프로그래머스에서만 운영하는 데브매칭,
챌린지를 통해 각종기업의 채용문을 두드려볼 수 있습니다.
이력서가 부실해도, 코딩테스트에 취약해도,
쌓아온 역량을 마음껏 발휘해 원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.
</p>
</li>
<li class="code_system code_item">
<h2>코드에 집중하는 채용 프로그램</h2>
<p>오직 프로그래머스에서만 운영하는 데브매칭,
챌린지를 통해 각종기업의 채용문을 두드려볼 수 있습니다.
이력서가 부실해도, 코딩테스트에 취약해도,
쌓아온 역량을 마음껏 발휘해 원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.
</p>
</li>
<li class="code_ed code_item">
<h2>코드에 집중하는 채용 프로그램</h2>
<p>오직 프로그래머스에서만 운영하는 데브매칭,
챌린지를 통해 각종기업의 채용문을 두드려볼 수 있습니다.
이력서가 부실해도, 코딩테스트에 취약해도,
쌓아온 역량을 마음껏 발휘해 원하는 기업의 문을 두드릴 수 있는 기회를 제공합니다.
</p>
</li>
</ul>
</div>
<div id="code_img">
<img src="./images/code1.png">
</div>
</div>
<!--end of code-->
<!--header2-2-->
<div class="header2">
<div class="rainbow">
<span class="code1"></span>
<span class="code2"></span>
<span class="code3"></span>
<span class="code4"></span>
<span class="code5"></span>
<span class="code6"></span>
</div>
<div class="header2_text">
<h2>
<p>국내 200개 이상의 기업이</p>
<p>프로그래머스를 통해 당신을 기다립니다.</p>
</h2>
</div>
</div>
<!--end of header2-2-->
<!--company-->
<div id="company">
<ul id ="company_list">
<li><img src="./images/company_kakao.png"></li>
<li><img src="./images/company_lg.png"></li>
<li><img src="./images/company_line.png"></li>
<li><img src="./images/company_11th.png"></li>
<li><img src="./images/company_naver.png"></li>
<li><img src="./images/company_kakaocommerce.png"></li>
<li><img src="./images/company_delivery.png"></li>
<li><img src="./images/company_kakaoenterprise.png"></li>
<li><img src="./images/company_brothers.png"></li>
</ul>
</div>
<!--end of company-->
</div>
<!--end of contents2-->
<div id="footer">
<div class="semi_footer fi">
<h2>JOIN OUR TEAM</h2>
</div>
<div class="main_footer fi">
<ul>
<li>2021 프로그래머스</li>
<li>2021 프로그래머스</li>
<li>2021 프로그래머스</li>
<li>2021 프로그래머스</li>
<li>2021 프로그래머스</li>
<li>2021 프로그래머스</li>
<li>2021 프로그래머스</li>
</ul>
</div>
</div>
</div>
<!--end of container-->
</div>
</body>
</html>*{
margin: 0; padding:0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
html{
overflow-y: auto;
overflow-x: hidden;
}
#wrap{
width:100%;
}
/*header*/
#header{
width: 100%;
height: 500px;
background: #0C150c;
}
#gnb{
width: 100%;
height: 50px;
padding: 6px 16px;
box-sizing: border-box;
background: brown;
}
#logo{
display: inline-block;
width: 182px;
height: 34px;
float: left;
}
#logo > img{
display: inline-block;
width: 182px;
height: 34px;
}
#main_gnb > ul{
width: 1000px;
height: 40px;
background: cornflowerblue;
}
#main_gnb > ul > li{
padding: 10px;
float: left;
background: cadetblue;
}
#main_header{
width: 1200px;
height: 450px;
margin: 0 auto;
padding: 40px;
box-sizing: border-box;
}
#header_text{
width: 500px;
height: 360px;
padding: 0 16px;
box-sizing: border-box;
float: left;
}
#header_img{
width: 600px;
height: 360px;
padding: 0 16px;
float: right;
box-sizing: border-box;
}
#header_img > img{
display: inline-block;
width: 100%;
height: 100%;
}
#container{
width: 100%;
margin: 30px 0 0 0;
}
#contents{
width: 1200px;
margin: 0 auto;
}
/*program*/
#program{
width: 1200px;
height: 500px;
background: pink;
}
#program_header{
width: 1200px;
height: 40px;
background: cadetblue;
}
#program_header > h2{
}
#program_header > h2 > a{
}
.program_boxes{
width: 1200px;
height: 460px;
margin: 0 auto;
}
.program_boxes > li{
width: 575px;
height: 460px;
margin: 0;
background: red;
}
.program_left{
float: left;
}
.program_right{
float: right;
}
#position{
width: 1200px;
height: 735px;
margin: 80px 0 0 0;
background: brown;
}
#position_list{
width: 1200px;
height: 115px;
margin: 0 0 32px 0;
}
#position_box{
width: 1200px;
height: 540px;
margin: 30px 0 0 0;
background: chartreuse;
}
.position_item{
width: 580px;
height: 100px;
padding: 16px;
margin: 26px 0 25px 0;
border: 1px solid #D7E2EB;
box-sizing: border-box;
background: chocolate;
}
#item1{
float: left;
}
#item2{
float: right;
}
#position_footer{
width: 100%;
height: 150px;
margin: 80px 0 0 0;
padding: 30px 0;
box-sizing: border-box;
background: #f4f4f8;
}
#hire{
margin: 80px 0 0 0;
width: 1200px;
height: 250px;
padding: 0 65px;
border-radius: 15px;
box-sizing: border-box;
background: #172334;
color: #0078ff;
}
/*header2*/
.header2{
width: 1200px;
height: 120px;
margin: 100px 0 80px 0;
background: cornflowerblue;
}
.rainbow{
width: 1200px;
height: 22px;
margin: 0 0 40px 0;
background: crimson;
}
.header2_text{
}
#code{
width: 1200px;
height: 650px;
background: darkmagenta;
}
#code_box{
width: 575px;
height: 650px;
margin: 0 50px 0 0;
float: left;
}
.code_item{
width: 550px;
height: 206px;
padding: 25px;
box-sizing: border-box;
margin: 0 0 16px 0;
border-radius: 15px;
background: cornsilk;
}
#code_img > img{
display: inline-block;
width: 570px;
height: 650px;
float: right;
}
#company{
width: 1200px;
height: 620px;
padding: 16px;
background: darkcyan;
box-sizing: border-box;
}
#footer{
width: 100%;
height: 560px;
}
.fi{
width: 1200px;
margin: 0 auto;
}
.semi_footer{
height: 150px;
width: 100%;
padding: 32px 0;
box-sizing: border-box;
background: #0C151C;
}
.main_footer{
width: 1200px;
height: 410px;
padding: 40px 0;
box-sizing: border-box;
background: darkgoldenrod;
}'Code' 카테고리의 다른 글
| 3.22 - To do list(Code) (0) | 2021.03.22 |
|---|---|
| 3.20 (0) | 2021.03.22 |
| 3.17 - Wed / footer (0) | 2021.03.17 |
| 3.16-self (0) | 2021.03.16 |
| 2021.3.16 (0) | 2021.03.16 |
