Update index.html

index.html

@@ -17,794 +17,586 @@
 
 
   
-    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
-
+  
 
-  <title>AdminHub Admin Dashboard v2.1</title>
+  <title>Responsive Bento Style Dashboard</title>
 
-    <link rel="canonical" href="https://codepen.io/saglik216/pen/OPLogNY">
-  
+    <link rel="canonical" href="https://codepen.io/dui77/pen/poGPQgJ">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
   
   
   
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap');
-
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-}
-
-a {
-	text-decoration: none;
-}
-
-li {
-	list-style: none;
-}
-
 :root {
-	--poppins: 'Poppins', sans-serif;
-	--lato: 'Lato', sans-serif;
-
-	--light: #F9F9F9;
-	--blue: #3C91E6;
-	--light-blue: #CFE8FF;
-	--grey: #eee;
-	--dark-grey: #AAAAAA;
-	--dark: #342E37;
-	--red: #DB504A;
-	--yellow: #FFCE26;
-	--light-yellow: #FFF2C6;
-	--orange: #FD7238;
-	--light-orange: #FFE0D3;
-}
+    --color-primary: #4B888C;
+    --color-primary-light: #76B9BD;
+    --color-primary-lightest: #D6EBEC;
+    --color-secondary: #76BDA4;
+  }
 
-html {
-	overflow-x: hidden;
+*, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+		font-family: 'Inter', sans-serif;
 }
 
-body.dark {
-	--light: #0C0C1E;
-	--grey: #060714;
-	--dark: #FBFBFB;
+html {
+    font-size: 62.5%;
 }
 
 body {
-	background: var(--grey);
-	overflow-x: hidden;
-}
-
-
-
-
-
-/* SIDEBAR */
-#sidebar {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 220px;
-	height: 100%;
-	background: var(--light);
-	z-index: 2000;
-	font-family: var(--lato);
-	transition: .3s ease;
-	overflow-x: hidden;
-	scrollbar-width: none;
-}
-#sidebar::--webkit-scrollbar {
-	display: none;
-}
-#sidebar.hide {
-	width: 60px;
-}
-#sidebar .brand {
-	font-size: 24px;
-	font-weight: 700;
-	height: 56px;
-	display: flex;
-	align-items: center;
-	color: var(--blue);
-	position: sticky;
-	top: 0;
-	left: 0;
-	background: var(--light);
-	z-index: 500;
-	padding-bottom: 20px;
-	box-sizing: content-box;
-}
-#sidebar .brand .bx {
-	min-width: 60px;
-	display: flex;
-	justify-content: center;
-}
-#sidebar .side-menu {
-	width: 100%;
-	margin-top: 48px;
-}
-#sidebar .side-menu li {
-	height: 48px;
-	background: transparent;
-	margin-left: 6px;
-	border-radius: 48px 0 0 48px;
-	padding: 4px;
-}
-#sidebar .side-menu li.active {
-	background: var(--grey);
-	position: relative;
-}
-#sidebar .side-menu li.active::before {
-	content: '';
-	position: absolute;
-	width: 40px;
-	height: 40px;
-	border-radius: 50%;
-	top: -40px;
-	right: 0;
-	box-shadow: 20px 20px 0 var(--grey);
-	z-index: -1;
-}
-#sidebar .side-menu li.active::after {
-	content: '';
-	position: absolute;
-	width: 40px;
-	height: 40px;
-	border-radius: 50%;
-	bottom: -40px;
-	right: 0;
-	box-shadow: 20px -20px 0 var(--grey);
-	z-index: -1;
-}
-#sidebar .side-menu li a {
-	width: 100%;
-	height: 100%;
-	background: var(--light);
-	display: flex;
-	align-items: center;
-	border-radius: 48px;
-	font-size: 16px;
-	color: var(--dark);
-	white-space: nowrap;
-	overflow-x: hidden;
-}
-#sidebar .side-menu.top li.active a {
-	color: var(--blue);
-}
-#sidebar.hide .side-menu li a {
-	width: calc(48px - (4px * 2));
-	transition: width .3s ease;
-}
-#sidebar .side-menu li a.logout {
-	color: var(--red);
-}
-#sidebar .side-menu.top li a:hover {
-	color: var(--blue);
-}
-#sidebar .side-menu li a .bx {
-	min-width: calc(60px  - ((4px + 6px) * 2));
-	display: flex;
-	justify-content: center;
-}
-
-#sidebar .side-menu.bottom li:nth-last-of-type(-n+2) { /* Son iki <li>'yi seç */
-  position: absolute; /* Ebeveynine göre konumlandır */
-  bottom: 0; /* En alt */
-  left: 0;
-  right: 0;
-  text-align: center;
-}
-
-/* Birbirinin üzerine binmesini engellemek için */
-#sidebar .side-menu.bottom li:nth-last-of-type(2) {
-  bottom: 40px; /* İkinci son öğeyi yukarı kaydır */
-}
-/* SIDEBAR */
-
-
-
-
-
-/* CONTENT */
-#content {
-	position: relative;
-	width: calc(100% - 220px);
-	left: 220px;
-	transition: .3s ease;
-}
-#sidebar.hide ~ #content {
-	width: calc(100% - 60px);
-	left: 60px;
-}
-
-
-
-
-/* NAVBAR */
-#content nav {
-	height: 56px;
-	background: var(--light);
-	padding: 0 24px;
-	display: flex;
-	align-items: center;
-	grid-gap: 24px;
-	font-family: var(--lato);
-	position: sticky;
-	top: 0;
-	left: 0;
-	z-index: 1000;
-}
-#content nav::before {
-	content: '';
-	position: absolute;
-	width: 40px;
-	height: 40px;
-	bottom: -40px;
-	left: 0;
-	border-radius: 50%;
-	box-shadow: -20px -20px 0 var(--light);
-}
-#content nav a {
-	color: var(--dark);
-}
-#content nav .bx.bx-menu {
-	cursor: pointer;
-	color: var(--dark);
-}
-#content nav .nav-link {
-	font-size: 16px;
-	transition: .3s ease;
-}
-#content nav .nav-link:hover {
-	color: var(--blue);
-}
-#content nav form {
-	max-width: 400px;
-	width: 100%;
-	margin-right: auto;
-}
-#content nav form .form-input {
-	display: flex;
-	align-items: center;
-	height: 36px;
-}
-#content nav form .form-input input {
-	flex-grow: 1;
-	padding: 0 16px;
-	height: 100%;
-	border: none;
-	background: var(--grey);
-	border-radius: 36px 0 0 36px;
-	outline: none;
-	width: 100%;
-	color: var(--dark);
-}
-#content nav form .form-input button {
-	width: 36px;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background: var(--blue);
-	color: var(--light);
-	font-size: 18px;
-	border: none;
-	outline: none;
-	border-radius: 0 36px 36px 0;
-	cursor: pointer;
-}
-#content nav .notification {
-	font-size: 20px;
-	position: relative;
-}
-#content nav .notification .num {
-    position: absolute;
-    top: -6px;
-    right: -6px;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border: 2px solid var(--light);
-    background: var(--red);
-    color: var(--light);
-    font-weight: 700;
-    font-size: 12px;
+    font-weight: 400;
+    color: #444;
+    box-sizing: border-box;
+    padding: 5rem;
+    min-height: 100vh;
+    background: linear-gradient(to bottom right, #97e0c7, #4B888C);
+}
+.all {
+    display: grid;
+    place-items: center;
+    grid-template-columns: 8rem 1fr;
+}
+
+nav {
+    background-color: var(--color-primary);
+    color: #fff;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 5rem rgba(0,0,0,.4);
+    border-radius: 2rem 0 0 2rem;
+    z-index: 0;
+    position: relative;
+
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     align-items: center;
+    padding: 2rem 1rem;
 }
-/* Notification Dropdown */
-#content nav .notification-menu {
-    display: none;
+nav::before {
+    content: '';
+    background-color: var(--color-primary);
+    height: 100%;
+    width: 5rem;
     position: absolute;
-    top: 56px;
-    right: 0;
-    background: var(--light);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    border-radius: 15px;
-    width: 250px;
-    max-height: 300px;
-    overflow-y: auto;
-    z-index: 9999;
-    font-family: var(--lato);
-}
-
-#content nav .notification-menu ul {
-    list-style: none;
-    padding: 10px;
-    margin: 0;
-}
-
-#content nav .notification-menu li {
-    padding: 10px;
-    border-bottom: 1px solid var(--grey);
-	color: var(--dark);
+    right: -5rem;
+    top: 0;
 }
