├── LICENSE
├── README.md
└── hotelSite
    ├── index.css
    └── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 GÖKMEN NİŞANCI
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | Contributors
11 | Gökmen Nişancı
12 | License & copyright
13 | © Gökmen Nişancı , Web Software and Design
14 | Licensed under the MIT License,
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # hotelSite
 2 | 
 3 | 
 4 | https://user-images.githubusercontent.com/91744618/139847940-bb44f1a6-cd3e-44ef-9a7a-82284378db3f.mp4
 5 | 
 6 | <div id="contact">
 7 |  
 8 | <h2> Connect with me: </h2>
 9 |  
10 |   <a href="https://linkedin.com/in/nisancigokmen"><img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F1.bp.blogspot.com%2F-onvhHUdW1Us%2FYI52e9j4eKI%2FAAAAAAAAE4c%2F6s9wzOpIDYcAo4YmTX1Qg51OlwMFmilFACLcBGAsYHQ%2Fs1600%2FLogo%252BLinkedin.png&f=1&nofb=1&ipt=edb59a1b216c55e3eb63ef45526e2243b3e4291e82b7893c9945047490037ee8&ipo=images" width="66x"> </a>  &nbsp;   <a href="https://mail.google.com/mail/u/0/?fs=1&tf=cm&source=mailto&to=nisancigokmen@gmail.com"><img src="https://img.icons8.com/ios-glyphs/60/000000/new-post.png"/> </a> 
11 | 
12 |  </div>
13 | 
14 |  <div id="tools">
15 |  <h2> Languages and tools:  </h2><br>
16 |  
17 |  <img src="https://camo.githubusercontent.com/d63d473e728e20a286d22bb2226a7bf45a2b9ac6c72c59c0e61e9730bfe4168c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f48544d4c352d4533344632363f7374796c653d666f722d7468652d6261646765266c6f676f3d68746d6c35266c6f676f436f6c6f723d7768697465">
18 | 
19 |  <img src="https://camo.githubusercontent.com/5ed492db9c79ad5990eda7dc80923377f0e7096b18a4d1e9b86c8987dc0e5aa5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f637373332532302d2532333135373242362e7376673f267374796c653d666f722d7468652d6261646765266c6f676f3d63737333266c6f676f436f6c6f723d7768697465">
20 |  
21 |  <img src="https://camo.githubusercontent.com/62d37abe760867620e0baea1066303719d630a82936837ba7bff6b0c754e3c9f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a6176617363726970742532302d2532333332333333302e7376673f267374796c653d666f722d7468652d6261646765266c6f676f3d6a617661736372697074266c6f676f436f6c6f723d253233463744463145">
22 |  
23 |  </div>
24 |  
25 | <br>
26 |   
27 | </div><br>
28 | &copy; Gökmen Nişancı / Web Developer. <br><br>
29 |   
30 | 
31 | 
32 | [![Typing SVG](https://readme-typing-svg.herokuapp.com?color=%2318f9ee&size=22&lines=Thanks+for+visiting)](https://git.io/typing-svg)
33 | 


--------------------------------------------------------------------------------
/hotelSite/index.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     margin: 0px;
  3 |     border: 0px;
  4 | }
  5 | 
  6 | 
  7 | /* homePage (CONTENT!!!) */
  8 | 
  9 | #tagContent {
 10 |     display: flex;
 11 |     margin-top: 1em;
 12 |     margin-left: 24em;
 13 | }
 14 | 
 15 | #tagContent fieldset {
 16 |     width: 12em;
 17 |     height: 38em;
 18 |     border: 2px solid #ececec;
 19 | }
 20 | 
 21 | 
 22 | /*tag connect start icon style */
 23 | 
 24 | #tagContent #startIcon {
 25 |     margin-top: 6em;
 26 |     margin-bottom: 2em;
 27 |     margin-left: 2em;
 28 | }
 29 | 
 30 | #tagContent #startIcon input {
 31 |     margin-left: 1.55em;
 32 | }
 33 | 
 34 | #tagContent #startIcon p {
 35 |     margin-top: 2em;
 36 | }
 37 | 
 38 | #homeContent fieldset {
 39 |     width: 64em;
 40 |     height: 38em;
 41 |     border: 2px solid #ececec;
 42 | }
 43 | 
 44 | 
 45 | /*---------------*/
 46 | 
 47 | #barTopAll {
 48 |     display: flex;
 49 | }
 50 | 
 51 | 
 52 | /*leftbar style */
 53 | 
 54 | 
 55 | /*leftbar style list*/
 56 | 
 57 | #leftBarTop {
 58 |     display: flex;
 59 |     margin-left: 1em;
 60 |     margin-top: 0.55em;
 61 | }
 62 | 
 63 | #tagClick a:hover {
 64 |     background-color: #f2f2f2;
 65 |     color: #3d4aff;
 66 | }
 67 | 
 68 | #tagClick ul {
 69 |     display: flex;
 70 | }
 71 | 
 72 | #tagClick ul li {
 73 |     list-style: none;
 74 |     margin-right: 1em;
 75 |     margin-top: 0.55em;
 76 |     font-size: 16px;
 77 | }
 78 | 
 79 | #tagClick a {
 80 |     text-decoration: none;
 81 |     color: #000000;
 82 | }
 83 | 
 84 | 
 85 | /*---------------------------*/
 86 | 
 87 | 
 88 | /*rightbar style*/
 89 | 
 90 | #rightBarTop {
 91 |     display: flex;
 92 |     margin-left: 38em;
 93 |     margin-top: 1em;
 94 | }
 95 | 
 96 | 
 97 | /*button add tag*/
 98 | 
 99 | #clickVenue {
