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.

Sign up for GitHub

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

AI Pg fixed #2267

Closed
wants to merge 1 commit into from
+31 −21
Closed

AI Pg fixed #2267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 7 additions & 15 deletions frontend/src/pages/AI.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const AI = () => {
title: "Introduction to AI",
date: "July 1, 2024",
summary:
"Learn the basics of AI, its importance.Gain insight into a topic and learn the fundamentals",
"Learn the basics of AI, its importance. Gain insight into a topic and learn the fundamentals.",
image:
"https://amta.sg/wp-content/uploads/2023/09/Introduction-to-Artificial-Intelligence-scaled.jpg",
},
Expand All @@ -21,7 +21,7 @@ const AI = () => {
title: "Top 10 AI tools",
date: "July 5, 2024",
summary:
"Use AI tools to help develop ideas and content, make more informed decisions, and speed up daily work tasks",
"Use AI tools to help develop ideas and content, make more informed decisions, and speed up daily work tasks.",
image:
"https://media.licdn.com/dms/image/D4D12AQE-62Ifk1Ky-Q/article-cover_image-shrink_600_2000/0/1693372628210?e=2147483647&v=beta&t=nvztC0_RuPSchP_tjjSTlVIh1q5kBuuBSV1eMydJU50",
},
Expand Down Expand Up @@ -53,21 +53,13 @@ const AI = () => {

return (
<div className="container">
<h1 className="title" style={{ marginTop: "120px" , color:'white'}}>AI Blog</h1>
<h1 className="title">AI Blog</h1>
<div className="grid-container">
{blogs.map((blog, index) => (
<div
key={index}
className="grid-item"
style={{ objectFit: "cover", maxWidth: "100%" }}
>
<img
src={blog.image}
alt={blog.title}
height={300}
width={"100%"}
className="blog-image"
/>
<div key={index} className="grid-item">
<div className="image-wrapper">
<img src={blog.image} alt={blog.title} className="blog-image" />
</div>
<h2 className="blog-title">{blog.title}</h2>
<p className="blog-date">{blog.date}</p>
<p className="blog-summary">{blog.summary}</p>
Expand Down
30 changes: 24 additions & 6 deletions frontend/src/style/AI.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
overflow-x: hidden;
/* Prevent horizontal scrolling */
}

.container {
max-width: 1200px;
max-width: 1400px;
margin: 0 auto;
height: auto;
padding: 20px;
}

Expand All @@ -17,11 +18,12 @@ body {
margin-bottom: 40px;
font-size: 2.5rem;
color: #333;
margin-top: 120px;
}

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
}

Expand All @@ -31,31 +33,47 @@ body {
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
}

.grid-item:hover {
transform: translateY(-10px);
}

.blog-image {
.image-wrapper {
width: 100%;
height: auto;
height: 200px;
/* Set a fixed height for image container */
overflow: hidden;
/* Hide overflow to maintain aspect ratio */
border-radius: 8px;
}

.blog-image {
width: 100%;
height: 100%;
object-fit: cover;
/* Maintain aspect ratio and cover the container */
}

.blog-title {
font-size: 1.5rem;
color: #007bff;
margin-top: 15px;
text-align: center;
}

.blog-date {
font-size: 0.9rem;
color: #888;
margin-bottom: 10px;
text-align: center;
}

.blog-summary {
font-size: 1rem;
color: #555;
}
text-align: center;
}
Loading