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

Added spacing between hot topic cards and hover effects #766

Merged
merged 4 commits into from
Nov 5, 2024
Merged

Added spacing between hot topic cards and hover effects #766

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ee39d39
Added spacing between cards and hover effects
mehul-m-prajapati Nov 5, 2024
fb31202
remove big heading
mehul-m-prajapati Nov 5, 2024
cc1a908
modify bg color
mehul-m-prajapati Nov 5, 2024
45a91b3
reduce padding
mehul-m-prajapati Nov 5, 2024
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
31 changes: 12 additions & 19 deletions ml-nexus/src/components/Card.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,17 @@
import React from 'react'
// Card.js
import React from 'react';

function Card({data}) {
function Card({ data }) {
return (


<div className="lg:w-60 lg:h-72 group hover:dark:bg-[#3A5064] hover:text-[#B9D1DA] bg-white border border-gray-200 rounded-lg shadow dark:bg-[#324655] dark:border-gray-700 overflow-hidden">
<a href="#">
<img className="rounded-t-lg h-36 w-full object-cover group-hover:scale-105 ease-in duration-200" src={data.img} alt="" />
</a>
<div className="px-5 py-3">
<a href="#">
<h5 className="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">{data.title}</h5>
</a>
<p className="mb-3 font-normal text-sm text-gray-700 dark:text-gray-400">{data.desc.split(" ").splice(0,8).join(" ") + "..."}
<a className='text-[#61B3A0] group-hover:opacity-100 ease-in-out duration-200 opacity-0' href={data.ref}>Explore more</a>
</p>
<div className="w-full max-w-xs bg-gray shadow-lg rounded-lg overflow-hidden transform transition duration-300 ease-in-out hover:scale-105 hover:shadow-xl">
<img src={data.img} alt={data.title} className="w-full h-48 object-cover" />
<div className="p-2">
<h2 className="text-xl font-bold">{data.title}</h2>
<p className="text-sm mt-2">{data.desc}</p>
<a href={data.ref} target="_blank" rel="noopener noreferrer" className="text-green-500 hover:text-green-700 mt-4 block">Learn More</a>
</div>
</div>
</div>

)
);
}

export default Card
export default Card;
17 changes: 9 additions & 8 deletions ml-nexus/src/components/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import Btn from './Btn'
import Card from './Card'
import { Swiper, SwiperSlide } from 'swiper/react'
import React from 'react';
import Btn from './Btn';
import Card from './Card';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';
Expand Down Expand Up @@ -44,7 +44,7 @@ function Hero() {
<div className="h-full w-full flex justify-center flex-col">
<div className="flex mx-auto flex-col items-center">
<h1 className='text-2xl mt-16 text-center flex items-center'>
Welcome To <span className='dark:text-green-400 inline-block text-3xl lg:text-9xl'>ML Nexus</span>
Welcome To ML Nexus
</h1>
<p className='w-[90vw] lg:w-[65vw] text-center mt-4'>
This repository is dedicated to providing top-quality machine learning tools and resources. Track our milestones, see top programming languages in use, and monitor community progress—all in one place.
Expand All @@ -57,9 +57,10 @@ function Hero() {
<Btn value={{name: "Contribute", ref: "https://github.com/UppuluriKalyani/ML-Nexus/issues"}} git={true} />
</div>


<div className="hidden lg:flex justify-evenly">
{info.map((data, i) => <Card data={data} key={i} />)}
<div className="hidden lg:flex justify-evenly space-x-4">
{info.map((data, i) => (
<Card key={i} data={data} />
))}
</div>

<div className="block lg:hidden">
Expand Down
Loading