1. Header 작성
<!-- 헤더 start --> <header> <nav> <div class="logo"> <svg viewBox="0 0 1000 1000" role="presentation" aria-hidden="true" focusable="false" style="height: 1em; width: 1em; display: inline-block; fill: currentcolor;"> <path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"> </path> </svg> </div> <div class="menu"> <div>호스트가 되어주세요</div> <div>도움말</div> <div>회원가입</div> <div>로그인</div> </div> </nav> <div class="search-box"> <div class="search-box-title">특색있는 숙소와 즐길 거리를 예약하세요.</div> <table> <tr> <td colspan="2" class="search-box-name">목적지</td> </tr> <tr> <td colspan="2"> <input type="text" placeholder="모든 위치" class="search-box-input"> </td> </tr> <tr> <td class="search-box-name">체크인</td> <td class="search-box-name">체크아웃</td> </tr> <tr> <td><input type="date" class="search-box-input"></td> <td><input type="date" class="search-box-input"></td> </tr> <tr> <td colspan="2" class="search-box-name">인원 </td> </tr> <tr> <td colspan="2"> <select class="search-box-input"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select> </td> </tr> </table> <div class="search-box-btn"> <button class="search-box-click">검색</button> </div> </div> </header> <!-- 헤더 end -->
2. Body 작성
1) 에어비앤비 둘러보기
<!-- 에어비앤비 둘러보기 start --> <section> <div class="title mb-20">에어비앤비 둘러보기</div> <div class="card-box"> <div class="card"> <div class="card-img1"></div> <div class="card-title">숙소 및 부티크</div> </div> <div class="card"> <div class="card-img2"></div> <div class="card-title">트립</div> </div> <div class="card"> <div class="card-img3"></div> <div class="card-title">어드벤쳐</div> </div> <div class="card"> <div class="card-img4"></div> <div class="card-title">레스토랑</div> </div> </div> </section> <section> <div class="ad-img1"></div> </section>
2) 추천 여행지
<!-- 추천여행지 start --> <section> <div class="title mb-20">추천 여행지</div> <div class="img-box"> <div class="img1"></div> <div class="img2"></div> <div class="img3"></div> <div class="img4"></div> <div class="img5"></div> </div> </section> <!-- 추천여행지 end --> <!--에어비앤비 플러스를 만나보세요! start --> <section> <div class="title">에어비앤비 플러스를 만나보세요!</div> <div class="subtitie mb-20">퀄리티와 인테리어 디자인이 검증된 숙소 셀렉션</div> <div class="ad-img2"></div> </section> <!--에어비앤비 플러스를 만나보세요! end -->
3) 전 세계 숙소
<!-- 전 세계 숙소 start --> <section> <div class="title mb-20">전 세계 숙소</div> <div class="home-box"> <div class="home"> <div class="home-img1"></div> <div class="text1">오두막-BALIAN BEACH, BALI</div> <div class="text2">BALIAN TREEHOUSE w beautiful pool</div> <div class="grade-box"> <div class="star">★★★★★</div> <div class="count">185</div> <div class="text3">슈퍼호스트</div> </div> </div> <div class="home"> <div class="home-img2"></div> <div class="text1">카클라데스 주택-이아(OIA)</div> <div class="text2">Unique Architecture Cave House</div> <div class="grade-box"> <div class="star">★★★★★</div> <div class="count">188</div> <div class="text3">슈퍼호스트</div> </div> </div> <div class="home"> <div class="home-img3"></div> <div class="text1">성-트웬티나인 팜스(TWENTYNINE PALMS)</div> <div class="text2">Tile House</div> <div class="grade-box"> <div class="star">★★★★★</div> <div class="count">367</div> <div class="text3">슈퍼호스트</div> </div> </div> <div class="home"> <div class="home-img4"></div> <div class="text1">검증됨-케이프타운</div> <div class="text2">Modern,Chic Penthouse with Mountain,City & Sea Views</div> <div class="grade-box"> <div class="star">★★★★★</div> <div class="count">177</div> <div class="text3">슈퍼호스트</div> </div> </div> <div class="home"> <div class="home-img5"></div> <div class="text1">아파트 전체-마드리드(MADRID)</div> <div class="text2">솔광장에 위치한 개인 스튜디오</div> <div class="grade-box"> <div class="star">★★★★★</div> <div class="count">459</div> <div class="text3">슈퍼호스트</div> </div> </div> <div class="home"> <div class="home-img6"></div> <div class="text1">집 전체-HUMAC</div> <div class="text2">Vacation house in etno-ecovillage Humac</div> <div class="grade-box"> <div class="star">★★★★★</div> <div class="count">119</div> <div class="text3">슈퍼호스트</div> </div> </div> <div class="home"> <div class="home-img7"></div> <div class="text1">개인실-마라케시</div> <div class="text2">The Cozy Palace</div> <div class="grade-box"> <div class="star">★★★★★</div> <div class="count">559</div> <div class="text3">슈퍼호스트</div> </div> </div> <div class="home"> <div class="home-img8"></div> <div class="text1">게스트용 별채 전체-로스앤젤레스</div> <div class="text2">Private Pool House with Amaging Views!</div> <div class="grade-box"> <div class="star">★★★★★</div> <div class="count">170</div> <div class="text3">슈퍼호스트</div> </div> </div> </div> </section> <!-- 전 세계 숙소 end -->
Share article