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.

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

Updated styling of landing page #13

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

rohankewal
Copy link
Contributor

I made some changes to the landing page style. Please check it out in the home.css file and let me know if there are any changes to be made.

@arnavb
Copy link
Member

arnavb commented Sep 15, 2020

@rohankewal I was doing some messing around with the styles and I got the following:

image

If you're wondering, these are the CSS styles I used:

home.css
.body {
  background-color: white;
}

.slogan {
  color: #2b2d42;
  font-size: x-large;
  padding-bottom: 5px;
}

#main-logo {
  width: 220px;
  height: 220px;
}

#title {
  color: #d90429;
  font-size: 90px;
  letter-spacing: 0.3em;
}

#start-btn {
  background-color: #2b2d42;
  color: #edf2f4;
  font-size: 20px;
}

(#main-logo is an id I added to the image)

I still think though, that the landing page seems kind of bland. Maybe some particle effects in the background would be good? What do you think? (You don't have to use what I paste above, it was just me experimenting). Letter spacing is an interesting property.

Other interesting backgrounds include WebGL backgrounds.

@@ -25,6 +26,26 @@ export default function Home() {
</Link>
</div>
</div>
<Particles
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The particles look fine. Could you reduce their density and make them the background of the hero?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I can reduce the density, and I will figure out how to make it the background as well.

Copy link
Member

@arnavb arnavb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor change, but we are using functional components with hooks for anything requiring state.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants