2018/06/04

礁溪老爺得天露營車體驗



前陣子收到礁溪老爺的廣告單邀請卡,想說沒有帶小孩露過營,趁6/1開幕當天搶先體驗看看,趕緊打電話預約。

露營車有兩種床型,不同在於其中一邊是上下鋪或是平鋪。考量小孩年紀,原本應該要選平鋪,但晚了一步只能訂到上下鋪的車子。半夜很慘,老大從上鋪滾下來,還好事前做一些防範,問題不大。所以能選平鋪就不要考慮上下鋪。

我們下午大概兩點多到。目前露營車有20輛,第1輛房務使用,訂到的第二車離接待區最近,預約騎腳踏車和兒童電動車都很方便。除了車子免費租借外,白天也可以預約免費高爾夫球一次(打一場需40~50分鐘)。

左邊露營車外面放兩張椅子和一張木桌,晚上開車邊的燈喝著咖啡很有情調。右邊是用餐區,早晚餐會有專人送來。

另一側提供戶外沖水設備。不過戶外都是草皮,弄髒的機會不大就是。

露營車住宿不用到本館Check in,直接進高夫爾球停車場,原有的招待中心就可以登記入住和離房。服務人員會給本館設施使用券,以及活動時間表。建議下午三點報到,整理一下就可以參加三點半的DIY活動。

剛進車內建議先不用開冷氣,將窗戶打開讓空氣流通一小時,再視情況決定是否關窗開冷氣。門邊是小廚房,上面放煮咖啡器具、下方放吹風機。左邊上面小冰箱、下面衣櫃(浴毛巾也放裡面)。

露營車不提供礦泉水,廚房左邊的水龍頭是RO逆滲透,不過我還是會煮一遍再喝。

照片中的小梯椅有兩個功能,一個是當上鋪的梯子、另一個是當客廳的桌子。

下鋪是L型,照片中這一側比較窄,主要當沙發使用。

車窗可以拉紗窗和遮陽簾,照片中是兩個一起使用,中間用夾子固定。

坐椅對面就是電視,不知道是不是錯覺,畫質比在本館房間內差。不過在戶外活動,不太會去開電視就是!

車子另一邊是主臥,有兩個窗子,床也很舒適,不輸本館房間。

盥洗室不大,毛巾可以掛這裡面。

浴室更小,所以浴巾放外面櫃子裡,毛巾平常不掛在裡面。我是選擇晚上帶小朋友到本館泡溫泉,順便在那邊洗完澡再回來。

營火共炊區在高爾夫球場南邊,DIY活動都在這裡。

晚餐會有兩批服務人員,第一批是預備廚具,餐具和露營燈要房客自行從露營車內拿出來。(熊大燈是我們家自己帶的)
第二批是服務人員帶食物過來,先用鑄鐵鍋煎牛排和香腸給大家吃,再放一點蔬菜和高湯煮火鍋,後續就由房客自行料理。(一開始有點像都市小朋友去露營,老師幫忙煮東西的感覺...)

露營車旁邊的帳篷用餐區也有日光燈,晚上氣氛還滿不錯的!

早上服務人員一樣會用高爾夫球車載早餐盒來。

很清爽的早餐,矮罐裝玉米濃湯、高罐裝無糖紅茶。

如果下次再預訂礁溪老爺,應該還是會選露營車。本館蘭陽景觀房的夜景不像幾年前那麼好看,山景房幾乎沒有景觀可言。食物就更不用說了,岩波庭比不上火車站附近的年年小館,自助餐的菜色也馬馬虎虎。戶外溫泉我通常也只會使用一次,不如找幾個家庭一起租露營車,在外面吃簡單料理,感覺更舒適、開心。

床型盡量不要選上下鋪,原本就預期老大會從床上摔下來,所以把梯子搬走,在下面放了抱枕。忘了建議飯店加個木製欄桿,如果選到這床型又要考量安全的話,可以把上鋪的床墊放到電視機前面的地板睡。晚上睡覺建議關浴室和盥洗室的抽風機,雖然音量不大,但在野外的車內,還是會感覺到小小的震動。

插座裡外都滿多的,要充電或使用電器很方便。車門也都是密碼控制,安全性夠,由於不是使用房卡自動斷電,出門前記得關燈和冷氣。

飯店有提供防蚊液,比較建議視情況決定要不要噴。服務人員通常都會請房客先噴,但實際蚊子不多,頂多就吃晚餐時一、兩隻在飛而已,我們不噴也沒有多大影響。所以看季節和天候決定再說,畢竟這種東西噴在身上和衣服也不太好。