100 |     width: 12em;
101 |     height: 3em;
102 |     margin-right: 1em;
103 |     border-radius: 0.65em;
104 |     font-size: 16px;
105 |     color: #ff3838;
106 |     border: 2px solid #ff3838;
107 |     background-color: #f2f2f2;
108 | }
109 | 
110 | #clickVenue:hover {
111 |     background-color: #ff3838;
112 |     color: #f2f2f2;
113 | }
114 | 
115 | 
116 | /*search country */
117 | 
118 | #countryName {
119 |     width: 8em;
120 |     height: 2em;
121 |     margin-left: 1em;
122 |     margin-right: 1em;
123 |     margin-top: 1em;
124 | }
125 | 
126 | 
127 | /*login */
128 | 
129 | #rightBarTop a {
130 |     text-decoration: none;
131 |     margin-left: 1em;
132 |     margin-right: 2em;
133 |     margin-top: 1em;
134 | }
135 | 
136 | 
137 | /*register new account.*/
138 | 
139 | #clickRegister {
140 |     width: 12em;
141 |     height: 3em;
142 |     margin-right: 1em;
143 |     border-radius: 0.65em;
144 |     font-size: 16px;
145 |     color: #3d4aff;
146 |     background-color: #f2f2f2;
147 |     border: 2px solid #3d4aff;
148 | }
149 | 
150 | #clickRegister:hover {
151 |     background-color: #3d4aff;
152 |     color: #f2f2f2;
153 | }
154 | 
155 | 
156 | /*---------------------------*/
157 | 
158 | 
159 | /*searc tag menu*/
160 | 
161 | #searchTag fieldset {
162 |     background-color: #000baa;
163 |     margin-top: 1em;
164 |     height: 4em;
165 |     border: 2px solid #000baa;
166 | }
167 | 
168 | 
169 | /*--------*/
170 | 
171 | #filteringTag fieldset {
172 |     height: 4em;
173 |     background-color: #d3d3d3;
174 |     display: flex;
175 | }
176 | 
177 | 
178 | /*love icon images */
179 | 
180 | #filteringTag img {
181 |     margin-top: 0.15em;
182 |     margin-left: 12em;
183 | }
184 | 
185 | #filteringTag fieldset ul {
186 |     margin-left: 21em;
187 |     display: flex;
188 | }
189 | 
190 | #filteringTag input {
191 |     border-radius: 0.45em;
192 |     width: 18em;
193 |     height: 3em;
194 |     margin-left: 1em;
195 | }
196 | 
197 | #filteringTag input::-webkit-input-placeholder {
198 |     color: #00065c;
199 |     text-align: start;
200 | }
201 | 
202 | #filteringTag ul li {
203 |     list-style: none;
204 |     margin-right: 1.5em;
205 | }
206 | 
207 | #filteringTag li img {
208 |     margin-left: 12em;
209 | }
210 | 
211 | #filteringTag .btn-filter {
212 |     width: 9em;
213 |     height: 3em;
214 |     border-radius: 1em;
215 |     background-color: #00065c;
216 |     color: #f2f2f2;
217 | }
218 | 
219 | #filteringTag .btn-filter:hover {
220 |     color: #00065c;
221 |     background-color: #f2f2f2;
222 |     border: 2px solid #00065c
223 | }
224 | 
225 | 
226 | /*-------------*/
227 | 
228 | 
229 | /*fieldset STYLE CONTENT */
230 | 
231 | #fieldsetContent1 {
232 |     display: flex;
233 | }
234 | 
235 | #fieldsetContent1 img {
236 |     margin-left: 2em;
237 |     margin-top: 1em;
238 | }
239 | 
240 | #fieldsetContent1 p {
241 |     font-size: 18px;
242 |     margin-left: 3.5em;
243 | }
244 | 
245 | #fieldsetContent1 fieldset {
246 |     width: 18em;
247 |     height: 21em;
248 |     margin-left: 1em;
249 |     margin-top: 1em;
250 | }
251 | 
252 | .btn-blue {
253 |     width: 8em;
254 |     height: 2em;
255 |     margin-left: 5.5em;
256 |     background-color: #3d4aff;
257 |     color: #f2f2f2;
258 |     font-size: 16px;
259 | }
260 | 
261 | .btn-blue:hover {
262 |     background-color: #f2f2f2;
263 |     color: #3d4aff;
264 | }
265 | 
266 | 
267 | /*horizontalFieldset*/
268 | 
269 | #horizontalFieldset fieldset {
270 |     margin-top: 1em;
271 |     width: 60em;
272 |     height: 12em;
273 |     margin-left: 1em;
274 | }
275 | 
276 | 
277 | /*-----------------*/


