├── img ├── bg.jpg └── user.jpg ├── debug.log ├── README.md ├── index.html └── css └── style.css /img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingWithElias/css-dashboard/HEAD/img/bg.jpg -------------------------------------------------------------------------------- /img/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingWithElias/css-dashboard/HEAD/img/user.jpg -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- 1 | [1126/111810.746:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Image Upload PHP and MYSQL 2 | 3 | Just a simple Image Upload PHP and MYSQL 4 | version: 1.0.0 5 | 6 | ## Full Tutorial 7 | 8 | [On YouTube](https://youtu.be/5v1DvTLzMrA) 9 | 10 | ## Authors 11 | 12 | [Elias Abdurrahman](https://github.com/codingWithElias) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dashboard 5 | 6 | 7 | 8 | 9 | 10 |
11 |

SIDE BAR 12 | 15 |

16 | 17 |
18 |
19 | 63 |
64 |

WELCOME

65 |

#CodingWithElias

66 |
67 |
68 | 69 | 70 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: arial, sans-serif; 6 | } 7 | .header { 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | padding: 15px 30px; 12 | background: #23242b; 13 | color: #fff; 14 | } 15 | .u-name { 16 | font-size: 20px; 17 | padding-left: 17px; 18 | } 19 | .u-name b { 20 | color: #127b8e; 21 | } 22 | .header i { 23 | font-size: 30px; 24 | cursor: pointer; 25 | color: #fff; 26 | } 27 | .header i:hover { 28 | color: #127b8e; 29 | } 30 | .user-p { 31 | text-align: center; 32 | padding-left: 10px; 33 | padding-top: 25px; 34 | } 35 | .user-p img { 36 | width: 100px; 37 | border-radius: 50%; 38 | } 39 | .user-p h4 { 40 | color: #ccc; 41 | padding: 5px 0; 42 | 43 | } 44 | .side-bar { 45 | width: 250px; 46 | background: #262931; 47 | min-height: 100vh; 48 | transition: 500ms width; 49 | } 50 | .body { 51 | display: flex; 52 | } 53 | .section-1 { 54 | width: 100%; 55 | background: url("../img/bg.jpg"); 56 | background-size: cover; 57 | background-position: center; 58 | display: flex; 59 | justify-content: center; 60 | align-items: center; 61 | flex-direction: column; 62 | } 63 | .section-1 h1 { 64 | color: #fff; 65 | font-size: 60px; 66 | } 67 | .section-1 p { 68 | color: #127b8e; 69 | font-size: 20px; 70 | background: #fff; 71 | padding: 7px; 72 | border-radius: 5px; 73 | } 74 | .side-bar ul { 75 | margin-top: 20px; 76 | list-style: none; 77 | } 78 | .side-bar ul li { 79 | font-size: 16px; 80 | padding: 15px 0px; 81 | padding-left: 20px; 82 | transition: 500ms background; 83 | white-space: nowrap; 84 | overflow: hidden; 85 | text-overflow: ellipsis; 86 | } 87 | .side-bar ul li:hover { 88 | background: #127b8e; 89 | } 90 | .side-bar ul li a { 91 | text-decoration: none; 92 | color: #eee; 93 | cursor: pointer; 94 | letter-spacing: 1px; 95 | } 96 | .side-bar ul li a i { 97 | display: inline-block; 98 | padding-right: 10px; 99 | font-size: 23px; 100 | } 101 | #navbtn { 102 | display: inline-block; 103 | margin-left: 70px; 104 | font-size: 20px; 105 | transition: 500ms color; 106 | } 107 | #checkbox { 108 | display: none; 109 | } 110 | #checkbox:checked ~ .body .side-bar { 111 | width: 60px; 112 | } 113 | #checkbox:checked ~ .body .side-bar .user-p{ 114 | visibility: hidden; 115 | } 116 | #checkbox:checked ~ .body .side-bar a span{ 117 | display: none; 118 | } --------------------------------------------------------------------------------