├── .github
    └── workflows
    │   └── jekyll-docker.yml
├── .gitignore
├── LICENSE
├── README.md
├── css
    └── styles.css
├── images
    ├── large.png
    └── vscode.png
├── index.html
└── js
    └── scripts.js


/.github/workflows/jekyll-docker.yml:
--------------------------------------------------------------------------------
 1 | name: Jekyll site CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [master]
 6 |     
 7 |   pull_request:
 8 |     branches: [master]
 9 | 
10 | jobs:
11 |   build:
12 | 
13 |     runs-on: ubuntu-latest
14 | 
15 |     steps:
16 |     - name: Checkout source Git branch
17 |       uses: actions/checkout@v4
18 |         
19 |     - name: Build the site in the jekyll/builder container
20 |       run: |
21 |         docker run \
22 |         -v ${{ github.workspace }}:/srv/jekyll -v ${{ github.workspace }}/_site:/srv/jekyll/_site \
23 |         jekyll/builder:latest /bin/bash -c "chmod -R 777 /srv/jekyll && jekyll build --future"
24 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Bob's Programming Academy
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Responsive Social Media Dashboard
 2 | 
 3 | This is a responsive social media dashboard built using **HTML 5**, **CSS 3**, and **JavaScript**.
 4 | 
 5 | ![plot](https://github.com/BobsProgrammingAcademy/social-media-dashboard/blob/master/images/large.png?raw=true)
 6 | 
 7 | ## Table of Contents 
 8 | - [Prerequisites](#prerequisites)
 9 | - [Running the application](#run-the-application)
10 | - [Copyright and License](#copyright-and-license)
11 | 
12 | ## Prerequisites
13 | 
14 | Install the following prerequisites:
15 | 
16 | * [Visual Studio Code](https://code.visualstudio.com/download) with the **Live Server** extension.
17 | 
18 | [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) allows us to launch a local development server that enables a live reload of our project.
19 | 
20 | 
21 | ## Run the application
22 | 
23 | To run the application, start the **Live Server** by clicking **Go Live** in the bottom right corner of the status bar in Visual Studio Code. This action will load the website in your default web browser. 
24 | 
25 | ![plot](https://github.com/BobsProgrammingAcademy/social-media-dashboard/blob/master/images/vscode.png?raw=true)
26 | 
27 | ## View the application
28 | 
29 | Once the **Live Server** is up and running, go to http://127.0.0.1:5500/index.html to view the application.
30 | 
31 | ## Copyright and License
32 | 
33 | Copyright © 2023 Bob's Programming Academy. Code released under the MIT license.
34 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 |   background-color: rgb(247, 246, 252);
  6 |   color: rgb(70, 71, 81);
  7 |   font-family: 'Open Sans', sans-serif;
  8 | }
  9 | 
 10 | .material-icons-outlined {
 11 |   vertical-align: middle;
 12 |   line-height: 1px;
 13 |   font-size: 30px;
 14 | }
 15 | 
 16 | .text-secondary {
 17 |   color: rgb(70, 71, 81);
 18 | }
 19 | 
 20 | .text-blue {
 21 |   color: rgb(29, 38, 154);
 22 | }
 23 | 
 24 | .background-blue {
 25 |   background-color: rgb(29, 38, 154);
 26 | }
 27 | 
 28 | .text-red {
 29 |   color: rgb(213, 0, 0);
 30 | }
 31 | 
 32 | .background-red {
 33 |   background-color: rgb(213, 0, 0);
 34 | }
 35 | 
 36 | .text-green {
 37 |   color: rgb(46, 125, 50);
 38 | }
 39 | 
 40 | .background-green {
 41 |   background-color: rgb(46, 125, 50);
 42 | }
 43 | 
 44 | .text-orange {
 45 |   color: rgb(255, 111, 0);
 46 | }
 47 | 
 48 | .background-orange {
 49 |   background-color: rgb(255, 111, 0);
 50 | }
 51 | 
 52 | .grid-container {
 53 |   display: grid;
 54 |   grid-template-columns: 260px 1fr 1fr 1fr;
 55 |   grid-template-rows: 0.2fr 3fr;
 56 |   grid-template-areas:
 57 |     'sidebar header header header'
 58 |     'sidebar main main main';
 59 |   height: 100vh;
 60 | }
 61 | 
 62 | /* ---------- HEADER ---------- */
 63 | 
 64 | .header {
 65 |   grid-area: header;
 66 |   height: 70px;
 67 |   display: flex;
 68 |   align-items: center;
 69 |   justify-content: space-between;
 70 |   padding: 0 30px 0 30px;
 71 |   box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2);
 72 | }
 73 | 
 74 | .menu-icon {
 75 |   display: none;
 76 | }
 77 | 
 78 | /* ---------- SIDEBAR ---------- */
 79 | 
 80 | #sidebar {
 81 |   grid-area: sidebar;
 82 |   height: 100%;
 83 |   background-color: rgb(29, 38, 154);
 84 |   color: rgb(255, 255, 255);
 85 |   overflow-y: auto;
 86 |   transition: all 0.5s;
 87 |   -webkit-transition: all 0.5s;
 88 | }
 89 | 
 90 | .sidebar-title {
 91 |   display: flex;
 92 |   justify-content: space-between;
 93 |   align-items: center;
 94 |   padding: 20px 20px 20px 20px;
 95 |   margin-bottom: 30px;
 96 | }
 97 | 
 98 | .sidebar-title > span {
 99 |   display: none;
100 | }
101 | 
102 | .sidebar-brand {
103 |   margin-top: 15px;
104 |   font-size: 30px;
105 |   font-weight: 700;
106 | }
107 | 
108 | .sidebar-brand > .material-icons-outlined {
109 |   font-size: 50px;
110 | }
111 | 
112 | .sidebar-list {
113 |   padding: 0;
114 |   margin-top: 15px;
115 |   list-style-type: none;
116 | }
117 | 
118 | .sidebar-list-item {
119 |   padding: 20px 20px 20px 20px;
120 |   font-size: 18px;
121 | }
122 | 
123 | .sidebar-list-item:hover {
124 |   background-color: rgba(255, 255, 255, 0.2);
125 |   cursor: pointer;
126 | }
127 | 
128 | .sidebar-list-item > a {
129 |   text-decoration: none;
130 |   color: rgb(180, 184, 244);
131 | }
132 | 
133 | .sidebar-responsive {
134 |   display: inline !important;
135 |   position: absolute;
136 | }
137 | 
138 | /* ---------- MAIN ---------- */
139 | 
140 | .main-container {
141 |   grid-area: main;
142 |   overflow-y: auto;
143 |   padding: 20px 20px;
144 | }
145 | 
146 | .main-title {
147 |   display: flex;
148 |   justify-content: space-between;
149 | }
150 | 
151 | .main-cards {
152 |   display: grid;
153 |   grid-template-columns: 1fr 1fr 1fr 1fr;
154 |   gap: 20px;
155 |   margin: 20px 0;
156 | }
157 | 
158 | .card {
159 |   display: flex;
160 |   flex-direction: column;
161 |   justify-content: space-around;
162 |   padding: 25px;
163 |   color: rgb(255, 255, 255);
164 |   border-radius: 30px;
165 |   box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2);
166 | }
167 | 
168 | .card:first-child {
169 |   background-color: rgb(213, 0, 0);
170 | }
171 | 
172 | .card:nth-child(2) {
173 |   background-color: rgb(46, 125, 50);
174 | }
175 | 
176 | .card:nth-child(3) {
177 |   background-color: rgb(255, 111, 0);
178 | }
179 | 
180 | .card:nth-child(4) {
181 |   background-color: rgb(29, 38, 154);
182 | }
183 | 
184 | .card-inner {
185 |   display: flex;
186 |   align-items: center;
187 |   justify-content: space-between;
188 | }
189 | 
190 | .card-inner > span {
191 |   font-size: 50px;
192 | }
193 | 
194 | .products {
195 |   display: grid;
196 |   grid-template-columns: 1fr 1fr;
197 |   gap: 20px;
198 | }
199 | 
200 | .product-card {
201 |   height: 350px;
202 |   background-color: rgb(255, 255, 255);
203 |   padding: 25px;
204 |   border-radius: 30px;
205 |   box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2);
206 | }
207 | 
208 | .product-description {
209 |   padding-top: 50px;
210 | }
211 | 
212 | .product-button {
213 |   background-color: rgb(29, 38, 154);
214 |   color: rgb(255, 255, 255);
215 |   padding: 20px;
216 |   border-radius: 30px;
217 | }
218 | 
219 | .product-button > .material-icons-outlined {
220 |   font-size: 50px;
221 | }
222 | 
223 | .social-media {
224 |   height: 350px;
225 |   padding: 10px;
226 | }
227 | 
228 | .product {
229 |   display: grid;
230 |   grid-template-columns: 1fr 1fr;
231 |   gap: 20px;
232 | }
233 | 
234 | .product-icon {
235 |   color: rgb(255, 255, 255);
236 |   width: 48px;
237 |   height: 48px;
238 |   display: flex;
239 |   align-items: center;
240 |   justify-content: center;
241 |   border-radius: 20px;
242 | }
243 | 
244 | .product-icon > .bi {
245 |   font-size: 25px;
246 | }
247 | 
248 | /* ---------- MEDIA QUERIES ---------- */
249 | 
250 | /* Medium <= 992px */
251 | @media screen and (max-width: 992px) {
252 |   .grid-container {
253 |     grid-template-columns: 1fr;
254 |     grid-template-rows: 0.2fr 3fr;
255 |     grid-template-areas:
256 |       'header'
257 |       'main';
258 |   }
259 | 
260 |   #sidebar {
261 |     display: none;
262 |   }
263 | 
264 |   .menu-icon {
265 |     display: inline;
266 |   }
267 | 
268 |   .sidebar-title > span {
269 |     display: inline;
270 |   }
271 | }
272 | 
273 | /* Small <= 768px */
274 | @media screen and (max-width: 768px) {
275 |   .main-cards {
276 |     grid-template-columns: 1fr;
277 |     gap: 10px;
278 |     margin-bottom: 0;
279 |   }
280 | 
281 |   .products {
282 |     grid-template-columns: 1fr;
283 |     margin-top: 30px;
284 |   }
285 | }
286 | 
287 | /* Extra Small <= 576px */
288 | @media screen and (max-width: 576px) {
289 |   .header-left {
290 |     display: none;
291 |   }
292 | }
293 | 


