html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<title>Match Add</title>
<met name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Da+2&family=Dancing+Script:wght@500&family=Parisienne&family=Satisfy&display=swap" rel="stylesheet">
</head>
<body>
<section class="userInput">
<input class="one" type="text" placeholder="First Name"/>
<input class="two" type="text" placeholder="Last Name"/>
<input class="three" type="text" placeholder="Country"/>
<input class="four" type="number" placeholder="Player Score"/>
<input class="five" type="submit" value="Add Player"/>
</section>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body{
padding:0;
margin:0;
}
.userInput{
margin:1pc auto;
width:80%;
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
grid-template-rows:30px;
grid-template-areas:"a b c d e";
grid-gap:2px;
background-color: orange;
padding:20px;
}
input{
display:block;
border:.5px solid grey;
font-size:10px;
}
.one{
grid-area:a;
}
.two{
grid-area:b;
}
.three{
grid-area:c;
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run