Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .container
	.menu-column
		ul(class='nav')
			li(class='pulse')
			li(class='chat')
			li(class='calendar')
			li(class='clipboard')
			li(class='settings')
		.profile
			img(src='https://placeimg.com/100/100/face')
	.summary-column
		.profile-img#profileImage
			img(src='https://placeimg.com/400/400/face')
			.name
				.
					Jana <br> Novakova
		.statistics
			h2 summary
			.age
				span(class='title title-age') 22
			.weight
				span(class='title title-weight') 53 kg
			.float-none
			.height
				.icon
				.data
					span 172 cm
			.bmi
				span(class='title title-bmi') 20.4
			.fat
				span(class='title title-fat') 11
					span(class='percentage') %
			.float-none
			h2(class='allergies') allergies
			.row
				.
					peanuts
				.severity
					.fill(style="width: 45%; height: inherit;")
			.row
				.
					penicilin
				.severity
					.fill(style="width: 80%; height: inherit;")
	.content-column
		.header-container#headerContainer
			.nav
				.content
					p 
						| hi 
						span(class='name') jana
						|, it seems you are in
					span(class='shape score') good
					span(class='shape')  shape
			.select-boxes
				.content
					.select-wrapper
						select
							option Bl. Pressure
					.select-wrapper
						select
							option Today
			.float-none
			.graph
				canvas(id='bpChart' style='position: relative; z-index: 100;')
		.split-container
			.split
				h3 Temperature
				.temperature
					.
						36.7
				.split-graph
					canvas(id='temperatureGraph')
			.split
				h3 Calories burned
				.calories
					.
						537
				.split-graph
					canvas(id='calorieGraph')
			.split
				h3 Heart rate
				.heart-rate
					.
						87
				.split-graph
					canvas(id='heartRateGraph')
		.sleep
			.totals
				.collective
					span(class='hours') 8
					span(class='minutes') 25
					p Total sleep time
				.split.first
					.
						6h 12m
					p Deep
				.split
					.
						2h 13m
					p Light
			.sleep-graph
				.sleep-graph-container
					h2  Sleep Analytics
					.sleep-select-wrapper
						select
							option(value='today') Today
					.chart-container
						canvas(id='sleepChart')
		.float-none
		.split-container
			.split.bottom
				h2 Appointments
				.appointments
					.calendar-container
						.calendar
							.
								25
							span(class='date') th
							span(class='month') Jul
						.content
							table(class='appointment-table')
								tr
									td(id='time')
										.
											13:00
								tr
									td(id='title')
										.
											Dentist
								tr
									td(id='name')
										.
											Jozef Novotny
			.split.bottom
				h2 Doctors around
				table(class='doctor-grid')
					tr
						td(height='65')
							img(src='https://placeimg.com/65/65/people')
						td
							img(src='https://placeimg.com/65/65/face')
						td
							img(src='https://placeimg.com/65/65/people')
					tr
						td
							img(src='https://placeimg.com/65/65/face')
						td
							img(src='https://placeimg.com/65/65/people')
						td(id='expand')
							.background
								.
									+8

			.split.bottom
				#map
				.map-overlay
					h2 Steps today
					span(class='steps') 4578
					span(class='distance') 1.7 km
	.search-column
		.search-container
			img(src='https://svgshare.com/i/56w.svg')
			input(type='text' placeholder='Search')
		.activity-list
			h3 Recent Activity
			.activity
				.image-container
					img(src='https://placeimg.com/40/40/face')
				.text
					span(class='name') Peter Smith 
					| added a new appointment to your calendar.
					span(class='time-ago') 2 hours ago
			.activity
				.image-container
					img(src='https://placeimg.com/40/40/person')
				.text
					span(class='name') Katarina Rychia 
					| commented on your Results 09
					span(class='time-ago') 2 hours ago
			.activity
				.image-container
					img(src='https://placeimg.com/40/40/face')
				.text
					span(class='name') Tereza Dvorak 
					| added two attachments to Results 238.
					span(class='time-ago') 6 days ago
			.activity
				.image-container
					img(src='https://placeimg.com/40/40/person')
				.text
					span(class='name') Peter Smith 
					| added a new appointment to your calendar.
					span(class='time-ago') 7 days ago
			.your-doctors
				h3 Your Doctors
				.doctor
					.image-container
						img(src='https://placeimg.com/40/40/person')
					.text
						span(class='name-large') Peter Smith
						span(class='title') Dentist
				.doctor
					.image-container
						img(src='https://placeimg.com/40/40/face')
					.text
						span(class='name-large') Katarina Rychia 
						span(class='title') Dentist
				.doctor
					.image-container
						img(src='https://placeimg.com/40/40/person')
					.text
						span(class='name-large') Tereza Dvorak 
						span(class='title') Physician
				button(class='find-doctor') Find new doctor
			
              
            
