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

Jump to bottom

fixes #21

Merged
merged 4 commits into from
Sep 1, 2023
Merged

fixes #21

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
81a3da7
fixes
jakepears Aug 29, 2023
87c2af6
issue 16
jakepears Aug 29, 2023
0bc22b5
Merge branch 'warmachine028:main' into main
jakepears Sep 1, 2023
45bdf11
typo fixes, hover activity
jakepears Sep 1, 2023
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
3,151 changes: 3,077 additions & 74 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

21 changes: 13 additions & 8 deletions src/components/Button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const Button = ({ children, backgroundColor, borderColor, textColor, fullWidth,
console.log(
backgroundColor
? `${backgroundColor} ${borderColor} ${textColor} hover:text-${backgroundColor.slice(3)} hover:bg-${borderColor.slice(7)}`
: "bg-coral-red border-coral-red text-white hover:text-coral-red hover:border-coral-red hover:bg-white"
: "bg-coral-red border-coral-red text-white transition duration-[300ms] ease-in-out hover:text-coral-red hover:border-coral-red hover:bg-white"
)
return (
<button
Expand All @@ -11,16 +11,21 @@ const Button = ({ children, backgroundColor, borderColor, textColor, fullWidth,

${
backgroundColor
? `${backgroundColor} ${borderColor} ${textColor} hover:text-white hover:bg-slate-gray`
: "bg-coral-red border-coral-red text-white hover:text-coral-red hover:border-coral-red hover:bg-white"
? `${backgroundColor} ${borderColor} ${textColor} hover:text-white hover:bg-slate-gray transition duration-[300ms] ease-in-out`
: 'bg-coral-red border-coral-red text-white hover:text-coral-red hover:border-coral-red hover:bg-white transition duration-[300ms] ease-in-out'
}
${fullWidth && "w-full"}
`}
>
${fullWidth && 'w-full'}
`}>
{children}
{icon && <img src={icon} alt="arrow-right" className="ml-2 rounded-full w-5 h-5" />}
{icon && (
<img
src={icon}
alt='arrow-right'
className='ml-2 rounded-full w-5 h-5'
/>
)}
</button>
)
);
}

export default Button
2 changes: 1 addition & 1 deletion src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Navbar = () => {
<ul className="flex-1 flex justify-center items-center gap-16 max-lg:hidden">
{navLinks.map(item => (
<li key={item.label}>
<a href={item.href} className="font-montserrat leading-normal text-lg text-slate-gray">
<a href={item.href} className="font-montserrat leading-normal text-lg text-slate-gray hoverUnderline">
{item.label}
</a>
</li>
Expand Down
24 changes: 24 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,30 @@
.input {
@apply sm:flex-1 max-sm:w-full text-base leading-normal text-slate-gray pl-5 max-sm:p-5 outline-none sm:border-none border max-sm:border-slate-gray max-sm:rounded-full;
}

.hoverUnderline {
/* display: inline-block; */
position: relative;
}

.hoverUnderline::after {
@apply bg-slate-gray;
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.35s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

.hoverUnderline:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
}

@layer utilities {
Expand Down
10 changes: 5 additions & 5 deletions src/sections/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,20 @@ const Footer = () => {
</p>
<div className="flex items-center gap-5 mt-8">
{socialMedia.map(icon => (
<div key={icon.alt} className="flex w-12 h-12 justify-center items-center bg-white rounded-full">
<div key={icon.alt} className="flex w-12 h-12 justify-center items-center bg-white rounded-full hover:scale-110 transition duration-300 ease-in-out">
<img src={icon.src} alt={icon.alt} width={24} height={24} />
</div>
))}
</div>
</div>
<div className="flex flex-1 justify-between lg:gap-10 gap-20 flex-wrap">
<div className="flex flex-1 justify-between lg:gap-10 gap-20 flex-wrap relative">
{footerLinks.map(section => (
<div key={section.title}>
<h4 className="text-white font-montserrat text-2xl leading-normal font-bold mb-6">{section.title}</h4>
<ul>
<ul className="relative">
{section.links.map(link => (
<li key={link.name} className="mt-3 text-white-400 font-montserrat text-base leading-normal hover:text-slate-gray">
<a href="">{link.name}</a>
<li key={link.name} className="mt-3 text-white-400 font-montserrat text-base leading-normal">
<a className='hoverUnderline' href="">{link.name}</a>
</li>
))}
</ul>
Expand Down
2 changes: 1 addition & 1 deletion src/sections/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const Hero = () => {
</div>
<div className="relative flex flex-1 justify-center items-center xl: min-h-screen max-xl:py-40 bg-primary bg-hero bg-cover bg-center">
<img src={bigShoeImg} alt="shoe" width="610" height="500" className="object-contain relative z-10" />
<div className="flex sm:gap-6 gap-4 absolute -bottom-[5%] sm:left-[10%] max-sm:px-6">
<div className="flex sm:gap-6 gap-4 absolute -bottom-[5%] sm:left-[10%] max-sm:px-6 hover:scale-110 duration-300 transition ease-in-out">
{shoes.map(shoe => (
<div key={shoe.thumbnail}>
<ShoeCard img={shoe} change={shoe => setBigShoeImg(shoe)} largeImg={bigShoeImg} />
Expand Down
2 changes: 1 addition & 1 deletion src/sections/PopularProducts.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const PopularProducts = () => {
</h2>
<p className="lg:max-w-lg mt-2 font-montserrat text-slate-gray">Experience top-notch quality and style with our sought-after selectrions. Discover a world of comfort, and value</p>
</div>
<div className="mt-16 grid grid-cols-1 lg:grid-cols-4 md:grid-cols-3 sm-grid-cols-2 gap-14 sm:gap-4">
<div className="mt-16 grid grid-cols-1 lg:grid-cols-4 md:grid-cols-3 sm-grid-cols-2 gap-14 sm:gap-4 hover:scale-105 transition ease-in-out">
{products.map(product => (
<ProductCard key={product.name} {...product} />
))}
Expand Down
Loading