Android Design Using CSS Only Zip File Source Code

Android Design Using CSS Only

Hello Guys I am Abhishek and today i will provide you source code of Android Design Using Pure CSS.

Screenshot and proof:

HTML CODE:

<!DOCTYPE html>
<html lang="en">

<title>Application App Glance</title>

</div>

<nav class="nav">
    <ul class="ul">
      <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16">
  <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
</svg>Classes</li>
      <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-align-end" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M14.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z"/>
  <path d="M13 7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7z"/>
</svg>Index</li>
      <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-credit-card" viewBox="0 0 16 16">
  <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v1h14V4a1 1 0 0 0-1-1H2zm13 4H1v5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7z"/>
  <path d="M2 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1z"/>
</svg>Pay</li>
      <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wallet" viewBox="0 0 16 16">
  <path d="M0 3a2 2 0 0 1 2-2h13.5a.5.5 0 0 1 0 1H15v2a1 1 0 0 1 1 1v8.5a1.5 1.5 0 0 1-1.5 1.5h-12A2.5 2.5 0 0 1 0 12.5V3zm1 1.732V12.5A1.5 1.5 0 0 0 2.5 14h12a.5.5 0 0 0 .5-.5V5H2a1.99 1.99 0 0 1-1-.268zM1 3a1 1 0 0 0 1 1h12V2H2a1 1 0 0 0-1 1z"/>
</svg>Paid</li>
    </ul>
  </nav>

<section class="hero">
    <h1 class="hero-heading">Hello Abhishek</h1>
    <p class="hero-para">Welcome to our website.</p>
  </section>

<div class="add-device">
    <p class="hero-add">Add Device</p>
    <svg id="plus" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  </div>

<section class="usage">
    <h1 class="usage-heading">87.4 kWh</h1>
    <p class="usage-para">Electricity usage this month</p>
  </section>

<section class="linked">
    <h1 class="linked-heading">Linked to you</h1>
    <p class="linked-para">See all
      <svg id="right-two" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
      </svg>
    </p>
  </section>

<section class="action-sect">
    <div class="action-light">
      <div class="img-div-circle">
        <img id="sky" src="sky.png" alt="">
      </div>
      <label class="switch">
        <input type="checkbox" checked>
        <span class="slider round"></span>
      </label>
      <p class="weather-para">21°C</p>
      <p class="working">Working Space</p>
      <h1 class="ac">Air Conditioner</h1>
    </div>

<div class="action">
      <div class="img-div-circle-action">
        <svg id="volume" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
        </svg>
      </div>
      <label class="switch">
        <input type="checkbox" checked>
        <span class="slider round"></span>
      </label>
      <h1 class="weather-para-action">40%</h1>
      <p class="action-text-vol">Volume</p>
      <p class="working-action">Working Space</p>
      <h1 class="ac-action">Google Nest</h1>
    </div>

<div class="action">
      <div class="img-div-circle-action">
        <svg id="volume" xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
        </svg>
      </div>
      <label class="switch">
        <input type="checkbox">
        <span class="slider round"></span>
      </label>
      <h1 class="weather-para-action">133</h1>
      <p class="action-text-vol">Recording</p>
      <p class="working-action">Working Space</p>
      <h1 class="ac-action">Recorder</h1>
    </div>

<div class="action">
      <div class="img-div-circle-action"><svg id="volume" xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <label class="switch">
        <input type="checkbox" checked>
        <span class="slider round"></span>
      </label>
      <h1 class="weather-para-action">5</h1>
      <p class="action-text-vol">User</p>
      <p class="working-action">Living Room</p>
      <h1 class="ac-action">Mi Router 5</h1>
    </div>
  </section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="main.js"></script>
</body>

</html>

CSS CODE:

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

html{
  font-size: 62.5%;
}

body{
  background:#dfdfdf;
  user-select: none;
  transition: all .4s;
}

.icons-nav{
  position: fixed;
  bottom: 0;
  width:100%;
  height:7rem;
  background: #fff;
  color:#000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:5rem;
  transition: all .3s;
  border-radius: 1rem;
}

svg{
  width:3.5rem;
}

#bell-div{
transform: translateY(-1.8rem) scale(1.4);
  background: linear-gradient(to bottom, #62A8FF,#95E9F8);
  border-radius: 50%;
  width:5rem;
  height:5rem;
  color:#fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

#svg-bell{
  width:3rem;
  height:3rem;
  color:#fff;
}

svg:hover{
  transform:scale(1.1);
  fill:#20212C;
  border-radius: 50%;
}

#bell-div:hover{
  transform:scale(1.2);
}

#svg-bell:hover{
  fill:none;
}

body:hover{
  display: block;
}

.header{
  display: flex;
  gap:79%;
  margin-top: 5%;
}

#menu{
  position: absolute;
  width:5rem;
  top:-45px;
  left:-5px;
}

.pic-div{
  width:4.7rem;
  border-radius: 50%;
  border:1px solid #62a8ff;
  height:4.75rem;
  margin-left: 87%;
}