!

CSS

              
                body {
	font-family: 'Roboto', sans-serif;
	background: #7e8b91;
	margin: 1%;
	box-sizing: border-box;
}

.container {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	width: 100%;
	min-width: 1180px;
	margin: auto;
	justify-content: center;
}

.menu-column {
	position: relative;
	width: 6%;
	max-width: 50px;
	background: linear-gradient(#2e96ea, #30c8ca);
	min-width: 70px;
	.profile {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 65px;
		img {
			position: relative;
			width: 100%;
			height: 100%;
		}
		&:after {
			content: '';
			display: block;
			height: 10px;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: rgba(245, 244, 120, 0.7);
		}
	}
	.nav {
		list-style-type: none;
		margin: 0 0 100px;
		padding: 0;
		li {
			width: 100%;
			height: 3.5em;
			margin: 0;
			&:hover {
				background-color: #57a8ed;
				cursor: pointer;
			}
		}
	}

	.pulse {
		background-image: url("https://svgshare.com/i/4w9.svg");
		background-position: center;
		background-size: 25px;
		background-repeat: no-repeat;
	}

	.chat {
		@extend .pulse;
		background-image: url("https://svgshare.com/i/4uF.svg");
	}

	.calendar {
		@extend .pulse;
		background-image: url("https://svgshare.com/i/4vc.svg");
	}

	.clipboard {
		@extend .pulse;
		background-image: url("https://svgshare.com/i/4wJ.svg")
	}

	.settings {
		@extend .pulse;
		background-image: url("https://svgshare.com/i/4vd.svg")
	}
}

.float-none {
	clear: both;
}

.summary-column {
	position: relative;
	z-index: 2;
	width: 17%;
	min-width: 225px;
	max-width: 300px;
	background: linear-gradient(lighten(#3d6281, 15%), #42656f);
	.profile-img {
		position: relative;
		height: 331px;
		img {
			width: 100%;
			height: 100%;
		}
		.name {
			position: absolute;
			bottom: 25px;
			left: 1em;
			color: white;
			font-size: 1.5em;
			font-weight: 300;
		}
	}
	.statistics {
		margin: 20px 6% 0 6%;		
		h2 {
			color: #a1afbc;
			text-transform: uppercase;
			font-size: 0.75em;
			letter-spacing: 1px;
		}
		.age {
			display: block;
			width: 50%;
			height: 100px;
			box-sizing: border-box;
			float: left;
			border-right: 1px solid rgba(255, 255, 255, 0.2);
			text-align: center;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		}
		.title {
			color: white;
			letter-spacing: 2px;
			font-size: 1.5em;
			position: relative;
			margin-top: -13px;
			display: block;
			line-height: 100px;
			vertical-align: middle;
			&:after {
				color: #90a0aa;
				font-size: 0.7em;
				letter-spacing: 0px;
				position: absolute;
				bottom: -26px;
				left: 50%;
				transform: translateX(-50%)
			}
		}
		.weight {
			border-right: none;
			@extend .age;
		}
		.title-weight {
			&:after {
				content: 'Weight';
			}
		}
		.title-age {
			&:after {
				content: 'Age';
			}
		}
		.title-bmi {
			&:after {
				content: 'BMI';
			}
		}
		.title-fat {
			&:after {
				content: 'Fat';
			}
		}
		.height {
			height: 150px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
			.icon {
				display: block;
				width: 50%;
				height: 100%;
				float: left;
				background:
					url("https://svgshare.com/i/4xQ.svg");
					background-size: 120px;
					background-repeat: no-repeat;
					background-position: center;
			}
			.data {
				display: block;
				width: 50%;
				float: left;
				span {
					display: block;
					position: relative;
					line-height: 130px;
					vertical-align: middle;
					font-size: 1.75em;
					color: white;
					&:after {
						content: 'Height';
						color: #90a0aa;
						font-size: 0.7em;
						line-height: 20px;
						letter-spacing: 0px;
						position: absolute;
						left: 0;
						bottom: 25px;
					}
				}
			}
		}
		.bmi {
			@extend .age;
			border-bottom: none;
		}
		.fat {
			@extend .bmi;
			border-right: none;
		}
		.percentage {
			font-size: 0.7em;
			line-height: 0.7em;
		}
	}
	.allergies {
		padding-top: 20px;
	}
	.row {
		position: relative;
		height: 50px;
		line-height: 50px;
		text-transform: capitalize;
		border-top: 1px solid #537482;
		color: #f1f3f4;
		font-size: 0.8em;
		&:last-child {
			border-bottom: 1px solid #537482;
			margin-bottom: 50px;
		}
		.severity {
			position: absolute;
			top: 50%;
			left: 75%;
			transform: translate(-50%, -75%);
			width: 100px;
			height: 5px;
			background: #567681;
		}
		.fill {
			background: #c3f8ab;
		}
	}
}

.content-column {
	background: white;
	width: 62%;
	min-width: 900px;
	@media only screen and (max-width: 1250px) {
		width: 77%;
	}
	z-index: 0;
	.header-container {
		width: 100%;
		height: 331px;
		overflow: hidden;
	}
	.nav {
		width: 50%;
		float: left;
		font-size: 0.9em;
		font-weight: 500;
		line-height: 1;
		.content {
			margin: 50px 0 0 50px;
			white-space: nowrap;
		}
		p {
			text-transform: uppercase;
			color: #899191;
			letter-spacing: 1px;
		}
		.name {
			color: #636d6d;
		}
		.shape {
			font-family: 'Nunito', sans-serif;
			font-weight: 200;
			font-size: 6em;
			color: #8b9494;	
		}
		.score {	
			color: #34d0c4;
		}
	}
	.select-boxes {
		float: left;
		width: 50%;
		.content {
			margin: 40px;
			float: right;
		}
	}
	.split-container {
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		-webkit-flex-direction: row;
		width: 100%;
		margin: auto;
		justify-content: center;
		.split {
			position: relative;
			width: calc(100% / 3);
			min-width: 300px;
			text-align: center;
			font-size: 1.7em;
			font-weight: 300;
			border-right: 1px solid #dddfe1;
			border-bottom: 1px solid #dddfe1;
			.split-graph {
				max-width: 100%;
				height: 125px;
				overflow: hidden;
			}
			h3 {
				font-size: 1.1em;
				font-weight: 300;
				margin: 50px 0 0 0;
				color: #566161;
			}
			&:last-child {
				border-right: none;
			}
		}
		.temperature {
			display: block;
			color: #58676c;
			font-size: 2em;
			line-height: 2em;
			width: 225px;
			margin: auto;
			position: relative;
			font-weight: 300;
			margin: 10px auto;
			&:before {
				content: '';
				position: absolute;
				height: 35px;
				width: 35px;
				background: 
					url('https://svgshare.com/i/50V.svg');
					background-size: 35px 35px;
					background-position: center;
					background-repeat: no-repeat;
				left: 20px;
				top: 50%;
				transform: translateY(-50%);
			}
			&:after {
				content: '°';
				font-weight: 300;
				color: #889599;
				position: absolute;
				right: 35px;
			}
		}
		.calories {
			@extend .temperature;
			&:before {
				background:
					url('https://svgshare.com/i/52_.svg');
				background-size: 35px 35px;
			}
			&:after {
				content: 'cal';
				font-size: 0.5em;
				right: 30px;
				bottom: -9px;
			}
		}
		.heart-rate {
			@extend .calories;
			&:before {
				background:
					url('https://svgshare.com/i/51m.svg');
				background-size: 35px 35px;
				left: 30px;
			}
			&:after {
				content: 'bpm';
				right: 20px;
			}
		}
	}
	.sleep {
		.totals {
			width: 30%;
			float: left;
			.collective {
				margin-top: 75px;
				margin-left: 15%;
				.hours {
					position: relative;
					color: #58676c;
					font-size: 3em;
					height: 20px;
					font-weight: 300;
					margin-right: 0.5em;
					&:after {
						position: absolute;
						font-size: 0.4em;
						color: #899599;
						bottom: 10px;
						right: -15px;
						height: 20px;
						line-height: 20px;
						content: 'h';
					}
				}
				.minutes {
					@extend .hours;
					&:after {
						right: -22px;
						content: 'm';
					}
				}
				p {
					color: #a7afb2;
					font-weight: 300;
					margin: 0;
					margin-top: -5px;
				}
			}
			.split {
				display: block;
				float: left;
				width: 20%;
				margin: 30px 15%;
				font-weight: bold;
				color: #58676c;
				p {
					color: #a7afb2;
					font-weight: 300;
					margin: 0;
				}
			}
			.first {
				// :first-child is being a bit funny...
				margin-right: 0;
			}
		}
		.sleep-graph {
			width: 70%;
			float: left;
			.sleep-graph-container {
				width: 80%;
				margin: auto;
				margin-top: 30px;
				.chart-container {
					height: 200px;
					margin-top: -20px;
					padding-bottom: 20px;
				}
			}
			h2 {
				display: inline-block;
				margin: 0;
				color: #828989;
				font-weight: 300;
				text-indent: 15px;
				line-height: 30px;
			}
			.sleep-select-wrapper {
				@extend .select-wrapper;
				display: block;
				float: right;
			}
		}
	}
	.bottom {
		border-bottom: none !important;
		border-top: 1px solid #dddfe1;
		h2 {
			margin: 35px 0;
			font-size: 0.9em;
			font-weight: 300;
		}
	}
	.appointments {
		margin: 0 20%;
		.calendar-container {
			height: 140px;
			padding-top: 24px;
			min-width: 185px;
		}
		.calendar {
			width: 92px;
			float: left;
			background: #f1f4f4;
			padding: 14px 0;
			.date {
				 font-size: 0.7em;
			}
			.month {
				display: block;
				text-transform: capitalize;
			}
		}
		.content {
			box-sizing: margin-box;
			width: 50%;
			float: left;
			.appointment-table {
				margin-left: 15px;
				height: 92px;
				text-align: left;
				font-size: 0.55em;
				border-collapse: collapse;
				td {
					padding: 0;
				}
			}
		}
	}
	.map-overlay {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		.steps {
			display: block;
			font-size: 2em;
			color: #58676c;
		}
		.distance {
			display: block;
			font-size: 0.75em;
			color: #a6acaf;
			font-weight: 400;
		}
	}
}

.search-column {
	background: #E3E8E9;
	width: 15%;
	z-index: 1;
	@media only screen and (max-width: 1250px) {
		display: none;
	}
	h3 {
		text-transform: uppercase;
		font-size: 0.9em;
		font-weight: 400;
		color: #92999A;
		margin: 20px 0;
		letter-spacing: 1px;
	}
	.search-container {
		position: relative;
		width: 100%;
		height: 65px;
		img {
			position: absolute;
			left: 10px;
			top: 50%;
			transform: translateY(-50%); 
			width: 25px;
			height: 25px;
		}
		input {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			border: 0;
			background: #D9DFE1;
			color: #9DA5A6;
			font-size: 1.25em;
			font-weight: 300;
			text-indent: 20%;
		}
	}
	.activity-list {
		width: 80%;
		margin: auto;
	}
	.activity {
		font-size: 0;
		height: 75px;
		margin-bottom: 15px;
		cursor: pointer;
		.image-container {
			display: inline-block;
			width: 20%;
			height: 55px;
			img {
				display: block;
				border-radius: 50%;
			}
		}
		.text {
			display: inline-block;
			width: calc(80% - 10px);
			font-size: 0.75rem;
			margin-left: 10px;
			letter-spacing: 1px;
			color: #646F73;
			vertical-align: top;
		}
		.time-ago {
			display: block;
			margin-top: 3px;
			color: #A9B1B2;
		}
		.name {
			font-weight: 500;
			color: darken(#606B70, 10%);
		}
		.name-large {
			font-size: 1.3em;
		}
		.title {
			display: block;
			color: #A9B1B2;
		}
	}
	.doctor {
		@extend .activity;
		height: 40px;
		margin-bottom: 30px;
	}
	.find-doctor {
		width: 200px;
		height: 40px;
		border-radius: 20px;
		background: #F9FAFB;
		border: 0;
		font-size: 0.9em;
		color: darken(#808F8F, 15%);
		cursor: pointer;
	}
}

.doctor-grid {
	margin: auto;
	img {
		display: block;
	}
}

.graph {
	width: 110%;
	margin-top: 70px;
	margin-left: -7%;
	height: 125px;
	z-index: 0;
}

#temperatureGraph {
	margin: auto;
}

#calorieGraph {
	margin: auto;
}

#heartRateGraph {
	margin: auto;
}

#time {
	color: #979ea0;
}

#title {
	color: #30cec2;
	font-weight: 500;
}

