Skip to main content

Android Logo Design

                Android Logo Design By Html-Css
                            
                                    

Here is the code for designing the logo of Android. Design the logo by using programming language like Html and Css. You can simply design the logo, just small code for it. Don't hasitate and start to write it..

CODE : 



              <!DOCTYPE html>
<html>
<head>
<title>Android logo</title>
<link href="https://fonts.googleapis.com/css2?family=Piedra&display=swap" rel="stylesheet">
<style type="text/css">
body{
background-color: black;

}
h4{
text-align: center;
color: #00FF00;
font-family: 'Piedra',cursive;
font-size: 25px;

}
.A{
position: absolute;
top: 200px;
left: 125px;
height: 45px;
width: 90px;
border-radius: 0px 0px 90px 90px;
transform:rotate(180deg);
background: #00FF00;
}
.B{
position:absolute;
top: 250px;
left: 125px;
height: 89px;
width: 89px;
border-radius: 5px;
background-color: #00FF00;
}
.C{
position:absolute;
top: 250px;
left: 90px;
height: 70px;
width: 25px;
border-radius: 15px;
background-color: #00FF00;
}
.D{
position:absolute;
top: 250px;
left: 224px;
height: 70px;
width: 25px;
border-radius: 15px;
background-color: #00FF00;
}
.E{
position:absolute;
top: 250px;
left: 125px;
height: 89px;
width: 89px;
border-radius: 15px;
background-color: #00FF00;
}
.G{
position:absolute;
top: 338px;
left: 138px;
height: 45px;
width: 25px;
border-radius:0 0 15px 15px;
background-color: #00FF00;
}
.H{
position:absolute;
top: 338px;
left: 178px;
height: 45px;
width: 25px;
border-radius: 0 0 15px 15px;
background-color: #00FF00;
}
.E{
position:absolute;
top: 220px;
left: 150px;
height:9px;
width: 9px;
border-radius:10px;
background:black;
}
.F{
position:absolute;
top: 220px;
left: 180px;
height:9px;
width: 9px;
border-radius: 10px;
background:black;
}
.I{
position:absolute;
top: 184px;
left: 140px;
height:30px;
width:5px;
border-radius:10px 10px 0 0;
transform:rotate(-32deg);
background-color: #00FF00;
}
.J{
position:absolute;
top:183px;
left: 200px;
height:27px;
width: 5px;
border-radius:10px 10px 0 0;
transform:rotate(32deg);
background-color: #00FF00;
}
.K{
position:absolute;
top: 150px;
left:45px;
height:250px;
width:250px;
border-radius:50%;
border: 3px solid #00FF00;
border-top: 3px dotted #00FF00;
border-bottom: 3px dotted #00FF00;
animation: zoya 0.7s linear infinite;
}
@keyframes zoya{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<h4>Android logo by codoblog</h4>
  <div class="A"></div>
  <div class="B"></div>
  <div class="C"></div>
  <div class="D"></div>
  <div class="E"></div>
  <div class="F"></div>
  <div class="G"></div>
  <div class="H"></div>
  <div class="I"></div>
  <div class="J"></div>
  <div class="K"></div>
</body>
</html>



And Done..!

OUTPUT : 

            








                                                #YES..ITS ANDROID LOGO BY CODOBLOG



Watch the video----|||| : ->









                                
Labels:

Comments

Post a Comment

The Most Populer

|| HTML Heading | what is h1 to h6 tags | Importance of Heading in HTML website ||

  HEADING IN HTML                       Click to Watch the video Headings help in defining the hierarchy and the structure of the web page content. HTML offers six levels of heading tags,  <h1>  through  <h6> ; the higher the heading level number, the greater its importance — therefore  <h1>  tag defines the most important heading, whereas the  <h6>  tag defines the least important heading in the document. HTML  defines six levels of  headings . A  heading  element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the  heading . The  heading  elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. By default, browsers display headings in larger and bolder font than normal text. Also,  <h1>  headings are displayed...
Post a Comment
Read more