Skip to content

N
nodejs-60-2
Commit 8011f68e authored by nittaya chompoosan's avatar nittaya chompoosan
Browse files
Options

projects

parent 3d82eca7
Hide whitespace changes
Inline Side-by-side
Showing with 4075 additions and 2 deletions
projects @ 94baeb1c
Subproject commit f30eee0c3b6f5d3c98c941b3ed93c0cf799e238d
Subproject commit 94baeb1caf290961a95332cae3a035117d38ae00
week05/windowapp/Pingendo/New Site/about.css 0 → 100644
View file @ 8011f68e
This source diff could not be displayed because it is too large. You can view the blob instead.
week05/windowapp/Pingendo/New Site/about.html 0 → 100644
View file @ 8011f68e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="about.css" type="text/css"> </head>
<body class="text-center bg-primary">
<div class="text-center text-capitalize w-100" style="background-image: url('C:/Users/User/Desktop/nid/mancora-peru-sky-sea-ocean-umbrella-couch-beach-sand-beach.jpg');background-size:cover;background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="border-primary col-md-4 col-xl-9">
<h1 class="display-3 mb-4 navbar-light text-left text-dark text-uppercase">Phuket&nbsp;
<br>&nbsp; &nbsp; &nbsp; Travel</h1>
</div>
</div>
</div>
</div>
<div class="py-2 bg-dark w-100">
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="home.html"> หน้าหลัก </a>
</div>
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="tp0.html"> แพ็คเกจและโปรโมชั่น </a>
</div>
<div class="col-md-3">
<div class="btn-group btn-group-lg">
<button class="btn dropdown-toggle btn-primary" data-toggle="dropdown"> เที่ยวภูเก็ต </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="phuket1.html">ที่กิน</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket2.html">ที่เที่ยว</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket3.html">ที่พัก</a>
</div>
</div>
</div>
<div class="col-md-3">
<a class="btn btn-lg btn-secondary" href="about.html"> เกี่ยวกับ </a>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<p class="lead">
<br>
<br>
<br> </p>
<img class="img-fluid d-block py-5 rounded-circle" src="C:/Users/User/Desktop/nid/nid.jpg"> </div>
<div class="col-md-6">
<p class="lead text-center">
<br>
<br>
<br>
<br>
<u><b></b></u>
</p>
<h2>
<u><b>Profile</b></u>
</h2>
<br>
<p class="lead text-left">Name : Nittaya Chompoosan
<br>Nickname : Nid
<br>Age : 18 &nbsp;&nbsp;
<br>Blood group : AB
<br>Birth day : 18 August 1996
<br>Ethnicity : Thai &nbsp; Nationality : Thai &nbsp; Religion : Buddha
<br>Native Habital : House No.5 Village : 5 District : Mad/ Lueamnat Province: Amnatcharoen 37120
<br>Tel : 062-9582949
<br>E-mail : love_nid11@hotmail.com
<br>Education : Ubon Ratchathani University</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="">
<div class="container">
<div class="row">
<div class="my-3 col-lg-12">
<h3>Follow</h3>
<a href="https://web.facebook.com/nittaya.chompoosan" target="blank"><i class="fa fa-facebook-square text-muted fa-3x m-2"></i></a>
<a href="https://www.instagram.com/nittaya_cps/" target="blank"><i class="fa fa-3x fa-instagram m-2 text-muted"></i></a>
<a href="https://twitter.com/Nittaya_cps" target="blank"><i class="fa fa-3x fa-twitter m-2 text-muted"></i></a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
week05/windowapp/Pingendo/New Site/about.scss 0 → 100644
View file @ 8011f68e
/*!
* Based on Bootstrap v4.0.0 (https://getbootstrap.com)
*/
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: true;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
// Variables
//
// Colors
$theme-colors: (
primary: #f1cd31,
secondary: #f70655,
light: #f3f3f3,
dark: #303030,
info: #009ac0,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: #111;
$body-color: #efefef;
$body-color-inverse: invert($body-color) !default;
$link-color: #f1cd31;
// Fonts
$font-family-base: 'Comic Sans MS', cursive, sans-serif;
$headings-font-family: 'Comic Sans MS', cursive, sans-serif;
$display-font-family: 'Comic Sans MS', cursive, sans-serif;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
$font-size-base: 0.85rem;
$border-radius: 1rem;
$border-radius-lg: $border-radius * 1.2;
$border-radius-sm: $border-radius * .8;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
.cover {
min-height:100%;
display:flex;
align-items:center
}
.bg-gradient {
overflow: hidden;
color: color-yiq(map-get($theme-colors, 'primary'));
background: linear-gradient(-30deg, theme-color("secondary") 0%, theme-color("primary") 50%, theme-color("primary") 100%);
}
.filter-dark {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'dark'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'dark'), 0.75);
}
}
.filter-light {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'light'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'),0.75);
}
}
.filter-color {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'primary'), 0.75);
}
}
.filter-gradient {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient(-30deg, transparentize(theme-color("secondary"), 0.1) 0%, transparentize(theme-color("primary"), 0.1) 50%, transparentize(theme-color("primary"), 0.05) 100%);
}
}
.filter-fade-in {
overflow: hidden;
position: relative;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1));
}
}
week05/windowapp/Pingendo/New Site/home.html 0 → 100644
View file @ 8011f68e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- PAGE settings -->
<link rel="icon" href="https://templates.pingendo.com/assets/Pingendo_favicon.ico">
<title>Conference Neon - Pingendo template</title>
<meta name="description" content="Free Bootstrap 4 Pingendo Neon template for unique events.">
<meta name="keywords" content="Pingendo conference event neon free template bootstrap 4">
<!-- CSS dependencies -->
<link rel="stylesheet" href="neon.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<!-- Script: Make my navbar transparent when the document is scrolled to top -->
<script src="js/navbar-ontop.js"></script>
<!-- Script: Animated entrance -->
<script src="js/animate-in.js"></script>
</head>
<body class="text-center">
<!-- Navbar -->
<!-- Cover -->
<div class="text-center text-capitalize w-100" style="background-image: url('../../nid/mancora-peru-sky-sea-ocean-umbrella-couch-beach-sand-beach.jpg');background-size:cover;background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="border-primary col-md-4 col-xl-9">
<h1 class="display-3 mb-4 navbar-light text-left text-dark text-uppercase">Phuket&nbsp;
<br>&nbsp; &nbsp; &nbsp; Travel</h1>
</div>
</div>
</div>
</div>
<div class="py-2 bg-dark">
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="btn btn-lg btn-secondary" href="home.html">หน้าหลัก</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="tp0.html">แพ็คเกจและโปรโมชั่น</a>
</div>
<div class="col-md-3">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> เที่ยวภูเก็ต </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="phuket1.html">ที่กิน</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket2.html">ที่เที่ยว</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket3.html">ที่พัก</a>
</div>
</div>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="about.html"> เกี่ยวกับ </a>
</div>
</div>
</div>
</div>
<div class="py-5 bg-primary filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid w-100" src="../../nid/พื้นหลัง (2).jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/ที่พัก (5).jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/Patong-Beach-Phuket2.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/kata-beach3.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/ที่พักก.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/วิว.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/หาดราไวย์-16.jpg"> </div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
</div>
</div>
</div>
<!-- Intro section -->
<!-- Speakers -->
<!-- Schedule -->
<!-- Sponsor logos -->
<!-- Call to action -->
<!-- Footer -->
<!-- JavaScript dependencies -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Script: Smooth scrolling between anchors in a same page -->
<script src="js/smooth-scroll.js"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
week05/windowapp/Pingendo/New Site/js/animate-in.js 0 → 100644
View file @ 8011f68e
/**
* animate-in.js 1.0.0
* Animate elements on entrance
*
* Usage:
*
* Make sure to add this to the <head> of your page to avoid flickering on load
* Based on https://andycaygill.github.io/scroll-entrance/
*/
(function() {
//Set up defaults
var duration = "1000";
var heightOffset = 100;
// document.write("<style id='temp-animate-in'>*[class^='animate-in'], *[class*=' animate-in'] {display:none}</style>")
function isElementVisible(elem) {
var rect = elem.getBoundingClientRect();
//Return true if any of the following conditions are met:
return (
// The top is in view: the top is more than 0 and less than the window height (the top of the element is in view)
( (rect.top + heightOffset) >= 0 && (rect.top + heightOffset) <= window.innerHeight ) ||
// The bottom is in view: bottom position is greater than 0 and greater than the window height
( (rect.bottom + heightOffset) >= 0 && (rect.bottom + heightOffset) <= window.innerHeight ) ||
// The top is above the viewport and the bottom is below the viewport
( (rect.top + heightOffset) < 0 && (rect.bottom + heightOffset) > window.innerHeight )
)
}
function update() {
var nodes = document.querySelectorAll("*:not(.animate-in-done)[class^='animate-in'], *:not(.animate-in-done)[class*=' animate-in']")
for (var i = 0; i < nodes.length; i++) {
if (isElementVisible(nodes[i])) {
nodes[i].classList.remove("out-of-viewport")
nodes[i].classList.add("animate-in-done")
} else {
nodes[i].classList.add("out-of-viewport")
}
}
}
document.addEventListener("DOMContentLoaded", function(event) {
update()
// setTimeout(function() {
// document.querySelector("#temp-animate-in").remove()
// })
});
window.addEventListener("scroll", function() {
update()
})
})();
week05/windowapp/Pingendo/New Site/js/navbar-ontop.js 0 → 100644
View file @ 8011f68e
/**
* navbar-ontop.js 1.0.0
* Add .navbar-ontop class to navbar when the page is scrolled to top
* Make sure to add this script to the <head> of page to avoid flickering on load
*/
(function() {
var className = "navbar-ontop"
// we start hidden, to avoid flickering
document.write("<style id='temp-navbar-ontop'>.navbar {opacity:0; transition: none !important}</style>")
function update() {
// toggle className based on the scrollTop property of document
var nav = document.querySelector(".navbar")
if (window.scrollY > 15)
nav.classList.remove(className)
else
nav.classList.add(className)
}
document.addEventListener("DOMContentLoaded", function(event) {
$(window).on('show.bs.collapse', function (e) {
$(e.target).closest("." + className).removeClass(className);
})
$(window).on('hidden.bs.collapse', function (e) {
update()
})
update()
// still hacking to avoid flickering
setTimeout(function() {
document.querySelector("#temp-navbar-ontop").remove()
})
});
window.addEventListener("scroll", function() {
update()
})
})();
\ No newline at end of file
week05/windowapp/Pingendo/New Site/js/smooth-scroll.js 0 → 100644
View file @ 8011f68e
/**
* smooth-scroll.js 1.0.0
* Make your page scrolling smooth
* Requires JQuery - Does not work with JQuery slim
* Based on https://css-tricks.com/snippets/jquery/smooth-scrolling/
*/
(function() {
var duration = 500
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']')
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault()
$('html, body').animate({
scrollTop: target.offset().top
},
duration, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
})();
week05/windowapp/Pingendo/New Site/neon.css 0 → 100644
View file @ 8011f68e
This source diff could not be displayed because it is too large. You can view the blob instead.
week05/windowapp/Pingendo/New Site/neon.scss 0 → 100644
View file @ 8011f68e
/*!
* Neon Pingendo template (https://templates.pingendo.com)
* Based on: Bootstrap v4.0.0 (https://getbootstrap.com)
* Copyright 2014-2018 Pingendo (https://pingendo.com)
*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:200');
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true;
$enable-shadows: false;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
// Variables
//
// Colors
$theme-colors: (
primary: #f1cd31,
secondary: #f70655,
light: #f3f3f3,
dark: #303030,
info: #009ac0,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: #111;
$body-color: #efefef;
$body-color-inverse: invert($body-color) !default;
$link-color: #f1cd31;
$link-hover-color: white;
$link-hover-decoration: none;
// Fonts
$font-family-base: 'Comic Sans MS', cursive, sans-serif;
$headings-font-family: 'Comic Sans MS', cursive, sans-serif;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$line-height-base: 1.8;
// Components
$border-width: 1px;
$component-active-color : map-get($theme-colors,"dark");
// Buttons
$input-btn-padding-x-lg: 1.1rem;
$input-btn-padding-x: 1rem !default;
// Cards
$card-border-width: 0px;
$card-bg: rgba(#333,.5);
// Breadcrumb
$breadcrumb-bg: transparent !default;
$breadcrumb-active-color: map-get($theme-colors,"light");
// Carousel
$carousel-caption-width: 100% !default;
$carousel-indicator-height: 6px !default;
//Images
$thumbnail-border-color: map-get($theme-colors,"primary");
// Forms
$form-group-margin-bottom: 0rem;
// Nav tabs
$nav-tabs-border-color: map-get($theme-colors,"primary");
$nav-tabs-link-hover-border-color: transparent;
$nav-tabs-link-active-color: $component-active-color;
$nav-tabs-link-active-bg: map-get($theme-colors,"primary");
$nav-tabs-link-active-border-color: $nav-tabs-border-color;
// Nav pills
$nav-pills-link-active-color: $component-active-color !default;
// Navbar
$navbar-light-color: rgba(black,.6);
// Pagination
$pagination-bg: $body-bg;
$pagination-border-color: map-get($theme-colors,"dark");
$pagination-hover-bg: $body-bg;
$pagination-hover-border-color: $pagination-border-color;
$pagination-active-color: $component-active-color;
$pagination-active-bg: map-get($theme-colors,"primary");
$pagination-active-border-color: map-get($theme-colors,"dark");
// List group
$list-group-bg: $body-bg;
$list-group-border-color: map-get($theme-colors,"dark");
$list-group-hover-bg: $body-bg;
$list-group-active-color: $component-active-color;
$list-group-action-color: $link-color;
$list-group-active-border-color: map-get($theme-colors,"dark");
$list-group-action-hover-color: map-get($theme-colors,"light");
$list-group-action-active-color: $body-color !default;
$list-group-action-active-bg: transparent;
// Horizontal rule
$hr-border-color: rgba(map-get($theme-colors,"primary"),.75);
// Tables
$table-accent-bg: rgba(map-get($theme-colors,"light"),.05);
$table-inverse-bg: rgba(map-get($theme-colors,"light"),.5);
$table-hover-bg: rgba(map-get($theme-colors,"light"),.1);
$table-border-color: map-get($theme-colors,"dark");
$font-size-base: 0.85rem;
$display-font-family: 'Comic Sans MS', cursive, sans-serif;
$spacer: 1.5rem;
$border-radius: 1rem;
$border-radius-lg: $border-radius * 1.2;
$border-radius-sm: $border-radius * .8;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
.section-fade-in-out {
position: relative;
color:white;
background-size:cover;
background-position: center;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.8),transparentize($body-bg, 0.2), $body-bg);
}
}
.section-fade-in {
position: relative;
color:white;
background-size:cover;
background-position: center;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.8));
}
}
.section-fade-out {
position: relative;
color:white;
background-size:cover;
background-position: center;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient(transparentize($body-bg, 0.8),transparentize($body-bg, 0.2), $body-bg);
}
}
.shadowed {
box-shadow: 0px 0px 10px #000;
}
.carousel {
.carousel-caption {
padding-top:50px;
padding-bottom:20px;
bottom:0px;
background: linear-gradient(transparent 10%, transparentize($body-bg, 0) 100%);
}
.carousel-control-next, .carousel-control-prev {
opacity:0.85;
}
.carousel-indicators {
bottom: 0px;
}
}
mark {
&.primary {
background-color: map-get($theme-colors,"primary");
color: black;
}
&.secondary {
background-color: map-get($theme-colors,"secondary");
color: white;
}
}
.cover {
min-height: 100%;
}
/* Animate state between .navbar and .navbar-ontop */
.navbar {
transition: background-color .5s ease-out;
}
.navbar-ontop {
background-color: transparent !important;
}
/* Animate on entrance */
.animate-in-down {
transition: all 1.3s ease-out;
position:relative;
opacity:1;
top:0px;
&.out-of-viewport {
top:40px;
opacity:0;
}
}
.animate-in-left {
transition: all 1.0s ease-out;
position:relative;
opacity:1;
left:0%;
&.out-of-viewport {
opacity:0;
left:-5%;
}
}
.animate-in-right {
transition: all 1.0s ease-out;
position:relative;
opacity:1;
left:0%;
&.out-of-viewport {
opacity:0;
left:5%;
}
}
.filter-light {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'light'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'),0.75);
}
}
week05/windowapp/Pingendo/New Site/phuket1.css 0 → 100644
View file @ 8011f68e
This source diff could not be displayed because it is too large. You can view the blob instead.
week05/windowapp/Pingendo/New Site/phuket1.html 0 → 100644
View file @ 8011f68e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="phuket1.css" type="text/css"> </head>
<body class="text-center bg-primary">
<div class="text-center text-capitalize w-100" style="background-image: url('C:/Users/User/Desktop/nid/mancora-peru-sky-sea-ocean-umbrella-couch-beach-sand-beach.jpg');background-size:cover;background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="border-primary col-md-4 col-xl-9">
<h1 class="display-3 mb-4 navbar-light text-left text-dark text-uppercase">Phuket&nbsp;
<br>&nbsp; &nbsp; &nbsp; Travel</h1>
</div>
</div>
</div>
</div>
<div class="py-2 bg-dark w-100">
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="home.html"> หน้าหลัก </a>
</div>
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="tp0.html"> แพ็คเกจและโปรโมชั่น </a>
</div>
<div class="col-md-3">
<div class="btn-group btn-group-lg">
<button class="btn dropdown-toggle btn-secondary" data-toggle="dropdown"> เที่ยวภูเก็ต </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="phuket1.html">ที่กิน</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket2.html">ที่เที่ยว</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket3.html">ที่พัก</a>
</div>
</div>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="about.html"> เกี่ยวกับ </a>
</div>
</div>
</div>
</div>
<div class="py-5 bg-primary filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="display-4"> ร้านอาหารแนะนำในภูเก็ต จะเด็ดแค่ไหนไปดูกัน </h1>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">1.ปากน้ำซีฟู้ด </p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/1.ปากน้ำซีฟู้ด1.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/1.ปากน้ำซีฟู้ด2.jpg"> </div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/1.ปากน้ำซีฟู้ด3.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/1.ปากน้ำซีฟู้ด4.jpg"> </div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead text-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ปากน้ำซีฟู้ด ร้านอาหารทะเลท่ามกลางบรรยากาศสบายๆ ร่มรื่นไปด้วยต้นไม้น้อยใหญ่ เมนูเด่นที่เหมือนกันทุกสาขา คือ เต๋าเต้ยหม้อไฟ ปลาเต๋าเต้ยเป็นปลาสายพันธุ์เดียวกับปลาจาระเม็ด อาศัยอยู่ในทะเลน้ำลึก รสชาตินุ่มและหวานกว่า
ทางร้านจะแล่มาบางๆ จัดจานมาอย่างสวยงามพร้อมเครื่องเคียงต่างๆ และน้ำซุปหม้อไฟร้อนๆ เพียงแค่นำเนื้อปลาจุ่มลงตัวในน้ำซุปรสกลมกล่อม ทานคู่กับน้ำจิ้มสูตรพิเศษของทางร้าน
<br>
<br>ที่อยู่ : 52/220 ถ.รัษฎานุสรณ์ ต.รัษฎา อ.เมืองภูเก็ต จ.ภูเก็ต 83000&nbsp;
<br>โทรศัพท์ : 076240240 , 0817970474&nbsp;
<br>เปิดทุกวัน เวลา 10.30 - 22.30 น.&nbsp;
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">2.ปากน้ำซีฟู้ด ถลาง (ภูเก็ต) </p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/2.ปากน้ำซีฟู้ด ถลาง (ภูเก็ต).jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/2.ปากน้ำซีฟู้ด ถลาง (ภูเก็ต)2.jpg"> </div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/2.ปากน้ำซีฟู้ด ถลาง (ภูเก็ต)3.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/2.ปากน้ำซีฟู้ด ถลาง (ภูเก็ต)4.jpg"> </div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead text-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ปากน้ำซีฟู้ด สาขาถลาง ร้านอาหารทะเลแสนอร่อยแห่งเมืองภูเก็ต ม้พื้นที่เล็กกว่าสาขาที่ถนนรัษฎานุสรณ์ แต่การตกแต่งทันสมัยกว่า ด้วยผนังอิฐเปลือย และเฟอร์นิเจอร์สไตล์โมเดิร์น ภายในห้องแอร์เย็นฉ่ำ เมนูความอร่อยของร้านนี้ยังมีเมนู
ราวท้องนึ่งซีอิ๊ว &nbsp; &nbsp; ปูไข่หลน แกงส้มชะอมกุ้ง รสชาติกลมกล่อม อร่อยได้รสชาติอาหารทะเลที่สดใหม่
<br>
<br>ที่อยู่ : 169/7 ม.1 ถ.เทพกระษัตรี ต.เทพกระษัตรี อ.ถลาง จ.ภูเก็ต 83110
<br>โทรศัพท์ : 076313388 , 0936120387&nbsp;
<br>เปิดทุกวัน เวลา 11.00 - 24.00 น.
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">3.กันเองแอทเพียร์ </p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/3.กันเองแอทเพียร์.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/3.กันเองแอทเพียร์2.jpg"> </div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/3.กันเองแอทเพียร์3.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/3.กันเองแอทเพียร์4.jpg"> </div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead text-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; กันเองแอทเพียร์ ปรับโฉมให้ดูโมเดิร์นและเพิ่มความสะดวกสบายมากขึ้น จึงเหมาะกับการแวะมาทานอาหารทะเลอันเลื่องชื่อพร้อมชมวิวสวยๆ ของภูเก็ตไปพร้อมๆ กัน ถ้ามองหาอาหารจานหลักต้องเมนูอาหารทะเลเผา ที่มีทั้ง ปลา กุ้ง
หมึกเผามาร้อนๆ ทานคู่น้ำจิ้มซีฟู้ดรสจัดจ้าน
<br>
<br>ที่อยู่ : 44/1 ม.5 ถ.วิเศษ ต.ราไวย์ อ.เมืองภูเก็ต จ.ภูเก็ต 33130&nbsp;
<br>โทรศัพท์ : 076381212 , 076381715 , 0831731187&nbsp;
<br>เปิดทุกวัน เวลา 10.30 - 23.00 น.&nbsp;
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">4.แหลมหินซีฟู้ด </p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/4.แหลมหินซีฟู้ด.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/4.แหลมหินซีฟู้ด2.jpg"> </div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/4.แหลมหินซีฟู้ด3.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/4.แหลมหินซีฟู้ด4.jpg"> </div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead text-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;แหลมหินซีฟู้ด ร้านสวยริมทะเลที่ได้เปรียบในเรื่องของโลเคชั่น นอกจากที่นี่จะมีจุดเด่นของโลเคชั่นที่สวยงามแล้ว ยังรับประกันในเรื่องความสดใหม่ของอาหารทะเลที่ส่งตรงมาจากท่าเรือทุกวัน มาร้านนี้ เมนูที่ไม่ควรพลาดก็คือ
ปูทะเลผัดพริกไทยดำ&nbsp;
<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
<br>ที่อยู่ : 90/11 ม.7 ต.เกาะแก้ว อ.เมืองภูเก็ต จ.ภูเก็ต 83200&nbsp;
<br>โทรศัพท์ : 076239357 , 076238156&nbsp;
<br>เปิดทุกวัน เวลา 10.00 - 22.00 น.
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">5.ศาลาลอย </p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/5.ศาลาลอย.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/5.ศาลาลอย2.jpg"> </div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/5.ศาลาลอย3.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/5.ศาลาลอย4.jpg"> </div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead text-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ศาลาลอย เป็นร้านอาหารอยู่ติดริมชายหาด โซนด้านนอก มีโต๊ะทานอาหารใต้ต้นสน มองเห็นวิวท้องทะเลไปจนสุดสายตา ส่วนด้านในเป็นห้องแอร์ ตกแต่งแบบเรียบหรู เมนูความอร่อยเริ่มต้นที่ ทอดมันกุ้ง กุ้งทอดซอสมะขาม และปลาหมึกไข่นึ่งมะนาว
ที่รสชาติจัดจ้านด้วยรสชาติน้ำยำ เสิร์ฟมาแบบหม้อไฟ ร้อนๆ
<br>
<br>ที่อยู่ : 52/2 ถ.วิเศษ ต.ราไวย์ อ.เมืองภูเก็ต จ.ภูเก็ต 83000&nbsp;
<br>โทรศัพท์ : 076613740&nbsp;
<br>เปิดทุกวัน เวลา 10.00 - 22.30 น. &nbsp; &nbsp; &nbsp; &nbsp;
<br>&nbsp; &nbsp;&nbsp;</p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">6.กันเอง 2 </p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/6.กันเอง 2.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/6.กันเอง 22.jpg"> </div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/6.กันเอง 23.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/6.กันเอง 24.jpg"> </div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead text-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; กันเอง 2 ที่นี่ยกเมนูความอร่อยมาแบบครบถ้วนมาตรฐาน การตกแต่งของที่นี่จะเป็นสไตล์บาหลีผสมผสานความเป็นโมเดิร์น และยังคงสร้างให้กลมกลืนไปกับธรรมชาติด้วยอาคารไม้หลังคามุงหญ้าคา โต๊ะทานอาหารโซนด้านนอกจะจัดให้มองเห็นทะเลอันสวยงาม
พร้อมห้องจัดเลี้ยงที่เหมาะกับการประชุม สัมมนา จัดงานแต่งงานและรองรับกรุ๊ปทัวร์ขนาดใหญ่ได้อย่างสบายๆ
<br>
<br>ที่อยู่ : 9/3 ม.9 ถ.เจ้าฟ้า ต.ฉลอง อ.เมืองภูเก็ต จ.ภูเก็ต 83130&nbsp;
<br>โทรศัพท์ : 076381323&nbsp;
<br>เปิดทุกวัน เวลา 10.30 - 23.00 น.
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">7.ป่าหล่ายซีฟู้ด </p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/7.ป่าหล่ายซีฟู้ด.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/7.ป่าหล่ายซีฟู้ด2.jpg"> </div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/7.ป่าหล่ายซีฟู้ด3.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/7.ป่าหล่ายซีฟู้ด4.jpg"> </div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead text-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ป่าหล่ายซีฟู้ด เปิดมาแล้วกว่า 15ปี ตัวร้านเปิดโล่ง อยู่ติดริมชายทะเล ด้านหน้า มองออกไปเห็นทิวทัศน์ของท้องทะเลเป็นแนวยาว สวยงามมาก
<br>
<br>ที่อยู่ : 32 ม.3 ซ.ป่าหลาย ถ.เจ้าฟ้า ต.ฉลอง อ.เมืองภูเก็ต จ.ภูเก็ต 83000&nbsp;
<br>โทรศัพท์ : 076282174&nbsp;
<br>เปิดบริการทุกวัน เวลา 09.00 - 22.00 น.
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">8.หมี่ต้นโพธิ์ </p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/8.หมี่ต้นโพธิ์.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/8.หมี่ต้นโพธิ์2.jpg"> </div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/8.หมี่ต้นโพธิ์3.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/8.หมี่ต้นโพธิ์4.jpg"> </div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead text-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; หมี่ต้นโพธิ์ มาภูเก็ต ถ้าไม่แวะทานหมี่ต้นโพธิ์ ถือว่ามาไม่ถึง ที่จริงแล้ว เมนูของร้านก็คือ หมี่ฮกเกี้ยน จุดเด่นของ หมี่ฮกเกี้ยน อยู่ที่ขั้นตอนการทำเส้นที่สดใหม่ ด้วยคุณสมบัติของเส้นที่เหนียวนุ่ม เมื่อนำไปผัดด้วยไฟแรงพร้อมเครื่องปรุงต่างๆ
เพิ่มความอร่อยด้วยน้ำซุปรสกลมกล่อม ผัดด้วยกรรมวิธีแบบดั้งเดิม บนเตาถ่านแบบโบราณจะช่วยให้มีความหอมมากยิ่งขึ้น
<br>
<br>ที่อยู่ : 214/7-8 ถ.ภูเก็ต ต.ตลาดใหญ่ อ.เมืองภูเก็ต จ.ภูเก็ต 83000&nbsp;
<br>โทรศัพท์ : 076216293 , 0897299638&nbsp;
<br>เปิดทุกวัน เวลา 10.00 - 18.30 น. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">9.โพงพางซีฟู้ด </p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/9.โพงพางซีฟู้ด.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/9.โพงพางซีฟู้ด2.jpg"> </div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/9.โพงพางซีฟู้ด3.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/9.โพงพางซีฟู้ด4.jpg"> </div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead text-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; โพงพางซีฟู้ด จุดเด่นของร้านนี้ก็คือ การตั้งอยู่ริมทะเล ระหว่างการทานอาหารสามารถมองเห็นวิวทะเลที่อยู่ตรงหน้า ไปจนสุดสวยตา สวยงามมากๆ โดยเฉพาะช่วงพระอาทิตย์ตกดิน จะบรรยากาศดี เหมาะกับการนั่งรับลมทะเล ถ่ายภาพเพลินๆ
<br>
<br>ที่อยู่ : 22/2 ม.3 ซ.ป่าหล่าย ถ.เจ้าฟ้า ต.ฉลอง อ.เมืองภูเก็ต จ.ภูเก็ต 83000&nbsp;
<br>โทรศัพท์ : 076282270 , 0835500971&nbsp;
<br>เปิดทุกวัน เวลา 10.00 - 22.00 น. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">9.โพงพางซีฟู้ด </p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/9.โพงพางซีฟู้ด.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/9.โพงพางซีฟู้ด2.jpg"> </div>
</div>
<div class="row">
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/9.โพงพางซีฟู้ด3.jpg"> </div>
<div class="col-md-6">
<img class="img-fluid d-block rounded-circle" src="../../nid/9.โพงพางซีฟู้ด4.jpg"> </div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead text-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; โพงพางซีฟู้ด จุดเด่นของร้านนี้ก็คือ การตั้งอยู่ริมทะเล ระหว่างการทานอาหารสามารถมองเห็นวิวทะเลที่อยู่ตรงหน้า ไปจนสุดสวยตา สวยงามมากๆ โดยเฉพาะช่วงพระอาทิตย์ตกดิน จะบรรยากาศดี เหมาะกับการนั่งรับลมทะเล ถ่ายภาพเพลินๆ
<br>
<br>ที่อยู่ : 22/2 ม.3 ซ.ป่าหล่าย ถ.เจ้าฟ้า ต.ฉลอง อ.เมืองภูเก็ต จ.ภูเก็ต 83000&nbsp;
<br>โทรศัพท์ : 076282270 , 0835500971&nbsp;
<br>เปิดทุกวัน เวลา 10.00 - 22.00 น. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<br>
<br> </p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
week05/windowapp/Pingendo/New Site/phuket1.scss 0 → 100644
View file @ 8011f68e
/*!
* Based on Bootstrap v4.0.0 (https://getbootstrap.com)
*/
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: true;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
// Variables
//
// Colors
$theme-colors: (
primary: #f1cd31,
secondary: #f70655,
light: #f3f3f3,
dark: #303030,
info: #009ac0,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: #111;
$body-color: #efefef;
$body-color-inverse: invert($body-color) !default;
$link-color: #f1cd31;
// Fonts
$font-family-base: 'Comic Sans MS', cursive, sans-serif;
$headings-font-family: 'Comic Sans MS', cursive, sans-serif;
$display-font-family: 'Comic Sans MS', cursive, sans-serif;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
$font-size-base: 0.85rem;
$border-radius: 1rem;
$border-radius-lg: $border-radius * 1.2;
$border-radius-sm: $border-radius * .8;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
.cover {
min-height:100%;
display:flex;
align-items:center
}
.bg-gradient {
overflow: hidden;
color: color-yiq(map-get($theme-colors, 'primary'));
background: linear-gradient(-30deg, theme-color("secondary") 0%, theme-color("primary") 50%, theme-color("primary") 100%);
}
.filter-dark {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'dark'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'dark'), 0.75);
}
}
.filter-light {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'light'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'),0.75);
}
}
.filter-color {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'primary'), 0.75);
}
}
.filter-gradient {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient(-30deg, transparentize(theme-color("secondary"), 0.1) 0%, transparentize(theme-color("primary"), 0.1) 50%, transparentize(theme-color("primary"), 0.05) 100%);
}
}
.filter-fade-in {
overflow: hidden;
position: relative;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1));
}
}
week05/windowapp/Pingendo/New Site/phuket2.css 0 → 100644
View file @ 8011f68e
This source diff could not be displayed because it is too large. You can view the blob instead.
week05/windowapp/Pingendo/New Site/phuket2.html 0 → 100644
View file @ 8011f68e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="phuket2.css" type="text/css"> </head>
<body class="text-center bg-primary">
<div class="text-center text-capitalize w-100" style="background-image: url('C:/Users/User/Desktop/nid/mancora-peru-sky-sea-ocean-umbrella-couch-beach-sand-beach.jpg');background-size:cover;background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="border-primary col-md-4 col-xl-9">
<h1 class="display-3 mb-4 navbar-light text-left text-dark text-uppercase">Phuket&nbsp;
<br>&nbsp; &nbsp; &nbsp; Travel</h1>
</div>
</div>
</div>
</div>
<div class="py-2 bg-dark w-100">
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="home.html"> หน้าหลัก </a>
</div>
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="tp0.html"> แพ็คเกจและโปรโมชั่น </a>
</div>
<div class="col-md-3">
<div class="btn-group btn-group-lg">
<button class="btn dropdown-toggle btn-secondary" data-toggle="dropdown"> เที่ยวภูเก็ต </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="phuket1.html">ที่กิน</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket2.html">ที่เที่ยว</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket3.html">ที่พัก</a>
</div>
</div>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="about.html"> เกี่ยวกับ </a>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="display-4">ที่เที่ยวภูเก็ต&nbsp;
<br>สัมผัสเสน่ห์เมืองสุดคลาสสิกไม่เสื่อมคลาย</h1>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">1. ย่านเมืองเก่าตึกแถวโบราณ อาคารชิโน-โปรตุกีส</p>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-fluid d-block my-5 mx-auto" src="../../nid/1. ย่านเมืองเก่าตึกแถวโบราณ อาคารชิโน-โปรตุกีส.jpg" width="80%" height="80%">
<p class="lead">&nbsp; &nbsp;ที่อยู่ : อำเภอเมือง บริเวณถนนถลาง ถนนดีบุก ถนนเยาวราช ถนนพังงา และรอบ ๆ&nbsp;
<br>โทรศัพท์ : 08 6470 4823&nbsp;
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">2. สวนน้ำ Splash Jungle</p>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-fluid d-block my-5 mx-auto" src="../../nid/สวนน้ำ Splash Jungle 3.jpg" width="80%" height="80%">
<p class="lead">&nbsp; &nbsp;ที่อยู่ : ซอยไม้ขาว 4 ตำบลไม้ขาว อำเภอถลาง จังหวัดภูเก็ต
<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;เวลาเปิด-ปิด : เปิดทุกวัน ตั้งแต่เวลา 10.00-18.00 น.
<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;โทรศัพท์ : 076 372 111
<br>
<br>
</p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">3. จุดชมวิวเขารัง</p>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-fluid d-block my-5 mx-auto" src="../../nid/3. จุดชมวิวเขารัง.jpg" width="80%" height="80%">
<p class="lead">&nbsp; &nbsp; &nbsp;ที่อยู่ : จากที่ว่าการอำเภอมาทางถนนแม่หลวน จากนั้นเลี้ยวขวาเข้าถนนคอซิมบี้ไปจนสุดทาง หรือจะเข้าจากถนนวชิระข้างโรงพยาบาลวชิระภูเก็ตก็ได้&nbsp;
<br>เวลาเปิด-ปิด : เปิดทุกวัน&nbsp;
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">4. แหลมพรหมเทพ</p>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-fluid d-block my-5 mx-auto" src="../../nid/4.แหลมพรหมเทพ.jpg" width="80%" height="80%">
<p class="lead">&nbsp; &nbsp;ที่อยู่ : ราไวย์ เมืองภูเก็ต จังหวัดภูเก็ต ห่างจากตัวเมืองประมาณ 19 กิโลเมตร ห่างจากหาดราไวย์เลี้ยวขวาไปประมาณ 2 กิโลเมตร เวลาเปิด-ปิด : เปิดทุกวัน
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">5.&nbsp;วัดฉลอง</p>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-fluid d-block my-5 mx-auto" src="../../nid/5.วัดฉลอง.jpg" width="80%" height="80%">
<p class="lead">&nbsp; &nbsp;ที่อยู่ : 70 บ้านฉลอง ถนนเจ้าฟ้า หมู่ที่ 6 ตำบลฉลอง อำเภอเมืองภูเก็ต จังหวัดภูเก็ต&nbsp;
<br>เวลาเปิด-ปิด : เปิดทุกวัน ตั้งแต่เวลา 07.00-17.00 น.
<br>&nbsp;&nbsp;</p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">6.&nbsp;หาดป่าตอง </p>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-fluid d-block my-5 mx-auto" src="../../nid/6หาดป่าตอง.jpg" width="80%" height="80%">
<p class="lead">&nbsp; ที่อยู่ : อำเภอกะทู้ ริมถนนทวีวงศ์ (ทางหลวง 4233) จากตัวเมืองมาตามทางหลวง 4029 ผ่านวัดสุวรรณคีรีวงก์ เลี้ยวซ้ายเข้าถนนราษฎร์อุทิศ 200 ปี จากนั้นเลี้ยวขวาเข้าถนนประชานุเคราะห์&nbsp;
<br>เวลาเปิด-ปิด : เปิดทุกวัน&nbsp;
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">7.&nbsp;หาดกะรน </p>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-fluid d-block my-5 mx-auto" src="../../nid/7.หาดกะรน .jpg" width="80%" height="80%">
<p class="lead">&nbsp; &nbsp;ที่อยู่ : อำเภอเมือง จาดหาดป่าตองลงมาทางทิศใต้ ตามทางหลวง 4233 (ทางขึ้นเขาประมาณ 3 กิโลเมตร)&nbsp;
<br>เวลาเปิด-ปิด : เปิดทุกวัน
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">8.&nbsp;หาดกะตะน้อย หาดกะตะใหญ่ </p>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-fluid d-block my-5 mx-auto" src="../../nid/8.หาดกะตะน้อย หาดกะตะใหญ่.jpg" width="80%" height="80%">
<p class="lead">&nbsp;ที่อยู่ : อำเภอเมือง จากตัวเมืองมาถึงห้าแยกฉลอง เลี้ยวขวาไปตามทางหลวง 4028 จะถึงหาดกะตะน้อยก่อน ขับขึ้นมาทางทิศเหนือประมาณ 5 นาทีก็จะถึงหาดกะตะ&nbsp;
<br>เวลาเปิด-ปิด : เปิดทุกวัน&nbsp;
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">9.&nbsp; ภูเก็ตแฟนตาซี</p>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-fluid d-block my-5 mx-auto" src="../../nid/9. ภูเก็ตแฟนตาซี.jpg" width="80%" height="80%">
<p class="lead">&nbsp;ที่อยู่ : 99 หมู่ 3 ตำบลกมลา อำเภอกะทู้ จังหวัดภูเก็ต 83150&nbsp;
<br>เวลาเปิด-ปิด : เปิดบริการทุกวัน ยกเว้นวันพฤหัสบดี (หากวันพฤหัสบดีตรงกับวันหยุดนักขัตฤกษ์อาจเปิดให้บริการตามปกติ)&nbsp;
<br>ตั้งแต่เวลา 17.30-23.30 น.&nbsp;
<br>โทรศัพท์ : 076 385 000
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">10.&nbsp; Flying Hanuman</p>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-fluid d-block my-5 mx-auto" src="../../nid/10.Flying Hanuman.jpg" width="80%" height="80%">
<p class="lead">&nbsp; &nbsp; &nbsp;ที่อยู่ : 89/16 หมู่ 6 ซอยน้ำตกกะทู้ ถนนวิชิตสงคราม ตำบลกะทู้ อำเภอกะทู้ จังหวัดภูเก็ต&nbsp;
<br>เวลาเปิด-ปิด : เปิดทุกวัน ตั้งแต่เวลา 08.00-18.00 น.&nbsp;
<br>โทรศัพท์ : 081 979 2332
<br>
<br> </p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
week05/windowapp/Pingendo/New Site/phuket2.scss 0 → 100644
View file @ 8011f68e
/*!
* Based on Bootstrap v4.0.0 (https://getbootstrap.com)
*/
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: true;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
// Variables
//
// Colors
$theme-colors: (
primary: #f1cd31,
secondary: #f70655,
light: #f3f3f3,
dark: #303030,
info: #009ac0,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: #111;
$body-color: #efefef;
$body-color-inverse: invert($body-color) !default;
$link-color: #f1cd31;
// Fonts
$font-family-base: 'Comic Sans MS', cursive, sans-serif;
$headings-font-family: 'Comic Sans MS', cursive, sans-serif;
$display-font-family: 'Comic Sans MS', cursive, sans-serif;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
$border-radius: 1rem;
$border-radius-lg: $border-radius * 1.2;
$border-radius-sm: $border-radius * .8;
$font-size-base: 0.85rem;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
.cover {
min-height:100%;
display:flex;
align-items:center
}
.bg-gradient {
overflow: hidden;
color: color-yiq(map-get($theme-colors, 'primary'));
background: linear-gradient(-30deg, theme-color("secondary") 0%, theme-color("primary") 50%, theme-color("primary") 100%);
}
.filter-dark {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'dark'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'dark'), 0.75);
}
}
.filter-light {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'light'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'),0.75);
}
}
.filter-color {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'primary'), 0.75);
}
}
.filter-gradient {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient(-30deg, transparentize(theme-color("secondary"), 0.1) 0%, transparentize(theme-color("primary"), 0.1) 50%, transparentize(theme-color("primary"), 0.05) 100%);
}
}
.filter-fade-in {
overflow: hidden;
position: relative;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1));
}
}
week05/windowapp/Pingendo/New Site/phuket3.css 0 → 100644
View file @ 8011f68e
This source diff could not be displayed because it is too large. You can view the blob instead.
week05/windowapp/Pingendo/New Site/phuket3.html 0 → 100644
View file @ 8011f68e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="phuket3.css" type="text/css"> </head>
<body class="text-center bg-primary">
<div class="text-center text-capitalize w-100" style="background-image: url('C:/Users/User/Desktop/nid/mancora-peru-sky-sea-ocean-umbrella-couch-beach-sand-beach.jpg');background-size:cover;background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="border-primary col-md-4 col-xl-9">
<h1 class="display-3 mb-4 navbar-light text-left text-dark text-uppercase">Phuket&nbsp;
<br>&nbsp; &nbsp; &nbsp; Travel</h1>
</div>
</div>
</div>
</div>
<div class="py-2 bg-dark w-100">
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="home.html"> หน้าหลัก </a>
</div>
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="#"> แพ็คเกจและโปรโมชั่น </a>
</div>
<div class="col-md-3">
<div class="btn-group btn-group-lg">
<button class="btn dropdown-toggle btn-secondary" data-toggle="dropdown"> เที่ยวภูเก็ต </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">ที่กิน</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">ที่เที่ยว</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">ที่พัก</a>
</div>
</div>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="#"> เกี่ยวกับ </a>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="display-4">ที่พักภูเก็ต</h1>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">1. โฟโต้ โฮเต็ล ภูเก็ต
<br> </p>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid w-100 my-5" src="../../nid/1. โฟโต้ โฮเต็ล ภูเก็ต.jpg"> </div>
<div class="carousel-item">
<img class="d-block img-fluid w-100 my-5" src="../../nid/1. โฟโต้ โฮเต็ล ภูเก็ต2.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid my-5" src="../../nid/1. โฟโต้ โฮเต็ล ภูเก็ต3.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid my-5" src="../../nid/1. โฟโต้ โฮเต็ล ภูเก็ต4.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid my-5" src="../../nid/1. โฟโต้ โฮเต็ล ภูเก็ต5.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid my-5" src="../../nid/1. โฟโต้ โฮเต็ล ภูเก็ต6.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid my-5" src="../../nid/1. โฟโต้ โฮเต็ล ภูเก็ต7.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid my-5" src="../../nid/1. โฟโต้ โฮเต็ล ภูเก็ต8.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid my-5" src="../../nid/1. โฟโต้ โฮเต็ล ภูเก็ต9.jpg"> </div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="lead">-- ราคาเริ่มต้น 9,000/คืน --</p>
</div>
</div>
<div class="row">
<div class="col-md-5 col-lg-6 text-center">
<p class="lead text-left">
<br>
<u>สิ่งอำนวยความสะดวกยอดนิยม</u>&nbsp;
<br>&nbsp; &nbsp; &nbsp;- สระว่ายน้ำ&nbsp;
<br>&nbsp; &nbsp; &nbsp;- รวมบริการอินเทอร์เน็ตไร้สาย (Wi-Fi) ฟรี&nbsp;
<br>&nbsp; &nbsp; &nbsp;- สระว่ายน้ำกลางแจ้ง&nbsp;
<br>&nbsp; &nbsp; &nbsp;- รถรับส่งสนามบิน
<br>&nbsp; &nbsp; &nbsp;- ศูนย์ออกกำลังกาย&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ที่จอดรถส่วนตัว (ฟรี)&nbsp;
<br>&nbsp; &nbsp; &nbsp;- บาร์&nbsp;
<br>&nbsp; &nbsp; &nbsp;- อาหารเช้าดีมาก
<br>
<br> </p>
<u> </u>
</div>
<div class="col-md-5 col-lg-6">
<p class="lead text-left">
<br>
<u>สถานที่สำคัญซึ่งอยู่ใกล้ที่สุด</u>&nbsp;
<br>&nbsp; &nbsp; &nbsp;- เซิร์ฟเฮาส์ ภูเก็ต 0.6 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- หาดกะตะน้อย 0.8 กม.
<br>&nbsp; &nbsp; &nbsp;- เดอะคอฟฟี่คลับ หาดกะตะ 1.5 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- SC Plaza Kata 1.6 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- จุดชมวิวกะตะ 1.7 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- สตาร์บัคส์ หาดกะตะ 1.7 กม.
<br>&nbsp; &nbsp; &nbsp;- ไดโนปาร์ค มินิกอล์ฟ 1.9 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- พระพุทธมิ่งมงคลเอกนาคคีรี (พระใหญ่) 2.1 กม.
<br>&nbsp; &nbsp; &nbsp;- กะรนไนต์มาร์เก็ต 3.5 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- สนามยิงปืนภูเก็ต 3.6 กม. </p>
<u>
<u> </u>
</u>
</div>
<u>
<u> </u>
</u>
</div>
<div class="row">
<div class="col-md-12">
<p class="lead">
<br>ที่อยู่: 218/9 Kata-Saiyaun Rd. Kata Beach Karon Muang Phuket ภูเก็ต 83100 &nbsp;
<br>โทรศัพท์: 076 680 900
<br>
<br> </p>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">2.&nbsp;เดอะชอร์ แอท กะตะธานี</p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid w-100" src="../../nid/2. เดอะชอร์ แอท กะตะธานี.jpg"> </div>
<div class="carousel-item">
<img class="d-block img-fluid w-100" src="../../nid/2. เดอะชอร์ แอท กะตะธานี2.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/2. เดอะชอร์ แอท กะตะธานี3.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/2. เดอะชอร์ แอท กะตะธานี4.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/2. เดอะชอร์ แอท กะตะธานี5.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/2. เดอะชอร์ แอท กะตะธานี6.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/2. เดอะชอร์ แอท กะตะธานี7.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/2. เดอะชอร์ แอท กะตะธานี8.jpg"> </div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-primary filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">-- ราคาเริ่มต้น 18,000/คืน --
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<u> </u>
</div>
<div class="col-md-6">
<u>
<u> </u>
</u>
</div>
<u>
<u> </u>
</u>
</div>
<div class="bg-primary filter-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="lead text-left">
<u>สิ่งอำนวยความสะดวกยอดนิยม</u>&nbsp;
<br>&nbsp; &nbsp; &nbsp;- สระว่ายน้ำ&nbsp;
<br>&nbsp; &nbsp; &nbsp;- รวมบริการอินเทอร์เน็ตไร้สาย (Wi-Fi) ฟรี&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ติดชายหาด&nbsp;
<br>&nbsp; &nbsp; &nbsp;- สระว่ายน้ำกลางแจ้ง&nbsp;
<br>&nbsp; &nbsp; &nbsp;- รถรับส่งสนามบิน&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ศูนย์ออกกำลังกาย&nbsp;
<br>&nbsp; &nbsp; &nbsp;- อุปกรณ์ชงชา/กาแฟในทุกห้องพัก&nbsp;
<br>&nbsp; &nbsp; &nbsp;- บาร์&nbsp;
<br>&nbsp; &nbsp; &nbsp;- อาหารเช้าดีเลิศ </p>
</div>
<div class="col-md-6">
<p class="lead text-left">
<u>สถานที่สำคัญซึ่งอยู่ใกล้ที่สุด</u>&nbsp;
<br>&nbsp; &nbsp; &nbsp;- หาดกะตะน้อย พื้นที่ยอดนิยม 0.2 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- จุดชมวิวกะตะ พื้นที่ยอดนิยม 0.9 กม.
<br>&nbsp; &nbsp; &nbsp;- เซิร์ฟเฮาส์ ภูเก็ต พื้นที่ยอดนิยม 1.3 กม.
<br>&nbsp; &nbsp; &nbsp;- เดอะคอฟฟี่คลับ หาดกะตะ พื้นที่ยอดนิยม 2.3 กม.
<br>&nbsp; &nbsp; &nbsp;- SC Plaza Kata พื้นที่ยอดนิยม 2.4 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- สตาร์บัคส์ หาดกะตะ พื้นที่ยอดนิยม 2.5 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ไดโนปาร์ค มินิกอล์ฟ สถานที่ท่องเที่ยว 2.6 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- พระพุทธมิ่งมงคลเอกนาคคีรี (พระใหญ่)&nbsp;
<br>สถานที่สำคัญ 2.9 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ทะเลสาบในหาน ท่าเรือ 3.1 กม.&nbsp;
<br>&nbsp; &nbsp; &nbsp;- หาดในหาน พื้นที่ยอดนิยม 3.1 กม. </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="lead">
<br>ที่อยู่: น้อย ตำบล กะ รน 83000 อำเภอ เมือง ภูเก็ต ภูเก็ต 83100 18 ถนน กะตะ ตำบล กะรน อำเภอเมืองภูเก็ต ภูเก็ต 83100
<br>โทรศัพท์: 076 330 124
<br>
<br> </p>
</div>
</div>
</div>
</div>
<div class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="lead">3.&nbsp;ชูการ์ ปาล์ม แกรนด์ ฮิลล์ไซด์</p>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid w-100" src="../../nid/3.ชูการ์ ปาล์ม แกรนด์ ฮิลล์ไซด์.jpg"> </div>
<div class="carousel-item">
<img class="d-block img-fluid w-100" src="../../nid/3.ชูการ์ ปาล์ม แกรนด์ ฮิลล์ไซด์3.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/3.ชูการ์ ปาล์ม แกรนด์ ฮิลล์ไซด์2.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/3.ชูการ์ ปาล์ม แกรนด์ ฮิลล์ไซด์4.jpg"> </div>
<div class="carousel-item">
<img class="img-fluid" src="../../nid/3.ชูการ์ ปาล์ม แกรนด์ ฮิลล์ไซด์5.jpg"> </div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
</div>
</div>
</div>
<div class="filter-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<p class="lead text-left">
<u>รายละเอียดโรงแรม</u>&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ที่จอดรถฟรี&nbsp;
<br>&nbsp; &nbsp; &nbsp;- บริการซักรีด&nbsp;
<br>&nbsp; &nbsp; &nbsp;- เหมาะสำหรับเด็ก
<br>&nbsp; &nbsp; &nbsp;- ร้านอาหาร&nbsp;
<br>&nbsp; &nbsp; &nbsp;- อ่างน้ำร้อน&nbsp;
<br>&nbsp; &nbsp; &nbsp;- บาร์
<br>
<br>
<br>
<br>
</p>
</div>
<div class="col-md-8">
<p class="lead">
<br>-- ราคาเริ่มต้น 2,000/คืน --
<br>
<br>
<br>ที่อยู่: 1, Khoktanod soi 3 Road,Karon, Meuang, Phuket 83100&nbsp;
<br>โทรศัพท์: 076 330 388</p>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
week05/windowapp/Pingendo/New Site/phuket3.scss 0 → 100644
View file @ 8011f68e
/*!
* Based on Bootstrap v4.0.0 (https://getbootstrap.com)
*/
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: true;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
// Variables
//
// Colors
$theme-colors: (
primary: #f1cd31,
secondary: #f70655,
light: #f3f3f3,
dark: #303030,
info: #009ac0,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: #111;
$body-color: #efefef;
$body-color-inverse: invert($body-color) !default;
$link-color: #f1cd31;
// Fonts
$font-family-base: 'Comic Sans MS', cursive, sans-serif;
$headings-font-family: 'Comic Sans MS', cursive, sans-serif;
$display-font-family: 'Comic Sans MS', cursive, sans-serif;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
$font-size-base: 0.85rem;
$border-radius: 1rem;
$border-radius-lg: $border-radius * 1.2;
$border-radius-sm: $border-radius * .8;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
.cover {
min-height:100%;
display:flex;
align-items:center
}
.bg-gradient {
overflow: hidden;
color: color-yiq(map-get($theme-colors, 'primary'));
background: linear-gradient(-30deg, theme-color("secondary") 0%, theme-color("primary") 50%, theme-color("primary") 100%);
}
.filter-dark {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'dark'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'dark'), 0.75);
}
}
.filter-light {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'light'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'),0.75);
}
}
.filter-color {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'primary'), 0.75);
}
}
.filter-gradient {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient(-30deg, transparentize(theme-color("secondary"), 0.1) 0%, transparentize(theme-color("primary"), 0.1) 50%, transparentize(theme-color("primary"), 0.05) 100%);
}
}
.filter-fade-in {
overflow: hidden;
position: relative;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1));
}
}
week05/windowapp/Pingendo/New Site/styleguide.html 0 → 100644
View file @ 8011f68e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- PAGE settings -->
<link rel="icon" href="https://templates.pingendo.com/assets/Pingendo_favicon.ico">
<title>Styleguide</title>
<meta name="author" content="Pingendo">
<!-- CSS dependencies -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="neon.css" type="text/css"> </head>
<body>
<div class="py-5 text-center">
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="display-3 text-capitalize">neon style guide</h1>
<p class="lead text-muted">Components designed to fit nicely together </p>
</div>
</div>
</div>
</div>
<div class="py-4">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Color palette</h2>
<hr>
<div class="row text-center">
<div class="col-md-2 bg-primary m-2">
<p class="m-0 p-4">Primary</p>
</div>
<div class="col-md-2 bg-secondary m-2">
<p class="m-0 p-4">Secondary</p>
</div>
<div class="col-md-2 bg-info m-2">
<p class="m-0 p-4">Info</p>
</div>
<div class="col-md-2 bg-light m-2">
<p class="m-0 p-4">Light</p>
</div>
<div class="col-md-2 bg-dark m-2">
<p class="m-0 p-4">Dark</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-4">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Typography</h2>
<hr>
<h1 class="display-4"> Display </h1>
<h1>Heading</h1>
<p class="lead">Lead paragraph </p>
<p>Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><i>Italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i>
<br><b>Bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></p>
<div class="blockquote">
<p class="mb-0">Blockquoute</p>
<div class="blockquote-footer">Someone famous in <cite>My memories</cite></div>
</div>
</div>
</div>
</div>
</div>
<div class="py-4">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Buttons</h2>
<hr> </div>
</div>
<div class="row">
<div class="col-12">
<a class="btn btn-primary m-2" href="#">Primary</a>
<a class="btn btn-secondary m-2" href="#">Secondary</a>
<a class="btn btn-info m-2" href="#">Info</a>
<a class="btn btn-light m-2" href="#">Light</a>
<a class="btn btn-dark m-2" href="#">Dark</a>
<a class="btn btn-link m-2" href="#">Link</a>
</div>
</div>
<div class="row">
<div class="col-12">
<a class="btn btn-outline-primary m-2" href="#">Primary</a>
<a class="btn btn-outline-secondary m-2" href="#">Secondary</a>
<a class="btn btn-outline-info m-2" href="#">Info</a>
<a class="btn btn-outline-light m-2" href="#">Light</a>
<a class="btn btn-outline-dark m-2" href="#">Dark</a>
</div>
</div>
<div class="row">
<div class="col-12">
<a class="btn btn-primary m-2" href="" data-toggle="button" aria-pressed="false" autocomplete="off">Toggle</a>
<div class="btn-group m-2">
<a href="#" class="btn btn-primary">Btn 1</a>
<a href="#" class="btn btn-primary">Btn 2</a>
<a href="#" class="btn btn-primary">Btn 3</a>
</div>
<div class="btn-group m-2">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown </button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item disabled" href="#">Disabled option</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group m-2">
<button type="button" class="btn btn-primary" href="#">Split dropdown</button>
<button type="button" class="btn dropdown-toggle dropdown-toggle-split btn-primary" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<a class="btn btn-primary m-2" href="">Badge<span class="badge badge-secondary ml-1">New!</span></a>
<a class="btn btn-primary m-2" href="#"><i class="fa fa-user fa-fw"></i>Icon</a>
<a class="btn active btn-primary m-2" href="">Active</a>
<a class="btn disabled btn-primary m-2" href="">Disabled</a>
<a class="btn btn-sm btn-primary m-2" href="">Small</a>
<a class="btn btn-primary m-2" href="">Regular</a>
<a class="btn btn-lg btn-primary m-2" href="">Large</a>
</div>
</div>
</div>
</div>
<div class="py-4">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Navs and components</h2>
<hr> </div>
</div>
<div class="row">
<div class="col-md-6">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Item</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<ul class="nav nav-pills my-4">
<li class="nav-item">
<a href="#" class="nav-link active">Nav pills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-lg fa-child"></i> Item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-lg fa-anchor mt-1"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#home" class="nav-link active" aria-controls="home" aria-selected="true" data-toggle="tab" id="home-tab" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" aria-controls="profile" aria-selected="false" data-toggle="tab" id="profile-tab" role="tab">Profile</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link" aria-controls="contact" aria-selected="false" data-toggle="tab" id="contact-tab" role="tab">Contact <span class="badge badge-pill badge-warning">!</span></a>
</li>
</ul>
<div class="tab-content my-2" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div class="tab-pane fade" id="contact" role="tabpanel"
aria-labelledby="contact-tab">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit, sed do eiusmod tempor incididunt. </div>
</div>
</div>
<div class="col-md-6">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Parent</a>
</li>
<li class="breadcrumb-item active">Page</li>
</ul>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a>
</li>
</ul>
<div class="progress my-4">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="alert alert-info" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
<h4 class="alert-heading">Well done! </h4>
<p class="mb-0">This is an info panel.</p>
</div>
</div>
</div>
</div>
</div>
<div class="py-4">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Forms</h2>
<hr> </div>
</div>
<div class="row">
<div class="col-md-6 p-3">
<form method="post" action="">
<div class="form-group mb-1">
<input type="email" name="email" class="form-control" placeholder="Enter email"> </div> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<div class="form-group my-3"><select class="form-control"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div>
<div class="form-group my-3">
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">@</span></div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username"> </div>
</div>
<div class="form-group my-3">
<input type="file" class="form-control-file" id="exampleFormControlFile1"> </div>
<div class="form-check form-check-inline"> <label class="form-check-label">
<input class="form-check-input" type="radio" value="option1" id="inlineRadio1" name="inlineRadioOptions"> 1
</label> </div>
<div class="form-check form-check-inline"> <label class="form-check-label">
<input class="form-check-input" type="radio" value="option2" id="inlineRadio2" name="inlineRadioOptions"> 2
</label> </div>
<div class="form-check form-check-inline disabled"> <label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled=""> 3
</label> </div>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="exampleCheck1" value="on"><label class="form-check-label" for="exampleCheck1">Remember me</label></div>
<div class="form-check disabled"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value="" disabled=""> Disabled option </label> </div>
<button type="submit" class="btn btn-primary my-2">Submit button</button>
</form>
</div>
<div class="col-md-6 p-3">
<form class="" method="post" action="">
<div class="form-group">
<input type="email" class="form-control form-control-sm" placeholder="Small input" name="email"> </div>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Default input"> </div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Large input"> </div>
</form>
<form class="my-3" method="post" action="">
<div class="form-group">
<input type="text" class="form-control" placeholder="Disabled input" id="disabledTextInput" disabled=""> </div>
<div class="form-group">
<input type="text" class="form-control is-valid" placeholder="First name" id="validationServer01" required="" value="Valid"> </div>
<div class="form-group">
<input type="text" class="form-control is-invalid" placeholder="First name" id="validationServer01" required="" value="Invalid">
<div class="invalid-feedback">Please provide a valid input.</div>
</div>
</form>
<form>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="exampleCheck1" value="on"><label class="form-check-label" for="exampleCheck1">Checkbox</label></div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="py-4">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Pictures</h2>
<hr> </div>
</div>
<div class="row text-center">
<div class="col-md-4">
<img class="img-fluid p-3" src="assets/styleguide/people_1.jpg" alt="Card image"> </div>
<div class="col-md-4">
<img class="img-fluid rounded-circle p-3" src="assets/styleguide/people_2.jpg" alt="Card image"> </div>
<div class="col-md-4">
<img class="img-fluid img-thumbnail p-3" src="assets/styleguide/people_3.jpg" alt="Card image"> </div>
</div>
<div class="row">
<div class="col-md-6">
<div class="carousel slide my-3" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="assets/styleguide/cover_2.jpg" data-holder-rendered="true">
<div class="carousel-caption">
<h4>Caption #1</h4>
<p class="mb-0">Paragraph. Lorem ipsum dolor sit&nbsp;</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="assets/styleguide/cover_3.jpg" data-holder-rendered="true">
<div class="carousel-caption">
<h4>Caption #2</h4>
<p class="mb-0">Paragraph. Lorem ipsum dolor sit&nbsp;</p>
</div>
</div>
</div>
<a class="carousel-control-prev" role="#carousel-1" data-slide="prev" href="#carousel-1"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" role="button" data-slide="next" href="#carousel-1"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
<div class="col-md-6">
<div class="carousel slide my-3" data-ride="carousel" id="carousel-2" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#carousel-2" data-slide-to="0" class="active">&nbsp;</li>
<li data-target="#carousel-2" data-slide-to="1">&nbsp;</li>
<li data-target="#carousel-2" data-slide-to="2">&nbsp;</li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="assets/styleguide/cover_1.jpg" data-holder-rendered="true">
<div class="carousel-caption">
<p class="lead">Caption #1</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="assets/styleguide/cover_4.jpg" data-holder-rendered="true">
<div class="carousel-caption">
<p class="lead">Caption #2</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-4">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Cards</h2>
<hr class="mb-4"> </div>
</div>
<div class="row">
<div class="col-md-4 p-3">
<div class="card">
<div class="card-body">
<h5>A Card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card my-4">
<div class="card-header bg-primary">
<h5 class="mb-0 text-center">A Card Header</h5>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer">A Card footer</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="bg-primary card">
<img class="img-fluid rounded-circle w-75 mx-auto mt-3" src="assets/styleguide/people_5.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Card</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card">
<div class="card-img-overlay align-items-center d-flex">
<h4 class="w-100 text-center mb-0 text-white"><b>Card Image Overlay</b></h4>
</div>
<img class="img-fluid w-100 rounded" src="assets/styleguide/people_6.jpg" alt="Card image"> </div>
</div>
</div>
</div>
</div>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Listing</h2>
<hr class="mb-4"> </div>
</div>
<div class="row">
<div class="col-md-6 p-3">
<ul class="list-group">
<li class="list-group-item">List group <i class="fa fa-fw fa-bicycle"></i> </li>
<li class="list-group-item active"> Active list item</li>
<li class="list-group-item disabled">Disabled list item</li>
<a href="#" class="list-group-item list-group-item-action">Link list item</a>
</ul>
</div>
<div class="col-md-6 p-3">
<table class="table table-hover table-striped table-bordered">
<thead class="thead-inverse">
<tr>
<th scope="col">#</th>
<th scope="col">Striped table</th>
<th scope="col">bordered</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>example</td>
<td>one</td>
</tr>
<tr>
<th scope="row">2</th>
<td>example</td>
<td>two</td>
</tr>
<tr class="bg-info">
<th scope="row">3</th>
<td>example</td>
<td>three</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="pt-5">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Navigation</h2>
<hr class="mb-4"> </div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#"><b>Navbar Primary&nbsp;</b></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarPrimarySupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbarPrimarySupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"> Nav item</a>
</li>
</ul>
<a class="btn navbar-btn ml-2 btn-secondary" href="#"> Button</a>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-secondary my-3">
<div class="container">
<a class="navbar-brand" href="#"><b>Navbar Secondary</b></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSecondarySupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbarSecondarySupportedContent">
<ul class="navbar-nav">
<li class="nav-item mx-2">
<a class="nav-link" href="#"><i class="fa d-inline fa-lg fa-bookmark-o"></i></a>
</li>
</ul>
<a class="btn navbar-btn ml-2 text-white btn-primary" href="#"><i class="fa d-inline fa-lg fa-user-circle-o ml-1"></i>&nbsp;</a>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-md my-3 navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#"><b>Navbar Light</b></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarLightSupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbarLightSupportedContent">
<ul class="navbar-nav">
<li class="nav-item mx-1">
<a class="nav-link" href="#"><i class="fa d-inline fa-facebook-square"></i>&nbsp; share</a>
</li>
<li class="nav-item mx-1">
<a class="nav-link" href="#"><i class="fa d-inline fa-twitter"></i>&nbsp; tweet</a>
</li>
<li class="nav-item mx-1">
<a class="nav-link" href="#"><i class="fa d-inline fa-pinterest"></i>&nbsp; pin</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-md my-3 navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#"><b>Navbar Dark</b></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDarkSupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-end" id="navbarDarkSupportedContent">
<ul class="navbar-nav"></ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn my-2 my-sm-0 btn-primary" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="pt-5">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Sections</h2>
<hr class="mb-4">
</div>
</div>
</div>
</div>
<div class="py-5 text-center section-fade-in-out" style="background-image: url(&quot;assets/styleguide/cover_1.jpg&quot;);">
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-4 mb-0">Fade in &amp; out</h1>
</div>
</div>
</div>
</div>
<div class="py-5 text-center section-fade-in" style="background-image: url(&quot;assets/styleguide/cover_4.jpg&quot;);">
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-4 mb-0">Fade in</h1>
</div>
</div>
</div>
</div>
<div class="py-5 text-center section-fade-out" style="background-image: url(&quot;assets/styleguide/cover_3.jpg&quot;);">
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-4 mb-0">Fade out</h1>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
\ No newline at end of file
week05/windowapp/Pingendo/New Site/tp.css 0 → 100644
View file @ 8011f68e
This source diff could not be displayed because it is too large. You can view the blob instead.
week05/windowapp/Pingendo/New Site/tp.html 0 → 100644
View file @ 8011f68e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="tp.css" type="text/css"> </head>
<body class="text-center bg-primary">
<div class="text-center text-capitalize w-100" style="background-image: url('../../nid/mancora-peru-sky-sea-ocean-umbrella-couch-beach-sand-beach.jpg');background-size:cover;background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="border-primary col-md-4 col-xl-9">
<h1 class="display-3 mb-4 navbar-light text-left text-dark text-uppercase">Phuket&nbsp;
<br>&nbsp; &nbsp; &nbsp; Travel</h1>
</div>
</div>
</div>
</div>
<div class="py-2 bg-dark w-100">
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="home.html"> หน้าหลัก </a>
</div>
<div class="col-md-3">
<a class="btn btn-lg btn-secondary" href="tp0.html"> แพ็คเกจและโปรโมชั่น </a>
</div>
<div class="col-md-3">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> เที่ยวภูเก็ต </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="phuket1.html">ที่กิน</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket2.html">ที่เที่ยว</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket3.html">ที่พัก</a>
</div>
</div>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="about.html"> เกี่ยวกับ </a>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light" style="background-position:left">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center px-5 list-group-item-danger"> แพ็คเกจทัวร์ภูเก็ต </li>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp0.html"> แพ็คเกจทัวร์ภูเก็ต 2 วัน 1 คืน </a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp.html"> แพ็คเกจทัวร์ภูเก็ต 3 วัน 2 คืน </a>
<li class="list-group-item d-flex justify-content-between align-items-center px-5 list-group-item-danger">&nbsp; &nbsp;โปรโมชั่นที่พัก </li>
<a class="list-group-item align-items-center justify-content-between d-flex" href="tp3.html"> โปรโมชั่นโรงแรมถาวรบีชวิลเลจรีสอร์ทแอนด์สปาภูเก็ต </a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp4.html"> โปรโมชั่นโรงแรมศรีพันวาภูเก็ต </a>
</ul>
</div>
<div class="col-md-9">
<h3 class="display-4">
<u>แพ็คเกจทัวร์ภูเก็ต</u>&nbsp;
<br> </h3>
<h1 class="text-dark">ทัวร์เกาะรายา – เกาะเฮ - เกาะพีพี – เกาะไข่&nbsp;
<br>เรือเร็ว&nbsp;3 วัน 2 คืน
<u>เริ่มต้นเพียง</u> 4,190 บาท
<br>
<br> </h1>
<div class="mx-5 col-lg-10 col-md-6">
<div class="card shadowed">
<div class="card-block text-center card-primary p-2 bg-info bg-gradient">
<h2 class="">Day 1
<br> </h2>
<p class="lead">รถรับสนามบินภูเก็ต – ส่งท่านยังที่พัก</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item text-left"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;XX.XX เจ้าหน้าที่รอรับท่านที่สนามบินนานาชาติภูเก็ต เพื่อนำท่านไปยังโรงแรมที่พัก&nbsp;
<br>&nbsp; &nbsp; &nbsp; - ส่งท่านยังโรงแรมที่พัก และพักผ่อนตามอัธยาศัย</li>
</ul>
</div>
</div>
<div class="col-md-10 col-lg-10 py-5 mx-5">
<div class="card shadowed">
<div class="card-block text-center card-primary p-2 bg-info bg-gradient">
<h2>Day 2</h2>
<p class="lead">ทัวร์เกาะรายา – เกาะเฮ โดยเรือเร็ว (อาหารเช้า - อาหารเที่ยง)</p>
</div>
<ul class="list-group list-group-flush text-left">
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;08.30 - 09.00 น. รถรับท่านจากโรงแรมที่พัก (เวลารับที่แน่นอนขึ้นอยู่ที่ตั้งของโรงแรมที่คุณพัก)</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;09.00 น.ภูเก็ตเดินทางถึงท่าเทียบเรือฉลอง เช็คอินก่อนออกเดินทางโดยเรือเร็ว&nbsp;
<br>ใช้เวลาเดินทางประมาณ 15-20 นาที</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;09.30 น.ภูเก็ตถึงเกาะเฮ เล่นน้ำ หรือเลือกพักผ่อนตามอัธยาศัยที่หาด เลือกสนุกกับกิจกรรมทางน้ำมากมาย เช่น ภูเก็ตพาราเซลลิ่ง บานาน่าโบ๊ท ซีวอล์กเกอร์ (กิจกรรมนี้ไม่รวมในโปรแกรมทัวร์)</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;10.30 น.ภูเก็ตออกเดินทางต่อไปยังเกาะรายา เล่นน้ำ ดำผิวน้ำชมปะการัง บริเวณอ่าวปะตก&nbsp;
<br>(ขึ้นอยู่กับกระแสน้ำและคลื่นลมทะเล) สนุกสนานกับการเล่นน้ำ ดำน้ำชมปะการัง ตื่นตาตื่นใจ ภูเก็ตกับปะการังหลากสีสัน ปลานานาชนิด และชีวิตได้ทะเลหลากหลายชนิด หรือเลือกพักผ่อนตามอัธยาศัย</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;12.30 น.ภูเก็ตรับประทานอาหารกลางวัน ที่ร้านอาหารบนเกาะ หลังจากนั้นท่านสามารถเล่นน้ำชมฝูงปลานานาชนิด ภูเก็ตหรือเลือกพักผ่อนบนชายหาดตามอัธยาศัย</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;15.00 น.ภูเก็ตเดินทางกลับท่าเรืออ่าวฉลอง โดยใช้เวลาเดินทางประมาณ 30 นาที</li>
<li class="list-group-item text-left"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;17.30 น.ภูเก็ตส่งท่านยังที่พักที่โรงแรม </li>
</ul>
</div>
</div>
<img class="img-fluid d-block mx-5 px-5 rounded-circle" src="../../nid/day2.jpg">
<div class="col-md-10 col-lg-10 py-5 mx-5">
<div class="card shadowed">
<div class="card-block text-center card-primary p-2 bg-info bg-gradient">
<h2>Day 3</h2>
<p class="lead">ทัวร์เกาะพีพี – เกาะไข่ โดยเรือเร็ว – ส่งสนามบิน (อาหารเช้า - อาหารเที่ยง)</p>
</div>
<ul class="list-group list-group-flush text-left">
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;07.15 - 07.30 น. รถรับจากโรงแรม เพื่อเดินทางไปยังท่าเทียบเรือ (เวลารับที่แน่นอนขึ้นอยู่ที่ตั้งของโรงแรมที่คุณพัก) ภูเก็ตเช็คเอาท์พร้อมนำกระเป๋าเดินทางติดตัวมาด้วยค่ะ</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;08.30 น.ภูเก็ตถึงท่าเรือ รับบริการชา, กาแฟ</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;09.00 น.ภูเก็ตเรือออกจากท่าเรือ มุ่งหน้าสู่เกาะพีพี</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;10.20 น.ภูเก็ตถึงเกาะพีพี อ่าวมาหยา ชมสถานที่ถ่ายทำภาพยนตร์ ชื่อดังก้องโลก "เดอะบีช" ภูเก็ตชมความงามของอ่าวมาหยา เล่นน้ำ ถ่ายภาพ พักผ่อนตามอัธยาศัย</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;11.20 น.ภูเก็ตออกจากอ่าวมาหยา เดินทางต่อไปยังอ่าวโล๊ะสะมะ เล่นน้ำ ชมปลา ดูปะการัง&nbsp;
<br>ชมความงามของอ่าว</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;12.15 น.ภูเก็ตออกเดินทางสู่อ่าวปิเละ สถานที่ที่ได้รับการขนานนามว่า "สระว่ายน้ำกลางทะเล" ผ่านถ้ำไวกิ้ง ภูเก็ตถ้ำกลางทะเล สถานที่ที่เคยถูกค้นพบโดยนักเดินเรือ พร้อมถ่ายภาพความงดงาม</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;13.00 น.ภูเก็ตอิ่มอร่อยกับอาหารมื้อเที่ยงที่เกาะพีพีดอน พักผ่อนตามอัธยาศัย เดินทางต่อไปยังอ่าวลิง ภูเก็ตสนุกสนานไปกับการให้อาหารลิง ถ่ายภาพเป็นที่ระลึก หลังจากนั้นออกเดินต่อไปยังเกาะไข่นอก
</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;15.00 น.ภูเก็ตถึงเกาะไข่นอก พักผ่อนเล่นน้ำเพลิดเพลินกับฝูงปลามากมาย พักผ่อนตามอัธยาศัย </li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;16.00 น.ภูเก็ตออกจากเกาะไข่นอก เดินทางสู่เกาะภูเก็ต </li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;16.30 น.ภูเก็ตถึงท่าเรือ </li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;18.00 น.ภูเก็ตส่งท่านยังสนามบินภูเก็ต และเดินทางกลับโดยสวัสดิภาพพร้อมความประทับใจ </li>
</ul>
</div>
</div>
<img class="img-fluid d-block" src="../../nid/day3.1.jpg" width="100%">
<img class="img-fluid d-block" src="../../nid/day3.jpg" width="100%" height="100%">
<h3 class="text-secondary m-5 px-0" contenteditable="true">ราคาดังกล่าวเป็นราคาสำหรับเดินทางตั้งแต่ 2 ท่านขึ้นไป</h3>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active list-group-item-success">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">จองทัวร์ได้ที่</h5>
</div>
<p class="mb-1">โทร : 085-5769918 / 081-2713400&nbsp;
<br>อีเมลล์ : tourtawan@gmail.com / info@tawantour.com&nbsp;
<br>แฟกซ์ : 076-263215
<br>Line ID : tawantour</p>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
week05/windowapp/Pingendo/New Site/tp.scss 0 → 100644
View file @ 8011f68e
/*!
* Based on Bootstrap v4.0.0 (https://getbootstrap.com)
*/
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: true;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
// Variables
//
// Colors
$theme-colors: (
primary: #f1cd31,
secondary: #f70655,
light: #f3f3f3,
dark: #303030,
info: #009ac0,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: #111;
$body-color: #efefef;
$body-color-inverse: invert($body-color) !default;
$link-color: #f1cd31;
// Fonts
$font-family-base: 'Comic Sans MS', cursive, sans-serif;
$headings-font-family: 'Comic Sans MS', cursive, sans-serif;
$display-font-family: 'Comic Sans MS', cursive, sans-serif;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
$border-radius: 1rem;
$border-radius-lg: $border-radius * 1.2;
$border-radius-sm: $border-radius * .8;
$font-size-base: 0.85rem;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
.cover {
min-height:100%;
display:flex;
align-items:center
}
.bg-gradient {
overflow: hidden;
color: color-yiq(map-get($theme-colors, 'primary'));
background: linear-gradient(-30deg, theme-color("secondary") 0%, theme-color("primary") 50%, theme-color("primary") 100%);
}
.filter-dark {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'dark'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'dark'), 0.75);
}
}
.filter-light {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'light'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'),0.75);
}
}
.filter-color {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'primary'), 0.75);
}
}
.filter-gradient {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient(-30deg, transparentize(theme-color("secondary"), 0.1) 0%, transparentize(theme-color("primary"), 0.1) 50%, transparentize(theme-color("primary"), 0.05) 100%);
}
}
.filter-fade-in {
overflow: hidden;
position: relative;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1));
}
}
week05/windowapp/Pingendo/New Site/tp0.css 0 → 100644
View file @ 8011f68e
This source diff could not be displayed because it is too large. You can view the blob instead.
week05/windowapp/Pingendo/New Site/tp0.html 0 → 100644
View file @ 8011f68e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="tp0.css" type="text/css"> </head>
<body class="text-center bg-primary">
<div class="text-center text-capitalize w-100" style="background-image: url('C:/Users/User/Desktop/nid/mancora-peru-sky-sea-ocean-umbrella-couch-beach-sand-beach.jpg');background-size:cover;background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="border-primary col-md-4 col-xl-9">
<h1 class="display-3 mb-4 navbar-light text-left text-dark text-uppercase">Phuket&nbsp;
<br>&nbsp; &nbsp; &nbsp; Travel</h1>
</div>
</div>
</div>
</div>
<div class="py-2 bg-dark w-100">
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="home.html"> หน้าหลัก </a>
</div>
<div class="col-md-3">
<a class="btn btn-lg btn-secondary" href="tp0.html"> แพ็คเกจและโปรโมชั่น </a>
</div>
<div class="col-md-3">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> เที่ยวภูเก็ต </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="phuket1.html">ที่กิน</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket2.html">ที่เที่ยว</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket3.html">ที่พัก</a>
</div>
</div>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="about.html"> เกี่ยวกับ </a>
</div>
</div>
</div>
</div>
<div class="py-5 filter-light bg-primary">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center px-5 list-group-item-danger"> แพ็คเกจทัวร์ภูเก็ต </li>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp0.html"> แพ็คเกจทัวร์ภูเก็ต 2 วัน 1 คืน </a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp.html"> แพ็คเกจทัวร์ภูเก็ต 3 วัน 2 คืน </a>
<li class="list-group-item d-flex justify-content-between align-items-center px-5 list-group-item-danger">&nbsp; &nbsp;โปรโมชั่นที่พัก </li>
<a class="list-group-item align-items-center justify-content-between d-flex" href="tp3.html"> โปรโมชั่นโรงแรมถาวรบีชวิลเลจรีสอร์ทแอนด์สปาภูเก็ต </a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp4.html"> โปรโมชั่นโรงแรมศรีพันวาภูเก็ต </a>
</ul>
</div>
<div class="col-md-9">
<h3 class="display-4">
<u>แพ็คเกจทัวร์ภูเก็ต</u>&nbsp;
<br> </h3>
<h1 class="text-dark">ทัวร์ชมเมืองภูเก็ต – ทัวร์ล่องเรือแคนูชมอ่าวพังงา&nbsp;
<br>เรือใหญ่ 2 วัน 1 คืน
<br> </h1>
<div class="mx-5 col-lg-10 col-md-6 py-5">
<div class="card shadowed">
<div class="card-block text-center card-primary p-2 bg-danger bg-gradient">
<h2 class="">Day 1
<br> </h2>
<p class="lead">รถรับสนามบินภูเก็ต – ทัวร์ชมเมืองภูเก็ต 5 ชั่วโมง – ส่งท่านยังที่พัก&nbsp;
<br>(ทัวร์ส่วนตัว)</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item text-left"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;XX.XXภูเก็ตเดินทางมาถึงภูเก็ต เจ้าหน้าที่รอรับท่านที่ประตูโดยสารขาเข้าภายในประเทศที่สนามบินนานาชาติภูเก็ต ภูเก็ตเพื่อนำท่านไปชมเมืองภูเก็ตประมาณ 5 ชั่วโมง</li>
</ul>
</div>
</div>
<img class="img-fluid d-block" src="../../nid/daa1.jpg" width="100%">
<img class="img-fluid d-block" src="../../nid/daaa11.jpg" width="100%">
<div class="col-md-6 col-lg-10 py-5 mx-5">
<div class="card shadowed">
<div class="card-block text-center card-primary p-2 bg-info bg-gradient">
<h2>Day 2</h2>
<p class="lead">ทัวร์ล่องเรือแคนูชมอ่าวพังงา เรือใหญ่ – ส่งสนามบิน&nbsp;
<br>(อาหารเช้า - อาหารเที่ยง)</p>
</div>
<ul class="list-group list-group-flush text-left">
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;07.30 – 08.00 น. รถรับท่านจากโรงแรมที่พัก ไปยังท่าเรือ (เวลารับที่แน่นอนขึ้นอยู่ที่ตั้งของโรงแรมที่คุณพัก) ภูเก็ตเช็คเอาท์พร้อมนำกระเป๋าเดินทางติดตัวมาด้วยค่ะ</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;09.30 น.ภูเก็ตมาถึงท่าเรือมี ชา กาแฟ และขนมบริการฟรี</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;09.45 น.ภูเก็ตออกจากท่าเรือไปยังอ่าวพังงาโดยเรือใหญ่</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;10.30 น.ภูเก็ตมาถึงเกาะพนัก สนุกกับการพายแคนูเข้าชมภายในถ้ำ</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;11.30 น.ภูเก็ตออกจากเกาะพนักไปยังเกาะห้อง และสนุกกับการพายแคนูชมหินงอกหินย้อย</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;12.30 น.ภูเก็ตรับประทานอาหารบุฟเฟ่ต์บนเรือ</li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;13.30 น.ภูเก็ตเยี่ยมชมเขาตะปู ซึ่งเป็นสถานที่ที่เคยถ่ายทำภาพยนตร์เรื่อง “เจมส์บอนด์ 007”&nbsp;
<br>และชมเขาพิงกันภูเก็ตซื้อของฝาก อาทิ สร้อยมุก กำไลมุก เป็นต้น </li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;14.30 น.ภูเก็ตออกจากเขาตะปูไปยังจุดเล่นน้ำ และให้พักผ่อน 1 ชั่วโมง </li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;15.45 น.ภูเก็ตออกจากจุดเล่นน้ำโดยเรือใหญ่กลับท่าเรือ </li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;16.30 น.ภูเก็ตถึงท่าเรือ เจ้าหน้าที่รอรับท่านที่ท่าเรือ เพื่อนำท่านไปยังสนามบินภูเก็ต </li>
<li class="list-group-item"><i class="mx-auto fa d-inline fa-clock-o text-primary"></i>&nbsp;18.30 น.ภูเก็ตส่งท่านยังสนามบินภูเก็ต และเดินทางกลับโดยสวัสดิภาพพร้อมความประทับใจ </li>
</ul>
</div>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active list-group-item-success">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">จองทัวร์ได้ที่</h5>
</div>
<p class="mb-1">โทร : 085-5769918 / 081-2713400
<br>อีเมลล์ : tourtawan@gmail.com / info@tawantour.com&nbsp;
<br>แฟกซ์ : 076-263215&nbsp;
<br>Line ID : tawantour</p> <small><br></small> </a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
week05/windowapp/Pingendo/New Site/tp0.scss 0 → 100644
View file @ 8011f68e
/*!
* Based on Bootstrap v4.0.0 (https://getbootstrap.com)
*/
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: true;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
// Variables
//
// Colors
$theme-colors: (
primary: #f1cd31,
secondary: #f70655,
light: #f3f3f3,
dark: #303030,
info: #009ac0,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: #111;
$body-color: #efefef;
$body-color-inverse: invert($body-color) !default;
$link-color: #f1cd31;
// Fonts
$font-family-base: 'Comic Sans MS', cursive, sans-serif;
$headings-font-family: 'Comic Sans MS', cursive, sans-serif;
$display-font-family: 'Comic Sans MS', cursive, sans-serif;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
$font-size-base: 0.85rem;
$border-radius: 1rem;
$border-radius-lg: $border-radius * 1.2;
$border-radius-sm: $border-radius * .8;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
.cover {
min-height:100%;
display:flex;
align-items:center
}
.bg-gradient {
overflow: hidden;
color: color-yiq(map-get($theme-colors, 'primary'));
background: linear-gradient(-30deg, theme-color("secondary") 0%, theme-color("primary") 50%, theme-color("primary") 100%);
}
.filter-dark {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'dark'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'dark'), 0.75);
}
}
.filter-light {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'light'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'),0.75);
}
}
.filter-color {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'primary'), 0.75);
}
}
.filter-gradient {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient(-30deg, transparentize(theme-color("secondary"), 0.1) 0%, transparentize(theme-color("primary"), 0.1) 50%, transparentize(theme-color("primary"), 0.05) 100%);
}
}
.filter-fade-in {
overflow: hidden;
position: relative;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1));
}
}
week05/windowapp/Pingendo/New Site/tp3.css 0 → 100644
View file @ 8011f68e
This source diff could not be displayed because it is too large. You can view the blob instead.
week05/windowapp/Pingendo/New Site/tp3.html 0 → 100644
View file @ 8011f68e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="tp3.css" type="text/css"> </head>
<body class="text-center bg-primary">
<div class="text-center text-capitalize w-100" style="background-image: url('C:/Users/User/Desktop/nid/mancora-peru-sky-sea-ocean-umbrella-couch-beach-sand-beach.jpg');background-size:cover;background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="border-primary col-md-4 col-xl-9">
<h1 class="display-3 mb-4 navbar-light text-left text-dark text-uppercase">Phuket&nbsp;
<br>&nbsp; &nbsp; &nbsp; Travel</h1>
</div>
</div>
</div>
</div>
<div class="py-2 bg-dark w-100">
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="home.html"> หน้าหลัก </a>
</div>
<div class="col-md-3">
<a class="btn btn-lg btn-secondary" href="tp0.html"> แพ็คเกจและโปรโมชั่น </a>
</div>
<div class="col-md-3">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> เที่ยวภูเก็ต </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="phuket1.html">ที่กิน</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket2.html">ที่เที่ยว</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket3.html">ที่พัก</a>
</div>
</div>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="about.html"> เกี่ยวกับ </a>
</div>
</div>
</div>
</div>
<div class="filter-light bg-primary" style="background-position:left bottom;background-size:cover;">
<div class="container">
<div class="row">
<div class="col-md-3 my-5">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center px-5 list-group-item-danger"> แพ็คเกจทัวร์ภูเก็ต </li>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp0.html"> แพ็คเกจทัวร์ภูเก็ต 2 วัน 1 คืน </a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp.html"> แพ็คเกจทัวร์ภูเก็ต 3 วัน 2 คืน </a>
<li class="list-group-item d-flex justify-content-between align-items-center px-5 list-group-item-danger">&nbsp; &nbsp;โปรโมชั่นที่พัก </li>
<a class="list-group-item align-items-center justify-content-between d-flex" href="tp3.html"> โปรโมชั่นโรงแรมถาวรบีชวิลเลจรีสอร์ทแอนด์สปาภูเก็ต </a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp4.html"> โปรโมชั่นโรงแรมศรีพันวาภูเก็ต </a>
</ul>
</div>
<div class="col-md-9 my-5">
<h3 class="display-4">
<u>โปรโมชั่นที่พัก</u>&nbsp;
<br> </h3>
<h1 class="text-dark">ถาวร บีช วิลเลจ รีสอร์ท แอนด์ สปา ภูเก็ต&nbsp;
<br>(THAVORN BEACH VILLAGE RESORT&nbsp;
<br>&amp;&nbsp;SPA PHUKET)
<br> </h1>
<img class="img-fluid d-block my-5" src="../../nid/โรงแรมๅ.jpg">
<p class="lead text-left">
<u>โปรโมชั่นโรงแรม ถาวร บีช วิลเลจ รีสอร์ท แอนด์ สปา ภูเก็ต</u>&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ห้องพักพร้อมอาหารเช้า&nbsp;
<br>&nbsp; &nbsp; &nbsp;- Beachfront Cottage, Poolside with bathtub หรือ Hillside Ocean Facing with Jacuzzi
<br>&nbsp; &nbsp; &nbsp;- ลดทันที 50% จากราคา Best Available Rate&nbsp;
<br> -----------------------------------------------------------------------------------------------
<br>
<u>สิทธิพิเศษ</u>&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ฟรี สิทธิ์เข้าใช้บริการ VIP Lounge (มูลค่า 500 บาท)&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ฟรี Wi-Fi&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ลด 15% สำหรับสปา&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ลด 10% สำหรับค่าอาหาและเครื่องดื่ม (ยกเว้นรูมเซอร์วิส)
<br> -----------------------------------------------------------------------------------------------
<br>
<u>1 พ.ย. 60 – 31 มี.ค. 61</u>&nbsp;
<br>&nbsp; &nbsp; &nbsp;- สำรองห้องพักที่ www.thavornbeachvillage.com เท่านั้น (ระบุรหัสโปรโมชั่น ‘KTC17B’ ) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;- สอบถามรายละเอียดและสำรองห้องพัก โรงแรม ถาวร บีช วิลเลจ รีสอร์ท แอนด์ สปา ภูเก็ต&nbsp;
<br>&nbsp; &nbsp; &nbsp;- โทร: 076 396 035, 076 618 217&nbsp;
<br>&nbsp; &nbsp; &nbsp;- อีเมล์: rsvn@thavornbeachvillage.com, info@thavornbeachvillage.com&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ที่อยู่: 6/2 หมู่ 6 ตำบล กมลา อำเภอ กะทู้ ภูเก็ต 83150
<br>
<br> </p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
week05/windowapp/Pingendo/New Site/tp3.scss 0 → 100644
View file @ 8011f68e
/*!
* Based on Bootstrap v4.0.0 (https://getbootstrap.com)
*/
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: true;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
// Variables
//
// Colors
$theme-colors: (
primary: #f1cd31,
secondary: #f70655,
light: #f3f3f3,
dark: #303030,
info: #009ac0,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: #111;
$body-color: #efefef;
$body-color-inverse: invert($body-color) !default;
$link-color: #f1cd31;
// Fonts
$font-family-base: 'Comic Sans MS', cursive, sans-serif;
$headings-font-family: 'Comic Sans MS', cursive, sans-serif;
$display-font-family: 'Comic Sans MS', cursive, sans-serif;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
$font-size-base: 0.85rem;
$border-radius: 1rem;
$border-radius-lg: $border-radius * 1.2;
$border-radius-sm: $border-radius * .8;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
.cover {
min-height:100%;
display:flex;
align-items:center
}
.bg-gradient {
overflow: hidden;
color: color-yiq(map-get($theme-colors, 'primary'));
background: linear-gradient(-30deg, theme-color("secondary") 0%, theme-color("primary") 50%, theme-color("primary") 100%);
}
.filter-dark {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'dark'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'dark'), 0.75);
}
}
.filter-light {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'light'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'),0.75);
}
}
.filter-color {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'primary'), 0.75);
}
}
.filter-gradient {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient(-30deg, transparentize(theme-color("secondary"), 0.1) 0%, transparentize(theme-color("primary"), 0.1) 50%, transparentize(theme-color("primary"), 0.05) 100%);
}
}
.filter-fade-in {
overflow: hidden;
position: relative;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1));
}
}
week05/windowapp/Pingendo/New Site/tp4.css 0 → 100644
View file @ 8011f68e
This source diff could not be displayed because it is too large. You can view the blob instead.
week05/windowapp/Pingendo/New Site/tp4.html 0 → 100644
View file @ 8011f68e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="tp4.css" type="text/css"> </head>
<body class="text-center bg-primary">
<div class="text-center text-capitalize w-100" style="background-image: url('C:/Users/User/Desktop/nid/mancora-peru-sky-sea-ocean-umbrella-couch-beach-sand-beach.jpg');background-size:cover;background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="border-primary col-md-4 col-xl-9">
<h1 class="display-3 mb-4 navbar-light text-left text-dark text-uppercase">Phuket&nbsp;
<br>&nbsp; &nbsp; &nbsp; Travel</h1>
</div>
</div>
</div>
</div>
<div class="py-2 bg-dark w-100">
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="btn btn-lg btn-primary" href="home.html"> หน้าหลัก </a>
</div>
<div class="col-md-3">
<a class="btn btn-lg btn-secondary" href="tp0.html"> แพ็คเกจและโปรโมชั่น </a>
</div>
<div class="col-md-3">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> เที่ยวภูเก็ต </button>
<div class="dropdown-menu">
<a class="dropdown-item" href="phuket1.html">ที่กิน</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket2.html">ที่เที่ยว</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="phuket3.html">ที่พัก</a>
</div>
</div>
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-lg" href="about.html"> เกี่ยวกับ </a>
</div>
</div>
</div>
</div>
<div class="filter-light" style="background-position:left bottom;background-size:cover;">
<div class="container">
<div class="row">
<div class="col-md-3 my-5">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center px-5 list-group-item-danger"> แพ็คเกจทัวร์ภูเก็ต </li>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp0.html"> แพ็คเกจทัวร์ภูเก็ต 2 วัน 1 คืน </a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp.html"> แพ็คเกจทัวร์ภูเก็ต 3 วัน 2 คืน </a>
<li class="list-group-item d-flex justify-content-between align-items-center px-5 list-group-item-danger">&nbsp; &nbsp;โปรโมชั่นที่พัก </li>
<a class="list-group-item align-items-center justify-content-between d-flex" href="tp3.html"> โปรโมชั่นโรงแรมถาวรบีชวิลเลจรีสอร์ทแอนด์สปาภูเก็ต </a>
<a class="list-group-item d-flex justify-content-between align-items-center" href="tp4.html"> โปรโมชั่นโรงแรมศรีพันวาภูเก็ต </a>
</ul>
</div>
<div class="col-md-9 my-5">
<h3 class="display-4">
<u>โปรโมชั่นที่พัก</u>&nbsp;
<br> </h3>
<h1 class="text-dark">ศรีพันวา ภูเก็ต (Sri Panwa Phuket)
<br>
<br> </h1>
<img class="img-fluid d-block" src="../../nid/โรงแรม2.jpg">
<p class="lead text-left">
<br>
<br>
<br>
<u>โปรโมชั่นโรงแรม ศรีพันวา ภูเก็ต (Sri Panwa Phuket)</u>&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ห้องพักทุกประเภทพร้อมอาหารเช้า&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ลด 35% จากราคา Best Available Rate บนเว็บไซต์&nbsp;
<br>&nbsp; &nbsp; &nbsp;- สำรองห้องพักผ่านเว็บไซต์โรงแรม www.sripanwa.com ใส่รหัสส่วนลด : KTC18SPW&nbsp;
<br>-----------------------------------------------------------------------------------------------
<br>
<u>สิทธิพิเศษ</u>&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ฟรี มินิบาร์ ทุกวัน&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ฟรี Wi-Fi&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ฟรี เครื่องดื่มพิเศษ 1 ขวด มูลค่า 2,119 บาท เมื่อเข้าพัก 2 ห้อง หรือ 4 ท่านขึ้นไป&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ลด 18% สำหรับค่าอาหารและเครื่องดื่มเมนูปกติ (ยกเว้นเครื่องดื่มแอลกอฮอล์)&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ลด 20% สำหรับสปาเมนูปกติ&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ลด 10% สำหรับสปาเมนูแพ็กเกจ&nbsp;
<br>-----------------------------------------------------------------------------------------------
<br>
<u>1 มี.ค. – 31 ต.ค. 61</u>&nbsp;
<br>&nbsp; &nbsp; &nbsp;- สอบถามรายละเอียด ศรีพันวา ภูเก็ต&nbsp;
<br>&nbsp; &nbsp; &nbsp;- โทร : 076 371 000&nbsp;
<br>&nbsp; &nbsp; &nbsp;- อีเมล : chill@sripanwa.com&nbsp;
<br>&nbsp; &nbsp; &nbsp;- ที่อยู่ : 88 หมู่ 8 ถ.ศักดิเดช ต.วิชิต อ.เมือง จ.ภูเก็ต 83000 </p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<pingendo onclick="window.open('https://pingendo.com/', '_blank')" style="cursor:pointer;position: fixed;bottom: 10px;right:10px;padding:4px;background-color: #00b0eb;border-radius: 8px; width:180px;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;color:white">Made with Pingendo&nbsp;&nbsp;
<img src="https://pingendo.com/site-assets/Pingendo_logo_big.png" class="d-block" alt="Pingendo logo" height="16">
</pingendo>
</body>
</html>
\ No newline at end of file
week05/windowapp/Pingendo/New Site/tp4.scss 0 → 100644
View file @ 8011f68e
/*!
* Based on Bootstrap v4.0.0 (https://getbootstrap.com)
*/
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true !default;
$enable-shadows: true;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;
// Variables
//
// Colors
$theme-colors: (
primary: #f1cd31,
secondary: #f70655,
light: #f3f3f3,
dark: #303030,
info: #009ac0,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: #111;
$body-color: #efefef;
$body-color-inverse: invert($body-color) !default;
$link-color: #f1cd31;
// Fonts
$font-family-base: 'Comic Sans MS', cursive, sans-serif;
$headings-font-family: 'Comic Sans MS', cursive, sans-serif;
$display-font-family: 'Comic Sans MS', cursive, sans-serif;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
$font-size-base: 0.85rem;
$border-radius: 1rem;
$border-radius-lg: $border-radius * 1.2;
$border-radius-sm: $border-radius * .8;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
.cover {
min-height:100%;
display:flex;
align-items:center
}
.bg-gradient {
overflow: hidden;
color: color-yiq(map-get($theme-colors, 'primary'));
background: linear-gradient(-30deg, theme-color("secondary") 0%, theme-color("primary") 50%, theme-color("primary") 100%);
}
.filter-dark {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'dark'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'dark'), 0.75);
}
}
.filter-light {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'light'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'),0.75);
}
}
.filter-color {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'primary'), 0.75);
}
}
.filter-gradient {
overflow: hidden;
position: relative;
color: color-yiq(map-get($theme-colors, 'primary'));
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient(-30deg, transparentize(theme-color("secondary"), 0.1) 0%, transparentize(theme-color("primary"), 0.1) 50%, transparentize(theme-color("primary"), 0.05) 100%);
}
}
.filter-fade-in {
overflow: hidden;
position: relative;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: linear-gradient($body-bg, transparentize($body-bg, 0.2),transparentize($body-bg, 0.9),transparentize($body-bg, 1));
}
}
projects @ 2b42c710
Subproject commit 2b42c71092fd019c63e3cc336061c15c90bcb7a2
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment