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

Mini Militia V4.3.3 Sniper Sprayer Mod-V2 By Gamer Abhishek

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

Mini Militia V4.3.3 Death Mod-V2 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