#name {
	color: #5e696d;
}

#expand {
	color: #fdfefe;
	font-weight: 400;
	.background {
		width: 65px;
		height: 65px;
		line-height: 65px;
		background: #2bcdc1;
		cursor: pointer;
	}
}

#map {
	width: 100%;
	height: 314px;
	opacity: 0.3;
}

.select-wrapper{
	display: inline-block;
	position: relative;
	&:after {
		content: '';
		width: 9px;
		height: 9px;
		background:
			url('https://svgshare.com/i/4xe.svg');
		background-size: 9px;
		background-position: center;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%)
	}
}
select {
	position: relative;
	font-family: 'Roboto', sans-serif;
	font-size: 0.9em;
	font-weight: 500;
	margin-left: 20px;
	border: 1px solid #d6dadc;
	color: #5d7171;
	width: 120px;
	height: 30px;
	border-radius: 25px;
	text-indent: 7px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
}

#sleepChart {
	margin: 50px 0;
	height: 200px;
}
              
            
!

JS

              
                // Blood Pressure Chart
let bloodPressureChart = document.getElementById('bpChart').getContext('2d')
let gradient = bloodPressureChart.createLinearGradient(0, 0, 0, 100)
gradient.addColorStop(0, "#29a9e1")
gradient.addColorStop(1, "#2ccec2")

