Repository: ElzeroWebSchool/HTML_And_CSS_Template_Four Branch: main Commit: 754ead36ccee Files: 11 Total size: 146.2 KB Directory structure: gitextract_rwbptysc/ ├── README.md ├── courses.html ├── css/ │ ├── framework.css │ └── master.css ├── files.html ├── friends.html ├── index.html ├── plans.html ├── profile.html ├── projects.html └── settings.html ================================================ FILE CONTENTS ================================================ ================================================ FILE: README.md ================================================ # HTML And CSS Template Four Course Playlist https://www.youtube.com/watch?v=4OGWPn-Q__I&list=PLDoPjvoNmBAyGaRGzPVZCkYx5L7Mo9Tbh ### Demo https://elzerowebschool.github.io/HTML_And_CSS_Template_Four/ ================================================ FILE: courses.html ================================================ Courses

Courses

Mastering Web Design

Master The Art Of Web Designing And Mocking, Prototyping And Creating Web Design Architecture

Course Info 950 165

Data Structure And Algorithms

Master The Art Of Data Strcuture And Famous Algorithms Like Sorting, Dividing And Conquering

Course Info 1150 210

Responsive Web Design

Mastering Responsive Web Design And Media Queries And Know Everything About Breakpoints

Course Info 650 90

Mastering Python

Mastering Python To Prepare For Data Science And AI And Automating Things in Your Life

Course Info 950 250

PHP Examples

PHP Tutorials And Examples And Practice On Web Application And Connecting With Databases

Course Info 850 150

Data Structure And Algorithms

Master The Art Of Data Strcuture And Famous Algorithms Like Sorting, Dividing And Conquering

Course Info 1150 210

Responsive Web Design

Mastering Responsive Web Design And Media Queries And Know Everything About Breakpoints

Course Info 650 90

Mastering Web Design

Master The Art Of Web Designing And Mocking, Prototyping And Creating Web Design Archticture

Course Info 850 145

PHP Examples

PHP Tutorials And Examples And Practice On Web Application And Connecting With Databases

Course Info 850 150

Mastering Python

Mastering Python To Prepare For Data Science And AI And Automating Things in Your Life

Course Info 950 250

