css

js

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 &copy; 제주카페찾기
            </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 &copy; 제주카페찾기
            </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 &copy; 제주카페찾기
            </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 &copy; 제주카페찾기
            </p>
        </div>
    </footer>
    <!-- global-footer 끝 -->
</div>

<script src="./js/index.js"></script>
</body>
</html>