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

What is Favicon | what is Title | How to give Title and Favicon to Html Website | 2020 Style

Hello Guys...!    Are you started to learn Html newly?    Wanted to start the learning of Html?       Don't worry. CodoBlog Bring HTML series for beginners.                                                                                     Click Here ----------------------------------------------------------------------------------------------------------------------------                             ____________________________________________________
Post a Comment
Read more

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

Design 3D Block with hover animation

        How To Design The 3D Block With Hover Effect. Here is the code of How to design the 3D block design by using only html and css.                          By using html-css you can make a lots of designs and animations. Few done by me                          and   somewhat expect from you . Try to watch all the videos by codoblog. And stay                                              connected.                 CODE -                         <html>           <head> <style type="text/css"> body{ bac...
Post a Comment
Read more