Skip to content

Commit c617b6d

Browse files
SUGAM-ARORASUGAM-ARORA
authored
Merge pull request #687 from Ojas-Arora/portal
Popular Project Showcase
2 parents e144303 + 56bdce2 commit c617b6d

File tree

14 files changed

+402
-146
lines changed

14 files changed

+402
-146
lines changed

‎src/App.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Settings from "./Components/Settings/SettingsPage";
77
import About_us from "./Components/footer_section/about_us/About_us";
88
import BlogPage from "./Components/footer_section/BlogPage/BlogPage";
99
import FAQPage from "./Components/footer_section/FAQPage/FAQPage";
10+
import PortFolio from "./Components/PortFolio/PortFolio.js";
1011
import Services from "./Components/footer_section/services/Services";
1112
import ContactUs from "./Components/footer_section/ContactUs/contact_us";
1213
import Readmore from "./Components/Readmore";

‎src/Components/CardMain.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ const features = [
119119
img: Card9,
120120
pro: icon,
121121
hearts: 55,
122-
title: "GameOn",
122+
title: "BBlocks",
123123
dev: "ChrisClark",
124124
type: "Gaming",
125125
role: "Game Developer, Animator",
@@ -226,7 +226,7 @@ function CardMain() {
226226
/>
227227
<div className="card_main_name">
228228
<h2>{project.title}</h2>
229-
<div className="card_main_icon">
229+
<div className="card_main_icon" style={{ marginTop: '-18px' }}>
230230
<i>
231231
<BsFillHeartFill /> <span>{project.hearts}</span>
232232
</i>

‎src/Components/Footer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const Footer = () => {
4242
<ul className='footer-links'>
4343
<li><a href='/blogs'><FontAwesomeIcon icon={faBlog} /> Blogs</a></li>
4444
<li><a href='/Testimonials'><FontAwesomeIcon icon={faStar} /> Testimonials</a></li>
45-
<li><a href='#'><FontAwesomeIcon icon={faClipboardList} /> Portfolio</a></li>
45+
<li><a href='/PortFolio'><FontAwesomeIcon icon={faClipboardList} /> Portfolio</a></li>
4646
<li><a href='/faq'><FontAwesomeIcon icon={faQuestionCircle} /> FAQ</a></li>
4747
<li><a href='/rateus'><FontAwesomeIcon icon={faStar} /> Rate-Us</a></li>
4848
</ul>

‎src/Components/Login.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ form.sign-in-form {
245245
position: absolute;
246246
margin-top: 18vh;
247247
height: 1520px;
248-
width: 800px;
248+
width: 850px;
249249
top: -10%;
250250
right: 53%;
251251
transform: translateY(-50%);

‎src/Components/Login.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -465,8 +465,8 @@ const LogIn = () => {
465465
</div>
466466
<img src={logImg} className="image" alt="Log In" />
467467
</div>
468-
<div className="panel right-panel">
469-
<div className="content">
468+
<div className="panel right-panel1">
469+
<div className="content1">
470470
<h3>One of Us?</h3>
471471
<p>
472472
Log in to access your account and continue collaborating and

‎src/Components/Popular.js

Lines changed: 144 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Popular = () => {
1414
id: 1,
1515
name: 'StockIT',
1616
developer: 'X',
17-
uploadedOn: 'dd:mm:yy',
17+
type: 'DevOps',
1818
author: 'JaneSmith',
1919
likes: 83,
2020
image: Card1,
@@ -23,7 +23,7 @@ const Popular = () => {
2323
id: 2,
2424
name: 'TypingTest',
2525
developer: 'X',
26-
uploadedOn: 'dd:mm:yy',
26+
type: 'Education',
2727
author: 'SophiaWilson',
2828
likes: 90,
2929
image: Card2,
@@ -32,7 +32,7 @@ const Popular = () => {
3232
id: 3,
3333
name: 'Artisan',
3434
developer: 'X',
35-
uploadedOn: 'dd:mm:yy',
35+
type: 'Art & Design',
3636
author: 'DavidMartinez',
3737
likes: 95,
3838
image: Card3,
@@ -41,7 +41,7 @@ const Popular = () => {
4141
id: 4,
4242
name: 'BBlocks',
4343
developer: 'X',
44-
uploadedOn: 'dd:mm:yy',
44+
type: 'Gaming',
4545
author: 'RachelGreen',
4646
likes: 110,
4747
image: Card4,
@@ -50,7 +50,7 @@ const Popular = () => {
5050
id: 5,
5151
name: 'ZzShoes',
5252
developer: 'X',
53-
uploadedOn: 'dd:mm:yy',
53+
type: 'Inventory Management',
5454
author: 'ChrisMiller',
5555
likes: 83,
5656
image: Card5,
@@ -59,7 +59,7 @@ const Popular = () => {
5959
id: 6,
6060
name: 'SearchEngine',
6161
developer: 'X',
62-
uploadedOn: 'dd:mm:yy',
62+
type: 'Search Engine Optimization',
6363
author: 'LauraKing',
6464
likes: 86,
6565
image: Card6,
@@ -68,7 +68,7 @@ const Popular = () => {
6868
id: 7,
6969
name: 'AliImage',
7070
developer: 'X',
71-
uploadedOn: 'dd:mm:yy',
71+
type: 'AI Image Processing',
7272
author: 'OliviaTaylor',
7373
likes: 90,
7474
image: Card7,
@@ -77,131 +77,139 @@ const Popular = () => {
7777

7878
return (
7979
<div className="popular-container">
80-
<style>{`
81-
.popular-container {
82-
display: flex;
83-
flex-wrap: wrap;
84-
gap: 10px; /* Gap between cards */
85-
margin-top: 5px;
86-
}
87-
88-
.popular-card {
89-
background-color: #2a2551;
90-
border-radius: 10px;
91-
padding: 20px;
92-
width: calc(25% - 10px); /* Adjusted width for 4 cards per row, accounting for gap */
93-
color: white;
94-
text-align: left;
95-
position: relative;
96-
height: 330px;
97-
transition: transform 0.3s ease-in-out;
98-
}
99-
100-
.popular-card:hover {
101-
transform: scale(1.05);
102-
}
103-
104-
.popular-card img {
105-
margin-left: -10px;
106-
margin-top: -20px;
107-
width: 260px;
108-
height: 110px;
109-
object-fit: cover;
110-
}
111-
112-
.popular-card h3 {
113-
margin: 10px;
114-
font-size: 20px;
115-
color: #fff;
116-
}
117-
118-
.popular-card .likes {
119-
position: absolute;
120-
top: 125px;
121-
right: 20px;
122-
font-size: 16px;
123-
color: white;
124-
}
125-
126-
.popular-card .details {
127-
display: flex;
128-
justify-content: space-between;
129-
margin-top: -12px;
130-
padding: 0 10px;
131-
}
132-
133-
.popular-card .developer {
134-
font-size: 13px;
135-
color: grey;
136-
font-weight: bold;
137-
}
138-
.popular-card .uploadedOn {
139-
font-size: 13px;
140-
color: grey;
141-
text-align: right;
142-
margin-top: -48px;
143-
font-weight: bold;
144-
}
145-
146-
.popular-card .developer span {
147-
display: block;
148-
color: darkturquoise;
149-
padding: 0 24px;
150-
}
151-
.popular-card .uploadedOn span {
152-
display: block;
153-
color: darkturquoise;
154-
padding: 0 12px;
155-
}
156-
157-
.popular-card .author {
158-
font-size: 18px;
159-
color: white;
160-
margin: 10px 0;
161-
padding: 0 12px;
162-
display: flex;
163-
align-items: center;
164-
font-weight: bold;
165-
}
166-
167-
.popular-card .author p {
168-
margin: 0;
169-
margin-right: 15px; /* Gap between "By:" and the name */
170-
}
171-
172-
.popular-card .author span {
173-
color: #00c6ff;
174-
font-weight: bold;
175-
}
176-
177-
.popular-card .actions {
178-
display: flex;
179-
justify-content: space-between;
180-
margin-top: 28px;
181-
}
182-
183-
.popular-card .read-more,
184-
.popular-card .source-code {
185-
background-color: #ff21bc;
186-
color: white;
187-
border: none;
188-
padding: 0 12px;
189-
border-radius: 20px;
190-
cursor: pointer;
191-
font-size: 10px;
192-
font-weight: bold;
193-
width: 45%;
194-
text-align: center;
195-
text-decoration: none;
196-
height: 24px;
197-
line-height: 24px;
198-
}
199-
200-
.popular-card .source-code {
201-
background-color: #00c6ff;
202-
}
203-
`}</style>
204-
80+
<style>{`
81+
.popular-container {
82+
display: flex;
83+
flex-wrap: wrap;
84+
gap: 10px; /* Gap between cards */
85+
margin-top: 5px;
86+
}
87+
.popular-card {
88+
background-color: #171238;
89+
border-radius: 10px;
90+
padding: 20px;
91+
width: calc(25% - 10px); /* Adjusted width for 4 cards per row, accounting for gap */
92+
color: white;
93+
text-align: justify;
94+
position: relative;
95+
height: 330px;
96+
transition: transform 0.3s ease-in-out;
97+
border: 2px solid black; /* Added black border */
98+
}
99+
100+
.popular-card:hover {
101+
transform: scale(1.05);
102+
}
103+
104+
.popular-card img {
105+
margin-left: -10px;
106+
margin-top: -20px;
107+
width: 260px;
108+
height: 110px;
109+
object-fit: cover;
110+
}
111+
112+
.popular-card h3 {
113+
margin: 10px;
114+
font-size: 20px;
115+
color: #fff;
116+
}
117+
118+
.popular-card .likes {
119+
position: absolute;
120+
top: 125px;
121+
right: 20px;
122+
font-size: 16px;
123+
color: white;
124+
}
125+
126+
.popular-card .details {
127+
display: flex;
128+
justify-content: space-between;
129+
margin-top: -12px;
130+
padding: 0 10px;
131+
align-items: flex-start; /* Aligns the items at the start */
132+
}
133+
134+
.popular-card .developer,
135+
.popular-card .type {
136+
flex: 1; /* Both sections take equal space */
137+
font-size: 13px;
138+
color: grey;
139+
font-weight: bold;
140+
}
141+
142+
.popular-card .developer span,
143+
.popular-card .type span {
144+
display: block;
145+
color: darkturquoise;
146+
padding: 0 12px;
147+
}
148+
149+
.popular-card .type {
150+
text-align: right;
151+
margin-top: 0; /* Reset the margin */
152+
max-width: 50%; /* Limits the width of the type section */
153+
white-space: normal; /* Allows the text to wrap */
154+
margin-top:-38px;
155+
margin-left:105px;
156+
}
157+
158+
.popular-card .developer {
159+
padding-right: 10px; /* Adds a bit more space on the right */
160+
}
161+
162+
.popular-card .type {
163+
padding-left: 10px; /* Adds a bit more space on the left */
164+
}
165+
166+
.popular-card .author {
167+
font-size: 18px;
168+
color: white;
169+
margin: 10px 0;
170+
padding: 0 12px;
171+
display: flex;
172+
align-items: center;
173+
font-weight: bold;
174+
}
175+
176+
.popular-card .author p {
177+
margin: 0;
178+
margin-right: 15px; /* Gap between "By:" and the name */
179+
}
180+
181+
.popular-card .author span {
182+
color: #00c6ff;
183+
font-weight: bold;
184+
}
185+
186+
.popular-card .actions {
187+
display: flex;
188+
justify-content: space-between;
189+
margin-top: 28px;
190+
}
191+
192+
.popular-card .read-more,
193+
.popular-card .source-code {
194+
background-color: #ff21bc;
195+
color: white;
196+
border: none;
197+
padding: 0 12px;
198+
border-radius: 20px;
199+
cursor: pointer;
200+
font-size: 10px;
201+
font-weight: bold;
202+
width: 45%;
203+
text-align: center;
204+
text-decoration: none;
205+
height: 24px;
206+
line-height: 24px;
207+
}
208+
209+
.popular-card .source-code {
210+
background-color: #00c6ff;
211+
}
212+
`}</style>
205213

206214
{popularItems.map((item) => (
207215
<div className="popular-card" key={item.id}>
@@ -210,12 +218,12 @@ const Popular = () => {
210218
<div className="likes">🤍 {item.likes}</div>
211219
<div className="details">
212220
<div className="developer">
213-
Developer:
221+
Developer
214222
<span>{item.developer}</span>
215223
</div>
216-
<div className="uploadedOn">
217-
Uploaded On:
218-
<span>{item.uploadedOn}</span>
224+
<div className="type">
225+
Type of Project
226+
<span>{item.type}</span>
219227
</div>
220228
</div>
221229
<div className="author">

0 commit comments

Comments
 (0)