-
-#content nav .notification-menu li:hover {
-    background-color: var(--light-blue);
-	color: var(--dark);
+.nav-items {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
 }
-#content nav .notification-menu li:hover a{
-    background-color: var(--dark-grey);
-	color: var(--light);
+.nav-item {
+    color: #fff;
+    cursor: pointer;
 }
-body.dark #content nav .notification-menu li:hover {
-    background-color: var(--light-blue);
-	color: var(--light);
+.nav-item:hover {
+    color: var(--color-primary-lightest)
 }
-body.dark #content nav .notification-menu li a{
-    background-color: var(--dark-grey);
-	color: var(--light);
+.nav-item svg {
+    width: 4rem;
+    height: 4rem;
 }
-#content nav .profile img {
-	width: 36px;
-	height: 36px;
-	object-fit: cover;
-	border-radius: 50%;
+
+.portrait {
+    background-color: white;
+    color: var(--color-primary);
+    width: 5rem;
+    height: 5rem;
+    border-radius: 50%;
+    margin-bottom: 5rem;
+    cursor: pointer;
 }
-#content nav .profile-menu {
-    display: none;
-    position: absolute;
-    top: 56px;
-    right: 0;
-    background: var(--light);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    border-radius: 15px;
-    width: 200px;
-    z-index: 9999;
-    font-family: var(--lato);
+.portrait:hover {
+    background-color: var(--color-primary-lightest);
 }
 
-#content nav .profile-menu ul {
-    list-style: none;
-    padding: 10px;
-    margin: 0;
-}
 
-#content nav .profile-menu li {
-    padding: 10px;
-    border-bottom: 1px solid var(--grey);
-}
 
-#content nav .profile-menu li:hover {
-    background-color: var(--light-blue);
-	color: var(--dark);
-}
-#content nav .profile-menu li a {
-    color: var(--dark);
-    font-size: 16px;
-}
-body.dark #content nav .profile-menu li:hover a {
-    color: var(--light);
-}
-body.dark #content nav .profile-menu li a {
-    color: var(--dark);
-}
-#content nav .profile-menu li:hover a {
-    color: var(--dark);
-}
-/* Active State for Menus */
-#content nav .notification-menu.show,
-#content nav .profile-menu.show {
-    display: block;
-}
 
-#content nav .switch-mode {
-	display: block;
-	min-width: 50px;
-	height: 25px;
-	border-radius: 25px;
-	background: var(--grey);
-	cursor: pointer;
-	position: relative;
-}
-#content nav .switch-mode::before {
-	content: '';
-	position: absolute;
-	top: 2px;
-	left: 2px;
-	bottom: 2px;
-	width: calc(25px - 4px);
-	background: var(--blue);
-	border-radius: 50%;
-	transition: all .3s ease;
-}
-#content nav #switch-mode:checked + .switch-mode::before {
-	left: calc(100% - (25px - 4px) - 2px);
+.content {
+    width: 100%;
+    background-color: #fff;
+    box-shadow: 0 0 5rem rgba(0,0,0,.4);
+    border-radius: 2rem;
+    z-index: 5;
+    padding: 4rem 6rem;
 }
 
-
-#content nav .swith-lm {
-	background-color:  var(--grey);
-	border-radius: 50px;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 3px;
-	position: relative;
-	height: 21px;
-	width: 45px;
-	transform: scale(1.5);
+section {
+    padding: 1rem 2rem;
+    background-color: #fff;
+    box-shadow: 0 0 3rem rgba(0,0,0,.3);
+    border-radius: .8rem;
 }
 
-#content nav .swith-lm .ball {
-	background-color: var(--blue);
-	border-radius: 50%;
-	position: absolute;
-	top: 2px;
-	left: 2px;
-	height: 20px;
-	width: 20px;
-	transform: translateX(0px);
-	transition: transform 0.2s linear;
+section > h2{
+    font-size: 2rem;
+    letter-spacing: .2rem;
+    font-weight: 400;
+    color: var(--color-primary);
 }
 
-#content nav .checkbox:checked + .swith-lm .ball {
-	transform: translateX(22px);
+.greeting {
+    margin-bottom: 4rem;
+    font-size: 1.4rem;
 }
-.bxs-moon {
-	color: var(--yellow);
+
+
+main {
+    display: grid;
+    grid-template-columns: 16fr 5fr;
+    grid-template-rows: auto auto;
+    gap: 4rem;
 }
 
-.bx-sun {
-	color: var(--orange);
-	animation: shakeOn .7s;
+.grid-area-1 {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-template-rows: 1fr 2fr;
+    gap: 4rem;
 }
 
+.grid-area-1-2 {
+    grid-column: 2 / 3;
+    grid-row: 1 / 3;
 
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+}
 
-/* NAVBAR */
 
+.grid-area-2 {
+    grid-column: 2 / 3;
+    grid-row: 1 / 3;
 
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+}
 
 
+.grid-area-3 {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
 
-/* MAIN */
-#content main {
-	width: 100%;
-	padding: 36px 24px;
-	font-family: var(--poppins);
-	max-height: calc(100vh - 56px);
-	overflow-y: auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 4rem;
 }
-#content main .head-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	grid-gap: 16px;
-	flex-wrap: wrap;
+
+.last-week {
+    grid-column: 2 / 3;
+    grid-row: 1 / 3;
 }
-#content main .head-title .left h1 {
-	font-size: 36px;
-	font-weight: 600;
-	margin-bottom: 10px;
-	color: var(--dark);
+
+
+.distance {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 3rem;
 }
-#content main .head-title .left .breadcrumb {
-	display: flex;
-	align-items: center;
-	grid-gap: 16px;
+.distance__section {
+    position: relative;
 }
-#content main .head-title .left .breadcrumb li {
-	color: var(--dark);
+.distance__section::after {
+    content: '';
+    height: 80%;
+    width: 1.6rem;
+    background-color: var(--color-primary-light);
+    position: absolute;
+    right: 0;
+    top: 10%;
+    border-radius: 1.2rem 0 0 1.2rem;
+    box-shadow: inset .4rem .4rem 1rem rgba(0,0,0,.2);
 }
-#content main .head-title .left .breadcrumb li a {
-	color: var(--dark-grey);
-	pointer-events: none;
+.distance p {
+    color: var(--color-primary);
+    font-size: 2rem;
 }
-#content main .head-title .left .breadcrumb li a.active {
-	color: var(--blue);
-	pointer-events: unset;
+.distance .distance__section > h2 {
+    font-weight: 400;
+    font-size: 1.6rem;
+    letter-spacing: 0;
 }
-#content main .head-title .btn-download {
-	height: 36px;
-	padding: 0 16px;
-	border-radius: 36px;
-	background: var(--blue);
-	color: var(--light);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	grid-gap: 10px;
-	font-weight: 500;
+.distance svg {
+    height: 5rem;
+    color: var(--color-primary);
+    margin-top: 2rem;
 }
 
 
-
-
-#content main .box-info {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-	grid-gap: 24px;
-	margin-top: 36px;
+.weekly {
+    background-color: #76BDA4;
+    color: white;
 }
-#content main .box-info li {
-	padding: 24px;
-	background: var(--light);
-	border-radius: 20px;
-	display: flex;
-	align-items: center;
-	grid-gap: 24px;
+.weekly h2 {
+    color: #fff !important;
 }
-#content main .box-info li .bx {
-	width: 80px;
-	height: 80px;
-	border-radius: 10px;
-	font-size: 36px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+.weekly table {
+    font-size: 1.6rem;
+    width: 100%;
+    text-align: left;
+    margin: 2rem 0;
 }
-#content main .box-info li:nth-child(1) .bx {
-	background: var(--light-blue);
-	color: var(--blue);
+.weekly td {
+    padding: .8rem .2rem;
 }
-#content main .box-info li:nth-child(2) .bx {
-	background: var(--light-yellow);
-	color: var(--yellow);
+
+.recent {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
 }
-#content main .box-info li:nth-child(3) .bx {
-	background: var(--light-orange);
-	color: var(--orange);
+.recent a {
+    align-self: end;
 }
-#content main .box-info li .text h3 {
-	font-size: 24px;
-	font-weight: 600;
-	color: var(--dark);
+.recent  table {
+    font-size: 1.6rem;
+    width: calc(100% + 4rem);
+    text-align: left;
+    margin: 2rem -2rem .5rem -2rem;
+    border: none;
 }
-#content main .box-info li .text p {
-	color: var(--dark);	
+.recent tr:nth-of-type(odd) {
+    background-color: var(--color-primary-lightest);
 }
-
-
-
-
-
-#content main .table-data {
-	display: flex;
-	flex-wrap: wrap;
-	grid-gap: 24px;
-	margin-top: 24px;
-	width: 100%;
-	color: var(--dark);
+.recent td {
+    padding: .8rem .2rem;
 }
-#content main .table-data > div {
-	border-radius: 20px;
-	background: var(--light);
-	padding: 24px;
-	overflow-x: auto;
+.recent svg {
+    width: 3rem;
+    height: 3rem;
+    background-color: #fff;
+    border-radius: 50%;
+    padding: .5rem;
+    color: var(--color-primary);
+    margin-left: 2rem;
 }
-#content main .table-data .head {
-	display: flex;
-	align-items: center;
-	grid-gap: 16px;
-	margin-bottom: 24px;
+
+a {
+    font-size: 1.6rem;
+    color: var(--color-primary);
+    text-decoration: none;
+    display: block;
+    padding-bottom: .2rem;
+    margin: 1rem 0;
+    border-bottom: 1px solid currentColor;
+    letter-spacing: 3px;
+    align-self: end;
+    margin-right: 1rem;
 }
-#content main .table-data .head h3 {
-	margin-right: auto;
-	font-size: 24px;
-	font-weight: 600;
+
+.calories {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto 1fr auto;
 }
-#content main .table-data .head .bx {
-	cursor: pointer;
+.calories h2 {
+    grid-column: 1 / 4;
 }
-
-#content main .table-data .order {
-	flex-grow: 1;
-	flex-basis: 500px;
-}
-#content main .table-data .order table {
-	width: 100%;
-	border-collapse: collapse;
-}
-#content main .table-data .order table th {
-	padding-bottom: 12px;
-	font-size: 13px;
-	text-align: left;
-	border-bottom: 1px solid var(--grey);
+.calories__number {
+    text-align: center;
+    font-size: 2.8rem;
+    font-weight: 600;
+    color: var(--color-primary);
+    margin: 1.5rem 0;
 }
