msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

make website beautiful

Browse Source
pull/511/head
Parag Kulshrestha 4 years ago
parent f5efcff086
commit 9a53012260
2 changed files with 64 additions and 6 deletions
Show Stats Download Patch File Download Diff File

49
4-typing-game/solution/index.css
Unescape View File

@ -6,3 +6,52 @@
background-color: lightcoral; background-color: lightcoral;
border-color: red; border-color: red;
} }
.heading{
background-color: greenyellow;
color: blue;
font-size: 50px;
height: 10vh;
text-align: center;
}
h1{
font-size:35px;
}
.para{
text-align: center;
font-size:30px ;
}
.btn{
text-align: center;
margin: 50px;
height: 100px;
font-size: 30px;
}
#quote{
text-align: center;
font-size: 25px;
}
#message{
text-align: center;
}
.type{
text-align: center;
height: 20px;
}
#typed-value{
font-size: 20px;
height: 22px;
width: 50vh;
}
.all{
background-color:rgb(214, 39, 200);
}

21
4-typing-game/solution/index.html
Unescape View File

@ -7,17 +7,26 @@
</head> </head>
<body> <body>
<h1>Practice your typing</h1> <p class="heading">Practice your typing</p>
<div>Click start to have a quote displayed. Type the quote as fast as you can!</div> <div class="all">
<h2 class="para">Click start to have a quote displayed. Type the quote as fast as you can!</h2>
<p id="quote"></p>
<p id="message"></p>
<div> <div>
<p id="quote"></p>
<p id="message"></p>
</div>
<div class="type">
<input type="text" aria-label="current word" id="typed-value" /> <input type="text" aria-label="current word" id="typed-value" />
</div> </div>
<div>
<button id="start" type="button">Start</button>
<div class="btn">
<button id="start" type="button" style="height: 30px; width: 100px;">Start</button>
</div>
</div> </div>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save