Email :
868
Balehotspot.com - kali ini saya ingin membagikan landing page isolir untuk ppoe client
<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internet Isolir</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(#D5A3FF 0%, #77A5F8 100%);
}
.wrapper{
width: 400px;
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 10px 10px 15px rgba(0,0,0,0.05);
}
.wrapper header{
height: 55px;
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 30px;
position: relative;
}
header label{
height: 100%;
z-index: 2;
width: 30%;
display: flex;
cursor: pointer;
font-size: 18px;
position: relative;
align-items: center;
justify-content: center;
transition: color 0.3s ease;
}
#tab-1:checked ~ header .tab-1,
#tab-2:checked ~ header .tab-2,
#tab-3:checked ~ header .tab-3{
color: #fff;
}
header label:nth-child(2){
width: 40%;
}
header .slider{
position: absolute;
height: 85%;
border-radius: inherit;
background: linear-gradient(145deg, #D5A3FF 0%, #77A5F8 100%);
transition: all 0.3s ease;
}
#tab-1:checked ~ header .slider{
left: 0%;
width: 90px;
transform: translateX(5%);
}
#tab-2:checked ~ header .slider{
left: 50%;
width: 120px;
transform: translateX(-50%);
}
#tab-3:checked ~ header .slider{
left: 100%;
width: 95px;
transform: translateX(-105%);
}
.wrapper input[type="radio"]{
display: none;
}
.card-area{
overflow: hidden;
}
.card-area .cards{
display: flex;
width: 300%;
}
.cards .row{
width: 33.4%;
}
.cards .row-1{
transition: all 0.3s ease;
}
#tab-1:checked ~ .card-area .cards .row-1{
margin-left: 0%;
}
#tab-2:checked ~ .card-area .cards .row-1{
margin-left: -33.4%;
}
#tab-3:checked ~ .card-area .cards .row-1{
margin-left: -66.8%;
}
.row .price-details{
margin: 20px 0;
text-align: center;
padding-bottom: 25px;
border-bottom: 1px solid #e6e6e6;
}
.price-details .price{
font-size: 65px;
font-weight: 600;
position: relative;
font-family: 'Noto Sans', sans-serif;
}
.price-details .price::before,
.price-details .price::after{
position: absolute;
font-weight: 400;
font-family: "Poppins", sans-serif;
}
.price-details .price::before{
left: -13px;
top: 17px;
font-size: 20px;
}
.price-details .price::after{
right: -33px;
bottom: 17px;
font-size: 13px;
}
.price-details p{
font-size: 18px;
margin-top: 5px;
}
.row .features li{
display: flex;
font-size: 15px;
list-style: none;
margin-bottom: 10px;
align-items: center;
}
.features li i{
background: linear-gradient(#D5A3FF 0%, #77A5F8 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.features li span{
margin-left: 10px;
}
.wrapper button{
width: 100%;
border-radius: 25px;
border: none;
outline: none;
height: 50px;
font-size: 18px;
color: #fff;
cursor: pointer;
margin-top: 20px;
background: linear-gradient(145deg, #D5A3FF 0%, #77A5F8 100%);
transition: transform 0.3s ease;
}
.wrapper button:hover{
transform: scale(0.98);
}
hr {
border: none;
height: 1px;
background-color: #ccc;
margin: 20px 0;
}
</style>
<body>
<div class="wrapper">
<input type="radio" name="slider" id="tab-1" checked>
<input type="radio" name="slider" id="tab-2" >
<input type="radio" name="slider" id="tab-3">
<header>
<label for="tab-1" class="tab-1">Info</label>
<label for="tab-2" class="tab-2">Upgrade</label>
<label for="tab-3" class="tab-3">Teknisi</label>
<div class="slider"></div>
</header>
<div class="card-area">
<div class="cards">
<div class="row row-1">
<div class="price-details">
<span class="price">Internet</span>
<p>Disconnect</p>
</div>
<ul class="features">
<p style="text-align: center;">Untuk mendapatkan kembali akses internet Anda, silakan lakukan pembayaran.</p> <br>
<hr>
<p style="text-align: center;">Silahkan lakukan pembayar</p>
</ul>
</div>
<div class="row">
<div class="price-details">
<span class="price">250K</span>
<p>Detail Paket Upgrade</p>
</div>
<ul class="features">
<li><i class="fas fa-check"></i><span>Bandwidth Unlimited</span></li>
<li><i class="fas fa-check"></i><span>Full Service</span></li>
<li><i class="fas fa-check"></i><span>Akses Semua Aplikasi dengan lancar</span></li>
<li><i class="fas fa-check"></i><span>Amanah Dan terpercaya</span></li>
</ul>
</div>
<div class="row">
<div class="price-details">
<span class="price">10</span>
<p>Team Profesional</p>
</div>
<ul class="features">
<li><i class="fas fa-check"></i><span>Jumawan</span></li>
<li><i class="fas fa-check"></i><span>Sanip</span></li>
<li><i class="fas fa-check"></i><span>lukas</span></li>
<li><i class="fas fa-check"></i><span>Badrun</span></li>
</ul>
</div>
</div>
</div>
<button>Hub Balehotspot</button>
</div>
</body>
</html>
Maaf, saat ini belum tersedia tutorial untuk artikel ini.
