stuff before slep
This commit is contained in:
WinsDominoes
parent
6abfcbbcc4
commit
1a357b8747
|
|
@ -11,6 +11,9 @@
|
||||||
--light-nav-backdrop-color: #fafafa;
|
--light-nav-backdrop-color: #fafafa;
|
||||||
--light-nav-shade-color: rgba(0, 0, 0, 0.12);
|
--light-nav-shade-color: rgba(0, 0, 0, 0.12);
|
||||||
--light-nav-darker-shade-color: rgba(0, 0, 0, 0.12);
|
--light-nav-darker-shade-color: rgba(0, 0, 0, 0.12);
|
||||||
|
--light-card-bg-color: #ffffff;
|
||||||
|
--light-card-fg-color: rgba(0, 0, 0, 0.8);
|
||||||
|
--light-card-shade-color: rgba(0, 0, 0, 0.07);
|
||||||
|
|
||||||
--dark-bg: #242424;
|
--dark-bg: #242424;
|
||||||
--dark-fg-color: #ffffff;
|
--dark-fg-color: #ffffff;
|
||||||
|
|
@ -20,6 +23,9 @@
|
||||||
--dark-nav-backdrop-color: #242424;
|
--dark-nav-backdrop-color: #242424;
|
||||||
--dark-nav-shade-color: rgba(0, 0, 0, 0.36);
|
--dark-nav-shade-color: rgba(0, 0, 0, 0.36);
|
||||||
--dark-nav-darker-shade-color: rgba(0, 0, 0, 0.9);
|
--dark-nav-darker-shade-color: rgba(0, 0, 0, 0.9);
|
||||||
|
--dark-card-bg-color: rgba(255, 255, 255, 0.08);
|
||||||
|
--dark-card-fg-color: #ffffff;
|
||||||
|
--dark-card-shade-color: rgba(0, 0, 0, 0.36);
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
|
|
@ -45,7 +51,7 @@ html, body {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5 {
|
h1, h2, h3, h4, h5, h6, p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -67,6 +73,10 @@ header {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-bold {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
|
@ -196,9 +206,52 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-banner h1 {
|
.main-banner h1 {
|
||||||
font-size: calc(50px + .5vw);
|
font-size: calc(45px + .5vw);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-banner p {
|
.main-banner p {
|
||||||
font-size: calc(12px + .5vw);
|
font-size: calc(12px + .5vw);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-apps {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-apps > #heading {
|
||||||
|
margin: 2rem 0 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-grid {
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-grid__item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
text-align: start;
|
||||||
|
|
||||||
|
padding-block: .5rem;
|
||||||
|
padding-inline: .5rem 1rem;
|
||||||
|
max-width: fit-content;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
color: light-dark(var(--light-card-fg-color), var(--dark-card-fg-color));
|
||||||
|
background-color: light-dark(var(--light-card-bg-color), var(--dark-card-bg-color));
|
||||||
|
box-shadow: 1px 1px 5px 0 light-dark(var(--light-card-shade-color), var(--dark-card-shade-color));
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-grid__item > img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 128px;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
39
index.html
39
index.html
|
|
@ -46,8 +46,45 @@
|
||||||
<h1>Apps by WinsCloud</h1>
|
<h1>Apps by WinsCloud</h1>
|
||||||
<p>Discover amazing apps developed by me! (<a href="https://winsdominoes.net">Win</a>) and my friends.</p>
|
<p>Discover amazing apps developed by me! (<a href="https://winsdominoes.net">Win</a>) and my friends.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="main-details">
|
<div class="main-apps">
|
||||||
|
<div id="heading">
|
||||||
|
<h1>Apps</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="app-grid">
|
||||||
|
<a class="app-grid__item" href="https://datecalculator.winscloud.net">
|
||||||
|
<img src="assets/images/icons/apps/dateapp.png" alt="Date Calculator">
|
||||||
|
|
||||||
|
<div class="details">
|
||||||
|
<span class="text-bold">Date Calculator</span>
|
||||||
|
<p>
|
||||||
|
App for calculating dates.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="app-grid__item" href="https://datecalculator.winscloud.net">
|
||||||
|
<img src="https://git.winscloud.net/repo-avatars/828b37c6b4e0493035c0b9d3e263dc855e88ddd5340afcd14f027c55c0726ddc" alt="Runoff">
|
||||||
|
|
||||||
|
<div class="details">
|
||||||
|
<span class="text-bold">Runoff</span>
|
||||||
|
<p>
|
||||||
|
Manage your startup apps and scripts!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="app-grid__item" href="https://datecalculator.winscloud.net">
|
||||||
|
<img src="https://git.winscloud.net/repo-avatars/1afe8fbd0d0acb779caa1779e16ed0533404d24598e207d82d02b141adde09ba" alt="Aekasarn">
|
||||||
|
|
||||||
|
<div class="details">
|
||||||
|
<span class="text-bold">Aekasarn</span>
|
||||||
|
<p>
|
||||||
|
A full and complete PDF viewer.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
212
thingy.html
212
thingy.html
|
|
@ -1,212 +0,0 @@
|
||||||
<main>
|
|
||||||
<div id="mainCarousel" class="carousel container slide mt-5 mb-2" data-bs-ride="carousel">
|
|
||||||
<div class="carousel-inner">
|
|
||||||
<img src="assets/images/banners/banner.jpg" alt="EMPower Renewable Energy Banner" id="mainBanner"
|
|
||||||
class="rounded-4">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container" data-bs-spy="scroll" data-bs-target="#mainNavbar">
|
|
||||||
<div id="serviceSection" class="container px-4 py-5" id="featured-3">
|
|
||||||
<h2 class="pb-2 border-bottom">About Us</h2>
|
|
||||||
<div class="row g-4 py-4 row-cols-1 row-cols-lg-3">
|
|
||||||
<div class="feature col">
|
|
||||||
<div
|
|
||||||
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
|
||||||
<i class="bi bi-person-fill"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="fs-2 text-body-emphasis">ทีมงานมืออาชีพ</h3>
|
|
||||||
<p>เรามีทีมงานมืออาชีพพร้อมด้วยประสบการณ์ในการติดตั้งระบบ Solar Rooftop มามากกว่า 10 ปี
|
|
||||||
พร้อมสำหรับการติดตั้งในสถานที่ต่างๆ</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature col">
|
|
||||||
<div
|
|
||||||
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
|
||||||
<i class="bi bi-lightbulb-fill"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="fs-2 text-body-emphasis">อุปกรณ์คุณภาพ</h3>
|
|
||||||
<p>เราใช้อุปกรณ์เช่น Inverter หรือ แผงโซล่าเซลล์ที่มีประสิทธิภาพสูงในราคาที่ย่อมเยา</p>
|
|
||||||
</div>
|
|
||||||
<div class="feature col">
|
|
||||||
<div
|
|
||||||
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
|
||||||
<i class="bi bi-calendar-check-fill"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="fs-2 text-body-emphasis">บริการดูแล</h3>
|
|
||||||
<p>เรามีบริการหลังการติดตั้ง เช่น การติดตั้งระบบ Monitor Software
|
|
||||||
และบริการดูแลระบบและล้างแผงโซล่าเซลล์ 2 ปี - 2 ครั้งใน 1 ปี - พร้อมการรับประกัน 5 ปี</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="offerSection" class="container px-4">
|
|
||||||
<h2 class="pb-2 border-bottom">Our Offers</h2>
|
|
||||||
|
|
||||||
<div class="text-center">
|
|
||||||
<div class="pt-4 pb-4">
|
|
||||||
<h3>Single Phase Plans - ระบบไฟฟ้า 1 เฟส</h3>
|
|
||||||
<span>ทางบริษัทจะดำเนินการขออนุญาตขนานไฟกับการไฟฟ้าฯให้กับทางลูกค้า</span>
|
|
||||||
</div>
|
|
||||||
<div class="row row-cols-1 row-cols-lg-2 mb-3 text-center justify-content-center">
|
|
||||||
<div class="col">
|
|
||||||
<div class="card mb-4 rounded-3 shadow-sm">
|
|
||||||
<div class="card-header py-3">
|
|
||||||
<h4 class="my-0 fw-normal">3.3 kW Plan</h4>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h1 class="display-4 fw-bold card-title pricing-card-title">฿130,000*</h1>
|
|
||||||
<span class="text-danger">* ราคาไม่รวม VAT</span>
|
|
||||||
<ul class="list-group mt-3 mb-3">
|
|
||||||
<li class="list-group-item active">สามารถลดค่าไฟได้ประมาณ <span class="fw-bold text-decoration-underline">2,000 บาท / เดือน</span></li>
|
|
||||||
<li class="list-group-item">สำหรับผู้ใช้ระบบไฟฟ้า 1 Phase</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">แผงโซล่าเซลล์ Tier 1 จำนวน 6 แผง</li>
|
|
||||||
<li class="list-group-item">อินเวอร์เตอร์ Huawei 3kW</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">พื้นที่ติดตั้ง 15 ตารางเมตร</li>
|
|
||||||
<li class="list-group-item">บริการล้างแผงฟรี ปีละ 2 ครั้ง ในระยะเวลา 2 ปี</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">ประกันงานติดตั้ง 3 ปี</li>
|
|
||||||
<li class="list-group-item"><span class="fw-bold">ฟรีสำรวจหน้างาน</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card mb-4 rounded-3 shadow-sm border-primary">
|
|
||||||
<div class="card-header py-3 text-bg-primary border-primary">
|
|
||||||
<h4 class="my-0 fw-normal">5.5kW Plan</h4>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h1 class="display-4 fw-bold card-title pricing-card-title">฿155,000*</h1>
|
|
||||||
<span class="text-danger">* ราคาไม่รวม VAT</span>
|
|
||||||
<ul class="list-group mt-3 mb-3">
|
|
||||||
<li class="list-group-item active">สามารถลดค่าไฟได้ประมาณ <span class="fw-bold text-decoration-underline">3,000 บาท / เดือน</span></li>
|
|
||||||
<li class="list-group-item">สำหรับผู้ใช้ระบบไฟฟ้า 1 Phase</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">แผงโซล่าเซลล์ Tier 1 จำนวน 10 แผง</li>
|
|
||||||
<li class="list-group-item">อินเวอร์เตอร์ Huawei 5kW</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">พื้นที่ติดตั้ง 22 ตารางเมตร</li>
|
|
||||||
<li class="list-group-item">บริการล้างแผงฟรี ปีละ 2 ครั้ง ในระยะเวลา 2 ปี</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">ประกันงานติดตั้ง 3 ปี</li>
|
|
||||||
<li class="list-group-item"><span class="fw-bold">ฟรีสำรวจหน้างาน</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="pt-4 pb-4">
|
|
||||||
<h3>Three Phase Plans - ระบบไฟฟ้า 3 เฟส</h3>
|
|
||||||
<span>ทางบริษัทจะดำเนินการขออนุญาตขนานไฟกับการไฟฟ้าฯให้กับทางลูกค้า</span>
|
|
||||||
</div>
|
|
||||||
<div class="row row-cols-1 row-cols-lg-2 mb-3 text-center justify-content-center">
|
|
||||||
<div class="col">
|
|
||||||
<div class="card mb-4 rounded-3 shadow-sm border-primary">
|
|
||||||
<div class="card-header py-3 text-bg-primary border-primary">
|
|
||||||
<h4 class="my-0 fw-normal">5.5 kW Plan</h4>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h1 class="display-4 fw-bold card-title pricing-card-title">฿165,000*</h1>
|
|
||||||
<span class="text-danger">* ราคาไม่รวม VAT</span>
|
|
||||||
<ul class="list-group mt-3 mb-3">
|
|
||||||
<li class="list-group-item active">สามารถลดค่าไฟได้ประมาณ <span class="fw-bold text-decoration-underline">3,000 บาท / เดือน</span></li>
|
|
||||||
<li class="list-group-item">สำหรับผู้ใช้ระบบไฟฟ้า 3 Phase</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">แผงโซล่าเซลล์ Tier 1 จำนวน 10 แผง</li>
|
|
||||||
<li class="list-group-item">อินเวอร์เตอร์ Huawei 5kW</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">พื้นที่ติดตั้ง 22 ตารางเมตร</li>
|
|
||||||
<li class="list-group-item">บริการล้างแผงฟรี ปีละ 2 ครั้ง ในระยะเวลา 2 ปี</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">ประกันงานติดตั้ง 3 ปี</li>
|
|
||||||
<li class="list-group-item"><span class="fw-bold">ฟรีสำรวจหน้างาน</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card mb-4 rounded-3 shadow-sm">
|
|
||||||
<div class="card-header py-3">
|
|
||||||
<h4 class="my-0 fw-normal">9.9kW Plan</h4>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h1 class="display-4 fw-bold card-title pricing-card-title">฿260,000*</h1>
|
|
||||||
<span class="text-danger">* ราคาไม่รวม VAT</span>
|
|
||||||
<ul class="list-group mt-3 mb-3">
|
|
||||||
<li class="list-group-item active">สามารถลดค่าไฟได้ประมาณ <span class="fw-bold text-decoration-underline">6,000 บาท / เดือน</span></li>
|
|
||||||
<li class="list-group-item">สำหรับผู้ใช้ระบบไฟฟ้า 3 Phase</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">แผงโซล่าเซลล์ Tier 1 จำนวน 18 แผง</li>
|
|
||||||
<li class="list-group-item">อินเวอร์เตอร์ Huawei 10kW</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">พื้นที่ติดตั้ง 40 ตารางเมตร</li>
|
|
||||||
<li class="list-group-item">บริการล้างแผงฟรี ปีละ 2 ครั้ง ในระยะเวลา 2 ปี</li>
|
|
||||||
<li class="list-group-item list-group-item-secondary">ประกันงานติดตั้ง 3 ปี</li>
|
|
||||||
<li class="list-group-item"><span class="fw-bold">ฟรีสำรวจหน้างาน</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="gallerySection" class="container px-4 py-4">
|
|
||||||
<h2 class="pb-2 border-bottom">Gallery</h2>
|
|
||||||
<div class="album">
|
|
||||||
<div class="row row-cols-1 row-cols-md-3 align-items-center g-3">
|
|
||||||
<div class='col d-grid gap-3'>
|
|
||||||
<div class='card shadow-sm'>
|
|
||||||
<img src='assets/images/gallery/1.jpg' class='bd-placeholder-img card-img-top'
|
|
||||||
style='max-width: 100%; height: auto' />
|
|
||||||
</div>
|
|
||||||
<div class='card shadow-sm'>
|
|
||||||
<img src='assets/images/gallery/7.jpg' class='bd-placeholder-img card-img-top'
|
|
||||||
style='max-width: 100%; height: auto' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='col d-grid gap-3'>
|
|
||||||
<div class='card shadow-sm'>
|
|
||||||
<img src='assets/images/gallery/3.jpg' class='bd-placeholder-img card-img-top'
|
|
||||||
style='max-width: 100%; height: auto' />
|
|
||||||
</div>
|
|
||||||
<div class='card shadow-sm'>
|
|
||||||
<img src='assets/images/gallery/6.jpg' class='bd-placeholder-img card-img-top'
|
|
||||||
style='max-width: 100%; height: auto' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='col d-grid gap-3'>
|
|
||||||
<div class='card shadow-sm'>
|
|
||||||
<img src='assets/images/gallery/2.jpg' class='bd-placeholder-img card-img-top'
|
|
||||||
style='max-width: 100%; height: auto' />
|
|
||||||
</div>
|
|
||||||
<div class='card shadow-sm'>
|
|
||||||
<img src='assets/images/gallery/4.jpg' class='bd-placeholder-img card-img-top'
|
|
||||||
style='max-width: 100%; height: auto' />
|
|
||||||
</div>
|
|
||||||
<div class='card shadow-sm'>
|
|
||||||
<img src='assets/images/gallery/5.jpg' class='bd-placeholder-img card-img-top'
|
|
||||||
style='max-width: 100%; height: auto' />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="contactSection" class="container px-4 py-2" id="icon-grid">
|
|
||||||
<div class="border-bottom"></div>
|
|
||||||
<div class="my-5 text-center">
|
|
||||||
<h1 class="display-3 fw-bold">Get In Touch</h1>
|
|
||||||
|
|
||||||
<p class="fs-5">Interested in our work? Let us provide you with our experience in steel fabrication
|
|
||||||
for your next project.</p>
|
|
||||||
|
|
||||||
<div class="row align-items-center justify-content-center">
|
|
||||||
<h2>
|
|
||||||
Tel: <a href="tel:+66866119049">+66-86-611-9049</a> (คุณทวี)
|
|
||||||
</h2>
|
|
||||||
<h2>
|
|
||||||
Tel: <a href="tel:+66935569624">+66-93-556-9624</a> (คุณฝน)
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div id="socialMediaSection" class="grid gap-0 column-gap-3 justify-content-center">
|
|
||||||
<a href="https://web.facebook.com/emprenewableth" class="icon-link link-body-emphasis">
|
|
||||||
<i class="fs-3 bi bi-facebook"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
Loading…
Reference in New Issue