Skip to content

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

project

parent c986ed52
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2110 additions and 0 deletions
week05/windowapp/Pingendo/New Site/about.css 0 → 100644
View file @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/about.html 0 → 100644
View file @ 17daac80
<!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 @ 17daac80
/*!
* 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 @ 17daac80
<!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 @ 17daac80
/**
* 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 @ 17daac80
/**
* 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 @ 17daac80
/**
* 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 @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/neon.scss 0 → 100644
View file @ 17daac80
/*!
* 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 @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/phuket1.html 0 → 100644
View file @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/phuket1.scss 0 → 100644
View file @ 17daac80
/*!
* 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 @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/phuket2.html 0 → 100644
View file @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/phuket2.scss 0 → 100644
View file @ 17daac80
/*!
* 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 @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/phuket3.html 0 → 100644
View file @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/phuket3.scss 0 → 100644
View file @ 17daac80
/*!
* 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 @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/tp.css 0 → 100644
View file @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/tp.html 0 → 100644
View file @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/tp.scss 0 → 100644
View file @ 17daac80
/*!
* 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 @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/tp0.html 0 → 100644
View file @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/tp0.scss 0 → 100644
View file @ 17daac80
/*!
* 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 @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/tp3.html 0 → 100644
View file @ 17daac80
<!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 @ 17daac80
/*!
* 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 @ 17daac80
This diff is collapsed.
week05/windowapp/Pingendo/New Site/tp4.html 0 → 100644
View file @ 17daac80
<!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 @ 17daac80
/*!
* 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));
}
}
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