--------------------------------------------------------------------------------
/images/large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BobsProgrammingAcademy/social-media-dashboard/1bb672aefa38eadfbd8c0d3767027d934836a7f2/images/large.png


--------------------------------------------------------------------------------
/images/vscode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BobsProgrammingAcademy/social-media-dashboard/1bb672aefa38eadfbd8c0d3767027d934836a7f2/images/vscode.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6 |     <title>Admin Dashboard</title>
  7 | 
  8 |     <!-- Open Sans Font -->
  9 |     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 10 | 
 11 |     <!-- Material Icons -->
 12 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
 13 | 
 14 |     <!-- Bootstrap Icons -->
 15 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
 16 | 
 17 |     <!-- Custom CSS -->
 18 |     <link rel="stylesheet" href="css/styles.css">
 19 |   </head>
 20 |   <body>
 21 |     <div class="grid-container">
 22 | 
 23 |       <!-- Header -->
 24 |       <header class="header">
 25 |         <div class="menu-icon" onclick="openSidebar()">
 26 |           <span class="material-icons-outlined">menu</span>
 27 |         </div>
 28 |         <div class="header-left">
 29 |           <span class="material-icons-outlined">search</span>
 30 |         </div>
 31 |         <div class="header-right">
 32 |           <span class="material-icons-outlined">notifications</span>
 33 |           <span class="material-icons-outlined">email</span>
 34 |           <span class="material-icons-outlined">account_circle</span>
 35 |         </div>
 36 |       </header>
 37 |       <!-- End Header -->
 38 | 
 39 |       <!-- Sidebar -->
 40 |       <aside id="sidebar">
 41 |         <div class="sidebar-title">
 42 |           <div class="sidebar-brand">
 43 |             <span class="material-icons-outlined">mood</span> LOGO
 44 |           </div>
 45 |           <span class="material-icons-outlined" onclick="closeSidebar()">close</span>
 46 |         </div>
 47 | 
 48 |         <ul class="sidebar-list">
 49 |           <li class="sidebar-list-item">
 50 |             <a href="#">
 51 |               <span class="material-icons-outlined">dashboard</span> Dashboard
 52 |             </a>
 53 |           </li>
 54 |           <li class="sidebar-list-item">
 55 |             <a href="#">
 56 |               <span class="material-icons-outlined">leaderboard</span> Leaderboard
 57 |             </a>
 58 |           </li>
 59 |           <li class="sidebar-list-item">
 60 |             <a href="#">
 61 |               <span class="material-icons-outlined">forum</span> Forum
 62 |             </a>
 63 |           </li>
 64 |           <li class="sidebar-list-item">
 65 |             <a href="#">
 66 |               <span class="material-icons-outlined">phone</span> Support
 67 |             </a>
 68 |           </li>
 69 |           <li class="sidebar-list-item">
 70 |             <a href="#">
 71 |               <span class="material-icons-outlined">email</span> Messages
 72 |             </a>
 73 |           </li>
 74 |           <li class="sidebar-list-item">
 75 |             <a href="#">
 76 |               <span class="material-icons-outlined">poll</span> Reports
 77 |             </a>
 78 |           </li>
 79 |           <li class="sidebar-list-item">
 80 |             <a href="#">
 81 |               <span class="material-icons-outlined">settings</span> Settings
 82 |             </a>
 83 |           </li>
 84 |         </ul>
 85 |       </aside>
 86 |       <!-- End Sidebar -->
 87 | 
 88 |       <!-- Main -->
 89 |       <main class="main-container">
 90 |         <div class="main-title">
 91 |           <h2>DASHBOARD</h2>
 92 |         </div>
 93 | 
 94 |         <div class="main-cards">
 95 | 
 96 |           <div class="card">
 97 |             <div class="card-inner">
 98 |               <h2>LIKES</h2>
 99 |               <span class="material-icons-outlined">thumb_up</span>
