├── README.md ├── icon ├── close.png ├── menu.png ├── icons8-mail-100.png ├── facebook.svg ├── phone-solid.svg ├── youtube.svg ├── twitter.svg ├── whatsapp.svg ├── instagram.svg └── dribbble.svg ├── js ├── club.js ├── eve.js ├── gal.js ├── hotel.js ├── index.js ├── room.js ├── spa.js ├── dining.js └── book.js ├── html ├── book.html ├── club.html ├── spa.html ├── dining.html ├── hotel.html ├── eve.html ├── gal.html └── room.html ├── css ├── book.css ├── gal.css ├── club.css ├── room.css ├── index.css ├── hotel.css ├── eve.css ├── spa.css └── dining.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | "# beginner-hotel-site" 2 | -------------------------------------------------------------------------------- /icon/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Richard-Raph/beginner-hotel-site/HEAD/icon/close.png -------------------------------------------------------------------------------- /icon/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Richard-Raph/beginner-hotel-site/HEAD/icon/menu.png -------------------------------------------------------------------------------- /icon/icons8-mail-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Richard-Raph/beginner-hotel-site/HEAD/icon/icons8-mail-100.png -------------------------------------------------------------------------------- /js/club.js: -------------------------------------------------------------------------------- 1 | const menuToggle=document.querySelector('.toggle') 2 | const header=document.querySelector('.header') 3 | const menu=document.querySelector('.menu') 4 | menuToggle.addEventListener('click', ()=> { 5 | menuToggle.classList.toggle('active') 6 | header.classList.toggle('active') 7 | menu.classList.toggle('active') 8 | }); 9 | -------------------------------------------------------------------------------- /js/eve.js: -------------------------------------------------------------------------------- 1 | const menuToggle=document.querySelector('.toggle') 2 | const header=document.querySelector('.header') 3 | const menu=document.querySelector('.menu') 4 | menuToggle.addEventListener('click', ()=> { 5 | menuToggle.classList.toggle('active') 6 | header.classList.toggle('active') 7 | menu.classList.toggle('active') 8 | }); 9 | -------------------------------------------------------------------------------- /js/gal.js: -------------------------------------------------------------------------------- 1 | const menuToggle=document.querySelector('.toggle') 2 | const header=document.querySelector('.header') 3 | const menu=document.querySelector('.menu') 4 | menuToggle.addEventListener('click', ()=> { 5 | menuToggle.classList.toggle('active') 6 | header.classList.toggle('active') 7 | menu.classList.toggle('active') 8 | }); 9 | -------------------------------------------------------------------------------- /js/hotel.js: -------------------------------------------------------------------------------- 1 | const menuToggle=document.querySelector('.toggle') 2 | const header=document.querySelector('.header') 3 | const menu=document.querySelector('.menu') 4 | menuToggle.addEventListener('click', ()=> { 5 | menuToggle.classList.toggle('active') 6 | header.classList.toggle('active') 7 | menu.classList.toggle('active') 8 | }); 9 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | const menuToggle=document.querySelector('.toggle') 2 | const header=document.querySelector('.header') 3 | const menu=document.querySelector('.menu') 4 | menuToggle.addEventListener('click', ()=> { 5 | menuToggle.classList.toggle('active') 6 | header.classList.toggle('active') 7 | menu.classList.toggle('active') 8 | }); 9 | -------------------------------------------------------------------------------- /js/room.js: -------------------------------------------------------------------------------- 1 | const menuToggle=document.querySelector('.toggle') 2 | const header=document.querySelector('.header') 3 | const menu=document.querySelector('.menu') 4 | menuToggle.addEventListener('click', ()=> { 5 | menuToggle.classList.toggle('active') 6 | header.classList.toggle('active') 7 | menu.classList.toggle('active') 8 | }); 9 | -------------------------------------------------------------------------------- /js/spa.js: -------------------------------------------------------------------------------- 1 | const menuToggle=document.querySelector('.toggle') 2 | const header=document.querySelector('.header') 3 | const menu=document.querySelector('.menu') 4 | menuToggle.addEventListener('click', ()=> { 5 | menuToggle.classList.toggle('active') 6 | header.classList.toggle('active') 7 | menu.classList.toggle('active') 8 | }); 9 | -------------------------------------------------------------------------------- /js/dining.js: -------------------------------------------------------------------------------- 1 | const menuToggle=document.querySelector('.toggle') 2 | const header=document.querySelector('.header') 3 | const menu=document.querySelector('.menu') 4 | menuToggle.addEventListener('click', ()=> { 5 | menuToggle.classList.toggle('active') 6 | header.classList.toggle('active') 7 | menu.classList.toggle('active') 8 | }); 9 | -------------------------------------------------------------------------------- /icon/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icon/phone-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icon/youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icon/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icon/whatsapp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icon/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icon/dribbble.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/book.js: -------------------------------------------------------------------------------- 1 | var x, i, j, l, ll, setElement, a, b, c; 2 | 3 | x = document.getElementsByClassName("custom-select") 4 | l = x.length; 5 | for (i = 0; i < l; i++) { 6 | setElement = x[i].getElementsByTagName("select")[0]; 7 | ll = setElement.length; 8 | a = document.createElement("DIV"); 9 | a.setAttribute("class", "select-selected"); 10 | a.innerHTML = setElement.options[setElement.selectedIndex].innerHTML; 11 | x[i].appendChild(a); 12 | b = document.createElement("DIV"); 13 | b.setAttribute("class", "select-items select-hide"); 14 | for (j = 0; j < ll; j++) { 15 | c = document.createElement("DIV"); 16 | c.innerHTML = setElement.options[j].innerHTML; 17 | c.addEventListener("click", function(e){ 18 | var y, i, k, s, h, sl, yl; 19 | s = this.parentNode.parentNode.getElementsByTagName("select")[0]; 20 | sl = s.length; 21 | h = this.parentNode.previousSibling; 22 | for (i = 0; i < sl; i++) { 23 | if (s.options[i].innerHTML == this.innerHTML) { 24 | s.selectedIndex = i; 25 | h.innerHTML = this.innerHTML; 26 | y = this.parentNode.getElementsByClassName("same-as-selected"); 27 | yl = y.length; 28 | for (k = 0; k < yl; k++) { 29 | y[k].removeAttribute("class"); 30 | } 31 | this.setAttribute("class", "same-as-selected"); 32 | break; 33 | } 34 | } 35 | h.click(); 36 | }); 37 | b.appendChild(c); 38 | } 39 | x[i].appendChild(b); 40 | a.addEventListener("click", function(e){ 41 | e.stopPropagation(); 42 | closeAllSelect(this); 43 | 44 | this.nextSibling.classList.toggle("select-hide"); 45 | this.classList.toggle("select-arrow-active"); 46 | }); 47 | } 48 | 49 | function closeAllSelect(element) { 50 | var x, y, i, xl, yl, arrNo = []; 51 | x = document.getElementsByClassName("select-items"); 52 | y = document.getElementsByClassName("select-selected"); 53 | xl = x.length; 54 | yl = y.length; 55 | for (i = 0; i < yl; i++) { 56 | if (element == y[i]) { 57 | arrNo.push(i) 58 | } 59 | else{ 60 | y[i].classList.remove("select-arrow-active"); 61 | } 62 | } 63 | for (i = 0; i < xl; i++) { 64 | if (arrNo.indexOf(i)) { 65 | x[i].classList.add("select-hide"); 66 | } 67 | } 68 | } 69 | 70 | document.addEventListener("click", closeAllSelect); 71 | var x, y, i, xl, yl, arrNo = []; 72 | x = document.getElementsByClassName("select-items"); 73 | y = document.getElementsByClassName("select-selected"); 74 | xl = x.length; 75 | yl = y.length; 76 | for (i = 0; i < yl; i++) { 77 | if (element === y[i]) { 78 | arrNo.push(i) 79 | } 80 | else{ 81 | y[i].classList.remove("select-arrow-active"); 82 | } 83 | } 84 | 85 | const spots = document.querySelector("button"); 86 | 87 | spots.addEventListener('click', ()=> { 88 | alert("Confirm Resrvation"); 89 | alert("We've reserved a spot for you at Tonia's Food_Hub"); 90 | }); -------------------------------------------------------------------------------- /html/book.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Book Your Stay 9 | 10 | 11 | 12 | 21 | 22 | 23 |
24 |
25 |

Book your stay

26 |
27 |
28 |

Check in

29 |

Fri

30 |

10

31 |

May 2023

32 |
33 |
34 |

Check out

35 |

Fri

36 |

12

37 |

May 2023

38 |
39 |
40 |
41 |
42 |

Adults

43 |
44 | 51 |
52 |
53 |
54 |

Children

55 |
56 | 63 |
64 |
65 |
66 |

Rooms