--------------------------------------------------------------------------------
/hotelSite/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <link rel="stylesheet" href="./index.css">
  9 |     <title>Home Page</title>
 10 | </head>
 11 | 
 12 | <body>
 13 |     <!--top right and left bar :)-->
 14 |     <div id="barTopAll">
 15 | 
 16 |         <div id="leftBarTop">
 17 |             <!--left bar flex -->
 18 |             <div id="logo-tag">
 19 |                 <h2>Nisancihotel.com</h2>
 20 |             </div>
 21 | 
 22 |             <div id="tagClick">
 23 |                 <ul>
 24 |                     <li> <a href="#accomodation">Accommodation</a> </li>
 25 |                     <li> <a href="#flights">Flights</a> </li>
 26 |                     <li> <a href="#airpotTransfer"> Airport transfer</a></li>
 27 |                     <li> <a href="#happyDays">Deals of the day</a> </li>
 28 |                 </ul>
 29 | 
 30 |             </div>
 31 | 
 32 |         </div>
 33 |         <!--right bar flex -->
 34 |         <div id="rightBarTop">
 35 |             <button id="clickVenue">Publish your venue</button>
 36 | 
 37 |             <select name="country" id="countryName">
 38 |         <option value="TR" >TURKEY </option>
 39 |         <option value="GER">GERMAN </option>
 40 |         <option value="US">AMERICA</option>
 41 | </select>
 42 |             <a href="#login">Login</a>
 43 |             <button id="clickRegister">Register</button>
 44 |         </div>
 45 | 
 46 |     </div>
 47 | 
 48 |     <!--search menu bar -->
 49 | 
 50 |     <div id="searchTag">
 51 |         <fieldset></fieldset>
 52 |     </div>
 53 | 
 54 | 
 55 |     <div id="filteringTag">
 56 |         <fieldset>
 57 | 
 58 |             <ul>
 59 | 
 60 |                 <li><button class="btn-filter">Price </button></li>
 61 |                 <li> <button class="btn-filter">Stars</button> </li>
 62 |                 <li> <button class="btn-filter">Facility facilities</button> </li>
 63 |                 <li><button class="btn-filter">Facility types</button> </li>
 64 |                 <li>
 65 |                     <a href="#search"><img src="https://img.icons8.com/material-outlined/32/000000/search.png" /></a>
 66 |                 </li>
 67 |                 <li><input id="search" type="search" placeholder="search text"> </li>
 68 | 
 69 |                 <li><img src="https://img.icons8.com/material-outlined/32/000000/filled-like.png" /></li>
 70 | 
 71 |             </ul>
 72 | 
 73 |         </fieldset>
 74 | 
 75 |     </div>
 76 | 
 77 | 
 78 |     <!--CONTENT DATA-->
 79 | 
 80 |     <div id="tagContent">
 81 | 
 82 |         <fieldset>
 83 |             <form action="#">
 84 |                 <div id="startIcon">
 85 |                     <p>5 Starts</p><input class="chechbox-syl" type="checkbox">
 86 |                     <p>4 Starts</p> <input class="chechbox-syl" type="checkbox">
 87 |                     <p>3 Starts</p> <input class="chechbox-syl" type="checkbox">
 88 |                     <p>2 Starts</p> <input class="chechbox-syl" type="checkbox">
 89 |                     <p>1 Starts</p> <input class="chechbox-syl" type="checkbox">
 90 |                 </div>
 91 |             </form>
 92 | 
 93 | 
 94 | 
 95 |         </fieldset>
 96 | 
 97 |         <div id="homeContent">
 98 | 
 99 | 
