Skip to content

Commit 9762aea

Browse files
dtinthdtinth
committed
🎨 ✨ Setup CSS skeleton
1 parent 7c8e76f commit 9762aea

File tree

2 files changed

+123
-75
lines changed

2 files changed

+123
-75
lines changed

‎index.html‎

Lines changed: 76 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title>Code Mania 110</title>
8+
<link rel="stylesheet" href="style.css">
89
</head>
910
<body>
1011

@@ -27,160 +28,160 @@ <h1 id="event-info__title">Code Mania 110</h1>
2728
</section>
2829

2930
<section id="sessions">
30-
<h2>Sessions</h2>
31+
<h2 id="sessions__heading">Sessions</h2>
3132
<ul class="sessions__list">
3233
<!-- registration -->
33-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
34-
<li class="sessions__list-item session-item">
35-
<h3 class="session-title">Registration</h3>
34+
<li class="session-time">00:00 - 00:00</li>
35+
<li class="session-item">
36+
<h3 class="session-item__title">Registration</h3>
3637
</li>
3738

3839
<!-- opening -->
39-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
40+
<li class="session-time">00:00 - 00:00</li>
4041
<li class="session-item">
41-
<h3 class="session-title">Opening Ceremony</h3>
42-
<p class="session-description">Description</p>
42+
<h3 class="session-item__title">Opening Ceremony</h3>
43+
<p class="session-item__description">Description</p>
4344
</li>
4445

4546
<!-- keynote 1 -->
46-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
47+
<li class="session-time">00:00 - 00:00</li>
4748
<li class="session-item">
48-
<em>Speaker 1</em>
49-
<h3 class="session-title">Session 1</h3>
50-
<p class="session-description">Description 1</p>
49+
<em class="session-item__speaker">Speaker 1</em>
50+
<h3 class="session-item__title">Session 1</h3>
51+
<p class="session-item__description">Description 1</p>
5152
</li>
5253

5354
<!-- keynote 2 -->
54-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
55+
<li class="session-time">00:00 - 00:00</li>
5556
<li class="session-item">
56-
<em>Speaker 2</em>
57-
<h3 class="session-title">Session 2</h3>
58-
<p class="session-description">Description 2</p>
57+
<em class="session-item__speaker">Speaker 2</em>
58+
<h3 class="session-item__title">Session 2</h3>
59+
<p class="session-item__description">Description 2</p>
5960
</li>
6061

6162
<!-- keynote 3 -->
62-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
63+
<li class="session-time">00:00 - 00:00</li>
6364
<li class="session-item">
64-
<em>Speaker 3</em>
65-
<h3 class="session-title">Session 3</h3>
66-
<p class="session-description">Description 3</p>
65+
<em class="session-item__speaker">Speaker 3</em>
66+
<h3 class="session-item__title">Session 3</h3>
67+
<p class="session-item__description">Description 3</p>
6768
</li>
6869

6970
<!-- lunch -->
70-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
71-
<li class="sessions__list-item session-item">
72-
<h3 class="session-title">Lunch Break</h3>
71+
<li class="session-time">00:00 - 00:00</li>
72+
<li class="session-item">
73+
<h3 class="session-item__title">Lunch Break</h3>
7374
</li>
7475

7576
<!-- afternoon 1 -->
76-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
77+
<li class="session-time">00:00 - 00:00</li>
7778
<li class="session-item session-item--split">
7879
<strong class="session-item__room">ห้องประชุมจำรัสฯ</strong>
79-
<em>Speaker 4</em>
80-
<h3 class="session-title">Session 4</h3>
81-
<p class="session-description">Description 4</p>
80+
<em class="session-item__speaker">Speaker 4</em>
81+
<h3 class="session-item__title">Session 4</h3>
82+
<p class="session-item__description">Description 4</p>
8283
</li>
8384
<li class="session-item session-item--split">
8485
<strong class="session-item__room">Room No. 2201</strong>
85-
<em>Speaker 5</em>
86-
<h3 class="session-title">Session 5</h3>
87-
<p class="session-description">Description 5</p>
86+
<em class="session-item__speaker">Speaker 5</em>
87+
<h3 class="session-item__title">Session 5</h3>
88+
<p class="session-item__description">Description 5</p>
8889
</li>
8990
<li class="session-item session-item--split">
9091
<strong class="session-item__room">Room No. 2301</strong>
91-
<em>Speaker 6</em>
92-
<h3 class="session-title">Session 6</h3>
93-
<p class="session-description">Description 6</p>
92+
<em class="session-item__speaker">Speaker 6</em>
93+
<h3 class="session-item__title">Session 6</h3>
94+
<p class="session-item__description">Description 6</p>
9495
</li>
9596