let chart = new Chart(bloodPressureChart, {
	type: 'line',
	// The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "Blood Pressure",
            backgroundColor: gradient,
            borderColor: 'transparent',
            data: [105, 112, 105, 120, 110, 119, 110],
        }]
    },

    // Configuration options go here
    options: {
		 responsive: true,
		 maintainAspectRatio: false,
		 elements: {
       	point: {
        		radius: 2
      	}
    	 },
		 legend: {
			 display: false
		 },
		 layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
		 scales: {
			xAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
					display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 }
				 }
			}],
			 yAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
			 		display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 },
					 suggestedMin: 100
				 }
		 	}]
		 }
	 }
})

// Sleep Chart
let sleepChartContainer = document.getElementById('sleepChart').getContext('2d')
let sleepChartGradient = sleepChartContainer.createLinearGradient(0, 0, 400, 0)
sleepChartGradient.addColorStop(0, "#44D1CA")
sleepChartGradient.addColorStop(1, "#28A3D0")

let sleepChartBackgroundGradient = sleepChartContainer.createLinearGradient(0, 0, 400, 0)
sleepChartBackgroundGradient.addColorStop(0, "rgba(68, 209, 202, 0.1)")
sleepChartBackgroundGradient.addColorStop(1, "rgba(40, 163, 208, 0.1)")

