Skip to main content

DASHBOARD (STATIC) HTML /CSS

 





HTML FILE

<!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>Dashboard</title>
    <link rel="stylesheet" href="das.css">
</head>
<body>
    <!-- dashboad -->
<div class="dashboard">
 <!-- ///////////////////////////////// -->
<!-- main start -->
  <div id="main">
 
   <select id="Select">
    <option value="0">Dashboard</option>
    <option value="1">Good</option>
    <option value="2">Good</option>
    <option value="3">Good</option>
   </select>
   
   <select id="Select">
    <option value="0">Product</option>
    <option value="1">Good</option>
    <option value="2">Good</option>
    <option value="3">Good</option>
   </select>
    <input type="button" value="Status">
    <input type="button" value="News">
    <input type="button" value="Task">
    <input type="button" value="Report">
    <input type="button" value="Login">
    <input type="button" value="Setting">
   <p>Admin</p>
  </div>
<!-- main end -->
<!-- ///////////////////////////////// -->
 <!-- card start -->
<div id="cards">
<div id="flex1">
  <div id="card1">
    <h1>50</h1>
    <h2>Today Task</h2>
      </div>
    <div id="card11">
    <h1>20</h1>
    <h2>Today Pending</h2>
    </div>
    <div id="card12">
    <h1>30</h1>
    <h2>Today Completed</h2>
    </div>
 </div>
 <div id="flex2">
 <div id="card2">
    <div class="box">
       </div>
       <p>80%</p><br>
      <p>80%</p><br>
      <p>80%</p><br>


      </div>
      <div id="card3">Profit
        <div class="dot">70%
            <div class="dot">50%
            <div class="dot">60%
         
          </div>
          </div>
        </div>
     
 
      </div>
</div>
</div>

  <!-- card closd -->
</div>
<!-- dass end -->
</body>
</html>


CSS FILE

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: pink;
}
.dashboard{
   
    display: flex;
    border-radius: 3px;
    margin: 50px auto;
    width: 95%;
    box-shadow: 10px 10px 10px grey;
    background: black;
    height: 400px;
    padding: 5px;
   
}
#main{
 
  overflow-y: scroll;
  border-radius: 3px;
  width: 300px;
  height: 100%;
  background:rgb(41, 34, 34);
 

}
::-webkit-scrollbar {

  width: 5px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
#main select{
 
  border-radius: 3px;
  font-size: 20px;
  height: 50px;
  width: 100%;
  color: white;
  background: black;
  box-shadow: 0px 1px 1px white;
}
#main select option{
  font-size: 18px;

  width: 100%;
  background: black;
 
}
p{
  font-size: 20px;
  margin-top: 20px;
  color: white;
 
}
#cards{

height: auto;

width: 100%;
position: relative;
margin-left: 5px;
border-radius: 3px;
display: block;
}
#flex1{
  gap: 5px;
  display: flex;
}
#card1,#card11,#card12{
  box-shadow: 0px 0px 3px white;
 padding: 20px;
  border-radius: 3px;
  height: 150px;
  width: 34%;
  background:black;

}
#card1,#card11,#card12,#card13>p{
 
  color: aqua;
}
#card1 h1{
  font-size: 50px;
  color: red;
}
#card11 h1{  font-size: 50px;
  color: yellow;
}
#card12 h1{  font-size: 50px;
  color: green;
}
#flex2{
  gap: 5px;
  margin-top: 5px;
  background: black;
  display: flex;
 
}
#card2,#card3{
  display: flex;
  /* margin-top: px; */
  border-radius: 3px;
  height: 235px;
  width: 50%;
  /* background:white; */
  background:black;
  box-shadow: 0px 0px 3px white;


}
#card3{

  color: white;
}
#card2 .box{
 
  margin: 20px;
  height:200px;
  width: 200px;

  border-radius: 50%;
  background:conic-gradient(red 0deg,red 90deg,green 90deg,green 180deg,yellow 180deg,yellow 360deg);
}
#card2 .box~p{

  border-radius: 3px;
  font-size: 30px;
  padding: 5px;
 color: black;
  height: 50px;
  width: 100px;
  background: red;
}
#card2 .box~p~p{
 
  height: 50px;

  background: green;
}
#card2 .box~p~p~p{
 
  height: 50px;

  background: yellow;
}
#card2 .box:hover{
  transform: rotate(5deg);
  box-shadow: 0px 0px 5px white;
  transition: .5s;
}
#card3 .dot{
 
  /* transform: rotate(15deg); */
  rotate: 0deg;
  /* margin:30px; */
  position: absolute;
  bottom: 1em;
  background: grey;
  border-radius: 50%;
  height: 10px;
  width: 10px;
  animation: move  5s ease-out;
}
@keyframes move
 {
  to{
      margin:40px;
  }
}
#main input[type=button]{

  text-align: left  ;
  border-radius: 3px;
  font-size: 20px;
  height: 50px;
  width: 100%;
  padding: 5px;
  color: white;
  background: black;
  border: 1px solid rgb(93, 87, 87);
  box-shadow: 0px 1px 1px white;
}


