This is the source code of Elzero Dashboard By Osama Elzero. Making projects and templates help you improve your coding skills by building realistic projects.
Download the files from main branch, extract the files from the zip file, run index.html file with a live server because the code contains json data so it will NOT work on file protocol.
All web page screenshots are in design directory. Note: Those were the original design images, but I made a few changes and added some stuff.
- Design URL: Osama ELzero
- Source Code URL: Github
- Live Site URL: Github Pages
- Pug.js (HTML)
- SCSS (CSS)
- Vanilla Javascript + ES6 + JSON + AJAX
- Font Awesome Library
- Chart.js Library
- SweetAlert2 Library
- AOS Library
- Dodger Blue: rgb(0, 117, 255)
- Denim Blue: rgb(13, 105, 213)
- Vivid Orange: rgb(245, 158, 11)
- Green Cyan: rgb(34, 197, 94)
- Red Orange: rgb(244, 67, 54)
- Suva Gray: rgb(136, 136, 136)
- Whisper Gray: rgb(238, 238, 238)
- Gainsboro Gray: rgb(231, 229, 229)
- Chinese Silver: rgb(204, 204, 204)
- Pattens Blue: rgb(241, 245, 249)
- Russian Black: rgb(18, 19, 21)
- Russian Black: rgb(26, 26, 30)
- Charcoal Black: rgb(65, 65, 65)
- Charade Black: rgb(60, 64, 67)
- Pure Black: rgb(0, 0, 0)
- Pure White: rgb(255, 255, 255)
[
{
"instructor": "images/team-01.png",
"cover": "images/course-01.jpg",
"name": "Mastering Web Design",
"description": "Master The Art Of Web Designing And Mocking, Prototyping And Creating Web Design Architecture.",
"participants": "729",
"price": "165"
}
][
{
"name": "January Report.pdf",
"icon": "images/pdf.svg",
"uploader": "Arthur Morgan",
"date": "05/01/2021",
"size": "5.21 MB"
}
][
{
"name": "Arthur Morgan",
"job": "JavaScript Developer",
"image": "images/friend-01.jpg",
"friends": "342",
"projects": "74",
"articles": "821",
"phoneNumber": "+201209990000",
"email": "[email protected]",
"joinDate": "11/04/2020",
"vip": true
}
][
{
"image": "images/team-05.png",
"name": "Sister Calderón",
"time": "5 Days Ago",
"content": "Take a gamble that love exists, and do a loving act.",
"likes": "186.4k",
"comments": "92.5k"
}
]{
"avatar": {
"image": "images/avatar.png",
"nickName": "Rafay",
"level": "17",
"xpProgress": "70",
"rating": "550"
},
"general": {
"fullName": "Philopater Hany",
"gender": "Male",
"countryName": "Egypt",
"countryCode": "EG"
},
"personal": {
"email": "[email protected]",
"phoneNumber": "+201220009999",
"birthdate": "04/08/2005"
},
"job": {
"title": "Front-End Developer",
"progLang": "JavaScript",
"moneyEarned": "8723",
"experience": "+15"
},
"billing": {
"paymentMethod": "Paypal",
"plan": "Basic",
"subscription": "Monthly"
},
"skills": [
["HTML", "Pug.js"],
["CSS", "SCSS", "Bootstrap"],
["JavaScript", "TypeScript"],
["React.js", "Angular.js"],
["Gulp.js", "Jest"],
["Python", "Flask"],
["C++", "PHP"]
],
"social": {
"facebook": "philopater.hany.3",
"twitter": "PhilopaterHany4",
"linkedin": "phth",
"github": "PhilopaterHany"
}
}[
{
"name": "Social Media App",
"client": "SocialTech Innovations",
"description": "Create a cutting-edge social media app, it will include features like user profiles, news feeds, multimedia sharing, and real-time messaging.",
"startDate": "24/12/2022",
"team": ["images/team-01.png", "images/team-05.png"],
"keywords": ["Programming", "Design"],
"progress": "87",
"profit": "1500"
}
]- Youtube: Elzero Web School
- MDN: Fetch API
- Font Awesome Documentation
- Chart.js Documentation
- SweetAlert2 Documentation
- AOS Documentation
- Website - Portfolio Is Coming Out Soon!
- Twitter - @PhilopaterHany4
- Linkedin - @phth
- Facebook - Philopater Hany
- Discord - #8178