<!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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <link rel="stylesheet" href="style_header.css">-->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<title>Title</title>
<link rel="icon" href="https://www.bitcamp.co.kr/theme/basic/img/favicon.ico">
<script>
window.onload = function () {
const cardWrap = document.querySelector('.card-wrap');
for (let i = 0; i < 10; i++) {
// Create a new card div
let card = document.createElement('div');
card.className = 'card';
// Add card content
if (i % 2 === 0) {
card.innerHTML = `
<div class="card-header">
<img src="https://www.bitcamp.co.kr/data/file/class/thumb-3731540291_jbtKFG2B_4bebb66ecfcf7e92c0ba33573b066caa62a5ab63_380x200.png" alt="">
</div>
<div class="card-content">
<div class="card-content-title">
<p>클라우드 기반 웹 데브옵스 과정</p>
</div>
<div class="card-content-short">
<pre>개강일 | 2023-05-31</pre>
<pre>교육기간 | 2023-05-31 ~ 2023-12-07</pre>
</div>
<a href="#" class="lecture-detail">자세히보기+</a>
</div>`;
} else {
card.innerHTML = `
<div class="card-header">
<img src="https://www.bitcamp.co.kr/data/file/class/thumb-3731540291_kigoXx5O_81e491a436e3a7c8e5c4e9104ba690e73b0f507e_380x200.png" alt="">
</div>
<div class="card-content">
<div class="card-content-title">
<p>클라우드 기반 웹 데브옵스 과정</p>
</div>
<div class="card-content-short">
<pre>개강일 | 2023-05-31</pre>
<pre>교육기간 | 2023-05-31 ~ 2023-12-07</pre>
</div>
<a href="#" class="lecture-detail">자세히보기+</a>
</div>`;
}
// Append the card to the card wrap
cardWrap.appendChild(card);
// Make the card appear after a delay
setTimeout(function () {
card.style.opacity = 1;
}, 40 * (i + 1));
}
};
</script>
<style>
/*@charset "UTF-8";*/
/*1. 공통부분 작성*/
html {
font-size: 100%;
}
body {
font-family: "나눔고딕", NanumGothic, "맑은고딕", MalgunGothic, sans-serif;
line-height: 1.7;
color: #fff;
}
a {
text-decoration: none;
color: #fff;
}
img {
max-width: 100%;
}
ul {
list-style: none;
}
/*2. 헤더 부분*/
/*헤더 위치 조정*/
.page-header {
position: relative;
}
/*로고 스타일 및 위치*/
.logo-wrap {
z-index: 2;
margin-top: 10px;
}
/*메뉴바 스타일 및 위치*/
.menu-wrap {
z-index: 2;
margin-top: 20px;
}
.main-menu {
display: flex;
font-size: 1.25rem;
}
.main-menu > li {
margin-left: 70px;
position: relative;
float: left
}
/*로그인/회원가입 스타일 및 위치*/
.user-menu {
z-index: 2;
font-size: 0.75rem;
display: flex;
margin-top: 24px;
}
.user-menu > li {
margin-left: 36px;
}
/*헤더 안의 내용 정렬*/
.header-wrap {
display: flex;
justify-content: space-around;
}
/*3. 슬라이드 부분*/
.main-carousel {
margin: 0 auto;
position: relative;
top: -65px;
z-index: 1;
width: 100%;
}
.main-carousel img {
width: 100%;
}
/*여기부터 메인영역*/
/*카드 레이아웃 영역*/
.card-section {
position: relative;
max-width: 1200px;
margin: 10px auto 20px;
color: black;
}
.card-title > h3 {
display: inline-block;
}
.card-title > a {
position: absolute;
right: 0;
}
.card {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.card-wrap {
width: 100%;
margin-top: 20px;
/*카드 목록 그리드 형식으로 배체*/
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 10px;
}
.card-header > img {
width: 100%;
}
.card-content-title {
font-weight: bold;
height: 50px;
margin-bottom: 15px;
}
.card-content-short {
font-size: 0.9rem;
}
.lecture-detail {
display: inline-block;
background: black;
color: white;
padding: 3px;
margin-top: 10px;
}
.table-section {
position: relative;
max-width: 1200px;
margin: 70px auto 20px;
color: black;
}
.table-title > h3 {
display: inline-block;
}
.table-title > a {
position: absolute;
right: 0;
}
.job-table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 20px;
width: 100%;
}
.job-table, .job-table th, .job-table td {
border: 1px solid gray;
}
.job-table-th {
background: whitesmoke;
color: black;
font-size: 14px;
font-weight: bold;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
text-align: center;
}
.job-table-td {
background: white;
color: black;
font-size: 14px;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
text-align: left;
vertical-align: top;
}
.job-detail {
cursor: pointer;
}
/*-----------------------------여기부터 푸터*/
.footer {
background: black;
}
.footer-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 40px 0;
position: relative;
text-align: left;
}
.footer-tel {
font-size: 20px;
}
.footer-branch, .footer-address {
display: inline-block;
font-size: 16px;
}
.footer-header > img, .footer-content > img {
float: right;
}
.footer-btn-wrap, .footer-copywrite {
display: inline-block;
}
.footer-btn-wrap > a {
background: black;
border-radius: 5px;
padding: 5px 10px;
}
.footer-copywrite {
float: right;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 1%;
border-radius: 3px 0 0 3px;
}
/*슬라이더 관련 스타일*/
.mySlides {
display: none;
}
/*8 서브메뉴 관련 스타일*/
.lecture-submenu, .board-submenu {
margin-top: 10px;
display: none;
position: absolute;
width: 130px;
text-align: center;
padding: 0;
border: 1px solid white;
background: white;
}
.main-menu > li > ul a {
color: black;
}
.main-menu > li:hover > ul {
display: block;
font-size: 1rem;
}
/*반응형 웹 적용 - 메튜 버튼으로 변경*/
@media screen and (min-width: 1024px) {
.header-wrap {
justify-content: space-around;
}
.menu-wrap {
display: block;
}
.user-menu {
display: flex;
}
.fa {
display: none;
}
}
@media screen and (max-width: 1023px){
.fa{
margin-top: 15px;
font-size: 2em;
color: white;
z-index: 5;
position: absolute;
right: 20px;
cursor:pointer;
}
.menu-wrap{
display: none;
}
.user-menu{
display: none;
}
.logo-wrap{
width: 40px;
margin-top: 0;
}
}
</style>
<script>
let slideIndex = 1;
// html파일에 있는 모든 태그들이 로드 된 후에 동작
$(function () {
//해당 인덱스의 슬라이드 표룰 메소드 호출
showSlides(slideIndex);
//3초마다 다음 슬라이드 표출
setInterval(function () {
showSlides(++slideIndex);
}, 3000);
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
// function showSlides(n) {
// let i;
// const slides = document.getElementsByClassName("mySlides");
// if (n > slides.length) {
// slideIndex = 1;
// }
// if (n < 1) {
// slideIndex = slides.length;
// }
// for (i = 0; i < slides.length; i++) {
// slides[i].classList.remove("active");
// }
// slides[slideIndex - 1].classList.add("active");
// }
function showSlides(n) {
let i;
const slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
</script>
</head>
<body>
<!--헤더 영역 : 로고+ 메뉴+ 로그인 +라지슬라이드-->
<header class="page-header">
<!-- 로고 메뉴바 로그인-->
<div class="header-wrap">
<!-- 로고-->
<h1 class="logo-wrap">
<a href="#">
<img src="https://www.bitcamp.co.kr/theme/basic/img/bit_white_logo.png" alt="비트캠프로고">
</a>
</h1>
<!-- 메뉴바-->
<nav class="menu-wrap">
<ul class="main-menu">
<li>
<a href="#">비트캠프</a>
</li>
<li>
<a href="#">교육과정</a>
<ul class="lecture-submenu">
<li><a href="#">진행중인 강좌</a></li>
<hr>
<li><a href="#">예정 강좌</a></li>
</ul>
</li>
<li>정
<a href="#">블로그</a>
</li>
<li>
<a href="#">강사소개</a>
</li>
<li>
<a href="#">게시판</a>
<ul class="board-submenu">
<li><a href="#">자유게시판</a></li>
<hr>
<li><a href="#">Q&A</a></li>
</ul>
</li>
</ul>
</nav>
<!-- login singup-->
<ul class="user-menu">
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
</ul>
<i class = "fa fa-bars">
</i>
</div>
<!-- 라지 슬라이드 -->
<div class="main-carousel">
<!-- 슬리아드-->
<div class="mySlides fade">
<a href="#">
<img src="https://www.bitcamp.co.kr/theme/basic/img/visual_ncloud_230512.jpg" alt="엔클">
</a>
</div>
<div class="mySlides fade">
<a href="#">
<img src="https://www.bitcamp.co.kr/theme/basic/img/visual10.jpg" alt="코로나방역">
</a>
</div>
<a class="prev" onclick="plusSlides(-1)"><</a>
<a class="next" onclick="plusSlides(1)">></a>
</div>
</header>
<!--main aria : 교육과정(카드형) + 채용공고(테이블)-->
<main>
<section class="card-section">
<!-- 모집중인 교육과정 카드 레아이웃-->
<div class="main-card">
<!-- 제목 + 더보기 영역-->
<div class="card-title">
<h3>보집중인 교육과정</h3>
<a href="#">
<img src="https://www.bitcamp.co.kr/theme/basic/skin/latest/pic_class/more.jpg" alt="더보기버튼">
</a>기
</div>
<!-- 카드 레이아웃 영역-->
<!-- <div class="card-wrap">-->
<!-- <!–교육과정 하나에 대한 카드–>-->
<!-- <div class="card">-->
<!-- <!– 카드 헤드 강의 이미ㅣ지–>-->
<!-- <!– 카드 콘텐츠 강의 정보–>-->
<!-- <div class="card-header"><img-->
<!-- src="https://www.bitcamp.co.kr/data/file/class/thumb-3731540291_jbtKFG2B_4bebb66ecfcf7e92c0ba33573b066caa62a5ab63_380x200.png"-->
<!-- alt=""></div>-->
<!-- <div class="card-content">-->
<!-- <div class="card-content-title">-->
<!-- <p>클라우드 기반 웹 데브옵스 과정</p>-->
<!-- </div>-->
<!-- <!– 카드 콘텐트 요약 : 강의 정보–>-->
<!-- <div class="card-content-short">-->
<!-- <pre>개강일 | 2023-05-31</pre>-->
<!-- <pre>교육기간 | 2023-05-31 ~ 2023-12-07</pre>-->
<!-- </div>-->
<!-- <!– 자세히보기–>-->
<!-- <a href="#" class="lecture-detail">자세히보기+</a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="card-wrap"></div>
</div>
</section>
<section class="table-section">
<!-- 채용공고(테이블-->
<!-- 테이블 영역 : 테이블 헤더 채용공공, 더보기 버튼 + 테이블 컨텐츠-->
<div class="main-table">
<!-- 제목부분 : 제목+더보기 버튼 -->
<!-- 테이블 영역 -->
<div class="table-title">
<h3>채용공고</h3>
<a href="#">
<img src="https://www.bitcamp.co.kr/theme/basic/skin/latest/pic_class/more.jpg" alt="더보기버튼">
</a>
</div>
<div class="table-wrap">
<table class="job-table">
<thead>
<tr>
<th class="job-table-th">회사명</th>
<th class="job-table-th">포지션</th>
<th class="job-table-th">게시일</th>
<th class="job-table-th">마감일</th>
</tr>
</thead>
<tbody>
<tr class="job-detail" onclick="location.href='#'">
<td class="job-table-td">아이지니 주식회사</td>
<td class="job-table-td">cloudmanagement</td>
<td class="job-table-td">2023-05-12</td>
<td class="job-table-td">2023-06-11</td>
</tr>
<tr class="job-detail" onclick="location.href='#'">
<td class="job-table-td">아이지니 주식회사</td>
<td class="job-table-td">cloudmanagement</td>
<td class="job-table-td">2023-05-12</td>
<td class="job-table-td">2023-06-11</td>
</tr>
<tr class="job-detail" onclick="location.href='#'">
<td class="job-table-td">아이지니 주식회사</td>
<td class="job-table-td">cloudmanagement</td>
<td class="job-table-td">2023-05-12</td>
<td class="job-table-td">2023-06-11</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
<!--푸터영역 : 사용자 방침 + 회사정보 + 로고 등등-->
<footer class="footer">
<div class="footer-wrap">
<div class="footer-header">
<div class="footer-tel">
비트캠프 대표문의
<br>
02-1111-1111
<br>
<br>
</div>
<div class="footer-branch">
* 기존 수강생분들의 행저업무는 해당 센터로 문의 바랍니다.
<br>
<pre>
강남본원 02.1111.1111
강남센터 02.2222.2222
</pre>
<br>
평 일
AM 09:30 ~ 18:00
</div>
<img src="https://www.bitcamp.co.kr/theme/basic/img/ft_icon1.png" alt="">
<img src="https://www.bitcamp.co.kr/theme/basic/img/ft_icon2.png" alt="">
</div>
<div class="footer-content">
<div class="footer-address">
비트캠프 | 서울 강남구 강남대로 94길 20,
삼오빌딩 (5층 ~ 7층) | 사업자등록번호 :
111-11-11111
<br>
(주) 비트컴퓨터 강남본원 대표이사 :
조현정 | 문의 : 02-1111-1111
| 팩스 : 02-1111.1111
<br>
통신판미업 ------
</div>
<img src="https://www.bitcamp.co.kr/theme/basic/img/bit_white_logo.png" alt="비트캠프 로고">
</div>
<div class="footer-bottom">
<div class="footer-btn-wrap">
<a href="#">개인정보처리방침</a>
<a href="#">이용약관</a>
<a href="#">찾아오시는길</a>
</div>
<div class="footer-copywrite">
copywrite (c) 비트캠프 All rights served.
</div>
</div>
</div>
</footer>
</body>
</html>
댓글 영역