반응형
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
<div class="logo_box">로고사진</div>
<div class="menu_box">
<div class="menu">호스트가 되어보세요</div>
<div class="menu">도움말</div>
<div class="menu">회원가입</div>
<div class="menu">로그인</div>
</div>
</div>
<div class="main_box">
<div class="main">
<p>
<div class="guide_box">
<div>
<h3>에어비앤비 둘러보기</h3>
</div>
</div>
</p>
<!--에어비앤비 둘러보기 아이템 박스-->
<p>
<div class="outer">
<div class="item_box">
<div class="img_box">사진</div>
<div class="txt_box">숙소 및 부티크 호텔</div>
</div>
<div class="item_box">
<div class="img_box">사진</div>
<div class="txt_box">트립</div>
</div>
<div class="item_box">
<div class="img_box">사진</div>
<div class="txt_box">어드벤처</div>
</div>
<div class="item_box">
<div class="img_box">사진</div>
<div class="txt_box">레스토랑</div>
</div>
</div>
</p>
<!--사막 사진-->
<p>
<div class="desert_img">사막 사진</div>
<div class="guide_box">
<h3>추천 여행지</h3>
</div>
</p>
<!--추천 여행지 아이템 박스-->
<p>
<div class="trip_box">
<div class="city_box">파리
<h6>1박 평균 131,641</h6>
</div>
<div class="city_box">도쿄
<h6>1박 평균 103,762</h6>
</div>
<div class="city_box">런던
<h6>1박 평균 149,512</h6>
</div>
<div class="city_box">로스엔젤레스
<h6>1박 평균 159,646</h6>
</div>
<div class="city_box">바르셀로나
<h6>1박 평균 127,166</h6>
</div>
</div>
</p>
<p>
<h3>에어비앤비 플러스를 만나보세요!</h3>
<h6>퀄리티와 인테리어 디자인이 검증된 숙소 컬렉션</h6>
</p>
<!--호텔 사진-->
<p>
<div class="hotel_img">호텔 사진</div>
</p>
<p>
<div class="guide_box">
<h3>전 세계 숙소</h3>
</div>
</p>
<!--전 세계 숙소 아이템 박스-->
<p>
<div class="hotel_box">
<!--1번 방-->
<div class="room_box">
<div class="room_img">사진</div>
<div>
<h6>오두막 * BALIAN BEACH, BALI</h6>
</div>
<div class="room_name">BALIAN TREEHOUSE w beautiful pool</div>
<div class="room_review">
<h6>★★★★★ 185 슈퍼호스트</h6>
</div>
</div>
<!--2번 방-->
<div class="room_box">
<div class="room_img">사진</div>
<div>
<h6>키클라데스 주택 * 이아(OIA)</h6>
</div>
<div class="room_name">Unique Architecture Cave House</div>
<div class="room_review">
<h6>★★★★★ 188 슈퍼호스트</h6>
</div>
</div>
<!--3번 방-->
<div class="room_box">
<div class="room_img">사진</div>
<div>
<h6>성 * 트웬티나인 팜스(TWENTYNINE PALMS)</h6>
</div>
<div class="room_name">Tile House</div>
<div class="room_review">
<h6>★★★★★ 367 슈퍼호스트</h6>
</div>
</div>
<!--4번 방-->
<div class="room_box">
<div class="room_img">사진</div>
<div>
<h6>검증됨 * 케이프타운</h6>
</div>
<div class="room_name">Modern, Chic Penthouse with Mountain, City & Sea Views</div>
<div class="room_review">
<h6>★★★★★ 177 슈퍼호스트</h6>
</div>
</div>
<!--5번 방-->
<div class="room_box">
<div class="room_img">사진</div>
<div>
<h6>아파트 전체 * 마드리드(MADRID)</h6>
</div>
<div class="room_name">솔광장에 위치한 개인 스튜디오</div>
<div class="room_review">
<h6>★★★★★ 459 슈퍼호스트</h6>
</div>
</div>
<!--6번 방-->
<div class="room_box">
<div class="room_img">사진</div>
<div>
<h6>집 전체 * HUMAC</h6>
</div>
<div class="room_name">Vacation house in etno-eco village Humac</div>
<div class="room_review">
<h6>★★★★★ 459 슈퍼호스트</h6>
</div>
</div>
<!--7번 방-->
<div class="room_box">
<div class="room_img">사진</div>
<div>
<h6>개인실 * 마라케시</h6>
</div>
<div class="room_name">The Cozy Palace</div>
<div class="room_review">
<h6>★★★★★ 559 슈퍼호스트</h6>
</div>
</div>
<!--8번 방-->
<div class="room_box">
<div class="room_img">사진</div>
<div>
<h6>게스트용 별채 전체 * 로스엔젤레스</h6>
</div>
<div class="room_name">Private Pool House with Amazing Views!</div>
<div class="room_review">
<h6>★★★★★ 170 슈퍼호스트</h6>
</div>
</div>
</div>
</p>
</div>
</div>
</body>
</html>style.css
.header {
background-color: bisque;
display: flex;
height: 700px;
width: 100%;
justify-content: space-between;
}
.menu_box {
display: flex;
}
.menu {
margin: 0 25px 0 0;
}
.main_box{
display: flex;
justify-content: center;
}
.main{
width: 80%;
}
.outer {
display: flex;
justify-content: space-between;
}
.item_box {
margin: 0 10px 0 0;
width: 70%;
height: 70px;
background-color: bisque;
border: 1px solid black;
border-radius: 5px;
display: flex;
justify-content: space-around;
}
.txt_box {
display: flex;
align-items: center;
}
.desert_img {
width: 100%;
height: 200px;
background-color: bisque;
border-radius: 20px;
margin: 50px 0 50px 0;
}
.trip_box {
display: flex;
justify-content: space-around;
}
.city_box {
background-color: bisque;
width: 50%;
height: 200px;
margin: 0 10px 0 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.hotel_img {
width: 100%;
height: 200px;
background-color: bisque;
border-radius: 20px;
margin: 0 0 10px 0;
}
.hotel_box {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.room_box {
margin: 10px;
height: 250px;
width: 350px;
background-color: bisque;
display: flex;
flex-direction: column;
}
.room_img {
flex: 8;
}완성 화면
* 전체화면 *
* 작은 화면 *
반응형