Hello friends, in this blog today you will learn how to make laptop keyboard design using html and CSS, if you are a beginner in this field and have taught or are learning html and CSS then it will be very helpful for you. And learn to make keyboard easily.
You are looking at this image. This is the keyboard of Dell inspriron 15 5000 Series designed with the help of html or css. This keyboard has no function or is designed only for the design. If you are learning css then you need to You should make the kind of keyboard design that you get experience in the field of design and you will learn how to make good design. This keyboard is made from the div tag of html and is designed with the help of css
Laptop Keyboard Design Source Codes
know about the source code of laptop keyboard design html. First of all we took the div tag whose class name is wrapper. Another div is taken inside this class wrapper, whose class name is named container. Other keyboard tags inside this container Are written
undar of class container we took two div whose class name is main-l and mail-r many main div tags have been taken inside the main-i class, all these divs have been taken using the laptop keyboard button of the keyboad All buttons are taken inside the div. All these div are styled using float in css
Inside the class mail-r we have taken two div whose class name is lnum and rsym lnum is taken undar 17 div of class name whose class name of 15 div is named calnub and class name of 2 div is calzeo all this div laptop. The number button of the keyboard has been taken as a design which is styled with css and set to the correct position you are seeing in the keyboard image.
We know about the styling of the css of this keyboard. We zeroed the margin padding of this keyboard * and boxed the box-sizing. After this, the class warpper was given width and height, then set the class container by width height and margin. After this, the class main-l and mail-r are width height and float left and right. Inside, the button is designed with different css styling.
Whichever keyboard you are viewing on this laptop keyboard, you can easily view this keyboard only on the device of the laptop. To see this keyboard on different devices, you have to size using the @ media screen, thus you will have to use every device Will have to give different size for which you can easily see this keyboard in every device
If you are having difficulties in understanding the design of this keyboard, then you can understand it by watching the video tutorial of this keyboard, which is written code in stape by stape, which you will understand easily. Its tutorial is given below, which can be seen by clicking.
Video Tutorial of Laptop Keyboard design
I hope you have understood this tutorial by looking at the tutorial and you have easily understood its source code. If you want to get the source code of the keyboard, you can get its code. This code is given in two files, one html code file and the other CSS code file, scroll down and copy both of these codes in your file. Paste both the code files in your file. Which you will easily understand the design of this keyboard by obtaining this source code.
HTML CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyboard</title>
<link href="key.css" rel="stylesheet">
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="warpper fl bg">
<div class="container bg1">
<div class="main-l fl">
<div class="cunction fl bg2">
Esc</div>
<div class="cunction mfl bg2">
F1</div>
<div class="cunction mfl bg2">
F2</div>
<div class="cunction mfl bg2">
F3</div>
<div class="cunction mfl bg2">
F4</div>
<div class="cunction mfl bg2">
F5</div>
<div class="cunction mfl bg2">
F6</div>
<div class="cunction mfl bg2">
F7</div>
<div class="cunction mfl bg2">
F8</div>
<div class="cunction mfl bg2">
F9</div>
<div class="cunction mfl bg2">
F10</div>
<div class="cunction mfl bg2">
F11</div>
<div class="cunction mfl bg2">
F12</div>
<div class="cunction mfl bg2">
PrtScr</div>
<div class="cunction mfl bg2">
Insert</div>
<div class="cunction mfl bg2">
Delete</div>
<div class="number fl bg2">
~<p>
`</p>
</div>
<div class="number mfl bg2">
!<br>1</div>
<div class="number mfl bg2">
@<br>2</div>
<div class="number mfl bg2">
#<br>3</div>
<div class="number mfl bg2">
$<br>4</div>
<div class="number mfl bg2">
%<br>5</div>
<div class="number mfl bg2">
^<br>6</div>
<div class="number mfl bg2">
&<br>7</div>
<div class="number mfl bg2">
*<br>8</div>
<div class="number mfl bg2">
(<br>9</div>
<div class="number mfl bg2">
)<br>0</div>
<div class="number mfl bg2">
_<br>-</div>
<div class="number mfl bg2">
+<br>=</div>
<div class="number fr bg2 back">
<p class="eng">
Backspace</p>
</div>
<div class="number fl bg2 back">
<p class="eng tab">
Tab</p>
</div>
<div class="number mfl bg2">
<p class="eng">
Q</p>
</div>
<div class="number mfl bg2">
<p class="eng">
W</p>
</div>
<div class="number mfl bg2">
<p class="eng">
E</p>
</div>
<div class="number mfl bg2">
<p class="eng">
R</p>
</div>
<div class="number mfl bg2">
<p class="eng">
T</p>
</div>
<div class="number mfl bg2">
<p class="eng">
Y</p>
</div>
<div class="number mfl bg2">
<p class="eng">
U</p>
</div>
<div class="number mfl bg2">
<p class="eng">
I</p>
</div>
<div class="number mfl bg2">
<p class="eng">
O</p>
</div>
<div class="number mfl bg2">
<p class="eng">
P</p>
</div>
<div class="number mfl bg2">
{<br>[</div>
<div class="number mfl bg2">
}<br>]</div>
<div class="number fr bg2">
|<br>\</div>
<div class="number fl bg2 caps">
<p class="eng mrt">
Caps Lock</p>
</div>
<div class="number mfl bg2">
<p class="eng">
A</p>
</div>
<div class="number mfl bg2">
<p class="eng">
S</p>
</div>
<div class="number mfl bg2">
<p class="eng">
D</p>
</div>
<div class="number mfl bg2">
<p class="eng">
F</p>
</div>
<div class="number mfl bg2">
<p class="eng">
G</p>
</div>
<div class="number mfl bg2">
<p class="eng">
H</p>
</div>
<div class="number mfl bg2">
<p class="eng">
J</p>
</div>
<div class="number mfl bg2">
<p class="eng">
K</p>
</div>
<div class="number mfl bg2">
<p class="eng">
L</p>
</div>
<div class="number mfl bg2">
:<br>;</div>
<div class="number mfl bg2">
"<br>'</div>
<div class="number fr bg2 caps">
<p class="eng lent">
Enter</p>
</div>
<div class="number fl bg2 shift">
<p class="eng sft">
Shift</p>
</div>
<div class="number mfl bg2">
<p class="eng">
Z</p>
</div>
<div class="number mfl bg2">
<p class="eng">
X</p>
</div>
<div class="number mfl bg2">
<p class="eng">
C</p>
</div>
<div class="number mfl bg2">
<p class="eng">
V</p>
</div>
<div class="number mfl bg2">
<p class="eng">
B</p>
</div>
<div class="number mfl bg2">
<p class="eng">
N</p>
</div>
<div class="number mfl bg2">
<p class="eng">
M</p>
</div>
<div class="number mfl bg2">
<br>,
</div>
<div class="number mfl bg2">
><br>.</div>
<div class="number mfl bg2">
?<br>/</div>
<div class="number fr bg2 shift">
<p class="eng lsft">
Shift</p>
</div>
<div class="space fl bg2 ctrl">
<p class="eng mrt">
Ctrl</p>
</div>
<div class="space mfl bg2">
<p class="eng">
Fn</p>
</div>
<div class="space mfl bg2">
<p class="eng">
<i class="fab fa-windows"></i>
</p>
</div>
<div class="space mfl bg2">
<p class="eng">
Alt</p>
</div>
<div class="space mfl bg2 sp">
</div>
<div class="space mfl bg2">
<p class="eng">
Alt</p>
</div>
<div class="space mfl bg2">
<p class="eng">
Ctrl</p>
</div>
<div class="space fr aro">
<div class="arobtn fl">
<div class="arobtnsub">
</div>
<div class="arobtnsub bg2 ardwn">
←</div>
</div>
<div class="arobtn mfl2">
<div class="arobtnsub bg2">
↑</div>
<div class="arobtnsub bg2 ardwn">
↓</div>
</div>
<div class="arobtn fr">
<div class="arobtnsub">
</div>
<div class="arobtnsub bg2 ardwn">
→</div>
</div>
</div>
</div>
<!-------end--main-left-->
<div class="mail-r fr">
<div class="lnum fl">
<div class="pgup fl bg2">
PgUp</div>
<div class="pgup mfl3 bg2">
PgDn</div>
<div class="pgup fr bg2">
Home</div>
<div class="calnub fl bg2">
Num<br>Lock</div>
<div class="calnub mfl3 bg2 eng">
/</div>
<div class="calnub fr bg2 eng">
*</div>
<div class="calnub fl bg2 eng">
7</div>
<div class="calnub mfl3 bg2 eng">
8</div>
<div class="calnub fr bg2 eng">
9</div>
<div class="calnub fl bg2 eng">
4</div>
<div class="calnub mfl3 bg2 eng">
5</div>
<div class="calnub fr bg2 eng">
6</div>
<div class="calnub fl bg2 eng">
1</div>
<div class="calnub mfl3 bg2 eng">
2</div>
<div class="calnub fr bg2 eng">
3</div>
<div class="calzeo fl bg2">
<p class="eng">
0</p>
</div>
<div class="calnub fr bg2 dot">
<p class="eng">
.</p>
</div>
</div>
<div class="rsym fr">
<div class="end bg2">
End</div>
<div class="mins bg2 eng">
-</div>
<div class="plus bg2">
+</div>
<div class="enter bg2">
Enter</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS CODE FILE :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.fl{float: left;}
.fr{float: right;}
.mfl{float: left; margin-left: 1%;}
.mfl2{float: left; margin-left: 6%;}
.bg{background-color: #181e25;}
.bg1{background-color: #9F9F98;}
.bg2{background-color: #000000;}
.warpper{width: 100%; height: 100vh;}
.container{height: 380px; width: 90%; margin: auto; margin-top: 150px;}
.main-l{height: 350px; width: 76%; margin: 2% 0.5%;}
.cunction{height: 30px; width: 5.31%; color: #fff; text-align: center; margin-bottom: 10px;}
.number{height: 45px; width: 6%; color: #fff; text-align: center; margin-bottom: 10px; }
.back{width: 9%;}
.eng{line-height: 45px;}
.caps{width: 11%;}
.shift{width:14.5%;}
.space{height: 55px; width: 6%; color: #fff; text-align: center; margin-bottom: 10px;}
.sp{width: 34%;}
.aro{width: 21.5%;}
.arobtn{height: 55px; width: 29%;}
.arobtnsub{height: 25px; width: 100%;}
.ardwn{margin-top: 8px;}
.mail-r{height: 350px; width: 22%; margin: 2% 0.5%;}
.lnum {width: 78%;}
.pgup{height: 30px; width: 31%; color: #fff; text-align: center; margin-bottom: 10px;}
.mfl3 {float: left; margin-left: 4%;}
.calnub{height: 45px; width: 31%; color: #fff; text-align: center; margin-bottom: 10px;}
.calzeo{height: 57px; width: 66%; color:#fff; text-align: center; margin-bottom: 10px;}
.dot{height: 57px;}
.rsym{width: 18%;}
.end{margin-bottom: 10px; height:30px; color: #fff; text-align: center;}
.mins{margin-bottom: 10px; height: 45px; color: #fff; text-align: center;}
.plus{height: 98px; margin-bottom: 10px; color: #fff; text-align: center; line-height: 98px;}
.enter{height: 112px; margin-bottom: 10px; color: #fff; text-align: center; line-height: 112px;}
.tab{margin-right: 65%;}
.mrt{margin-right: 40px;}
.sft{margin-right: 110px;}
.lent{margin-left: 70px;}
.lsft{margin-left: 110px;}
Post a Comment