Skip to content

Commit 9d55544

Browse files
Jenpj234Jenpj234
committed
Added grid layout to People page
1 parent f46d00b commit 9d55544

File tree

2 files changed

+139
-7
lines changed

2 files changed

+139
-7
lines changed

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

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ body {
88
justify-content:center;
99
align-items: center;
1010
padding: 20px;
11-
border-bottom: 2px solid #f5f5f5;
1211
}
1312

1413
.header h1 {
@@ -17,15 +16,16 @@ body {
1716
}
1817

1918
.host-button {
19+
display: inline-block; /* Ensures it doesn't stretch */
20+
margin: 0 auto; /* Centers it if the parent has a fixed width */
21+
text-align: center;
2022
background-color: #0047ff;
2123
color: #fff;
2224
padding: 10px 20px;
2325
font-size: 1rem;
2426
border: none;
2527
border-radius: 5px;
2628
text-decoration: none;
27-
margin: 0 auto;
28-
display: block;
2929
}
3030

3131
.host-button:hover {
@@ -55,3 +55,49 @@ table th, table td {
5555
border-radius: 50%;
5656
}
5757

58+
.peopleSection {
59+
display: grid;
60+
grid-template-columns: repeat(3, 1fr); /* Ensures 3 columns */
61+
grid-auto-rows: minmax(100px, auto);
62+
gap: 60px; /* Spacing between cards */
63+
max-width: 1200px;
64+
margin: 20px auto; /* Centers the grid */
65+
background-color: #d9d9d9;
66+
padding: 30px 10px 140px 20px;
67+
}
68+
69+
.accountContainer {
70+
display: flex;
71+
flex-direction: column; /* Ensures vertical stacking */
72+
align-items: center; /* Centers content horizontally */
73+
justify-content: center; /* Centers content vertically */
74+
padding: 20px;
75+
background-color: #0036cc;
76+
border-radius: 20px;
77+
text-align: center;
78+
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Optional shadow for card */
79+
}
80+
81+
.accountInfo {
82+
width: 100px;
83+
height: 100px;
84+
overflow: hidden;
85+
border-radius: 50%; /* Circular image */
86+
margin-bottom: 16px; /* Adds space between image and text */
87+
}
88+
89+
.accountInfo img {
90+
width: 100%;
91+
height: 100%;
92+
object-fit: cover; /* Ensures image fits nicely in circle */
93+
}
94+
95+
.accountInfo p {
96+
margin: 0;
97+
padding: 0;
98+
font-size: 14px; /* Adjusts text size */
99+
color: #ffffff; /* Text color for better contrast */
100+
text-align: center; /* Centers text within container */
101+
}
102+
103+

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

Lines changed: 90 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
22
import "./HostList.css";
33
import axios from 'axios';
44
import { useNavigate, Link } from "react-router-dom";
5+
import profileImage1 from "./profile_img.jpg"
56

67
function HostList() {
78
const [hosts, setHosts] = useState([]);
@@ -30,14 +31,12 @@ function HostList() {
3031
<div className="all-hosts-container">
3132
<div className="header">
3233
<h1>Discover New People</h1>
33-
3434
</div>
35-
3635
<Link to="/create-host" className="host-button">
3736
Join now
38-
</Link>
37+
</Link>
3938

40-
<table>
39+
{/* <table>
4140
<thead>
4241
<tr>
4342
<th>Profile</th>
@@ -72,6 +71,93 @@ function HostList() {
7271
)}
7372
</tbody>
7473
</table>
74+
*/}
75+
76+
77+
<div className="search-bar">
78+
<button className="search-btn"> 🔍 </button>
79+
<input type="text" placeholder="Start Your Search Here!" />
80+
</div>
81+
82+
83+
<div class="peopleSection">
84+
85+
86+
<div class="accountContainer">
87+
<div class="accountInfo">
88+
<img src={profileImage1} alt="Profile picture" className="profile-image" />
89+
</div>
90+
<p>John Doe</p>
91+
</div>
92+
93+
94+
95+
<div class="accountContainer">
96+
<div class="accountInfo">
97+
<img src={profileImage1} alt="Profile picture" className="profile-image" />
98+
</div>
99+
<p>John Doe</p>
100+
</div>
101+
102+
<div class="accountContainer">
103+
<div class="accountInfo">
104+
<img src={profileImage1} alt="Profile picture" className="profile-image" />
105+
</div>
106+
<p>John Doe</p>
107+
</div>
108+
109+
<div class="accountContainer">
110+
<div class="accountInfo">
111+
<img src={profileImage1} alt="Profile picture" className="profile-image" />
112+
</div>
113+
<p>John Doe</p>
114+
</div>
115+
116+
117+
118+
119+
<div class="accountContainer">
120+
<div class="accountInfo">
121+
<img src={profileImage1} alt="Profile picture" className="profile-image" />
122+
</div>
123+
<p>John Doe</p>
124+
</div>
125+
126+
<div class="accountContainer">
127+
<div class="accountInfo">
128+
<img src={profileImage1} alt="Profile picture" className="profile-image" />
129+
</div>
130+
<p>John Doe</p>
131+
</div>
132+
133+
<div class="accountContainer">
134+
<div class="accountInfo">
135+
<img src={profileImage1} alt="Profile picture" className="profile-image" />
136+
</div>
137+
<p>John Doe</p>
138+
</div>
139+
140+
<div class="accountContainer">
141+
<div class="accountInfo">
142+
<img src={profileImage1} alt="Profile picture" className="profile-image" />
143+
</div>
144+
<p>John Doe</p>
145+
</div>
146+
147+
<div class="accountContainer">
148+
<div class="accountInfo">
149+
<img src={profileImage1} alt="Profile picture" className="profile-image" />
150+
</div>
151+
<p>John Doe</p>
152+
</div>
153+
154+
155+
156+
</div>
157+
158+
159+
160+
75161
</div>
76162
);
77163

0 commit comments

Comments
 (0)