1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office" lang="en"
xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
0">
<meta name="format-detection" content="telephone=no,address=no,
email=no,date=no,url=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title>Wordle</title>
<style>
* {font-family: Helvetica, Arial, sans-serif;font-size:16px;}
.result {margin: 60px 0;}
h2{font-size:30px;text-align: left;margin:10px 0;}
input {display: none;}
label {cursor: pointer;width:43px;height:38px;display:
inline-block;background:#D3D6DA;text-transform:uppercase;
border-radius:4px;font-weight:bold;text-align:center;
padding-top:20px;margin:0 6px 8px 0;}
label:focus {background:#9a9c9f}
.frame {padding:0 0 20px;max-width:360px;}
.frame div {width:62px;height:42px;padding-top:20px;
display:inline-block;border: 2px solid #D3D6DA;margin: 0 6px 4px
0;vertical-align: top;font-size:20px;color:#fff}
[class^="letter"] {display:none;}
.letter1 {display:block}
.frame {
--a1: ;
--a2: ;
--a3: ;
Tip
Edit the message and see the changes in live preview
0
Source
1
<!DOCTYPE html>
30.7KB500px