Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navbar Problem #719

Merged
merged 3 commits into from
Aug 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Components/CardMain.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ const features = [
id: 9,
img: Card9,
pro: icon,
hearts: 55,
hearts: 110,
title: "BBlocks",
dev: "ChrisClark",
type: "Gaming",
Expand Down
217 changes: 131 additions & 86 deletions src/Components/Popular.css
Original file line number Diff line number Diff line change
@@ -1,87 +1,132 @@
.popular-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px;
}

.card {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 300px;
margin-bottom: 20px;
}

.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}

.card-content {
padding: 15px;
}

.card-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.profile-icon {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}

.card-title {
font-size: 1.2em;
font-weight: bold;
color: #000;
}

.card-body {
margin-bottom: 10px;
}

.card-dev,
.card-role,
.card-about,
.card-text {
margin-bottom: 5px;
font-size: 0.9em;
color: #333;
}

.card-footer {
display: flex;
justify-content: space-between;
margin-top: 10px;
}

.card-hearts {
font-size: 1.2em;
color: white;
}

.read-more,
.source-code {
background-color: #6052ff;
color: white;
border: none;
padding: 10px;
border-radius: 10px;
cursor: pointer;
font-size: 14px;
text-align: center;
flex: 1;
margin: 0 5px;
}

.source-code {
background-color: #00c6ff;
}

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;
}
91 changes: 58 additions & 33 deletions src/Components/Popular.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,71 +5,96 @@ import Card4 from "./projects/card9.png";
import Card5 from "./projects/card10.png";
import Card6 from "./projects/card11.png";
import Card7 from "./projects/card12.png";
import icon from './projects/profile.png';
import icon1 from './projects/profile1.png'
import Cardcontainer from "./Cardcontainer";

