Skip to content

Commit f3a24b7

Browse files
Jenpj234Jenpj234
committed
Added some CSS to make people page look nicer
1 parent 5fe4787 commit f3a24b7

2 files changed

Lines changed: 41 additions & 26 deletions

File tree

‎views/js/evently/src/HostList.css‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
body {
22
font-family: Arial, sans-serif;
3-
background-color: #fdfaf6; /* Matches the off-white background */
3+
background-color: #ffffff; /* Matches the off-white background */
44
}
55

66
.header {
@@ -21,7 +21,7 @@ body {
2121
border: none; /* Remove border */
2222
padding: 0.75rem 1rem; /* Adjust padding as needed */
2323
border: none;
24-
border-radius: 5rem; /* Optional: Rounds the button edges */
24+
border-radius: 20px; /* Optional: Rounds the button edges */
2525
font-size: 1.2rem;
2626
outline: none;
2727
margin: 2rem;
@@ -57,15 +57,21 @@ table th, table td {
5757
border-radius: 50%;
5858
}
5959

60+
.peopleSection-container {
61+
background-color: #ffffff; /* Ensure the background spans the full width */
62+
background-attachment: fixed; /* Keeps the background fixed during scroll */
63+
width: 100%; /* Ensures the background spans the full width of the viewport */
64+
padding: 20px 0; /* Optional: Add vertical spacing inside the section */
65+
}
66+
6067
.peopleSection {
6168
display: grid;
6269
grid-template-columns: repeat(3, 1fr); /* Ensures 3 columns */
6370
grid-auto-rows: minmax(100px, auto);
6471
gap: 60px; /* Spacing between cards */
6572
max-width: 1200px;
66-
margin: 20px auto; /* Centers the grid */
67-
background-color: #d9d9d9;
68-
background-attachment: fixed;
73+
margin: 0 auto; /* Centers the grid inside the full-width section */
74+
padding: 0 20px; /* Optional: Horizontal padding for content */
6975
}
7076

7177
.accountContainer {
@@ -74,8 +80,8 @@ table th, table td {
7480
align-items: center; /* Centers content horizontally */
7581
justify-content: center; /* Centers content vertically */
7682
padding: 20px;
77-
background-color: #0036cc;
78-
border-radius: 20px;
83+
background-color: #F2ECE8;
84+
border-radius: 80px;
7985
text-align: center;
8086
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Optional shadow for card */
8187
}
@@ -108,7 +114,7 @@ table th, table td {
108114
justify-content: center;
109115
align-items: center;
110116
width: 100%; /* Full width */
111-
background: #fff; /* Optional: Background color */
117+
background: #ffffff; /* Optional: Background color */
112118
margin: 0; /* Remove default body margin if needed */
113119
}
114120

‎views/js/evently/src/HostList.jsx‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,6 @@ function HostList() {
7070
</table>
7171
*/}
7272

73-
74-
7573
<div class="nav-bar-container">
7674
<Link to="/create-host" className="host-button">Join now</Link>
7775
<div class="account-search-bar">
@@ -80,10 +78,8 @@ function HostList() {
8078
</div>
8179
</div>
8280

83-
84-
<div class="peopleSection">
85-
86-
81+
<div class="peopleSection-container">
82+
<div class="peopleSection">
8783
<div class="accountContainer">
8884
<div class="accountInfo">
8985
<img src={profileImage1} alt="Profile picture" className="profile-image" />
@@ -97,67 +93,80 @@ function HostList() {
9793
<div class="accountInfo">
9894
<img src={profileImage1} alt="Profile picture" className="profile-image" />
9995
</div>
100-
<p>John Doe</p>
96+
<p>Attendee</p>
97+
<h2>John Doe</h2>
98+
<h2>fake@gmail.com</h2>
10199
</div>
102100

103101
<div class="accountContainer">
104102
<div class="accountInfo">
105103
<img src={profileImage1} alt="Profile picture" className="profile-image" />
106104
</div>
107-
<p>John Doe</p>
105+
<p>Attendee</p>
106+
<h2>John Doe</h2>
107+
<h2>fake@gmail.com</h2>
108108
</div>
109109

110110
<div class="accountContainer">
111111
<div class="accountInfo">
112112
<img src={profileImage1} alt="Profile picture" className="profile-image" />
113113
</div>
114-
<p>John Doe</p>
114+
<p>Attendee</p>
115+
<h2>John Doe</h2>
116+
<h2>fake@gmail.com</h2>
115117
</div>
116118

117119
<div class="accountContainer">
118120
<div class="accountInfo">
119121
<img src={profileImage1} alt="Profile picture" className="profile-image" />
120122
</div>
121-
<p>John Doe</p>
123+
<p>Attendee</p>
124+
<h2>John Doe</h2>
125+
<h2>fake@gmail.com</h2>
122126
</div>
123127

124128
<div class="accountContainer">
125129
<div class="accountInfo">
126130
<img src={profileImage1} alt="Profile picture" className="profile-image" />
127131
</div>
128-
<p>John Doe</p>
129-
132+
<p>Attendee</p>
133+
<h2>John Doe</h2>
134+
<h2>fake@gmail.com</h2>
130135
</div>
131136

132137
<div class="accountContainer">
133138
<div class="accountInfo">
134139
<img src={profileImage1} alt="Profile picture" className="profile-image" />
135140
</div>
136-
<p>John Doe</p>
141+
<p>Attendee</p>
142+
<h2>John Doe</h2>
143+
<h2>fake@gmail.com</h2>
137144
</div>
138145

139146
<div class="accountContainer">
140147
<div class="accountInfo">
141148
<img src={profileImage1} alt="Profile picture" className="profile-image" />
142149
</div>
143-
<p>John Doe</p>
150+
<p>Attendee</p>
151+
<h2>John Doe</h2>
152+
<h2>fake@gmail.com</h2>
144153
</div>
145154

146155
<div class="accountContainer">
147156
<div class="accountInfo">
148157
<img src={profileImage1} alt="Profile picture" className="profile-image" />
149158
</div>
150-
<p>John Doe</p>
159+
<p>Attendee</p>
160+
<h2>John Doe</h2>
161+
<h2>fake@gmail.com</h2>
151162
</div>
152-
153-
154-
155163
</div>
156164

157165

158166

159167

160168
</div>
169+
</div>
161170
);
162171

163172
}

0 commit comments

Comments
 (0)