當初在預訂露營車時,知道一台車不便宜,飯店雖然說會視情況決定是否再添購新的車子,不過現在已經佔了近一半的場地,未來大概也是一房難求,如果有興趣的話,最好還是趁早預訂玩看看囉!

2018/04/02

漢堡選單



這是六角學院老師提供的範例。主要功能為PC頁面時顯示右上方選單,Mobile頁面時隱藏起來,直至點選menu才會在下面列出選單來。

詳細講解請訂閱六角學院的教材,以下只放畫面和原始碼:

PC版面:

Mobile版面:

HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/all.css">
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/all.js"></script>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
  <div class="wrap">
    <div class="header">
      <div class="logo"></div>
      <ul class="menu">
          <li><a href="#">選單一</a></li>
          <li><a href="#">選單二</a></li>
          <li><a href="#">選單三</a></li>
          <li><a href="#">選單四</a></li>
          <li><a href="#">選單五</a></li>
          <li><a href="#" target="_blank">選單六</a></li>
          <li><a href="#">選單七</a></li>
      </ul>
      <a href="#" class="showmenu">menu</a>
    </div>
    <div class="content">
    <p>
      其際出後心術者,風高動;自觀民發富面大年了夜使開懷布,福大會士是全:軍傷子頭新:已起職別客晚方好沒感她是預學。能的陽話經是他麼行五河進計分學嗎都了王創想?片始現化主反過家你與;顯理所名角車下化當影城士有:展很進全色獨水久人,式著斷給,海希手林心立軍、運取早集在港家外隊平有青,們得打形心的了以城為不即小去型,力的道……因不上字失起要易國助可和個觀高的又春非雄只法年個字。有是只我上都道化體、旅黨小綠天洲領般,一任標綠來起,制試安一國……視對與喜名度說,你的不這修配輕!
      
    </p>
     <p>
一笑馬臺動,一越曾間持青排的爭為但道性。住出子。了這等呢組羅我;更記好。價了望要最,文上老類電來近雄好是電帶也生理不,產在各器解是西小不理再統老以的;預操和來愛月企什較大其來來下了,對師同,在成程舉我?
       
     </p>
     <p>
望樣斯溫園長,體是確所。在白管,快樹員義油方係係?操那中還一。期之加個然少去說身會草,跑比向女孩情業王多,向以不音人不個向,想加山轉時:師小級觀?發過這重同書,跟試場消麼裡外什所影在名就檢特藥去表談同電聞期不題之。
       
     </p> 
    </div>
  </div>
</body>
</html>

css code:
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
body{
  background: #0F222B;
  color: #69CA62;
}
a{
  color: #69CA62;
  text-decoration: none;
}
.wrap{
  max-width: 960px;
  margin: 0 auto;
}
.header{
  height: 80px;
  border-bottom: 1px solid #69CA62;
  position: relative;
}
.logo{
  float: left;
  width: 50px;
  height: 50px;
  background: #69CA62;
  border: 3px solid green;
}
.menu{
  float: right;
}
.menu li{
  float: left;
}
.menu li a{
  display: block;
  color: #69CA62;
  padding: 1em;
  text-decoration: none;
}
.content{
  padding: 1em;
  line-height: 1.8;
}
.content p{
  margin-bottom: 1em;
}
/*在PC上隱藏漢堡選單*/
.showmenu{
  display: none;
}
@media (max-width: 767px){
  .menu {
    /*隱藏選單開始*/
    max-height: 0px;
    overflow: hidden;
    /*隱藏選單結束*/
    transition: max-height 2.3s;
    margin-top: 1px;
    /*絕對定位疊在網頁上*/
    position: absolute;
    z-index: 100;
    /*header 80px+1px boder 線條*/
    top: 81px;
    left: 0;
    right: 0;
    background: #0F222B;
  }
  .menu li{
    float: none;
    border-bottom: 1px dashed #69CA62;
  }
  .menu li a{
    transition: all 0.3s;
  }
  .menu li a:hover{
    background: #69CA62;
    color: #fff;
  }
  .showmenu{
    display: block;
    float: right;
    margin: 1em;
  }
  /*jQ點擊後動態在 body 加上 class */
  .menu-show .menu{
    max-height: 500px
  }
}

js code:
$(document).ready(function() {
   $('.showmenu').on('click',  function(e){
      e.preventDefault();
      $('body').toggleClass('menu-show');
  });
});