67 |
68 | 75 |
76 |
77 |
78 |
79 | 80 |
81 |
82 |
83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /css/book.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | font-family: cursive; 5 | padding: 0; 6 | box-sizing: border-box; 7 | outline: none; 8 | scroll-behavior: smooth; 9 | border: none; 10 | text-decoration: none; 11 | transition: all .2s linear; 12 | } 13 | 14 | body{ 15 | padding: 8rem 4% 2rem; 16 | background: #4298ad; 17 | } 18 | 19 | .logo{ 20 | font-family: cursive; 21 | font-style: italic; 22 | font-size: 20px; 23 | letter-spacing: 4px; 24 | position: fixed; 25 | font-family: cursive; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | color: #fff; 30 | display: block; 31 | box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); 32 | } 33 | .logo h1,p{ 34 | margin-left: 40%; 35 | } 36 | .book button{ 37 | background: #fff; 38 | width: 60px; 39 | height: 30px; 40 | } 41 | .book button a{ 42 | color: grey; 43 | } 44 | .book button:hover{ 45 | transform: none; 46 | } 47 | .body h2{ 48 | text-align: center; 49 | font-size: 30px; 50 | text-transform: uppercase; 51 | } 52 | .body-container{ 53 | display: flex; 54 | justify-content: center; 55 | align-items: center; 56 | margin-top: 10px; 57 | gap: 2rem; 58 | } 59 | .body-container .box{ 60 | background: transparent; 61 | text-align: center; 62 | border: 2px solid #000; 63 | transition: .5s ease; 64 | height: 30vh; 65 | width: 20%; 66 | } 67 | .body-container .box h4{ 68 | padding: 20px; 69 | text-transform: uppercase; 70 | text-decoration: underline; 71 | } 72 | .container .box p{ 73 | text-transform: uppercase; 74 | font-weight: bolder; 75 | } 76 | .container{ 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | margin-top: 20px; 81 | gap: 2rem; 82 | } 83 | .container .box{ 84 | background: transparent; 85 | text-align: center; 86 | border: 2px solid #000; 87 | transition: .5s ease; 88 | height: 10vh; 89 | width: 20%; 90 | } 91 | .custom-select{ 92 | font-size: 20px; 93 | font-weight: 200; 94 | position: relative; 95 | font-family: Arial, Helvetica, sans-serif; 96 | } 97 | .custom-select select{ 98 | display: none; 99 | } 100 | .select-selected{ 101 | height: 25px; 102 | } 103 | .select-selected:after{ 104 | position: absolute; 105 | content: ""; 106 | top: 14px; 107 | right: 10px; 108 | width: 0; 109 | height: 0; 110 | border: 6px solid transparent; 111 | border-color: transparent transparent transparent; 112 | } 113 | .select-selected .select-arrow-active:after{ 114 | border-color: transparent; 115 | top: 7px; 116 | } 117 | .select-items div, .select-selected{ 118 | padding: 8px 16px; 119 | border: 1px solid transparent; 120 | border-color: transparent; 121 | cursor: pointer; 122 | } 123 | .select-items{ 124 | position: absolute; 125 | top: 100%; 126 | left: 0; 127 | right: 0; 128 | z-index: 99; 129 | } 130 | .select-hide{ 131 | display: none; 132 | } 133 | .btn{ 134 | text-align: center; 135 | margin-top: 20px; 136 | } 137 | .btn button{ 138 | width: 30%; 139 | height: 10vh; 140 | color: #fff; 141 | font-size: 30px; 142 | border-radius: 20px; 143 | background: #012933; 144 | border: 1px solid transparent; 145 | } 146 | @media(max-width: 1280px){ 147 | .logo p{ 148 | margin-left: 40%; 149 | } 150 | p{ 151 | margin-left: 0; 152 | } 153 | } 154 | @media(max-width: 1024px){ 155 | body{ 156 | padding: 5rem 4% 0rem; 157 | } 158 | } 159 | @media(max-width: 768px){ 160 | .logo p, .logo h1{ 161 | margin-left: 30%; 162 | } 163 | .body-content{ 164 | margin-top: 20%; 165 | } 166 | .body-container .box{ 167 | width: 40%; 168 | height: 20vh; 169 | } 170 | p{ 171 | margin-left: 0; 172 | } 173 | } 174 | @media(max-width: 375px){ 175 | body{ 176 | padding: 6rem 0% 0rem; 177 | } 178 | .body-container .box{ 179 | height: 22vh; 180 | } 181 | .logo{ 182 | font-size: 15px; 183 | } 184 | .logo p, .logo h1{ 185 | margin-left: 20%; 186 | } 187 | } -------------------------------------------------------------------------------- /html/club.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | The Kid's Club 9 | 10 | 11 | 12 | 40 | 41 | 63 | 64 |
65 |
66 |

The Kid's Fun Corner

67 |
68 |
69 | 70 |
71 |
72 |

Crafts, costumes, games, storytelling, cartoons and so much more... Our Kid's Club is the best corner for your children to be creative and inventive, always inspired by the atmosphere of the island, where the surroundings will help them to explore and let their imagination run wild.

73 |
74 |
75 |
76 | 77 |
78 |
79 | 80 |
81 |
82 |

Stay up to date

83 |
84 |

Get our emails, letters from our five stars hotel, news about De Akpans, offers, and much more. Not too often - just enough.

85 |
86 |
87 |
88 |
89 |
90 | 91 | 92 |
93 |
94 | 95 | 96 |
97 |
98 | 99 |
100 |
101 | Sign Up 102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 | 110 | 146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | De Akpans Hotel 9 | 10 | 11 | 12 | 13 | 14 | 15 | 66 | 67 | 70 | 71 | 93 | 94 | 95 | 96 | 97 | 98 |
99 |
100 |

DE AKPANS HOTEL

101 |
102 |

Welcome To De Akpans

103 |

104 | A 5-star, family-run hotel located in Lagos State on the scenic backdrop of the victoria island & Aso rock. Relax in our stunning gardens, wine & dine in the atmospheric Fara's bar or soak up the hospitality in our traditional bush bar, the Thirsty Oasis. 105 |

106 |

107 | We offer a mix of over 200 traditional and executive rooms, cottages, suites and Leisure Centre with a 32 metre heated indoor and an outdoor swimming pool and gym. 108 |

109 |

110 | Located in the heart of Lagos State, just off the N11 pole, We are the perfect central base for a visit to Lagos State and the Atlantic way. We are conveniently based just 2hrs from the airport and 55 minutes from the town square. 111 |

112 |
113 |
114 |
115 |
116 |

Stay up to date

117 |
118 |

Get our emails, letters from our five stars hotel, news about De Akpans, offers, and much more. Not too often - just enough.

119 |
120 |
121 |
122 |
123 |
124 | 125 | 126 |
127 |
128 | 129 | 130 |
131 |
132 | 133 |
134 |
135 | Sign Up 136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 | 144 | 180 | 181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /css/gal.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | font-family: cursive; 5 | padding: 0; 6 | box-sizing: border-box; 7 | outline: none; 8 | scroll-behavior: smooth; 9 | border: none; 10 | text-decoration: none; 11 | transition: all .2s linear; 12 | } 13 | 14 | button:hover{ 15 | transform: scaleX(1.1); 16 | transition: 0.8s; 17 | } 18 | body{ 19 | background-color: #2c3e50; 20 | overflow-x: hidden; 21 | color: #fff; 22 | } 23 | 24 | .header{ 25 | position: absolute; 26 | right: 0; 27 | width: 100%; 28 | height: 100vh; 29 | overflow: hidden; 30 | background: #111; 31 | z-index: 2; 32 | transition: 0.8s; 33 | } 34 | .toggle{ 35 | position: relative; 36 | width: 50px; 37 | height: 50px; 38 | background: url('../icon/menu.png'); 39 | filter: invert(1); 40 | background-repeat: no-repeat; 41 | background-size: 20px; 42 | background-position: center; 43 | cursor: pointer; 44 | } 45 | .toggle.active{ 46 | background: url('../icon/close.png'); 47 | background-repeat: no-repeat; 48 | margin-left: 95%; 49 | background-size: 25px; 50 | background-position: center; 51 | } 52 | .header.active{ 53 | position: absolute; 54 | right: 100%; 55 | } 56 | .head{ 57 | position: fixed; 58 | top: 0; 59 | left: 0; 60 | width: 100%; 61 | padding: 20px 50px; 62 | z-index: 5; 63 | display: flex; 64 | align-items: center; 65 | justify-content: space-between; 66 | } 67 | #img{ 68 | width: 100%; 69 | height: 100vh; 70 | position: absolute; 71 | left: 50%; 72 | top: 50%; 73 | transform: translate(-50%,-50%); 74 | } 75 | .text-box{ 76 | width: 500px; 77 | position: absolute; 78 | top: 250px; 79 | left: 5%; 80 | color: #fff; 81 | transform: translateY(100px); 82 | } 83 | .text-box h1{ 84 | margin-bottom: 40px; 85 | letter-spacing: 3px; 86 | } 87 | .text-box p{ 88 | font-size: 30px; 89 | letter-spacing: 3px; 90 | } 91 | .text-box span{ 92 | background: #fff; 93 | margin-top: 10px; 94 | height: 1px; 95 | width: 30%; 96 | position: absolute; 97 | left: 0; 98 | } 99 | .top{ 100 | position: fixed; 101 | align-items: center; 102 | top: 0; 103 | left: 0; 104 | width: 100%; 105 | color: #fff; 106 | display: flex; 107 | box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); 108 | z-index: 3; 109 | transition: 0s; 110 | } 111 | .logo{ 112 | font-family: cursive; 113 | letter-spacing: 4px; 114 | font-style: italic; 115 | margin-left: 40%; 116 | font-size: 20px; 117 | z-index: 10; 118 | } 119 | .top .book{ 120 | z-index: 10; 121 | margin-left: 20%; 122 | } 123 | .book button{ 124 | background: #fff; 125 | width: 60px; 126 | height: 30px; 127 | } 128 | .book button a{ 129 | color: grey; 130 | } 131 | .book button:hover{ 132 | transform: none; 133 | } 134 | 135 | 136 | .menu{ 137 | padding: 5rem 5% 2rem; 138 | width: 100%; 139 | height: 100vh; 140 | top: 0px; 141 | z-index: 1; 142 | background: #4298ad; 143 | } 144 | .menu.active{ 145 | position: fixed; 146 | } 147 | .luck ul li, .hater ul li{ 148 | list-style: none; 149 | } 150 | .luck ul li a{ 151 | text-decoration: none; 152 | line-height: 2; 153 | letter-spacing: 3px; 154 | font-size: 24px; 155 | color: #fff; 156 | } 157 | .hater{ 158 | display: block; 159 | margin-top: 50px; 160 | } 161 | .hater ul li a{ 162 | text-decoration: none; 163 | color: #fff; 164 | letter-spacing: 3px; 165 | line-height: 2; 166 | } 167 | 168 | .galt{ 169 | width: 100%; 170 | height: auto; 171 | padding: 7rem 3% 2rem; 172 | } 173 | .galt h2{ 174 | font-size: 40px; 175 | font-style: italic; 176 | text-align: center; 177 | letter-spacing: 5px; 178 | margin-bottom: 100px; 179 | font-weight: lighter; 180 | } 181 | .galt-img{ 182 | margin-bottom: 100px; 183 | display: flex; 184 | } 185 | .iigan{ 186 | width: 100%; 187 | text-align: center; 188 | } 189 | .iigan img{ 190 | height: 60vh; 191 | width: 95%; 192 | object-fit: cover; 193 | } 194 | .iigan p{ 195 | letter-spacing: 2px; 196 | font-style: italic; 197 | text-align: left; 198 | font-size: 20px; 199 | margin-left: 2%; 200 | } 201 | .sigtion{ 202 | height: auto; 203 | width: 100%; 204 | background: #4298ad; 205 | } 206 | .diseg h3{ 207 | font-size: 30px; 208 | margin-top: 10%; 209 | margin-left: 30px; 210 | padding: 10px; 211 | font-weight: lighter; 212 | } 213 | .sig{ 214 | width: 40%; 215 | margin-left: 30px; 216 | margin-top: 30px; 217 | } 218 | .form-box{ 219 | width: 400px; 220 | height: 400px; 221 | background: transparent; 222 | display: flex; 223 | justify-content: center; 224 | align-items: center; 225 | } 226 | .inputbox{ 227 | position: relative; 228 | margin: 30px 0; 229 | width: 310px; 230 | border-bottom: 2px solid #fff; 231 | } 232 | .inputbox label{ 233 | position: absolute; 234 | top: 50%; 235 | left: 5px; 236 | transform: translateY(-50%); 237 | color: #fff; 238 | font-size: 1em; 239 | pointer-events: none; 240 | transition: -5s; 241 | } 242 | input:focus ~ label, 243 | input:valid ~ label{ 244 | top: -5px; 245 | transition: .5s; 246 | } 247 | .inputbox input{ 248 | width: 100%; 249 | height: 50px; 250 | background: transparent; 251 | border: none; 252 | outline: none; 253 | font-size: 1em; 254 | padding: 0 35px 0 5px; 255 | color: #fff; 256 | } 257 | .inputbox img{ 258 | position: absolute; 259 | right: 8px; 260 | top: 20px; 261 | width: 30px; 262 | height: 30px; 263 | } 264 | .forget{ 265 | margin: -15px 0 15px; 266 | font-size: .9em; 267 | color: #fff; 268 | display: flex; 269 | justify-content: center; 270 | } 271 | .forget label input{ 272 | margin-right: 3px; 273 | } 274 | .re{ 275 | background-color: #fff; 276 | text-align: center; 277 | padding: 15px; 278 | border: 1px solid #fff; 279 | border-radius: 20px; 280 | } 281 | .re a{ 282 | text-decoration: none; 283 | color: #000; 284 | text-transform: capitalize; 285 | } 286 | .footer{ 287 | background: #fff; 288 | color: #2c3e50; 289 | height: auto; 290 | width: 100%; 291 | } 292 | .footer img{ 293 | height: 20px; 294 | width: 20px; 295 | } 296 | .content{ 297 | padding: 5rem 7% 3rem; 298 | } 299 | .tags{ 300 | line-height: 2; 301 | text-align: center; 302 | } 303 | .tags a{ 304 | color: #4298ad; 305 | display: block; 306 | font-size: 20px; 307 | letter-spacing: 3px; 308 | } 309 | .social{ 310 | text-align: center; 311 | } 312 | .social img{ 313 | margin: 2rem 3% 2rem; 314 | } 315 | .right{ 316 | text-align: center; 317 | } 318 | .right p{ 319 | letter-spacing: 3px; 320 | font-size: 20px; 321 | } 322 | .bttn{ 323 | display: block; 324 | margin-top: 30px; 325 | } 326 | .bttn .bty{ 327 | width: 100%; 328 | display: flex; 329 | padding: 20px; 330 | margin-top: 30px; 331 | border: 2px solid #000; 332 | } 333 | .bttn .bty img{ 334 | margin-left: 45%; 335 | } 336 | .bttn .bty p{ 337 | margin-left: 1%; 338 | } 339 | 340 | @media (max-width: 1280px) { 341 | .menu{ 342 | padding: 10rem 9% 2rem; 343 | } 344 | .logo{ 345 | margin-left: 30%; 346 | } 347 | .text-box{ 348 | top: 400px; 349 | left: 5%; 350 | } 351 | } 352 | @media (max-width: 1024px) { 353 | .menu{ 354 | padding: 4rem 3% 2rem; 355 | } 356 | .logo{ 357 | font-size: 15px; 358 | } 359 | .text-box{ 360 | top: 250px; 361 | } 362 | .head{ 363 | padding: 10px 50px; 364 | } 365 | } 366 | @media (max-width: 768px) { 367 | .top{ 368 | height: 10%; 369 | } 370 | .top .book{ 371 | margin-left: 15%; 372 | } 373 | .logo{ 374 | margin-left: 25%; 375 | } 376 | .toggle.active{ 377 | margin-left: 96%; 378 | background-size: 30px; 379 | } 380 | .menu{ 381 | padding: 15rem 9% 2rem; 382 | } 383 | .iigan, .iigan p{ 384 | margin-bottom: 100px; 385 | margin-left: 0; 386 | } 387 | .iiga img, .iigan img, .iigane img{ 388 | height: 40vh; 389 | width: 100%; 390 | } 391 | .head{ 392 | padding: 25px 50px; 393 | } 394 | .text-box{ 395 | top: 600px; 396 | } 397 | .galt-img{ 398 | display: block; 399 | } 400 | } 401 | @media(max-width: 375px){ 402 | .logo{ 403 | letter-spacing: 2px; 404 | margin-left: 15%; 405 | font-size: 10px; 406 | } 407 | .top .book{ 408 | margin-left: 10%; 409 | font-size: 10px; 410 | } 411 | .book button{ 412 | height: 25px; 413 | } 414 | .menu{ 415 | padding: 6rem 5% 0rem; 416 | } 417 | .head{ 418 | padding: 6px 0px; 419 | } 420 | .toggle.active{ 421 | margin-left: 90%; 422 | background-size: 25px; 423 | } 424 | .text-box{ 425 | top: 300px; 426 | width: 300px; 427 | } 428 | .form-box{ 429 | width: 350px; 430 | } 431 | } -------------------------------------------------------------------------------- /css/club.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | font-family: cursive; 5 | padding: 0; 6 | box-sizing: border-box; 7 | outline: none; 8 | scroll-behavior: smooth; 9 | border: none; 10 | text-decoration: none; 11 | transition: all .2s linear; 12 | } 13 | 14 | body{ 15 | background-color: #2c3e50; 16 | overflow-x: hidden; 17 | color: #fff; 18 | } 19 | 20 | .header{ 21 | position: absolute; 22 | right: 0; 23 | width: 100%; 24 | height: 100vh; 25 | overflow: hidden; 26 | background: #111; 27 | z-index: 2; 28 | transition: 0.8s; 29 | } 30 | .toggle{ 31 | position: relative; 32 | width: 50px; 33 | height: 50px; 34 | background: url('../icon/menu.png'); 35 | filter: invert(1); 36 | background-repeat: no-repeat; 37 | background-size: 20px; 38 | background-position: center; 39 | cursor: pointer; 40 | } 41 | .toggle.active{ 42 | background: url('../icon/close.png'); 43 | background-repeat: no-repeat; 44 | margin-left: 95%; 45 | background-size: 25px; 46 | background-position: center; 47 | } 48 | .header.active{ 49 | position: absolute; 50 | right: 100%; 51 | } 52 | .head{ 53 | position: fixed; 54 | top: 0; 55 | left: 0; 56 | width: 100%; 57 | padding: 20px 50px; 58 | z-index: 5; 59 | display: flex; 60 | align-items: center; 61 | justify-content: space-between; 62 | } 63 | #img{ 64 | width: 100%; 65 | height: 100vh; 66 | position: absolute; 67 | left: 50%; 68 | top: 50%; 69 | transform: translate(-50%,-50%); 70 | } 71 | .text-box{ 72 | width: 400px; 73 | position: absolute; 74 | top: 250px; 75 | left: 5%; 76 | color: #fff; 77 | transform: translateY(100px); 78 | } 79 | .text-box h1{ 80 | margin-bottom: 40px; 81 | letter-spacing: 3px; 82 | } 83 | .text-box p{ 84 | font-size: 30px; 85 | letter-spacing: 3px; 86 | } 87 | .text-box span{ 88 | background: #fff; 89 | margin-top: 10px; 90 | height: 1px; 91 | width: 30%; 92 | position: absolute; 93 | left: 0; 94 | } 95 | .top{ 96 | position: fixed; 97 | align-items: center; 98 | top: 0; 99 | left: 0; 100 | width: 100%; 101 | color: #fff; 102 | display: flex; 103 | box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); 104 | z-index: 3; 105 | transition: 0s; 106 | } 107 | .logo{ 108 | font-family: cursive; 109 | letter-spacing: 4px; 110 | font-style: italic; 111 | margin-left: 40%; 112 | font-size: 20px; 113 | z-index: 10; 114 | } 115 | .top .book{ 116 | z-index: 10; 117 | margin-left: 20%; 118 | } 119 | .book button{ 120 | background: #fff; 121 | width: 60px; 122 | height: 30px; 123 | } 124 | .book button a{ 125 | color: grey; 126 | } 127 | .book button:hover{ 128 | transform: none; 129 | } 130 | 131 | 132 | .menu{ 133 | padding: 5rem 5% 2rem; 134 | width: 100%; 135 | height: 100vh; 136 | top: 0px; 137 | z-index: 1; 138 | background: #4298ad; 139 | } 140 | .menu.active{ 141 | position: fixed; 142 | } 143 | .luck ul li, .hater ul li{ 144 | list-style: none; 145 | } 146 | .luck ul li a{ 147 | text-decoration: none; 148 | line-height: 2; 149 | letter-spacing: 3px; 150 | font-size: 24px; 151 | color: #fff; 152 | } 153 | .hater{ 154 | display: block; 155 | margin-top: 50px; 156 | } 157 | .hater ul li a{ 158 | text-decoration: none; 159 | letter-spacing: 3px; 160 | color: #fff; 161 | line-height: 2; 162 | } 163 | 164 | .body{ 165 | padding: 5rem 3% 2rem; 166 | } 167 | .iigan, .iiga{ 168 | width: 100%; 169 | } 170 | .iigan img{ 171 | height: 60vh; 172 | width: 80%; 173 | object-fit: cover; 174 | } 175 | .iiga img{ 176 | height: 60vh; 177 | width: 100%; 178 | margin-top: 10%; 179 | object-fit: cover; 180 | } 181 | .body-contain{ 182 | display: flex; 183 | align-items: center; 184 | } 185 | .body-text{ 186 | width: 50%; 187 | margin-right: 10%; 188 | text-align: center; 189 | } 190 | .body-text p{ 191 | line-height: 2; 192 | letter-spacing: 3px; 193 | } 194 | .body-content h3{ 195 | width: 30%; 196 | font-size: 30px; 197 | margin-left: 56%; 198 | text-align: center; 199 | font-weight: lighter; 200 | letter-spacing: 3px; 201 | text-transform: uppercase; 202 | } 203 | .sigtion{ 204 | height: auto; 205 | width: 100%; 206 | color: #fff; 207 | background: #4298ad; 208 | } 209 | .diseg h3{ 210 | font-size: 30px; 211 | margin-top: 10%; 212 | margin-left: 30px; 213 | padding: 10px; 214 | font-weight: lighter; 215 | } 216 | .sig{ 217 | width: 40%; 218 | margin-left: 30px; 219 | margin-top: 30px; 220 | } 221 | .form-box{ 222 | width: 400px; 223 | height: 400px; 224 | background: transparent; 225 | display: flex; 226 | justify-content: center; 227 | align-items: center; 228 | 229 | } 230 | .inputbox{ 231 | position: relative; 232 | margin: 30px 0; 233 | width: 310px; 234 | border-bottom: 2px solid #fff; 235 | } 236 | .inputbox label{ 237 | position: absolute; 238 | top: 50%; 239 | left: 5px; 240 | transform: translateY(-50%); 241 | color: #fff; 242 | font-size: 1em; 243 | pointer-events: none; 244 | transition: -5s; 245 | } 246 | input:focus ~ label, 247 | input:valid ~ label{ 248 | top: -5px; 249 | transition: .5s; 250 | } 251 | .inputbox input{ 252 | width: 100%; 253 | height: 50px; 254 | background: transparent; 255 | border: none; 256 | outline: none; 257 | font-size: 1em; 258 | padding: 0 35px 0 5px; 259 | color: #fff; 260 | } 261 | .inputbox img{ 262 | position: absolute; 263 | right: 8px; 264 | top: 20px; 265 | width: 30px; 266 | height: 30px; 267 | } 268 | .forget{ 269 | margin: -15px 0 15px; 270 | font-size: .9em; 271 | color: #fff; 272 | display: flex; 273 | justify-content: center; 274 | } 275 | .forget label input{ 276 | margin-right: 3px; 277 | } 278 | .re{ 279 | background-color: #fff; 280 | text-align: center; 281 | padding: 15px; 282 | border: 1px solid #fff; 283 | border-radius: 20px; 284 | } 285 | .re a{ 286 | text-decoration: none; 287 | color: #000; 288 | text-transform: capitalize; 289 | } 290 | .footer{ 291 | background: #fff; 292 | color: #2c3e50; 293 | height: auto; 294 | width: 100%; 295 | } 296 | .footer img{ 297 | height: 20px; 298 | width: 20px; 299 | } 300 | .content{ 301 | padding: 5rem 7% 3rem; 302 | } 303 | .tags{ 304 | line-height: 2; 305 | text-align: center; 306 | } 307 | .tags a{ 308 | color: #4298ad; 309 | display: block; 310 | font-size: 20px; 311 | letter-spacing: 3px; 312 | } 313 | .social{ 314 | text-align: center; 315 | } 316 | .social img{ 317 | margin: 2rem 3% 2rem; 318 | } 319 | .right{ 320 | text-align: center; 321 | } 322 | .right p{ 323 | letter-spacing: 3px; 324 | font-size: 20px; 325 | } 326 | .bttn{ 327 | display: block; 328 | margin-top: 30px; 329 | } 330 | .bttn .bty{ 331 | width: 100%; 332 | display: flex; 333 | padding: 20px; 334 | margin-top: 30px; 335 | border: 2px solid #000; 336 | } 337 | .bttn .bty img{ 338 | margin-left: 45%; 339 | } 340 | .bttn .bty p{ 341 | margin-left: 1%; 342 | } 343 | 344 | @media (max-width: 1280px) { 345 | .menu{ 346 | padding: 10rem 9% 2rem; 347 | } 348 | .logo{ 349 | margin-left: 30%; 350 | } 351 | .text-box{ 352 | top: 400px; 353 | left: 5%; 354 | } 355 | } 356 | @media (max-width: 1024px) { 357 | .menu{ 358 | padding: 4rem 3% 2rem; 359 | } 360 | .logo{ 361 | font-size: 15px; 362 | } 363 | .text-box{ 364 | top: 250px; 365 | } 366 | .head{ 367 | padding: 10px 50px; 368 | } 369 | } 370 | @media (max-width: 768px) { 371 | .top{ 372 | height: 10%; 373 | } 374 | .top .book{ 375 | margin-left: 15%; 376 | } 377 | .logo{ 378 | margin-left: 25%; 379 | } 380 | .toggle.active{ 381 | margin-left: 96%; 382 | background-size: 30px; 383 | } 384 | .menu{ 385 | padding: 15rem 9% 2rem; 386 | } 387 | .iiga img, .iigan img, .iigane img{ 388 | height: 40vh; 389 | width: 100%; 390 | } 391 | .head{ 392 | padding: 25px 50px; 393 | } 394 | .text-box{ 395 | top: 600px; 396 | } 397 | .body-content h3{ 398 | margin-bottom: 30px; 399 | margin-left: 0; 400 | width: 100%; 401 | } 402 | .body-contain{ 403 | display: block; 404 | } 405 | .body-text{ 406 | margin-top: 30px; 407 | margin-right: 0; 408 | width: 100%; 409 | } 410 | } 411 | @media(max-width: 375px){ 412 | .logo{ 413 | letter-spacing: 2px; 414 | margin-left: 15%; 415 | font-size: 10px; 416 | } 417 | .top .book{ 418 | margin-left: 10%; 419 | font-size: 10px; 420 | } 421 | .book button{ 422 | height: 25px; 423 | } 424 | .menu{ 425 | padding: 6rem 5% 0rem; 426 | } 427 | .head{ 428 | padding: 6px 0px; 429 | } 430 | .toggle.active{ 431 | margin-left: 90%; 432 | background-size: 25px; 433 | } 434 | .text-box{ 435 | top: 300px; 436 | width: 300px; 437 | } 438 | .form-box{ 439 | width: 350px; 440 | } 441 | } -------------------------------------------------------------------------------- /html/spa.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Librisa Spa 9 | 10 | 11 | 12 | 40 | 41 | 63 | 64 |
65 |
66 |
67 |

LIBRISA SPA

68 | 69 |
70 |
71 |
72 |

Plan a visit to the best luxury spa Cape Town has to offer. Pick an indulgent therapy and step into treatment rooms designed to promote complete relaxation, After, unwind with a steam in our exquisite Finnish suanna. Little ones in tow? Drop them off at our Kid's club free of charge.

73 |
74 |
75 | 76 |
77 |
78 |
79 |
80 |

DETAILS

81 |
82 |
83 |
84 |
85 |

BLISS PACKAGE

86 | 87 |
88 |
89 | 90 |
91 |
92 |

Treat yourself to the ultimate indulgence, an afternoon of pampering at De Akpans

93 |

Soothe your mind, body and soul starting with a 60-minute sweddish massage designed to improve circulation and relax your muscles.

94 |
95 |
96 |
97 |

OUR PRODUCTS

98 |
99 |

Capturing the essence of the yoruba

100 |

We give guests an authentic african spa experience, using sublime products from

101 |

Paired with the state-of-the-art spa technique, the best local botanicals are blended to perfection to invigorate, nourish and heal.

102 |
103 |
104 | 105 |
106 |
107 |
108 |
109 | 110 |
111 |

THE KID'S CLUB

112 |
113 |

Our centre for children aged 4 to 12 offers a range of eucational videos, games and toys. Organised activities, from competive group games to storytelling, take place throughout the day.

114 |

Available to non-resident hotel guests at no extra charge when visiting Librisa Spa.

115 | 116 |
117 |
118 |
119 |

ACCOMMODATION & ACTIVITIES

120 |
121 |

De Akpans is an escape for the whole family. to help you relax with yoour little ones we offer in-room amenities including additional cots, laundary services and babysitting services.

122 |

We also arrange activities that are popular with all ages. Stay within our walls and enjoy family-themed spa treatments or an interactive Chef's Table experience. Or head out to explore the nearby beaches or fascinating museums. Our concierge will be happy to help.

123 |
124 |
125 | 126 |
127 |
128 |
129 |
130 |
131 | 132 |
133 |
134 |
135 |

Stay up to date

136 |
137 |

Get our emails, letters from our five stars hotel, news about De Akpans, offers, and much more. Not too often - just enough.

138 |
139 |
140 |
141 |
142 |
143 | 144 | 145 |
146 |
147 | 148 | 149 |
150 |
151 | 152 |
153 |
154 | Sign Up 155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 | 164 | 200 | 201 | 202 | 203 | -------------------------------------------------------------------------------- /css/room.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | font-family: cursive; 5 | padding: 0; 6 | box-sizing: border-box; 7 | outline: none; 8 | scroll-behavior: smooth; 9 | border: none; 10 | text-decoration: none; 11 | transition: all .2s linear; 12 | } 13 | 14 | button:hover{ 15 | transform: scaleX(1.1); 16 | transition: 0.8s; 17 | } 18 | body{ 19 | background-color: #2c3e50; 20 | overflow-x: hidden; 21 | color: #fff; 22 | } 23 | 24 | .header{ 25 | position: absolute; 26 | right: 0; 27 | width: 100%; 28 | height: 100vh; 29 | overflow: hidden; 30 | background: #111; 31 | z-index: 2; 32 | transition: 0.8s; 33 | } 34 | .toggle{ 35 | position: relative; 36 | width: 50px; 37 | height: 50px; 38 | background: url('../icon/menu.png'); 39 | filter: invert(1); 40 | background-repeat: no-repeat; 41 | background-size: 20px; 42 | background-position: center; 43 | cursor: pointer; 44 | } 45 | .toggle.active{ 46 | background: url('../icon/close.png'); 47 | background-repeat: no-repeat; 48 | margin-left: 95%; 49 | background-size: 25px; 50 | background-position: center; 51 | } 52 | .header.active{ 53 | position: absolute; 54 | right: 100%; 55 | } 56 | .head{ 57 | position: fixed; 58 | top: 0; 59 | left: 0; 60 | width: 100%; 61 | padding: 20px 50px; 62 | z-index: 5; 63 | display: flex; 64 | align-items: center; 65 | justify-content: space-between; 66 | } 67 | #img{ 68 | width: 100%; 69 | height: 100vh; 70 | position: absolute; 71 | left: 50%; 72 | top: 50%; 73 | transform: translate(-50%,-50%); 74 | } 75 | .text-box{ 76 | width: 350px; 77 | position: absolute; 78 | top: 250px; 79 | left: 5%; 80 | color: #fff; 81 | transform: translateY(100px); 82 | } 83 | .text-box h1{ 84 | margin-bottom: 40px; 85 | letter-spacing: 3px; 86 | } 87 | .text-box p{ 88 | font-size: 30px; 89 | letter-spacing: 3px; 90 | } 91 | .text-box span{ 92 | background: #fff; 93 | margin-top: 10px; 94 | height: 1px; 95 | width: 30%; 96 | position: absolute; 97 | left: 0; 98 | } 99 | .top{ 100 | position: fixed; 101 | align-items: center; 102 | top: 0; 103 | left: 0; 104 | width: 100%; 105 | color: #fff; 106 | display: flex; 107 | box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); 108 | z-index: 3; 109 | transition: 0s; 110 | } 111 | .logo{ 112 | font-family: cursive; 113 | letter-spacing: 4px; 114 | font-style: italic; 115 | margin-left: 40%; 116 | font-size: 20px; 117 | z-index: 10; 118 | } 119 | .top .book{ 120 | z-index: 10; 121 | margin-left: 20%; 122 | } 123 | .book button{ 124 | background: #fff; 125 | width: 60px; 126 | height: 30px; 127 | } 128 | .book button a{ 129 | color: grey; 130 | } 131 | .book button:hover{ 132 | transform: none; 133 | } 134 | 135 | 136 | .menu{ 137 | padding: 5rem 5% 2rem; 138 | width: 100%; 139 | height: 100vh; 140 | top: 0px; 141 | z-index: 1; 142 | background: #4298ad; 143 | } 144 | .menu.active{ 145 | position: fixed; 146 | } 147 | .luck ul li, .hater ul li{ 148 | list-style: none; 149 | } 150 | .luck ul li a{ 151 | text-decoration: none; 152 | line-height: 2; 153 | letter-spacing: 3px; 154 | font-size: 24px; 155 | color: #fff; 156 | } 157 | .hater{ 158 | display: block; 159 | margin-top: 50px; 160 | } 161 | .hater ul li a{ 162 | text-decoration: none; 163 | color: #fff; 164 | letter-spacing: 3px; 165 | line-height: 2; 166 | } 167 | 168 | .sigtion{ 169 | height: auto; 170 | width: 100%; 171 | color: #fff; 172 | background: #4298ad; 173 | } 174 | .diseg h3{ 175 | font-size: 30px; 176 | margin-top: 10%; 177 | margin-left: 30px; 178 | padding: 10px; 179 | font-weight: lighter; 180 | } 181 | .sig{ 182 | width: 40%; 183 | margin-left: 30px; 184 | margin-top: 30px; 185 | } 186 | .form-box{ 187 | width: 400px; 188 | height: 400px; 189 | background: transparent; 190 | display: flex; 191 | justify-content: center; 192 | align-items: center; 193 | 194 | } 195 | .inputbox{ 196 | position: relative; 197 | margin: 30px 0; 198 | width: 310px; 199 | border-bottom: 2px solid #fff; 200 | } 201 | .inputbox label{ 202 | position: absolute; 203 | top: 50%; 204 | left: 5px; 205 | transform: translateY(-50%); 206 | color: #fff; 207 | font-size: 1em; 208 | pointer-events: none; 209 | transition: -5s; 210 | } 211 | input:focus ~ label, 212 | input:valid ~ label{ 213 | top: -5px; 214 | transition: .5s; 215 | } 216 | .inputbox input{ 217 | width: 100%; 218 | height: 50px; 219 | background: transparent; 220 | border: none; 221 | outline: none; 222 | font-size: 1em; 223 | padding: 0 35px 0 5px; 224 | color: #fff; 225 | } 226 | .inputbox img{ 227 | position: absolute; 228 | right: 8px; 229 | top: 20px; 230 | width: 30px; 231 | height: 30px; 232 | } 233 | .forget{ 234 | margin: -15px 0 15px; 235 | font-size: .9em; 236 | color: #fff; 237 | display: flex; 238 | justify-content: center; 239 | } 240 | .forget label input{ 241 | margin-right: 3px; 242 | } 243 | .re{ 244 | background-color: #fff; 245 | text-align: center; 246 | padding: 15px; 247 | border: 1px solid #fff; 248 | border-radius: 20px; 249 | } 250 | .re a{ 251 | text-decoration: none; 252 | color: #000; 253 | text-transform: capitalize; 254 | } 255 | .iigan{ 256 | width: 100%; 257 | } 258 | .iigan img{ 259 | height: 60vh; 260 | width: 100%; 261 | object-fit: cover; 262 | } 263 | .room{ 264 | padding: 5rem 3% 2rem; 265 | } 266 | .body-text{ 267 | width: 80%; 268 | margin-left: 15%; 269 | } 270 | .room-content h4{ 271 | font-size: 50px; 272 | letter-spacing: 3px; 273 | } 274 | .body-text p{ 275 | letter-spacing: 2px; 276 | line-height: 2; 277 | text-align: center; 278 | font-size: 20px; 279 | margin-bottom: 30px; 280 | } 281 | .forte h3{ 282 | color: #fff; 283 | line-height: 2; 284 | font-size: 40px; 285 | font-weight: lighter; 286 | letter-spacing: 3px; 287 | } 288 | .upper{ 289 | display: flex; 290 | padding: 1rem 0% 0rem; 291 | color: #fff; 292 | } 293 | .spa-text1{ 294 | width: 50%; 295 | } 296 | .spa-text1 p{ 297 | line-height: 2; 298 | letter-spacing: 2px; 299 | } 300 | .spa-text2{ 301 | margin-left: 30%; 302 | } 303 | .spa-text2 ul{ 304 | list-style: none; 305 | line-height: 3; 306 | } 307 | .spa-text2 ul li{ 308 | letter-spacing: 2px; 309 | } 310 | .guy{ 311 | width: 30%; 312 | display: flex; 313 | justify-content: space-between; 314 | } 315 | .guy button{ 316 | background: #fff; 317 | width: 40%; 318 | margin: 0rem 3% 5rem; 319 | height: 50px; 320 | letter-spacing: 2px; 321 | } 322 | .footer{ 323 | background: #fff; 324 | color: #2c3e50; 325 | height: auto; 326 | width: 100%; 327 | } 328 | .footer img{ 329 | height: 20px; 330 | width: 20px; 331 | } 332 | .content{ 333 | padding: 5rem 7% 3rem; 334 | } 335 | .tags{ 336 | line-height: 2; 337 | text-align: center; 338 | } 339 | .tags a{ 340 | color: #4298ad; 341 | display: block; 342 | font-size: 20px; 343 | letter-spacing: 3px; 344 | } 345 | .social{ 346 | text-align: center; 347 | } 348 | .social img{ 349 | margin: 2rem 3% 2rem; 350 | } 351 | .right{ 352 | text-align: center; 353 | } 354 | .right p{ 355 | letter-spacing: 3px; 356 | font-size: 20px; 357 | } 358 | .bttn{ 359 | display: block; 360 | margin-top: 30px; 361 | } 362 | .bttn .bty{ 363 | width: 100%; 364 | display: flex; 365 | padding: 20px; 366 | margin-top: 30px; 367 | border: 2px solid #000; 368 | } 369 | .bttn .bty img{ 370 | margin-left: 45%; 371 | } 372 | .bttn .bty p{ 373 | margin-left: 1%; 374 | } 375 | 376 | @media (max-width: 1280px) { 377 | .menu{ 378 | padding: 10rem 9% 2rem; 379 | } 380 | .logo{ 381 | margin-left: 30%; 382 | } 383 | .text-box{ 384 | top: 400px; 385 | left: 5%; 386 | } 387 | } 388 | @media (max-width: 1024px) { 389 | .menu{ 390 | padding: 4rem 3% 2rem; 391 | } 392 | .logo{ 393 | font-size: 15px; 394 | } 395 | .text-box{ 396 | top: 250px; 397 | } 398 | .head{ 399 | padding: 10px 50px; 400 | } 401 | } 402 | @media (max-width: 768px) { 403 | .top{ 404 | height: 10%; 405 | } 406 | .top .book{ 407 | margin-left: 15%; 408 | } 409 | .logo{ 410 | margin-left: 25%; 411 | } 412 | .toggle.active{ 413 | margin-left: 96%; 414 | background-size: 30px; 415 | } 416 | .menu{ 417 | padding: 15rem 9% 2rem; 418 | } 419 | .text-box{ 420 | top: 600px; 421 | } 422 | .iiga img, .iigan img, .iigane img{ 423 | height: 40vh; 424 | } 425 | .head{ 426 | padding: 25px 50px; 427 | } 428 | .room-content h4{ 429 | text-align: center; 430 | } 431 | .body-text{ 432 | margin-left: 0; 433 | width: 100%; 434 | } 435 | .spa-text1{ 436 | width: 100%; 437 | text-align: center; 438 | } 439 | .spa-text2{ 440 | display: none; 441 | } 442 | .guy{ 443 | width: 100%; 444 | margin-top: 50px; 445 | } 446 | } 447 | @media(max-width: 375px){ 448 | .logo{ 449 | letter-spacing: 2px; 450 | margin-left: 15%; 451 | font-size: 10px; 452 | } 453 | .top .book{ 454 | margin-left: 10%; 455 | font-size: 10px; 456 | } 457 | .book button{ 458 | height: 25px; 459 | } 460 | .menu{ 461 | padding: 6rem 5% 0rem; 462 | } 463 | .head{ 464 | padding: 6px 0px; 465 | } 466 | .toggle.active{ 467 | margin-left: 90%; 468 | background-size: 25px; 469 | } 470 | .text-box{ 471 | top: 300px; 472 | width: 300px; 473 | } 474 | .form-box{ 475 | width: 350px; 476 | } 477 | } -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | font-family: cursive; 5 | padding: 0; 6 | box-sizing: border-box; 7 | outline: none; 8 | scroll-behavior: smooth; 9 | border: none; 10 | text-decoration: none; 11 | transition: all .2s linear; 12 | } 13 | 14 | body{ 15 | background-color: #2c3e50; 16 | overflow-x: hidden; 17 | color: #fff; 18 | } 19 | 20 | .header{ 21 | position: absolute; 22 | right: 0; 23 | width: 100%; 24 | height: 100vh; 25 | overflow: hidden; 26 | background: #111; 27 | z-index: 2; 28 | transition: 0.8s; 29 | } 30 | .toggle{ 31 | position: relative; 32 | width: 50px; 33 | height: 50px; 34 | background: url('../icon/menu.png'); 35 | filter: invert(1); 36 | background-repeat: no-repeat; 37 | background-size: 20px; 38 | background-position: center; 39 | cursor: pointer; 40 | } 41 | .toggle.active{ 42 | background: url('../icon/close.png'); 43 | margin-left: 95%; 44 | background-repeat: no-repeat; 45 | background-size: 25px; 46 | background-position: center; 47 | } 48 | .header.active{ 49 | position: absolute; 50 | right: 100%; 51 | } 52 | .top{ 53 | position: fixed; 54 | align-items: center; 55 | top: 0; 56 | left: 0; 57 | width: 100%; 58 | color: #fff; 59 | display: flex; 60 | box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); 61 | z-index: 3; 62 | transition: 0s; 63 | } 64 | .logo{ 65 | font-family: cursive; 66 | letter-spacing: 4px; 67 | font-style: italic; 68 | margin-left: 40%; 69 | z-index: 10; 70 | font-size: 20px; 71 | } 72 | .top .book{ 73 | z-index: 10; 74 | margin-left: 20%; 75 | } 76 | .book button{ 77 | background: #fff; 78 | width: 60px; 79 | height: 30px; 80 | } 81 | button a{ 82 | color: grey; 83 | cursor: pointer; 84 | } 85 | .head{ 86 | position: fixed; 87 | top: 0; 88 | left: 0; 89 | width: 100%; 90 | padding: 20px 50px; 91 | z-index: 10; 92 | display: flex; 93 | align-items: center; 94 | justify-content: space-between; 95 | } 96 | #img{ 97 | width: 120%; 98 | height: 100vh; 99 | position: absolute; 100 | left: 50%; 101 | top: 50%; 102 | transform: translate(-50%,-50%); 103 | animation: zoom-out 3s linear infinite; 104 | } 105 | @keyframes zoom-out { 106 | 100%{ 107 | width: 100%; 108 | } 109 | } 110 | .text-box{ 111 | width: 500px; 112 | position: absolute; 113 | top: 300px; 114 | left: 30%; 115 | color: #fff; 116 | animation: textup 12s linear infinite; 117 | transform: translateY(100px); 118 | } 119 | @keyframes textup { 120 | 10%{ 121 | transform: translateY(0px); 122 | } 123 | 100%{ 124 | transform: translateY(0px); 125 | } 126 | } 127 | .text-box1{ 128 | animation-delay: 0s; 129 | } 130 | .text-box2{ 131 | animation-delay: 3s; 132 | } 133 | .text-box3{ 134 | animation-delay: 6s; 135 | } 136 | .text-box4{ 137 | animation-delay: 9s; 138 | } 139 | .text-box h1{ 140 | margin-bottom: 40px; 141 | letter-spacing: 3px; 142 | } 143 | .text-box span{ 144 | background: #fff; 145 | height: 1px; 146 | width: 30%; 147 | position: absolute; 148 | left: 0; 149 | } 150 | .round{ 151 | position: fixed; 152 | z-index: 1000; 153 | border: 1px solid #000; 154 | border-radius: 50%; 155 | margin-left: 85%; 156 | margin-top: 20%; 157 | background: #fff; 158 | height: 100px; 159 | width: 100px; 160 | } 161 | .round a{ 162 | font-size: 20px; 163 | color: #2c3e50; 164 | } 165 | .banner1{ 166 | animation: slide1 12s linear infinite; 167 | } 168 | @keyframes slide1 { 169 | 0%{ 170 | visibility: visible; 171 | } 172 | 25%{ 173 | visibility: hidden; 174 | } 175 | 50%{ 176 | visibility: hidden; 177 | } 178 | 75%{ 179 | visibility: hidden; 180 | } 181 | 100%{ 182 | visibility: visible; 183 | } 184 | } 185 | .banner2{ 186 | animation: slide2 12s linear infinite; 187 | } 188 | @keyframes slide2 { 189 | 0%{ 190 | visibility: hidden; 191 | } 192 | 25%{ 193 | visibility: hidden; 194 | } 195 | 50%{ 196 | visibility: visible; 197 | } 198 | 75%{ 199 | visibility: hidden; 200 | } 201 | 100%{ 202 | visibility: hidden; 203 | } 204 | } 205 | .banner3{ 206 | animation: slide3 12s linear infinite; 207 | } 208 | @keyframes slide3 { 209 | 0%{ 210 | visibility: hidden; 211 | } 212 | 25%{ 213 | visibility: hidden; 214 | } 215 | 50%{ 216 | visibility: hidden; 217 | } 218 | 75%{ 219 | visibility: visible; 220 | } 221 | 100%{ 222 | visibility: hidden; 223 | } 224 | } 225 | .banner4{ 226 | animation: slide4 12s linear infinite; 227 | } 228 | @keyframes slide4 { 229 | 0%{ 230 | visibility: hidden; 231 | } 232 | 25%{ 233 | visibility: hidden; 234 | } 235 | 50%{ 236 | visibility: hidden; 237 | } 238 | 75%{ 239 | visibility: hidden; 240 | } 241 | 100%{ 242 | visibility: visible; 243 | } 244 | } 245 | 246 | 247 | .menu{ 248 | padding: 5rem 5% 2rem; 249 | width: 100%; 250 | height: 100vh; 251 | top: 0px; 252 | z-index: 1; 253 | background: #4298ad; 254 | } 255 | .menu.active{ 256 | position: fixed; 257 | } 258 | .luck ul li, .hater ul li{ 259 | list-style: none; 260 | } 261 | .luck ul li a{ 262 | letter-spacing: 3px; 263 | text-decoration: none; 264 | line-height: 2; 265 | font-size: 24px; 266 | color: #fff; 267 | } 268 | .hater{ 269 | display: block; 270 | margin-top: 50px; 271 | } 272 | .hater ul li a{ 273 | text-decoration: none; 274 | letter-spacing: 3px; 275 | color: #fff; 276 | line-height: 2; 277 | } 278 | 279 | .body{ 280 | padding: 5rem 3% 2rem; 281 | } 282 | .body-content{ 283 | width: 50%; 284 | margin-left: 25%; 285 | } 286 | .body-content h2{ 287 | text-align: center; 288 | font-style: italic; 289 | font-size: 50px; 290 | letter-spacing: 3px; 291 | margin-bottom: 40px; 292 | } 293 | .body-text h4{ 294 | text-align: center; 295 | font-size: 20px; 296 | margin-bottom: 30px; 297 | } 298 | .body-text p{ 299 | letter-spacing: 2px; 300 | line-height: 2; 301 | text-align: center; 302 | margin-bottom: 30px; 303 | } 304 | .sigtion{ 305 | height: auto; 306 | width: 100%; 307 | background: #4298ad; 308 | } 309 | .diseg h3{ 310 | font-size: 30px; 311 | margin-top: 10%; 312 | margin-left: 30px; 313 | padding: 10px; 314 | font-weight: lighter; 315 | } 316 | .sig{ 317 | width: 40%; 318 | margin-left: 30px; 319 | margin-top: 30px; 320 | } 321 | .form-box{ 322 | width: 400px; 323 | height: 400px; 324 | background: transparent; 325 | display: flex; 326 | justify-content: center; 327 | align-items: center; 328 | } 329 | .inputbox{ 330 | position: relative; 331 | margin: 30px 0; 332 | width: 310px; 333 | border-bottom: 2px solid #fff; 334 | } 335 | .inputbox label{ 336 | position: absolute; 337 | top: 50%; 338 | left: 5px; 339 | transform: translateY(-50%); 340 | color: #fff; 341 | font-size: 1em; 342 | pointer-events: none; 343 | transition: .5s; 344 | } 345 | input:focus ~ label, 346 | input:valid ~ label{ 347 | top: -5px; 348 | transition: .5s; 349 | } 350 | .inputbox input{ 351 | width: 100%; 352 | height: 50px; 353 | background: transparent; 354 | border: none; 355 | outline: none; 356 | font-size: 1em; 357 | padding: 0 35px 0 5px; 358 | color: #fff; 359 | } 360 | .inputbox img{ 361 | position: absolute; 362 | right: 8px; 363 | top: 20px; 364 | width: 30px; 365 | height: 30px; 366 | } 367 | .forget{ 368 | margin: -15px 0 15px; 369 | font-size: .9em; 370 | color: #fff; 371 | display: flex; 372 | justify-content: center; 373 | } 374 | .forget label input{ 375 | margin-right: 3px; 376 | } 377 | .re{ 378 | background-color: #fff; 379 | text-align: center; 380 | padding: 15px; 381 | border: 1px solid #fff; 382 | border-radius: 20px; 383 | } 384 | .re a{ 385 | text-decoration: none; 386 | color: #000; 387 | text-transform: capitalize; 388 | } 389 | 390 | @media (max-width: 1280px) { 391 | .menu{ 392 | padding: 10rem 9% 2rem; 393 | } 394 | .logo{ 395 | margin-left: 30%; 396 | } 397 | .text-box{ 398 | top: 400px; 399 | left: 20%; 400 | } 401 | .round{ 402 | margin-left: 75%; 403 | } 404 | } 405 | @media (max-width: 1024px) { 406 | .menu{ 407 | padding: 4rem 3% 2rem; 408 | } 409 | .logo{ 410 | font-size: 15px; 411 | } 412 | .head{ 413 | padding: 10px 50px; 414 | } 415 | .round{ 416 | margin-left: 76%; 417 | } 418 | } 419 | @media (max-width: 768px) { 420 | .top{ 421 | height: 10%; 422 | } 423 | .top .book{ 424 | margin-left: 15%; 425 | } 426 | .logo{ 427 | margin-left: 25%; 428 | } 429 | .toggle.active{ 430 | margin-left: 96%; 431 | background-size: 30px; 432 | } 433 | .menu{ 434 | padding: 15rem 9% 2rem; 435 | } 436 | .head{ 437 | padding: 25px 50px; 438 | } 439 | .text-box{ 440 | top: 600px; 441 | } 442 | .round{ 443 | margin-left: 75%; 444 | margin-top: 50%; 445 | } 446 | } 447 | @media(max-width: 375px){ 448 | .logo{ 449 | letter-spacing: 2px; 450 | margin-left: 15%; 451 | font-size: 10px; 452 | } 453 | .top .book{ 454 | margin-left: 10%; 455 | font-size: 10px; 456 | } 457 | .book button{ 458 | height: 25px; 459 | } 460 | .menu{ 461 | padding: 6rem 5% 0rem; 462 | } 463 | .head{ 464 | padding: 6px 0px; 465 | } 466 | .toggle.active{ 467 | margin-left: 90%; 468 | background-size: 25px; 469 | } 470 | .round{ 471 | margin-left: 65%; 472 | } 473 | .text-box{ 474 | top: 400px; 475 | left: 5%; 476 | } 477 | .body-content{ 478 | width: 100%; 479 | margin-left: 0; 480 | } 481 | .form-box{ 482 | width: 350px; 483 | } 484 | } -------------------------------------------------------------------------------- /html/dining.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dine With De Akpans 9 | 10 | 11 | 12 | 40 | 41 | 63 | 64 | 65 |
66 |
67 |
68 |
69 |

DINING OUT OF THIS WORLD

70 |
71 |

Indulge in feast of bite-size treats with a delicious seasonal picnic. Take time over an afternoon tea layeared with sandwishes and sweets. Or raise a toast with chic cocktail in our planet bar. Boasting some of the rerstaurants and bars in lagos state, a stay at De Akpans in a foodie heaven.

72 |
73 |
74 |
75 | 76 |
77 |
78 | 79 |
80 |

MOTHER'S DAY AT THE NELLIE

81 |
82 |
83 |

Let mothers feel special with an enchanting afternoon tea or Sunday brunch at De Akpans.

84 |
85 |
86 | 87 |
88 |
89 |
90 | 91 |
92 |

AFTERNOON TEA

93 |
94 |
95 | 96 |
97 |
98 |

Available at 12pm and 3pm | $600 per adult, $350 per child (ages 4 - 11) Includes kid's club access (for ages 4 - 11), Belvedere welcome drinks, departure gifts for moms.

99 | 100 |
101 |
102 |
103 | 104 |
105 |

SUNDAY BRUNCH

106 |
107 | 108 |
109 |
110 |

Available at 11:30am to 3pm | $650 per adult, $350 per child (ages 4 - 11), $250 for unlimited bubbly. Includes kid's club access (for ages 4 - 11), Welcome drinks from moet & Chandon, departure gifts for moms.

111 | 112 | 113 |
114 |
115 | 116 |
117 |
118 |

OASIS

119 |
120 |

Slide into a wholesome breakfast in th morning with hot dishes like

121 |

Through the summer months, this is the perfect spot to linger over loong lazy lunch including chicken curry, jollof rice, assorted or crisp organic salads. Or simply sip cocktails and enjoy gorgeous garden view.

122 |
123 |
124 |
    125 |
  • Opening Time:
    • 126 |
  • Breakfast: 7:00am-11:00am
    • 127 |
  • Lunch: 1:00pm-3:30pm
    • 128 |
  • Pool service: 9:00am-6:00pm
    • 129 |
130 |

(residents only)

131 |
132 |
133 | 134 |
135 |
136 |
137 |

Gluten free, vegan and kids menus available

138 |
139 |
140 | Breakfast Menu 141 |
142 | Lunch Menu 143 |
144 | 145 |
146 |
147 |
148 | 149 |
150 |

THE LOUNGE

151 |
152 | 153 |
154 |
155 |

Sink into aplush seat at our comtemporary lounge, An iconic space at De Akpan's, the lounge has always been a place to gather, mingle and savor.

156 |

Refresh with a tempting cocktail or dine on delicious specialities from our lunch and dinner menus

157 |
158 | Lunch Menu 159 |
160 | Dinner Menu 161 |
162 | 163 |
164 |
165 |
166 | 167 |
168 |
169 |

Stay up to date

170 |
171 |

Get our emails, letters from our five stars hotel, news about De Akpans, offers, and much more. Not too often - just enough.

172 |
173 |
174 |
175 |
176 |
177 | 178 | 179 |
180 |
181 | 182 | 183 |
184 |
185 | 186 |
187 |
188 | Sign Up 189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 | 197 | 233 | 234 | 235 | 236 | -------------------------------------------------------------------------------- /css/hotel.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | font-family: cursive; 5 | padding: 0; 6 | box-sizing: border-box; 7 | outline: none; 8 | scroll-behavior: smooth; 9 | border: none; 10 | text-decoration: none; 11 | transition: all .2s linear; 12 | } 13 | 14 | button:hover{ 15 | transform: scaleX(1.1); 16 | transition: 0.8s; 17 | } 18 | body{ 19 | background-color: #2c3e50; 20 | overflow-x: hidden; 21 | color: #fff; 22 | } 23 | 24 | .header{ 25 | position: absolute; 26 | right: 0; 27 | width: 100%; 28 | height: 100vh; 29 | overflow: hidden; 30 | background: #111; 31 | z-index: 2; 32 | transition: 0.8s; 33 | } 34 | .toggle{ 35 | position: relative; 36 | width: 50px; 37 | height: 50px; 38 | background: url('../icon/menu.png'); 39 | filter: invert(1); 40 | background-repeat: no-repeat; 41 | background-size: 20px; 42 | background-position: center; 43 | cursor: pointer; 44 | } 45 | .toggle.active{ 46 | background: url('../icon/close.png'); 47 | background-repeat: no-repeat; 48 | margin-left: 95%; 49 | background-size: 25px; 50 | background-position: center; 51 | } 52 | .header.active{ 53 | position: absolute; 54 | right: 100%; 55 | } 56 | .head{ 57 | position: fixed; 58 | top: 0; 59 | left: 0; 60 | width: 100%; 61 | padding: 20px 50px; 62 | z-index: 5; 63 | display: flex; 64 | align-items: center; 65 | justify-content: space-between; 66 | } 67 | #img{ 68 | width: 100%; 69 | height: 100vh; 70 | position: absolute; 71 | left: 50%; 72 | top: 50%; 73 | transform: translate(-50%,-50%); 74 | } 75 | .text-box{ 76 | width: 500px; 77 | position: absolute; 78 | top: 250px; 79 | left: 5%; 80 | color: #fff; 81 | transform: translateY(100px); 82 | } 83 | .text-box h1{ 84 | margin-bottom: 40px; 85 | letter-spacing: 3px; 86 | } 87 | .text-box p{ 88 | font-size: 30px; 89 | letter-spacing: 3px; 90 | } 91 | .text-box span{ 92 | background: #fff; 93 | margin-top: 10px; 94 | height: 1px; 95 | width: 30%; 96 | position: absolute; 97 | left: 0; 98 | } 99 | .top{ 100 | position: fixed; 101 | align-items: center; 102 | top: 0; 103 | left: 0; 104 | width: 100%; 105 | color: #fff; 106 | display: flex; 107 | box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); 108 | z-index: 3; 109 | transition: 0s; 110 | } 111 | .logo{ 112 | font-family: cursive; 113 | letter-spacing: 4px; 114 | font-style: italic; 115 | margin-left: 40%; 116 | font-size: 20px; 117 | z-index: 10; 118 | } 119 | .top .book{ 120 | z-index: 10; 121 | margin-left: 20%; 122 | } 123 | .book button{ 124 | background: #fff; 125 | width: 60px; 126 | height: 30px; 127 | } 128 | .book button a{ 129 | color: grey; 130 | } 131 | .book button:hover{ 132 | transform: none; 133 | } 134 | 135 | 136 | .menu{ 137 | padding: 5rem 5% 2rem; 138 | width: 100%; 139 | height: 100vh; 140 | top: 0px; 141 | z-index: 1; 142 | background: #4298ad; 143 | } 144 | .menu.active{ 145 | position: fixed; 146 | } 147 | .luck ul li, .hater ul li{ 148 | list-style: none; 149 | } 150 | .luck ul li a{ 151 | letter-spacing: 3px; 152 | text-decoration: none; 153 | line-height: 2; 154 | font-size: 24px; 155 | color: #fff; 156 | } 157 | .hater{ 158 | display: block; 159 | margin-top: 50px; 160 | } 161 | .hater ul li a{ 162 | letter-spacing: 3px; 163 | text-decoration: none; 164 | color: #fff; 165 | line-height: 2; 166 | } 167 | 168 | .hotels{ 169 | width: 100%; 170 | height: auto; 171 | } 172 | .hotels button{ 173 | background: #fff; 174 | margin-top: 20px; 175 | width: 100%; 176 | letter-spacing: 2px; 177 | height: 50px; 178 | } 179 | 180 | .exp{ 181 | height: auto; 182 | width: 100%; 183 | padding: 5rem 3% 2rem; 184 | margin-bottom: 50px; 185 | color: #fff; 186 | display: flex; 187 | align-items: center; 188 | } 189 | .expetex{ 190 | width: 80%; 191 | } 192 | .exp-text h1{ 193 | width: 30%; 194 | line-height: 2; 195 | margin-left: 50px; 196 | text-align: center; 197 | font-weight: lighter; 198 | text-transform: uppercase; 199 | } 200 | .exp-text p{ 201 | letter-spacing: 1px; 202 | text-align: center; 203 | line-height: 2; 204 | } 205 | .iiga{ 206 | width: 100%; 207 | } 208 | .iiga img{ 209 | height: 80vh; 210 | width: 100%; 211 | object-fit: cover; 212 | } 213 | .glan{ 214 | height: auto; 215 | width: 100%; 216 | padding: 1rem 3% 2rem; 217 | margin-bottom: 50px; 218 | color: #fff; 219 | } 220 | .glan-text{ 221 | line-height: 3; 222 | } 223 | .glan-text h1{ 224 | text-transform: uppercase; 225 | text-align: center; 226 | font-size: 50px; 227 | } 228 | .cont{ 229 | display: flex; 230 | } 231 | .cont h3{ 232 | font-size: 30px; 233 | font-weight: lighter; 234 | } 235 | .cont p{ 236 | letter-spacing: 1px; 237 | margin-top: 15px; 238 | font-size: 20px; 239 | margin-left: 20%; 240 | } 241 | .lore{ 242 | width: 100%; 243 | height: auto; 244 | padding: 1rem 3% 2rem; 245 | } 246 | .slant{ 247 | background: #b10b0b; 248 | transform-origin: 0 0; 249 | transform: rotate(90deg); 250 | height: 50px; 251 | width: 20%; 252 | } 253 | .slant h1{ 254 | text-align: center; 255 | font-size: 20px; 256 | } 257 | .lore-content h3{ 258 | text-align: center; 259 | font-style: italic; 260 | letter-spacing: 2px; 261 | } 262 | .lore-content .ptext{ 263 | width: 80%; 264 | padding: 1rem 3% 2rem; 265 | } 266 | .lore-content p{ 267 | letter-spacing: 3px; 268 | line-height: 2; 269 | } 270 | .aider{ 271 | width: 100%; 272 | color: #fff; 273 | padding: 0rem 1% 0rem; 274 | display: flex; 275 | align-items: center; 276 | } 277 | .iigan{ 278 | padding: 1rem 3% 2rem; 279 | width: 100%; 280 | } 281 | .iigan img{ 282 | height: 60vh; 283 | width: 100%; 284 | object-fit: cover; 285 | } 286 | 287 | 288 | 289 | 290 | .sig{ 291 | width: 40%; 292 | margin-left: 30px; 293 | margin-top: 30px; 294 | } 295 | .form-box{ 296 | width: 400px; 297 | height: 400px; 298 | background: transparent; 299 | display: flex; 300 | justify-content: center; 301 | align-items: center; 302 | 303 | } 304 | .inputbox{ 305 | position: relative; 306 | margin: 30px 0; 307 | width: 310px; 308 | border-bottom: 2px solid #fff; 309 | } 310 | .inputbox label{ 311 | position: absolute; 312 | top: 50%; 313 | left: 5px; 314 | transform: translateY(-50%); 315 | color: #fff; 316 | font-size: 1em; 317 | pointer-events: none; 318 | transition: -5s; 319 | } 320 | input:focus ~ label, 321 | input:valid ~ label{ 322 | top: -5px; 323 | transition: .5s; 324 | } 325 | .inputbox input{ 326 | width: 100%; 327 | height: 50px; 328 | background: transparent; 329 | border: none; 330 | outline: none; 331 | font-size: 1em; 332 | padding: 0 35px 0 5px; 333 | color: #fff; 334 | } 335 | .inputbox img{ 336 | position: absolute; 337 | right: 8px; 338 | top: 20px; 339 | width: 30px; 340 | height: 30px; 341 | } 342 | .forget{ 343 | margin: -15px 0 15px; 344 | font-size: .9em; 345 | color: #fff; 346 | display: flex; 347 | justify-content: center; 348 | } 349 | .forget label input{ 350 | margin-right: 3px; 351 | } 352 | .re{ 353 | background-color: #fff; 354 | text-align: center; 355 | padding: 15px; 356 | border: 1px solid #fff; 357 | border-radius: 20px; 358 | } 359 | .re a{ 360 | text-decoration: none; 361 | color: #000; 362 | text-transform: capitalize; 363 | } 364 | .footer{ 365 | background: #fff; 366 | color: #2c3e50; 367 | height: auto; 368 | width: 100%; 369 | } 370 | .footer img{ 371 | height: 20px; 372 | width: 20px; 373 | } 374 | .content{ 375 | padding: 5rem 7% 3rem; 376 | } 377 | .tags{ 378 | line-height: 2; 379 | text-align: center; 380 | } 381 | .tags a{ 382 | color: #4298ad; 383 | display: block; 384 | font-size: 20px; 385 | letter-spacing: 3px; 386 | } 387 | .social{ 388 | text-align: center; 389 | } 390 | .social img{ 391 | margin: 2rem 3% 2rem; 392 | } 393 | .right{ 394 | text-align: center; 395 | } 396 | .right p{ 397 | letter-spacing: 3px; 398 | font-size: 20px; 399 | } 400 | .bttn{ 401 | display: block; 402 | margin-top: 30px; 403 | } 404 | .bttn .bty{ 405 | width: 100%; 406 | display: flex; 407 | padding: 20px; 408 | margin-top: 30px; 409 | border: 2px solid #000; 410 | } 411 | .bttn .bty img{ 412 | margin-left: 45%; 413 | } 414 | .bttn .bty p{ 415 | margin-left: 1%; 416 | } 417 | 418 | @media (max-width: 1280px) { 419 | .menu{ 420 | padding: 10rem 9% 2rem; 421 | } 422 | .logo{ 423 | margin-left: 30%; 424 | } 425 | .text-box{ 426 | top: 400px; 427 | left: 5%; 428 | } 429 | } 430 | @media (max-width: 1024px) { 431 | .menu{ 432 | padding: 4rem 3% 2rem; 433 | } 434 | .logo{ 435 | font-size: 15px; 436 | } 437 | .text-box{ 438 | top: 250px; 439 | } 440 | .head{ 441 | padding: 10px 50px; 442 | } 443 | } 444 | @media (max-width: 768px) { 445 | .top{ 446 | height: 10%; 447 | } 448 | .top .book{ 449 | margin-left: 15%; 450 | } 451 | .logo{ 452 | margin-left: 25%; 453 | } 454 | .toggle.active{ 455 | margin-left: 96%; 456 | background-size: 30px; 457 | } 458 | .menu{ 459 | padding: 15rem 9% 2rem; 460 | } 461 | .text-box{ 462 | top: 600px; 463 | } 464 | .exp{ 465 | display: block; 466 | } 467 | .exp-text h1{ 468 | width: 80%; 469 | } 470 | .expetex{ 471 | width: 100%; 472 | } 473 | .aider{ 474 | display: block; 475 | margin-bottom: 100px; 476 | } 477 | .iiga img, .iigan img, .iigane img{ 478 | height: 40vh; 479 | } 480 | .lore-content h3{ 481 | font-size: 40px; 482 | } 483 | .lore-content .ptext{ 484 | width: 100%; 485 | text-align: center; 486 | } 487 | .head{ 488 | padding: 25px 50px; 489 | } 490 | } 491 | @media(max-width: 375px){ 492 | .logo{ 493 | letter-spacing: 2px; 494 | margin-left: 15%; 495 | font-size: 10px; 496 | } 497 | .top .book{ 498 | margin-left: 10%; 499 | font-size: 10px; 500 | } 501 | .book button{ 502 | height: 25px; 503 | } 504 | .menu{ 505 | padding: 6rem 5% 0rem; 506 | } 507 | .head{ 508 | padding: 6px 0px; 509 | } 510 | .toggle.active{ 511 | margin-left: 90%; 512 | background-size: 25px; 513 | } 514 | .text-box{ 515 | top: 300px; 516 | width: 300px; 517 | } 518 | .glan{ 519 | padding: 0rem 0% 0rem; 520 | } 521 | .form-box{ 522 | width: 350px; 523 | } 524 | .slant{ 525 | display: none; 526 | } 527 | .lore-content h3{ 528 | font-size: 30px; 529 | } 530 | } -------------------------------------------------------------------------------- /css/eve.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | font-family: cursive; 5 | padding: 0; 6 | box-sizing: border-box; 7 | outline: none; 8 | scroll-behavior: smooth; 9 | border: none; 10 | text-decoration: none; 11 | transition: all .2s linear; 12 | } 13 | 14 | button:hover{ 15 | transform: scaleX(1.1); 16 | transition: 0.8s; 17 | } 18 | body{ 19 | background-color: #2c3e50; 20 | overflow-x: hidden; 21 | color: #fff; 22 | } 23 | 24 | .header{ 25 | position: absolute; 26 | right: 0; 27 | width: 100%; 28 | height: 100vh; 29 | overflow: hidden; 30 | background: #111; 31 | z-index: 2; 32 | transition: 0.8s; 33 | } 34 | .toggle{ 35 | position: relative; 36 | width: 50px; 37 | height: 50px; 38 | background: url('../icon/menu.png'); 39 | filter: invert(1); 40 | background-repeat: no-repeat; 41 | background-size: 20px; 42 | background-position: center; 43 | cursor: pointer; 44 | } 45 | .toggle.active{ 46 | background: url('../icon/close.png'); 47 | background-repeat: no-repeat; 48 | margin-left: 95%; 49 | background-size: 25px; 50 | background-position: center; 51 | } 52 | .header.active{ 53 | position: absolute; 54 | right: 100%; 55 | } 56 | .head{ 57 | position: fixed; 58 | top: 0; 59 | left: 0; 60 | width: 100%; 61 | padding: 20px 50px; 62 | z-index: 5; 63 | display: flex; 64 | align-items: center; 65 | justify-content: space-between; 66 | } 67 | #img{ 68 | width: 100%; 69 | height: 100vh; 70 | position: absolute; 71 | left: 50%; 72 | top: 50%; 73 | transform: translate(-50%,-50%); 74 | } 75 | .text-box{ 76 | width: 500px; 77 | position: absolute; 78 | top: 250px; 79 | left: 5%; 80 | color: #fff; 81 | transform: translateY(100px); 82 | } 83 | .text-box h1{ 84 | margin-bottom: 40px; 85 | letter-spacing: 3px; 86 | } 87 | .text-box p{ 88 | font-size: 30px; 89 | letter-spacing: 3px; 90 | } 91 | .text-box span{ 92 | background: #fff; 93 | margin-top: 10px; 94 | height: 1px; 95 | width: 30%; 96 | position: absolute; 97 | left: 0; 98 | } 99 | .top{ 100 | position: fixed; 101 | align-items: center; 102 | top: 0; 103 | left: 0; 104 | width: 100%; 105 | color: #fff; 106 | display: flex; 107 | box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); 108 | z-index: 3; 109 | transition: 0s; 110 | } 111 | .logo{ 112 | font-family: cursive; 113 | letter-spacing: 4px; 114 | font-style: italic; 115 | margin-left: 40%; 116 | font-size: 20px; 117 | z-index: 10; 118 | } 119 | .top .book{ 120 | z-index: 10; 121 | margin-left: 20%; 122 | } 123 | .book button{ 124 | background: #fff; 125 | width: 60px; 126 | height: 30px; 127 | } 128 | .book button a{ 129 | color: grey; 130 | } 131 | .book button:hover{ 132 | transform: none; 133 | } 134 | 135 | 136 | .menu{ 137 | padding: 5rem 5% 2rem; 138 | width: 100%; 139 | height: 100vh; 140 | top: 0px; 141 | z-index: 1; 142 | background: #4298ad; 143 | } 144 | .menu.active{ 145 | position: fixed; 146 | } 147 | .luck ul li, .hater ul li{ 148 | list-style: none; 149 | } 150 | .luck ul li a{ 151 | letter-spacing: 3px; 152 | text-decoration: none; 153 | line-height: 2; 154 | font-size: 24px; 155 | color: #fff; 156 | } 157 | .hater{ 158 | display: block; 159 | margin-top: 50px; 160 | } 161 | .hater ul li a{ 162 | letter-spacing: 3px; 163 | text-decoration: none; 164 | color: #fff; 165 | line-height: 2; 166 | } 167 | 168 | 169 | .event{ 170 | width: 100%; 171 | height: auto; 172 | padding: 5rem 3% 2rem; 173 | } 174 | .event p{ 175 | letter-spacing: 2px; 176 | } 177 | .event button{ 178 | background: #fff; 179 | margin-top: 20px; 180 | width: 40%; 181 | height: 50px; 182 | letter-spacing: 2px; 183 | } 184 | .iigan, .iigane{ 185 | width: 100%; 186 | } 187 | .iigan img{ 188 | height: 60vh; 189 | width: 100%; 190 | object-fit: cover; 191 | } 192 | .iigane img{ 193 | height: 60vh; 194 | width: 100%; 195 | object-fit: cover; 196 | margin-left: 30px; 197 | } 198 | .ert{ 199 | text-align: center; 200 | } 201 | .ert h1, .ert h3{ 202 | font-weight: lighter; 203 | letter-spacing: 4px; 204 | margin-top: 20px; 205 | } 206 | .event-content h4{ 207 | text-align: center; 208 | letter-spacing: 4px; 209 | font-weight: lighter; 210 | } 211 | .event-content #rew, .event-content #wer{ 212 | font-style: italic; 213 | font-size: 30px; 214 | width: 30%; 215 | } 216 | .event-content #rew{ 217 | margin-left: 55%; 218 | letter-spacing: 3px; 219 | } 220 | .event-content #wer{ 221 | letter-spacing: 3px; 222 | margin-left: 5%; 223 | } 224 | .grop{ 225 | width: 80%; 226 | line-height: 3; 227 | margin-left: 10%; 228 | margin-bottom: 100px; 229 | } 230 | .grop h2{ 231 | letter-spacing: 3px; 232 | text-align: center; 233 | margin-top: 40px; 234 | } 235 | .grop-text p, .grope-text p{ 236 | letter-spacing: 4px; 237 | text-align: center; 238 | } 239 | .grop-text button{ 240 | margin-left: 30%; 241 | } 242 | .grope{ 243 | width: 100%; 244 | color: #fff; 245 | padding: 0rem 1% 4rem; 246 | display: flex; 247 | } 248 | .grope-text{ 249 | width: 100%; 250 | margin-left: 30px; 251 | text-align: center; 252 | line-height: 2; 253 | margin-top: 20px; 254 | } 255 | .per{ 256 | margin-top: 50px; 257 | } 258 | .per .grope-text{ 259 | margin-top: 0; 260 | } 261 | .hire button{ 262 | margin: 2rem 3% 2rem; 263 | } 264 | .hor h3{ 265 | text-align: center; 266 | font-size: 50px; 267 | margin-bottom: 30px; 268 | letter-spacing: 4px; 269 | margin-top: 60px; 270 | font-weight: lighter; 271 | } 272 | .hor p{ 273 | letter-spacing: 4px; 274 | margin-left: 32%; 275 | } 276 | .hire{ 277 | display: flex; 278 | margin-top: 30px; 279 | align-items: center; 280 | } 281 | .hire h3{ 282 | letter-spacing: 4px; 283 | } 284 | .sigtion{ 285 | height: auto; 286 | width: 100%; 287 | color: #fff; 288 | background: #4298ad; 289 | } 290 | .diseg h3{ 291 | font-size: 30px; 292 | margin-top: 10%; 293 | margin-left: 30px; 294 | padding: 10px; 295 | font-weight: lighter; 296 | } 297 | .sig{ 298 | width: 40%; 299 | margin-left: 30px; 300 | margin-top: 30px; 301 | } 302 | .form-box{ 303 | width: 400px; 304 | height: 400px; 305 | background: transparent; 306 | display: flex; 307 | justify-content: center; 308 | align-items: center; 309 | 310 | } 311 | .inputbox{ 312 | position: relative; 313 | margin: 30px 0; 314 | width: 310px; 315 | border-bottom: 2px solid #fff; 316 | } 317 | .inputbox label{ 318 | position: absolute; 319 | top: 50%; 320 | left: 5px; 321 | transform: translateY(-50%); 322 | color: #fff; 323 | font-size: 1em; 324 | pointer-events: none; 325 | transition: -5s; 326 | } 327 | input:focus ~ label, 328 | input:valid ~ label{ 329 | top: -5px; 330 | transition: .5s; 331 | } 332 | .inputbox input{ 333 | width: 100%; 334 | height: 50px; 335 | background: transparent; 336 | border: none; 337 | outline: none; 338 | font-size: 1em; 339 | padding: 0 35px 0 5px; 340 | color: #fff; 341 | } 342 | .inputbox img{ 343 | position: absolute; 344 | right: 8px; 345 | top: 20px; 346 | width: 30px; 347 | height: 30px; 348 | } 349 | .forget{ 350 | margin: -15px 0 15px; 351 | font-size: .9em; 352 | color: #fff; 353 | display: flex; 354 | justify-content: center; 355 | } 356 | .forget label input{ 357 | margin-right: 3px; 358 | } 359 | .re{ 360 | background-color: #fff; 361 | text-align: center; 362 | padding: 15px; 363 | border: 1px solid #fff; 364 | border-radius: 20px; 365 | } 366 | .re a{ 367 | text-decoration: none; 368 | color: #000; 369 | text-transform: capitalize; 370 | } 371 | .footer{ 372 | background: #fff; 373 | color: #2c3e50; 374 | height: auto; 375 | width: 100%; 376 | } 377 | .footer img{ 378 | height: 20px; 379 | width: 20px; 380 | } 381 | .content{ 382 | padding: 5rem 7% 3rem; 383 | } 384 | .tags{ 385 | line-height: 2; 386 | text-align: center; 387 | } 388 | .tags a{ 389 | color: #4298ad; 390 | display: block; 391 | font-size: 20px; 392 | letter-spacing: 3px; 393 | } 394 | .social{ 395 | text-align: center; 396 | } 397 | .social img{ 398 | margin: 2rem 3% 2rem; 399 | } 400 | .right{ 401 | text-align: center; 402 | } 403 | .right p{ 404 | letter-spacing: 3px; 405 | font-size: 20px; 406 | } 407 | .bttn{ 408 | display: block; 409 | margin-top: 30px; 410 | } 411 | .bttn .bty{ 412 | width: 100%; 413 | display: flex; 414 | padding: 20px; 415 | margin-top: 30px; 416 | border: 2px solid #000; 417 | } 418 | .bttn .bty img{ 419 | margin-left: 45%; 420 | } 421 | .bttn .bty p{ 422 | margin-left: 1%; 423 | } 424 | 425 | @media (max-width: 1280px) { 426 | .menu{ 427 | padding: 10rem 9% 2rem; 428 | } 429 | .logo{ 430 | margin-left: 30%; 431 | } 432 | .text-box{ 433 | top: 400px; 434 | left: 5%; 435 | } 436 | } 437 | @media (max-width: 1024px) { 438 | .menu{ 439 | padding: 4rem 3% 2rem; 440 | } 441 | .logo{ 442 | font-size: 15px; 443 | } 444 | .text-box{ 445 | top: 250px; 446 | } 447 | .head{ 448 | padding: 10px 50px; 449 | } 450 | } 451 | @media (max-width: 768px) { 452 | .top{ 453 | height: 10%; 454 | } 455 | .top .book{ 456 | margin-left: 15%; 457 | } 458 | .logo{ 459 | margin-left: 25%; 460 | } 461 | .toggle.active{ 462 | margin-left: 96%; 463 | background-size: 30px; 464 | } 465 | .menu{ 466 | padding: 15rem 9% 2rem; 467 | } 468 | .iiga img, .iigan img, .iigane img{ 469 | margin-left: 0; 470 | height: 40vh; 471 | width: 100%; 472 | } 473 | .head{ 474 | padding: 25px 50px; 475 | } 476 | .text-box{ 477 | top: 600px; 478 | } 479 | .event-content #rew, .event-content #wer{ 480 | width: 100%; 481 | margin-left: 0; 482 | font-size: 30px; 483 | text-align: center; 484 | margin-bottom: 30px; 485 | } 486 | .grope{ 487 | display: block; 488 | margin-bottom: 50px; 489 | } 490 | .grope-text{ 491 | margin-left: 0; 492 | margin-bottom: 30px; 493 | } 494 | .per .grope-text{ 495 | margin-top: 30px; 496 | } 497 | .hor p{ 498 | margin-left: 0; 499 | text-align: center; 500 | } 501 | .hire{ 502 | display: block; 503 | margin-top: 60px; 504 | text-align: center; 505 | } 506 | } 507 | @media(max-width: 375px){ 508 | .logo{ 509 | letter-spacing: 2px; 510 | margin-left: 15%; 511 | font-size: 10px; 512 | } 513 | .top .book{ 514 | margin-left: 10%; 515 | font-size: 10px; 516 | } 517 | .book button{ 518 | height: 25px; 519 | } 520 | .menu{ 521 | padding: 6rem 5% 0rem; 522 | } 523 | .head{ 524 | padding: 6px 0px; 525 | } 526 | .toggle.active{ 527 | margin-left: 90%; 528 | background-size: 25px; 529 | } 530 | .text-box{ 531 | top: 300px; 532 | width: 300px; 533 | } 534 | .form-box{ 535 | width: 350px; 536 | } 537 | .event button{ 538 | width: 80%; 539 | } 540 | .grop-text button{ 541 | margin-left: 10%; 542 | } 543 | } -------------------------------------------------------------------------------- /css/spa.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | font-family: cursive; 5 | padding: 0; 6 | box-sizing: border-box; 7 | outline: none; 8 | scroll-behavior: smooth; 9 | border: none; 10 | text-decoration: none; 11 | transition: all .2s linear; 12 | } 13 | button:hover{ 14 | transform: scaleX(1.1); 15 | transition: 0.8s; 16 | } 17 | 18 | body{ 19 | background-color: #2c3e50; 20 | overflow-x: hidden; 21 | color: #fff; 22 | } 23 | 24 | .header{ 25 | position: absolute; 26 | right: 0; 27 | width: 100%; 28 | height: 100vh; 29 | overflow: hidden; 30 | background: #111; 31 | z-index: 2; 32 | transition: 0.8s; 33 | } 34 | .toggle{ 35 | position: relative; 36 | width: 50px; 37 | height: 50px; 38 | background: url('../icon/menu.png'); 39 | filter: invert(1); 40 | background-repeat: no-repeat; 41 | background-size: 20px; 42 | background-position: center; 43 | cursor: pointer; 44 | } 45 | .toggle.active{ 46 | background: url('../icon/close.png'); 47 | background-repeat: no-repeat; 48 | margin-left: 95%; 49 | background-size: 25px; 50 | background-position: center; 51 | } 52 | .header.active{ 53 | position: absolute; 54 | right: 100%; 55 | } 56 | .head{ 57 | position: fixed; 58 | top: 0; 59 | left: 0; 60 | width: 100%; 61 | padding: 20px 50px; 62 | z-index: 5; 63 | display: flex; 64 | align-items: center; 65 | justify-content: space-between; 66 | } 67 | #img{ 68 | width: 100%; 69 | height: 100vh; 70 | position: absolute; 71 | left: 50%; 72 | top: 50%; 73 | transform: translate(-50%,-50%); 74 | } 75 | .text-box{ 76 | width: 400px; 77 | position: absolute; 78 | top: 250px; 79 | left: 5%; 80 | color: #fff; 81 | transform: translateY(100px); 82 | } 83 | .text-box h1{ 84 | margin-bottom: 40px; 85 | letter-spacing: 3px; 86 | } 87 | .text-box p{ 88 | font-size: 30px; 89 | letter-spacing: 3px; 90 | } 91 | .text-box span{ 92 | background: #fff; 93 | margin-top: 10px; 94 | height: 1px; 95 | width: 30%; 96 | position: absolute; 97 | left: 0; 98 | } 99 | .top{ 100 | position: fixed; 101 | align-items: center; 102 | top: 0; 103 | left: 0; 104 | width: 100%; 105 | color: #fff; 106 | display: flex; 107 | box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); 108 | z-index: 3; 109 | transition: 0s; 110 | } 111 | .logo{ 112 | font-family: cursive; 113 | letter-spacing: 4px; 114 | font-style: italic; 115 | margin-left: 40%; 116 | font-size: 20px; 117 | z-index: 10; 118 | } 119 | .top .book{ 120 | z-index: 10; 121 | margin-left: 20%; 122 | } 123 | .book button{ 124 | background: #fff; 125 | width: 60px; 126 | height: 30px; 127 | } 128 | .book button a{ 129 | color: grey; 130 | } 131 | .book button:hover{ 132 | transform: none; 133 | } 134 | 135 | .menu{ 136 | padding: 5rem 5% 2rem; 137 | width: 100%; 138 | height: 100vh; 139 | top: 0px; 140 | z-index: 1; 141 | background: #4298ad; 142 | } 143 | .menu.active{ 144 | position: fixed; 145 | } 146 | .luck ul li, .hater ul li{ 147 | list-style: none; 148 | } 149 | .luck ul li a{ 150 | text-decoration: none; 151 | line-height: 2; 152 | letter-spacing: 3px; 153 | font-size: 24px; 154 | color: #fff; 155 | } 156 | .hater{ 157 | display: block; 158 | margin-top: 50px; 159 | } 160 | .hater ul li a{ 161 | text-decoration: none; 162 | letter-spacing: 3px; 163 | color: #fff; 164 | line-height: 2; 165 | } 166 | 167 | 168 | .spa{ 169 | width: 100%; 170 | height: auto; 171 | } 172 | .spa p{ 173 | letter-spacing: 2px; 174 | } 175 | .spa button{ 176 | background: #fff; 177 | margin-top: 20px; 178 | width: 40%; 179 | margin: 2rem 3% 2rem; 180 | height: 50px; 181 | letter-spacing: 2px; 182 | } 183 | .slant{ 184 | background: #b10b0b; 185 | transform-origin: 0 0; 186 | transform: rotate(90deg); 187 | height: 50px; 188 | width: 15%; 189 | } 190 | .slant h3{ 191 | margin-left: 40px; 192 | text-align: center; 193 | font-size: 20px; 194 | } 195 | .iigane, .iigan, .iiga, .iig{ 196 | width: 100%; 197 | } 198 | .iigane img{ 199 | height: 60vh; 200 | padding: 0rem 3% 0rem; 201 | width: 100%; 202 | object-fit: cover; 203 | } 204 | .iigan img{ 205 | height: 60vh; 206 | padding: 0rem 3% 2rem; 207 | width: 100%; 208 | object-fit: cover; 209 | } 210 | .iiga img{ 211 | height: 60vh; 212 | width: 100%; 213 | object-fit: cover; 214 | } 215 | .iig img{ 216 | height: 100vh; 217 | width: 100%; 218 | object-fit: cover; 219 | padding: 10rem 3% 0rem; 220 | } 221 | .lib{ 222 | height: auto; 223 | width: 100%; 224 | padding: 0rem 3% 2rem; 225 | margin-bottom: 50px; 226 | color: #fff; 227 | display: flex; 228 | align-items: center; 229 | } 230 | .lib .spa-text p{ 231 | padding: 0rem 3% 2rem; 232 | text-align: center; 233 | line-height: 2; 234 | width: 50%; 235 | } 236 | .uppen{ 237 | display: flex; 238 | align-items: center; 239 | padding: 3rem 0% 0rem; 240 | justify-content: space-between; 241 | } 242 | .uppen h3{ 243 | width: 30%; 244 | color: #fff; 245 | line-height: 2; 246 | font-size: 30px; 247 | text-align: center; 248 | font-weight: lighter; 249 | letter-spacing: 3px; 250 | text-transform: uppercase; 251 | } 252 | .defa{ 253 | height: auto; 254 | width: 100%; 255 | padding: 0rem 3% 2rem; 256 | color: #fff; 257 | align-items: center; 258 | } 259 | .defa h3{ 260 | width: 30%; 261 | line-height: 2; 262 | text-align: center; 263 | font-weight: lighter; 264 | text-transform: uppercase; 265 | } 266 | .defa p{ 267 | padding: 0rem 3% 0rem; 268 | text-align: center; 269 | line-height: 2; 270 | } 271 | .forte h3{ 272 | letter-spacing: 2px; 273 | font-size: 30px; 274 | } 275 | .forter h3, .forten h3{ 276 | margin-bottom: 30px; 277 | text-align: center; 278 | margin-left: 35%; 279 | letter-spacing: 3px; 280 | margin-top: 10%; 281 | font-size: 30px; 282 | } 283 | .forter .spa-text{ 284 | margin-bottom: 30px; 285 | } 286 | .fort h3{ 287 | font-size: 30px; 288 | font-weight: lighter; 289 | margin-top: 20px; 290 | letter-spacing: 2px; 291 | } 292 | .fort button{ 293 | margin-left: 57%; 294 | } 295 | .hert{ 296 | padding: 0rem 5% 2rem; 297 | } 298 | .sigtion{ 299 | height: auto; 300 | width: 100%; 301 | color: #fff; 302 | background: #4298ad; 303 | } 304 | .diseg h3{ 305 | font-size: 30px; 306 | margin-top: 10%; 307 | margin-left: 30px; 308 | padding: 10px; 309 | font-weight: lighter; 310 | } 311 | .sig{ 312 | width: 40%; 313 | margin-left: 30px; 314 | margin-top: 30px; 315 | } 316 | .form-box{ 317 | width: 400px; 318 | height: 400px; 319 | background: transparent; 320 | display: flex; 321 | justify-content: center; 322 | align-items: center; 323 | 324 | } 325 | .inputbox{ 326 | position: relative; 327 | margin: 30px 0; 328 | width: 310px; 329 | border-bottom: 2px solid #fff; 330 | } 331 | .inputbox label{ 332 | position: absolute; 333 | top: 50%; 334 | left: 5px; 335 | transform: translateY(-50%); 336 | color: #fff; 337 | font-size: 1em; 338 | pointer-events: none; 339 | transition: -5s; 340 | } 341 | input:focus ~ label, 342 | input:valid ~ label{ 343 | top: -5px; 344 | transition: .5s; 345 | } 346 | .inputbox input{ 347 | width: 100%; 348 | height: 50px; 349 | background: transparent; 350 | border: none; 351 | outline: none; 352 | font-size: 1em; 353 | padding: 0 35px 0 5px; 354 | color: #fff; 355 | } 356 | .inputbox img{ 357 | position: absolute; 358 | right: 8px; 359 | top: 20px; 360 | width: 30px; 361 | height: 30px; 362 | } 363 | .forget{ 364 | margin: -15px 0 15px; 365 | font-size: .9em; 366 | color: #fff; 367 | display: flex; 368 | justify-content: center; 369 | } 370 | .forget label input{ 371 | margin-right: 3px; 372 | } 373 | .re{ 374 | background-color: #fff; 375 | text-align: center; 376 | padding: 15px; 377 | border: 1px solid #fff; 378 | border-radius: 20px; 379 | } 380 | .re a{ 381 | text-decoration: none; 382 | color: #000; 383 | text-transform: capitalize; 384 | } 385 | .footer{ 386 | background: #fff; 387 | color: #2c3e50; 388 | height: auto; 389 | width: 100%; 390 | } 391 | .footer img{ 392 | height: 20px; 393 | width: 20px; 394 | } 395 | .content{ 396 | padding: 5rem 7% 3rem; 397 | } 398 | .tags{ 399 | line-height: 2; 400 | text-align: center; 401 | } 402 | .tags a{ 403 | color: #4298ad; 404 | display: block; 405 | font-size: 20px; 406 | letter-spacing: 3px; 407 | } 408 | .social{ 409 | text-align: center; 410 | } 411 | .social img{ 412 | margin: 2rem 3% 2rem; 413 | } 414 | .right{ 415 | text-align: center; 416 | } 417 | .right p{ 418 | letter-spacing: 3px; 419 | font-size: 20px; 420 | } 421 | .bttn{ 422 | display: block; 423 | margin-top: 30px; 424 | } 425 | .bttn .bty{ 426 | width: 100%; 427 | display: flex; 428 | padding: 20px; 429 | margin-top: 30px; 430 | border: 2px solid #000; 431 | } 432 | .bttn .bty img{ 433 | margin-left: 45%; 434 | } 435 | .bttn .bty p{ 436 | margin-left: 1%; 437 | } 438 | 439 | @media (max-width: 1280px) { 440 | .menu{ 441 | padding: 10rem 9% 2rem; 442 | } 443 | .logo{ 444 | margin-left: 30%; 445 | } 446 | .text-box{ 447 | top: 400px; 448 | left: 5%; 449 | } 450 | } 451 | @media (max-width: 1024px) { 452 | .menu{ 453 | padding: 4rem 3% 2rem; 454 | } 455 | .logo{ 456 | font-size: 15px; 457 | } 458 | .text-box{ 459 | top: 250px; 460 | } 461 | .head{ 462 | padding: 10px 50px; 463 | } 464 | } 465 | @media (max-width: 768px) { 466 | .top{ 467 | height: 10%; 468 | } 469 | .top .book{ 470 | margin-left: 15%; 471 | } 472 | .logo{ 473 | margin-left: 25%; 474 | } 475 | .toggle.active{ 476 | margin-left: 96%; 477 | background-size: 30px; 478 | } 479 | .menu{ 480 | padding: 15rem 9% 2rem; 481 | } 482 | .iiga img, .iigan img, .iigane img{ 483 | height: 40vh; 484 | } 485 | .head{ 486 | padding: 25px 50px; 487 | } 488 | .text-box{ 489 | top: 600px; 490 | } 491 | .uppen{ 492 | padding: 3rem 1% 2rem; 493 | } 494 | .lib{ 495 | display: block; 496 | } 497 | .lib .spa-text p{ 498 | width: 100%; 499 | } 500 | .forten h3{ 501 | width: 100%; 502 | margin-left: 0; 503 | text-align: center; 504 | } 505 | .fort button{ 506 | margin-left: 35%; 507 | } 508 | .spa button{ 509 | width: 60%; 510 | } 511 | } 512 | @media(max-width: 375px){ 513 | .logo{ 514 | letter-spacing: 2px; 515 | margin-left: 15%; 516 | font-size: 10px; 517 | } 518 | .top .book{ 519 | margin-left: 10%; 520 | font-size: 10px; 521 | } 522 | .book button{ 523 | height: 25px; 524 | } 525 | .menu{ 526 | padding: 6rem 5% 0rem; 527 | } 528 | .head{ 529 | padding: 6px 0px; 530 | } 531 | .toggle.active{ 532 | margin-left: 90%; 533 | background-size: 25px; 534 | } 535 | .text-box{ 536 | top: 300px; 537 | width: 300px; 538 | } 539 | .form-box{ 540 | width: 350px; 541 | } 542 | .slant{ 543 | display: none; 544 | } 545 | .uppen, .uppen h3{ 546 | width: 100%; 547 | display: block; 548 | text-align: center; 549 | } 550 | .forter h3{ 551 | margin-left: 0; 552 | width: 100%; 553 | } 554 | } -------------------------------------------------------------------------------- /html/hotel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | The Hotel 9 | 10 | 11 | 12 | 13 | 42 | 43 | 65 | 66 | 67 |
68 |
69 |
70 |

Experience Timeless indulgence in the shade of the sunshine city

71 |
72 |

Set in the vibrant heart of Port-Harcourt City, this luxury hotel and spa offers easy access to all that's happening in this dynamic city.

73 |

La Arme has long been regarded as one of the city's top five star hotels. it offer the perfect combination of leafy tranquility and contemporary buzz. whether dining on exotic cape cusine, soaking up the sun or exploring the buzzing streets your time here promises endless memories to cherish.

74 |
75 |
76 |
77 | 78 |
79 |
80 | 81 |
82 |
83 |

At a glance

84 |
85 |
86 |

ROOMS

87 |

Over 200 rooms, suites and cottages

88 |
89 |
90 |

DINING

91 |

Restaurant, bar, chef's table, afternoon tea, garden picnics, harvest table

92 |
93 |
94 |

FEATURES

95 |

Librisa spa, two pools, tennis court, gym hall, children's centre, nine-acre garden

96 |
97 |
98 |

ACTIVITIES

99 |

Historic tours, winery and car excursion and yoga in our gardens

100 |
101 |
102 |

EVENTS

103 |

Business centre, conference facilities, weddings, birthdays, anniversaries and festivals

104 |
105 |
106 |

LOCATION

107 |

50km from the Lagos state International airport

108 |
109 |
110 |
111 |
112 | 113 |
114 |
115 |

EXPLORE

116 |
117 |
118 |
119 |

SWIMMING POOLS

120 |
121 |

There are two heated outdoor swimming pools, available exclusively for guests staying at the hotel.

122 |

The eja pool is situated at the very top of the building. Poolside service is available from september to febuary and a swimming coach can be arranged on request.

123 |

The cabin pool is located in a secluded spot of the hotel gardens. Poolside service available from march to august.

124 |
125 |
126 | 127 |
128 |
129 |
130 |
131 | 132 |
133 |

FITNESS CENTRE

134 |
135 |

The fitness centre is equipped with the latest cardiovascular and weight training equipment. Personal training is available for both guests and visitors to conduct fitness assesments and make tailored programmes. You can also find a balance between indoor and outdoor yoga and pilates. Open 24 hours a day.

136 |
137 |
138 |
139 |

HAIR SALON

140 |
141 |

Our hair salon offers a wide range of sevices, from cutting and coloring to conditioning and styling.

142 |

Mondays to Fridays, 8:00am to 6:00pm.

143 |

Saturdays and Sundays available on request.

144 | 145 |
146 |
147 | 148 |
149 |
150 |
151 |
152 | 153 |
154 |

TENNIS

155 |
156 |

The courts are available exclusively for guests of La Arme. Resident tennis coach Daniel Williams will teach you to improve your serve, volleys and all aspects of your game.

157 |

Daniel teaches all levels, from beginners to advanced players, solo or in groups. Equipment is available to hire from the hotel.

158 | 159 |
160 |
161 |
162 |

THE KID'S CLUB

163 |
164 |

Our centre for children aged 4 to 12 offers a range of eucational videos, games and toys. Organised activities, from competive group games to storytelling, take place throughout the day.

165 |

Available to non-resident hotel guests at no extra charge when visiting Librisa Spa.

166 | 167 |
168 |
169 | 170 |
171 |
172 |
173 |
174 | 175 |
176 |

ACCOMMODATION & ACTIVITIES

177 |
178 |

La Arme is an escape for the whole family. to help you relax with yoour little ones we offer in-room amenities including additional cots, laundary services and babysitting services.

179 |

We also arrange activities that are popular with all ages. Stay within our walls and enjoy family-themed spa treatments or an interactive Chef's Table experience. Or head out to explore the nearby beaches or fascinating museums. Our concierge will be happy to help.

180 |
181 |
182 |
183 | 184 |
185 |
186 |

Stay up to date

187 |
188 |

Get our emails, letters from our five stars hotel, news about De Akpans, offers, and much more. Not too often - just enough.

189 |
190 |
191 |
192 |
193 |
194 | 195 | 196 |
197 |
198 | 199 | 200 |
201 |
202 | 203 |
204 |
205 | Sign Up 206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 | 214 |
215 | 216 | 252 | 253 | 254 | 255 | -------------------------------------------------------------------------------- /html/eve.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | De Akpans Events & Ocassions 9 | 10 | 11 | 12 | 13 | 41 | 42 | 64 | 65 | 66 |
67 |
68 |

A gateway of unexpected pleasures to celebrate life.

69 |
70 |

Special Events In De Akpans Hotel

71 |
72 |

73 | During your life, every moment counts so make the most of them here at De Akpans. Let the spirit of the island melt with our expertise in the organisation of any social or company event: incentive trips, themed parties, team building, e.t.c. From a sailing regatta to Formentera to a fun paintball session, any type of events in De Akpans can be delighful. 74 |

75 | 76 |
77 |
78 |

Weddings

79 |
80 |
81 | 82 |
83 |
84 |

85 | Say I do in Lagos Style. Come to De Akpans if you feel you love the most natural luxury in your life. Celebrate it with a sunset cocktail party on the rooftop. Let the island be your wedding witness. And then, rejoice in a gala dinner at our Events Hall, where you can share your best day ever with up to 300 people. We want to also celebrate your day by offering you a range of wedding services free of charge. And if you want it easy, you can count with the custom service of our highly experienced wedding planner. 86 |

87 | 88 |
89 | 90 |
91 | 92 |
93 |
94 |

Corporate Meeting Facilities

95 |
96 |
97 |

98 | Planning a corporate event will get amazingly easy. You can count with four multi-use function meeting rooms for hire, to hold up to 350 people for larger events. The total space of the main function room located on the rooftop is 325 m2. Let your guests be enlightened: all hotel meeting rooms have natural light, integrating nature and business. Plus the latest technology: touch control system, Wi-Fi, wireless microphones, Hi-Fi audio systems, automatic projectors and press facilities. From gate to gate: the gate of De Akpans is only opposite De Akpans Conference Centre and 15 minutes from the airport. 99 |

100 | 101 |
102 | 103 |
104 | 105 |
106 | 107 |
108 |
109 | 110 |
111 |
112 |

Birthdays

113 |
114 |
115 | 116 |
117 |
118 |

119 | Say I do in Lagos Style. Come to De Akpans if you feel you love the most natural luxury in your life. Celebrate it with a sunset cocktail party on the rooftop. Let the island be your wedding witness. And then, rejoice in a gala dinner at our Events Hall, where you can share your best day ever with up to 300 people. We want to also celebrate your day by offering you a range of wedding services free of charge. And if you want it easy, you can count with the custom service of our highly experienced wedding planner. 120 |

121 | 122 |
123 | 124 |
125 | 126 |
127 |
128 |

Anniversaries

129 |
130 |
131 |

132 | Say I do in Lagos Style. Come to De Akpans if you feel you love the most natural luxury in your life. Celebrate it with a sunset cocktail party on the rooftop. Let the island be your wedding witness. And then, rejoice in a gala dinner at our Events Hall, where you can share your best day ever with up to 300 people. We want to also celebrate your day by offering you a range of wedding services free of charge. And if you want it easy, you can count with the custom service of our highly experienced wedding planner. 133 |

134 | 135 |
136 | 137 |
138 | 139 |
140 |
141 | 142 |
143 |
144 |
145 |
146 | 147 |
148 |

Rebecca O'connor As Tina

149 |

Bank Holiday Sunday, May 18th

150 |

De Akpans

151 |
152 |
153 |
154 |

155 | Be prepared to stand in your seats as Rebecca O'Connor delivers her flawless rendition of Tina Turner's greatest hits including 'Nutbush City Limits', 'Proud Mary', 'River Deep', 'Private Dancer', 'When the Heartache is Over', 'Better Be Good' and of course her anthem 'Simply the Best'. 156 |

157 | 158 |
159 | 160 |
161 | 162 |
163 |
164 |
165 |

PRIVATE HIRE

166 |

Let us help you plan an unforgettable event.

167 |
168 |
169 |

STAGE YOUR SHOWSTOPPER

170 | 171 |

OUR VENUES SET THE SCENE

172 | 173 |

GOT A SPECIAL REQUEST?

174 | 175 |
176 |
177 |
178 |

Stay up to date

179 |
180 |

Get our emails, letters from our five stars hotel, news about De Akpans, offers, and much more. Not too often - just enough.

181 |
182 |
183 |
184 |
185 |
186 | 187 | 188 |
189 |
190 | 191 | 192 |
193 |
194 | 195 |
196 |
197 | Sign Up 198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 | 207 | 243 | 244 | 245 | 246 | -------------------------------------------------------------------------------- /css/dining.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | font-family: cursive; 5 | padding: 0; 6 | box-sizing: border-box; 7 | outline: none; 8 | scroll-behavior: smooth; 9 | border: none; 10 | text-decoration: none; 11 | transition: all .2s linear; 12 | } 13 | 14 | button:hover{ 15 | transform: scaleX(1.1); 16 | transition: 0.8s; 17 | } 18 | 19 | body{ 20 | background-color: #2c3e50; 21 | overflow-x: hidden; 22 | color: #fff; 23 | } 24 | 25 | .header{ 26 | position: absolute; 27 | right: 0; 28 | width: 100%; 29 | height: 100vh; 30 | overflow: hidden; 31 | background: #111; 32 | z-index: 2; 33 | transition: 0.8s; 34 | } 35 | .toggle{ 36 | position: relative; 37 | width: 50px; 38 | height: 50px; 39 | background: url('../icon/menu.png'); 40 | filter: invert(1); 41 | background-repeat: no-repeat; 42 | background-size: 20px; 43 | background-position: center; 44 | cursor: pointer; 45 | } 46 | .toggle.active{ 47 | background: url('../icon/close.png'); 48 | background-repeat: no-repeat; 49 | margin-left: 95%; 50 | background-size: 25px; 51 | background-position: center; 52 | } 53 | .header.active{ 54 | position: absolute; 55 | right: 100%; 56 | } 57 | .head{ 58 | position: fixed; 59 | top: 0; 60 | left: 0; 61 | width: 100%; 62 | padding: 20px 50px; 63 | z-index: 5; 64 | display: flex; 65 | align-items: center; 66 | justify-content: space-between; 67 | } 68 | #img{ 69 | width: 100%; 70 | height: 100vh; 71 | position: absolute; 72 | left: 50%; 73 | top: 50%; 74 | transform: translate(-50%,-50%); 75 | } 76 | .text-box{ 77 | width: 500px; 78 | position: absolute; 79 | top: 250px; 80 | left: 5%; 81 | color: #fff; 82 | transform: translateY(100px); 83 | } 84 | .text-box h1{ 85 | margin-bottom: 40px; 86 | letter-spacing: 3px; 87 | } 88 | .text-box p{ 89 | font-size: 30px; 90 | letter-spacing: 3px; 91 | } 92 | .text-box span{ 93 | background: #fff; 94 | margin-top: 10px; 95 | height: 1px; 96 | width: 30%; 97 | position: absolute; 98 | left: 0; 99 | } 100 | .top{ 101 | position: fixed; 102 | align-items: center; 103 | top: 0; 104 | left: 0; 105 | width: 100%; 106 | color: #fff; 107 | display: flex; 108 | box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); 109 | z-index: 3; 110 | transition: 0s; 111 | } 112 | .logo{ 113 | font-family: cursive; 114 | letter-spacing: 4px; 115 | font-style: italic; 116 | margin-left: 40%; 117 | font-size: 20px; 118 | z-index: 10; 119 | } 120 | .top .book{ 121 | z-index: 10; 122 | margin-left: 20%; 123 | } 124 | .book button{ 125 | background: #fff; 126 | width: 60px; 127 | height: 30px; 128 | } 129 | .book button a{ 130 | color: grey; 131 | } 132 | .book button:hover{ 133 | transform: none; 134 | } 135 | 136 | .menu{ 137 | padding: 5rem 5% 2rem; 138 | width: 100%; 139 | height: 100vh; 140 | top: 0px; 141 | z-index: 1; 142 | background: #4298ad; 143 | } 144 | .menu.active{ 145 | position: fixed; 146 | } 147 | .luck ul li, .hater ul li{ 148 | list-style: none; 149 | } 150 | .luck ul li a{ 151 | text-decoration: none; 152 | line-height: 2; 153 | letter-spacing: 3px; 154 | font-size: 24px; 155 | color: #fff; 156 | } 157 | .hater{ 158 | display: block; 159 | margin-top: 50px; 160 | } 161 | .hater ul li a{ 162 | text-decoration: none; 163 | color: #fff; 164 | line-height: 2; 165 | letter-spacing: 3px; 166 | } 167 | 168 | 169 | .dine{ 170 | width: 100%; 171 | height: auto; 172 | padding: 5rem 3% 2rem; 173 | } 174 | .dine p{ 175 | letter-spacing: 2px; 176 | } 177 | .dine button{ 178 | background: #fff; 179 | margin-top: 20px; 180 | width: 40%; 181 | margin: 2rem 3% 2rem; 182 | height: 50px; 183 | letter-spacing: 2px; 184 | } 185 | .iigan{ 186 | width: 100%; 187 | } 188 | .iigan img{ 189 | height: 60vh; 190 | width: 100%; 191 | object-fit: cover; 192 | } 193 | .wort{ 194 | height: auto; 195 | width: 100%; 196 | padding: 3rem 3% 2rem; 197 | margin-bottom: 50px; 198 | color: #fff; 199 | display: flex; 200 | align-items: center; 201 | } 202 | .wort .dine-text{ 203 | width: 80%; 204 | } 205 | .wor h3{ 206 | font-size: 40px; 207 | margin-left: 10px; 208 | margin-bottom: 20px; 209 | letter-spacing: 3px; 210 | font-weight: lighter; 211 | } 212 | .wor p{ 213 | letter-spacing: 4px; 214 | text-align: center; 215 | line-height: 2; 216 | } 217 | .mom h3{ 218 | text-align: center; 219 | font-style: italic; 220 | font-size: 30px; 221 | margin-left: 80%; 222 | font-weight: lighter; 223 | letter-spacing: 3px; 224 | margin-bottom: 10px; 225 | } 226 | .fod{ 227 | display: flex; 228 | align-items: center; 229 | } 230 | .fod .dine-text{ 231 | width: 50%; 232 | margin-bottom: 10px; 233 | text-align: center; 234 | } 235 | .fod .dine-text p{ 236 | letter-spacing: 4px; 237 | line-height: 2; 238 | } 239 | .mom .iigan img{ 240 | width: 60%; 241 | margin-left: 40%; 242 | } 243 | .eate{ 244 | padding: 5rem 0% 3rem; 245 | } 246 | .te{ 247 | height: auto; 248 | width: 100%; 249 | padding: 3rem 3% 2rem; 250 | margin-bottom: 50px; 251 | color: #fff; 252 | display: flex; 253 | align-items: center; 254 | } 255 | .eate .dine-text{ 256 | width: 80%; 257 | } 258 | .eate h3{ 259 | font-size: 40px; 260 | margin-left: 65%; 261 | margin-top: 40px; 262 | letter-spacing: 3px; 263 | font-weight: lighter; 264 | } 265 | .te p, .sun p{ 266 | letter-spacing: 4px; 267 | margin-left: 80px; 268 | text-align: center; 269 | line-height: 2; 270 | } 271 | .te button{ 272 | margin-left: 38%; 273 | } 274 | .sun h3{ 275 | text-align: center; 276 | font-size: 50px; 277 | margin-bottom: 40px; 278 | letter-spacing: 4px; 279 | font-weight: lighter; 280 | } 281 | .sun .dine-text{ 282 | text-align: center; 283 | width: 80%; 284 | margin-left: 10%; 285 | margin-top: 20px; 286 | } 287 | .sun .iigan img{ 288 | height: 60vh; 289 | width: 100%; 290 | object-fit: cover; 291 | padding: 0rem 15% 0rem; 292 | } 293 | .sis h3{ 294 | text-align: center; 295 | font-size: 50px; 296 | margin-bottom: 30px; 297 | letter-spacing: 4px; 298 | margin-top: 60px; 299 | font-weight: lighter; 300 | } 301 | .sis .dine-text #iou{ 302 | letter-spacing: 3px; 303 | text-align: center; 304 | margin-left: 10%; 305 | line-height: 2; 306 | width: 80%; 307 | } 308 | .youir{ 309 | padding: 3rem 3% 2rem; 310 | display: flex; 311 | align-items: center; 312 | } 313 | .tim{ 314 | width: 100%; 315 | display: block; 316 | } 317 | .tim ul{ 318 | line-height: 3; 319 | list-style: none; 320 | } 321 | .tim ul li:nth-of-type(1){ 322 | font-size: 40px; 323 | margin-left: 20px; 324 | } 325 | .tim ul li, .tim p{ 326 | margin-left: 20px; 327 | font-size: 20px; 328 | letter-spacing: 4px; 329 | } 330 | .u{ 331 | display: flex; 332 | align-items: center; 333 | } 334 | .u a{ 335 | margin-left: 10px; 336 | font-size: 20px; 337 | color: #4298ad; 338 | } 339 | .u div{ 340 | background: #fff; 341 | margin-left: 10px; 342 | height: 20px; 343 | width: 1px; 344 | } 345 | .gro{ 346 | margin-left: 10px; 347 | } 348 | .sis button{ 349 | margin-left: 50%; 350 | margin-top: 0; 351 | width: 47%; 352 | } 353 | .long h3{ 354 | text-align: center; 355 | font-size: 50px; 356 | margin-bottom: 30px; 357 | letter-spacing: 4px; 358 | margin-top: 60px; 359 | font-weight: lighter; 360 | } 361 | .long .dine-text{ 362 | text-align: center; 363 | margin-top: 10px; 364 | } 365 | .long .dine-text p{ 366 | letter-spacing: 3px; 367 | line-height: 2; 368 | } 369 | .long .dine-text .u{ 370 | margin-left: 40%; 371 | margin-top: 20px; 372 | } 373 | .sigtion{ 374 | height: auto; 375 | width: 100%; 376 | color: #fff; 377 | background: #4298ad; 378 | } 379 | .diseg h3{ 380 | font-size: 30px; 381 | margin-top: 10%; 382 | margin-left: 30px; 383 | padding: 10px; 384 | font-weight: lighter; 385 | } 386 | .sig{ 387 | width: 40%; 388 | margin-left: 30px; 389 | margin-top: 30px; 390 | } 391 | .form-box{ 392 | width: 400px; 393 | height: 400px; 394 | background: transparent; 395 | display: flex; 396 | justify-content: center; 397 | align-items: center; 398 | 399 | } 400 | .inputbox{ 401 | position: relative; 402 | margin: 30px 0; 403 | width: 310px; 404 | border-bottom: 2px solid #fff; 405 | } 406 | .inputbox label{ 407 | position: absolute; 408 | top: 50%; 409 | left: 5px; 410 | transform: translateY(-50%); 411 | color: #fff; 412 | font-size: 1em; 413 | pointer-events: none; 414 | transition: -5s; 415 | } 416 | input:focus ~ label, 417 | input:valid ~ label{ 418 | top: -5px; 419 | transition: .5s; 420 | } 421 | .inputbox input{ 422 | width: 100%; 423 | height: 50px; 424 | background: transparent; 425 | border: none; 426 | outline: none; 427 | font-size: 1em; 428 | padding: 0 35px 0 5px; 429 | color: #fff; 430 | } 431 | .inputbox img{ 432 | position: absolute; 433 | right: 8px; 434 | top: 20px; 435 | width: 30px; 436 | height: 30px; 437 | } 438 | .forget{ 439 | margin: -15px 0 15px; 440 | font-size: .9em; 441 | color: #fff; 442 | display: flex; 443 | justify-content: center; 444 | } 445 | .forget label input{ 446 | margin-right: 3px; 447 | } 448 | .re{ 449 | background-color: #fff; 450 | text-align: center; 451 | padding: 15px; 452 | border: 1px solid #fff; 453 | border-radius: 20px; 454 | } 455 | .re a{ 456 | text-decoration: none; 457 | color: #000; 458 | text-transform: capitalize; 459 | } 460 | .footer{ 461 | background: #fff; 462 | color: #2c3e50; 463 | height: auto; 464 | width: 100%; 465 | } 466 | .footer img{ 467 | height: 20px; 468 | width: 20px; 469 | } 470 | .content{ 471 | padding: 5rem 7% 3rem; 472 | } 473 | .tags{ 474 | line-height: 2; 475 | text-align: center; 476 | } 477 | .tags a{ 478 | color: #4298ad; 479 | display: block; 480 | font-size: 20px; 481 | letter-spacing: 3px; 482 | } 483 | .social{ 484 | text-align: center; 485 | } 486 | .social img{ 487 | margin: 2rem 3% 2rem; 488 | } 489 | .right{ 490 | text-align: center; 491 | } 492 | .right p{ 493 | letter-spacing: 3px; 494 | font-size: 20px; 495 | } 496 | .bttn{ 497 | display: block; 498 | margin-top: 30px; 499 | } 500 | .bttn .bty{ 501 | width: 100%; 502 | display: flex; 503 | padding: 20px; 504 | margin-top: 30px; 505 | border: 2px solid #000; 506 | } 507 | .bttn .bty img{ 508 | margin-left: 45%; 509 | } 510 | .bttn .bty p{ 511 | margin-left: 1%; 512 | } 513 | 514 | @media (max-width: 1280px) { 515 | .menu{ 516 | padding: 10rem 9% 2rem; 517 | } 518 | .logo{ 519 | margin-left: 30%; 520 | } 521 | .text-box{ 522 | top: 400px; 523 | left: 5%; 524 | } 525 | } 526 | @media (max-width: 1024px) { 527 | .menu{ 528 | padding: 4rem 3% 2rem; 529 | } 530 | .logo{ 531 | font-size: 15px; 532 | } 533 | .text-box{ 534 | top: 250px; 535 | } 536 | .head{ 537 | padding: 10px 50px; 538 | } 539 | } 540 | @media (max-width: 768px) { 541 | .top{ 542 | height: 10%; 543 | } 544 | .top .book{ 545 | margin-left: 15%; 546 | } 547 | .logo{ 548 | margin-left: 25%; 549 | } 550 | .toggle.active{ 551 | margin-left: 96%; 552 | background-size: 30px; 553 | } 554 | .menu{ 555 | padding: 15rem 9% 2rem; 556 | } 557 | .text-box{ 558 | top: 600px; 559 | } 560 | .iiga img, .iigan img, .iigane img, .mom .iigan img, .sun .iigan img{ 561 | padding: 0rem 0% 0rem; 562 | margin-left: 0; 563 | height: 40vh; 564 | width: 100%; 565 | } 566 | .head{ 567 | padding: 25px 50px; 568 | } 569 | .wort .dine-text, .fod .dine-text, .sun .dine-text, .tim{ 570 | margin-bottom: 20px; 571 | margin-left: 0; 572 | text-align: center; 573 | width: 100%; 574 | } 575 | .fod, .wort, .te, .youir{ 576 | display: block; 577 | } 578 | .mom h3, .eate h3, .wor h3{ 579 | margin-left: 0; 580 | text-align: center; 581 | } 582 | .gro{ 583 | margin-left: 25%; 584 | } 585 | .u, .long .dine-text .u{ 586 | margin-left: 30%; 587 | } 588 | .sis button{ 589 | margin-left: 28%; 590 | margin-top: 20px; 591 | } 592 | } 593 | @media(max-width: 375px){ 594 | .logo{ 595 | letter-spacing: 2px; 596 | margin-left: 15%; 597 | font-size: 10px; 598 | } 599 | .top .book{ 600 | margin-left: 10%; 601 | font-size: 10px; 602 | } 603 | .book button{ 604 | height: 25px; 605 | } 606 | .menu{ 607 | padding: 6rem 5% 0rem; 608 | } 609 | .head{ 610 | padding: 6px 0px; 611 | } 612 | .toggle.active{ 613 | margin-left: 90%; 614 | background-size: 25px; 615 | } 616 | .text-box{ 617 | top: 250px; 618 | width: 300px; 619 | } 620 | .form-box{ 621 | width: 350px; 622 | } 623 | .eate .dine-text, .eate .dine-text , .sun p{ 624 | width: 100%; 625 | margin-left: 0; 626 | } 627 | .te button{ 628 | margin-left: 30%; 629 | } 630 | .gro, .u, .long .dine-text .u{ 631 | margin-left: 5%; 632 | align-items: center; 633 | text-align: center; 634 | } 635 | } -------------------------------------------------------------------------------- /html/gal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | De Akpans Gallery 9 | 10 | 11 | 12 | 40 | 41 | 63 | 64 |
65 |
66 |

An Image Presentation of De Akpans Hotel

67 |
68 |
69 | 70 |

The Hotel

71 |
72 |
73 | 74 |

Presidential Suite

75 |
76 |
77 |
78 |
79 | 80 |

Spa

81 |
82 |
83 | 84 |

Gastronomy

85 |
86 |
87 |
88 |
89 | 90 |

Junior Suite Sea View

91 |
92 |
93 | 94 |

Grand Corner Suite

95 |
96 |
97 |
98 |
99 | 100 |

Oasis

101 |
102 |
103 | 104 |

Pool

105 |
106 |
107 |
108 |
109 | 110 |

Spa

111 |
112 |
113 | 114 |

Corner Suite

115 |
116 |
117 |
118 |
119 | 120 |

Dreamer

121 |
122 |
123 | 124 |

Premier

125 |
126 |
127 |
128 |
129 | 130 |

Gastronomy

131 |
132 |
133 | 134 |

The Hotel

135 |
136 |
137 |
138 |
139 | 140 |

Kid's Club

141 |
142 |
143 | 144 |

Fitness Hall

145 |
146 |
147 |
148 |
149 | 150 |

Hair Saloon

151 |
152 |
153 | 154 |

Deluxe

155 |
156 |
157 |
158 |
159 | 160 |

Oasis

161 |
162 |
163 | 164 |

Lounge

165 |
166 |
167 |
168 |
169 | 170 |

Kid's Club

171 |
172 |
173 | 174 |

Premier Bay

175 |
176 |
177 |
178 |
179 | 180 |

Pool

181 |
182 |
183 | 184 |

Hair Saloon

185 |
186 |
187 |
188 |
189 | 190 |

Fitness Hall

191 |
192 |
193 | 194 |

Lounge

195 |
196 |
197 |
198 |
199 | 200 |

Oasis

201 |
202 |
203 | 204 |

Cloud 9 Suite

205 |
206 |
207 |
208 |
209 | 210 |

Spa

211 |
212 |
213 | 214 |

Cloud 9 Suite Sea View

215 |
216 |
217 |
218 |
219 | 220 |

Gastronomy

221 |
222 |
223 | 224 |

The Hotel

225 |
226 |
227 |
228 |
229 | 230 |

Pool

231 |
232 |
233 | 234 |

Oasis

235 |
236 |
237 |
238 |
239 | 240 |

Conference Hall

241 |
242 |
243 | 244 |

Lounge

245 |
246 |
247 |
248 |
249 | 250 |

Wedding Hall

251 |
252 |
253 | 254 |

Birthday Hall

255 |
256 |
257 |
258 |
259 | 260 |

Anniversary Hall

261 |
262 |
263 | 264 |

The Hotel

265 |
266 |
267 |
268 |
269 |

Stay up to date

270 |
271 |

Get our emails, letters from our five stars hotel, news about De Akpans, offers, and much more. Not too often - just enough.

272 |
273 |
274 |
275 |
276 |
277 | 278 | 279 |
280 |
281 | 282 | 283 |
284 |
285 | 286 |
287 |
288 | Sign Up 289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 | 298 | 334 | 335 | 336 | 337 | -------------------------------------------------------------------------------- /html/room.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Book Your Room Now 9 | 10 | 11 | 12 | 40 | 41 | 63 | 64 |
65 |
66 |

Rooms

67 |
68 |

69 | De Akpans Hotel have a range of guest bedrooms and cottages available. Both in the traditional part of the hotel and the mordern wing. 70 |

71 |

72 | The 5 star De Akpans Hotel, Lagos boats over 200 guest bedrooms and cottages which have been newly refurbished since the begin of 2020. 73 |

74 |

75 | De Akpans began as a 75 bedroom hotel and has since grown to over 200 bedrooms and cottages with the addition of the mordern wing, constructed just over 5 years ago. All rooms have been designed to a sleek mordernized top notch. Cottages are equipped with flat screen TV's, tea & coffee making facilities and free WI-FI to name but a few of the perks. 76 |

77 |

78 | If it is for a special occassion then why not make your stay a memorable one by upgrading to our Executive Suites, with amazing views over Drumbee Woods. We have ample rooms for families with rooms consisting of anything from a Double and a Single bed to having two double beds and two single beds making our rooms ideal for those breaks with the children. 79 |

80 |

81 | We also have rooms for our disabled guests, which are easily accessible from all areas of the Hotel. 82 |

83 |
84 |
85 |

Dreamer

86 |
87 | 88 |
89 |
90 |
91 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

92 |
93 |
94 |
    95 |
  • 34 - 40 sqm (inc. terrace)
    • 96 |
  • Double beds
    • 97 |
  • Bathtub
    • 98 |
  • Pillow menu
    • 99 |
  • Terrace
    • 100 |
  • Unlimited access to spa
    • 101 |
  • High velocity wifi
    • 102 |
103 |
104 |
105 |
106 | 107 | 108 |
109 |
110 | 111 |
112 |

Premier

113 |
114 | 115 |
116 |
117 |
118 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

119 |
120 |
121 |
    122 |
  • 34 - 40 sqm (inc. terrace)
    • 123 |
  • Double beds
    • 124 |
  • Bathtub
    • 125 |
  • Pillow menu
    • 126 |
  • Terrace
    • 127 |
  • Unlimited access to spa
    • 128 |
  • High velocity wifi
    • 129 |
130 |
131 |
132 |
133 | 134 | 135 |
136 |
137 | 138 |
139 |

Deluxe

140 |
141 | 142 |
143 |
144 |
145 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

146 |
147 |
148 |
    149 |
  • 34 - 40 sqm (inc. terrace)
    • 150 |
  • Double beds
    • 151 |
  • Bathtub
    • 152 |
  • Pillow menu
    • 153 |
  • Terrace
    • 154 |
  • Unlimited access to spa
    • 155 |
  • High velocity wifi
    • 156 |
157 |
158 |
159 |
160 | 161 | 162 |
163 |
164 | 165 |
166 |

Premier Bay

167 |
168 | 169 |
170 |
171 |
172 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

173 |
174 |
175 |
    176 |
  • 34 - 40 sqm (inc. terrace)
    • 177 |
  • Double beds
    • 178 |
  • Bathtub
    • 179 |
  • Pillow menu
    • 180 |
  • Terrace
    • 181 |
  • Unlimited access to spa
    • 182 |
  • High velocity wifi
    • 183 |
184 |
185 |
186 |
187 | 188 | 189 |
190 |
191 | 192 |
193 |

Junior Suite Pool View

194 |
195 | 196 |
197 |
198 |
199 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

200 |
201 |
202 |
    203 |
  • 34 - 40 sqm (inc. terrace)
    • 204 |
  • Double beds
    • 205 |
  • Bathtub
    • 206 |
  • Pillow menu
    • 207 |
  • Terrace
    • 208 |
  • Unlimited access to spa
    • 209 |
  • High velocity wifi
    • 210 |
211 |
212 |
213 |
214 | 215 | 216 |
217 |
218 | 219 |
220 |

Corner Suite

221 |
222 | 223 |
224 |
225 |
226 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

227 |
228 |
229 |
    230 |
  • 34 - 40 sqm (inc. terrace)
    • 231 |
  • Double beds
    • 232 |
  • Bathtub
    • 233 |
  • Pillow menu
    • 234 |
  • Terrace
    • 235 |
  • Unlimited access to spa
    • 236 |
  • High velocity wifi
    • 237 |
238 |
239 |
240 |
241 | 242 | 243 |
244 |
245 | 246 |
247 |

Junior Suite Sea View

248 |
249 | 250 |
251 |
252 |
253 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

254 |
255 |
256 |
    257 |
  • 34 - 40 sqm (inc. terrace)
    • 258 |
  • Double beds
    • 259 |
  • Bathtub
    • 260 |
  • Pillow menu
    • 261 |
  • Terrace
    • 262 |
  • Unlimited access to spa
    • 263 |
  • High velocity wifi
    • 264 |
265 |
266 |
267 |
268 | 269 | 270 |
271 |
272 | 273 |
274 |

Cloud 9 Suite

275 |
276 | 277 |
278 |
279 |
280 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

281 |
282 |
283 |
    284 |
  • 34 - 40 sqm (inc. terrace)
    • 285 |
  • Double beds
    • 286 |
  • Bathtub
    • 287 |
  • Pillow menu
    • 288 |
  • Terrace
    • 289 |
  • Unlimited access to spa
    • 290 |
  • High velocity wifi
    • 291 |
292 |
293 |
294 |
295 | 296 | 297 |
298 |
299 | 300 |
301 |

Cloud 9 Suite Sea View

302 |
303 | 304 |
305 |
306 |
307 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

308 |
309 |
310 |
    311 |
  • 34 - 40 sqm (inc. terrace)
    • 312 |
  • Double beds
    • 313 |
  • Bathtub
    • 314 |
  • Pillow menu
    • 315 |
  • Terrace
    • 316 |
  • Unlimited access to spa
    • 317 |
  • High velocity wifi
    • 318 |
319 |
320 |
321 |
322 | 323 | 324 |
325 |
326 | 327 |
328 |

Cloud 9 Corner Suite

329 |
330 | 331 |
332 |
333 |
334 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

335 |
336 |
337 |
    338 |
  • 34 - 40 sqm (inc. terrace)
    • 339 |
  • Double beds
    • 340 |
  • Bathtub
    • 341 |
  • Pillow menu
    • 342 |
  • Terrace
    • 343 |
  • Unlimited access to spa
    • 344 |
  • High velocity wifi
    • 345 |
346 |
347 |
348 |
349 | 350 | 351 |
352 |
353 | 354 |
355 |

Grand Corner Suite

356 |
357 | 358 |
359 |
360 |
361 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

362 |
363 |
364 |
    365 |
  • 34 - 40 sqm (inc. terrace)
    • 366 |
  • Double beds
    • 367 |
  • Bathtub
    • 368 |
  • Pillow menu
    • 369 |
  • Terrace
    • 370 |
  • Unlimited access to spa
    • 371 |
  • High velocity wifi
    • 372 |
373 |
374 |
375 |
376 | 377 | 378 |
379 |
380 | 381 |
382 |

Presidential Suite

383 |
384 | 385 |
386 |
387 |
388 |

Calling all lovers of the Feng Shui principles to enter these interiore made of natural elements for their most intimate and pleasant experience. Lose yourself in your privacy while the sun ligghts up the iridescent tiles recreating seashells... and enter your magical dreams.

389 |
390 |
391 |
    392 |
  • 34 - 40 sqm (inc. terrace)
    • 393 |
  • Double beds
    • 394 |
  • Bathtub
    • 395 |
  • Pillow menu
    • 396 |
  • Terrace
    • 397 |
  • Unlimited access to spa
    • 398 |
  • High velocity wifi
    • 399 |
400 |
401 |
402 |
403 | 404 | 405 |
406 |
407 |
408 | 409 |
410 |
411 |

Stay up to date

412 |
413 |

Get our emails, letters from our five stars hotel, news about De Akpans, offers, and much more. Not too often - just enough.

414 |
415 |
416 |
417 |
418 |
419 | 420 | 421 |
422 |
423 | 424 | 425 |
426 |
427 | 428 |
429 |
430 | Sign Up 431 |
432 |
433 |
434 |
435 |
436 |
437 |
438 | 439 | 475 | 476 | 477 | 478 | --------------------------------------------------------------------------------