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;
}

Tayyari Vibe

Header Ads Widget

Android Design Using CSS Only Zip File Source Code

Android Design Using CSS Only

Screenshot and proof:

HTML CODE:

CSS CODE:

JavaScript:

Thanks....

Posted by: Tayyari Vibe

Post a Comment

0 Comments

Link List

Follow Us

Css Options (Boxed and Snippet)

Social Plugin

About Me

Featured Post

SSC CGL Maths Practice Book 2025 | 5000+ Questions PDF Download (New Pattern)

Popular Articles

Subscribe Us

Ad Space

Most Popular

Labels

Menu Footer Widget

Contact form

Tayyari Vibe

Header Ads Widget

Android Design Using CSS Only Zip File Source Code

Android Design Using CSS Only

Screenshot and proof:

HTML CODE:

CSS CODE:

JavaScript:

Thanks....

Posted by: Tayyari Vibe

You may like these posts

Post a Comment

0 Comments

Link List

Follow Us

Css Options (Boxed and Snippet)

Social Plugin

About Me

Featured Post

SSC CGL Maths Practice Book 2025 | 5000+ Questions PDF Download (New Pattern)

Popular Articles

Social Plugin

Subscribe Us

Ad Space

Most Popular

Labels

Menu Footer Widget

Contact form