const Popularitems = [
{
id: 1,
title: "StockIT",
developer: "X",
uploadedOn: "dd:mm:yy",
dev: "JaneSmith",
likes: 83,
img: Card1,
img: Card1,
pro: icon,
hearts: 83,
title: "StockIT",
dev: "JaneSmith",
type: "Devops",
role: "Web Designer, UX Specialist",
about: "I'm a versatile professional skilled in web design and user experience, creating intuitive and visually appealing interfaces that enhance user interaction.",
text: "StockIT is a comprehensive platform designed to streamline inventory management and enhance supply chain efficiency for businesses of all sizes. It offers a user-friendly interface with robust features that cater to the diverse needs of retail, manufacturing, and e-commerce sectors. Key functionalities include real-time inventory tracking, automated restocking alerts, and detailed analytics for informed decision-making. StockIT integrates seamlessly with existing ERP and accounting systems, ensuring smooth data flow across various business operations. With advanced reporting tools, businesses can monitor stock levels, forecast demand, and minimize the risks of overstocking or stockouts. StockIT's cloud-based solution provides secure access from any device, enabling teams to manage inventory on the go. Dedicated customer support and regular software updates ensure that users have the latest tools to maintain optimal inventory levels and maximize profitability."
},
{
id: 2,
title: "TypingTest",
developer: "X",
uploadedOn: "dd:mm:yy",
dev: "SophiaWilson",
likes: 90,
img: Card2,
img: Card7,
pro: icon,
hearts: 90,
title: "TypingTest",
dev: "SophiaWilson",
type: "Education",
role: "Web Developer, SEO Specialist",
about: "I'm a proficient web developer and SEO specialist, dedicated to creating optimized, high-performance websites. I focus on both the technical and strategic aspects of web development to enhance visibility and user engagement.",
text: "TypingTest is a comprehensive platform designed to help users improve their typing speed and accuracy. This intuitive and user-friendly application offers a range of typing tests and practice exercises to suit different skill levels. With TypingTest, users can track their progress over time, identify areas for improvement, and achieve their typing goals. The platform features real-time feedback, detailed performance analytics, and personalized training plans to enhance the learning experience. TypingTest supports multiple languages and keyboard layouts, making it accessible to a global audience. Whether you're a beginner looking to learn touch typing or an experienced typist aiming to increase your speed, TypingTest provides the tools and resources to help you succeed."
},
{
id: 3,
title: "Artisan",
developer: "X",
uploadedOn: "dd:mm:yy",
dev: "DavidMartinez",
likes: 95,
img: Card3,
pro: icon1,
hearts: 95,
title: "Artisan",
dev: "DavidMartinez",
type: "Art & Design",
role: "Graphic Designer, Illustrator",
about: "I'm a creative professional with expertise in graphic design and illustration, dedicated to bringing visual concepts to life through innovative and artistic solutions.",
text: "Artisan is a vibrant online platform dedicated to showcasing and celebrating the work of artists and designers from around the world. This dynamic community allows creators to share their portfolios, connect with peers, and gain exposure for their work. Artisan offers a user-friendly interface where artists can upload their projects, receive feedback, and participate in collaborative opportunities. The platform features a variety of art forms, including digital art, traditional painting, sculpture, and more. With Artisan, users can explore curated galleries, stay updated on the latest trends in art and design, and discover new talent. Whether you're an artist looking to build your online presence or an art enthusiast seeking inspiration, Artisan is the perfect place to explore and engage with the creative community."
},
{
id: 4,
title: "BBlocks",
developer: "X",
uploadedOn: "dd:mm:yy",
dev: "RachelGreen",
likes: 110,
pro: icon,
img: Card4,
hearts: 110,
title: "BBlocks",
dev: "ChrisClark",
type: "Gaming",
role: "Game Developer, Animator",
about: "I'm a game developer and animator passionate about creating immersive and engaging gaming experiences. My expertise spans game design, development, and animation, bringing virtual worlds to life.",
text: "GameOn is an exciting platform for gamers, offering the latest news, reviews, and insights on popular games and gaming trends. With a vibrant community of gaming enthusiasts, GameOn provides a space for users to share their experiences, discuss strategies, and stay informed about upcoming releases. The platform features in-depth game reviews, detailed guides, and exclusive interviews with game developers. Whether you're a casual gamer or a hardcore enthusiast, GameOn is your go-to source for all things gaming. Stay updated with the latest updates, explore new games, and connect with fellow gamers on GameOn."

},
{
id: 5,
pro: icon1,
hearts: 83,
img: Card5,
title: "ZzShoes",
developer: "X",
uploadedOn: "dd:mm:yy",
dev: "ChrisMiller",
likes: 83,
img: Card5,
role: "Full Stack Developer, Cloud Specialist",
type: "Inventory Management",
about: "I'm a full stack developer and cloud specialist, skilled in both client-side and server-side development. My expertise includes deploying applications on cloud platforms and ensuring they are scalable and efficient.",
text: "ZzShoes is a comprehensive platform designed to streamline inventory management and enhance supply chain efficiency for businesses of all sizes. It offers a user-friendly interface with robust features that cater to the diverse needs of retail, manufacturing, and e-commerce sectors. Key functionalities include real-time inventory tracking, automated restocking alerts, and detailed analytics for informed decision-making. StockIT integrates seamlessly with existing ERP and accounting systems, ensuring smooth data flow across various business operations. With advanced reporting tools, businesses can monitor stock levels, forecast demand, and minimize the risks of overstocking or stockouts. StockIT's cloud-based solution provides secure access from any device, enabling teams to manage inventory on the go. Dedicated customer support and regular software updates ensure that users have the latest tools to maintain optimal inventory levels and maximize profitability.",

},
{
id: 6,
pro: icon,
hearts: 86,
img: Card6,
title: "SearchEngine",
developer: "X",
uploadedOn: "dd:mm:yy",
dev: "LauraKing",
likes: 86,
img: Card6,
role: "Web Developer, Content Strategist",
type: "Search Engine Optimization",
about: "I'm a web developer and content strategist, focused on building websites that are not only functional but also content-rich and user-friendly. I ensure that the website's structure and content align with user needs and business goals.",
text: "SearchEngine is a comprehensive platform designed to streamline inventory management and enhance supply chain efficiency for businesses of all sizes. It offers a user-friendly interface with robust features that cater to the diverse needs of retail, manufacturing, and e-commerce sectors. Key functionalities include real-time inventory tracking, automated restocking alerts, and detailed analytics for informed decision-making. StockIT integrates seamlessly with existing ERP and accounting systems, ensuring smooth data flow across various business operations. With advanced reporting tools, businesses can monitor stock levels, forecast demand, and minimize the risks of overstocking or stockouts. StockIT's cloud-based solution provides secure access from any device, enabling teams to manage inventory on the go. Dedicated customer support and regular software updates ensure that users have the latest tools to maintain optimal inventory levels and maximize profitability.",

},
{
id: 7,
title: "Aliimg",
title: "AIimage",
developer: "X",
uploadedOn: "dd:mm:yy",
type: "AI Image Processing",
dev: "OliviaTaylor",
likes: 90,
hearts: 90,
img: Card7,
about: "I'm a back-end developer and API integrator, specializing in creating secure and efficient server-side logic and integrating third-party APIs. My work ensures that web and mobile applications have reliable back-end support.",
text: "AIimage is a comprehensive platform designed to streamline inventory management and enhance supply chain efficiency for businesses of all sizes. It offers a user-friendly interface with robust features that cater to the diverse needs of retail, manufacturing, and e-commerce sectors. Key functionalities include real-time inventory tracking, automated restocking alerts, and detailed analytics for informed decision-making. StockIT integrates seamlessly with existing ERP and accounting systems, ensuring smooth data flow across various business operations. With advanced reporting tools, businesses can monitor stock levels, forecast demand, and minimize the risks of overstocking or stockouts. StockIT's cloud-based solution provides secure access from any device, enabling teams to manage inventory on the go. Dedicated customer support and regular software updates ensure that users have the latest tools to maintain optimal inventory levels and maximize profitability.",
},
];

Expand Down
Loading