For More Detail Subscribe us


Labels:

Comments

Post a Comment

Popular posts from this blog

How to convert Url to Imege/File By Deluge for Creator || Using the Upload Api || How to upload Imege in zoho creator from crm

This code snippet appears to be part of a script or program that involves invoking URLs to handle file uploads. Let's break it down: 1 Invoke the URL to retrieve a file ( Logo ) : Logo is the url of Imege like Logo =" https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg" response = invokeurl [ url :Logo type :GET ]; Here, the code is making a GET request to a URL stored in a variable named Logo . This request likely retrieves some file data. 2. Setting parameters : response.setParamName("file"); This line sets a parameter named "file" in the response obtained from the previous request. It prepares the response to be sent as a file in a subsequent request. Logo_imge = invokeurl [ url :"https://creator.zoho.com/api/v2.1/clientnamexxxxx/appnamexxxx/report/demo_report/" + CreatorID + "/Logo/upload" type :POST files:response connection:"creator" ]; 4. Logging info "Logo_imge==" + Logo_imge; This p...
Post a Comment
Read more

How to Add Multiple Portal By Deluge ||How How to add Different Portal Permission Set

Creating a portal to assign users to specific profiles using Deluge scripting in Zoho Creator can streamline your application’s user management. In this context, the code snippet provided assigns a user to the "Customer" profile based on their email and enables their portal access. Here's a breakdown and explanation: ### Code Explanation: 1. **Assign User to Profile:**    ```deluge    portal = thisapp.portal.assignUserInProfile(input.Email, "Customer");    ```    This line assigns the user, identified by their email, to the "Customer" profile. The `assignUserInProfile` function is a method in the Deluge scripting language that allows developers to specify which profile a user belongs to within the application. 2. **Enable Portal Access:**    ```deluge    input.Portal_Status = "Enabled";    ```    This line updates the `Portal_Status` field to "Enabled," indicating that the user now has access to the portal. ...
1 comment
Read more

How To Add Hour and Minuts By Deluge in Date and Time Field

   z = zoho.crm.getRecordById("Deals",5341860000008118012); Event_Date = z.getJSON("Event_Start_Time"); info Event_Date; date = Event_Date.getPrefix("T"); info date; time = Event_Date.getSuffix("T"); info time; hour = time.getPrefix(":"); info hour; hourtonumber = hour.toNumber(); info hourtonumber; min = time.getSuffix(":"); newmin=min.getPrefix(":") ; mintonu=newmin.toNumber(); addhr = hourtonumber + 5; info addhr; Event_Date = z.get("Event_Start_Time").addHour(addhr).addMinutes(mintonu).toString("yyyy-MM-dd'T'HH:mm:ss'+08:00'"); info Event_Date; mp = Map(); mp.put("Event_Start_Time",Event_Date); test = zoho.crm.updateRecord("Deals",5341860000008118012,mp); info test;
Post a Comment
Read more