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 for beginners || What is Html || Where to start | Watch the codoblog video of html

 Hey all ..!     Start your carrier with by learning new skill which name is HTML , If you are interested in the web designing then you must started watch the video of codoblog.    If you are very unknown about HTML language then start from the scratch with codoblog's efforts. Watch series of codoblog and feel free to comment your doubt.                                                        Click to Launch for new beginning ....
Post a Comment
Read more

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE -     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>     <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...
Post a Comment
Read more

Digital calender

                     Design A Digital Calender Design a code for accesing and designing calender. #CODE                                                                     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calender UI</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Lobster:wght@200;300;400;500;600;700;800;900&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lobster', sans-serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 100v...
Post a Comment
Read more