9697
<!-- afternoon 2 -->
97-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
98+
<li class="session-time">00:00 - 00:00</li>
9899
<li class="session-item session-item--split">
99100
<strong class="session-item__room">ห้องประชุมจำรัสฯ</strong>
100-
<em>Speaker 7</em>
101-
<h3 class="session-title">Session 7</h3>
102-
<p class="session-description">Description 7</p>
101+
<em class="session-item__speaker">Speaker 7</em>
102+
<h3 class="session-item__title">Session 7</h3>
103+
<p class="session-item__description">Description 7</p>
103104
</li>
104105
<li class="session-item session-item--split">
105106
<strong class="session-item__room">Room No. 2201</strong>
106-
<em>Speaker 8</em>
107-
<h3 class="session-title">Session 8</h3>
108-
<p class="session-description">Description 8</p>
107+
<em class="session-item__speaker">Speaker 8</em>
108+
<h3 class="session-item__title">Session 8</h3>
109+
<p class="session-item__description">Description 8</p>
109110
</li>
110111
<li class="session-item session-item--split">
111112
<strong class="session-item__room">Room No. 2301</strong>
112-
<em>Speaker 9</em>
113-
<h3 class="session-title">Session 9</h3>
114-
<p class="session-description">Description 9</p>
113+
<em class="session-item__speaker">Speaker 9</em>
114+
<h3 class="session-item__title">Session 9</h3>
115+
<p class="session-item__description">Description 9</p>
115116
</li>
116117

117118
<!-- afternoon 3 -->
118-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
119+
<li class="session-time">00:00 - 00:00</li>
119120
<li class="session-item session-item--split">
120121
<strong class="session-item__room">ห้องประชุมจำรัสฯ</strong>
121-
<em>Speaker 10</em>
122-
<h3 class="session-title">Session 10</h3>
123-
<p class="session-description">Description 10</p>
122+
<em class="session-item__speaker">Speaker 10</em>
123+
<h3 class="session-item__title">Session 10</h3>
124+
<p class="session-item__description">Description 10</p>
124125
</li>
125126
<li class="session-item session-item--split">
126127
<strong class="session-item__room">Room No. 2201</strong>
127-
<em>Speaker 11</em>
128-
<h3 class="session-title">Session 11</h3>
129-
<p class="session-description">Description 11</p>
128+
<em class="session-item__speaker">Speaker 11</em>
129+
<h3 class="session-item__title">Session 11</h3>
130+
<p class="session-item__description">Description 11</p>
130131
</li>
131132
<li class="session-item session-item--split">
132133
<strong class="session-item__room">Room No. 2301</strong>
133-
<em>Speaker 12</em>
134-
<h3 class="session-title">Session 12</h3>
135-
<p class="session-description">Description 12</p>
134+
<em class="session-item__speaker">Speaker 12</em>
135+
<h3 class="session-item__title">Session 12</h3>
136+
<p class="session-item__description">Description 12</p>
136137
</li>
137138

138139
<!-- afternoon break -->
139-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
140-
<li class="sessions__list-item session-item">
141-
<h3 class="session-title">Break</h3>
140+
<li class="session-time">00:00 - 00:00</li>
141+
<li class="session-item">
142+
<h3 class="session-item__title">Break</h3>
142143
</li>
143144

144145
<!-- afternoon 4 -->
145-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
146+
<li class="session-time">00:00 - 00:00</li>
146147
<li class="session-item session-item--split">
147148
<strong class="session-item__room">ห้องประชุมจำรัสฯ</strong>
148-
<em>Speaker 13</em>
149-
<h3 class="session-title">Session 13</h3>
150-
<p class="session-description">Description 13</p>
149+
<em class="session-item__speaker">Speaker 13</em>
150+
<h3 class="session-item__title">Session 13</h3>
151+
<p class="session-item__description">Description 13</p>
151152
</li>
152153
<li class="session-item session-item--split">
153154
<strong class="session-item__room">Room No. 2201</strong>
154-
<em>Speaker 14</em>
155-
<h3 class="session-title">Session 14</h3>
156-
<p class="session-description">Description 14</p>
155+
<em class="session-item__speaker">Speaker 14</em>
156+
<h3 class="session-item__title">Session 14</h3>
157+
<p class="session-item__description">Description 14</p>
157158
</li>
158159
<li class="session-item session-item--split">
159160
<strong class="session-item__room">Room No. 2301</strong>
160-
<em>Speaker 15</em>
161-
<h3 class="session-title">Session 15</h3>
162-
<p class="session-description">Description 15</p>
161+
<em class="session-item__speaker">Speaker 15</em>
162+
<h3 class="session-item__title">Session 15</h3>
163+
<p class="session-item__description">Description 15</p>
163164
</li>
164165

165166
<!-- afternoon 5 -->
166-
<li class="sessions__list-item session-time">00:00 - 00:00</li>
167+
<li class="session-time">00:00 - 00:00</li>
167168
<li class="session-item session-item--split">
168169
<strong class="session-item__room">ห้องประชุมจำรัสฯ</strong>
169-
<em>Speaker 16</em>
170-
<h3 class="session-title">Session 16</h3>
171-
<p class="session-description">Description 16</p>
170+
<em class="session-item__speaker">Speaker 16</em>
171+
<h3 class="session-item__title">Session 16</h3>
172+
<p class="session-item__description">Description 16</p>
172173
</li>
173174
<li class="session-item session-item--split">
174175
<strong class="session-item__room">Room No. 2201</strong>
175-
<em>Speaker 17</em>
176-
<h3 class="session-title">Session 17</h3>
177-
<p class="session-description">Description 17</p>
176+
<em class="session-item__speaker">Speaker 17</em>
177+
<h3 class="session-item__title">Session 17</h3>
178+
<p class="session-item__description">Description 17</p>
178179
</li>
179180
<li class="session-item session-item--split">
180181
<strong class="session-item__room">Room No. 2301</strong>
181-
<em>Speaker 18</em>
182-
<h3 class="session-title">Session 18</h3>
183-
<p class="session-description">Description 18</p>
182+
<em class="session-item__speaker">Speaker 18</em>
183+
<h3 class="session-item__title">Session 18</h3>
184+
<p class="session-item__description">Description 18</p>
184185
</li>
185186
</ul>
186187
</section>

‎style.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/* Global */
2+
html {
3+
}
4+
body {
5+
}
6+
a {
7+
}
8+
9+
/* Event info */
10+
#event-info {
11+
}
12+
#event-info__title {
13+
}
14+
#event-info__tagline {
15+
}
16+
#event-info__date {
17+
}
18+
#event-info__place {
19+
}
20+
21+
/* Event description */
22+
#event-description {
23+
}
24+
25+
/* Sessions */
26+
#sessions {
27+
}
28+
#sessions__heading {
29+
}
30+
.sessions__list {
31+
}
32+
.sessions__list > li {
33+
}
34+
35+
/* Session */
36+
.session-time {
37+
}
38+
.session-item {
39+
}
40+
.session-item__room {
41+
}
42+
.session-item__speaker {
43+
}
44+
.session-item__title {
45+
}
46+
.session-item__description {
47+
}

0 commit comments

Comments
 (0)