-#content main .table-data .order table td {
-	padding: 16px 0;
+.calories__text {
+    text-align: center;
+    font-size: 1.6rem;
+    margin-bottom: 2rem;
 }
-#content main .table-data .order table tr td:first-child {
-	display: flex;
-	align-items: center;
-	grid-gap: 12px;
-	padding-left: 6px;
-}
-#content main .table-data .order table td img {
-	width: 36px;
-	height: 36px;
-	border-radius: 50%;
-	object-fit: cover;
+
+
+.friend-acitvity {
+    display: flex;
+    flex-direction: column;
 }
-#content main .table-data .order table tbody tr:hover {
-	background: var(--grey);
-}
-#content main .table-data .order table tr td .status {
-	font-size: 10px;
-	padding: 6px 16px;
-	color: var(--light);
-	border-radius: 20px;
-	font-weight: 700;
+.friend-activity__activity {
+    display: grid;
+    grid-template-columns: 4rem 1fr;
+    gap: 2rem;
+    align-items: center;
+    margin: 1rem 0;
 }
-#content main .table-data .order table tr td .status.completed {
-	background: var(--blue);
+.friend-acitvity__picture {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
+    background-color: var(--color-primary);
+    overflow: hidden;
+    position: relative;
+}
+.friend-acitvity__picture > div {
+    background-color: #fff;
+    width: 2rem;
+    height: 2rem;
+    position: absolute;
+    bottom: -.6rem;
+    left: 1rem;
+    border-radius: 50% 50% 0 0;
+}
+.friend-acitvity__picture > div::after {
+    content: '';
+    width: 1.2rem;
+    height: 1.2rem;
+    border-radius: 50%;
+    position: absolute;
+    background-color: #fff;
+    bottom: 2.3rem;
+    left: .4rem;
+}
+.friends__picture {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    background-color: var(--color-primary);
+    overflow: hidden;
+    position: relative;
+}
+.friends__picture > div {
+    background-color: #fff;
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    bottom: -.6rem;
+    left: .8rem;
+    border-radius: 50% 50% 0 0;
+}
+.friends__picture > div::after {
+    content: '';
+    width: .8rem;
+    height: .8rem;
+    border-radius: 50%;
+    position: absolute;
+    background-color: #fff;
+    bottom: 1.8rem;
+    left: .4rem;
 }
-#content main .table-data .order table tr td .status.process {
-	background: var(--yellow);
+.friend-activity__name, .friends__name {
+    color: var(--color-primary);
+    font-size: 1.8rem;
+    font-weight: 400;
 }
-#content main .table-data .order table tr td .status.pending {
-	background: var(--orange);
+.friend-activity__msg, .friends__msg {
+    font-size: 1.4rem;
 }
 
 
-#content main .table-data .todo {
-	flex-grow: 1;
-	flex-basis: 300px;
-}
-#content main .table-data .todo .todo-list {
-	width: 100%;
+.friends__friend {
+    display: grid;
+    grid-template-columns: 4rem 1fr auto;
+    align-items: center;
+    gap: 1rem;
+    justify-content: space-between;
+    margin: 1rem 0;
+}
+
+.challenges {
+    display: grid;
+    grid-template-rows: auto repeat(1.4rem, 2rem);
+    gap: .8rem;
+    padding-bottom: 2rem;
+}
+.challenges__bar {
+    width: 100%;
+    height: 1.4rem;
+    border-radius: .7rem;
+    background-color: #D9D9D9;
+    position: relative;
+}
+.challenges__bar::after {
+    content: '';
+    position: absolute;
+    height: 100%;
+    border-radius: .7rem;
+    background-color: var(--color-primary);
 }
-#content main .table-data .todo .todo-list li {
-	width: 100%;
-	margin-bottom: 16px;
-	background: var(--grey);
-	border-radius: 10px;
-	padding: 14px 20px;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
+.challenges__bar--1::after {width: 20%;}
+.challenges__bar--2::after {width: 70%;}
+.challenges__bar--3::after {width: 45%;}
+.challenges__text {
+    font-size: 1.4rem;
 }
-#content main .table-data .todo .todo-list li .bx {
-	cursor: pointer;
-}
-#content main .table-data .todo .todo-list li.completed {
-	border-left: 10px solid var(--blue);
-}
-#content main .table-data .todo .todo-list li.not-completed {
-	border-left: 10px solid var(--orange);
-}
-#content main .table-data .todo .todo-list li:last-child {
-	margin-bottom: 0;
-}
-/* MAIN */
-/* CONTENT */
-#content main .menu, #content nav .menu {
-
-    display: none;
-      list-style-type: none;
-      padding-left: 20px;
-      margin-top: 5px;
-      position: absolute;
-      background-color: #f9f9f9;
-      border: 1px solid #ddd;
-      border-radius: 5px;
-      width: 200px;
- }
 
- #content main .menu a , #content nav .menu a {
-    color: white;
-    text-decoration: none;
-    display: block;
-    padding: 8px 16px;
+.personal-bests {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 3rem;
 }
-
-#content main .menu a:hover , #content nav .menu a:hover {
-    background-color: #444;
+.personal-bests__best {
+    background-color: var(--color-primary);
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    padding-top: 2rem;
+    position: relative;
+}
+.personal-bests__best::after {
+    content: '';
+    background-color: var(--color-primary-lightest);
+    width: 80%;
+    height: 1.5rem;
+    border-radius: 0 0 1rem 1rem;
+    box-shadow: inset .4rem -.4rem 1rem rgba(0,0,0,.2);
+    position: absolute;
+    top: 0;
+    left: 10%;
 }
