Responsive Elzero-Template-1

A simple, clean, and responsive template created using only CSS and HTML (no frameworks)

with a visually appealing design that looks great on both large screens 💻 and small mobile devices 📱.

View Demo · Report Bug · Request Feature

---

Desktop

Mobile (click to toggle)

Created with Lighthouse-Badger ✨

About The Project

This template is made using the best practices of modern CSS techniques such as fluid typography and space using clamp() and Grid Layout.

I have made an effort to replace every media query with modern CSS techniques. Please feel free to send a PR and suggest any changes to further improve the project based on best practices. 😊

I have created this project following the Elzero front-end course .

Built With

Resoursos

• ✨ Tools

  • websemantics : fluid typo/space generator
  • Utopia : another fluid typo/space generator
  • modern reset css

• 📑Articles

  • moderncss.dev
  • min(), max(), and clamp() CSS Functions - Ahmad Shadeed
  • min(), max(), and clamp() are CSS magic! CSS-Tricks
  • min(), max(), and clamp(): three logical CSS functions
  • Flexible layouts without media queries - LogRocket Blog

• 💻 Turtorials

  • Free Responsive Layouts Course - Kevin powell
  • Learn Responsive Design - Web.dev
  • elzero youtube channel
  • elszero web school

• 🎨 Design

  • Leon template psd

Related Projects & inspiration 🌠

• @PhilopaterHany
• @mouatezbenariba
• @HalemoGPA
• @Reem-Elamoudi

Roadmap

• Add the dark mode
• Improve Accessibility
• ...

See the open issues for a full list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

Special Thanks

To the kind-hearted Oussama Elzero ❤

i sincerely appreciate your effort and the time you have taken to provide us with such valuable information and advice through your excellent online courses.

thank you for generously sharing your knowledge and expertise with us for free !!

Support Him