Skip to content

Commit

Permalink
Merge pull request #687 from Ojas-Arora/portal
Browse files Browse the repository at this point in the history 
Popular Project Showcase
  • Loading branch information
@SUGAM-ARORA
SUGAM-ARORA authored Aug 8, 2024
2 parents e144303 + 56bdce2 commit c617b6d
Show file tree
Hide file tree
Showing 14 changed files with 402 additions and 146 deletions.
1 change: 1 addition & 0 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Settings from "./Components/Settings/SettingsPage";
import About_us from "./Components/footer_section/about_us/About_us";
import BlogPage from "./Components/footer_section/BlogPage/BlogPage";
import FAQPage from "./Components/footer_section/FAQPage/FAQPage";
import PortFolio from "./Components/PortFolio/PortFolio.js";
import Services from "./Components/footer_section/services/Services";
import ContactUs from "./Components/footer_section/ContactUs/contact_us";
import Readmore from "./Components/Readmore";
Expand Down
4 changes: 2 additions & 2 deletions src/Components/CardMain.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const features = [
img: Card9,
pro: icon,
hearts: 55,
title: "GameOn",
title: "BBlocks",
dev: "ChrisClark",
type: "Gaming",
role: "Game Developer, Animator",
Expand Down Expand Up @@ -226,7 +226,7 @@ function CardMain() {
/>
<div className="card_main_name">
<h2>{project.title}</h2>
<div className="card_main_icon">
<div className="card_main_icon" style={{ marginTop: '-18px' }}>
<i>
<BsFillHeartFill /> <span>{project.hearts}</span>
</i>
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const Footer = () => {
<ul className='footer-links'>
<li><a href='/blogs'><FontAwesomeIcon icon={faBlog} /> Blogs</a></li>
<li><a href='/Testimonials'><FontAwesomeIcon icon={faStar} /> Testimonials</a></li>
<li><a href='#'><FontAwesomeIcon icon={faClipboardList} /> Portfolio</a></li>
<li><a href='/PortFolio'><FontAwesomeIcon icon={faClipboardList} /> Portfolio</a></li>
<li><a href='/faq'><FontAwesomeIcon icon={faQuestionCircle} /> FAQ</a></li>
<li><a href='/rateus'><FontAwesomeIcon icon={faStar} /> Rate-Us</a></li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ form.sign-in-form {
position: absolute;
margin-top: 18vh;
height: 1520px;
width: 800px;
width: 850px;
top: -10%;
right: 53%;
transform: translateY(-50%);
Expand Down
4 changes: 2 additions & 2 deletions src/Components/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,8 +465,8 @@ const LogIn = () => {
</div>
<img src={logImg} className="image" alt="Log In" />
</div>
<div className="panel right-panel">
<div className="content">
<div className="panel right-panel1">
<div className="content1">
<h3>One of Us?</h3>
<p>
Log in to access your account and continue collaborating and
Expand Down
280 changes: 144 additions & 136 deletions src/Components/Popular.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Popular = () => {
id: 1,
name: 'StockIT',
developer: 'X',
uploadedOn: 'dd:mm:yy',
type: 'DevOps',
author: 'JaneSmith',
likes: 83,
image: Card1,
Expand All @@ -23,7 +23,7 @@ const Popular = () => {
id: 2,
name: 'TypingTest',
developer: 'X',
uploadedOn: 'dd:mm:yy',
type: 'Education',
author: 'SophiaWilson',
likes: 90,
image: Card2,
Expand All @@ -32,7 +32,7 @@ const Popular = () => {
id: 3,
name: 'Artisan',
developer: 'X',
uploadedOn: 'dd:mm:yy',
type: 'Art & Design',
author: 'DavidMartinez',
likes: 95,
image: Card3,
Expand All @@ -41,7 +41,7 @@ const Popular = () => {
id: 4,
name: 'BBlocks',
developer: 'X',
uploadedOn: 'dd:mm:yy',
type: 'Gaming',
author: 'RachelGreen',
likes: 110,
image: Card4,
Expand All @@ -50,7 +50,7 @@ const Popular = () => {
id: 5,
name: 'ZzShoes',
developer: 'X',
uploadedOn: 'dd:mm:yy',
type: 'Inventory Management',
author: 'ChrisMiller',
likes: 83,
image: Card5,
Expand All @@ -59,7 +59,7 @@ const Popular = () => {
id: 6,
name: 'SearchEngine',
developer: 'X',
uploadedOn: 'dd:mm:yy',
type: 'Search Engine Optimization',
author: 'LauraKing',
likes: 86,
image: Card6,
Expand All @@ -68,7 +68,7 @@ const Popular = () => {
id: 7,
name: 'AliImage',
developer: 'X',
uploadedOn: 'dd:mm:yy',
type: 'AI Image Processing',
author: 'OliviaTaylor',
likes: 90,
image: Card7,
Expand All @@ -77,131 +77,139 @@ const Popular = () => {

return (
<div className="popular-container">
<style>{`
.popular-container {
display: flex;
flex-wrap: wrap;
gap: 10px; /* Gap between cards */
margin-top: 5px;
}
.popular-card {
background-color: #2a2551;
border-radius: 10px;
padding: 20px;
width: calc(25% - 10px); /* Adjusted width for 4 cards per row, accounting for gap */
color: white;
text-align: left;
position: relative;
height: 330px;
transition: transform 0.3s ease-in-out;
}
.popular-card:hover {
transform: scale(1.05);
}
.popular-card img {
margin-left: -10px;
margin-top: -20px;
width: 260px;
height: 110px;
object-fit: cover;
}
.popular-card h3 {
margin: 10px;
font-size: 20px;
color: #fff;
}
.popular-card .likes {
position: absolute;
top: 125px;
right: 20px;
font-size: 16px;
color: white;
}
.popular-card .details {
display: flex;
justify-content: space-between;
margin-top: -12px;
padding: 0 10px;
}
.popular-card .developer {
font-size: 13px;
color: grey;
font-weight: bold;
}
.popular-card .uploadedOn {
font-size: 13px;
color: grey;
text-align: right;
margin-top: -48px;
font-weight: bold;
}
.popular-card .developer span {
display: block;
color: darkturquoise;
padding: 0 24px;
}
.popular-card .uploadedOn span {
display: block;
color: darkturquoise;
padding: 0 12px;
}
.popular-card .author {
font-size: 18px;
color: white;
margin: 10px 0;
padding: 0 12px;
display: flex;
align-items: center;
font-weight: bold;
}
.popular-card .author p {
margin: 0;
margin-right: 15px; /* Gap between "By:" and the name */
}
.popular-card .author span {
color: #00c6ff;
font-weight: bold;
}
.popular-card .actions {
display: flex;
justify-content: space-between;
margin-top: 28px;
}
.popular-card .read-more,
.popular-card .source-code {
background-color: #ff21bc;
color: white;
border: none;
padding: 0 12px;
border-radius: 20px;
cursor: pointer;
font-size: 10px;
font-weight: bold;
width: 45%;
text-align: center;
text-decoration: none;
height: 24px;
line-height: 24px;
}
.popular-card .source-code {
background-color: #00c6ff;
}
`}</style>

<style>{`
.popular-container {
display: flex;
flex-wrap: wrap;
gap: 10px; /* Gap between cards */
margin-top: 5px;
}
.popular-card {
background-color: #171238;
border-radius: 10px;
padding: 20px;
width: calc(25% - 10px); /* Adjusted width for 4 cards per row, accounting for gap */
color: white;
text-align: justify;
position: relative;
height: 330px;
transition: transform 0.3s ease-in-out;
border: 2px solid black; /* Added black border */
}
.popular-card:hover {
transform: scale(1.05);
}
.popular-card img {
margin-left: -10px;
margin-top: -20px;
width: 260px;
height: 110px;
object-fit: cover;
}
.popular-card h3 {
margin: 10px;
font-size: 20px;
color: #fff;
}
.popular-card .likes {
position: absolute;
top: 125px;
right: 20px;
font-size: 16px;
color: white;
}
.popular-card .details {
display: flex;
justify-content: space-between;
margin-top: -12px;
padding: 0 10px;
align-items: flex-start; /* Aligns the items at the start */
}
.popular-card .developer,
.popular-card .type {
flex: 1; /* Both sections take equal space */
font-size: 13px;
color: grey;
font-weight: bold;
}
.popular-card .developer span,
.popular-card .type span {
display: block;
color: darkturquoise;
padding: 0 12px;
}
.popular-card .type {
text-align: right;
margin-top: 0; /* Reset the margin */
max-width: 50%; /* Limits the width of the type section */
white-space: normal; /* Allows the text to wrap */
margin-top:-38px;
margin-left:105px;
}
.popular-card .developer {
padding-right: 10px; /* Adds a bit more space on the right */
}
.popular-card .type {
padding-left: 10px; /* Adds a bit more space on the left */
}
.popular-card .author {
font-size: 18px;
color: white;
margin: 10px 0;
padding: 0 12px;
display: flex;
align-items: center;
font-weight: bold;
}
.popular-card .author p {
margin: 0;
margin-right: 15px; /* Gap between "By:" and the name */
}
.popular-card .author span {
color: #00c6ff;
font-weight: bold;
}
.popular-card .actions {
display: flex;
justify-content: space-between;
margin-top: 28px;
}
.popular-card .read-more,
.popular-card .source-code {
background-color: #ff21bc;
color: white;
border: none;
padding: 0 12px;
border-radius: 20px;
cursor: pointer;
font-size: 10px;
font-weight: bold;
width: 45%;
text-align: center;
text-decoration: none;
height: 24px;
line-height: 24px;
}
.popular-card .source-code {
background-color: #00c6ff;
}
`}</style>

{popularItems.map((item) => (
<div className="popular-card" key={item.id}>
Expand All @@ -210,12 +218,12 @@ const Popular = () => {
<div className="likes">🤍 {item.likes}</div>
<div className="details">
<div className="developer">
Developer:
Developer
<span>{item.developer}</span>
</div>
<div className="uploadedOn">
Uploaded On:
<span>{item.uploadedOn}</span>
<div className="type">
Type of Project
<span>{item.type}</span>
</div>
</div>
<div className="author">
Expand Down
Loading

0 comments on commit c617b6d

Please sign in to comment.