CSS-responsive/index.html at main · sorydory/CSS-responsive · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, width=device-width"/>
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/reset2.css">
  <link rel="stylesheet" href="css/style2.css">
 </head>
 <body>
	<header>
		    <h1>logo</h1>
            <ul>
                <li><i class="fa fa-header"></i>Hotem</li>
                <li><i class="fa fa-building-o"></i>Fucility</li>
                <li><i class="fa fa-suitcase"></i>Businiss</li>
                <li><i class="fa fa-cutlery"></i>Restaurant</li>
            </ul>
            <div class="sns">
				<div>
					<a href="#"><img src="./img/sns1.png" alt=""></a>
					<a href="#"><img src="./img/sns2.png" alt=""></a>
				</div>
                <div>
					<a href="#"><img src="./img/sns3.png" alt=""></a>
					<a href="#"><img src="./img/sns4.png" alt=""></a>
					<a href="#"><img src="./img/sns5.png" alt=""></a>
				</div>
            </div>
	</header>
	<div class="content">
		<div class="quick">
            <div>
				<a href="#"><img src="./img/util1.png" alt=""></a>
                <a href="#"><img src="./img/util2.png" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./img/util3.png" alt=""></a>
                <a href="#"><img src="./img/util4.png" alt=""></a>
            </div>
		</div>
		<div class="main-content">
			<ul class="lists">
				 <!-- 내용1 -->
                    <li>
                        <div class="bg bg1"></div>
                        <span>Maldives</span>
                    </li>
                    <!-- 내용2 -->
                    <li>
                        <div class="txt">
                            <i class="fa fa-angle-right"></i>
                            <p>
                                <strong>A Whole New World</strong>
                                <em>I can show you the world. Shining Shimmering Splended.<br/>Tell me when you decide let me be in your heart.</em>
                            </p>
                        </div>
                    </li>
                    <!-- 내용3 -->
                    <li>
                        <div class="txt bgtxt">
                            <i class="fa fa-spin fa-refresh"></i>
                            <p><strong>Reservation</strong></p>
                        </div>
                    </li>
                    <!-- 내용4 -->
                    <li>
                        <span>Suite</span>
                        <div class="bg bg2"></div>
                    </li>
                    <!-- 내용5 -->
                    <li>
                        <span>Surf</span>
                        <div class="bg bg3"></div>
                    </li>
                    <!-- 내용6 -->
                    <li>
                        <div class="txt">
                            <i class="fa fa-angle-right"></i>
                            <p>
                                <strong>A Dazzling Place</strong>
                                <em>I can show you the world. Shining Shimmering Splended.<br/>Tell me when you decide let me be in your heart.</em>
                            </p>
                        </div>
                    </li>
                    <!-- 내용7 -->
                    <li>
                        <span>Sauna</span>
                        <div class="bg bg4"></div>
                    </li>
                    <!-- 내용8 -->
                    <li>
                        <div class="txt">
                            <i class="fa fa-angle-right "></i>
                            <p>
                                <strong>Hot spot</strong>
                                <em>I can show you the world. Shining Shimmering Splended.</em>
                            </p>
                        </div>
                    </li>
                    <!-- 내용9 -->
                    <li>
                        <span>Diner</span>
                        <div class="bg bg5"></div>
                    </li>
                    <!-- 내용10 -->
                    <li>
                        <span>Spa</span>
                        <div class="bg bg6"></div>
                    </li>
                    <!-- 내용11 -->
                    <li>
                        <div class="txt">
                            <i class="fa fa-angle-right"></i>
                            <p>
                                <strong>Open Space</strong>
                                <em>I can show you the world. Shining Shimmering Splended.</em>
                            </p>
                        </div>
                    </li>
                    <!-- 내용12 -->
                    <li>
                        <span>Tour</span>
                        <div class="bg bg7"></div>
                    </li>
			</ul>
		</div>
	</div>
 </body>
</html>