100 |             <fieldset>
101 | 
102 |                 <div id="fieldsetContent1">
103 | 
104 | 
105 |                     <fieldset>
106 | 
107 |                         <img src="https://www.tempohotels.com/cache/photos/otel/5b221dc484cee/CACHE_tempo_hotel_caglayan_W800_H800.jpg" alt="hotel1" width="210px" height="210px">
108 |                         <p>Tempo Hotels / İstanbul</p>
109 |                         <button class="btn-blue">go</button>
110 | 
111 |                     </fieldset>
112 | 
113 | 
114 |                     <fieldset>
115 | 
116 |                         <img src="https://pix10.agoda.net/hotelImages/124/1246280/1246280_16061017110043391702.jpg?s=1024x768" alt="hotel2" width="210px" height="210px">
117 |                         <p>L Hotel</p>
118 |                         <button class="btn-blue">go</button>
119 | 
120 |                     </fieldset>
121 | 
122 | 
123 |                     <fieldset>
124 | 
125 |                         <img src="https://media.radissonhotels.net/image/radisson-hotel-president-beyazit-istanbul/exteriorview/16256-128278-f70420109_3xl.jpg" alt="hotel3" width="210px" height="210px">
126 |                         <p>Radisson Hotels</p>
127 |                         <button class="btn-blue">go</button>
128 | 
129 |                     </fieldset>
130 | 
131 |                 </div>
132 | 
133 |                 <div id="horizontalFieldset">
134 | 
135 |                     <fieldset>
136 |                         <p><i>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo alias praesentium quasi esse odit minima odio, voluptatibus atque temporibus deleniti sequi soluta blanditiis sint ea. Dolores natus eaque hic doloremque sint vel in, perspiciatis reiciendis impedit vitae porro possimus eveniet libero voluptatum voluptate tenetur amet animi mollitia id. Accusantium autem reprehenderit, debitis natus expedita quam eum voluptatibus assumenda consequatur provident sed est accusamus culpa esse dolorum perspiciatis inventore et nesciunt magni dolores quibusdam fugit. Voluptas aut nam ad, culpa laboriosam error! Beatae, sint, eveniet fugit dolorum blanditiis consequatur delectus necessitatibus officia perferendis accusamus architecto! Corrupti accusamus ipsum veniam quia aliquam laboriosam officiis odit fugiat ullam. Eaque ratione veniam illum reiciendis assumenda, quis ducimus minus deleniti nihil odit aliquam, incidunt adipisci.</i></p>
137 |                     </fieldset>
138 | 
139 |                 </div>
140 | 
141 | 
142 |             </fieldset>
143 | 
144 |         </div>
145 | 
146 |     </div>
147 |     <!--------------->
148 | 
149 | </body>
150 | 
151 | </html>


--------------------------------------------------------------------------------