Goal
In this exercise, you will customize your own landing page using the beautiful Landy template. Landy template is built on top of Create React App.
Visit the Demo Website.
Exercise
- Replace hardcoded colors with reusable colors.
// colors.ts
export const colors = {
white: '#FFFFFF',
blue: '#70D6FF',
...
}
export const theme = {
primary: colors.blue,
...
};
// style.ts
import { theme } from '../../styles/colors';
export const Title = styled("h4")`
font-size: 22px;
text-transform: capitalize;
color: ${theme.primary};
@media screen and (max-width: 414px) {
padding: 1.5rem 0;
}
`;
- Reduce transition distance from react-awesome-reveal library using custom logic.
// Slide transition without the ability to change transition distance
import { Slide, Zoom } from "react-awesome-reveal";
...
return (
<Slide direction="left">
<Row> content </Row>
</Slide>
);
// Create custom transition using Reveal and keyframes
import { Reveal } from "react-awesome-reveal";
import { keyframes } from "@emotion/react";
const fade = keyframes`
from {
opacity: 0;
transform: translate3d(50px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
`;
...
return (
<Reveal keyframes={fade} duration={1500} triggerOnce={true}>
<Row> content </Row>
</Reveal>
);
- Use increments of 5 in position and size for consistency and predictability.
// before
export const Language = styled("h4")`
font-size: 22px;
text-transform: capitalize;
color: #18216d;
@media screen and (max-width: 414px) {
padding: 1.234rem 0;
}
`;
// after
export const Language = styled("h4")`
font-size: 20px;
text-transform: capitalize;
color: #18216d;
@media screen and (max-width: 415px) {
padding: 1rem 0;
}
`;
- Use
cursor: pointerto indicate clickable object.
export const MenuOutline = styled(MenuOutlined)<any>`
cursor: pointer;
font-size: 20px;
padding: 15px; // increase click area
`;
- Use solid shadow with the darken method from polished library.
export const StyledButton = styled("button")<any>`
...
box-shadow: `${darken(0.2, theme.button)} 6px 6px 0`;
&:hover {
...
box-shadow: ${theme.navActive} 6px 6px 0;
}
`;
- Replace images in any format. Download free images from unsplash.
7 Add scroll transition to images
- Add scroll transition using CSS from wesbos's tutorial.
- Deploy react app using github pages from this awesome tutorial.
Getting Started
Go to https://github.com/smolthing/landing-page-landy
before-landing folder
This folder contains the initial template and all the necessary files that you will work on.
after-landing folder
This folder contains the completed solution, which you can refer to if needed.
Running the app
1 Go into before-landing folder and run the app. The app runs on http://localhost:3000. Run the commands in the terminal:
cd before-landing
npm start
2 Make the necessary changes as per the exercise tasks.
3 Compare your work with the files in the after folder if you need any guidance or reference.
4 Deploy your website by running the command npm run deploy.
Top comments (1)
What if you would try using Polipo (polipo.io/) for that?