let sleepChart = new Chart(sleepChartContainer, {
	type: 'line',
	// The data for our dataset
    data: {
        labels: ["22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "1", "2", "3"],
        datasets: [{
            label: "Hours of sleep",
            backgroundColor: sleepChartBackgroundGradient,
            borderColor: sleepChartGradient,
            data: [7.5, 6.7, 7.8, 8.2, 6.7, 6.5, 8.2, 7.5, 8.2, 6.9, 7.2, 7.5, 6.9],
        }]
    },

    // Configuration options go here
    options: {
		 responsive: true,
		 maintainAspectRatio: false,
		 elements: {
       	point: {
        		radius: 2
      	}
    	 },
		 legend: {
			 display: false
		 },
		 layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
		 scales: {
			xAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
					display: true,
					color: "#F3F4F4"
				},
				ticks: {
					fontColor: "#BDC3C6"
				}
			}],
			 yAxes: [{
				maxBarThickness: 1,
				gridLines: {
					drawBorder: true,
			 		display: false,
					color: "#F3F4F4"
				},
				 ticks: {
					 callback: function(value, index, values) {
						 return null
					 },
					 suggestedMin: 6
				 }
		 	}]
		 }
	 }
})

// Temperature Chart
let temperatureChartContainer = document.getElementById('temperatureGraph').getContext('2d')
let temperatureGradient = temperatureChartContainer.createLinearGradient(0, 0, 100, 0)
temperatureGradient.addColorStop(0, "#feb35e")
temperatureGradient.addColorStop(1, "#fe8550")
let temperatureChart = new Chart(temperatureChartContainer, {
	type: 'line',
	// The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: gradient,
            borderColor: temperatureGradient,
			   fill: false,
            data: [105, 108, 105, 110, 108, 105, 110],
        }]
    },

    // Configuration options go here
    options: {
		 responsive: true,
		 maintainAspectRatio: false,
		 tooltips: {
			 enabled: true
		 },
		 elements: {
       	point: {
        		radius: 0
      	}
    	 },
		 legend: {
			 display: false
		 },
		 layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
		 scales: {
			xAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
					display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 }
				 }
			}],
			 yAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
			 		display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 },
					 suggestedMin: 100
				 }
		 	}]
		 }
	 }
})