-        
-#content main .menu-link , #content nav .menu-link {
-    margin: 5px;
-    padding: 10px 20px;
-    font-size: 16px;
-    cursor: pointer;
-    text-decoration: none;
-    color: #007bff;
+.personal-bests__best h2 {
+    color: #ffffff8c;
+    text-align: center;
+    letter-spacing: 0;
+    font-size: 1.8rem;
 }
-
-#content main .menu-link:hover, #content nav .menu-link:hover {
-    text-decoration: underline;
+.personal-bests__best p {
+    font-size: 2rem;
+}
+.personal-bests__best svg {
+    width: 4rem;
+    height: 4rem;
 }
 
 
-
-
-
-/* Media Query for Smaller Screens */
-@media screen and (max-width: 768px) {
-    /* Reduce width of notification and profile menu */
-    #content nav .notification-menu,
-    #content nav .profile-menu {
-        width: 180px;
+.last-week {
+    display: flex;
+    flex-direction: column;
+}
+.last-week__chart {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 2rem;
+    margin-top: 2rem;
+    padding-top: 4rem;
+    border-bottom: 1px solid #757575;
+    align-items: end;
+}
+.last-week__bar {
+    width: 3.5rem;
+    border-radius: .4rem .4rem 0 0;
+    background-color: var(--color-primary);
+    height: 20rem;
+}
+.last-week__bar--1 {
+    justify-self: end;
+    height: 17rem;
+}
+.last-week__bar--2 {
+    height: 20rem;
+}
+.last-week__bar--3 {
+    justify-self: end;
+    background-color: var(--color-primary-light);
+    height: 15rem;
+}
+.last-week__bar--4 {
+    background-color: var(--color-primary-light);
+    height: 12rem;
+}
+.last-week__bar--5 {
+    justify-self: end;
+    background-color: var(--color-secondary);
+    height: 10rem;
+}
+.last-week__bar--6 {
+    background-color: var(--color-secondary);
+    height: 16rem;
+}
+.last-week__bar > p {
+    font-size: 1.4rem;
+    text-align: center;
+    transform: translateY(-2rem);
+}
+.last-week__labels {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    justify-items: center;
+    font-size: 1.8rem;
+    margin: 2rem 0;
+}
+
+@media (max-width: 1500px) {
+    body {
+        padding: 0;
+    }
+    nav, .content {
+        border-radius: 0;
     }
-	#sidebar {
-		width: 200px;
-	}
-
-	#content {
-		width: calc(100% - 60px);
-		left: 200px;
-	}
-
-	#content nav .nav-link {
-		display: none;
-	}
 }
-
-
-
-
-@media screen and (max-width: 576px) {
-    #content nav .notification-menu,
-    #content nav .profile-menu {
-        width: 150px;
+@media (max-width: 1250px) {
+    main {
+        grid-template-columns: 1fr;
+    }
+    .grid-area-2 {
+        grid-column: 1 / 2;
+        grid-row: 3 / 4;
+    
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+}
+@media (max-width: 950px) {
+    .grid-area-1 {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 2fr auto;
+    }
+    .grid-area-1-2 {
+        grid-column: 1 / 2;
+        grid-row: 3 / 4;
+    
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+    .last-week {
+        grid-column: 1 / 3;
+        grid-row: 2 / 3;
+    }
+    .grid-area-3 {
+        grid-template-rows: auto auto auto;
+    }
+    .challenges {
+        grid-column: 1 / 3;
+        grid-row: 1 / 2;
+    }
+    .personal-bests {
+        grid-column: 1 / 3;
+    }
+}
+@media (max-width: 750px) {
+    .grid-area-2 {
+        display: flex;
+        flex-direction: column;
+    }
+    .grid-area-1-2 {
+        display: flex;
+        flex-direction: column;
+    }
+    .all {
+        grid-template-columns: 1fr;
+    }
+    nav {
+        display: none;
+    }
+    .content {
+        padding: 2rem 1rem;
+    }
+}
+@media (max-width: 450px) {
+    html {
+        font-size: 50%;
     }
-	#content nav form .form-input input {
-		display: none;
-	}
-
-	#content nav form .form-input button {
-		width: auto;
-		height: auto;
-		background: transparent;
-		border-radius: none;
-		color: var(--dark);
-	}
-
-	#content nav form.show .form-input input {
-		display: block;
-		width: 100%;
-	}
-	#content nav form.show .form-input button {
-		width: 36px;
-		height: 100%;
-		border-radius: 0 36px 36px 0;
-		color: var(--light);
-		background: var(--red);
-	}
-
-	#content nav form.show ~ .notification,
-	#content nav form.show ~ .profile {
-		display: none;
-	}
-
-	#content main .box-info {
-		grid-template-columns: 1fr;
-	}
-
-	#content main .table-data .head {
-		min-width: 420px;
-	}
-	#content main .table-data .order table {
-		min-width: 420px;
-	}
-	#content main .table-data .todo .todo-list {
-		min-width: 420px;
-	}
 }
 </style>
 
@@ -817,390 +609,277 @@ body.dark #content nav .profile-menu li a {
 </head>
 
 <body translate="no">
-  <!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <div class="all">
+	<nav class="navigation">
+		<div class="portrait">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 12q-1.65 0-2.825-1.175T8 8q0-1.65 1.175-2.825T12 4q1.65 0 2.825 1.175T16 8q0 1.65-1.175 2.825T12 12Zm-8 8v-2.8q0-.85.438-1.563T5.6 14.55q1.55-.775 3.15-1.163T12 13q1.65 0 3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20H4Z"/></svg>
+		</div>
+
+		<div class="nav-items">
+			<div class="nav-item">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M946.5 505L534.6 93.4a31.93 31.93 0 0 0-45.2 0L77.5 505c-12 12-18.8 28.3-18.8 45.3c0 35.3 28.7 64 64 64h43.4V908c0 17.7 14.3 32 32 32H448V716h112v224h265.9c17.7 0 32-14.3 32-32V614.3h43.4c17 0 33.3-6.7 45.3-18.8c24.9-25 24.9-65.5-.1-90.5z"/></svg>
+			</div>
+			<div class="nav-item">
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12h4l3 8l4-16l3 8h4"/></svg>
+			</div>
+			<div class="nav-item">
+				<svg xmlns="http://www.w3.org/2000/svg" width="416" height="512" viewBox="0 0 416 512"><path fill="currentColor" d="M272 96c26.51 0 48-21.49 48-48S298.51 0 272 0s-48 21.49-48 48s21.49 48 48 48zM113.69 317.47l-14.8 34.52H32c-17.67 0-32 14.33-32 32s14.33 32 32 32h77.45c19.25 0 36.58-11.44 44.11-29.09l8.79-20.52l-10.67-6.3c-17.32-10.23-30.06-25.37-37.99-42.61zM384 223.99h-44.03l-26.06-53.25c-12.5-25.55-35.45-44.23-61.78-50.94l-71.08-21.14c-28.3-6.8-57.77-.55-80.84 17.14l-39.67 30.41c-14.03 10.75-16.69 30.83-5.92 44.86s30.84 16.66 44.86 5.92l39.69-30.41c7.67-5.89 17.44-8 25.27-6.14l14.7 4.37l-37.46 87.39c-12.62 29.48-1.31 64.01 26.3 80.31l84.98 50.17l-27.47 87.73c-5.28 16.86 4.11 34.81 20.97 40.09c3.19 1 6.41 1.48 9.58 1.48c13.61 0 26.23-8.77 30.52-22.45l31.64-101.06c5.91-20.77-2.89-43.08-21.64-54.39l-61.24-36.14l31.31-78.28l20.27 41.43c8 16.34 24.92 26.89 43.11 26.89H384c17.67 0 32-14.33 32-32s-14.33-31.99-32-31.99z"/></svg>
+			</div>
+			<div class="nav-item">
+				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97c0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1c0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z"/></svg>
+			</div>
+		</div>
 
-	<!-- Boxicons -->
-	<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
-	<link href='https://unpkg.com/boxicons@2.1.4/dist/boxicons.js' rel='stylesheet'>
+	</nav>
 
-	<!-- My CSS -->
-	<link rel="stylesheet" href="style.css">
+	<div class="content">
+		<div class="greeting">
+			<h2>Good Morning Champ!</h2>
+			<p>Time to seize the day 🌞</p>
+		</div>
 
