Event List
Example
Go Blue Friday
Friday, March 29
Friday, March 2910 a.m-12 p.m.
10 a.m-12 p.m.Fairlane Center South (FCS)
Fairlane Center South (FCS)Go Blue Friday
Friday, March 29
10 a.m-12 p.m.
Fairlane Center South (FCS)
Go Blue Friday
Friday, March 29
10 a.m-12 p.m.
Fairlane Center South (FCS)
Spring Open House
Friday, March 29
10 a.m-12 p.m.
Fairlane Center South (FCS)
Summer Maize Orientation Day
Friday, March 29
10 a.m-12 p.m.
Fairlane Center South (FCS)
Placement Exams
Friday, March 29
10 a.m-12 p.m.
Fairlane Center South (FCS)
Code
HTML
<div class="event-list">
<a class="event-card">
<img src="https://picsum.photos/id/0/290/163" class="card-image" />
<div class="card-details">
<h2 class="card-head">Go Blue Friday</h2>
<p class="event-date">
<img src="/icons/date.svg" aria-hidden="true" alt="Date icon" /> Friday,
March 29
</p>
<p class="event-time">
<img src="/icons/time.svg" aria-hidden="true" alt="Time icon" /> 10
a.m-12 p.m.
</p>
<p class="event-location">
<img src="/icons/location.svg" aria-hidden="true" alt="Location icon" />
Fairlane Center South (FCS)
</p>
</div>
</a>
<a class="event-card">
<img src="https://picsum.photos/id/10/290/163" class="card-image" />
<div class="card-details">
<h2 class="card-head">Go Blue Friday</h2>
<p class="event-date">
<img src="/icons/date.svg" aria-hidden="true" alt="Date icon" /> Friday,
March 29
</p>
<p class="event-time">
<img src="/icons/time.svg" aria-hidden="true" alt="Time icon" /> 10
a.m-12 p.m.
</p>
<p class="event-location">
<img src="/icons/location.svg" aria-hidden="true" alt="Location icon" />
Fairlane Center South (FCS)
</p>
</div>
</a>
<a class="event-card">
<img src="https://picsum.photos/id/1018/290/163" class="card-image" />
<div class="card-details">
<h2 class="card-head">Go Blue Friday</h2>
<p class="event-date">
<img src="/icons/date.svg" aria-hidden="true" alt="Date icon" /> Friday,
March 29
</p>
<p class="event-time">
<img src="/icons/time.svg" aria-hidden="true" alt="Time icon" /> 10
a.m-12 p.m.
</p>
<p class="event-location">
<img src="/icons/location.svg" aria-hidden="true" alt="Location icon" />
Fairlane Center South (FCS)
</p>
</div>
</a>
<a class="event-card">
<img src="https://picsum.photos/id/1069/290/163" class="card-image" />
<div class="card-details">
<h2 class="card-head">Spring Open House</h2>
<p class="event-date">
<img src="/icons/date.svg" aria-hidden="true" alt="Date icon" /> Friday,
March 29
</p>
<p class="event-time">
<img src="/icons/time.svg" aria-hidden="true" alt="Time icon" /> 10
a.m-12 p.m.
</p>
<p class="event-location">
<img src="/icons/location.svg" aria-hidden="true" alt="Location icon" />
Fairlane Center South (FCS)
</p>
</div>
</a>
<a class="event-card">
<img src="https://picsum.photos/id/237/290/163" class="card-image" />
<div class="card-details">
<h2 class="card-head">Summer Maize Orientation Day</h2>
<p class="event-date">
<img src="/icons/date.svg" aria-hidden="true" alt="Date icon" /> Friday,
March 29
</p>
<p class="event-time">
<img src="/icons/time.svg" aria-hidden="true" alt="Time icon" /> 10
a.m-12 p.m.
</p>
<p class="event-location">
<img src="/icons/location.svg" aria-hidden="true" alt="Location icon" />
Fairlane Center South (FCS)
</p>
</div>
</a>
<a class="event-card">
<img src="https://picsum.photos/id/433/290/163" class="card-image" />
<div class="card-details">
<h2 class="card-head">Placement Exams</h2>
<p class="event-date">
<img src="/icons/date.svg" aria-hidden="true" alt="Date icon" /> Friday,
March 29
</p>
<p class="event-time">
<img src="/icons/time.svg" aria-hidden="true" alt="Time icon" /> 10
a.m-12 p.m.
</p>
<p class="event-location">
<img src="/icons/location.svg" aria-hidden="true" alt="Location icon" />
Fairlane Center South (FCS)
</p>
</div>
</a>
</div>
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
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
CSS
.event-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.event-list a.event-card {
background-color: #ffffff;
-webkit-box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.1);
color: #131516;
cursor: pointer;
display: block;
margin-bottom: 1.875rem;
max-width: 18.125rem;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.event-list a.event-card:hover {
-webkit-box-shadow: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
0 5px 6px -3px rgba(0, 0, 0, 0.2);
box-shadow: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
0 5px 6px -3px rgba(0, 0, 0, 0.2);
color: #1c5184;
text-decoration: none;
}
.event-list a.event-card:hover .card-head {
color: #1c5184;
}
.event-card .card-image {
width: 100%;
}
.event-card .card-head {
border: 0;
color: rgba(0, 0, 0, 0.87);
font-family: Montserrat;
font-size: 20px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.26px;
margin: 0 0 1rem;
}
.event-card .card-details {
padding: 1rem;
}
.event-card .card-details p {
color: rgba(0, 0, 0, 0.87);
}
@media screen and (max-width: 39.9375em) {
.event-list a.event-card {
max-width: 100%;
width: 100%;
}
}
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
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
← Event Filters Facts →