// Calorie Chart
let calorieChartContainer = document.getElementById('calorieGraph').getContext('2d')
let calorieChartGradient = calorieChartContainer.createLinearGradient(0, 0, 100, 0)
calorieChartGradient.addColorStop(0, "#03d7a6")
calorieChartGradient.addColorStop(1, "#22b6d1")
let calorieChart = new Chart(calorieChartContainer, {
		type: 'line',
	// The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: gradient,
            borderColor: calorieChartGradient,
			   fill: false,
            data: [105, 108, 115, 105, 110, 112, 109],
        }]
    },

    // Configuration options go here
    options: {
		 responsive: true,
		 maintainAspectRatio: false,
		 tooltips: {
			 enabled: true
		 },
		 elements: {
       	point: {
        		radius: 0
      	}
    	 },
		 legend: {
			 display: false
		 },
		 layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
		 scales: {
			xAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
					display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 }
				 }
			}],
			 yAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
			 		display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 },
					 suggestedMin: 100
				 }
		 	}]
		 }
	 }
})

// Heart Rate Chart
let heartRateChartContainer = document.getElementById('heartRateGraph').getContext('2d')
let heartRateChartGradient = heartRateChartContainer.createLinearGradient(0, 0, 100, 0)
heartRateChartGradient.addColorStop(0, "#fd6eb5")
heartRateChartGradient.addColorStop(1, "#ca65ff")
let heartRateChart = new Chart(heartRateChartContainer, {
		type: 'line',
	// The data for our dataset
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: gradient,
            borderColor: heartRateChartGradient,
			   fill: false,
            data: [105, 108, 109, 115, 108, 105, 104],
        }]
    },

    // Configuration options go here
    options: {
		 responsive: true,
		 maintainAspectRatio: false,
		 tooltips: {
			 enabled: true
		 },
		 elements: {
       	point: {
        		radius: 0
      	}
    	 },
		 legend: {
			 display: false
		 },
		 layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }
        },
		 scales: {
			xAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
					display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 }
				 }
			}],
			 yAxes: [{
				maxBarThickness: 0,
				gridLines: {
					drawBorder: false,
			 		display: false
				},
				 ticks: {
					 callback: function(vlaue, index, values) {
						 return null
					 },
					 suggestedMin: 100
				 }
		 	}]
		 }
	 }
})