-	<title>AdminHub</title>
-</head>
-<body>
-	<!-- SIDEBAR -->
-	<section id="sidebar">
-		<a href="#" class="brand">
-			<i class='bx bxs-smile  bx-lg'></i>
-			<span class="text">AdminHub</span>
-		</a>
-		<ul class="side-menu top">
-			<li class="active">
-				<a href="#">
-					<i class='bx bxs-dashboard bx-sm' ></i>
-					<span class="text">Dashboard</span>
-				</a>
-			</li>
-			<li>
-				<a href="#">
-					<i class='bx bxs-shopping-bag-alt bx-sm' ></i>
-					<span class="text">My Store</span>
-				</a>
-			</li>
-			<li>
-				<a href="#">
-					<i class='bx bxs-doughnut-chart bx-sm' ></i>
-					<span class="text">Analytics</span>
-				</a>
-			</li>
-			<li>
-				<a href="#">
-					<i class='bx bxs-message-dots bx-sm' ></i>
-					<span class="text">Message</span>
-				</a>
-			</li>
-			<li>
-				<a href="#">
-					<i class='bx bxs-group bx-sm' ></i>
-					<span class="text">Team</span>
-				</a>
-			</li>
-		</ul>
-		<ul class="side-menu bottom">
-			<li>
-				<a href="#">
-					<i class='bx bxs-cog bx-sm bx-spin-hover' ></i>
-					<span class="text">Settings</span>
-				</a>
-			</li>
-			<li>
-				<a href="#" class="logout">
-					<i class='bx bx-power-off bx-sm bx-burst-hover' ></i>
-					<span class="text">Logout</span>
-				</a>
-			</li>
-		</ul>
-	</section>
-	<!-- SIDEBAR -->
-
-
-
-	<!-- CONTENT -->
-	<section id="content">
-		<!-- NAVBAR -->
-<nav>
-    <i class='bx bx-menu bx-sm' ></i>
-    <a href="#" class="nav-link">Categories</a>
-    <form action="#">
-        <div class="form-input">
-            <input type="search" placeholder="Search...">
-            <button type="submit" class="search-btn"><i class='bx bx-search' ></i></button>
-        </div>
-    </form>
-    <input type="checkbox" class="checkbox" id="switch-mode" hidden />
-    <label class="swith-lm" for="switch-mode">
-        <i class="bx bxs-moon"></i>
-        <i class="bx bx-sun"></i>
-        <div class="ball"></div>
-    </label>
-
-    <!-- Notification Bell -->
-    <a href="#" class="notification" id="notificationIcon">
-        <i class='bx bxs-bell bx-tada-hover' ></i>
-        <span class="num">8</span>
-    </a>
-    <div class="notification-menu" id="notificationMenu">
-        <ul>
-            <li>New message from John</li>
-            <li>Your order has been shipped</li>
-            <li>New comment on your post</li>
-            <li>Update available for your app</li>
-            <li>Reminder: Meeting at 3PM</li>
-        </ul>
-    </div>
-
-    <!-- Profile Menu -->
-    <a href="#" class="profile" id="profileIcon">
-        <img src="https://placehold.co/600x400/png" alt="Profile">
-    </a>
-    <div class="profile-menu" id="profileMenu">
-        <ul>
-            <li><a href="#">My Profile</a></li>
-            <li><a href="#">Settings</a></li>
-            <li><a href="#">Log Out</a></li>
-        </ul>
-    </div>
-</nav>
-<!-- NAVBAR -->
-
-
-		<!-- MAIN -->
 		<main>
-			<div class="head-title">
-				<div class="left">
-					<h1>Dashboard</h1>
-					<ul class="breadcrumb">
-						<li>
-							<a href="#">Dashboard</a>
-						</li>
-						<li><i class='bx bx-chevron-right' ></i></li>
-						<li>
-							<a class="active" href="#">Home</a>
-						</li>
-					</ul>
+			<div class="grid-area-1">
+				<div class="distance">
+					<section class="distance__section distance__cycling">
+						<p>42 km</p>
+						<h2>Cycling</h2>
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M11 15.414V20h2v-4.586c0-.526-.214-1.042-.586-1.414l-2-2L13 9.414l2 2c.372.372.888.586 1.414.586H20v-2h-3.586l-3.707-3.707a.999.999 0 0 0-1.414 0L8 9.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414l3 3z"/><circle cx="16" cy="5" r="2" fill="currentColor"/><path fill="currentColor" d="M18 14c-2.206 0-4 1.794-4 4s1.794 4 4 4s4-1.794 4-4s-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2s2 .897 2 2s-.897 2-2 2zM6 22c2.206 0 4-1.794 4-4s-1.794-4-4-4s-4 1.794-4 4s1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2s-2-.897-2-2s.897-2 2-2z"/></svg>
+					</section>
+					<section class="distance__section distance__running">
+						<p>22 km</p>
+						<h2>Running</h2>
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 416 512"><path fill="currentColor" d="M272 96c26.51 0 48-21.49 48-48S298.51 0 272 0s-48 21.49-48 48s21.49 48 48 48zM113.69 317.47l-14.8 34.52H32c-17.67 0-32 14.33-32 32s14.33 32 32 32h77.45c19.25 0 36.58-11.44 44.11-29.09l8.79-20.52l-10.67-6.3c-17.32-10.23-30.06-25.37-37.99-42.61zM384 223.99h-44.03l-26.06-53.25c-12.5-25.55-35.45-44.23-61.78-50.94l-71.08-21.14c-28.3-6.8-57.77-.55-80.84 17.14l-39.67 30.41c-14.03 10.75-16.69 30.83-5.92 44.86s30.84 16.66 44.86 5.92l39.69-30.41c7.67-5.89 17.44-8 25.27-6.14l14.7 4.37l-37.46 87.39c-12.62 29.48-1.31 64.01 26.3 80.31l84.98 50.17l-27.47 87.73c-5.28 16.86 4.11 34.81 20.97 40.09c3.19 1 6.41 1.48 9.58 1.48c13.61 0 26.23-8.77 30.52-22.45l31.64-101.06c5.91-20.77-2.89-43.08-21.64-54.39l-61.24-36.14l31.31-78.28l20.27 41.43c8 16.34 24.92 26.89 43.11 26.89H384c17.67 0 32-14.33 32-32s-14.33-31.99-32-31.99z"/></svg>
+					</section>
+					<section class="distance__section distance__swimming">
+						<p>10 km</p>
+						<h2>Swimming</h2>
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="currentColor" d="M49 40a7.125 7.125 0 0 1-2.952-.641a7.416 7.416 0 0 0-3.042-.664a7.467 7.467 0 0 0-3.049.664a7.123 7.123 0 0 1-5.903 0a7.545 7.545 0 0 0-3.048-.664a7.492 7.492 0 0 0-3.049.664a7.147 7.147 0 0 1-5.913 0a7.43 7.43 0 0 0-3.036-.664a7.487 7.487 0 0 0-3.048.664a7.141 7.141 0 0 1-5.912 0A7.458 7.458 0 0 0 7 38.695a7.472 7.472 0 0 0-3.037.664A7.204 7.204 0 0 1 1 40v-4.396a7.47 7.47 0 0 0 2.963-.631A7.287 7.287 0 0 1 7 34.299c1.086 0 2.127.25 3.048.674a7.398 7.398 0 0 0 2.948.631a7.42 7.42 0 0 0 2.964-.631a7.3 7.3 0 0 1 3.048-.674c1.078 0 2.114.25 3.036.674a7.44 7.44 0 0 0 2.96.631a7.407 7.407 0 0 0 2.953-.631a7.308 7.308 0 0 1 3.049-.674c1.073 0 2.113.25 3.048.674c.895.393 1.9.631 2.95.631a7.377 7.377 0 0 0 2.953-.631a7.283 7.283 0 0 1 3.049-.674c1.086 0 2.125.25 3.042.674a7.38 7.38 0 0 0 2.952.631V40zm-6.952-12.436c3.152 0 5.71-2.55 5.71-5.678c0-3.131-2.558-5.668-5.71-5.668c-3.157 0-5.712 2.538-5.712 5.668c0 3.128 2.328 5.678 5.712 5.678zM8.791 30.756c.443.105.861.258 1.258.436a7.255 7.255 0 0 0 2.949.641c1.05 0 2.069-.238 2.963-.641a7.463 7.463 0 0 1 3.048-.676c1.078 0 2.116.262 3.036.676a7.293 7.293 0 0 0 2.96.641c1.04 0 2.058-.238 2.952-.641a7.47 7.47 0 0 1 3.049-.676c1.074 0 2.115.262 3.048.676c.896.402 1.9.641 2.952.641c.765 0 1.502-.129 2.197-.346l-9.525-17.056l11.079-2.007c1.626-.308 2.806-1.576 2.806-3.199c0-1.79-1.467-3.225-3.262-3.225l-.37.011l-17.114 3.092c-1.201.273-2.792 2.019-1.886 4.161l.146.345l4.466 8.003l-16.752 9.144z"/></svg>
+					</section>
 				</div>
