Skip to content

N
nodejs-60-2
Commit 9cd05f59 authored by tanapoom's avatar tanapoom
Browse files
Options

web

parent 707df731
Hide whitespace changes
Inline Side-by-side
Showing with 802 additions and 5 deletions
Pingendo/New Site/blank.html 0 → 100644
View file @ 9cd05f59
<!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>
<div class="py-5 bg-success bg-gradient filter-dark cover text-center text-uppercase" style="background-image: url(&quot;https://pingendo.github.io/templates/sections/assets/cover_event.jpg&quot;);background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-3 mb-4 text-primary">Hello</h1>
<p class="lead mb-5"></p>
<p id="demo"></p>
<a href="#" class="btn btn-lg mx-1 btn-secondary" onclick="showname()">ชื่อ</a>
<a href="#" class="btn btn-lg btn-primary mx-1" onclick="showmail()">email</a>
<script>
function showname(){
document.getElementById("demo").innerHTML = "ธนภูมิ";
}
</script>
<script>
function showmail(){
document.getElementById("demo").innerHTML = "thanaphum.su.57@ubu.ac.th";
}
</script>
</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
Pingendo/New Site/styleguide.html 0 → 100644
View file @ 9cd05f59
<!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="theme.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">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="https://picsum.photos/600/600?image=1074" alt="Card image"> </div>
<div class="col-md-4">
<img class="img-fluid rounded-circle p-3" src="https://picsum.photos/600/600?image=1074" alt="Card image"> </div>
<div class="col-md-4">
<img class="img-fluid img-thumbnail p-3" src="https://picsum.photos/600/600?image=1074" 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="https://picsum.photos/1200/675?image=1050" 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="https://picsum.photos/1200/675?image=983" 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="https://picsum.photos/1200/675?image=983" data-holder-rendered="true">
<div class="carousel-caption">
<p class="lead">Caption I</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://picsum.photos/1200/675?image=972" data-holder-rendered="true">
<div class="carousel-caption">
<p class="lead">Caption II</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://picsum.photos/1200/675?image=1050" data-holder-rendered="true">
<div class="carousel-caption">
<p class="lead">Caption III</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="https://picsum.photos/600/600?image=1074" alt="Card image">
<div class="card-body">
<h4 class="card-title">Card</h4>
<p class="">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="https://picsum.photos/600/600?image=1074" 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">
<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 bg-gradient" style="">
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-1">Gradient background</h1>
</div>
</div>
</div>
</div>
<div class="py-5 text-center filter-dark" style="background-image: url('https://picsum.photos/1200/675?image=1050');background-size:cover;background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-1">Dark filter</h1>
</div>
</div>
</div>
</div>
<div class="py-5 text-center filter-light" style="background-image: url('https://picsum.photos/1200/675?image=1050');background-position:center center;background-size:cover;">
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-1">Light filter</h1>
</div>
</div>
</div>
</div>
<div class="py-5 text-center filter-color" style="background-image: url('https://picsum.photos/1200/675?image=1050');background-position:center center;background-size:cover;">
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-1">Color filter</h1>
</div>
</div>
</div>
</div>
<div class="py-5 text-center filter-gradient" style="background-image: url('https://picsum.photos/1200/675?image=1050');background-size:cover;background-position:center center;">
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-1">Gradient&nbsp;filter</h1>
</div>
</div>
</div>
</div>
<div class="py-5 text-center filter-fade-in" style="background-image: url('https://picsum.photos/1200/675?image=1050');background-position:center center;background-size:cover;">
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-1">Fade in</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>
</body>
</html>
\ No newline at end of file
Pingendo/New Site/theme.css 0 → 100644
View file @ 9cd05f59
This source diff could not be displayed because it is too large. You can view the blob instead.
Pingendo/New Site/theme.scss 0 → 100644
View file @ 9cd05f59
/*!
* 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: #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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$headings-font-family: $font-family-base;
$display-font-family: $font-family-base;
$font-weight-normal: 200;
$headings-font-weight: 200;
$lead-font-size: 1.30rem;
$spacer: 1.5rem;
@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/index.html
View file @ 9cd05f59
...@@ -4,13 +4,14 @@ ...@@ -4,13 +4,14 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>สวัสดีชาวโลก</title> <title>สวัสดีชาวโลก</title>
</head> </head>
<body background="12.jpg" width="400" height="400"> <body background="http://hdwarena.com/wp-content/uploads/2016/12/Color-Codes-Background.jpg">
<h1>สวัสดีชาวโลก</h1> <h2>สวัสดีชาวโลก</h2>
<ol> <ol>
<li>เราใช้โหนดเวอร์ชั่น <script>document.write(process.versions.node)</script></li> <li><font color="white">เราใช้โหนดเวอร์ชั่น</font><script>document.write(process.versions.node)</script></li>
<li>Chrome เวอร์ชั่น <script>document.write(process.versions.chrome)</script></li> <li><font color="blue">Chrome เวอร์ชั่น </font><script>document.write(process.versions.chrome)</script></li>
<li>และ Electron เวอร์ชั่น <script>document.write(process.versions.electron)</script></li> <li><font color="green">และ Electron เวอร์ชั่น</font> <script>document.write(process.versions.electron)</script></li>
<button type="button" onclick="alert('ธนภูมิ')">ชื่อ</button>
</ol> </ol>
</body> </body>
</html> </html>
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