https://github.com/all-my-frontend-mini-projects/loopstudios-landing-page_frontend_project
Explore the future of gaming with Loopstudios Landing Page! This webpage presents the optimal layout for the site depending on the user's device screen size, ensuring a seamless experience across different devices.
https://github.com/all-my-frontend-mini-projects/loopstudios-landing-page_frontend_project
css frontend-project html landing-page mern-stack nextjs nodejs reactjs vanilla-javascript
Last synced: about 1 year ago
JSON representation
Explore the future of gaming with Loopstudios Landing Page! This webpage presents the optimal layout for the site depending on the user's device screen size, ensuring a seamless experience across different devices.
- Host: GitHub
- URL: https://github.com/all-my-frontend-mini-projects/loopstudios-landing-page_frontend_project
- Owner: all-my-frontend-mini-projects
- License: mit
- Created: 2024-01-25T23:34:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-10T05:12:23.000Z (over 1 year ago)
- Last Synced: 2025-03-24T16:41:23.970Z (over 1 year ago)
- Topics: css, frontend-project, html, landing-page, mern-stack, nextjs, nodejs, reactjs, vanilla-javascript
- Language: CSS
- Homepage: https://loopstudios-landing-page-frontend.netlify.app/
- Size: 1.77 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Loopstudios Landing Page
## Welcome! 👋
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Explore the future of gaming with Loopstudios Landing Page!
This webpage presents:-
- The optimal layout for the site depending on the user's device screen size ensuring a seamless experience across different devices.
- Users can also interact with hover states for all elements on the page, enhancing engagement and providing a preview of interactive elements.
### Screenshot
### Links
- Solution URL: [GitHub Repository](https://github.com/SartHak-0-Sach/Loopstudios-landing-page_frontend_project)
- Live Site URL: [Live Site](https://loopstudios-landing-page-frontend.netlify.app/)
## My process
### Built with
- HTML5
- CSS3
- JavaScript
You will find all the required assets in the `/design` folder. The assets are already optimized.
There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts.
### What I learned
Through this project I got to learn about applications of a variety of concepts as I had read about them but never tried them in an real time application until now as shown below in given code snippet-
```css
.container1 header nav ul li{
list-style: none;
display: inline-block;
margin-right: 15px;
position: relative;
}
.container1 header nav ul li:after{
width: 0s;
height: 2px;
content: "";
position: absolute;
left: 50%;
bottom: -8px;
background: #fff;
transform: translateX(-50%);
transition: 1.5s;
}
.container1 header nav ul li:hover:after{
width: 40%;
}
```
### Continued development
- Outline areas for future development or learning
### Useful resources
- List helpful resources used in the project
## Author
- Sarthak Sachdev
- Portfolio Website: [itsmesarthak.netlify.app](https://itsmesarthak.netlify.app/)
- Twitter: [@sarthak_sach69](https://twitter.com/sarthak_sach69)
## Acknowledgments
- Mention any acknowledgments or credits for resources used in the project
## Got feedback for me?
I love receiving feedback! I'm always looking to improve my challenges and my platform. So if you have anything you'd like to mention, please email me at saarsaach[at]gmail[dot]com.
If you found this project helpful, consider sharing it with others to gather more valuable feedback!
**Happy coding!** 🚀💻