-				<a href="https://codepen.io/saglik216/pen/LEVjwBV" class="btn-download" target="_blink">
-					<i class='bx bxs-cloud-download bx-fade-down-hover' ></i>
-					<span class="text">V2.5 Released</span>
-				</a>
-			</div>
 
-			<ul class="box-info">
-				<li>
-					<i class='bx bxs-calendar-check' ></i>
-					<span class="text">
-						<h3>1020</h3>
-						<p>New Order</p>
-					</span>
-				</li>
-				<li>
-					<i class='bx bxs-group' ></i>
-					<span class="text">
-						<h3>2834</h3>
-						<p>Visitors</p>
-					</span>
-				</li>
-				<li>
-					<i class='bx bxs-dollar-circle' ></i>
-					<span class="text">
-						<h3>N$2543.00</h3>
-						<p>Total Sales</p>
-					</span>
-				</li>
-			</ul>
-
-
-			<div class="table-data">
-				<div class="order">
-					<div class="head">
-						<h3>Recent Orders</h3>
-						<i class='bx bx-search' ></i>
-						<i class='bx bx-filter' ></i>
-					</div>
-					<table>
-						<thead>
-							<tr>
-								<th>User</th>
-								<th>Date Order</th>
-								<th>Status</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td>
-									<img src="https://placehold.co/600x400/png">
-									<p>Micheal John</p>
-								</td>
-								<td>18-10-2021</td>
-								<td><span class="status completed">Completed</span></td>
-							</tr>
-							<tr>
-								<td>
-									<img src="https://placehold.co/600x400/png">
-									<p>Ryan Doe</p>
-								</td>
-								<td>01-06-2022</td>
-								<td><span class="status pending">Pending</span></td>
-							</tr>
+				<section class="weekly">
+					<h2>Weekly Schedule</h2>
+					<table cellspacing="0" cellpadding="0">
+						<tr>
+							<th>Day</th>
+							<th>Exercise</th>
+							<th>Time</th>
+						</tr>
+						<tr>
+							<td>Monday</td>
+							<td>Running</td>
+							<td>6:00 AM</td>
+						</tr>
+						<tr>
+							<td>Tuesday</td>
+							<td>Swimming</td>
+							<td>7:00 AM</td>
+						</tr>
+						<tr>
+							<td>Wednesday</td>
+							<td>Cycling</td>
+							<td>6:30 AM</td>
+						</tr>
+						<tr>
+							<td>Thursday</td>
+							<td>Yoga</td>
+							<td>6:00 AM</td>
+						</tr>
+						<tr>
+							<td>Friday</td>
+							<td>Weight-Training</td>
+							<td>8:00 AM</td>
+						</tr>
+					</table>
+				</section>
+
+				<div class="grid-area-1-2">
+					<section class="recent">
+						<h2>Last 3 Exercises</h2>
+						<table cellspacing="0" cellpadding="0">
 							<tr>
-								<td>
-									<img src="https://placehold.co/600x400/png">
-									<p>Tarry White</p>
-								</td>
-								<td>14-10-2021</td>
-								<td><span class="status process">Process</span></td>
+								<td><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 416 512"><path fill="currentColor" d="M272 96c26.51 0 48-21.49 48-48S298.51 0 272 0s-48 21.49-48 48s21.49 48 48 48zM113.69 317.47l-14.8 34.52H32c-17.67 0-32 14.33-32 32s14.33 32 32 32h77.45c19.25 0 36.58-11.44 44.11-29.09l8.79-20.52l-10.67-6.3c-17.32-10.23-30.06-25.37-37.99-42.61zM384 223.99h-44.03l-26.06-53.25c-12.5-25.55-35.45-44.23-61.78-50.94l-71.08-21.14c-28.3-6.8-57.77-.55-80.84 17.14l-39.67 30.41c-14.03 10.75-16.69 30.83-5.92 44.86s30.84 16.66 44.86 5.92l39.69-30.41c7.67-5.89 17.44-8 25.27-6.14l14.7 4.37l-37.46 87.39c-12.62 29.48-1.31 64.01 26.3 80.31l84.98 50.17l-27.47 87.73c-5.28 16.86 4.11 34.81 20.97 40.09c3.19 1 6.41 1.48 9.58 1.48c13.61 0 26.23-8.77 30.52-22.45l31.64-101.06c5.91-20.77-2.89-43.08-21.64-54.39l-61.24-36.14l31.31-78.28l20.27 41.43c8 16.34 24.92 26.89 43.11 26.89H384c17.67 0 32-14.33 32-32s-14.33-31.99-32-31.99z"/></svg></td>
+								<td>Running</td>
+								<td>30 min</td>
 							</tr>
 							<tr>
-								<td>
-									<img src="https://placehold.co/600x400/png">
-									<p>Selma</p>
-								</td>
-								<td>01-02-2023</td>
-								<td><span class="status pending">Pending</span></td>
+								<td><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="currentColor" d="M49 40a7.125 7.125 0 0 1-2.952-.641a7.416 7.416 0 0 0-3.042-.664a7.467 7.467 0 0 0-3.049.664a7.123 7.123 0 0 1-5.903 0a7.545 7.545 0 0 0-3.048-.664a7.492 7.492 0 0 0-3.049.664a7.147 7.147 0 0 1-5.913 0a7.43 7.43 0 0 0-3.036-.664a7.487 7.487 0 0 0-3.048.664a7.141 7.141 0 0 1-5.912 0A7.458 7.458 0 0 0 7 38.695a7.472 7.472 0 0 0-3.037.664A7.204 7.204 0 0 1 1 40v-4.396a7.47 7.47 0 0 0 2.963-.631A7.287 7.287 0 0 1 7 34.299c1.086 0 2.127.25 3.048.674a7.398 7.398 0 0 0 2.948.631a7.42 7.42 0 0 0 2.964-.631a7.3 7.3 0 0 1 3.048-.674c1.078 0 2.114.25 3.036.674a7.44 7.44 0 0 0 2.96.631a7.407 7.407 0 0 0 2.953-.631a7.308 7.308 0 0 1 3.049-.674c1.073 0 2.113.25 3.048.674c.895.393 1.9.631 2.95.631a7.377 7.377 0 0 0 2.953-.631a7.283 7.283 0 0 1 3.049-.674c1.086 0 2.125.25 3.042.674a7.38 7.38 0 0 0 2.952.631V40zm-6.952-12.436c3.152 0 5.71-2.55 5.71-5.678c0-3.131-2.558-5.668-5.71-5.668c-3.157 0-5.712 2.538-5.712 5.668c0 3.128 2.328 5.678 5.712 5.678zM8.791 30.756c.443.105.861.258 1.258.436a7.255 7.255 0 0 0 2.949.641c1.05 0 2.069-.238 2.963-.641a7.463 7.463 0 0 1 3.048-.676c1.078 0 2.116.262 3.036.676a7.293 7.293 0 0 0 2.96.641c1.04 0 2.058-.238 2.952-.641a7.47 7.47 0 0 1 3.049-.676c1.074 0 2.115.262 3.048.676c.896.402 1.9.641 2.952.641c.765 0 1.502-.129 2.197-.346l-9.525-17.056l11.079-2.007c1.626-.308 2.806-1.576 2.806-3.199c0-1.79-1.467-3.225-3.262-3.225l-.37.011l-17.114 3.092c-1.201.273-2.792 2.019-1.886 4.161l.146.345l4.466 8.003l-16.752 9.144z"/></svg></td>
+								<td>Swimming</td>
+								<td>45 min</td>
 							</tr>
 							<tr>
