Type Here to Get Search Results !

Design Piano In Html and Css

 Design Piano UI In Html and Css


Are you looking for easy tutorial for How to design piano in html and css?

The step by step guide on this page show you how to design piano in html and css with the most basic concept and simple technique in html and css.

After completing this guide you will have a beautiful UI of piano in html and css, which you will share with your friends and also submitted to college mini-project.

This guide is made specially for html and css lover who want to design products in html and css. I will walk through each and every step, using image, codes to guide you an how to design piano in html and css.

If you get stuck or have questions at any point, simply send me a message on footer email and I will do my best to help you out.

Ready to start? How to design piano in html and css


How to design piano UI in html css


My name is Yash Aher, and i am going to show you how to design piano in html and css. This free guide is all about design piano UI, and we will teach you how to become simple piano design with just most basic html and css concept. So whether you are begineer and advance, you can create piano design in html and css.

How to design piano in 6 steps

  1. Connect html file with css file
  2. Connect font awesome link with html
  3. Create  div with name piano
  4. Add nested div with black keys and white keys
  5. Create footer
  6. Write css referring from following code

Should we start blog?

piano is basic structure which we design it on html css. It is very simple to design, to design it you want create html and css file. you want to create main div with id piano inside it you can write your remaining code. next you want to create div class for keys give class name keys. Next you can write css first of all give main html attribute as box-sizing to border-box next give give background color to your piano attribute give its position to absolute, give height and weight for all other attributes. give ::after attribute to keys to give convert colors white and black keys. at last add footer css.


HTML CODE -

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <title>Piano | TotalProgrammingCode</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <link rel="stylesheet" href="./styles.css">  
  </head>   
  <body>  
   <div id="piano">  
    <img class="logo" src="https://blogger.googleusercontent.com/img/a/AVvXsEiPZrjc_1J1qfHD0I6Nr5LwdiPRY2qwSdXVihaHE7nHov8HS9i4OrG3bnEw_8WHwPi3WfWRiuKmfJn-m1zOWNO_QCO7BqZE7qv7kBFuw5LhsTut3ix1doA6-u6yU3FhHxmZY_WHPG9G091TmMO5crapub7kLecjFIboFGEsV4aupdLqriNc8_5HcT5D=s290" alt="totalprogrammingcode Logo" />  
    <div class="keys">  
     <div class="key"></div>  
     <div class="key black--key"></div>  
     <div class="key black--key"></div>  
     <div class="key"></div>  
     <div class="key black--key"></div>  
     <div class="key black--key"></div>  
     <div class="key black--key"></div>  
     <div class="key"></div>  
     <div class="key black--key"></div>  
     <div class="key black--key"></div>  
     <div class="key"></div>  
     <div class="key black--key"></div>  
     <div class="key black--key"></div>   
     <div class="key black--key"></div>  
     <div class="key"></div>  
     <div class="key black--key"></div>  
     <div class="key black--key"></div>  
     <div class="key"></div>  
     <div class="key black--key"></div>  
     <div class="key black--key"></div>  
     <div class="key black--key"></div>  
    </div>  
   </div>  
   <footer id="sticky-footer" class="flex-shrink-0 py-4 bg-dark text-white-50">  
    <div class="container text-center">  
     <small>Copyright © <a href="https://totalprogrammingcode.blogspot.com/">TotalProgrammingCode</a> | Yash Sandip Aher</small>  
    </div>  
   </footer>  
  </body>  
 </html>


CSS CODE -

 html {  
  box-sizing: border-box;  
 }  
 *, *::before, *::after {  
  box-sizing: inherit;  
 }  
 #piano {  
  /* background-color: #00471b; */  
  background-image: url("https://img.freepik.com/free-photo/old-shabby-concrete-wall-texture-with-cracked-purple-concrete-studio-wall-abstract-grunge-background_1258-73039.jpg?t=st=1658224193~exp=1658224793~hmac=164c964eec41400c7f8fd4d06f5192a0a10bcada143e5e53ca3814771d7a7293&w=1380");  
  width: 992px;  
  height: 290px;  
  margin: 80px auto;  
  padding: 90px 20px 0 20px;  
  position: relative;  
  border-radius: 10px;  
 }  
 .keys {  
  background-color: #040404;  
  width: 949px;  
  height: 180px;  
  padding-left: 2px;  
  overflow: hidden;  
 }  
 .key {  
  background-color: #ffffff;  
  position: relative;  
  width: 41px;  
  height: 175px;  
  margin: 2px;  
  float: left;  
  border-radius: 0 0 3px 3px;  
 }  
 .key.black--key::after {  
  background-color: #1d1e22;  
  content: "";  
  position: absolute;  
  left: -18px;  
  width: 32px;  
  height: 100px;  
  border-radius: 0 0 3px 3px;  
 }  
 .logo {  
  width: 200px;  
  position: absolute;  
  top: 23px;  
 }  
 /* footer css */  
 #sticky-footer{  
  text-align: center;  
  font-family:sans-serif;  
  font-size: 17px;  
 }  
 .container a{  
  font-size: 18px;  
  font-weight: bold;  
  color: purple;  
  text-decoration: none;  
 }  
 @media (max-width: 768px) {  
  #piano {  
   width: 358px;  
  }  
  .keys {  
   width: 318px;  
  }  
  .logo {  
   width: 150px;  
  }  
 }  
 @media (max-width: 1199px) and (min-width: 769px) {  
  #piano{  
   width:675px;  
  }  
  .keys{  
   width:633px;  
  }  
 }


OUTPUT -

TotalProgrammingCode | Yash Aher

Also Read This -


Hope, you enjoy this article, you know how to create piano design in html and css
THANKS FOR WATCHING.....!!

Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Below Post Ad