index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<div id="main" class="main">
<div id="right">
<div class="first">
<p><i class="ri-arrow-drop-right-fill"></i></p>
</div>
<div class="first">
<i class="ri-chat-1-fill"></i>
<i class="ri-search-line"></i>
<i class="ri-visa-fill"></i>
<i class="ri-qr-scan-line"></i>
<i class="ri-settings-4-line"></i>
</div>
<div class="first">
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"></div>
<div class="color1"><i class="ri-add-line"></i></div>
</div>
<div class="first">
<i class="ri-user-3-fill"></i>
<!-- // dark and light theme -->
<i id="night" class="ri-moon-line"></i>
</div>
</div>
<div id="card">
<div class="top">
<i class="ri-close-circle-line"></i>
<div class="content">
<h1>AI Chat mode affordable</h1>
<p>Pricing plans for every budget</p>
</div>
</div>
<div class="top">
<div class="cLeft">
<div class="content">
<h2>Choose plans</h2>
<p><input type="radio" name="billing" id="" placeholder="yearly"> yearly billing</p>
<p><input type="radio" name="billing" id="" placeholder="monthly"> monthly billing</p>
</div>
</div>
<div class="cRight">
<div class="card1">
<h2>Free</h2>
<p>Basic chat functionality</p>
<h1>$0 <span>/mo</span></h1>
<p>Free forever</p>
<p>30 days history</p>
<p>Up to 100 message/mo</p>
<p>Limited AI capabilities</p>
<button onclick="clicked()" >Current plan</button>
</div>
<div class="card1">
<h2>Pro</h2>
<p>More advanced AI capabilities</p>
<h1>$99 <span>/mo</span></h1>
<p>Per month, per team members</p>
<p>Email support</p>
<p>Unlimited message</p>
<p>Access AI capabilities</p>
<button>Upgrade</button>
</div>
<div class="card1">
<h2>Enterprise</h2>
<p>More advanced AI capabilities</p>
<h1>$99 <span>/mo</span></h1>
<p>Per month, per team members</p>
<p>Email support</p>
<p>Unlimited message</p>
<p>Access AI capabilities</p>
<button>Upgrade</button>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: gilroy;
}
html,body{
width: 100%;
height: 100vh;
}
#main{
width: 100%;
height: 100vh;
background-color: rgb(0, 1, 18);
}#main-b{
width: 100%;
height: 100vh;
background-color: rgb(218, 0, 87);
animation: ki 5s linear infinite;
}
@keyframes ki{
0%{
background-color: rgb(218, 0, 87);
}20%{
background-color: rgb(0, 171, 218);
}40%{
background-color: rgb(149, 0, 218);
}60%{
background-color: rgb(218, 182, 0);
}80%{
background-color: rgb(218, 0, 18);
}100%{
background-color: rgb(218, 0, 87);
}
}
#card{
width: 93%;
height: 93%;
background-color: antiquewhite;
border-radius: 20px;
margin-left: 6%;
margin-top: 2.5%;
position: absolute;
justify-content: space-between;
align-items: center;
gap: 1px;
display: flex;
flex-direction: column;
}#card-b{
width: 93%;
height: 93%;
background-color: rgb(193, 193, 193);
border-radius: 20px;
margin-left: 6%;
margin-top: 2.5%;
position: absolute;
justify-content: space-between;
align-items: center;
gap: 1px;
display: flex;
flex-direction: column;
}
#card .top:nth-child(1),#card-b .top:nth-child(1){
width: 100%;
height: 30%;
/* background-color: rgb(155, 155, 155); */
position: relative;
}#card .top i,#card-b .top i{
position: absolute;
right: 40px;
top: 20px;
font-size: 40px;
}
#card .top:nth-child(1) .content,#card-b .top:nth-child(1) .content{
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#card .top:nth-child(1) .content h1,#card-b .top:nth-child(1) .content h1{
font-size: 40px;
font-weight: 800;
transition: 1s;
}
#card .top:nth-child(1) .content h1:hover,#card-b .top:nth-child(1) .content h1:hover{
font-size: 40px;
font-weight: 800;
color: chocolate;
}
#card .top:nth-child(1) .content p,#card-b .top:nth-child(1) .content p{
font-size: 25px;
transition: 1s;
font-weight: 400;
}#card .top:nth-child(1) .content p:hover,#card-b .top:nth-child(1) .content p:hover{
font-size: 25px;
font-weight: 400;
color: chocolate;
}
#card .top:nth-child(2),#card-b .top:nth-child(2){
width: 100%;
height: 80%;
display: flex;
justify-content: space-between;
gap: 1px;
align-items: center;
}
#card .top:nth-child(2) .cLeft,#card-b .top:nth-child(2) .cLeft{
width: 20%;
height: 80%;
}#card .top:nth-child(2) .cLeft .content,#card-b .top:nth-child(2) .cLeft .content{
width: 60%;
height: 80%;
margin-left: 20%;
margin-top: 10%;
}
#card .top:nth-child(2) .cLeft .content h2,#card-b .top:nth-child(2) .cLeft .content h2{
font-weight: 700;
font-size: 25px;
}
#card .top:nth-child(2) .cLeft .content p,#card-b .top:nth-child(2) .cLeft .content p{
font-weight: 600;
font-size: 16px;
color: rgb(21, 21, 21);
margin-top: 10px;
}
#card .top:nth-child(2) .cRight,#card-b .top:nth-child(2) .cRight{
width: 60%;
height: 80%;
/* background-color: aqua; */
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
display: flex;
gap: 10px;
justify-content: left;
overflow: hidden;
align-items: center;
}
#card .top:nth-child(2) .cRight .card1,#card-b .top:nth-child(2) .cRight .card1{
width: 25%;
height: 85%;
border-radius: 20px;
margin-left: 10px;
padding: 20px;
position: relative;
box-shadow: 0 0 10px rgb(165, 165, 165);
/* background-color: aquamarine; */
transition: 1s;
}#card .top:nth-child(2) .cRight .card1:hover,#card-b .top:nth-child(2) .cRight .card1:hover{
width: 25%;
height: 85%;
border-radius: 20px;
margin-left: 10px;
transition: 1s;
transform: translate(0%,-10px);
padding: 20px;
position: relative;
box-shadow: 0 0 10px rgb(165, 165, 165);
/* background-color: aquamarine; */
}
#card .top:nth-child(2) .cRight .card1 h2,#card-b .top:nth-child(2) .cRight .card1 h2{
font-size: 24px;
font-weight: 600;
}#card .top:nth-child(2) .cRight .card1 p,#card-b .top:nth-child(2) .cRight .card1 p{
font-size: 14px;
margin-top: 10px;
font-weight: 600;
color: rgb(70, 70, 70);
}#card .top:nth-child(2) .cRight .card1 h1,#card-b .top:nth-child(2) .cRight .card1 h1{
font-size: 30px;
font-weight: 700;
margin-top: 5px;
}#card .top:nth-child(2) .cRight .card1 h1 span,#card-b .top:nth-child(2) .cRight .card1 h1 span{
font-size: 24px;
font-weight: 600;
color:rgb(59, 59, 59);
}#card .top:nth-child(2) .cRight .card1 button,#card-b .top:nth-child(2) .cRight .card1 button{
width: 80%;
padding: 9px 20px;
position: absolute;
bottom: 10px;
border-radius:10px;
border: none;
font-weight: 600;
font-size: 16px;
box-shadow: 0 0 5px rgb(120, 120, 120);
}
#card .top:nth-child(2) .cRight .card1:nth-child(3),#card-b .top:nth-child(2) .cRight .card1:nth-child(3){
width: 25%;
height: 90%;
border-radius: 20px;
background-color: rgb(30, 30, 30);
}#card .top:nth-child(2) .cRight .card1:nth-child(3) h2,#card-b .top:nth-child(2) .cRight .card1:nth-child(3) h2{
color: white;
}#card .top:nth-child(2) .cRight .card1:nth-child(3) h1,#card-b .top:nth-child(2) .cRight .card1:nth-child(3) h1{
color: white;
}#card .top:nth-child(2) .cRight .card1:nth-child(3) h1 span,#card-b .top:nth-child(2) .cRight .card1:nth-child(3) h1 span{
color: rgb(197, 197, 197);
}#card .top:nth-child(2) .cRight .card1:nth-child(3) p,#card-b .top:nth-child(2) .cRight .card1:nth-child(3) p{
color: rgb(197, 197, 197);
}
#right{
width: 5%;
height: 100%;
position: absolute;
/* background-color: aquamarine; */
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1px;
}
#right .first{
width: 100%;
height: 25%;
/* background-color: blueviolet; */
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding-top: 10px;
}
#right .first:nth-child(1) P i{
font-size: 40px;
color: rgb(255, 255, 255);
/* margin-left: 50px; */
/* background-color: aqua; */
}
#right .first i:nth-child(1){
font-size: 20px;
color: rgb(134, 152, 225);
}#right .first i:nth-child(2){
font-size: 20px;
color: rgb(116, 239, 145);
}#right .first i:nth-child(3){
font-size: 20px;
color: rgb(205, 103, 225);
}#right .first i:nth-child(4){
font-size: 20px;
color: rgb(178, 110, 223);
}#right .first i:nth-child(5){
font-size: 20px;
color: rgb(231, 70, 42);
}
#right .first:nth-child(2){
border-bottom: 1px solid rgb(81, 81, 81);
width: 70%;
margin-left: 19%;
height: 30%;
/* margin-bottom: 20px; */
}
#right .first .color1:nth-child(1){
width: 15px;
height: 10px;
background-color: rgb(255, 255, 255);
border-radius:10px
}#right .first .color1:nth-child(2){
width: 15px;
height: 10px;
background-color: rgb(130, 126, 126);
border-radius:10px
}#right .first .color1:nth-child(3){
width: 15px;
height: 10px;
background-color: rgb(133, 206, 5);
border-radius:10px
}#right .first .color1:nth-child(4){
width: 15px;
height: 10px;
background-color: rgb(1, 222, 214);
border-radius:10px
}#right .first .color1:nth-child(5){
/* width: 25px;
height: 25px; */
/* background-color: rgb(124, 124, 124); */
border-radius:10px
}
#right .first .color1:nth-child(5) i{
color: antiquewhite;
font-size: 25px;
font-weight: 700;
}
#right .first:nth-child(4) .circle{
width: 50px;
height: 50px;
background-color: aquamarine;
border-radius: 50%;
}
#right .first:nth-child(4) i:nth-child(1){
font-size: 20px;
margin-top: 20px;
background-color: rgb(0, 109, 198);
padding: 10px;
width: 40px;
height: 40px;
text-align: center;
align-items: center;
color:white;
justify-content: space-between;
border-radius:50px
}#right .first:nth-child(4) i:nth-child(1):hover{
font-size: 20px;
margin-top: 20px;
background-color: rgb(39, 39, 39);
padding: 10px;
width: 40px;
height: 40px;
text-align: center;
align-items: center;
color:white;
justify-content: space-between;
border-radius:50px
}
#right .first:nth-child(4) i{
font-size: 20px;
margin-top: 20px;
background-color: rgb(0, 109, 198);
padding: 10px;
width: 40px;
height: 40px;
text-align: center;
align-items: center;
color:white;
justify-content: space-between;
border-radius:10px
}#right .first:nth-child(4) i:hover{
font-size: 20px;
margin-top: 20px;
background-color: rgb(39, 39, 39);
padding: 10px;
width: 40px;
height: 40px;
text-align: center;
align-items: center;
color:white;
justify-content: space-between;
border-radius:10px
}
script.js
var night = document.querySelector("#night");
var mained = document.getElementById("main");
var carded = document.getElementById("card");
night.addEventListener("click",function(){
var mains = mained.getAttribute("id");
var cards = carded.getAttribute("id");
// alert("SR Application Limited")
if(mains === "main"&&cards==="card"){
// document.write(mained);
mained.setAttribute("id","main-b");
carded.setAttribute("id","card-b");
}else{
mained.setAttribute("id","main");
carded.setAttribute("id","card");
}
})
// function clicked(){
// var mains = mained.getAttribute("id");
// // alert("SR Application Limited")
// if(mains === "main"){
// // document.write(mained);
// mained.setAttribute("id","main-b");
// }else{
// mained.setAttribute("id","main");
// }
// }
output: -
إرسال تعليق