100 |             </div>
101 |             <h1>4,021</h1>
102 |           </div>
103 | 
104 |           <div class="card">
105 |             <div class="card-inner">
106 |               <h2>SUBSCRIBERS</h2>
107 |               <span class="material-icons-outlined">subscriptions</span>
108 |             </div>
109 |             <h1>8,731</h1>
110 |           </div>
111 | 
112 |           <div class="card">
113 |             <div class="card-inner">
114 |               <h2>FOLLOWERS</h2>
115 |               <span class="material-icons-outlined">groups</span>
116 |             </div>
117 |             <h1>3,841</h1>
118 |           </div>
119 | 
120 |           <div class="card">
121 |             <div class="card-inner">
122 |               <h2>MESSAGES</h2>
123 |               <span class="material-icons-outlined">forum</span>
124 |             </div>
125 |             <h1>1,962</h1>
126 |           </div>
127 | 
128 |         </div>
129 | 
130 |         <div class="products">
131 | 
132 |           <div class="product-card">
133 |             <h2 class="product-description">Latest Updates</h2>
134 |             <p class="text-secondary">
135 |               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet facilisis nulla, consectetur pulvinar diam. Aliquam tempus vel quam.
136 |             </p>
137 |             <button type="button" class="product-button">
138 |               <span class="material-icons-outlined">add</span>
139 |             </button>
140 |           </div>
141 | 
142 |           <div class="social-media">
143 |             <div class="product">
144 | 
145 |               <div>
146 |                 <div class="product-icon background-red">
147 |                   <i class="bi bi-twitter"></i>
148 |                 </div>
149 |                 <h1 class="text-red">+274</h1>
150 |                 <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
151 |               </div>
152 |   
153 |               <div>
154 |                 <div class="product-icon background-green">
155 |                   <i class="bi bi-instagram"></i>
156 |                 </div>
157 |                 <h1 class="text-green">+352</h1>
158 |                 <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
159 |               </div>
160 |   
161 |               <div>
162 |                 <div class="product-icon background-orange">
163 |                   <i class="bi bi-facebook"></i>
164 |                 </div>
165 |                 <h1 class="text-orange">-126</h1>
166 |                 <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
167 |               </div>
168 |   
169 |               <div>
170 |                 <div class="product-icon background-blue">
171 |                   <i class="bi bi-linkedin"></i>
172 |                 </div>
173 |                 <h1 class="text-blue">+102</h1>
174 |                 <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
175 |               </div>
176 |               
177 |             </div>
178 |           </div>
179 | 
180 |         </div>
181 |       </main>
182 |       <!-- End Main -->
183 | 
184 |     </div>
185 | 
186 |     <!-- Scripts -->
187 |     <!-- Custom JS -->
188 |     <script src="js/scripts.js"></script>
189 |   </body>
190 | </html>


--------------------------------------------------------------------------------
/js/scripts.js:
--------------------------------------------------------------------------------
 1 | // SIDEBAR TOGGLE
 2 | 
 3 | let sidebarOpen = false;
 4 | const sidebar = document.getElementById('sidebar');
 5 | 
 6 | function openSidebar() {
 7 |   if (!sidebarOpen) {
 8 |     sidebar.classList.add('sidebar-responsive');
 9 |     sidebarOpen = true;
10 |   }
11 | }
12 | 
13 | function closeSidebar() {
14 |   if (sidebarOpen) {
15 |     sidebar.classList.remove('sidebar-responsive');
16 |     sidebarOpen = false;
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------