https://github.com/mouatezbenariba/template-html-css-04

Elzero Web School HTML/CSS Template 04 Challenge Solution : Elzero Dashboard
https://github.com/mouatezbenariba/template-html-css-04

css3 flexbox-grid frontend html5

Last synced: 10 days ago
JSON representation

Elzero Web School HTML/CSS Template 04 Challenge Solution : Elzero Dashboard

• Host: GitHub
• URL: https://github.com/mouatezbenariba/template-html-css-04
• Owner: mouatezbenariba
• Created: 2022-09-16T09:39:58.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-13T13:39:34.000Z (over 1 year ago)
• Last Synced: 2023-05-13T14:29:00.344Z (over 1 year ago)
• Topics: css3, flexbox-grid, frontend, html5
• Language: HTML
• Homepage: https://mouatezbenariba.github.io/template-html-css-04/
• Size: 6.66 MB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [Elzero Web School - HTML CSS Template 04](https://mouatezbenariba.github.io/template-html-css-04/)

### The challenge

- Convert the provided [Dashboard Design](https://elzero.org/html-css-practice-template-four/) into a website using only HTML and CSS and try to make a simple CSS Framework.

### Screenshots

![Elzero Dashboard | Dashboard](https://github.com/mouatezbenariba/template-html-css-04/blob/main/images/mouatezbenariba.github.io_template-html-css-04_(HighRes%20Screenshot).png)

![Elzero Dashboard | Settings](https://github.com/mouatezbenariba/template-html-css-04/blob/main/images/mouatezbenariba.github.io_template-html-css-04_html_settings.html(HighRes%20Screenshot).png)

![Elzero Dashboard | Profile](https://github.com/mouatezbenariba/template-html-css-04/blob/main/images/mouatezbenariba.github.io_template-html-css-04_html_profile.html(HighRes%20Screenshot).png)

![Elzero Dashboard | Projects](https://github.com/mouatezbenariba/template-html-css-04/blob/main/images/mouatezbenariba.github.io_template-html-css-04_html_projects.html(HighRes%20Screenshot).png)

![Elzero Dashboard | Courses](https://github.com/mouatezbenariba/template-html-css-04/blob/main/images/mouatezbenariba.github.io_template-html-css-04_html_courses.html(HighRes%20Screenshot).png)

![Elzero Dashboard | Friends](https://github.com/mouatezbenariba/template-html-css-04/blob/main/images/mouatezbenariba.github.io_template-html-css-04_html_friends.html(HighRes%20Screenshot)%20(1).png)

![Elzero Dashboard | Files](https://github.com/mouatezbenariba/template-html-css-04/blob/main/images/mouatezbenariba.github.io_template-html-css-04_html_files.html(HighRes%20Screenshot).png)

![Elzero Dashboard | Plans](https://github.com/mouatezbenariba/template-html-css-04/blob/main/images/mouatezbenariba.github.io_template-html-css-04_html_plans.html(HighRes%20Screenshot).png)

### Links

- Live Site URL: [Elzero Dashboard](https://mouatezbenariba.github.io/template-html-css-04/)

- [CSS Framework](https://github.com/mouatezbenariba/template-html-css-04/blob/main/css/framework-elements.css)

### Built with

- HTML5

- CSS3 custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

- CSS Animation / Transitions

### Used Libraries

- Font Awesome Free v5.15.3

### What I learned

- How to create multipage website.

- How to create a custom rectangular and rounded checkbox.

- How Bootstrap and Tailwind Basically work.

- I practiced CSS Animations - Flexbox and Grid.

## Cloned From Scratch By

- Linkedin - [Elmouatez Billah Benariba](https://www.linkedin.com/in/mouatezbenariba/)

- Twitter - [@mouatezbenariba](https://twitter.com/mouatezbenariba)

- Instagram - [@mouatez.benariba](https://www.instagram.com/mouatez.benariba/)

## Acknowledgments

- I would like to express my special thanks of gratitude to eng [Osama Mohamed](https://github.com/OsamaElzero).