.main-pc{
  border-radius: 50%;
  height:4.5rem;
  width:4.5rem;
}

.hero{
  display: flex;
  gap:79%;
  margin: 5%;
}

.hero-heading{
  white-space: nowrap;
}

.hero-para{
  margin-left: -110%;
  margin-top: 6%;
  white-space: nowrap;
}

.add-device{
  display: flex;
  align-items: center;
  justify-content: center;
  width:10rem;
  height:4rem;
  background:linear-gradient(to bottom, #62A8FF,#95E9F8);
  margin-left:70%;
  margin-top:-13%;
  gap:0.4rem;
  border-radius: 0.5rem;
}

#plus{
  width:1.6rem;
  color:#fff;
  fill:none;
}

.hero-add{
  white-space: nowrap;
  color:#fff;
  font-size: 1.4rem;
}

.usage{
  margin:7% 0 0 4%;
  display: flex;
  background-color: #fff;
  width:90%;
  height:10rem;
  border-radius: 1rem;
}

#electricity{
  color:#fff;
}

.electricity-div{
  width:5rem;
  height:5rem;
  margin-top: -20%;
  margin-left: 10%;

background: linear-gradient(to bottom, #62A8FF,#95E9F8);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.usage-heading{
  margin-top:8%;
  margin-left: 25%;
}

.usage-para{
  font-size: 1.2rem;
  margin-left: -19%;
  margin-top: 14%;
}

.right-go{
  width:6rem;
  height:5rem;
  background-color:#20212C;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin-left: 70%;
  margin-top: -13%;
}

#right{
  color:#fff;
}

.linked{
  display: flex;
  gap:60%;
  margin:8% 0 0 5%;
}

#right-two{
  width:1rem;
  margin-left: 5%;
}

.linked-heading{
  white-space: nowrap;
}

.linked-para{
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  display: flex;
}

.action-sect{
  display: grid;
  grid-template-columns: auto auto;
  gap:3rem;
  margin:1%;
}

.action-light{
  width:17rem;
  height:18rem;
  background: linear-gradient(to bottom, #62A8FF,#95E9F8);
  border-radius: 1rem;
}

.action{
  width:17rem;
  height:18rem;
  background-color: #fff;
  border-radius: 1rem;
}

.switch {
  margin-left:10%;
  margin-top: 36%;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 27px;
}

.slider{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 34px;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 0px;
  bottom: 3px;
  border-radius: 50%;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input{
  margin:9%;
}

input:checked + .slider {
  background-color: #21202C;
}

input:focus + .slider {
  box-shadow: 0 0 1px #21202C;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.weather-para{
  margin-left: 66%;
  font-size: 1.7rem;
  font-weight: 900;
  margin-top: -85%;
  color:#fff;
}

.working{
  margin-left: 5%;
  margin-top:19%;
}

.ac{
  margin-left:5%;
  margin-top: 2%;
}

.img-div-circle{
  width:5rem;
  height:5rem;
  background-color:#fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10%;
}

#sky{
  width:4rem;
  height:4rem;
}

#sky:hover{
  transform:scale(1.1);
}

#volume{
  width:4rem;
  height:4rem;
  fill:none;
  color:#ffffff;
}

.img-div-circle-action{
  width:5rem;
  height:5rem;
  background-color:#20212C;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10%;
}

.weather-para-action{
  margin-top: -85%;
  margin-left: 70%;
}

.action-text-vol{
  margin-left: 70%;
}

.working-action{
  margin-top:20%;
  margin-left: 10%;
}

.ac-action{
  margin-left: 10%;
}

#home{
  fill:#20212C;
}

.nav{
  background-color: #fff;
  width:40%;
  height:25vh;
  position: fixed;
  margin-top:10%;
  display: none;
}

.ul{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:3rem;
  flex-direction: column;
}

li{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5%;
  margin-left: -15%;
  list-style-type: none;
  color:#21202C;
}

.lable{
  position: absolute;
  margin-top: 10%;
}

#show{
  display: none;
}

li:hover{
  transform:scale(1.2);
  transform-style: preserve-3d;
}

Android Design Using CSS Only Zip File Source Code

Android Design Using CSS Only

Screenshot and proof:

HTML CODE:

CSS CODE:

JavaScript:

Thanks....

MYFILES-DOWNUP

Mini Militia V4.3.3 All Guns Death Sprayer Mod By Gamer Abhishek

Picsart 22.6 Latest Version Mod Apk By Abhishek Kansari

Mini Militia V4.3.3 Death Mod-V2 By Gamer Abhishek

Mini Militia V4.3.3 Crazy Mod By Gamer Abhishek

Class 11th Notes Physics Chemistry And Maths By G.A Productions

Android Design Using CSS Only Zip File Source Code

Android Design Using CSS Only

Screenshot and proof:

HTML CODE:

CSS CODE:

JavaScript:

Thanks....

MYFILES-DOWNUP

You might like