// Current Position Helper
function getLocation() {
	return new Promise((resolve, reject) => {
		try {
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(function(position) {
					resolve(position.coords)
				})
			} else {
				throw Error('Geolocation disabled.')
			}
		} catch(err) {
			console.log(err)
			reject(err)
		}
	})
}

document.addEventListener("DOMContentLoaded", function() {
	getLocation()
		.then((coords) => {
			googleMapsInit(coords.longitude, coords.latitude)
		})
		.catch((err) => {
			console.log(err)
			googleMapsInit()
		})
})

// Initiate Google Maps render
function googleMapsInit(longitude, latitude) {
	let map = document.getElementById('map')
	// Default Lon/Lat to UK if geolocation is disabled 
	if (!longitude || !latitude) {
		let longitude = 3.4360
		let latitude = 55.3781
	}
	map = new google.maps.Map(document.getElementById('map'), {
	  center: {lat: latitude, lng: longitude},
	  zoom: 7,
		disableDefaultUI: true,
		styles: [
		  {
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#f5f5f5"
				}
			 ]
		  },
		  {
			 "elementType": "geometry.fill",
			 "stylers": [
				{
				  "color": "#ffffff"
				}
			 ]
		  },
		  {
			 "elementType": "labels",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "elementType": "labels.icon",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#616161"
				}
			 ]
		  },
		  {
			 "elementType": "labels.text.stroke",
			 "stylers": [
				{
				  "color": "#f5f5f5"
				}
			 ]
		  },
		  {
			 "featureType": "administrative.land_parcel",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "administrative.land_parcel",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#bdbdbd"
				}
			 ]
		  },
		  {
			 "featureType": "administrative.neighborhood",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "poi",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#eeeeee"
				}
			 ]
		  },
		  {
			 "featureType": "poi",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#757575"
				}
			 ]
		  },
		  {
			 "featureType": "poi.business",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "poi.park",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#e5e5e5"
				}
			 ]
		  },
		  {
			 "featureType": "poi.park",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#9e9e9e"
				}
			 ]
		  },
		  {
			 "featureType": "road",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#ffffff"
				}
			 ]
		  },
		  {
			 "featureType": "road",
			 "elementType": "labels.icon",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "road.arterial",
			 "elementType": "labels",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "road.arterial",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#757575"
				}
			 ]
		  },
		  {
			 "featureType": "road.highway",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#dadada"
				}
			 ]
		  },
		  {
			 "featureType": "road.highway",
			 "elementType": "labels",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "road.highway",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#616161"
				}
			 ]
		  },
		  {
			 "featureType": "road.local",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "road.local",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#9e9e9e"
				}
			 ]
		  },
		  {
			 "featureType": "transit",
			 "stylers": [
				{
				  "visibility": "off"
				}
			 ]
		  },
		  {
			 "featureType": "transit.line",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#e5e5e5"
				}
			 ]
		  },
		  {
			 "featureType": "transit.station",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#eeeeee"
				}
			 ]
		  },
		  {
			 "featureType": "water",
			 "elementType": "geometry",
			 "stylers": [
				{
				  "color": "#c9c9c9"
				}
			 ]
		  },
		  {
			 "featureType": "water",
			 "elementType": "labels.text.fill",
			 "stylers": [
				{
				  "color": "#9e9e9e"
				}
			 ]
		  }
		]
	})
}
              
            
!
999px

Console