================================================ FILE: css/framework.css ================================================ :root { --blue-color: #0075ff; --blue-alt-color: #0d69d5; --orange-color: #f59e0b; --green-color: #22c55e; --red-color: #f44336; --grey-color: #888; } /* Start Box */ .d-flex { display: flex; } .f-wrap { flex-wrap: wrap; } .align-center { align-items: center; } .space-between { justify-content: space-between; } .d-grid { display: grid; } .gap-20 { gap: 20px; } .d-block { display: block; } @media (max-width: 767px) { .block-mobile { display: block; } .hide-mobile { display: none; } } /* End Box */ /* Start Padding + Margin */ .p-10 { padding: 10px; } .p-15 { padding: 15px; } .p-20 { padding: 20px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pl-15 { padding-left: 15px; } .m-0 { margin: 0; } .m-15 { margin: 15px; } .m-20 { margin: 20px; } .mt-0 { margin-top: 0; } .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } /* End Padding + Margin */ /* Start Color */ .c-black { color: black; } .c-white { color: white; } .c-grey { color: var(--grey-color); } .c-red { color: var(--red-color); } .c-green { color: var(--green-color); } .c-blue { color: var(--blue-color); } .c-orange { color: var(--orange-color); } .bg-red { background-color: var(--red-color); } .bg-green { background-color: var(--green-color); } .bg-blue { background-color: var(--blue-color); } .bg-orange { background-color: var(--orange-color); } .bg-white { background-color: white; } .bg-eee { background-color: #eee; } /* End Color */ /* Start Position */ .p-relative { position: relative; } .p-absolute { position: absolute; } /* End Position */ /* Start Font */ .txt-c { text-align: center; } .fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; } .fs-15 { font-size: 15px; } .fs-25 { font-size: 25px; } .fw-bold { font-weight: bold; } @media (max-width: 767px) { .txt-c-mobile { text-align: center; } } /* End Font */ /* Start Border */ .rad-6 { border-radius: 6px; } .rad-10 { border-radius: 10px; } .rad-half { border-radius: 50%; } .b-none { border: none; } .border-ccc { border: 1px solid #ccc; } .border-eee { border: 1px solid #eee; } /* End Border */ /* Start Width + Height */ .w-full { width: 100%; } .w-100 { width: 100px; } .w-fit { width: fit-content; } .h-full { height: 100%; } .h-100 { height: 100px; } /* End Width + Height */ /* Start Components */ .center-flex { display: flex; align-items: center; justify-content: center; } .between-flex { display: flex; align-items: center; justify-content: space-between; } .btn-shape { padding: 4px 10px; border-radius: 6px; } /* End Components */ ================================================ FILE: css/master.css ================================================ :root { --blue-color: #0075ff; --blue-alt-color: #0d69d5; --orange-color: #f59e0b; --green-color: #22c55e; --red-color: #f44336; --grey-color: #888; } * { box-sizing: border-box; } body { font-family: "Open Sans", sans-serif; margin: 0; } *:focus { outline: none; } a { text-decoration: none; } ul { list-style: none; padding: 0; } ::-webkit-scrollbar { width: 15px; } ::-webkit-scrollbar-track { background-color: white; } ::-webkit-scrollbar-thumb { background-color: var(--blue-color); } ::-webkit-scrollbar-thumb:hover { background-color: var(--blue-alt-color); } .page { background-color: #f1f5f9; min-height: 100vh; } /* Start Sidebar */ .sidebar { width: 250px; box-shadow: 0 0 10px #ddd; } .sidebar > h3 { margin-bottom: 50px; } .sidebar > h3::before, .sidebar > h3::after { content: ""; background-color: black; transform: translateX(-50%); position: absolute; left: 50%; } .sidebar > h3::before { width: 80px; height: 2px; bottom: -20px; } .sidebar > h3::after { bottom: -29px; width: 12px; height: 12px; border-radius: 50%; border: 4px solid white; } .sidebar ul li a { transition: 0.3s; margin-bottom: 5px; } .sidebar ul li a:hover, .sidebar ul li a.active { background-color: #f6f6f6; } .sidebar ul li a span { font-size: 14px; margin-left: 10px; } @media (max-width: 767px) { .sidebar { width: 58px; padding: 10px; } .sidebar > h3 { font-size: 13px; margin-bottom: 15px; } .sidebar > h3::before, .sidebar > h3::after { display: none; } .sidebar ul li a span { display: none; } } /* End Sidebar */ /* Start Content */ .content { overflow: hidden; } .head .search::before { font-family: var(--fa-style-family-classic); content: "\f002"; font-weight: 900; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--grey-color); } .head .search input { border: 1px solid #ccc; border-radius: 10px; margin-left: 5px; padding-left: 30px; width: 160px; transition: width 0.3s; } .head .search input:focus { width: 200px; } .head .search input:focus::placeholder { opacity: 0; } .head .icons .notification::before { content: ""; position: absolute; width: 10px; height: 10px; background-color: var(--red-color); border-radius: 50%; right: -5px; top: -5px; } .head .icons img { width: 32px; height: 32px; margin-left: 15px; } .page h1 { margin: 20px 20px 40px; } .page h1::before, .page h1::after { content: ""; height: 3px; position: absolute; bottom: -10px; left: 0; } .page h1::before { background-color: white; width: 120px; } .page h1::after { background-color: black; width: 40px; } .wrapper { grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); margin-left: 20px; margin-right: 20px; margin-bottom: 20px; } @media (max-width: 767px) { .wrapper { grid-template-columns: minmax(200px, 1fr); margin-left: 10px; margin-right: 10px; gap: 10px; } } /* End Content */ /* Start Welcome Widget */ .welcome { overflow: hidden; } .welcome .intro img { width: 200px; margin-bottom: -10px; } .welcome .avatar { width: 64px; height: 64px; border: 2px solid white; border-radius: 50%; padding: 2px; box-shadow: 0 0 5px #ddd; margin-left: 20px; margin-top: -32px; } .welcome .body { border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .welcome .body > div { flex: 1; } .welcome .visit { margin: 0 15px 15px auto; transition: 0.3s; } .welcome .visit:hover { background-color: var(--blue-alt-color); } @media (max-width: 767px) { .welcome .intro { padding-bottom: 30px; } .welcome .avatar { margin-left: 0; } .welcome .body > div:not(:last-child) { margin-bottom: 20px; } } /* End Welcome Widget */ /* Start Quick Draft Widget */ .quick-draft textarea { resize: none; min-height: 180px; } .quick-draft .save { margin-left: auto; transition: 0.3s; cursor: pointer; } .quick-draft .save:hover { background-color: var(--blue-alt-color); } /* End Quick Draft Widget */ /* Start Targets */ .targets .target-row .icon { width: 80px; height: 80px; margin-right: 15px; } .targets .details { flex: 1; } .targets .details .progress { height: 4px; } .targets .details .progress > span { position: absolute; left: 0; top: 0; height: 100%; } .targets .details .progress > span span { position: absolute; bottom: 16px; right: -16px; color: white; padding: 2px 5px; border-radius: 6px; font-size: 13px; } .targets .details .progress > span span::after { content: ""; border-color: transparent; border-width: 5px; border-style: solid; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); } .targets .details .progress > .blue span::after { border-top-color: var(--blue-color); } .targets .details .progress > .orange span::after { border-top-color: var(--orange-color); } .targets .details .progress > .green span::after { border-top-color: var(--green-color); } .blue .icon, .blue .progress { background-color: rgb(0 117 255 / 20%); } .orange .icon, .orange .progress { background-color: rgb(245 158 11 / 20%); } .green .icon, .green .progress { background-color: rgb(34 197 94 / 20%); } /* End Targets */ /* Start Tickets */ .tickets .box { border: 1px solid #ccc; width: calc(50% - 10px); } @media (max-width: 767px) { .tickets .box { width: 100%; } } /* End Tickets */ /* Start Latest News */ .latest-news .news-row:not(:last-of-type) { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .latest-news .news-row img { width: 100px; border-radius: 6px; margin-right: 15px; } .latest-news .info { flex-grow: 1; } .latest-news .info h3 { margin: 0 0 6px; font-size: 16px; } @media (max-width: 767px) { .latest-news .news-row { display: block; } .latest-news .news-row .label { margin: 10px auto; width: fit-content; } } /* End Latest News */ /* Start Tasks */ .tasks .task-row:not(:last-of-type) { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; } .tasks .info { flex-grow: 1; } .tasks .done { opacity: 0.3; } .tasks .done h3, .tasks .done p { text-decoration: line-through; } .tasks .delete { cursor: pointer; transition: 0.3s; } .tasks .delete:hover { color: var(--red-color); } /* End Tasks */ /* Start Latest Uploads */ .latest-uploads ul li:not(:last-child) { border-bottom: 1px solid #eee; } .latest-uploads ul li img { width: 40px; height: 40px; } /* End Latest Uploads */ /* Start Last Project */ .last-project ul::before { content: ""; position: absolute; left: 11px; width: 2px; height: 100%; background-color: var(--blue-color); } .last-project ul li::before { content: ""; width: 20px; height: 20px; display: block; border-radius: 50%; background-color: white; border: 2px solid white; outline: 2px solid var(--blue-color); margin-right: 15px; z-index: 1; } .last-project ul li.done::before { background-color: var(--blue-color); } .last-project ul li.current::before { animation: change-color 0.8s infinite alternate; } .last-project .launch-icon { position: absolute; width: 160px; right: 0; bottom: 0; opacity: 0.1; } /* End Last Project */ /* Start Reminders */ .reminders ul li .key { width: 15px; height: 15px; } .reminders ul li > .blue { border-left: 2px solid var(--blue-color); } .reminders ul li > .green { border-left: 2px solid var(--green-color); } .reminders ul li > .orange { border-left: 2px solid var(--orange-color); } .reminders ul li > .red { border-left: 2px solid var(--red-color); } /* End Reminders */ /* Start Latest Post */ .latest-post .avatar { width: 48px; height: 48px; } .latest-post .post-content { text-transform: capitalize; line-height: 1.8; border-top: 1px solid #eee; border-bottom: 1px solid #eee; min-height: 140px; } /* End Latest Post */ /* Start Social Media */ .social-media .box { padding-left: 70px; } .social-media .box i { position: absolute; left: 0; top: 0; width: 52px; transition: 0.3s; } .social-media .box i:hover { transform: rotate(5deg); } .social-media .twitter { background-color: rgb(29 161 242 / 20%); color: #1da1f2; } .social-media .twitter i, .social-media .twitter a { background-color: #1da1f2; } .social-media .facebook { background-color: rgb(24 119 242 / 20%); color: #1da1f2; } .social-media .facebook i, .social-media .facebook a { background-color: #1877f2; } .social-media .youtube { background-color: rgb(255 0 0 / 20%); color: #ff0000; } .social-media .youtube i, .social-media .youtube a { background-color: #ff0000; } .social-media .linkedin { background-color: rgb(0 119 181 / 20%); color: #0077b5; } .social-media .linkedin i, .social-media .linkedin a { background-color: #0077b5; } /* End Social Media */ /* Start Projects Table */ .projects .responsive-table { overflow-x: auto; } .projects table { min-width: 1000px; border-spacing: 0; } .projects thead td { background-color: #eee; font-weight: bold; } .projects table td { padding: 15px; } .projects tbody td { border-bottom: 1px solid #eee; border-left: 1px solid #eee; transition: 0.3s; } .projects table tbody tr td:last-child { border-right: 1px solid #eee; } .projects tbody tr:hover td { background-color: #faf7f7; } .projects table img { width: 32px; height: 32px; border-radius: 50%; padding: 2px; background-color: white; } .projects table img:not(:first-child) { margin-left: -20px; } .projects table .label { font-size: 13px; } /* End Projects Table */ /* Start Settings */ .settings-page { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); } @media (max-width: 767px) { .settings-page { grid-template-columns: minmax(100px, 1fr); margin-left: 10px; margin-right: 10px; gap: 10px; } } .settings-page .close-message { border: 1px solid #ccc; resize: none; min-height: 150px; } .settings-page .email { display: inline-flex; width: calc(100% - 80px); } .settings-page .sec-box { padding-bottom: 15px; } .settings-page .sec-box:not(:last-of-type) { border-bottom: 1px solid #eee; } .settings-page .sec-box .button { transition: 0.3s; } .settings-page .sec-box .button:hover { background-color: var(--blue-alt-color); } .settings-page .social-boxes i { width: 40px; height: 40px; background-color: #f6f6f6; border: 1px solid #ddd; border-right: none; border-radius: 6px 0 0 6px; transition: 0.3s; } .settings-page .social-boxes input { height: 40px; background-color: #f6f6f6; border: 1px solid #ddd; padding-left: 10px; border-radius: 0 6px 6px 0; } .settings-page .social-boxes > div:focus-within i { color: black; } .widgets-control .control input[type="checkbox"] { -webkit-appearance: none; appearance: none; } .widgets-control .control label { padding-left: 30px; cursor: pointer; position: relative; } .widgets-control .control label::before, .widgets-control .control label::after { position: absolute; left: 0; top: 50%; margin-top: -9px; border-radius: 4px; } .widgets-control .control label::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--grey-color); } .widgets-control .control label:hover::before { border-color: var(--blue-alt-color); } .widgets-control .control label::after { font-family: var(--fa-style-family-classic); content: "\f00c"; font-weight: 900; background-color: var(--blue-color); color: white; font-size: 12px; width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; transform: scale(0) rotate(360deg); transition: 0.3s; } .widgets-control .control input[type="checkbox"]:checked + label::after { transform: scale(1); } .backup-control input[type="radio"] { -webkit-appearance: none; appearance: none; } .backup-control .date label { padding-left: 30px; cursor: pointer; position: relative; } .backup-control .date label::before { content: ""; position: absolute; top: 50%; left: 0; margin-top: -11px; width: 18px; height: 18px; border: 2px solid var(--grey-color); border-radius: 50%; } .backup-control .date label::after { content: ""; position: absolute; left: 5px; top: 5px; width: 12px; height: 12px; background: var(--blue-color); border-radius: 50%; transition: 0.3s; transform: scale(0); } .backup-control .date input[type="radio"]:checked + label::before { border-color: var(--blue-color); } .backup-control .date input[type="radio"]:checked + label::after { transform: scale(1); } .backup-control .servers { border-top: 1px solid #eee; padding-top: 20px; } @media (max-width: 767px) { .backup-control .servers { flex-wrap: wrap; } } .backup-control .servers .server { border: 2px solid #eee; position: relative; } .backup-control .servers .server label { cursor: pointer; } .backup-control .servers input[type="radio"]:checked + .server { border-color: var(--blue-color); color: var(--blue-color); } .toggle-checkbox { -webkit-appearance: none; appearance: none; display: none; } .toggle-switch { background-color: #ccc; width: 78px; height: 32px; border-radius: 16px; position: relative; transition: 0.3s; cursor: pointer; } .toggle-switch::before { font-family: var(--fa-style-family-classic); content: "\f00d"; font-weight: 900; background-color: white; width: 24px; height: 24px; position: absolute; border-radius: 50%; top: 4px; left: 4px; display: flex; justify-content: center; align-items: center; color: #aaa; transition: 0.3s; } .toggle-checkbox:checked + .toggle-switch { background-color: var(--blue-color); } .toggle-checkbox:checked + .toggle-switch::before { content: "\f00c"; left: 50px; color: var(--blue-color); } .settings-page :disabled { cursor: no-drop; background-color: #f0f4f8; color: #bbb; } /* End Settings */ /* Start Profile Page */ @media (max-width: 767px) { .profile-page .overview { flex-direction: column; } } .profile-page .avatar-box { width: 300px; } @media (min-width: 768px) { .profile-page .avatar-box { border-right: 1px solid #eee; } } .profile-page .avatar-box > img { width: 120px; height: 120px; } .profile-page .avatar-box .level { height: 6px; overflow: hidden; margin: auto; width: 70%; } .profile-page .avatar-box .level span { position: absolute; left: 0; top: 0; height: 100%; background-color: var(--blue-color); border-radius: 6px; } .profile-page .info-box .box { flex-wrap: wrap; border-bottom: 1px solid #eee; transition: 0.3s; } .profile-page .info-box .box:hover { background-color: #f9f9f9; } .profile-page .info-box .box > div { min-width: 250px; padding: 10px 0 0; } .profile-page .info-box h4 { font-weight: normal; } /* Start Training Code */ .profile-page .info-box .toggle-switch { height: 20px; } @media (max-width: 767px) { .profile-page .info-box .toggle-switch { margin: auto; } } .profile-page .info-box .toggle-switch::before { width: 12px; height: 12px; font-size: 8px; } .profile-page .info-box .toggle-checkbox:checked + .toggle-switch::before { left: 62px; } /* End Training Code */ @media (max-width: 767px) { .profile-page .other-data { flex-direction: column; } } .profile-page .skills-card { flex-grow: 1; } .profile-page .skills-card ul li { padding: 15px 0; } .profile-page .skills-card ul li:not(:last-child) { border-bottom: 1px solid #eee; } .profile-page .skills-card ul li span { display: inline-flex; padding: 4px 10px; background-color: #eee; border-radius: 6px; font-size: 14px; } .profile-page .skills-card ul li span:not(:last-child) { margin-right: 5px; } .profile-page .activities { flex-grow: 2; } .profile-page .activity:not(:last-of-type) { border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px; } .profile-page .activity img { width: 64px; height: 64px; margin-right: 10px; } @media (min-width: 768px) { .profile-page .activity .date { margin-left: auto; text-align: right; } } @media (max-width: 767px) { .profile-page .activity { flex-direction: column; } .profile-page .activity img { margin-right: 0; margin-bottom: 15px; } .profile-page .activity .date { margin-top: 15px; } } /* End Profile Page */ /* Start Projects Page */ .projects-page { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); } @media (max-width: 767px) { .projects-page { grid-template-columns: minmax(200px, 1fr); margin-left: 10px; margin-right: 10px; gap: 10px; } } .projects-page .project .date { position: absolute; right: 10px; top: 10px; } .projects-page .project h4 { font-weight: normal; } .projects-page .project .team { position: relative; min-height: 80px; } .projects-page .project .team a { position: absolute; left: 0; bottom: 0; } .projects-page .project .team a:nth-child(2) { left: 25px; } .projects-page .project .team a:nth-child(3) { left: 50px; } .projects-page .project .team a:nth-child(4) { left: 75px; } .projects-page .project .team a:nth-child(5) { left: 100px; } .projects-page .project .team a:hover { z-index: 1000; } .projects-page .project .team img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid white; } .projects-page .project .do { justify-content: flex-end; border-top: 1px solid #eee; padding-top: 15px; margin-top: 15px; } @media (max-width: 767px) { .projects-page .project .do { flex-direction: column; } } .projects-page .project .do span { padding: 3px 8px; margin-left: 5px; width: fit-content; } @media (max-width: 767px) { .projects-page .project .do span:not(:last-child) { margin-bottom: 15px; } } .projects-page .project .info { border-top: 1px solid #eee; margin-top: 15px; padding-top: 15px; } @media (max-width: 767px) { .projects-page .project .info { flex-direction: column; } } .projects-page .project .prog { height: 8px; width: 260px; position: relative; border-radius: 6px; } @media (max-width: 767px) { .projects-page .project .prog { margin-bottom: 15px; } } .projects-page .project .prog span { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; } /* End Projects Page */ /* Start Courses Page */ .courses-page { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } @media (max-width: 767px) { .courses-page { grid-template-columns: minmax(200px, 1fr); margin-left: 10px; margin-right: 10px; gap: 10px; } } .courses-page .course { overflow: hidden; } .courses-page .course .cover { max-width: 100%; } .courses-page .course .instructor { position: absolute; width: 64px; height: 64px; border-radius: 50%; top: 20px; left: 20px; border: 2px solid white; } .courses-page .course .description { line-height: 1.6; } .courses-page .course .info { border-top: 1px solid #eee; font-size: 13px; } .courses-page .course .info .title { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 13px; } /* End Courses Page */ /* Start Friends Page */ .friends-page { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } @media (max-width: 767px) { .friends-page { grid-template-columns: minmax(200px, 1fr); margin-left: 10px; margin-right: 10px; gap: 10px; } } .friends-page .contact { position: absolute; left: 10px; top: 10px; } .friends-page .contact i { background-color: #eee; padding: 10px; border-radius: 50%; color: #666; font-size: 13px; cursor: pointer; transition: 0.3s; } .friends-page .contact i:hover { background-color: var(--blue-color); color: white; } .friends-page .friend .icons { border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-top: 15px; margin-bottom: 15px; padding-top: 15px; padding-bottom: 15px; } .friends-page .friend .icons i { margin-right: 5px; } .friends-page .friend .icons .vip { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 40px; opacity: 0.2; } /* End Friends Page */ /* Start Files Page */ .files-page { flex-direction: row-reverse; align-items: flex-start; } @media (max-width: 767px) { .files-page { flex-direction: column; align-items: normal; } } .files-page .files-stats { min-width: 260px; } .files-page .files-stats .icon { width: 40px; height: 40px; margin-right: 10px; } .files-page .files-stats .size { margin-left: auto; } .files-page .files-stats .blue { background-color: rgb(0 117 255 / 20%); } .files-page .files-stats .green { background-color: rgb(34 197 94 / 20%); } .files-page .files-stats .red { background-color: rgb(244 67 54 / 20%); } .files-page .files-stats .orange { background-color: rgb(245 158 11 / 20%); } .files-page .files-stats .upload { margin: 15px auto 0; padding: 10px 15px; transition: 0.3s; } .files-page .files-stats .upload:hover { background-color: var(--blue-alt-color); } .files-page .files-stats .upload:hover i { animation: go-up 0.8s infinite; } .files-page .files-content { flex: 1; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .files-page .files-content img { width: 64px; height: 64px; transition: 0.3s; } .files-page .files-content .file:hover img { transform: rotate(5deg); } .files-page .files-content .info { border-top: 1px solid #eee; } /* End Files Page */ /* Start Plans Page */ .plans-page { grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); } @media (max-width: 767px) { .plans-page { grid-template-columns: minmax(250px, 1fr); margin-left: 10px; margin-right: 10px; gap: 10px; } } .plans-page .plan .top { border: 3px solid white; outline: 3px solid transparent; } .plans-page .plan.green .top { outline-color: var(--green-color); } .plans-page .plan.blue .top { outline-color: var(--blue-color); } .plans-page .plan.orange .top { outline-color: var(--orange-color); } .plans-page .plan .price { position: relative; font-size: 40px; width: fit-content; margin: auto; } .plans-page .plan .price span { position: absolute; left: -20px; top: 0; font-size: 25px; } .plans-page .plan ul li { padding: 15px 0; display: flex; align-items: center; font-size: 15px; border-bottom: 1px solid #eee; } .plans-page .plan ul li .yes { color: var(--green-color); } .plans-page .plan ul li i:not(.yes, .help) { color: var(--red-color); } .plans-page .plan ul li i:first-child { font-size: 18px; margin-right: 5px; } .plans-page .plan ul li .help { color: var(--grey-color); margin-left: auto; cursor: pointer; } /* End Plans Page */ /* Start Animation */ @keyframes change-color { from { background-color: var(--blue-color); } to { background-color: white; } } @keyframes go-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* End Animation */ ================================================ FILE: files.html ================================================ Files

Files

Files Statistics

PDF Files 130

6.5GB

Images 115 Files

3.5GB

Word Files 110 Files

3.2GB

CSV Files 99 Files

2.9GB

Upload

my-file.pdf

Elzero

20/06/2020 5.5MB

my-file.avi

Admin

16/5/2021 12.5MB

my-file.eps

Uploader

16/5/2021 2.7MB

my-file.psd

Osama

16/5/2021 15.1MB

my-file.dll

Coder

16/5/2021 2.2MB

my-file.png

Designer

16/5/2021 1.1MB

my-file.dll

Coder

16/5/2021 2.2MB

my-file.png

Designer

16/5/2021 1.1MB

my-file.psd

Osama

16/5/2021 15.1MB

my-file.pdf

Elzero

16/5/2021 5.5MB

my-file.avi

Admin

16/5/2021 12.5MB

my-file.eps

Uploader

16/5/2021 2.7MB

my-file.pdf

Elzero

16/5/2021 5.5MB

my-file.avi

Admin

16/5/2021 12.5MB

my-file.eps

Uploader

16/5/2021 2.7MB

my-file.psd

Osama

16/5/2021 15.1MB

my-file.dll

Coder

16/5/2021 2.2MB

my-file.png

Designer

16/5/2021 1.1MB

my-file.dll

Coder

16/5/2021 2.2MB

my-file.png

Designer

16/5/2021 1.1MB

my-file.psd

Osama

16/5/2021 15.1MB

my-file.pdf

Elzero

16/5/2021 5.5MB

my-file.avi

Admin

16/5/2021 12.5MB

my-file.eps

Uploader

16/5/2021 2.7MB

================================================ FILE: friends.html ================================================ Friends

Friends

Ahmed Nasser

JavaScript Developer

99 Friend

15 Projects

25 Articles

VIP

Joined 02/10/2021

Profile Remove

Omar Fathy

Cloud Developer

30 Friends

11 Projects

12 Articles

Joined 02/08/2020

Profile Remove

Omar Ahmed

Mobile Developer

80 Friends

20 Projects

18 Articles

Joined 02/06/2020

Profile Remove

Shady Nabil

Back-End Developer

70 Friends

30 Projects

18 Articles

Joined 28/06/2020

Profile Remove

Mohamed Ibrahim

Algorithm Developer

80 Friends

30 Projects

18 Articles

Joined 28/08/2020

Profile Remove

Amr Hendawy

Back-End Developer

70 Friends

30 Projects

18 Articles

Joined 28/06/2020

Profile Remove

Mahmoud Adel

Cloud Developer

30 Friends

11 Projects

12 Articles

Joined 02/08/2020

Profile Remove

Ahmed Abuzaid

Content Creator

80 Friends

30 Projects

18 Articles

Vip

Joined 28/08/2020

Profile Remove

Gareeb Elshiekh

JavaScript Developer

90 Friends

15 Projects

25 Articles

Vip

Joined 02/10/2020

Profile Remove

Hamza

Front-End Developer

80 Friends

20 Projects

18 Articles

Joined 02/06/2020

Profile Remove

================================================ FILE: index.html ================================================ Dashboard

Dashboard

Welcome

Elzero

Osama Elzero Developer

80 Projects

$8500 Earned

Profile

Quick Draft

Write A Draft For Your Ideas

Yearly Targets

Targets Of The Year

Money $20.000

80%

Projects 24

55%

Team 12

75%

Tickets Statistics

Everything About Support Tickets

2500 Total

500 Pending

1900 Closed

100 Deleted

Latest News

Created SASS Section

New SASS Examples & Tutorials

3 Days Ago

Changed The Design

A Brand New Website Design

5 Days Ago

Team Increased

3 Developers Joined The Team

7 Days Ago

Added Payment Gateway

Many New Payment Gateways Added

9 Days Ago

Latest Tasks

Record One New Video

Record Python Create Exe Project

Write Article

Write Low Level vs High Level Languages

Finish Project

Publish Academy Programming Project

Attend The Meeting

Attend The Project Business Analysis Meeting

Finish Lesson

Finish Teaching Flex Box

Top Search Items

Keyword

Search Count

Programming 220

JavaScript 180

PHP 160

Code 145

Design 110

Logic 95

Latest Uploads

my-file.pdf Elzero

2.9mb
My-Video-File.avi Admin

4.9mb
My-Psd-File.pdf Osama

4.5mb
My-Zip-File.pdf User

8.9mb
My-DLL-File.pdf Admin

4.9mb
My-Eps-File.pdf Designer

8.9mb

Last Project Progress

Got The Project
Started The Project
The Project About To Finish
Test The Project
Finish The Project & Get Money

Reminders

Check My Tasks List
28/09/2022 - 12:00am
Check My Projects
26/10/2022 - 12:00am
Call All My Clients
05/11/2022 - 12:00am
Finish The Development Workshop
20/12/2022 - 12:00am

Latest Post

Osama Elzero About 3 Hours Ago

You can fool all of the people some of the time, and some of the people all of the time, but you can't fool all of the people all of the time.

1.8K

500

Projects

Name	Finish Date	Client	Price	Team	Status
Ministry Wikipedia	10 May 2022	Ministry	$5300		Pending
Elzero Shop	12 Oct 2021	Elzero Company	$1500		In Progress
Bouba App	05 Sep 2021	Bouba	$800		Completed
Mahmoud Website	22 May 2021	Mahmoud	$600		Completed
Sayed Website	24 May 2021	Sayed	$300		Rejected
Arena Application	01 Mar 2021	Arena Company	$2600		Completed

================================================ FILE: plans.html ================================================ Plans

Plans

Free

$0.00

Access All Text Lessons
Access All Videos Lessons
Appear On Leaderboard
Browse Content Without Ads
Access All Assignments
Get Daily Prizes
Earn Certificate
1 GB Space For Hosting Files
Access Badge System

Join

Basic

$7.99

Access All Text Lessons
Access All Videos Lessons
Appear On Leaderboard
Browse Content Without Ads
Access All Assignments
Get Daily Prizes
Earn Certificate
1 GB Space For Hosting Files
Access Badge System

Join

Premium

$19.99

Access All Text Lessons
Access All Videos Lessons
Appear On Leaderboard
Browse Content Without Ads
Access All Assignments
Get Daily Prizes
Earn Certificate
1 GB Space For Hosting Files
Access Badge System

This Is Your Current Plan

================================================ FILE: profile.html ================================================ Profile

Profile

Osama Elzero

Level 20

550 Rating

General Information

Full Name Osama Mohamed

Gender: Male

Country: Egypt

Personal Information

Email: o@nn.sa

Phone: 019123456789

Date Of Birth: 25/10/1982

Job Information

Title: Full Stack Developer

Programming Language: Python

Years Of Experience: 15+

Billing Information

Payment Method: Paypal

Email: email@website.com

Subscription: Monthly

My Skills

Complete Skills List

HTMLPugjsHAML
CSSSASSStylus
JavaScriptTypeScript
VuejsReactjs
JestJasmine
PHPLaravel
PythonDjango

Latest Activities

Latest Activities Done By The User

Store Bought The Mastering Python Course

18:10 Yesterday

Academy Got The PHP Certificate

16:05 Yesterday

Badges Unlocked The 10 Skills Badge

18:05 Yesterday

Store Bought The Typescript Course

12:05 Yesterday

================================================ FILE: projects.html ================================================ Projects

Projects

15/10/2021

Elzero Dashboard

Elzero Dashboard Project Design And Programming And Hosting

Programming Design Hosting Marketing

2500

15/6/2022

Academy Portal

Academy Portal Project Design And Programming

Programming Design

1800

15/6/2022

Chatting Application

Chatting Application Project Design

Design

950

15/6/2022

Ahmed Dashboard

Ahmed Dashboard Project Design And Programming And Hosting

Programming Design Hosting Marketing

1700

15/6/2022

Ahmed Portal

Ahmed Portal Project Design And Programming

Programming Design

850

15/6/2022

Mohamed Application

Mohamed Application Project Design

Design

950

15/6/2022

Mohamed Dashboard

Mohamed Dashboard Project Design And Programming And Hosting

Programming Design Hosting Marketing

1950

15/6/2022

Mohamed Portal

Mohamed Portal Project Design And Programming

Programming Design

1650

15/6/2022

Ahmed Application

Ahmed Application Project Design

Design

950

================================================ FILE: settings.html ================================================ Settings

Elzero

Courses

Mastering Web Design

Data Structure And Algorithms

Responsive Web Design

Mastering Python

PHP Examples

Data Structure And Algorithms

Responsive Web Design

Mastering Web Design

PHP Examples

Mastering Python

Elzero

Files

Files Statistics

Elzero

Friends

Ahmed Nasser

Omar Fathy

Omar Ahmed

Shady Nabil

Mohamed Ibrahim

Amr Hendawy

Mahmoud Adel

Ahmed Abuzaid

Gareeb Elshiekh

Hamza

Elzero

Dashboard

Welcome

Quick Draft

Yearly Targets

Tickets Statistics

Latest News

Created SASS Section

Changed The Design

Team Increased

Added Payment Gateway

Latest Tasks

Record One New Video

Write Article

Finish Project

Attend The Meeting

Finish Lesson

Top Search Items

Latest Uploads

Last Project Progress

Reminders

Latest Post

Social Media Stats

Projects

Elzero

Plans

Free

Basic

Premium

Elzero

Profile

Osama Elzero

General Information

Personal Information

Job Information

Billing Information

My Skills

Latest Activities

Elzero

Projects

Elzero Dashboard

Academy Portal

Chatting Application

Ahmed Dashboard

Ahmed Portal

Mohamed Application

Mohamed Dashboard

Mohamed Portal

Ahmed Application

Elzero

Settings

Site Control

General Info