-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathitem_1.html
151 lines (147 loc) · 3.93 KB
/
item_1.html
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
width: 48.2rem;
margin: auto;
}
.top {
background-color: gold;
color: #0f01ff;
text-align: center;
}
.article {
color: #dda1dd;
text-align: center;
}
.reporter {
color: #548fc5;
}
.reporter time {
color: #ff41a8;
}
.reporter img {
float: right;
border: #4683b4 4px solid;
}
article {
clear: both;
display: flex;
}
article > section{
flex-grow: 1;
}
.prog {
padding-bottom: 0.1rem;
}
progress {
-webkit-appearance: none;
}
progress::-webkit-progress-value {
background-color: #8ab4f8;
}
progress::-webkit-progress-bar {
background-color: white;
border: #a9a9a9 0.1rem solid;
}
aside {
float: right;
font-size: 2.7rem;
width: 16.7rem;
transform: translateY(-1.3rem);
border-top: medium solid black;
border-bottom: medium solid black;
}
.luckd form {
width: 18rem;
}
footer {
background-color: gold;
color: #0f01ff;
width: 100%;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<header class="top"><h1>SW Studio Today</h1></header>
<header class="article"><h2>The record of the CSS class</h2></header>
<div class="reporter">
<img
src="https://previews.123rf.com/images/gmast3r/gmast3r1809/gmast3r180900199/109840480-brunette-businessman-avatar-man-face-profile-icon-concept-online-support-service-male-cartoon-charac.jpg"
alt="picture"
width="200"
class="imgd"
/>Reported by <br />Mr. or Ms. Xxxx xxxx<br />
(nickname)<br />
ID yyyyyyyy<br /><br /><time datetime="2020-02-14">Feb 14, 2020</time>
</div>
<article>
<section class="col1">
<h3>Introduction</h3>
<p>describe your background about CSS e.g.</p>
<ul>
<li>do you know CSS?</li>
<li>Have you ever been using CSS?</li>
<li>Have you ever worked with CSS before?</li>
<li>Have you any idea how CSS works?</li>
<li>What are you expecting from CSS?</li>
<li>etc.</li>
</ul>
</section>
<section class="col2">
<h3>The expectation</h3>
<p>Describe your expectations for today's class</p>
<p>You can list it like this:</p>
<ol>
<li>expect #1</li>
<li>expect #2</li>
<li>expect #3</li>
</ol>
</section>
</article>
<aside>
<p><em>your quote of today's class</em></p>
</aside>
<section class="prog">
<p>Progress of today's class <progress value="2" max="5"></progress></p>
</section>
<section class="luckd">
<p>register for lucky draw</p>
<form>
<fieldset>
<label>Name:</label><em>*</em>
<input
type="text"
id="name"
placeholder="John Smith"
autofocus
required
/><br />
<label>email:</label><em>*</em>
<input
type="email"
id="email"
placeholder="abc@def.com"
autofocus
required
/><br />
<label>Tel:</label><em>*</em>
<input
type="tel"
id="tel"
placeholder="0xx-xxxxxxx"
pattern="[0-9]{3}-[0-9]{7}"
autofocus
required
/><br />
<input type="submit" />
</fieldset>
</form>
</section>
<footer>ce.kmitl all rights reserved & copyright 2020</footer>
</body>
</html>