Merge pull request #187 from Priya-49/card

UI of card
Avdhesh-Varshney · May 26, 2024 · 3e7cc7a · 3e7cc7a
2 parents 6f5f59f + 4e5a0b1
commit 3e7cc7a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 11 deletions.
diff --git a/src/components/Cards/Card.jsx b/src/components/Cards/Card.jsx
@@ -16,18 +16,18 @@ const Card = (props) => {
 
 	return (
 		<div className="card h-100" style={{ maxWidth: '400px', backgroundColor: '#12151e', color: '#fff', marginLeft: 'auto' }}>
-			<img src={imageURL} alt={title} className="card-img-top" style={{ objectFit: 'cover' }} />
+			<img src={imageURL} alt={title} className="card-img-top" style={{ objectFit: 'cover',height:'200px' }} />
 
 			<div className="card-body">
 				<h5 className="card-title">{title}</h5>
 
 				<p className="card-text">{description}</p>
 
-				<a href={sourceLink} className="btn btn-dark m-1" style={{ fontSize: '1.3rem' }}>
+				<a href={sourceLink} className="btn btn-dark m-1" style={{ fontSize: '1.3rem' }}title="View Code">
 					<FaGithub />
 				</a>
 
-				{(tech !== 'Vanilla-JS-Projects' && tech !== 'Front-end-Projects')? '' : <button className="btn btn-dark m-1" style={{ fontSize: '1.2rem', color: 'white' }} onClick={handleProjectClick}>
+				{(tech !== 'Vanilla-JS-Projects' && tech !== 'Front-end-Projects')? '' : <button className="btn btn-dark m-1" style={{ fontSize: '1.2rem', color: 'white' }} onClick={handleProjectClick} title="View Project">
 					<BiSolidZap />
 				</button>}
 			</div>

diff --git a/src/components/Cards/ProjectCards.jsx b/src/components/Cards/ProjectCards.jsx
@@ -12,13 +12,14 @@ const ProjectCards = (props) => {
     return description;
   };
 	return (
-		<div className='projectsCard row row-cols-1 row-cols-md-3 g-4' style={{ margin: '1rem auto', position: 'absolute', right: '0', top: '15%' }}>
-			{projectsData.map((data, index) => (
-				<div className="col" key={index}>
-					<Card key={index} tech={tech} tag={truncateDescription(data.tag, 1)} title={truncateDescription(data.title, 5)} description={truncateDescription(data.description, 20)} />
-				</div>
-			))}
-		</div>
+		<div className='projectsCard row row-cols-1 row-cols-md-3 g-4' style={{margin: '1rem auto', position: 'absolute', right: '0', top: '15%' }}>
+    {projectsData.map((data, index) => (
+        <div className="col" key={index} style={{ minWidth: '360px',minHeight:'300px',paddingTop:'20px',paddingBottom:'20px' }}> {/* Set a minimum width */}
+            <Card key={index} tech={tech} tag={truncateDescription(data.tag, 1)} title={truncateDescription(data.title, 5)} description={truncateDescription(data.description, 20)} />
+        </div>
+    ))}
+</div>
+
 	)
 }
 

diff --git a/src/components/Cards/card.css b/src/components/Cards/card.css
@@ -1,8 +1,36 @@
 .projectsCard {
     max-width: 1300px;
     transition: all 0.3s;
+
 }
 
+/* Card Styles */
+.card {
+    border-radius: 30px; 
+    border: 8px solid transparent; 
+    box-sizing: border-box; 
+    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; 
+    margin-bottom:3px;
+}
+
+/* Card Image */
+.card-img-top {
+    object-fit: cover;
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+}
+
+/* Card Body */
+.card-body {
+    padding: 20px;
+}
+
+.card:hover {
+    border-color: white; 
+    transform: scale(1.05);
+}
+
+
 @media (max-width: 1400px) {
     .projectsCard {
         max-width: 88%;
@@ -19,4 +47,4 @@
     .projectsCard {
         max-width: 65%;
     }
-}
+}