-								<td>
-									<img src="https://placehold.co/600x400/png">
-									<p>Andreas Doe</p>
-								</td>
-								<td>31-10-2021</td>
-								<td><span class="status completed">Completed</span></td>
+								<td><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M11 15.414V20h2v-4.586c0-.526-.214-1.042-.586-1.414l-2-2L13 9.414l2 2c.372.372.888.586 1.414.586H20v-2h-3.586l-3.707-3.707a.999.999 0 0 0-1.414 0L8 9.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414l3 3z"/><circle cx="16" cy="5" r="2" fill="currentColor"/><path fill="currentColor" d="M18 14c-2.206 0-4 1.794-4 4s1.794 4 4 4s4-1.794 4-4s-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2s2 .897 2 2s-.897 2-2 2zM6 22c2.206 0 4-1.794 4-4s-1.794-4-4-4s-4 1.794-4 4s1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2s-2-.897-2-2s.897-2 2-2z"/></svg></td>
+								<td>Cycling</td>
+								<td>60 min</td>
 							</tr>
-						</tbody>
-					</table>
+							<!-- <tr>
+																		<td><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 11l-1 3l1 3h-1.5L9 14l.5-4.5L12 11Zm1-9L9 6v8l1 3H6l-3 5m17.5 0l-5-3.5L12 17l-1-3l1-3l3.5 2v5.5M14 8.5a1 1 0 1 1 0-2a1 1 0 0 1 0 2Zm-3 2L10 17v-3.5l1-3Z"/></svg></td>
+																		<td>Yoga</td>
+																		<td>40 min</td>
+																</tr> -->
+							<!-- <tr>
+																		<td><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="m77.492 18.457l-17.726 3.127L69.09 74.47a1630.67 1630.67 0 0 0-15.8 2.54l-6.503-36.89l-17.726 3.124l6.49 36.795a1877.847 1877.847 0 0 0-17.196 3.112l3.292 17.696c5.728-1.066 11.397-2.09 17.028-3.084l7.056 40.02l17.727-3.124l-7.04-39.93c5.304-.88 10.57-1.725 15.798-2.54l9.777 55.45l17.727-3.126l-9.697-54.99a1415.91 1415.91 0 0 1 25.18-3.38c15.54 46.39 34.697 99.995 66.936 134.448C190.86 250.992 192 268 214.56 310C192 348 176 412 167.21 471l-48 6v15H192c16-48 64-144 64-144s48 96 64 144h72.79v-15l-48-6C336 412 320 348 294 310c26-42 24.175-59.585 35.83-89.377c32.25-34.452 51.42-88.075 66.967-134.478c8.314 1.04 16.697 2.16 25.18 3.38l-9.696 54.99l17.728 3.124l9.777-55.45c5.23.815 10.494 1.66 15.8 2.54l-7.042 39.93l17.727 3.125l7.056-40.02c5.63.993 11.3 2.017 17.028 3.083l3.292-17.696c-5.78-1.075-11.507-2.11-17.195-3.113l6.49-36.796l-17.727-3.125l-6.504 36.89a1564.46 1564.46 0 0 0-15.8-2.54l9.324-52.886l-17.726-3.127l-9.406 53.35C365.982 63.31 310.982 59.04 256 59.04c-54.98 0-109.983 4.27-169.102 12.767l-9.406-53.35zM256 76.98c35.53 0 71.07 1.83 107.822 5.463c-14.082 34.858-38.454 73.504-63.203 101.967C290.293 199.27 274.35 209 256 209s-34.294-9.73-44.62-24.59c-24.748-28.463-49.12-67.11-63.202-101.967c36.75-3.633 72.29-5.463 107.822-5.463zM256 97c-20.835 0-39 20.24-39 47s18.165 47 39 47s39-20.24 39-47s-18.165-47-39-47z"/></svg></td>
+																		<td>Weight Training</td>
+																		<td>50 min</td>
+																</tr> -->
+						</table>
+						<a href="#">See all &rarr;</a>
+					</section>
+
+					<section class="calories">
+						<h2>Active Calories</h2>
+						<p class="calories__number">500</p>
+						<p class="calories__number">3500</p>
+						<p class="calories__number">14000</p>
+						<p class="calories__text">Today</p>
+						<p class="calories__text">Week</p>
+						<p class="calories__text">Month</p>
+					</section>
 				</div>
-				<div class="todo">
-					<div class="head">
-						<h3>Todos</h3>
-						<i class='bx bx-plus icon'></i>
-						<i class='bx bx-filter' ></i>
-	
+			</div>
+
+			<div class="grid-area-2">
+				<section class="friend-acitvity">
+					<h2>Friends Activities</h2>
+					<div class="friend-activity__activity">
+						<div class="friend-acitvity__picture"><div></div></div>
+						<div>
+							<h3 class="friend-activity__name">Jane</h3>
+							<p class="friend-activity__msg">just set a new record in cycling: 30 km!</p>
+						</div>
+					</div>
+					<div class="friend-activity__activity">
+						<div class="friend-acitvity__picture"><div></div></div>
+						<div>
+							<h3 class="friend-activity__name">Mike</h3>
+							<p class="friend-activity__msg">completed the 30-Day Running Streak Challenge!</p>
+						</div>
+					</div>
+					<div class="friend-activity__activity">
+						<div class="friend-acitvity__picture"><div></div></div>
+						<div>
+							<h3 class="friend-activity__name">Anna</h3>
+							<p class="friend-activity__msg">shared a new workout: 'Hill Sprints Interval'!</p>
+						</div>
+					</div>
+					<div class="friend-activity__activity">
+						<div class="friend-acitvity__picture"><div></div></div>
+						<div>
+							<h3 class="friend-activity__name">John</h3>
+							<p class="friend-activity__msg">just set a new record in running: 18 km!</p>
+						</div>
+					</div>
+					<div class="friend-activity__activity">
+						<div class="friend-acitvity__picture"><div></div></div>
+						<div>
+							<h3 class="friend-activity__name">Mila</h3>
+							<p class="friend-activity__msg">completed the 30-Day Running Streak Challenge!</p>
+						</div>
+					</div>
+					<div class="friend-activity__activity">
+						<div class="friend-acitvity__picture"><div></div></div>
+						<div>
+							<h3 class="friend-activity__name">John</h3>
+							<p class="friend-activity__msg">completed the 30-Day Running Streak Challenge!</p>
+						</div>
+					</div>
+					<div class="friend-activity__activity">
+						<div class="friend-acitvity__picture"><div></div></div>
+						<div>
+							<h3 class="friend-activity__name">Anna</h3>
+							<p class="friend-activity__msg">just set a new record in running: 14 km!</p>
+						</div>
 					</div>
