Commit 35a5215d authored by rattanaporn  saysee's avatar rattanaporn saysee

Project

parent c7a12d71
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>เกี่ยวกับเรา</title>
<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="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css"> </head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-gradient">
<div class="container">
<a class="navbar-brand" href="home.html"><b><h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ชีวิตติดเส้น</h2></b></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" 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="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="หน้าแรก.html">หน้าหลัก</a>
</li>
</ul>
<a class="btn navbar-btn ml-2 text-white btn-secondary" href="ABOUTME.html"><i class="fa d-inline fa-lg fa-user-circle-o"></i> เกี่ยวกับเรา</a>
</div>
</div>
</nav>
<div class="p-1 bg-primary filter-dark">
<div class="container">
<div class="row bg-primary">
<div class="col-md-5 text-center align-self-center offset-md-7 py-2">
<a href="https://www.facebook.com/rattanaporn.saysee" target="_blank"><i class="fa fa-facebook-square text-muted fa-3x m-2"></i></a>
<a href="https://twitter.com/" target="_blank"><i class="fa fa-3x fa-twitter m-2 text-muted"></i></a>
<a href="https://www.instagram.com/pom3986" target="_blank"><i class="fa fa-3x fa-instagram text-muted m-2"></i></a>
</div>
</div>
</div>
</div>
<div class="py-5 bg-primary filter-dark">
<div class="container">
<div class="row">
<div class="align-self-center text-md-right text-center col-md-4">
<h3 class="text-primary">ชื่อ - นามสกุล</h3>
<p class="mb-5">นางสาว รัตนาภรณ์ &nbsp; สายสี &nbsp;
<br>ชื่อเล่น ป้อม
<br>&nbsp; &nbsp;</p>
<h3 class="text-primary">ที่อยู่&nbsp;</h3>
<p class="mb-5">125 หมู่ที่ 6 บ้านแขมใต้ &nbsp;ตำบลบ้านแขม &nbsp;&nbsp;
<br>อำเภอพิบูลมังสาหาร &nbsp;จังหวัดอุบลราชธานี 34110
<br>&nbsp;</p>
<h3 class="text-primary">ติดต่อเรา</h3>
<p class="">E-mail : rattanaporn.sa.58@ubu.ac.th
<br> </p>
<div class="col-4"> </div>
</div>
<div class="my-3 col-md-4">
<img class="img-fluid d-block ml-1 mx-auto" src="p3.jpg"> </div>
<div class="align-self-center text-md-left text-center col-md-4">
<h3 class="text-primary">การศึกษา&nbsp;</h3>
<p class="mb-5">ปัจจุบันกำลังศึกษาในระดับปริญญาตรี&nbsp;
<br>มหาวิทยาลัยอุบลราชธานี&nbsp;
<br>คณะวิทยาศาสตร์ &nbsp;สาขาวิทยาการคอมพิวเตอร์&nbsp;</p>
<h3 class="text-primary">วันเดือนปีเกิด</h3>
<p class="mb-5">12 &nbsp;กุมภาพันธ์ &nbsp;2540</p>
<h3 class="text-primary">เหตุผลที่ทำเว็บนี้</h3>
<p>เพราะอยากให้ทุกคนรู้ว่าบะหมี่กึ่งสำเร็จรูปที่บริษัทไทยเป็นผู้ผลิตมีกี่ยี่ห้อ มีกี่รสชาติ บางยี่ห้อเราอาจจะไม่รู้ และบางรสชาติเราอาจจะยังไม่กินมาก่อน&nbsp;</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
This diff is collapsed.
/*!
* Aquamarine 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=Roboto:200,300,400');
// 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: #12bbad,
secondary: #4f70ce,
light: #f3f3f3,
dark: #151515,
info: #ccc,
success: #28a745,
warning: #ffc107,
danger: #dc3545
);
$body-bg: white;
$body-color: #333;
$body-color-inverse: invert($body-color) !default;
$link-color: #12bbad;
// Fonts
$font-family-base: Roboto;
$headings-font-family: Roboto;
$display-font-family: Roboto;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 960px);
// Components
$border-width: 1px !default;
// Buttons
$input-btn-padding-y-lg: .55rem;
$input-btn-padding-x-lg: 1.2rem;
$input-btn-padding-x: 1rem !default;
// Cards
$card-border-width: 0px;
$card-bg: map-get($theme-colors, 'light');
// Breadcrumb
$breadcrumb-bg: transparent !default;
// Carousel
$carousel-caption-width: 100% !default;
$carousel-indicator-height: 6px !default;
// Forms
$form-group-margin-bottom: 0rem;
@import 'bootstrap-4.0.0';
html,body {
height:100%;
}
body > * {
background-position: center;
background-size: cover;
}
.cover {
min-height: 100%;
}
.inset-shadowed {
box-shadow: inset 0px 0px 45px #555;
}
.shadowed {
box-shadow: 0px 0px 5px #555;
}
.section-aquamarine {
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(to bottom right, transparentize(theme-color("primary"), 0.1) 0%, transparentize(theme-color("secondary"), 0.1) 100%);
}
}
.section-dark {
position: relative;
color:map-get($theme-colors, 'light');
background-size:cover;
background-position: center;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'dark'), 0.75);
}
}
.section-light {
position: relative;
color:map-get($theme-colors, 'dark');
background-size:cover;
background-position: center;
&:before {
position: absolute;
top:0px;
left:0px;
width:100%;
height: 100%;
content: ' ';
background: rgba(map-get($theme-colors, 'light'), 0.75);
}
}
.section-parallax {
background-attachment: fixed;
background-size:cover;
background-position: center;
}
.bg-aquamarine {
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%);
color:white;
}
.img-thumbnail {
border:0px;
padding:10px;
}
.carousel {
.carousel-caption {
padding-top:50px;
padding-bottom:20px;
bottom:0px;
background: linear-gradient(transparent 10%, transparentize(theme-color("dark"), 0.05) 100%);}
.carousel-control-next, .carousel-control-prev {
opacity:0.85;}
.carousel-indicators {
bottom: 0px;
}
}
/* 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%;
}
}
\ No newline at end of file
<!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="theme.css" type="text/css"> </head>
<body>
<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>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ชีวิตติดเส้น</title>
<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="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css"> </head>
<body>
<div class="w-100 h-100 text-center bg-dark" style="background-image: url(&quot;ma1.jpg&quot;); background-size: cover;">
<div class="container py-5">
<div class="row">
<div class="col-md-6">
<h1 class="p-2 text-light display-1 text-justify text-capitalize">ชีวิต
<br>&nbsp;ติด
<br>เส้น
<br>
<br> </h1>
<a class="btn text-dark text-center w-50 btn-block active btn-warning mr-auto btn-lg" href="หน้าแรก.html">เข้าสู่เว็บไซต์</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
/**
* 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()
})
})();
/**
* 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
/**
* 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
};
});
}
}
});
})();
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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