about.html
<!DOCTYPE html>
<html>
<head>
<title>제주카페찾기</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<https://use.fontawesome.com/releases/v5.6.3/css/all.css>"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="./css/main.css">
</head>
<body class="page-about">
<div class="jejucafe-container">
<!-- global-header 시작 -->
<header class="global-header">
<div class="grid">
<button class="global-menu-btn">
<i class="fas fa-bars"></i>
<span class="btn-label">메뉴</span>
</button>
<a class="logo" href="./index.html">
<img src="./images/logo.png" alt="제주카페찾기">
</a>
<div class="global-menu">
<nav class="global-menu-nav">
<ul>
<li class="menu-item-about">
<a href="about.html">서비스 소개</a>
</li>
<li class="menu-item-list">
<a href="list.html">카페들</a>
</li>
</ul>
<a href="write.html" class="add-cafe-btn">
<i class="fas fa-plus"></i>
<span class="btn-label">카페등록</span>
</a>
</nav>
<form class="search-cafe-form text-input-and-btn">
<div class="input-wrapper">
<input type="search" placeholder="찾고 싶은 카페 이름">
</div>
<button class="icon-btn search-cafe-form-btn">
<i class="fas fa-search"></i>
<span class="btn-label">카페찾기</span>
</button>
</form>
</div>
</div>
</header>
<!-- global-header 끝 -->
<!-- content-area 시작 -->
<div class="content-area">
<!-- 소개 페이지 내용 시작 -->
<article class="page-content">
<div class="grid">
<header>
<h1>제주도 카페, 여기 다 있어요!</h1>
</header>
<section class="content-section">
<header>
<h2>섹션 제목</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Dolorem cupiditate molestias vel veritatis odio repellat quod velit,
at delectus dolor tenetur, laudantium atque, inventore.
Quia obcaecati accusantium consequuntur dignissimos fugit.</p>
<p>제주코딩베이스캠프에서 제작하는 예제 웹사이트입니다.</p>
</section>
</div>
</article>
<!-- 소개 페이지 내용 끝 -->
</div>
<!-- content-area 끝 -->
<!-- global-footer 시작 -->
<footer class="global-footer">
<div class="grid">
<p class="copyright">
2018 © 제주카페찾기
</p>
</div>
</footer>
<!-- global-footer 끝 -->
</div>
<script src="./js/index.js"></script>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<title>제주카페찾기</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<https://use.fontawesome.com/releases/v5.6.3/css/all.css>"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<script src="<https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js>"></script>
<script type="text/javascript">
WebFont.load({
// For google fonts
google: {
families: ['Noto Sans KR', 'Roboto']
}
});
</script>
<link rel="stylesheet"
href="<https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css>">
<script src="<https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js>">
</script>
<link rel="stylesheet" href="./css/main.css">
</head>
<body class="page-home">
<div class="jejucafe-container">
<!-- global-header 시작 -->
<header class="global-header">
<div class="grid">
<button class="global-menu-btn">
<i class="fas fa-bars"></i>
<span class="btn-label">메뉴</span>
</button>
<a class="logo" href="./index.html">
<img src="./images/logo.png" alt="제주카페찾기">
</a>
<div class="global-menu">
<nav class="global-menu-nav">
<ul>
<li class="menu-item-about">
<a href="about.html">서비스 소개</a>
</li>
<li class="menu-item-list">
<a href="list.html">카페들</a>
</li>
</ul>
<a href="write.html" class="add-cafe-btn">
<i class="fas fa-plus"></i>
<span class="btn-label">카페등록</span>
</a>
</nav>
<form class="search-cafe-form text-input-and-btn">
<div class="input-wrapper">
<input type="search" placeholder="찾고 싶은 카페 이름">
</div>
<button class="icon-btn search-cafe-form-btn">
<i class="fas fa-search"></i>
<span class="btn-label">카페찾기</span>
</button>
</form>
</div>
</div>
</header>
<!-- global-header 끝 -->
<!-- content-area 시작 -->
<div class="content-area">
<!-- jejumap-container 시작 -->
<section class="jejumap-container">
<div class="grid">
<header class="jejumap-header">
<h1 class="main-copy">지도에서 원하는 지역을 선택하세요!</h1>
<p>선택하지 않으면 전체 지역에서 찾습니다</p>
</header>
<div class="jejumap">
<div class="jejumap-items">
<div class="jejumap-item" id="jejumap-item-hangyeong">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-1" data-city="notJcity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-1">
한경면</label>
</div>
<div class="jejumap-item" id="jejumap-item-hanlim">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-2" data-city="notJcity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-2">
한림읍</label>
</div>
<div class="jejumap-item" id="jejumap-item-aewol">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-3" data-city="notJcity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-3">
애월읍</label>
</div>
<div class="jejumap-item" id="jejumap-item-jeju">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-0" data-city="Jcity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-0">
제주시</label>
</div>
<div class="jejumap-item" id="jejumap-item-jocheon">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-4" data-city="notJcity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-4">
조천읍</label>
</div>
<div class="jejumap-item" id="jejumap-item-gujwa">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-5" data-city="notJcity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-5">
구좌읍</label>
</div>
<div class="jejumap-item" id="jejumap-item-daejeong">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-9" data-city="notScity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-9">
대정읍</label>
</div>
<div class="jejumap-item" id="jejumap-item-andeok">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-10" data-city="notScity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-10">
안덕면</label>
</div>
<div class="jejumap-item" id="jejumap-item-seogwipo">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-8" data-city="Scity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-8">
서귀포시</label>
</div>
<div class="jejumap-item" id="jejumap-item-namwon">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-11" data-city="notScity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-11">
남원읍</label>
</div>
<div class="jejumap-item" id="jejumap-item-pyoseon">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-12" data-city="notScity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-12">
표선면</label>
</div>
<div class="jejumap-item" id="jejumap-item-seongsan">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-13" data-city="notScity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-13">
성산읍</label>
</div>
<div class="jejumap-item" id="jejumap-item-udo">
<input type="checkbox" class="jejumap-check te-elem"
id="check-area-6" data-city="notJcity">
<div class="mapshape"></div>
<label class="jejumap-item-title te-elem" for="check-area-6">
우도면</label>
</div>
</div>
</div>
<a href="list.html" class="btn big-btn search-map-btn">카페찾기!</a>
</div>
</section>
<!-- jejumap-container 끝 -->
</div>
<!-- content-area 끝 -->
<!-- global-footer 시작 -->
<footer class="global-footer">
<div class="grid">
<p class="copyright">
2018 © 제주카페찾기
</p>
</div>
</footer>
<!-- global-footer 끝 -->
</div>
<script src="./js/index.js"></script>
</body>
</html>
list.html
<!DOCTYPE html>
<html>
<head>
<title>제주카페찾기</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<https://use.fontawesome.com/releases/v5.6.3/css/all.css>"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="./css/main.css">
</head>
<body class="page-list">
<div class="jejucafe-container">
<!-- global-header 시작 -->
<header class="global-header">
<div class="grid">
<button class="global-menu-btn">
<i class="fas fa-bars"></i>
<span class="btn-label">메뉴</span>
</button>
<a class="logo" href="./index.html">
<img src="./images/logo.png" alt="제주카페찾기">
</a>
<div class="global-menu">
<nav class="global-menu-nav">
<ul>
<li class="menu-item-about">
<a href="about.html">서비스 소개</a>
</li>
<li class="menu-item-list">
<a href="list.html">카페들</a>
</li>
</ul>
<a href="write.html" class="add-cafe-btn">
<i class="fas fa-plus"></i>
<span class="btn-label">카페등록</span>
</a>
</nav>
<form class="search-cafe-form text-input-and-btn">
<div class="input-wrapper">
<input type="search" placeholder="찾고 싶은 카페 이름">
</div>
<button class="icon-btn search-cafe-form-btn">
<i class="fas fa-search"></i>
<span class="btn-label">카페찾기</span>
</button>
</form>
</div>
</div>
</header>
<!-- global-header 끝 -->
<!-- content-area 시작 -->
<div class="content-area">
<!-- cafe-list 시작 -->
<div class="cafe-list">
<div class="grid">
<!-- 카페 1개 시작 -->
<section class="cafe-item">
<figure class="cafe-item-photo">
<img src="./images/temp/cafe_0.jpg" alt="">
</figure>
<div class="cafe-item-info">
<h2>제주코딩카페</h2>
<p>개발자와 디자이너들을 위한 카페에요.</p>
<ul class="cafe-item-contact">
<li>
<i class="fas fa-map-marker-alt"></i>
제주시 조천읍 함덕00길 000
</li>
<li>
<i class="fas fa-phone"></i>
064-000-0000
</li>
<li>
<i class="fab fa-instagram"></i>
@jejucodingcafe
</li>
</ul>
</div>
</section>
<!-- 카페 1개 끝 -->
<!-- 카페 1개 시작 -->
<section class="cafe-item">
<figure class="cafe-item-photo">
<img src="./images/temp/cafe_1.jpg" alt="">
</figure>
<div class="cafe-item-info">
<h2>CAFE 마트료시카</h2>
<p>러시아 인형 장식이 인상적인 러시아풍 카페에요.</p>
<ul class="cafe-item-contact">
<li>
<i class="fas fa-map-marker-alt"></i>
제주시 조천읍 함덕00길 000
</li>
<li>
<i class="fas fa-phone"></i>
064-000-0000
</li>
<li>
<i class="fab fa-instagram"></i>
@jejucodingcafe
</li>
</ul>
</div>
</section>
<!-- 카페 1개 끝 -->
<!-- 카페 1개 시작 -->
<section class="cafe-item">
<figure class="cafe-item-photo">
<img src="./images/temp/cafe_2.jpg" alt="">
</figure>
<div class="cafe-item-info">
<h2>크리스마스 카페</h2>
<p>크리스마스에만 문을 여는 카페입니다.</p>
<ul class="cafe-item-contact">
<li>
<i class="fas fa-map-marker-alt"></i>
제주시 조천읍 함덕00길 000
</li>
<li>
<i class="fas fa-phone"></i>
064-000-0000
</li>
<li>
<i class="fab fa-instagram"></i>
@jejucodingcafe
</li>
</ul>
</div>
</section>
<!-- 카페 1개 끝 -->
</div>
</div>
<!-- cafe-list 끝 -->
</div>
<!-- content-area 끝 -->
<!-- global-footer 시작 -->
<footer class="global-footer">
<div class="grid">
<p class="copyright">
2018 © 제주카페찾기
</p>
</div>
</footer>
<!-- global-footer 끝 -->
</div>
<script src="./js/index.js"></script>
</body>
</html>
write.html
<!DOCTYPE html>
<html>
<head>
<title>제주카페찾기</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<https://use.fontawesome.com/releases/v5.6.3/css/all.css>"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="./css/main.css">
</head>
<body class="page-write">
<div class="jejucafe-container">
<!-- global-header 시작 -->
<header class="global-header">
<div class="grid">
<button class="global-menu-btn">
<i class="fas fa-bars"></i>
<span class="btn-label">메뉴</span>
</button>
<a class="logo" href="./index.html">
<img src="./images/logo.png" alt="제주카페찾기">
</a>
<div class="global-menu">
<nav class="global-menu-nav">
<ul>
<li class="menu-item-about">
<a href="about.html">서비스 소개</a>
</li>
<li class="menu-item-list">
<a href="list.html">카페들</a>
</li>
</ul>
<a href="write.html" class="add-cafe-btn">
<i class="fas fa-plus"></i>
<span class="btn-label">카페등록</span>
</a>
</nav>
<form class="search-cafe-form text-input-and-btn">
<div class="input-wrapper">
<input type="search" placeholder="찾고 싶은 카페 이름">
</div>
<button class="icon-btn search-cafe-form-btn">
<i class="fas fa-search"></i>
<span class="btn-label">카페찾기</span>
</button>
</form>
</div>
</div>
</header>
<!-- global-header 끝 -->
<!-- content-area 시작 -->
<div class="content-area">
<!-- 카페등록 페이지 내용 시작 -->
<article class="page-content">
<div class="grid">
<header>
<h1>카페등록</h1>
</header>
<form>
<div class="form-row">
<div class="form-row-content">
<span class="form-row-label">카페위치</span>
<div class="form-row-input">
<label>
<input type="radio" name="cafeArea" value="1">
<span>구좌읍</span>
</label>
<label>
<input type="radio" name="cafeArea" value="2">
<span>남원읍</span>
</label>
<label>
<input type="radio" name="cafeArea" value="3">
<span>대정읍</span>
</label>
<label>
<input type="radio" name="cafeArea" value="4">
<span>서귀포시내</span>
</label>
<label>
<input type="radio" name="cafeArea" value="5">
<span>성산읍</span>
</label>
<label>
<input type="radio" name="cafeArea" value="6">
<span>안덕면</span>
</label>
<label>
<input type="radio" name="cafeArea" value="7">
<span>애월읍</span>
</label>
<label>
<input type="radio" name="cafeArea" value="8">
<span>우도면</span>
</label>
<label>
<input type="radio" name="cafeArea" value="9">
<span>제주시내</span>
</label>
<label>
<input type="radio" name="cafeArea" value="10">
<span>조천읍</span>
</label>
<label>
<input type="radio" name="cafeArea" value="11">
<span>표선면</span>
</label>
<label>
<input type="radio" name="cafeArea" value="12">
<span>한경면</span>
</label>
<label>
<input type="radio" name="cafeArea" value="13">
<span>한림읍</span>
</label>
</div>
</div>
</div>
<div class="form-row">
<label class="form-row-content">
<span class="form-row-label">카페이름</span>
<div class="form-row-input">
<input type="text" name="cafeName">
</div>
</label>
</div>
<div class="form-row">
<label class="form-row-content">
<span class="form-row-label">주소</span>
<div class="form-row-input">
<input type="text" name="cafeAddress">
</div>
</label>
</div>
<div class="form-row">
<label class="form-row-content">
<span class="form-row-label">전화번호</span>
<div class="form-row-input">
<input type="text" name="cafePhoneNum">
</div>
</label>
</div>
<div class="form-row">
<label class="form-row-content">
<span class="form-row-label">카페소개</span>
<div class="form-row-input">
<input type="text" name="cafeIntro">
</div>
</label>
</div>
<div class="form-row">
<label class="form-row-content">
<span class="form-row-label">사진</span>
<div class="form-row-input">
<input type="file" name="cafePhoto">
</div>
</label>
</div>
<div class="form-row form-row-btn-con">
<input type="submit" value="등록하기"
class="btn big-btn cafe-write-btn">
</div>
</form>
</div>
</article>
<!-- 카페등록 페이지 내용 끝 -->
</div>
<!-- content-area 끝 -->
<!-- global-footer 시작 -->
<footer class="global-footer">
<div class="grid">
<p class="copyright">
2018 © 제주카페찾기
</p>
</div>
</footer>
<!-- global-footer 끝 -->
</div>
<script src="./js/index.js"></script>
</body>
</html>