added banner

This commit is contained in:
WinsDominoes 2024-05-08 19:37:26 +07:00
parent 5e06b1ba83
commit 6abfcbbcc4
3 changed files with 243 additions and 2 deletions

View File

@ -176,6 +176,29 @@ header {
} }
.container { .container {
margin: 0 calc(8px + 1.5625vw); margin: 10px calc(10px + 1.5625vw);
padding: 10px; padding: 10px;
} }
.main-banner {
height: 300px;
border-radius: 0.75rem;
background-color: #2ec27e;
box-shadow: 1px 1px 4px 0 light-dark(var(--light-nav-shade-color), var(--dark-nav-shade-color));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
}
.main-banner h1 {
font-size: calc(50px + .5vw);
}
.main-banner p {
font-size: calc(12px + .5vw);
}

View File

@ -42,7 +42,13 @@
<main> <main>
<div class="container"> <div class="container">
<h1>hi bro</h1> <div class="main-banner">
<h1>Apps by WinsCloud</h1>
<p>Discover amazing apps developed by me! (<a href="https://winsdominoes.net">Win</a>) and my friends.</p>
</div>
<div class="main-details">
</div>
</div> </div>
</main> </main>

212
thingy.html Normal file
View File

@ -0,0 +1,212 @@
<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>