-					<ul class="todo-list">
-						<li class="completed">
-							<p>Check Inventory</p>
-							<i class='bx bx-dots-vertical-rounded' ></i>
-						</li>
-						<li class="completed">
-							<p>Manage Delivery Team</p>
-							<i class='bx bx-dots-vertical-rounded' ></i>
-						</li>
-						<li class="not-completed">
-							<p>Contact Selma: Confirm Delivery</p>
-							<i class='bx bx-dots-vertical-rounded' ></i>
-						</li>
-						<li class="completed">
-							<p>Update Shop Catalogue</p>
-							<i class='bx bx-dots-vertical-rounded' ></i>
-						</li>
-						<li class="not-completed">
-							<p>Count Profit Analytics</p>
-							<i class='bx bx-dots-vertical-rounded' ></i>
-						</li>
-					</ul>
+				</section>
+
+				<section class="friends">
+					<h2>Friends</h2>
+					<div class="friends__friend">
+						<div class="friends__picture"><div></div></div>
+						<h3 class="friends__name">Jane</h3>
+						<p class="friends__msg">last seen 5 min ago</p>
+					</div>
+					<div class="friends__friend">
+						<div class="friends__picture"><div></div></div>
+						<h3 class="friends__name">Mike</h3>
+						<p class="friends__msg">last seen 6 hrs ago</p>
+					</div>
+					<div class="friends__friend">
+						<div class="friends__picture"><div></div></div>
+						<h3 class="friends__name">Anna</h3>
+						<p class="friends__msg">last seen 7 hrs ago</p>
+					</div>
+					<div class="friends__friend">
+						<div class="friends__picture"><div></div></div>
+						<h3 class="friends__name">John</h3>
+						<p class="friends__msg">last seen 2 days ago</p>
+					</div>
+					<div class="friends__friend">
+						<div class="friends__picture"><div></div></div>
+						<h3 class="friends__name">Mila</h3>
+						<p class="friends__msg">last seen 3 weeks ago</p>
+					</div>
+					<div class="friends__friend">
+						<div class="friends__picture"><div></div></div>
+						<h3 class="friends__name">Ben</h3>
+						<p class="friends__msg">last seen 1 year ago</p>
+					</div>
+				</section>
+			</div>
+
+			<div class="grid-area-3">
+				<section class="challenges">
+					<h2>Challenges</h2>
+					<div class="challenges__bar challenges__bar--1"></div>
+					<p class="challenges__text">30-Day Running Streak</p>
+					<div class="challenges__bar challenges__bar--2"></div>
+					<p class="challenges__text">30-Day Running Streak</p>
+					<div class="challenges__bar challenges__bar--3"></div>
+					<p class="challenges__text">30-Day Running Streak</p>
+				</section>
+
+				<section class="last-week">
+					<h2>Activities compared to last week</h2>
+					<div class="last-week__chart">
+						<div class="last-week__bar last-week__bar--1"><p>20min</p></div>
+						<div class="last-week__bar last-week__bar--2"><p>25min</p></div>
+						<div class="last-week__bar last-week__bar--3"><p>18min</p></div>
+						<div class="last-week__bar last-week__bar--4"><p>15min</p></div>
+						<div class="last-week__bar last-week__bar--5"><p>10min</p></div>
+						<div class="last-week__bar last-week__bar--6"><p>19min</p></div>
+					</div>
+					<div class="last-week__labels">
+						<p>Running</p>
+						<p>Swimming</p>
+						<p>Cycling</p>
+					</div>
+					<a href="#">See all stats &rarr;</a>
+				</section>
+
+				<div class="personal-bests">
+					<section class="personal-bests__best personal-bests__best--run">
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21 4h-3V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v1H3a1 1 0 0 0-1 1v3c0 4.31 1.8 6.91 4.82 7A6 6 0 0 0 11 17.91V20H9v2h6v-2h-2v-2.09A6 6 0 0 0 17.18 15c3-.1 4.82-2.7 4.82-7V5a1 1 0 0 0-1-1zM4 8V6h2v6.83C4.22 12.08 4 9.3 4 8zm14 4.83V6h2v2c0 1.3-.22 4.08-2 4.83z"/></svg>
+						<h2>Fastest 5K Run</h2>
+						<p>22 min</p>
+					</section>
+					<section class="personal-bests__best personal-bests__best--lift">
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21 4h-3V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v1H3a1 1 0 0 0-1 1v3c0 4.31 1.8 6.91 4.82 7A6 6 0 0 0 11 17.91V20H9v2h6v-2h-2v-2.09A6 6 0 0 0 17.18 15c3-.1 4.82-2.7 4.82-7V5a1 1 0 0 0-1-1zM4 8V6h2v6.83C4.22 12.08 4 9.3 4 8zm14 4.83V6h2v2c0 1.3-.22 4.08-2 4.83z"/></svg>
+						<h2>Haviest Deadlift</h2>
+						<p>250 lbs</p>
+					</section>
+					<section class="personal-bests__best personal-bests__best--plank">
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21 4h-3V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v1H3a1 1 0 0 0-1 1v3c0 4.31 1.8 6.91 4.82 7A6 6 0 0 0 11 17.91V20H9v2h6v-2h-2v-2.09A6 6 0 0 0 17.18 15c3-.1 4.82-2.7 4.82-7V5a1 1 0 0 0-1-1zM4 8V6h2v6.83C4.22 12.08 4 9.3 4 8zm14 4.83V6h2v2c0 1.3-.22 4.08-2 4.83z"/></svg>
+						<h2>Longest plank</h2>
+						<p>3 min</p>
+					</section>
 				</div>
 			</div>
 		</main>
-		<!-- MAIN -->
-	</section>
-	<!-- CONTENT -->
-	
-
-	<script src="script.js"></script>
-</body>
-</html>
+	</div>
+</div>
+  
   
-      <script id="rendered-js" >
-const allSideMenu = document.querySelectorAll('#sidebar .side-menu.top li a');
-
-allSideMenu.forEach(item => {
-  const li = item.parentElement;
-
-  item.addEventListener('click', function () {
-    allSideMenu.forEach(i => {
-      i.parentElement.classList.remove('active');
-    });
-    li.classList.add('active');
-  });
-});
-
-// TOGGLE SIDEBAR
-const menuBar = document.querySelector('#content nav .bx.bx-menu');
-const sidebar = document.getElementById('sidebar');
-
-// Sidebar toggle işlemi
-menuBar.addEventListener('click', function () {
-  sidebar.classList.toggle('hide');
-});
-
-// Sayfa yüklendiğinde ve boyut değişimlerinde sidebar durumunu ayarlama
-function adjustSidebar() {
-  if (window.innerWidth <= 576) {
-    sidebar.classList.add('hide'); // 576px ve altı için sidebar gizli
-    sidebar.classList.remove('show');
-  } else {
-    sidebar.classList.remove('hide'); // 576px'den büyükse sidebar görünür
-    sidebar.classList.add('show');
-  }
-}
-
-// Sayfa yüklendiğinde ve pencere boyutu değiştiğinde sidebar durumunu ayarlama
-window.addEventListener('load', adjustSidebar);
-window.addEventListener('resize', adjustSidebar);
-
-// Arama butonunu toggle etme
-const searchButton = document.querySelector('#content nav form .form-input button');
-const searchButtonIcon = document.querySelector('#content nav form .form-input button .bx');
-const searchForm = document.querySelector('#content nav form');
-
-searchButton.addEventListener('click', function (e) {
-  if (window.innerWidth < 768) {
-    e.preventDefault();
-    searchForm.classList.toggle('show');
-    if (searchForm.classList.contains('show')) {
-      searchButtonIcon.classList.replace('bx-search', 'bx-x');
-    } else {
-      searchButtonIcon.classList.replace('bx-x', 'bx-search');
-    }
-  }
-});
-
-// Dark Mode Switch
-const switchMode = document.getElementById('switch-mode');
-
-switchMode.addEventListener('change', function () {
-  if (this.checked) {
-    document.body.classList.add('dark');
-  } else {
-    document.body.classList.remove('dark');
-  }
-});
-
-// Notification Menu Toggle
-document.querySelector('.notification').addEventListener('click', function () {
-  document.querySelector('.notification-menu').classList.toggle('show');
-  document.querySelector('.profile-menu').classList.remove('show'); // Close profile menu if open
-});
-
-// Profile Menu Toggle
-document.querySelector('.profile').addEventListener('click', function () {
-  document.querySelector('.profile-menu').classList.toggle('show');
-  document.querySelector('.notification-menu').classList.remove('show'); // Close notification menu if open
-});
-
-// Close menus if clicked outside
-window.addEventListener('click', function (e) {
-  if (!e.target.closest('.notification') && !e.target.closest('.profile')) {
-    document.querySelector('.notification-menu').classList.remove('show');
-    document.querySelector('.profile-menu').classList.remove('show');
-  }
-});
-
-// Menülerin açılıp kapanması için fonksiyon
-function toggleMenu(menuId) {
-  var menu = document.getElementById(menuId);
-  var allMenus = document.querySelectorAll('.menu');
-
-  // Diğer tüm menüleri kapat
-  allMenus.forEach(function (m) {
-    if (m !== menu) {
-      m.style.display = 'none';
-    }
-  });
-
-  // Tıklanan menü varsa aç, yoksa kapat
-  if (menu.style.display === 'none' || menu.style.display === '') {
-    menu.style.display = 'block';
-  } else {
-    menu.style.display = 'none';
-  }
-}
-
-// Başlangıçta tüm menüleri kapalı tut
-document.addEventListener("DOMContentLoaded", function () {
-  var allMenus = document.querySelectorAll('.menu');
-  allMenus.forEach(function (menu) {
-    menu.style.display = 'none';
-  });
-});
-//# sourceURL=pen.js
-    </script>
-
   
 </body>