hero section made and styled it properly #33
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
adityai0
added
gssoc25
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hey team! I added a fresh hero section to CodeClip’s landing page to make it pop for coders and open-source fans. It’s simple, looks awesome, and works great. Here’s what I did:
-Added Hero Section: Built a new section in index.html with a catchy title ("Code. Challenge. Conquer."), a subtitle, a short description, and two buttons to start coding or view challenges.
-Styled with CSS: Used styles.css to make it look modern with:(Styled in styles.css ) Didn't make any other file
-A split layout (text on one side, code window on the other) using CSS Grid.
-Flexbox for lining up buttons nicely.
-A code window that tilts on hover for a fun effect.
-Floating background dots that move for a lively feel.
-Responsive Design: Made it work on phones and tablets by stacking the layout and tweaking font sizes.
-Tested It: Checked it on Chrome and Brave
This hero section makes CodeClip welcoming and exciting for new users. Please take a look and let me know what you think!
Preview :
Light Mode
Dark Mode
Video
Recording.2025-07-22.134020.mp4