Skip to content

Commit b2ece27

Browse files
byquangthanhbyquangthanh
authored
Merge pull request byquangthanh#8 from 48544D/css-improvement
[improvement]: Refactor HTML code and update CSS styles
2 parents 639ef47 + 530f63d commit b2ece27

14 files changed

+548
-406
lines changed

‎activities.html

+74-75
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,77 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Document</title>
7-
<style>
8-
body {
9-
text-align: center;
10-
margin-top: 30px;
11-
font-family: 'Courier';
12-
background-color:#FFF5E4;
13-
color: #FF9494;
14-
}
15-
#activityquestion {
16-
font-size: 50px;
17-
margin-bottom: 30px;
18-
}
19-
.activity-item {
20-
display: inline-block;
21-
margin: 10px;
22-
vertical-align: top;
23-
color: #FF9494;
24-
}
25-
.activity-item img {
26-
width: 220px;
27-
height: auto;
28-
padding: 10px;
29-
}
30-
.activity-item label {
31-
display: block;
32-
}
33-
.button {
34-
padding: 10px 20px;
35-
font-size: 18px;
36-
cursor: pointer;
37-
margin: 10px;
38-
font-family: 'courier';
39-
margin-bottom: 20px;
40-
background-color:#FFE3E1;
41-
color: #e67373;
42-
border-radius: 12px;
43-
border: 2px solid #FFE3E1;
44-
}
45-
</style>
46-
</head>
47-
<body>
48-
<div id="activityquestion"><b>What are we doing after?</b>
49-
</div>
50-
<div class = "activities-selection">
51-
<div class="activity-item">
52-
<img src="activities/aquarium.jpeg" alt ="aquarium">
53-
<label><input type="checkbox" name="activities" value ="aquarium">aquarium</label>
54-
</div>
55-
<div class="activity-item">
56-
<img src="activities/arcade.jpeg" alt ="arcade">
57-
<label><input type="checkbox" name="activities" value ="arcade">arcade</label>
58-
</div>
59-
<div class="activity-item">
60-
<img src="activities/cinema.jpeg" alt ="cinema">
61-
<label><input type="checkbox" name="activities" value ="cinema">cinema</label>
62-
</div>
63-
<div class="activity-item">
64-
<img src="activities/keramika.jpeg" alt ="ceramics">
65-
<label><input type="checkbox" name="activities" value ="ceramics">ceramics</label>
66-
</div>
67-
<div class="activity-item">
68-
<img src="activities/kunsthalle.jpeg" alt ="kunsthalle">
69-
<label><input type="checkbox" name="activities" value ="kunsthalle">exhibition</label>
70-
</div>
71-
<div class="activity-item">
72-
<img src="activities/park.jpeg" alt ="park.jpeg">
73-
<label><input type="checkbox" name="activities" value ="park.jpeg">park</label>
74-
</div>
75-
</div>
76-
<button class = "button" onclick="location.href='lastpage.html'">Last page</button>
77-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Activities</title>
7+
<link rel="stylesheet" href="css/activities.css" />
8+
</head>
9+
<body>
10+
<div id="activityquestion"><b>What are we doing after?</b></div>
11+
<div class="activities-selection">
12+
<div class="activity-item">
13+
<img src="activities/aquarium.jpeg" alt="aquarium" />
14+
<label
15+
><input
16+
type="checkbox"
17+
name="activities"
18+
value="aquarium"
19+
/>aquarium</label
20+
>
21+
</div>
22+
<div class="activity-item">
23+
<img src="activities/arcade.jpeg" alt="arcade" />
24+
<label
25+
><input
26+
type="checkbox"
27+
name="activities"
28+
value="arcade"
29+
/>arcade</label
30+
>
31+
</div>
32+
<div class="activity-item">
33+
<img src="activities/cinema.jpeg" alt="cinema" />
34+
<label
35+
><input
36+
type="checkbox"
37+
name="activities"
38+
value="cinema"
39+
/>cinema</label
40+
>
41+
</div>
42+
<div class="activity-item">
43+
<img src="activities/keramika.jpeg" alt="ceramics" />
44+
<label
45+
><input
46+
type="checkbox"
47+
name="activities"
48+
value="ceramics"
49+
/>ceramics</label
50+
>
51+
</div>
52+
<div class="activity-item">
53+
<img src="activities/kunsthalle.jpeg" alt="kunsthalle" />
54+
<label
55+
><input
56+
type="checkbox"
57+
name="activities"
58+
value="kunsthalle"
59+
/>exhibition</label
60+
>
61+
</div>
62+
<div class="activity-item">
63+
<img src="activities/park.jpeg" alt="park.jpeg" />
64+
<label
65+
><input
66+
type="checkbox"
67+
name="activities"
68+
value="park.jpeg"
69+
/>park</label
70+
>
71+
</div>
72+
</div>
73+
<button class="button" onclick="location.href='lastpage.html'">
74+
Last page
75+
</button>
76+
</body>
7877
</html>

‎css/activities.css

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
body {
2+
text-align: center;
3+
margin-top: 30px;
4+
font-family: "Courier";
5+
background-color: #fff5e4;
6+
color: #ff9494;
7+
}
8+
#activityquestion {
9+
font-size: 50px;
10+
margin-bottom: 30px;
11+
}
12+
.activity-item {
13+
display: inline-block;
14+
margin: 10px;
15+
vertical-align: top;
16+
color: #ff9494;
17+
}
18+
.activity-item img {
19+
height: 200px;
20+
width: 200px;
21+
border-radius: 50%;
22+
border: 5px solid #ff9494;
23+
object-fit: cover;
24+
padding: 10px;
25+
}
26+
.activity-item label {
27+
display: block;
28+
}
29+
.button {
30+
padding: 10px 20px;
31+
font-size: 18px;
32+
cursor: pointer;
33+
margin: 10px;
34+
font-family: "courier";
35+
margin-bottom: 20px;
36+
background-color: #ffe3e1;
37+
color: #e67373;
38+
border-radius: 12px;
39+
border: 2px solid #ffe3e1;
40+
}

‎css/date.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
body {
2+
text-align: center;
3+
margin-top: 30px;
4+
font-family: "Courier";
5+
background-color: #fff5e4;
6+
color: #ff9494;
7+
display: flex;
8+
flex-direction: column;
9+
}
10+
h1 {
11+
font-size: 40px;
12+
}
13+
14+
form .header {
15+
width: 100%;
16+
display: flex;
17+
font-size: 20px;
18+
margin-bottom: 20px;
19+
color: #ff9494;
20+
}
21+
22+
.form-group {
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: center;
26+
font-size: 25px;
27+
}
28+
29+
.button {
30+
padding: 6px 10px;
31+
font-size: 15px;
32+
cursor: pointer;
33+
margin: 10px;
34+
font-family: "courier";
35+
margin-bottom: 10px;
36+
background-color: #ffe3e1;
37+
color: #e67373;
38+
border-radius: 12px;
39+
border: 2px solid #ffe3e1;
40+
transition: 0.3s;
41+
}
42+
43+
.button:hover {
44+
background-color: #ff9494;
45+
color: #ffe3e1;
46+
border: 2px solid #ff9494;
47+
}
48+
49+
input[type="date"] {
50+
padding: 6px 10px;
51+
font-size: 15px;
52+
cursor: pointer;
53+
margin: 10px;
54+
font-family: "courier";
55+
margin-bottom: 10px;
56+
background-color: #ffe3e1;
57+
color: #e67373;
58+
border-radius: 12px;
59+
border: 2px solid #ffe3e1;
60+
}

‎css/dessert.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
body {
2+
text-align: center;
3+
margin-top: 30px;
4+
font-family: courier;
5+
background-color: #fff5e4;
6+
color: #ff9494;
7+
}
8+
#dessertquestion {
9+
font-size: 50px;
10+
margin-bottom: 30px;
11+
font-weight: bold;
12+
}
13+
.dessert-item {
14+
display: inline-table;
15+
margin: 10px;
16+
vertical-align: top;
17+
color: #ff9494;
18+
}
19+
.dessert-item img {
20+
height: 200px;
21+
width: 200px;
22+
border-radius: 50%;
23+
border: 5px solid #ff9494;
24+
object-fit: cover;
25+
padding: 10px;
26+
}
27+
.dessert-item label {
28+
display: block;
29+
}
30+
.button {
31+
padding: 10px 20px;
32+
font-size: 18px;
33+
cursor: pointer;
34+
margin: 10px;
35+
font-family: "courier";
36+
margin-bottom: 20px;
37+
background-color: #ffe3e1;
38+
color: #e67373;
39+
border-radius: 12px;
40+
border: 2px solid #ffe3e1;
41+
}

‎flower.css ‎css/flower.css

File renamed without changes.

‎css/food.css

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
body {
2+
text-align: center;
3+
margin-top: 30px;
4+
font-family: "Courier";
5+
background-color: #fff5e4;
6+
color: #ff9494;
7+
}
8+
#foodquestion {
9+
font-size: 50px;
10+
margin-bottom: 30px;
11+
}
12+
.food-item {
13+
display: inline-block;
14+
margin: 10px;
15+
vertical-align: top;
16+
color: #ff9494;
17+
}
18+
.food-item img {
19+
height: 200px;
20+
width: 200px;
21+
border-radius: 50%;
22+
border: 5px solid #ff9494;
23+
object-fit: cover;
24+
padding: 10px;
25+
}
26+
.food-item label {
27+
display: block;
28+
}
29+
.button {
30+
padding: 10px 20px;
31+
font-size: 18px;
32+
cursor: pointer;
33+
margin: 10px;
34+
font-family: "courier";
35+
margin-bottom: 20px;
36+
background-color: #ffe3e1;
37+
color: #e67373;
38+
border-radius: 12px;
39+
border: 2px solid #ffe3e1;
40+
}

‎css/lastpage.css

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
body {
2+
text-align: center;
3+
margin-top: 30px;
4+
font-family: "Courier";
5+
background-color: #fff5e4;
6+
color: #ff9494;
7+
}
8+
#thankyou {
9+
font-size: 50px;
10+
margin-bottom: 20px;
11+
}
12+
.rizz {
13+
margin-bottom: 10 px;
14+
}
15+
.button {
16+
padding: 10px 20px;
17+
font-size: 18px;
18+
cursor: pointer;
19+
margin: 10px;
20+
font-family: "courier";
21+
margin-bottom: 20px;
22+
background-color: #ffe3e1;
23+
color: #e67373;
24+
border-radius: 12px;
25+
border: 2px solid #ffe3e1;
26+
box-shadow: 1px 1px 2px #ff9494;
27+
transition: 0.3s;
28+
}
29+
30+
.button:hover {
31+
background-color: #ff9494;
32+
color: #ffe3e1;
33+
border: 2px solid #ff9494;
34+
box-shadow: 1px 1px 2px #ffe3e1;
35+
}

0 commit comments

Comments
 (0)